@hua-labs/ui
v1.2.0
bash
npm install @hua-labs/huatsx
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 |
isSelected | boolean | false | docs: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 |
max | number | 100 | docs: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
selectedEmotion | string | - | 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 |
showIntensity | boolean | false | docs:components.emotion.props.emotionSelector.showIntensity |
emotions | Array<{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 |
emotionDistribution | Array<{emotion, percentage, color}> | - | docs:components.emotion.props.emotionAnalysis.emotionDistribution |
keywords | string[] | - | docs:components.emotion.props.emotionAnalysis.keywords |
layout | "compact" | "detailed" | "card" | "detailed" | docs:components.emotion.props.emotionAnalysis.layout |
showMeter | boolean | true | docs: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<EmotionSelector4 selectedEmotion={selectedEmotion}5 onEmotionSelect={setSelectedEmotion}6 layout="grid"7 variant="card"8 showIntensity9 intensity={intensity}10 onIntensityChange={setIntensity}11/>EmotionAnalysistsx
1import { EmotionAnalysis } from '@hua-labs/hua';2 3<EmotionAnalysis4 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