@hua-labs/ui 2.2.0 → 2.3.0

package/dist/index.d.mts

@@ -1,49 +1,56 @@
 import React$1 from 'react';
-export { I as Input, L as Label, N as NumberInput, c as NumberInputProps, S as Switch } from './Switch-Dzm5TLR3.mjs';
+export { I as Input, L as Label, N as NumberInput, c as NumberInputProps, S as Switch } from './Switch-D0l7SJrz.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { e as emotionIcons, s as statusIcons, I as IconName } from './icons-DcOBy9Hf.mjs';
 export { i as iconCategories } from './icons-DcOBy9Hf.mjs';
-import { A as AllIconName } from './ComponentLayout-BhM4VSoq.mjs';
-export { C as ComponentLayout, P as ProjectIconName, g as getIconNameForProvider, i as iconNames, a as iconProviderMapping, b as isValidIconName } from './ComponentLayout-BhM4VSoq.mjs';
-export { M as Modal, a as ModalProps } from './Modal-CrXmb3Ll.mjs';
-export { C as Container, a as ContainerProps, b as Section, c as SectionHeaderConfig, S as SectionProps, s as sectionVariants } from './Section-BWzyshgX.mjs';
-export { Alert, AlertError, AlertInfo, AlertSuccess, AlertWarning, LoadingSpinner, Toast, ToastProvider, Tooltip, TooltipDark, TooltipLight, useToast, useToastSafe } from './feedback.mjs';
+import { A as AllIconName } from './ComponentLayout-Clf6C2jV.mjs';
+export { C as ComponentLayout, P as ProjectIconName, g as getIconNameForProvider, i as iconNames, a as iconProviderMapping, b as isValidIconName, r as registerLucideResolver } from './ComponentLayout-Clf6C2jV.mjs';
+export { M as Modal, a as ModalProps } from './Modal-DKKtBtbh.mjs';
+export { C as Container, a as ContainerProps, b as Section, c as SectionHeaderConfig, S as SectionProps } from './Section-DKdIG1sg.mjs';
+export { A as Alert, a as AlertError, b as AlertInfo, c as AlertSuccess, d as AlertWarning, L as LoadingSpinner, T as Toast, e as ToastProvider, f as Tooltip, g as TooltipDark, h as TooltipLight, u as useToast, i as useToastSafe } from './Tooltip-Cv7nYhPW.mjs';
 export { ThemeProvider, ThemeProviderProps, ThemeProviderState, useTheme } from './theme.mjs';
 import { ClassValue } from 'clsx';
-import { C as Color, S as Size$1, E as ExtendedVariant } from './common-YLvZxA_K.mjs';
-export { B as BaseVariant } from './common-YLvZxA_K.mjs';
+import { C as Color, S as Size$1, E as ExtendedVariant } from './common-Bej8Okcg.mjs';
+export { B as BaseVariant } from './common-Bej8Okcg.mjs';
+import { DotOptions, StyleObject } from '@hua-labs/dot';
+export { DotStyleMap, StyleObject } from '@hua-labs/dot';
 import '@phosphor-icons/react';
-import 'class-variance-authority/types';
-import 'class-variance-authority';
 
-/**
- * 버튼 스타일 변형 / Button style variant
- */
+type BoxElement = "div" | "section" | "article" | "aside" | "main" | "nav" | "header" | "footer" | "figure" | "figcaption" | "details" | "summary" | "fieldset" | "form" | "ol" | "ul" | "li";
+interface BoxProps extends Omit<React$1.HTMLAttributes<HTMLElement>, 'className'> {
+    as?: BoxElement;
+    dot?: string;
+}
+declare const Box: React$1.ForwardRefExoticComponent<BoxProps & React$1.RefAttributes<HTMLElement>>;
+
+type TextElement = "span" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "em" | "strong" | "small" | "s" | "mark" | "abbr" | "time" | "code" | "pre" | "blockquote" | "cite" | "q";
+interface TextProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "className"> {
+    as?: TextElement;
+    dot?: string;
+    /** For as="label" — associates the label with a form control */
+    htmlFor?: string;
+}
+declare const Text: React$1.ForwardRefExoticComponent<TextProps & React$1.RefAttributes<HTMLElement>>;
+
+interface PressableProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "className"> {
+    dot?: string;
+    asChild?: boolean;
+    /**
+     * Disable the WCAG 2.1 AA minimum touch target (44 × 44 px).
+     * Use when the element is part of a larger interactive region or when
+     * the enclosing layout already satisfies the size requirement.
+     */
+    disableMinTouch?: boolean;
+}
+declare const Pressable: React$1.ForwardRefExoticComponent<PressableProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+type HoverEffect$1 = "springy" | "scale" | "glow" | "slide" | "none";
+
 type Variant = "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "gradient" | "neon" | "glass";
-/**
- * 버튼 크기 / Button size
- */
 type Size = "sm" | "md" | "lg" | "xl" | "icon";
-/**
- * 버튼 모서리 둥글기 / Button border radius
- */
 type Rounded$1 = "sm" | "md" | "lg" | "full";
-/**
- * 버튼 그림자 / Button shadow
- */
 type Shadow$1 = "none" | "sm" | "md" | "lg" | "xl";
-/**
- * 버튼 호버 효과 / Button hover effect
- * "springy"가 HUA-UI 시그니처 - 공 튕기듯 미세한 반동
- */
-type Hover = "springy" | "scale" | "glow" | "slide" | "none";
-/**
- * 그라디언트 색상 이름 / Gradient color name
- */
 type GradientName = "blue" | "purple" | "green" | "orange" | "pink" | "custom";
-/**
- * Button 컴포넌트의 공통 props / Common props for Button component
- */
 type CommonProps = {
     variant?: Variant;
     size?: Size;
@@ -54,11 +61,11 @@ type CommonProps = {
     customGradient?: string;
     rounded?: Rounded$1;
     shadow?: Shadow$1;
-    hover?: Hover;
+    hover?: HoverEffect$1;
     fullWidth?: boolean;
     iconOnly?: boolean;
     "aria-label"?: string;
-    className?: string;
+    dot?: string;
     disabled?: boolean;
     asChild?: boolean;
 };
@@ -68,10 +75,6 @@ type AnchorProps = CommonProps & Omit<React$1.AnchorHTMLAttributes<HTMLAnchorEle
 type NativeButtonProps = CommonProps & Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "type"> & {
     href?: undefined;
 };
-/**
- * Button 컴포넌트의 props 타입 / Button component props type
- * href가 제공되면 앵커 태그로, 그렇지 않으면 버튼 태그로 렌더링됩니다.
- */
 type ButtonProps = AnchorProps | NativeButtonProps;
 type AnchorOrButton$1 = HTMLAnchorElement | HTMLButtonElement;
 declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<AnchorOrButton$1>>;
@@ -150,7 +153,8 @@ interface LinkProps {
     variant?: "default" | "primary" | "secondary" | "ghost" | "underline";
     size?: "sm" | "md" | "lg";
     external?: boolean;
-    className?: string;
+    dot?: string;
+    style?: React$1.CSSProperties;
     onClick?: () => void;
 }
 /**
@@ -164,7 +168,7 @@ interface LinkProps {
  * <Link href="https://example.com" external>외부 사이트</Link>
  * <Link href="/contact" variant="primary" size="lg">문의하기</Link>
  */
-declare function Link({ href, children, className, variant, size, external, onClick }: LinkProps): react_jsx_runtime.JSX.Element;
+declare function Link({ href, children, dot: dotProp, variant, size, external, style, onClick, }: LinkProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Icon Config Types
@@ -223,6 +227,10 @@ interface IconProps {
     size?: number | string;
     /** 추가 CSS 클래스 / Additional CSS classes */
     className?: string;
+    /** dot 스타일 유틸리티 문자열 / Dot style utility string */
+    dot?: string;
+    /** 인라인 스타일 / Inline style */
+    style?: React$1.CSSProperties;
     /** 감정 아이콘 타입 / Emotion icon type */
     emotion?: keyof typeof emotionIcons;
     /** 상태 아이콘 타입 / Status icon type */
@@ -238,13 +246,13 @@ interface IconProps {
     /** 바운스 애니메이션 / Bounce animation */
     bounce?: boolean;
     /** 색상 변형 / Color variant */
-    variant?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'muted' | 'inherit';
+    variant?: "default" | "primary" | "secondary" | "success" | "warning" | "error" | "muted" | "inherit";
     /** Phosphor 아이콘 weight 오버라이드 / Phosphor icon weight override */
     weight?: PhosphorWeight;
     /** 스크린 리더용 라벨 / Screen reader label */
-    'aria-label'?: string;
+    "aria-label"?: string;
     /** 장식용 아이콘 / Decorative icon (hidden from screen readers) */
-    'aria-hidden'?: boolean;
+    "aria-hidden"?: boolean;
 }
 /**
  * Icon 컴포넌트
@@ -277,16 +285,22 @@ declare const ErrorIcon: React$1.ForwardRefExoticComponent<Omit<IconProps, "stat
 /**
  * Avatar 컴포넌트의 props / Avatar component props
  */
-interface AvatarProps extends React$1.HTMLAttributes<HTMLDivElement> {
+interface AvatarProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'className'> {
     size?: "sm" | "md" | "lg";
     variant?: "default" | "glass";
     src?: string;
     alt?: string;
     fallbackText?: string;
+    dot?: string;
+    style?: React$1.CSSProperties;
 }
-interface AvatarImageProps extends React$1.ImgHTMLAttributes<HTMLImageElement> {
+interface AvatarImageProps extends Omit<React$1.ImgHTMLAttributes<HTMLImageElement>, 'className'> {
+    dot?: string;
+    style?: React$1.CSSProperties;
 }
-interface AvatarFallbackProps extends React$1.HTMLAttributes<HTMLDivElement> {
+interface AvatarFallbackProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'className'> {
+    dot?: string;
+    style?: React$1.CSSProperties;
 }
 /**
  * Avatar 컴포넌트 / Avatar component
@@ -305,12 +319,13 @@ declare const AvatarFallback: React$1.ForwardRefExoticComponent<AvatarFallbackPr
 /**
  * Grid 컴포넌트의 props
  */
-interface GridProps extends React$1.HTMLAttributes<HTMLDivElement> {
+interface GridProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'className'> {
     cols?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
     gap?: "none" | "sm" | "md" | "lg" | "xl";
     gapX?: "none" | "sm" | "md" | "lg" | "xl";
     gapY?: "none" | "sm" | "md" | "lg" | "xl";
     responsive?: boolean;
+    dot?: string;
 }
 /**
  * Grid 컴포넌트
@@ -327,12 +342,13 @@ declare const Grid: React$1.ForwardRefExoticComponent<GridProps & React$1.RefAtt
 /**
  * Stack 컴포넌트의 props
  */
-interface StackProps extends React$1.HTMLAttributes<HTMLDivElement> {
+interface StackProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'className'> {
     direction?: "vertical" | "horizontal";
     spacing?: "none" | "sm" | "md" | "lg" | "xl";
     align?: "start" | "center" | "end" | "stretch";
     justify?: "start" | "center" | "end" | "between" | "around" | "evenly";
     wrap?: boolean;
+    dot?: string;
 }
 /**
  * Stack 컴포넌트
@@ -349,23 +365,29 @@ declare const Stack: React$1.ForwardRefExoticComponent<StackProps & React$1.RefA
 /**
  * Divider 컴포넌트의 props / Divider component props
  */
-interface DividerProps extends React$1.HTMLAttributes<HTMLDivElement> {
+interface DividerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'className'> {
     orientation?: "horizontal" | "vertical";
     variant?: "solid" | "dashed" | "dotted" | "gradient" | "glass";
     size?: "sm" | "md" | "lg";
     spacing?: "none" | "sm" | "md" | "lg" | "xl";
     color?: "default" | "muted" | "primary" | "secondary";
+    dot?: string;
 }
 declare const Divider: React$1.NamedExoticComponent<DividerProps & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
  * Card 컴포넌트의 props / Card component props
  */
-interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
+interface CardProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "className"> {
     variant?: "default" | "outline" | "elevated";
-    shadow?: "none" | "sm" | "md" | "lg";
-    padding?: "none" | "sm" | "md" | "lg";
+    rounded?: "none" | "sm" | "md" | "lg" | "xl" | "full";
+    shadow?: "none" | "sm" | "md" | "lg" | "xl" | "2xl";
+    /** @default "none" — use `padding="md"` for standard card padding */
+    padding?: "none" | "sm" | "md" | "lg" | "xl";
     hoverable?: boolean;
+    /** Enable preset entrance animation (reads from MotionConfigContext) */
+    animated?: boolean;
+    dot?: string;
 }
 /**
  * Card 컴포넌트 / Card component
@@ -379,26 +401,31 @@ interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
  * </Card>
  */
 declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement>>;
-interface CardHeaderProps extends React$1.HTMLAttributes<HTMLDivElement> {
+interface CardHeaderProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "className"> {
+    dot?: string;
 }
 declare const CardHeader: React$1.ForwardRefExoticComponent<CardHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
-interface CardTitleProps extends React$1.HTMLAttributes<HTMLHeadingElement> {
+interface CardTitleProps extends Omit<React$1.HTMLAttributes<HTMLHeadingElement>, "className"> {
+    dot?: string;
 }
 declare const CardTitle: React$1.ForwardRefExoticComponent<CardTitleProps & React$1.RefAttributes<HTMLParagraphElement>>;
-interface CardDescriptionProps extends React$1.HTMLAttributes<HTMLParagraphElement> {
+interface CardDescriptionProps extends Omit<React$1.HTMLAttributes<HTMLParagraphElement>, "className"> {
+    dot?: string;
 }
 declare const CardDescription: React$1.ForwardRefExoticComponent<CardDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>>;
-interface CardContentProps extends React$1.HTMLAttributes<HTMLDivElement> {
+interface CardContentProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "className"> {
+    dot?: string;
 }
 declare const CardContent: React$1.ForwardRefExoticComponent<CardContentProps & React$1.RefAttributes<HTMLDivElement>>;
-interface CardFooterProps extends React$1.HTMLAttributes<HTMLDivElement> {
+interface CardFooterProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "className"> {
+    dot?: string;
 }
 declare const CardFooter: React$1.ForwardRefExoticComponent<CardFooterProps & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
  * Panel 컴포넌트의 props / Panel component props
  */
-interface PanelProps extends Omit<CardProps, 'variant' | 'style' | 'padding'> {
+interface PanelProps extends Omit<CardProps, "variant" | "style" | "padding" | "rounded"> {
     style?: "default" | "solid" | "glass" | "outline" | "elevated" | "neon" | "holographic" | "cyberpunk" | "minimal" | "luxury";
     effect?: "none" | "glow" | "shadow" | "gradient" | "animated";
     transparency?: number;
@@ -456,10 +483,10 @@ interface ActionButton {
     icon?: IconName;
     onClick: () => void;
     disabled?: boolean;
-    variant?: 'default' | 'outline' | 'destructive' | 'ghost';
+    variant?: "default" | "outline" | "destructive" | "ghost";
     badge?: {
         count: number;
-        color?: 'blue' | 'red' | 'gray' | 'green';
+        color?: "blue" | "red" | "gray" | "green";
     };
     className?: string;
 }
@@ -475,9 +502,9 @@ interface ActionButton {
  * @property {() => void} [onToggleSelectAll] - 전체 선택/해제 함수 / Toggle select all function
  * @property {() => void} [onCancelSelect] - 선택 모드 취소 함수 / Cancel select mode function
  * @property {boolean} [loading=false] - 로딩 상태 / Loading state
- * @extends {React.HTMLAttributes<HTMLDivElement>}
+ * @extends {Omit<React.HTMLAttributes<HTMLDivElement>, 'className'>}
  */
-interface ActionToolbarProps extends React$1.HTMLAttributes<HTMLDivElement> {
+interface ActionToolbarProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "className"> {
     /** 선택 모드 활성화 여부 */
     isSelectMode?: boolean;
     /** 전체 항목 개수 */
@@ -496,31 +523,87 @@ interface ActionToolbarProps extends React$1.HTMLAttributes<HTMLDivElement> {
     onCancelSelect?: () => void;
     /** 로딩 상태 */
     loading?: boolean;
+    /** dot 유틸리티 스타일 */
+    dot?: string;
+    /** 추가 인라인 스타일 */
+    style?: React$1.CSSProperties;
 }
 declare const ActionToolbar: React$1.NamedExoticComponent<ActionToolbarProps & React$1.RefAttributes<HTMLDivElement>>;
 
+type ProseElement = "div" | "article" | "section" | "main" | "aside" | "nav" | "header" | "footer";
+interface ProseProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "className"> {
+    /** Semantic HTML element to render */
+    as?: ProseElement;
+    /** Typography size scale */
+    size?: "sm" | "base" | "lg";
+    /** Text color variant */
+    color?: "default" | "gray";
+    /** Additional dot utility styles */
+    dot?: string;
+    children?: React$1.ReactNode;
+}
 /**
- * Badge 컴포넌트의 props / Badge component props
+ * Prose — Rich content typography container
+ *
+ * Provides consistent typography styling for markdown-like content
+ * (headings, paragraphs, lists, blockquotes, code, tables) using
+ * CSS variables for automatic light/dark theme support.
+ *
+ * No Tailwind typography plugin required.
+ *
+ * @remarks
+ * Requires the prose CSS file to be imported in your app:
+ * ```tsx
+ * import '@hua-labs/ui/styles/prose.css';
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Prose>
+ *   <h1>Title</h1>
+ *   <p>Paragraph text...</p>
+ * </Prose>
+ *
+ * // With size and dot prop
+ * <Prose size="lg" dot="mt-4">
+ *   <h2>Section</h2>
+ *   <p>Content</p>
+ * </Prose>
+ *
+ * // Gray color variant
+ * <Prose color="gray">
+ *   <p>Muted text content</p>
+ * </Prose>
+ * ```
  */
-interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement> {
+declare const Prose: React$1.ForwardRefExoticComponent<ProseProps & React$1.RefAttributes<HTMLElement>>;
+
+/**
+ * Badge component props
+ */
+interface BadgeProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "className"> {
     variant?: "default" | "secondary" | "destructive" | "error" | "outline" | "glass";
+    rounded?: "none" | "sm" | "md" | "lg" | "xl" | "full";
+    dot?: string;
+    style?: React$1.CSSProperties;
 }
 /**
- * Badge 컴포넌트 / Badge component
+ * Badge component
  *
- * 상태나 카테고리를 표시하는 작은 배지 컴포넌트입니다.
+ * A small badge component for displaying status or category.
  *
  * @example
  * <Badge>New</Badge>
- * <Badge variant="destructive">완료</Badge>
- * <Badge variant="outline">대기</Badge>
+ * <Badge variant="destructive">Done</Badge>
+ * <Badge variant="outline">Pending</Badge>
  */
 declare const Badge: React$1.NamedExoticComponent<BadgeProps & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
- * Progress 컴포넌트의 props
+ * Progress component props
  */
-interface ProgressProps extends React$1.HTMLAttributes<HTMLDivElement> {
+interface ProgressProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "className"> {
     value?: number;
     max?: number;
     size?: "sm" | "md" | "lg";
@@ -531,15 +614,17 @@ interface ProgressProps extends React$1.HTMLAttributes<HTMLDivElement> {
     label?: string;
     description?: string;
     autoVariant?: boolean;
+    dot?: string;
+    style?: React$1.CSSProperties;
 }
 /**
- * Progress 컴포넌트 / Progress component
+ * Progress component
  *
- * 진행률을 표시하는 프로그레스 바 컴포넌트입니다.
+ * A progress bar component for displaying progress.
  *
  * @example
  * <Progress value={50} />
- * <Progress value={75} variant="success" label="업로드" showValue />
+ * <Progress value={75} variant="success" label="Upload" showValue />
  * <Progress value={90} variant="warning" striped animated />
  */
 declare const Progress: React$1.ForwardRefExoticComponent<ProgressProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -547,22 +632,26 @@ declare const ProgressSuccess: React$1.ForwardRefExoticComponent<Omit<ProgressPr
 declare const ProgressWarning: React$1.ForwardRefExoticComponent<Omit<ProgressProps, "variant"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const ProgressError: React$1.ForwardRefExoticComponent<Omit<ProgressProps, "variant"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const ProgressInfo: React$1.ForwardRefExoticComponent<Omit<ProgressProps, "variant"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const ProgressGroup: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ProgressGroup: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement>, "className"> & {
+    dot?: string;
+    style?: React$1.CSSProperties;
+} & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
- * Skeleton 컴포넌트의 props
+ * Skeleton component props
  */
-interface SkeletonProps extends React$1.HTMLAttributes<HTMLDivElement> {
+interface SkeletonProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "className"> {
     variant?: "text" | "circular" | "rectangular" | "rounded";
     width?: string | number;
     height?: string | number;
     animation?: "pulse" | "wave" | "shimmer";
-    className?: string;
+    dot?: string;
+    style?: React$1.CSSProperties;
 }
 /**
- * Skeleton 컴포넌트 / Skeleton component
+ * Skeleton component
  *
- * 로딩 중 콘텐츠의 플레이스홀더를 표시하는 스켈레톤 컴포넌트입니다.
+ * A skeleton component for displaying loading placeholders.
  *
  * @example
  * <Skeleton />
@@ -574,12 +663,30 @@ declare const SkeletonText: React$1.ForwardRefExoticComponent<Omit<SkeletonProps
 declare const SkeletonCircle: React$1.ForwardRefExoticComponent<Omit<SkeletonProps, "variant"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const SkeletonRectangle: React$1.ForwardRefExoticComponent<Omit<SkeletonProps, "variant"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const SkeletonRounded: React$1.ForwardRefExoticComponent<Omit<SkeletonProps, "variant"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const SkeletonCard: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
-declare const SkeletonAvatar: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
-declare const SkeletonImage: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
-declare const SkeletonUserProfile: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
-declare const SkeletonList: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
-declare const SkeletonTable: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SkeletonCard: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement>, "className"> & {
+    dot?: string;
+    style?: React$1.CSSProperties;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const SkeletonAvatar: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement>, "className"> & {
+    dot?: string;
+    style?: React$1.CSSProperties;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const SkeletonImage: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement>, "className"> & {
+    dot?: string;
+    style?: React$1.CSSProperties;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const SkeletonUserProfile: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement>, "className"> & {
+    dot?: string;
+    style?: React$1.CSSProperties;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const SkeletonList: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement>, "className"> & {
+    dot?: string;
+    style?: React$1.CSSProperties;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const SkeletonTable: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement>, "className"> & {
+    dot?: string;
+    style?: React$1.CSSProperties;
+} & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
  * Toggle 컴포넌트의 props / Toggle component props
@@ -592,9 +699,10 @@ declare const SkeletonTable: React$1.ForwardRefExoticComponent<React$1.HTMLAttri
  * @property {string} [description] - Toggle 설명 텍스트 / Toggle description text
  * @property {React.ReactNode} [icon] - 아이콘 / Icon
  * @property {"left" | "right"} [iconPosition="left"] - 아이콘 위치 / Icon position
- * @extends {Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size'>}
+ * @property {string} [dot] - dot 유틸리티 문자열 / dot utility string
+ * @extends {Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'size'>}
  */
-interface ToggleProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, 'size'> {
+interface ToggleProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "size"> {
     variant?: "default" | "outline" | "filled" | "ghost" | "glass";
     size?: "sm" | "md" | "lg";
     pressed?: boolean;
@@ -603,6 +711,7 @@ interface ToggleProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElemen
     description?: string;
     icon?: React$1.ReactNode;
     iconPosition?: "left" | "right";
+    dot?: string;
 }
 /**
  * Toggle 컴포넌트 / Toggle component
@@ -645,18 +754,18 @@ declare const Toggle: React$1.ForwardRefExoticComponent<ToggleProps & React$1.Re
  * ScrollArea 컴포넌트의 props / ScrollArea component props
  * @typedef {Object} ScrollAreaProps
  * @property {React.ReactNode} children - 스크롤 영역 내용 / Scroll area content
- * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
  * @property {"vertical" | "horizontal" | "both"} [orientation="vertical"] - 스크롤 방향 / Scroll direction
  * @property {number} [scrollHideDelay=600] - 스크롤바 숨김 지연 시간 (ms) / Scrollbar hide delay (ms)
  * @property {"auto" | "always" | "scroll" | "hover"} [type="hover"] - 스크롤바 표시 타입 / Scrollbar display type
- * @extends {React.HTMLAttributes<HTMLDivElement>}
+ * @extends {Omit<React.HTMLAttributes<HTMLDivElement>, 'className'>}
  */
-interface ScrollAreaProps extends React$1.HTMLAttributes<HTMLDivElement> {
+interface ScrollAreaProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'className'> {
     children: React$1.ReactNode;
-    className?: string;
     orientation?: "vertical" | "horizontal" | "both";
     scrollHideDelay?: number;
     type?: "auto" | "always" | "scroll" | "hover";
+    /** dot 유틸리티 스트링 (인라인 스타일로 변환) / dot utility string (converted to inline style) */
+    dot?: string;
 }
 /**
  * ScrollArea 컴포넌트 / ScrollArea component
@@ -670,14 +779,14 @@ interface ScrollAreaProps extends React$1.HTMLAttributes<HTMLDivElement> {
  * @component
  * @example
  * // 기본 사용 / Basic usage
- * <ScrollArea className="h-64">
+ * <ScrollArea style={{ height: '16rem' }}>
  *   <div>긴 내용...</div>
  * </ScrollArea>
  *
  * @example
  * // 가로 스크롤, 항상 표시 / Horizontal scroll, always visible
  * <ScrollArea orientation="horizontal" type="always">
- *   <div className="flex space-x-4">...</div>
+ *   <div style={{ display: 'flex', gap: '1rem' }}>...</div>
  * </ScrollArea>
  *
  * @param {ScrollAreaProps} props - ScrollArea 컴포넌트의 props / ScrollArea component props
@@ -691,21 +800,21 @@ declare const ScrollArea: React$1.ForwardRefExoticComponent<ScrollAreaProps & Re
  * @typedef {Object} ScrollToTopProps
  * @property {number} [threshold=400] - 표시 임계값 (px, 이 값 이상 스크롤 시 표시) / Display threshold (px, shows when scrolled beyond this value)
  * @property {boolean} [smooth=true] - 부드러운 스크롤 여부 / Smooth scroll
- * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
  * @property {IconName} [icon='arrowUp'] - 아이콘 이름 / Icon name
  * @property {"sm" | "md" | "lg"} [size="md"] - 버튼 크기 / Button size
  * @property {"default" | "primary" | "secondary" | "outline" | "ghost"} [variant="default"] - 버튼 스타일 변형 / Button style variant
  * @property {boolean} [showOnMount=false] - 마운트 시 즉시 표시 여부 / Show immediately on mount
- * @extends {React.HTMLAttributes<HTMLButtonElement>}
+ * @extends {Omit<React.HTMLAttributes<HTMLButtonElement>, 'className'>}
  */
-interface ScrollToTopProps extends React$1.HTMLAttributes<HTMLButtonElement> {
+interface ScrollToTopProps extends Omit<React$1.HTMLAttributes<HTMLButtonElement>, 'className'> {
     threshold?: number;
     smooth?: boolean;
-    className?: string;
     icon?: IconName;
     size?: "sm" | "md" | "lg";
     variant?: "default" | "primary" | "secondary" | "outline" | "ghost";
     showOnMount?: boolean;
+    /** dot 유틸리티 스트링 (인라인 스타일로 변환) / dot utility string (converted to inline style) */
+    dot?: string;
 }
 /**
  * ScrollToTop 컴포넌트 / ScrollToTop component
@@ -733,25 +842,23 @@ interface ScrollToTopProps extends React$1.HTMLAttributes<HTMLButtonElement> {
  * @param {ScrollToTopProps} props - ScrollToTop 컴포넌트의 props / ScrollToTop component props
  * @returns {JSX.Element} ScrollToTop 컴포넌트 / ScrollToTop component
  */
-declare const ScrollToTop: ({ className, threshold, smooth, icon, size, variant, showOnMount, ...props }: ScrollToTopProps) => react_jsx_runtime.JSX.Element;
+declare const ScrollToTop: ({ threshold, smooth, icon, size, variant, showOnMount, dot: dotProp, style: styleProp, ...props }: ScrollToTopProps) => react_jsx_runtime.JSX.Element;
 
 /**
- * ThemeToggle 컴포넌트의 props / ThemeToggle component props
- * @typedef {Object} ThemeToggleProps
- * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
- * @property {"sm" | "md" | "lg"} [size="md"] - Toggle 크기 / Toggle size
- * @property {"button" | "icon" | "switch"} [variant="button"] - Toggle 스타일 변형 / Toggle style variant
- * @property {boolean} [showLabel=false] - 라벨 표시 여부 / Show label
- * @property {Object} [label] - 커스텀 라벨 텍스트 / Custom label text
- * @property {string} [label.light="라이트"] - 라이트 모드 라벨 / Light mode label
- * @property {string} [label.dark="다크"] - 다크 모드 라벨 / Dark mode label
- * @property {string} [label.system="시스템"] - 시스템 모드 라벨 / System mode label
- */
-interface ThemeToggleProps {
-    className?: string;
+ * ThemeToggle component props
+ */
+interface ThemeToggleProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "className"> {
+    /** dot style utility string for the root element */
+    dot?: string;
+    /** Additional inline style for the root element */
+    style?: React$1.CSSProperties;
+    /** Toggle size */
     size?: "sm" | "md" | "lg";
+    /** Toggle style variant */
     variant?: "button" | "icon" | "switch";
+    /** Whether to show a text label */
     showLabel?: boolean;
+    /** Custom label text */
     label?: {
         light?: string;
         dark?: string;
@@ -759,38 +866,31 @@ interface ThemeToggleProps {
     };
 }
 /**
- * ThemeToggle 컴포넌트 / ThemeToggle component
+ * ThemeToggle component
  *
- * 테마를 전환하는 토글 컴포넌트입니다.
- * ThemeProvider와 함께 사용하며, light/dark/system 테마를 지원합니다.
- *
- * Toggle component for switching themes.
+ * Toggle component for switching between light/dark/system themes.
  * Used with ThemeProvider, supports light/dark/system themes.
  *
- * @component
  * @example
- * // 기본 사용 (버튼 스타일) / Basic usage (button style)
+ * // Basic usage (button style)
  * <ThemeToggle />
  *
  * @example
- * // 아이콘만 표시 / Icon only
+ * // Icon only
  * <ThemeToggle variant="icon" size="lg" />
  *
  * @example
- * // Switch 스타일 / Switch style
+ * // Switch style
  * <ThemeToggle variant="switch" />
  *
  * @example
- * // 라벨과 함께 / With label
+ * // With label
  * <ThemeToggle
  *   showLabel
  *   label={{ light: "밝게", dark: "어둡게" }}
  * />
- *
- * @param {ThemeToggleProps} props - ThemeToggle 컴포넌트의 props / ThemeToggle component props
- * @returns {JSX.Element} ThemeToggle 컴포넌트 / ThemeToggle component
  */
-declare function ThemeToggle({ className, size, variant, showLabel, label, ...props }: ThemeToggleProps): react_jsx_runtime.JSX.Element;
+declare function ThemeToggle({ dot: dotProp, style, size, variant, showLabel, label, ...props }: ThemeToggleProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Icon Aliases
@@ -1399,6 +1499,46 @@ declare function getMicroMotionClasses(preset?: MicroMotionPreset, options?: {
     enableFocus?: boolean;
 }): string;
 
+/**
+ * Component-level motion configuration
+ * Matches MotionPreset from @hua-labs/motion-core
+ */
+interface ComponentMotionConfig {
+    entrance: string;
+    delay: number;
+    duration: number;
+    hover: boolean;
+    click: boolean;
+}
+/**
+ * MotionConfig context value
+ */
+interface MotionConfigContextValue {
+    enableAnimations: boolean;
+    components: Record<string, ComponentMotionConfig>;
+}
+/**
+ * MotionConfigProvider
+ *
+ * Provides motion configuration to all descendant components.
+ * Used by hua framework to inject preset motion data.
+ */
+declare function MotionConfigProvider({ value, children, }: {
+    value: MotionConfigContextValue;
+    children: React$1.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * useMotionConfig — returns full motion config context
+ */
+declare function useMotionConfig(): MotionConfigContextValue;
+/**
+ * useComponentMotion — returns motion config for a specific component role
+ *
+ * @param role - Component role key (e.g. 'card', 'hero', 'button')
+ * @returns ComponentMotionConfig or undefined if not configured
+ */
+declare function useComponentMotion(role: string): ComponentMotionConfig | undefined;
+
 /**
  * useInView 훅의 옵션 / useInView hook options
  * @property {number} [threshold=0] - 뷰포트 진입 임계값 (0-1) / Viewport entry threshold
@@ -1622,4 +1762,95 @@ interface UseWindowSizeOptions {
  */
 declare function useWindowSize(options?: UseWindowSizeOptions): UseWindowSizeReturn;
 
-export { Action, type ActionButton, ActionToolbar, type ActionToolbarProps, AllIconName, Avatar, AvatarFallback, AvatarImage, Badge, Button, type ButtonProps, COMPONENT_MOTION_DEFAULTS, CSS_MOTION_VARS, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Color, type ColorStyleConfig, type ColorStyles, DURATIONS, Divider, EASING_FUNCTIONS, EmotionIcon, ErrorIcon, ExtendedVariant, Grid, HUA_SPRING_EASING, type HoverEffect, ICON_ALIASES, Icon, type IconConfig, IconName, type IconProps, IconProvider, type IconProviderProps, type IconSet, Link, LoadingIcon, type MicroMotionConfig, type MicroMotionPreset, type MicroMotionState, Panel, type PhosphorWeight, Progress, ProgressError, ProgressGroup, ProgressInfo, ProgressSuccess, ProgressWarning, type Rounded, ScrollArea, ScrollToTop, type Shadow, Size$1 as Size, type SizeStyles, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonCircle, SkeletonImage, SkeletonList, SkeletonRectangle, SkeletonRounded, SkeletonTable, SkeletonText, SkeletonUserProfile, Slot, type SlotProps, Stack, StatusIcon, SuccessIcon, ThemeToggle, Toggle, type ToggleProps, type UseInViewOptions, type UseInViewReturn, type UseMouseOptions, type UseMouseReturn, type UseScrollProgressOptions, type UseScrollProgressReturn, type UseWindowSizeOptions, type UseWindowSizeReturn, cn, composeRefs, conditionalClass, createColorStyles, createGradient, createHoverStyles, createRoundedStyles, createShadowStyles, createSizeStyles, createVariantStyles, defaultIconConfig, emotionIcons, formatRelativeTime, getDefaultStrokeWidth, getIconAliases, getMicroMotionClasses, isGradientVariant, isTextWhite, merge, mergeIf, mergeMap, mergeProps, resolveIconAlias, responsive, statusIcons, useColorStyles, useIconContext, useInView, useMicroMotion, useMouse, useReducedMotion, useScrollProgress, useWindowSize, withDarkMode, withOpacity };
+interface UseAnimatedEntranceOptions {
+    /** Component role key for preset lookup (e.g. 'card', 'hero') */
+    role: string;
+    /** Explicitly enable/disable animation (overrides preset) */
+    enabled?: boolean;
+}
+interface UseAnimatedEntranceReturn<T extends HTMLElement = HTMLElement> {
+    ref: React$1.RefObject<T | null>;
+    style: React$1.CSSProperties;
+    className: string;
+}
+/**
+ * useAnimatedEntrance — CSS-based entrance animation hook
+ *
+ * Uses IntersectionObserver (triggerOnce) + CSS transition.
+ * Respects prefers-reduced-motion and MotionConfig.enableAnimations.
+ *
+ * @example
+ * const { ref, style, className } = useAnimatedEntrance({ role: 'card', enabled: true })
+ * <div ref={ref} style={style} className={className}>...</div>
+ */
+declare function useAnimatedEntrance<T extends HTMLElement = HTMLElement>({ role, enabled, }: UseAnimatedEntranceOptions): UseAnimatedEntranceReturn<T>;
+
+/** Breakpoint thresholds (Tailwind defaults) */
+declare const BREAKPOINTS: {
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+    readonly '2xl': 1536;
+};
+type Breakpoint = keyof typeof BREAKPOINTS;
+/**
+ * useBreakpoint — 현재 뷰포트에 맞는 breakpoint 반환
+ *
+ * dot()의 breakpoint 옵션과 함께 사용하여 반응형 인라인 스타일 적용.
+ * SSR에서는 기본값 'lg' 반환 (데스크톱 우선).
+ *
+ * @example
+ * const bp = useBreakpoint()
+ * const styles = dot('p-4 sm:p-6 lg:p-8', { breakpoint: bp })
+ */
+declare function useBreakpoint(): Breakpoint | undefined;
+
+/**
+ * useDotEnv — dot()에 전달할 환경 옵션 (breakpoint + dark) 반환
+ *
+ * Box/Text/Pressable 내부에서 사용하여 responsive/dark 자동 적용.
+ *
+ * @example
+ * const env = useDotEnv()
+ * const styles = dot('p-4 md:p-8 dark:bg-gray-900', env)
+ */
+declare function useDotEnv(): DotOptions;
+
+/**
+ * useDotMap — dotMap() 기반 interactive style 관리 훅
+ *
+ * hover/focus/active/disabled 상태에 따라 inline style을 자동 전환합니다.
+ * className 없이 순수 inline style로 동작하여 RN 호환 가능.
+ * dark mode + responsive breakpoint 자동 감지.
+ *
+ * @example
+ * const { style, handlers } = useDotMap(
+ *   'bg-white hover:bg-gray-100 focus:ring-2 dark:bg-gray-900 md:p-8',
+ *   { disabled: isDisabled }
+ * );
+ * <div style={style} {...handlers} />
+ */
+declare function useDotMap(input: string, options?: {
+    disabled?: boolean;
+}): {
+    style: StyleObject;
+    handlers: {
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+        onFocus: () => void;
+        onBlur: () => void;
+    };
+};
+/**
+ * Merge multiple style sources: variant base styles + dot prop + explicit style.
+ * Later sources override earlier ones (CSS cascade equivalent).
+ */
+declare function mergeStyles(...sources: (StyleObject | React.CSSProperties | undefined)[]): React.CSSProperties;
+/**
+ * Resolve a dot utility string to a CSSProperties object.
+ * Thin wrapper around dot() for React component usage.
+ */
+declare function resolveDot(input?: string): React.CSSProperties;
+
+export { Action, type ActionButton, ActionToolbar, type ActionToolbarProps, AllIconName, Avatar, AvatarFallback, AvatarImage, Badge, Box, type BoxProps, Button, type ButtonProps, COMPONENT_MOTION_DEFAULTS, CSS_MOTION_VARS, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Color, type ColorStyleConfig, type ColorStyles, type ComponentMotionConfig, DURATIONS, Divider, EASING_FUNCTIONS, EmotionIcon, ErrorIcon, ExtendedVariant, Grid, HUA_SPRING_EASING, type HoverEffect, ICON_ALIASES, Icon, type IconConfig, IconName, type IconProps, IconProvider, type IconProviderProps, type IconSet, Link, LoadingIcon, type MicroMotionConfig, type MicroMotionPreset, type MicroMotionState, type MotionConfigContextValue, MotionConfigProvider, Panel, type PhosphorWeight, Pressable, type PressableProps, Progress, ProgressError, ProgressGroup, ProgressInfo, ProgressSuccess, ProgressWarning, Prose, type ProseProps, type Rounded, ScrollArea, ScrollToTop, type Shadow, Size$1 as Size, type SizeStyles, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonCircle, SkeletonImage, SkeletonList, SkeletonRectangle, SkeletonRounded, SkeletonTable, SkeletonText, SkeletonUserProfile, Slot, type SlotProps, Stack, StatusIcon, SuccessIcon, Text, type TextProps, ThemeToggle, Toggle, type ToggleProps, type UseAnimatedEntranceOptions, type UseAnimatedEntranceReturn, type UseInViewOptions, type UseInViewReturn, type UseMouseOptions, type UseMouseReturn, type UseScrollProgressOptions, type UseScrollProgressReturn, type UseWindowSizeOptions, type UseWindowSizeReturn, cn, composeRefs, conditionalClass, createColorStyles, createGradient, createHoverStyles, createRoundedStyles, createShadowStyles, createSizeStyles, createVariantStyles, defaultIconConfig, emotionIcons, formatRelativeTime, getDefaultStrokeWidth, getIconAliases, getMicroMotionClasses, isGradientVariant, isTextWhite, merge, mergeIf, mergeMap, mergeProps, mergeStyles, resolveDot, resolveIconAlias, responsive, statusIcons, useAnimatedEntrance, useBreakpoint, useColorStyles, useComponentMotion, useDotEnv, useDotMap, useIconContext, useInView, useMicroMotion, useMotionConfig, useMouse, useReducedMotion, useScrollProgress, useWindowSize, withDarkMode, withOpacity };