@hua-labs/ui 2.1.1 → 2.3.0

package/dist/advanced-emotion.d.mts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { C as Color } from './common-YLvZxA_K.mjs';
+import { C as Color } from './common-Bej8Okcg.mjs';
 
 /**
  * EmotionMeter 컴포넌트의 props / EmotionMeter component props
@@ -10,11 +10,13 @@ import { C as Color } from './common-YLvZxA_K.mjs';
  * @property {"blue" | "green" | "yellow" | "red"} [color="blue"] - 미터 색상 / Meter color
  * @extends {React.HTMLAttributes<HTMLDivElement>}
  */
-interface EmotionMeterProps extends React.HTMLAttributes<HTMLDivElement> {
+interface EmotionMeterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
     value: number;
     max?: number;
     size?: "sm" | "md" | "lg";
     color?: "blue" | "green" | "yellow" | "red" | Color;
+    dot?: string;
+    style?: React.CSSProperties;
 }
 /**
  * EmotionMeter 컴포넌트 / EmotionMeter component
@@ -52,10 +54,12 @@ declare const EmotionMeter: React.ForwardRefExoticComponent<EmotionMeterProps &
  * @property {"sm" | "md" | "lg"} [size="md"] - 버튼 크기 / Button size
  * @extends {React.ButtonHTMLAttributes<HTMLButtonElement>}
  */
-interface EmotionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface EmotionButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className'> {
     emotion: string;
     isSelected?: boolean;
     size?: "sm" | "md" | "lg";
+    dot?: string;
+    style?: React.CSSProperties;
 }
 /**
  * EmotionButton 컴포넌트 / EmotionButton component
@@ -103,7 +107,7 @@ declare const EmotionButton: React.ForwardRefExoticComponent<EmotionButtonProps
  * @property {"button" | "card" | "chip"} [variant="button"] - 감정 표시 스타일 / Emotion display style
  * @extends {React.HTMLAttributes<HTMLDivElement>}
  */
-interface EmotionSelectorProps extends React.HTMLAttributes<HTMLDivElement> {
+interface EmotionSelectorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
     selectedEmotion?: string;
     onEmotionSelect?: (emotion: string) => void;
     layout?: "grid" | "list" | "compact";
@@ -118,6 +122,8 @@ interface EmotionSelectorProps extends React.HTMLAttributes<HTMLDivElement> {
     }>;
     size?: "sm" | "md" | "lg";
     variant?: "button" | "card" | "chip";
+    dot?: string;
+    style?: React.CSSProperties;
 }
 /**
  * EmotionSelector 컴포넌트 / EmotionSelector component
@@ -175,7 +181,7 @@ declare const EmotionSelector: React.ForwardRefExoticComponent<EmotionSelectorPr
  * @property {"compact" | "detailed" | "card"} [layout="detailed"] - 레이아웃 타입 / Layout type
  * @extends {React.HTMLAttributes<HTMLDivElement>}
  */
-interface EmotionAnalysisProps extends React.HTMLAttributes<HTMLDivElement> {
+interface EmotionAnalysisProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
     primaryEmotion?: {
         name: string;
         intensity: number;
@@ -195,6 +201,8 @@ interface EmotionAnalysisProps extends React.HTMLAttributes<HTMLDivElement> {
     showKeywords?: boolean;
     showMetrics?: boolean;
     layout?: "compact" | "detailed" | "card";
+    dot?: string;
+    style?: React.CSSProperties;
 }
 /**
  * EmotionAnalysis 컴포넌트 / EmotionAnalysis component

package/dist/advanced-emotion.mjs

@@ -1,3 +1,3 @@
 "use client";
-export{d as EmotionAnalysis,b as EmotionButton,a as EmotionMeter,c as EmotionSelector}from'./chunk-WP7VFE77.mjs';import'./chunk-6HVJFEDA.mjs';import'./chunk-3CCF7U3P.mjs';import'./chunk-U6CTBZ2U.mjs';//# sourceMappingURL=advanced-emotion.mjs.map
+export{d as EmotionAnalysis,b as EmotionButton,a as EmotionMeter,c as EmotionSelector}from'./chunk-XU2XBAEW.mjs';import'./chunk-UR3TIWBS.mjs';import'./chunk-M4JE7TQL.mjs';import'./chunk-RICRFXFP.mjs';import'./chunk-LPHUWTQ2.mjs';import'./chunk-7T3IUG3G.mjs';import'./chunk-7CGJQSJO.mjs';import'./chunk-OBMOTQEU.mjs';import'./chunk-EAZEI74V.mjs';//# sourceMappingURL=advanced-emotion.mjs.map
 //# sourceMappingURL=advanced-emotion.mjs.map

package/dist/advanced-motion.d.mts

@@ -1,13 +1,14 @@
 import React from 'react';
 export { EmotionAnalysis, EmotionAnalysisProps, EmotionButton, EmotionButtonProps, EmotionMeter, EmotionMeterProps, EmotionSelector, EmotionSelectorProps } from './advanced-emotion.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import './common-YLvZxA_K.mjs';
+import './common-Bej8Okcg.mjs';
 
-type TransitionType$1 = 'fade' | 'slide' | 'scale' | 'flip' | 'morph' | 'cube' | 'zoom' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right';
-type TransitionEasing$1 = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'bounce' | 'elastic' | 'smooth';
+type TransitionType$1 = "fade" | "slide" | "scale" | "flip" | "morph" | "cube" | "zoom" | "slide-up" | "slide-down" | "slide-left" | "slide-right";
+type TransitionEasing$1 = "linear" | "ease-in" | "ease-out" | "ease-in-out" | "bounce" | "elastic" | "smooth";
 interface AdvancedPageTransitionProps {
     children: React.ReactNode;
-    className?: string;
+    dot?: string;
+    style?: React.CSSProperties;
     type?: TransitionType$1;
     duration?: number;
     easing?: TransitionEasing$1;
@@ -16,7 +17,8 @@ interface AdvancedPageTransitionProps {
     onStart?: () => void;
     onComplete?: () => void;
     showProgress?: boolean;
-    progressClassName?: string;
+    progressDot?: string;
+    progressStyle?: React.CSSProperties;
 }
 declare const AdvancedPageTransition: React.ForwardRefExoticComponent<AdvancedPageTransitionProps & React.RefAttributes<HTMLDivElement>>;
 declare const FadePageTransition: React.ForwardRefExoticComponent<Omit<AdvancedPageTransitionProps, "type"> & React.RefAttributes<HTMLDivElement>>;
@@ -102,8 +104,9 @@ declare const usePageTransitionManager: (config?: PageTransitionManagerConfig) =
  * @property {boolean} [scale=false] - 스케일 효과 추가 / Add scale effect
  * @property {boolean} [opacity=false] - 투명도 효과 추가 / Add opacity effect
  * @property {boolean} [rotate=false] - 회전 효과 추가 / Add rotation effect
+ * @property {boolean} [disableOnMobile=false] - 모바일(768px 미만)에서 자동 비활성화
  */
-interface ParallaxProps extends React.HTMLAttributes<HTMLDivElement> {
+interface ParallaxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {
     speed?: number;
     direction?: "up" | "down" | "left" | "right";
     offset?: number;
@@ -112,6 +115,9 @@ interface ParallaxProps extends React.HTMLAttributes<HTMLDivElement> {
     opacity?: boolean;
     rotate?: boolean;
     rotateDirection?: "cw" | "ccw";
+    disableOnMobile?: boolean;
+    dot?: string;
+    style?: React.CSSProperties;
 }
 /**
  * Parallax 컴포넌트 / Parallax component
@@ -119,20 +125,21 @@ interface ParallaxProps extends React.HTMLAttributes<HTMLDivElement> {
  * 스크롤에 반응하여 패럴렉스 효과를 제공하는 컴포넌트입니다.
  * 다양한 방향과 속도, 추가 효과(스케일, 투명도, 회전)를 지원합니다.
  *
- * Component that provides parallax effect in response to scrolling.
- * Supports various directions, speeds, and additional effects (scale, opacity, rotation).
+ * 성능 최적화:
+ * - 모든 인스턴스가 하나의 scroll/resize 리스너 공유
+ * - IntersectionObserver로 뷰포트 밖 요소 업데이트 건너뛰기
+ * - ref 기반 직접 DOM 조작 (React 리렌더 없음)
  *
  * @component
  * @example
- * // 기본 사용 / Basic usage
  * <Parallax speed={0.3}>
  *   <img src="/background.jpg" alt="background" />
  * </Parallax>
  *
  * @example
- * // 다양한 효과 / With effects
- * <Parallax speed={0.5} scale opacity direction="up">
- *   <div className="h-screen bg-gradient-to-b from-indigo-500 to-purple-600" />
+ * // 모바일에서 비활성화
+ * <Parallax speed={0.5} disableOnMobile>
+ *   <div style={{ position: 'absolute', inset: 0 }} />
  * </Parallax>
  */
 declare const Parallax: React.ForwardRefExoticComponent<ParallaxProps & React.RefAttributes<HTMLDivElement>>;
@@ -145,10 +152,10 @@ declare const Parallax: React.ForwardRefExoticComponent<ParallaxProps & React.Re
  * @property {boolean} [pauseOnClick=false] - 클릭시 일시정지 / Pause on click
  * @property {number} [gap=16] - 아이템 간격 (px) / Gap between items in pixels
  * @property {boolean} [gradient=true] - 양쪽 페이드 그라디언트 / Fade gradient on edges
- * @property {string} [gradientColor="hsl(var(--background))"] - 그라디언트 색상 / Gradient color
+ * @property {string} [gradientColor="var(--color-background)"] - 그라디언트 색상 / Gradient color
  * @property {number} [gradientWidth=100] - 그라디언트 너비 (px) / Gradient width in pixels
  */
-interface MarqueeProps extends React.HTMLAttributes<HTMLDivElement> {
+interface MarqueeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
     direction?: "left" | "right" | "up" | "down";
     speed?: number;
     pauseOnHover?: boolean;
@@ -157,6 +164,8 @@ interface MarqueeProps extends React.HTMLAttributes<HTMLDivElement> {
     gradient?: boolean;
     gradientColor?: string;
     gradientWidth?: number;
+    dot?: string;
+    style?: React.CSSProperties;
 }
 /**
  * Marquee 컴포넌트 / Marquee component
@@ -191,13 +200,16 @@ declare const Marquee: React.ForwardRefExoticComponent<MarqueeProps & React.RefA
  * @property {number} [glowOpacity=0.6] - 글로우 투명도 / Glow opacity
  * @property {boolean} [border=true] - 글로우 보더 표시 / Show glow border
  * @property {string} [borderColor] - 보더 색상 (기본: glowColor) / Border color (default: glowColor)
+ * @property {string} [dot] - dot utility string for additional styles
  */
-interface GlowCardProps extends React.HTMLAttributes<HTMLDivElement> {
+interface GlowCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
     glowColor?: string;
     glowSize?: number;
     glowOpacity?: number;
     border?: boolean;
     borderColor?: string;
+    dot?: string;
+    style?: React.CSSProperties;
 }
 /**
  * GlowCard 컴포넌트 / GlowCard component
@@ -218,32 +230,33 @@ interface GlowCardProps extends React.HTMLAttributes<HTMLDivElement> {
 declare const GlowCard: React.ForwardRefExoticComponent<GlowCardProps & React.RefAttributes<HTMLDivElement>>;
 
 /**
- * SpotlightCard 컴포넌트의 props / SpotlightCard component props
- * @property {string} [spotlightColor="rgba(255, 255, 255, 0.1)"] - 스포트라이트 색상 / Spotlight color
- * @property {number} [spotlightSize=300] - 스포트라이트 크기 (px) / Spotlight size in pixels
- * @property {boolean} [gradient=true] - 그라디언트 배경 효과 / Gradient background effect
- * @property {string} [gradientFrom="rgba(255, 255, 255, 0.05)"] - 그라디언트 시작 색상 / Gradient start color
- * @property {string} [gradientTo="transparent"] - 그라디언트 끝 색상 / Gradient end color
+ * SpotlightCard component props
+ * @property {string} [spotlightColor="rgba(255, 255, 255, 0.1)"] - Spotlight color
+ * @property {number} [spotlightSize=300] - Spotlight size in pixels
+ * @property {boolean} [gradient=true] - Gradient background effect
+ * @property {string} [gradientFrom="rgba(255, 255, 255, 0.05)"] - Gradient start color
+ * @property {string} [gradientTo="transparent"] - Gradient end color
+ * @property {string} [dot] - dot utility string for additional styles
+ * @property {React.CSSProperties} [style] - Additional inline styles (merged last)
  */
-interface SpotlightCardProps extends React.HTMLAttributes<HTMLDivElement> {
+interface SpotlightCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
     spotlightColor?: string;
     spotlightSize?: number;
     gradient?: boolean;
     gradientFrom?: string;
     gradientTo?: string;
+    dot?: string;
+    style?: React.CSSProperties;
 }
 /**
- * SpotlightCard 컴포넌트 / SpotlightCard component
- *
- * 마우스 위치에 스포트라이트 효과를 표시하는 프리미엄 카드 컴포넌트입니다.
- * 다크 테마 랜딩 페이지, 프리미엄 UI에 적합합니다.
+ * SpotlightCard component
  *
  * Premium card component that displays a spotlight effect at mouse position.
  * Perfect for dark theme landing pages and premium UI.
  *
  * @component
  * @example
- * <SpotlightCard className="bg-gray-900 text-white p-8">
+ * <SpotlightCard dot="p-8" style={{ background: 'rgb(17 24 39)' }}>
  *   <h3>Premium Feature</h3>
  *   <p>Discover our exclusive features</p>
  * </SpotlightCard>
@@ -258,14 +271,18 @@ declare const SpotlightCard: React.ForwardRefExoticComponent<SpotlightCardProps
  * @property {number} [threshold=0.5] - 공개 시작 임계값 (0-1) / Reveal threshold (0-1)
  * @property {boolean} [byWord=false] - 단어별 공개 / Reveal by word
  * @property {boolean} [byChar=false] - 글자별 공개 / Reveal by character
+ * @property {string} [dot] - dot utility string for additional styles
+ * @property {React.CSSProperties} [style] - inline style overrides
  */
-interface TextRevealProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+interface TextRevealProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {
     text: string;
     revealColor?: string;
     hiddenColor?: string;
     threshold?: number;
     byWord?: boolean;
     byChar?: boolean;
+    dot?: string;
+    style?: React.CSSProperties;
 }
 /**
  * TextReveal 컴포넌트 / TextReveal component
@@ -299,14 +316,18 @@ declare const TextReveal: React.ForwardRefExoticComponent<TextRevealProps & Reac
  * @property {number} [blurAmount=100] - 블러 양 (px) / Blur amount in pixels
  * @property {"linear" | "radial" | "conic" | "mesh"} [type="mesh"] - 그라디언트 타입 / Gradient type
  * @property {boolean} [animate=true] - 애니메이션 활성화 / Enable animation
+ * @property {string} [dot] - dot utility string for additional styles
+ * @property {React.CSSProperties} [style] - inline style overrides
  */
-interface AnimatedGradientProps extends React.HTMLAttributes<HTMLDivElement> {
+interface AnimatedGradientProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {
     colors?: string[];
     speed?: number;
     blur?: boolean;
     blurAmount?: number;
     type?: "linear" | "radial" | "conic" | "mesh";
     animate?: boolean;
+    dot?: string;
+    style?: React.CSSProperties;
 }
 /**
  * AnimatedGradient 컴포넌트 / AnimatedGradient component
@@ -320,7 +341,7 @@ interface AnimatedGradientProps extends React.HTMLAttributes<HTMLDivElement> {
  * @component
  * @example
  * // 메쉬 그라디언트 / Mesh gradient
- * <AnimatedGradient type="mesh" className="absolute inset-0 -z-10" />
+ * <AnimatedGradient type="mesh" dot="absolute inset-0" style={{ zIndex: -1 }} />
  *
  * @example
  * // 커스텀 색상 / Custom colors
@@ -341,8 +362,10 @@ declare const AnimatedGradient: React.ForwardRefExoticComponent<AnimatedGradient
  * @property {boolean} [glare=true] - 글레어 효과 / Glare effect
  * @property {number} [maxGlare=0.3] - 최대 글레어 투명도 / Maximum glare opacity
  * @property {boolean} [reset=true] - 마우스 떠나면 리셋 / Reset on mouse leave
+ * @property {string} [dot] - dot utility string for additional styles
+ * @property {React.CSSProperties} [style] - inline styles
  */
-interface TiltCardProps extends React.HTMLAttributes<HTMLDivElement> {
+interface TiltCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {
     maxTilt?: number;
     perspective?: number;
     scale?: number;
@@ -350,6 +373,8 @@ interface TiltCardProps extends React.HTMLAttributes<HTMLDivElement> {
     glare?: boolean;
     maxGlare?: number;
     reset?: boolean;
+    dot?: string;
+    style?: React.CSSProperties;
 }
 /**
  * TiltCard 컴포넌트 / TiltCard component
@@ -362,7 +387,7 @@ interface TiltCardProps extends React.HTMLAttributes<HTMLDivElement> {
  *
  * @component
  * @example
- * <TiltCard className="bg-white shadow-lg rounded-xl p-6">
+ * <TiltCard dot="bg-white shadow-lg rounded-xl p-6">
  *   <img src="/product.jpg" alt="Product" />
  *   <h3>Premium Product</h3>
  * </TiltCard>
@@ -385,8 +410,9 @@ declare const TiltCard: React.ForwardRefExoticComponent<TiltCardProps & React.Re
  * @property {"top" | "bottom" | "both"} [gradientDirection="bottom"] - 그라디언트 방향 / Gradient direction
  * @property {number} [playbackRate=1] - 재생 속도 / Playback rate
  * @property {boolean} [fadeIn=true] - 페이드 인 효과 / Fade in effect
+ * @property {string} [dot] - dot 스타일 유틸리티 문자열 / dot utility string
  */
-interface VideoBackgroundProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+interface VideoBackgroundProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {
     src: string;
     type?: "native" | "youtube" | "vimeo";
     poster?: string;
@@ -402,6 +428,8 @@ interface VideoBackgroundProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     playbackRate?: number;
     fadeIn?: boolean;
     children?: React.ReactNode;
+    dot?: string;
+    style?: React.CSSProperties;
 }
 /**
  * VideoBackground 컴포넌트 / VideoBackground component
@@ -450,8 +478,10 @@ declare const VideoBackground: React.ForwardRefExoticComponent<VideoBackgroundPr
  * @property {boolean} [showPlayPause=false] - 재생/일시정지 버튼 표시 / Show play/pause button
  * @property {"left" | "right" | "center"} [playPausePosition="right"] - 재생/일시정지 버튼 위치 / Play/pause button position
  */
-interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "className"> {
     children: React.ReactNode[];
+    dot?: string;
+    style?: React.CSSProperties;
     autoPlay?: boolean;
     interval?: number;
     loop?: boolean;
@@ -485,7 +515,18 @@ interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'chil
  */
 declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<HTMLDivElement>>;
 
-interface ImageRevealProps extends React.HTMLAttributes<HTMLDivElement> {
+/**
+ * ImageReveal 컴포넌트의 props / ImageReveal component props
+ * @property {string} src - 이미지 src / Image src
+ * @property {string} alt - 이미지 alt / Image alt
+ * @property {"left"|"right"|"up"|"down"} [direction="left"] - 공개 방향 / Reveal direction
+ * @property {number} [threshold=0.3] - 공개 시작 임계값 (0-1) / Reveal threshold (0-1)
+ * @property {string} [height="400px"] - 이미지 높이 / Image height
+ * @property {string} [overlayColor] - 오버레이 색상 / Overlay color
+ * @property {string} [dot] - dot utility string for additional styles
+ * @property {React.CSSProperties} [style] - inline style overrides
+ */
+interface ImageRevealProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {
     /** 이미지 src */
     src: string;
     /** 이미지 alt */
@@ -498,12 +539,23 @@ interface ImageRevealProps extends React.HTMLAttributes<HTMLDivElement> {
     height?: string;
     /** 오버레이 색상 */
     overlayColor?: string;
+    /** dot utility string for additional styles */
+    dot?: string;
+    /** inline style overrides */
+    style?: React.CSSProperties;
 }
 /**
  * ImageReveal - 스크롤 기반 이미지 공개 컴포넌트
  *
  * TextReveal에서 영감 받은 이미지 공개 효과.
  * clip-path를 사용하여 스크롤에 따라 이미지가 점진적으로 드러남.
+ *
+ * @component
+ * @example
+ * <ImageReveal src="/photo.jpg" alt="Scenic view" direction="left" />
+ *
+ * @example
+ * <ImageReveal src="/hero.jpg" alt="Hero image" direction="up" height="600px" overlayColor="rgba(0,0,0,0.4)" />
  */
 declare const ImageReveal: React.ForwardRefExoticComponent<ImageRevealProps & React.RefAttributes<HTMLDivElement>>;
 
@@ -513,25 +565,32 @@ interface DotNavItem {
     /** 라벨 (호버 시 표시) */
     label?: string;
 }
-interface DotNavProps extends React.HTMLAttributes<HTMLElement> {
+interface DotNavProps extends Omit<React.HTMLAttributes<HTMLElement>, "className"> {
     /** 섹션 목록 */
     items: DotNavItem[];
     /** 위치 @default 'right' */
     position?: "left" | "right";
-    /** 활성 색상 @default 'bg-primary' */
-    activeColor?: string;
-    /** 비활성 색상 @default 'bg-muted-foreground/30' */
-    inactiveColor?: string;
+    /** 활성 도트 스타일 오버라이드 */
+    activeDotStyle?: React.CSSProperties;
+    /** 비활성 도트 스타일 오버라이드 */
+    inactiveDotStyle?: React.CSSProperties;
+    /** dot 유틸리티 스트링 (컨테이너) */
+    dot?: string;
+    style?: React.CSSProperties;
 }
 /**
  * DotNav - 섹션 도트 네비게이터
  *
  * 포트폴리오/immersive 테마용 고정 위치 네비게이션.
  * 스크롤 위치에 따라 활성 섹션 자동 추적.
+ *
+ * @example
+ * <DotNav items={[{ id: 'hero', label: 'Hero' }, { id: 'about', label: 'About' }]} />
+ * <DotNav items={sections} position="left" />
  */
 declare const DotNav: React.ForwardRefExoticComponent<DotNavProps & React.RefAttributes<HTMLElement>>;
 
-interface HorizontalScrollProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onProgress'> {
+interface HorizontalScrollProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'onProgress'> {
     /** 가로 스크롤 컨텐츠 */
     children: React.ReactNode;
     /** 스크롤 높이 배율 (패널 수 × 이 값 = 총 스크롤 높이) @default 1 */
@@ -540,6 +599,9 @@ interface HorizontalScrollProps extends Omit<React.HTMLAttributes<HTMLDivElement
     snap?: boolean;
     /** 진행률 콜백 */
     onProgress?: (progress: number) => void;
+    /** dot 유틸리티 클래스 (outer wrapper에 적용) */
+    dot?: string;
+    style?: React.CSSProperties;
 }
 /**
  * HorizontalScroll - 세로 스크롤을 가로 스크롤로 변환
@@ -557,8 +619,10 @@ interface BlogEditorHeaderProps {
     onBack?: () => void;
     /** 뒤로가기 링크 컴포넌트 / Back link component */
     backLink?: React.ReactNode;
-    /** 추가 CSS 클래스 / Additional CSS classes */
-    className?: string;
+    /** dot 유틸리티 스타일 */
+    dot?: string;
+    /** 인라인 스타일 */
+    style?: React.CSSProperties;
 }
 /**
  * BlogEditorHeader 컴포넌트
@@ -570,8 +634,10 @@ declare const BlogEditorHeader: React.ForwardRefExoticComponent<BlogEditorHeader
  * BlogEditorMetadata Props
  */
 interface BlogEditorMetadataProps {
-    /** 추가 CSS 클래스 / Additional CSS classes */
-    className?: string;
+    /** dot 유틸리티 스타일 */
+    dot?: string;
+    /** 인라인 스타일 */
+    style?: React.CSSProperties;
 }
 /**
  * BlogEditorMetadata 컴포넌트
@@ -583,8 +649,10 @@ declare const BlogEditorMetadata: React.ForwardRefExoticComponent<BlogEditorMeta
  * BlogEditorLanguageTabs Props
  */
 interface BlogEditorLanguageTabsProps {
-    /** 추가 CSS 클래스 / Additional CSS classes */
-    className?: string;
+    /** dot 유틸리티 스타일 */
+    dot?: string;
+    /** 인라인 스타일 */
+    style?: React.CSSProperties;
 }
 /**
  * BlogEditorLanguageTabs 컴포넌트
@@ -596,8 +664,10 @@ declare const BlogEditorLanguageTabs: React.ForwardRefExoticComponent<BlogEditor
  * BlogEditorContent Props
  */
 interface BlogEditorContentProps {
-    /** 추가 CSS 클래스 / Additional CSS classes */
-    className?: string;
+    /** dot 유틸리티 스타일 */
+    dot?: string;
+    /** 인라인 스타일 */
+    style?: React.CSSProperties;
     /** textarea ref 콜백 / textarea ref callback */
     textareaRef?: React.RefObject<HTMLTextAreaElement | null>;
 }
@@ -613,8 +683,10 @@ declare const BlogEditorContent: React.ForwardRefExoticComponent<BlogEditorConte
 interface BlogEditorToolbarProps {
     /** textarea ref / textarea reference */
     textareaRef: React.RefObject<HTMLTextAreaElement | null>;
-    /** 추가 CSS 클래스 / Additional CSS classes */
-    className?: string;
+    /** dot 유틸리티 스타일 */
+    dot?: string;
+    /** 인라인 스타일 */
+    style?: React.CSSProperties;
 }
 /**
  * BlogEditorToolbar 컴포넌트
@@ -628,8 +700,10 @@ declare const BlogEditorToolbar: React.ForwardRefExoticComponent<BlogEditorToolb
 interface BlogEditorPreviewProps {
     /** 커스텀 마크다운 렌더러 / Custom markdown renderer */
     renderMarkdown?: (content: string) => React.ReactNode;
-    /** 추가 CSS 클래스 / Additional CSS classes */
-    className?: string;
+    /** dot 유틸리티 스타일 */
+    dot?: string;
+    /** 인라인 스타일 */
+    style?: React.CSSProperties;
 }
 /**
  * BlogEditorPreview 컴포넌트
@@ -643,8 +717,10 @@ declare const BlogEditorPreview: React.ForwardRefExoticComponent<BlogEditorPrevi
 interface BlogEditorActionsProps {
     /** 취소 링크 컴포넌트 / Cancel link component */
     cancelLink?: React.ReactNode;
-    /** 추가 CSS 클래스 / Additional CSS classes */
-    className?: string;
+    /** dot 유틸리티 스타일 */
+    dot?: string;
+    /** 인라인 스타일 */
+    style?: React.CSSProperties;
 }
 /**
  * BlogEditorActions 컴포넌트
@@ -658,8 +734,10 @@ declare const BlogEditorActions: React.ForwardRefExoticComponent<BlogEditorActio
 interface BlogEditorTranslateProps {
     /** 힌트 메시지 오버라이드 / Hint message override */
     hint?: string;
-    /** 추가 CSS 클래스 / Additional CSS classes */
-    className?: string;
+    /** dot 유틸리티 스타일 */
+    dot?: string;
+    /** 인라인 스타일 */
+    style?: React.CSSProperties;
 }
 /**
  * BlogEditorTranslate 컴포넌트
@@ -671,6 +749,7 @@ declare const BlogEditorTranslate: React.ForwardRefExoticComponent<BlogEditorTra
  * BlogEditor 컴포넌트 타입 정의
  * BlogEditor component type definitions
  */
+
 /**
  * 다국어 필드 타입 / Multilingual field type
  * 각 언어별로 값을 저장
@@ -834,8 +913,10 @@ interface BlogEditorProps {
     features?: BlogEditorFeatures;
     /** 스타일 변형 / Style variant */
     variant?: 'default' | 'glass' | 'minimal';
-    /** 추가 CSS 클래스 / Additional CSS classes */
-    className?: string;
+    /** dot 유틸리티 스타일 */
+    dot?: string;
+    /** 인라인 스타일 */
+    style?: React.CSSProperties;
     /** 자동저장 키 (localStorage) / Auto-save key for localStorage */
     autoSaveKey?: string;
     /** 자동저장 간격 (ms, 기본 3000) / Auto-save interval in ms (default 3000) */
@@ -905,8 +986,10 @@ interface BlogEditorRootProps {
     translateHint?: string;
     /** 최대 너비 / Max width */
     maxWidth?: string;
-    /** 추가 CSS 클래스 / Additional CSS classes */
-    className?: string;
+    /** dot 유틸리티 스타일 */
+    dot?: string;
+    /** 인라인 스타일 */
+    style?: React.CSSProperties;
     /** 자식 요소 / Children */
     children?: React.ReactNode;
 }

package/dist/advanced-motion.mjs

@@ -1,3 +1,3 @@
 "use client";
-export{a as AdvancedPageTransition,I as BlogEditor,G as BlogEditorActions,z as BlogEditorContent,w as BlogEditorHeader,y as BlogEditorLanguageTabs,x as BlogEditorMetadata,F as BlogEditorPreview,v as BlogEditorProvider,E as BlogEditorToolbar,H as BlogEditorTranslate,g as CubePageTransition,p as DotNav,b as FadePageTransition,e as FlipPageTransition,q as HorizontalScroll,o as ImageReveal,f as MorphPageTransition,k as Parallax,d as ScalePageTransition,c as SlidePageTransition,l as TextReveal,m as TiltCard,n as VideoBackground,h as ZoomPageTransition,r as generateSlug,C as getMarkdownPreview,D as insertMarkdown,s as isValidSlug,t as normalizeSlug,A as parseMarkdown,B as stripMarkdown,u as useBlogEditor,i as usePageTransition,j as usePageTransitionManager}from'./chunk-OFYITQXI.mjs';export{d as AnimatedGradient,e as Carousel,b as GlowCard,a as Marquee,c as SpotlightCard}from'./chunk-LSA7DU3N.mjs';export{d as EmotionAnalysis,b as EmotionButton,a as EmotionMeter,c as EmotionSelector}from'./chunk-WP7VFE77.mjs';import'./chunk-6HVJFEDA.mjs';import'./chunk-3CCF7U3P.mjs';import'./chunk-7OYT3QSY.mjs';import'./chunk-U6CTBZ2U.mjs';//# sourceMappingURL=advanced-motion.mjs.map
+export{a as AdvancedPageTransition,H as BlogEditor,F as BlogEditorActions,y as BlogEditorContent,v as BlogEditorHeader,x as BlogEditorLanguageTabs,w as BlogEditorMetadata,E as BlogEditorPreview,u as BlogEditorProvider,D as BlogEditorToolbar,G as BlogEditorTranslate,g as CubePageTransition,b as FadePageTransition,e as FlipPageTransition,p as HorizontalScroll,o as ImageReveal,f as MorphPageTransition,k as Parallax,d as ScalePageTransition,c as SlidePageTransition,l as TextReveal,m as TiltCard,n as VideoBackground,h as ZoomPageTransition,q as generateSlug,B as getMarkdownPreview,C as insertMarkdown,r as isValidSlug,s as normalizeSlug,z as parseMarkdown,A as stripMarkdown,t as useBlogEditor,i as usePageTransition,j as usePageTransitionManager}from'./chunk-L2LGSILS.mjs';export{a as DotNav}from'./chunk-EK6BLFVQ.mjs';export{d as AnimatedGradient,e as Carousel,b as GlowCard,a as Marquee,c as SpotlightCard}from'./chunk-TND4HPKW.mjs';import'./chunk-YW5DA7Q6.mjs';export{d as EmotionAnalysis,b as EmotionButton,a as EmotionMeter,c as EmotionSelector}from'./chunk-XU2XBAEW.mjs';import'./chunk-UR3TIWBS.mjs';import'./chunk-M4JE7TQL.mjs';import'./chunk-RICRFXFP.mjs';import'./chunk-LPHUWTQ2.mjs';import'./chunk-7T3IUG3G.mjs';import'./chunk-7CGJQSJO.mjs';import'./chunk-NSDWT2JM.mjs';import'./chunk-OBMOTQEU.mjs';import'./chunk-EAZEI74V.mjs';//# sourceMappingURL=advanced-motion.mjs.map
 //# sourceMappingURL=advanced-motion.mjs.map