Skip to content

bash
npm install @hua-labs/hua
tsx
import { EmotionButton, EmotionMeter, EmotionSelector, EmotionAnalysis } from "@hua-labs/hua";
Pro
AI-Ready

  • EmotionButton -
  • EmotionMeter -
  • EmotionSelector -
  • EmotionAnalysis -

EmotionButton

EmotionMeter

85%
60%
30%

EmotionSelector

😊
기쁨
😢
슬픔
😠
화남
❤️
평온
설렘
😐
걱정
❤️
감사
👤
외로움
감정 강도65%
약함보통강함

EmotionAnalysis

주요 감정

80% 강도

감정 분포

60%
30%
10%

분석 지표

감정 강도
강함
긍정성
긍정적
에너지
높음

감정 키워드

happiness
gratitude
relaxation
peace
hope

EmotionButton Props

emotion*string-docs:components.emotion.props.emotionButton.emotion
isSelectedbooleanfalsedocs:components.emotion.props.emotionButton.isSelected
size"sm" | "md" | "lg""md"docs:components.emotion.props.emotionButton.size

EmotionMeter Props

value*number-docs:components.emotion.props.emotionMeter.value
maxnumber100docs:components.emotion.props.emotionMeter.max
size"sm" | "md" | "lg""md"docs:components.emotion.props.emotionMeter.size
color"blue" | "green" | "yellow" | "red" | ..."blue"docs:components.emotion.props.emotionMeter.color

EmotionSelector Props

selectedEmotionstring-docs:components.emotion.props.emotionSelector.selectedEmotion
onEmotionSelect(emotion: string) => void-docs:components.emotion.props.emotionSelector.onEmotionSelect
layout"grid" | "list" | "compact""grid"docs:components.emotion.props.emotionSelector.layout
variant"button" | "card" | "chip""button"docs:components.emotion.props.emotionSelector.variant
showIntensitybooleanfalsedocs:components.emotion.props.emotionSelector.showIntensity
emotionsArray<{key, label, icon?, color?}>-docs:components.emotion.props.emotionSelector.emotions

EmotionAnalysis Props

primaryEmotion{ name: string, intensity: number, color?: string }-docs:components.emotion.props.emotionAnalysis.primaryEmotion
emotionDistributionArray<{emotion, percentage, color}>-docs:components.emotion.props.emotionAnalysis.emotionDistribution
keywordsstring[]-docs:components.emotion.props.emotionAnalysis.keywords
layout"compact" | "detailed" | "card""detailed"docs:components.emotion.props.emotionAnalysis.layout
showMeterbooleantruedocs:components.emotion.props.emotionAnalysis.showMeter

EmotionButtontsx
1import { EmotionButton } from '@hua-labs/hua';
2 
3<EmotionButton emotion="😊" isSelected size="lg" />
4<EmotionButton emotion="😢" size="md" />
EmotionMetertsx
1import { EmotionMeter } from '@hua-labs/hua';
2 
3<EmotionMeter value={75} color="green" size="md" />
EmotionSelectortsx
1import { EmotionSelector } from '@hua-labs/hua';
2 
3<EmotionSelector
4 selectedEmotion={selectedEmotion}
5 onEmotionSelect={setSelectedEmotion}
6 layout="grid"
7 variant="card"
8 showIntensity
9 intensity={intensity}
10 onIntensityChange={setIntensity}
11/>
EmotionAnalysistsx
1import { EmotionAnalysis } from '@hua-labs/hua';
2 
3<EmotionAnalysis
4 primaryEmotion={{ name: "기쁨", intensity: 80, color: "yellow" }}
5 emotionDistribution={[
6 { emotion: "기쁨", percentage: 60, color: "bg-yellow-500" },
7 { emotion: "평온", percentage: 40, color: "bg-green-500" },
8 ]}
9 keywords={["행복", "만족", "감사"]}
10 intensity={80}
11 positivity={85}
12 energy={70}
13 layout="detailed"
14/>

😊 (joy)
😢 (sadness)
😠 (anger)
😌 (calm)
(excitement)
😐 (worry)
💜 (gratitude)
👤 (loneliness)

  • docs:components.emotion.accessibility.keyboard: docs:components.emotion.accessibility.keyboardDesc
  • docs:components.emotion.accessibility.focus: docs:components.emotion.accessibility.focusDesc
  • docs:components.emotion.accessibility.colorLabel: docs:components.emotion.accessibility.colorLabelDesc