@hua-labs/ui 2.2.0 → 2.3.0

package/dist/hooks/index.d.ts

@@ -7,4 +7,10 @@ export type { UseMouseOptions, UseMouseReturn } from "./useMouse";
 export { useReducedMotion } from "./useReducedMotion";
 export { useWindowSize } from "./useWindowSize";
 export type { UseWindowSizeOptions, UseWindowSizeReturn } from "./useWindowSize";
+export { useAnimatedEntrance } from "./useAnimatedEntrance";
+export type { UseAnimatedEntranceOptions, UseAnimatedEntranceReturn } from "./useAnimatedEntrance";
+export { useBreakpoint } from "./useBreakpoint";
+export { useDotEnv } from "./useDotEnv";
+export { useDotMap, mergeStyles, resolveDot } from "./useDotMap";
+export type { DotStyleMap, StyleObject } from "./useDotMap";
 //# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAErE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAE7F,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAElE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAErE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAE7F,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAElE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAEjF,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,0BAA0B,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAGnG,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACjE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC"}

package/dist/hooks/useAnimatedEntrance.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+export interface UseAnimatedEntranceOptions {
+    /** Component role key for preset lookup (e.g. 'card', 'hero') */
+    role: string;
+    /** Explicitly enable/disable animation (overrides preset) */
+    enabled?: boolean;
+}
+export interface UseAnimatedEntranceReturn<T extends HTMLElement = HTMLElement> {
+    ref: React.RefObject<T | null>;
+    style: React.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>
+ */
+export declare function useAnimatedEntrance<T extends HTMLElement = HTMLElement>({ role, enabled, }: UseAnimatedEntranceOptions): UseAnimatedEntranceReturn<T>;
+//# sourceMappingURL=useAnimatedEntrance.d.ts.map

package/dist/hooks/useAnimatedEntrance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnimatedEntrance.d.ts","sourceRoot":"","sources":["../../src/hooks/useAnimatedEntrance.ts"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAKtC,MAAM,WAAW,0BAA0B;IACzC,iEAAiE;IACjE,IAAI,EAAE,MAAM,CAAA;IACZ,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,WAAW,yBAAyB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW;IAC5E,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAA;IAC9B,KAAK,EAAE,KAAK,CAAC,aAAa,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAA;CAClB;AAqBD;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,EACvE,IAAI,EACJ,OAAO,GACR,EAAE,0BAA0B,GAAG,yBAAyB,CAAC,CAAC,CAAC,CAiC3D"}

package/dist/hooks/useBreakpoint.d.ts

@@ -0,0 +1,22 @@
+/** 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 })
+ */
+export declare function useBreakpoint(): Breakpoint | undefined;
+export {};
+//# sourceMappingURL=useBreakpoint.d.ts.map

package/dist/hooks/useBreakpoint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"AAIA,gDAAgD;AAChD,QAAA,MAAM,WAAW;;;;;;CAMP,CAAA;AAEV,KAAK,UAAU,GAAG,MAAM,OAAO,WAAW,CAAA;AAE1C;;;;;;;;;GASG;AACH,wBAAgB,aAAa,IAAI,UAAU,GAAG,SAAS,CAatD"}

package/dist/hooks/useDotEnv.d.ts

@@ -0,0 +1,12 @@
+import type { DotOptions } from "@hua-labs/dot";
+/**
+ * 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)
+ */
+export declare function useDotEnv(): DotOptions;
+//# sourceMappingURL=useDotEnv.d.ts.map

package/dist/hooks/useDotEnv.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDotEnv.d.ts","sourceRoot":"","sources":["../../src/hooks/useDotEnv.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAwB/C;;;;;;;;GAQG;AACH,wBAAgB,SAAS,IAAI,UAAU,CAItC"}

package/dist/hooks/useDotMap.d.ts

@@ -0,0 +1,38 @@
+import type { DotStyleMap, StyleObject } from "@hua-labs/dot";
+/**
+ * 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} />
+ */
+export 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).
+ */
+export 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.
+ */
+export declare function resolveDot(input?: string): React.CSSProperties;
+export type { DotStyleMap, StyleObject };
+//# sourceMappingURL=useDotMap.d.ts.map

package/dist/hooks/useDotMap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDotMap.d.ts","sourceRoot":"","sources":["../../src/hooks/useDotMap.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAG7D;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,MAAM,EACb,OAAO,CAAC,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAC/B;IACD,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE;QACR,YAAY,EAAE,MAAM,IAAI,CAAC;QACzB,YAAY,EAAE,MAAM,IAAI,CAAC;QACzB,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,MAAM,EAAE,MAAM,IAAI,CAAC;KACpB,CAAC;CACH,CAuCA;AAED;;;GAGG;AACH,wBAAgB,WAAW,CACzB,GAAG,OAAO,EAAE,CAAC,WAAW,GAAG,KAAK,CAAC,aAAa,GAAG,SAAS,CAAC,EAAE,GAC5D,KAAK,CAAC,aAAa,CAMrB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,aAAa,CAG9D;AAED,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC"}