@hua-labs/ui 2.1.1 → 2.3.0

package/dist/components/Progress.d.ts

@@ -1,15 +1,33 @@
 import React from "react";
-export declare const progressBarVariants: (props?: ({
-    variant?: "default" | "error" | "glass" | "success" | "warning" | "info" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const progressTrackVariants: (props?: ({
-    variant?: "default" | "error" | "glass" | "success" | "warning" | "info" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const progressBarVariantStyles: import("@hua-labs/dot").DotVariantsFn<{
+    variant: {
+        default: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        glass: string;
+    };
+}>;
+export declare const progressTrackVariantStyles: import("@hua-labs/dot").DotVariantsFn<{
+    variant: {
+        default: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        glass: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}>;
 /**
- * Progress 컴포넌트의 props
+ * Progress component props
  */
-export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
     value?: number;
     max?: number;
     size?: "sm" | "md" | "lg";
@@ -20,15 +38,17 @@ export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
     label?: string;
     description?: string;
     autoVariant?: boolean;
+    dot?: string;
+    style?: React.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.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
@@ -39,6 +59,9 @@ export declare const ProgressInfo: React.ForwardRefExoticComponent<Omit<Progress
 export declare const ProgressWrapper: React.ForwardRefExoticComponent<ProgressProps & {
     title?: string;
 } & React.RefAttributes<HTMLDivElement>>;
-export declare const ProgressGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const ProgressGroup: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
+    dot?: string;
+    style?: React.CSSProperties;
+} & React.RefAttributes<HTMLDivElement>>;
 export { Progress };
 //# sourceMappingURL=Progress.d.ts.map

package/dist/components/Progress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../src/components/Progress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,eAAO,MAAM,mBAAmB;;8EAiB/B,CAAA;AAED,eAAO,MAAM,qBAAqB;;;8EAuBjC,CAAA;AAED;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;IACxE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED;;;;;;;;;GASG;AACH,QAAA,MAAM,QAAQ,sFAmEb,CAAA;AAID,eAAO,MAAM,eAAe,uGAI3B,CAAA;AAGD,eAAO,MAAM,eAAe,uGAI3B,CAAA;AAGD,eAAO,MAAM,aAAa,uGAIzB,CAAA;AAGD,eAAO,MAAM,YAAY,uGAIxB,CAAA;AAID,eAAO,MAAM,eAAe;YAA8D,MAAM;wCAW/F,CAAA;AAGD,eAAO,MAAM,aAAa,6GAUzB,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../src/components/Progress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAMvC,eAAO,MAAM,wBAAwB;;;;;;;;;EAenC,CAAC;AASH,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;EAqBrC,CAAC;AAUH;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,WAAW,CACZ;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IACzE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;;;;;;;;GASG;AACH,QAAA,MAAM,QAAQ,sFA6Gb,CAAC;AAIF,eAAO,MAAM,eAAe,uGAK1B,CAAC;AAGH,eAAO,MAAM,eAAe,uGAK1B,CAAC;AAGH,eAAO,MAAM,aAAa,uGAKxB,CAAC;AAGH,eAAO,MAAM,YAAY,uGAKvB,CAAC;AAIH,eAAO,MAAM,eAAe;YAEA,MAAM;wCA+BhC,CAAC;AAGH,eAAO,MAAM,aAAa;UAGhB,MAAM;YACJ,KAAK,CAAC,aAAa;wCAsB7B,CAAC;AAGH,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/Prose.d.ts

@@ -0,0 +1,51 @@
+import React from "react";
+type ProseElement = "div" | "article" | "section" | "main" | "aside" | "nav" | "header" | "footer";
+export interface ProseProps extends Omit<React.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.ReactNode;
+}
+/**
+ * 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>
+ * ```
+ */
+declare const Prose: React.ForwardRefExoticComponent<ProseProps & React.RefAttributes<HTMLElement>>;
+export { Prose };
+//# sourceMappingURL=Prose.d.ts.map

package/dist/components/Prose.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Prose.d.ts","sourceRoot":"","sources":["../../src/components/Prose.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,KAAK,YAAY,GACb,KAAK,GACL,SAAS,GACT,SAAS,GACT,MAAM,GACN,OAAO,GACP,KAAK,GACL,QAAQ,GACR,QAAQ,CAAC;AAEb,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,WAAW,CACZ;IACC,sCAAsC;IACtC,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;IAC5B,yBAAyB;IACzB,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,oCAAoC;IACpC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,QAAA,MAAM,KAAK,gFA0CV,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/Radio.d.ts

@@ -1,53 +1,49 @@
 import React from "react";
+type Size = "sm" | "md" | "lg";
+type Variant = "default" | "outline" | "filled" | "glass";
 /**
- * Radio 컴포넌트의 props / Radio component props
+ * Radio component props
+ *
  * @typedef {Object} RadioProps
- * @property {"default" | "outline" | "filled" | "glass"} [variant="default"] - Radio 스타일 변형 / Radio style variant
- * @property {"sm" | "md" | "lg"} [size="md"] - Radio 크기 / Radio size
- * @property {boolean} [error=false] - 에러 상태 표시 / Error state
- * @property {boolean} [success=false] - 성공 상태 표시 / Success state
- * @property {string} [label] - 라디오 버튼 레이블 텍스트 / Radio button label text
- * @property {string} [description] - 라디오 버튼 설명 텍스트 / Radio button description text
- * @extends {Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>}
+ * @property {"default" | "outline" | "filled" | "glass"} [variant="default"] - Radio style variant
+ * @property {"sm" | "md" | "lg"} [size="md"] - Radio size
+ * @property {boolean} [error=false] - Error state
+ * @property {boolean} [success=false] - Success state
+ * @property {string} [label] - Radio button label text
+ * @property {string} [description] - Radio button description text
+ * @property {string} [dot] - Dot utility string for additional styles on the wrapper
+ * @property {React.CSSProperties} [style] - Inline styles for the wrapper
+ * @extends {Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'className'>}
  */
-export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
-    variant?: "default" | "outline" | "filled" | "glass";
-    size?: "sm" | "md" | "lg";
+export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "className"> {
+    variant?: Variant;
+    size?: Size;
     error?: boolean;
     success?: boolean;
     label?: string;
     description?: string;
+    dot?: string;
+    style?: React.CSSProperties;
 }
 /**
- * Radio 컴포넌트 / Radio component
- *
- * 라디오 버튼 입력 필드를 제공하는 컴포넌트입니다.
- * 같은 name 속성을 가진 여러 Radio는 그룹으로 동작합니다.
- * ARIA 속성을 자동으로 설정하여 접근성을 지원합니다.
+ * Radio component
  *
- * Radio button input field component.
- * Multiple Radio components with the same name attribute work as a group.
- * Automatically sets ARIA attributes for accessibility support.
+ * A radio button input field. Multiple Radio components with the same name attribute
+ * work as a group. Automatically sets ARIA attributes for accessibility.
  *
  * @component
  * @example
- * // 기본 사용 (그룹) / Basic usage (group)
- * <Radio name="option" value="1" label="옵션 1" />
- * <Radio name="option" value="2" label="옵션 2" />
- * <Radio name="option" value="3" label="옵션 3" />
+ * // Basic usage (group)
+ * <Radio name="option" value="1" label="Option 1" />
+ * <Radio name="option" value="2" label="Option 2" />
  *
  * @example
- * // 에러 상태 / Error state
- * <Radio
- *   name="gender"
- *   value="male"
- *   label="남성"
- *   error
- * />
+ * // Error state
+ * <Radio name="gender" value="male" label="Male" error />
  *
- * @param {RadioProps} props - Radio 컴포넌트의 props / Radio component props
- * @param {React.Ref<HTMLInputElement>} ref - input 요소 ref / input element ref
- * @returns {JSX.Element} Radio 컴포넌트 / Radio component
+ * @param {RadioProps} props - Radio component props
+ * @param {React.Ref<HTMLInputElement>} ref - input element ref
+ * @returns {JSX.Element} Radio component
  */
 declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
 export { Radio };

package/dist/components/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/components/Radio.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB;;;;;;;;;;GAUG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC3F,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAA;IACpD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,QAAA,MAAM,KAAK,qFAwGV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/components/Radio.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AA4CjD,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAgB/B,KAAK,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AA6B1D;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,GAAG,WAAW,CACrB;IACC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,KAAK,qFAmKV,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/ScrollArea.d.ts

@@ -3,18 +3,18 @@ import React from "react";
  * 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.HTMLAttributes<HTMLDivElement> {
+interface ScrollAreaProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {
     children: React.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
@@ -28,14 +28,14 @@ interface ScrollAreaProps extends React.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
@@ -47,11 +47,10 @@ declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & Reac
  * ScrollBar 컴포넌트의 props / ScrollBar component props
  * @typedef {Object} ScrollBarProps
  * @property {"vertical" | "horizontal"} [orientation="vertical"] - 스크롤바 방향 / Scrollbar direction
- * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
  */
-interface ScrollBarProps {
+interface ScrollBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {
     orientation?: "vertical" | "horizontal";
-    className?: string;
+    dot?: string;
 }
 /**
  * ScrollBar 컴포넌트 / ScrollBar component

package/dist/components/ScrollArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../src/components/ScrollArea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB;;;;;;;;;GASG;AACH,UAAU,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACpE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAA;IAChD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;CAC9C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,UAAU,wFA8Df,CAAA;AAID;;;;;GAKG;AACH,UAAU,cAAc;IACtB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;GASG;AACH,QAAA,MAAM,SAAS,uFAed,CAAA;AAID,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../src/components/ScrollArea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB;;;;;;;;GAQG;AACH,UAAU,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC;IACvF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAA;IAChD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC7C,kFAAkF;IAClF,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,UAAU,wFAsEf,CAAA;AAID;;;;GAIG;AACH,UAAU,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC;IACtF,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;IACvC,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED;;;;;;;;;GASG;AACH,QAAA,MAAM,SAAS,uFAoBd,CAAA;AAID,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/ScrollIndicator.d.ts

@@ -1,9 +1,10 @@
-import React from 'react';
-import type { IconName } from '../lib/icons';
+import React from "react";
+import type { IconName } from "../lib/icons";
 /**
  * ScrollIndicator 컴포넌트의 props / ScrollIndicator component props
  * @typedef {Object} ScrollIndicatorProps
- * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
+ * @property {string} [dot] - dot 스타일 유틸리티 문자열 / Dot style utility string
+ * @property {React.CSSProperties} [style] - 추가 인라인 스타일 (inherited) / Additional inline style (inherited)
  * @property {string} [targetId] - 스크롤 대상 요소 ID / Target element ID to scroll to
  * @property {string} [text='Scroll down'] - 표시 텍스트 / Display text
  * @property {IconName} [iconName='arrowDown'] - 아이콘 이름 / Icon name
@@ -15,15 +16,15 @@ import type { IconName } from '../lib/icons';
  * @property {boolean} [autoHide=true] - 자동 숨김 여부 / Auto hide
  * @property {number} [hideThreshold=100] - 숨김 임계값 (px) / Hide threshold (px)
  */
-export interface ScrollIndicatorProps {
-    className?: string;
+export interface ScrollIndicatorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
+    dot?: string;
     targetId?: string;
     text?: string;
     iconName?: IconName;
     iconSize?: number;
-    position?: 'bottom-center' | 'bottom-left' | 'bottom-right';
-    variant?: 'default' | 'primary' | 'secondary' | 'outline';
-    size?: 'sm' | 'md' | 'lg';
+    position?: "bottom-center" | "bottom-left" | "bottom-right";
+    variant?: "default" | "primary" | "secondary" | "outline";
+    size?: "sm" | "md" | "lg";
     animated?: boolean;
     autoHide?: boolean;
     hideThreshold?: number;

package/dist/components/ScrollIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollIndicator.d.ts","sourceRoot":"","sources":["../../src/components/ScrollIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAIlD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAE5C;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,eAAe,GAAG,aAAa,GAAG,cAAc,CAAA;IAC3D,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAA;IACzD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,eAAe,6FAuGnB,CAAA;AAIF,OAAO,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"ScrollIndicator.d.ts","sourceRoot":"","sources":["../../src/components/ScrollIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAI5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,WAAW,CACZ;IACC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,eAAe,GAAG,aAAa,GAAG,cAAc,CAAC;IAC5D,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;IAC1D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAuCD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,eAAe,6FA6GpB,CAAC;AAIF,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/ScrollProgress.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 /**
  * ScrollProgress 컴포넌트의 props / ScrollProgress component props
  * @typedef {Object} ScrollProgressProps
- * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
  * @property {number} [height=2] - 진행률 바 높이 (px) / Progress bar height (px)
  * @property {'default' | 'primary' | 'secondary' | 'gradient'} [color='gradient'] - 진행률 바 색상 / Progress bar color
  * @property {'top' | 'bottom'} [position='top'] - 표시 위치 / Display position
@@ -10,12 +9,14 @@ import React from 'react';
  * @property {boolean} [showPercentage=false] - 퍼센트 표시 여부 / Show percentage
  */
 export interface ScrollProgressProps {
-    className?: string;
     height?: number;
     color?: 'default' | 'primary' | 'secondary' | 'gradient';
     position?: 'top' | 'bottom';
     animated?: boolean;
     showPercentage?: boolean;
+    /** dot 유틸리티 스트링 (인라인 스타일로 변환) / dot utility string (converted to inline style) */
+    dot?: string;
+    style?: React.CSSProperties;
 }
 /**
  * ScrollProgress 컴포넌트 / ScrollProgress component

package/dist/components/ScrollProgress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollProgress.d.ts","sourceRoot":"","sources":["../../src/components/ScrollProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAGlD;;;;;;;;;GASG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAA;IACxD,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,QAAA,MAAM,cAAc,4FA8ElB,CAAA;AAIF,OAAO,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"ScrollProgress.d.ts","sourceRoot":"","sources":["../../src/components/ScrollProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAGlD;;;;;;;;GAQG;AACH,MAAM,WAAW,mBAAmB;IAClC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAA;IACxD,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,kFAAkF;IAClF,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,QAAA,MAAM,cAAc,4FA6ElB,CAAA;AAIF,OAAO,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ScrollToTop.d.ts

@@ -5,21 +5,21 @@ import { IconName } from "../lib/icons";
  * @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'>}
  */
-export interface ScrollToTopProps extends React.HTMLAttributes<HTMLButtonElement> {
+export interface ScrollToTopProps extends Omit<React.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
@@ -47,6 +47,6 @@ export interface ScrollToTopProps extends React.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) => import("react/jsx-runtime").JSX.Element;
+declare const ScrollToTop: ({ threshold, smooth, icon, size, variant, showOnMount, dot: dotProp, style: styleProp, ...props }: ScrollToTopProps) => import("react/jsx-runtime").JSX.Element;
 export { ScrollToTop };
 //# sourceMappingURL=ScrollToTop.d.ts.map

package/dist/components/ScrollToTop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollToTop.d.ts","sourceRoot":"","sources":["../../src/components/ScrollToTop.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAGvC;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,CAAA;IACnE,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,WAAW,GAAI,8EASlB,gBAAgB,4CA8ClB,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"ScrollToTop.d.ts","sourceRoot":"","sources":["../../src/components/ScrollToTop.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAGvC;;;;;;;;;;GAUG;AACH,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAClG,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,CAAA;IACnE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,kFAAkF;IAClF,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,WAAW,GAAI,mGAUlB,gBAAgB,4CA8ClB,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/Section.d.ts

@@ -1,10 +1,9 @@
 import React from "react";
-import { type VariantProps } from "class-variance-authority";
 import { type ContainerProps } from "./Container";
-export declare const sectionVariants: (props?: ({
-    spacing?: "none" | "sm" | "md" | "lg" | "xl" | null | undefined;
-    background?: "none" | "muted" | "primary" | "accent" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const sectionVariantStyles: import("@hua-labs/dot").DotVariantsFn<{
+    spacing: Record<string, string>;
+    background: Record<string, string>;
+}>;
 export interface SectionHeaderConfig {
     title: string;
     subtitle?: string;
@@ -12,17 +11,21 @@ export interface SectionHeaderConfig {
     /** section-line 데코레이터 표시 @default true */
     decorator?: boolean;
     /** 텍스트 정렬 @default 'center' */
-    align?: 'left' | 'center';
+    align?: "left" | "center";
 }
-export interface SectionProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof sectionVariants> {
+export interface SectionProps extends Omit<React.HTMLAttributes<HTMLElement>, "className"> {
     /** Container 사이즈 @default 'lg' */
-    container?: ContainerProps['size'];
+    container?: ContainerProps["size"];
     /** Container 패딩 @default 'none' */
-    containerPadding?: ContainerProps['padding'];
+    containerPadding?: ContainerProps["padding"];
     /** 섹션 헤더 설정 */
     header?: SectionHeaderConfig;
     /** 풀위드 모드 (Container 없이 직접) */
     fullWidth?: boolean;
+    spacing?: "none" | "sm" | "md" | "lg" | "xl";
+    background?: "none" | "muted" | "accent" | "primary";
+    dot?: string;
+    style?: React.CSSProperties;
 }
 /**
  * Section 컴포넌트

package/dist/components/Section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../src/components/Section.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,aAAa,CAAA;AAE5D,eAAO,MAAM,eAAe;;;8EAiB1B,CAAA;AAEF,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAA;CAC1B;AAED,MAAM,WAAW,YACf,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACvC,YAAY,CAAC,OAAO,eAAe,CAAC;IACtC,kCAAkC;IAClC,SAAS,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAA;IAClC,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;IAC5C,eAAe;IACf,MAAM,CAAC,EAAE,mBAAmB,CAAA;IAC5B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAqCD;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,OAAO,kFAqCZ,CAAA;AAGD,OAAO,EAAE,OAAO,EAAE,CAAA"}
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../src/components/Section.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAmB7D,eAAO,MAAM,oBAAoB;;;EAO/B,CAAC;AAEH,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;CAC3B;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,WAAW,CACZ;IACC,kCAAkC;IAClC,SAAS,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IACnC,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IAC7C,eAAe;IACf,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;IACrD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAsDD;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,OAAO,kFA4DZ,CAAC;AAGF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/SectionHeader.d.ts

@@ -5,12 +5,13 @@ import React from "react";
  * @property {string} title - 섹션 제목 / Section title
  * @property {string} [description] - 섹션 설명 / Section description
  * @property {React.ReactNode} [action] - 액션 버튼 또는 요소 / Action button or element
- * @extends {React.HTMLAttributes<HTMLDivElement>}
+ * @extends {Omit<React.HTMLAttributes<HTMLDivElement>, 'className'>}
  */
-export interface SectionHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface SectionHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {
     title: string;
     description?: string;
     action?: React.ReactNode;
+    dot?: string;
 }
 /**
  * SectionHeader 컴포넌트 / SectionHeader component

package/dist/components/SectionHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SectionHeader.d.ts","sourceRoot":"","sources":["../../src/components/SectionHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;;;;GAOG;AACH,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,aAAa,2FAsCzB,CAAC"}
+{"version":3,"file":"SectionHeader.d.ts","sourceRoot":"","sources":["../../src/components/SectionHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;;;;GAOG;AACH,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC;IACjG,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,aAAa,2FAwCzB,CAAC"}

package/dist/components/Select.d.ts

@@ -1,18 +1,31 @@
 import React from "react";
-export declare const selectVariants: (props?: ({
-    variant?: "default" | "filled" | "outline" | "ghost" | "glass" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+import type { CSSProperties } from "react";
+export declare const selectVariantStyles: import("@hua-labs/dot").DotVariantsFn<{
+    variant: {
+        default: string;
+        outline: string;
+        filled: string;
+        ghost: string;
+        glass: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}>;
 /**
  * Select 컴포넌트의 props / Select component props
  */
-export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "className" | "size"> {
     variant?: "default" | "outline" | "filled" | "ghost" | "glass";
     size?: "sm" | "md" | "lg";
     error?: boolean;
     success?: boolean;
     leftIcon?: React.ReactNode;
     placeholder?: string;
+    dot?: string;
+    style?: CSSProperties;
 }
 /**
  * SelectOption 컴포넌트의 props / SelectOption component props

package/dist/components/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/components/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,eAAO,MAAM,cAAc;;;8EAsB1B,CAAA;AAED;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC9F,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAA;IAC9D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACtF,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,QAAA,MAAM,MAAM,uFAoFX,CAAA;AAGD,QAAA,MAAM,YAAY,6FAQjB,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/components/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAGrE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAe3C,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;EAuB9B,CAAC;AAmCH;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,WAAW,GAAG,MAAM,CACrB;IACC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;IAC/D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACtF,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,QAAA,MAAM,MAAM,uFAmLX,CAAC;AAGF,QAAA,MAAM,YAAY,6FAEjB,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/Skeleton.d.ts

@@ -1,22 +1,32 @@
 import React from "react";
-export declare const skeletonVariants: (props?: ({
-    variant?: "text" | "rounded" | "circular" | "rectangular" | null | undefined;
-    animation?: "pulse" | "wave" | "shimmer" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const skeletonVariantStyles: import("@hua-labs/dot").DotVariantsFn<{
+    variant: {
+        text: string;
+        circular: string;
+        rounded: string;
+        rectangular: string;
+    };
+    animation: {
+        pulse: string;
+        wave: string;
+        shimmer: string;
+    };
+}>;
 /**
- * Skeleton 컴포넌트의 props
+ * Skeleton component props
  */
-export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
     variant?: "text" | "circular" | "rectangular" | "rounded";
     width?: string | number;
     height?: string | number;
     animation?: "pulse" | "wave" | "shimmer";
-    className?: string;
+    dot?: string;
+    style?: React.CSSProperties;
 }
 /**
- * Skeleton 컴포넌트 / Skeleton component
+ * Skeleton component
  *
- * 로딩 중 콘텐츠의 플레이스홀더를 표시하는 스켈레톤 컴포넌트입니다.
+ * A skeleton component for displaying loading placeholders.
  *
  * @example
  * <Skeleton />
@@ -28,11 +38,29 @@ export declare const SkeletonText: React.ForwardRefExoticComponent<Omit<Skeleton
 export declare const SkeletonCircle: React.ForwardRefExoticComponent<Omit<SkeletonProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
 export declare const SkeletonRectangle: React.ForwardRefExoticComponent<Omit<SkeletonProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
 export declare const SkeletonRounded: React.ForwardRefExoticComponent<Omit<SkeletonProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
-export declare const SkeletonCard: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export declare const SkeletonAvatar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export declare const SkeletonImage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export declare const SkeletonUserProfile: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export declare const SkeletonList: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export declare const SkeletonTable: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const SkeletonCard: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
+    dot?: string;
+    style?: React.CSSProperties;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const SkeletonAvatar: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
+    dot?: string;
+    style?: React.CSSProperties;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const SkeletonImage: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
+    dot?: string;
+    style?: React.CSSProperties;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const SkeletonUserProfile: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
+    dot?: string;
+    style?: React.CSSProperties;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const SkeletonList: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
+    dot?: string;
+    style?: React.CSSProperties;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const SkeletonTable: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
+    dot?: string;
+    style?: React.CSSProperties;
+} & React.RefAttributes<HTMLDivElement>>;
 export { Skeleton };
 //# sourceMappingURL=Skeleton.d.ts.map