asterui 0.12.0 → 0.12.1

package/README.md

@@ -102,7 +102,7 @@ export default function App() {
 
 ## Components
 
-80+ components including forms, data display, navigation, feedback, and layout. See the full list at [asterui.com/components](https://asterui.com/components).
+90+ components including forms, data display, navigation, feedback, and layout. See the full list at [asterui.com/components](https://asterui.com/components).
 
 ## Requirements
 

package/dist/components/Form.d.ts

@@ -5,6 +5,8 @@ export interface FormProps<TFieldValues extends FieldValues = FieldValues> exten
     onFinish?: SubmitHandler<TFieldValues>;
     initialValues?: UseFormProps<TFieldValues>['defaultValues'];
     layout?: 'vertical' | 'horizontal' | 'inline';
+    /** Label width in pixels for horizontal layout (default: 80) */
+    labelWidth?: number;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     children: React.ReactNode;
 }
@@ -26,6 +28,7 @@ export interface FormRule {
     message?: string;
     validate?: (value: any) => boolean | string | Promise<boolean | string>;
 }
+export type ValidateTrigger = 'onChange' | 'onBlur' | 'onSubmit' | ('onChange' | 'onBlur' | 'onSubmit')[];
 export interface FormItemProps {
     name?: string | string[];
     label?: string;
@@ -36,6 +39,20 @@ export interface FormItemProps {
     inline?: boolean;
     className?: string;
     children: React.ReactElement;
+    /** Tooltip text to show next to label */
+    tooltip?: string;
+    /** Additional content below the form control */
+    extra?: React.ReactNode;
+    /** Show validation feedback icon */
+    hasFeedback?: boolean;
+    /** Field names that this field depends on for validation */
+    dependencies?: string[];
+    /** When to trigger validation */
+    validateTrigger?: ValidateTrigger;
+    /** Initial value for this field (overrides Form's initialValues) */
+    initialValue?: any;
+    /** Hide this field (still validates and submits) */
+    hidden?: boolean;
 }
 export interface FormListProps<TFieldValues extends FieldValues = FieldValues> {
     name: FieldArrayPath<TFieldValues>;
@@ -45,8 +62,8 @@ export interface FormListProps<TFieldValues extends FieldValues = FieldValues> {
         move: (from: number, to: number) => void;
     }) => React.ReactNode;
 }
-declare function FormRoot<TFieldValues extends FieldValues = FieldValues>({ form: externalForm, onFinish, initialValues, layout, size, children, className, noValidate, ...props }: FormProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
-declare function FormItem({ name, label, help, required, rules, valuePropName, inline, className, children, }: FormItemProps): import("react/jsx-runtime").JSX.Element;
+declare function FormRoot<TFieldValues extends FieldValues = FieldValues>({ form: externalForm, onFinish, initialValues, layout, labelWidth, size, children, className, noValidate, ...props }: FormProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
+declare function FormItem({ name, label, help, required, rules, valuePropName, inline, className, children, tooltip, extra, hasFeedback, dependencies, validateTrigger, initialValue, hidden, }: FormItemProps): import("react/jsx-runtime").JSX.Element;
 declare function FormList<TFieldValues extends FieldValues = FieldValues>({ name, children, }: FormListProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
 export declare function useFormInstance<TFieldValues extends FieldValues = FieldValues>(): UseFormReturn<TFieldValues, any, TFieldValues> & {
     setFieldValue: import('react-hook-form').UseFormSetValue<TFieldValues>;
@@ -58,9 +75,17 @@ export declare function useFormInstance<TFieldValues extends FieldValues = Field
     isFieldTouched: (name: string) => boolean;
     getFieldError: (name: string) => string | undefined;
 };
+export interface FormErrorListProps {
+    /** Specific field names to show errors for (shows all errors if not specified) */
+    fields?: string[];
+    /** Custom className */
+    className?: string;
+}
+declare function FormErrorList({ fields, className }: FormErrorListProps): import("react/jsx-runtime").JSX.Element | null;
 export declare const Form: typeof FormRoot & {
     Item: typeof FormItem;
     List: typeof FormList;
+    ErrorList: typeof FormErrorList;
     useForm: typeof useFormInstance;
 };
 export type { UseFormReturn as FormInstance };

package/dist/components/Radio.d.ts

@@ -5,11 +5,17 @@ export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     className?: string;
     children?: React.ReactNode;
 }
+export interface RadioGroupChangeEvent {
+    target: {
+        value: string | number;
+        name?: string;
+    };
+}
 export interface RadioGroupProps {
     children: React.ReactNode;
     value?: string | number;
     defaultValue?: string | number;
-    onChange?: (value: string | number) => void;
+    onChange?: (e: RadioGroupChangeEvent) => void;
     name?: string;
     className?: string;
 }

package/dist/components/Status.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+export type StatusType = 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';
+export type StatusSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface StatusProps {
+    /** Status color type */
+    type?: StatusType;
+    /** Status size */
+    size?: StatusSize;
+    /** Ping animation effect */
+    ping?: boolean;
+    /** Bounce animation effect */
+    bounce?: boolean;
+    /** Accessibility label */
+    label?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const Status: React.FC<StatusProps>;

package/dist/index.d.ts

@@ -57,7 +57,7 @@ export type { FloatButtonProps, BackTopProps } from './components/FloatButton';
 export { Footer } from './components/Footer';
 export type { FooterProps, FooterTitleProps } from './components/Footer';
 export { Form, useFormInstance } from './components/Form';
-export type { FormProps, FormItemProps, FormRule, FormInstance } from './components/Form';
+export type { FormProps, FormItemProps, FormRule, FormInstance, FormErrorListProps, ValidateTrigger } from './components/Form';
 export { Grid, Row, Col } from './components/Grid';
 export type { RowProps, ColProps } from './components/Grid';
 export { Hero } from './components/Hero';
@@ -121,7 +121,7 @@ export type { ProgressProps } from './components/Progress';
 export { QRCode } from './components/QRCode';
 export type { QRCodeProps, QRCodeErrorLevel, QRCodeType, QRCodeStatus } from './components/QRCode';
 export { Radio } from './components/Radio';
-export type { RadioProps, RadioGroupProps } from './components/Radio';
+export type { RadioProps, RadioGroupProps, RadioGroupChangeEvent } from './components/Radio';
 export { RadialProgress } from './components/RadialProgress';
 export type { RadialProgressProps } from './components/RadialProgress';
 export { Range } from './components/Range';
@@ -144,6 +144,8 @@ export { Stack } from './components/Stack';
 export type { StackProps } from './components/Stack';
 export { Stats } from './components/Stat';
 export type { StatsProps, StatProps } from './components/Stat';
+export { Status } from './components/Status';
+export type { StatusProps, StatusType, StatusSize } from './components/Status';
 export { Steps } from './components/Steps';
 export type { StepsProps, StepProps } from './components/Steps';
 export { Table } from './components/Table';

package/dist/index.js

@@ -71,34 +71,35 @@ import { Space as Nr } from "./index71.js";
 import { Splitter as Wr } from "./index72.js";
 import { Stack as Er } from "./index73.js";
 import { Stats as Qr } from "./index74.js";
-import { Steps as jr } from "./index75.js";
-import { Table as Vr } from "./index76.js";
-import { Tabs as Yr } from "./index77.js";
-import { Textarea as _r } from "./index78.js";
-import { TextRotate as oe } from "./index79.js";
-import { CheckableTag as ee, Tag as te } from "./index80.js";
-import { ThemeController as me } from "./index81.js";
-import { TimePicker as xe } from "./index82.js";
-import { Timeline as ie } from "./index83.js";
-import { Toggle as se } from "./index84.js";
-import { Tour as le } from "./index85.js";
-import { Tooltip as ce } from "./index86.js";
-import { Transfer as Te } from "./index87.js";
-import { Tree as Pe } from "./index88.js";
-import { TreeSelect as be } from "./index89.js";
-import { Typography as he } from "./index90.js";
-import { Upload as ye } from "./index91.js";
-import { Hide as Re, Show as ve } from "./index92.js";
-import { useBreakpoint as Ie } from "./index93.js";
-import { useDisclosure as Be } from "./index94.js";
-import { useClipboard as Me } from "./index95.js";
-import { useLocalStorage as Ke } from "./index96.js";
-import { useDebounce as Ne } from "./index97.js";
-import { useClickOutside as We } from "./index98.js";
-import { usePrevious as Ee } from "./index99.js";
-import { useHover as Qe } from "./index100.js";
-import { useKeyPress as je, useKeyPressCallback as qe } from "./index101.js";
-import { useWindowSize as Xe } from "./index102.js";
+import { Status as jr } from "./index75.js";
+import { Steps as Vr } from "./index76.js";
+import { Table as Yr } from "./index77.js";
+import { Tabs as _r } from "./index78.js";
+import { Textarea as oe } from "./index79.js";
+import { TextRotate as ee } from "./index80.js";
+import { CheckableTag as pe, Tag as me } from "./index81.js";
+import { ThemeController as xe } from "./index82.js";
+import { TimePicker as ie } from "./index83.js";
+import { Timeline as se } from "./index84.js";
+import { Toggle as le } from "./index85.js";
+import { Tour as ce } from "./index86.js";
+import { Tooltip as Te } from "./index87.js";
+import { Transfer as Pe } from "./index88.js";
+import { Tree as be } from "./index89.js";
+import { TreeSelect as he } from "./index90.js";
+import { Typography as ye } from "./index91.js";
+import { Upload as Re } from "./index92.js";
+import { Hide as Fe, Show as Ie } from "./index93.js";
+import { useBreakpoint as Be } from "./index94.js";
+import { useDisclosure as Me } from "./index95.js";
+import { useClipboard as Ke } from "./index96.js";
+import { useLocalStorage as Ne } from "./index97.js";
+import { useDebounce as We } from "./index98.js";
+import { useClickOutside as Ee } from "./index99.js";
+import { usePrevious as Qe } from "./index100.js";
+import { useHover as je } from "./index101.js";
+import { useKeyPress as Ve, useKeyPressCallback as Xe } from "./index102.js";
+import { useWindowSize as Ze } from "./index103.js";
 export {
   e as Affix,
   f as Alert,
@@ -115,7 +116,7 @@ export {
   R as Cascader,
   F as Chart,
   b as Chat,
-  ee as CheckableTag,
+  pe as CheckableTag,
   P as Checkbox,
   Yo as Code,
   no as Col,
@@ -139,7 +140,7 @@ export {
   xo as Form,
   so as Grid,
   co as Hero,
-  Re as Hide,
+  Fe as Hide,
   To as Image,
   Po as Indicator,
   yo as Input,
@@ -171,43 +172,44 @@ export {
   uo as Row,
   Mr as Segmented,
   Br as Select,
-  ve as Show,
+  Ie as Show,
   Kr as Skeleton,
   Nr as Space,
   Wr as Splitter,
   Er as Stack,
   Qr as Stats,
-  jr as Steps,
-  Vr as Table,
-  Yr as Tabs,
-  te as Tag,
-  oe as TextRotate,
-  _r as Textarea,
-  me as ThemeController,
-  xe as TimePicker,
-  ie as Timeline,
-  se as Toggle,
-  ce as Tooltip,
-  le as Tour,
-  Te as Transfer,
-  Pe as Tree,
-  be as TreeSelect,
-  he as Typography,
-  ye as Upload,
+  jr as Status,
+  Vr as Steps,
+  Yr as Table,
+  _r as Tabs,
+  me as Tag,
+  ee as TextRotate,
+  oe as Textarea,
+  xe as ThemeController,
+  ie as TimePicker,
+  se as Timeline,
+  le as Toggle,
+  Te as Tooltip,
+  ce as Tour,
+  Pe as Transfer,
+  be as Tree,
+  he as TreeSelect,
+  ye as Typography,
+  Re as Upload,
   or as Window,
   fr as notification,
-  Ie as useBreakpoint,
-  We as useClickOutside,
-  Me as useClipboard,
-  Ne as useDebounce,
-  Be as useDisclosure,
+  Be as useBreakpoint,
+  Ee as useClickOutside,
+  Ke as useClipboard,
+  We as useDebounce,
+  Me as useDisclosure,
   ao as useFormInstance,
-  Qe as useHover,
-  je as useKeyPress,
-  qe as useKeyPressCallback,
-  Ke as useLocalStorage,
-  Ee as usePrevious,
+  je as useHover,
+  Ve as useKeyPress,
+  Xe as useKeyPressCallback,
+  Ne as useLocalStorage,
+  Qe as usePrevious,
   Ko as useSiderContext,
-  Xe as useWindowSize
+  Ze as useWindowSize
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index100.js

@@ -1,16 +1,11 @@
-import { useState as u, useRef as v, useEffect as a } from "react";
-function f() {
-  const [o, t] = u(!1), n = v(null);
-  return a(() => {
-    const e = n.current;
-    if (!e) return;
-    const r = () => t(!0), s = () => t(!1);
-    return e.addEventListener("mouseenter", r), e.addEventListener("mouseleave", s), () => {
-      e.removeEventListener("mouseenter", r), e.removeEventListener("mouseleave", s);
-    };
-  }, []), { ref: n, isHovered: o };
+import { useRef as t, useEffect as o } from "react";
+function f(r) {
+  const e = t(void 0);
+  return o(() => {
+    e.current = r;
+  }, [r]), e.current;
 }
 export {
-  f as useHover
+  f as usePrevious
 };
 //# sourceMappingURL=index100.js.map

package/dist/index100.js.map

@@ -1 +1 @@
-{"version":3,"file":"index100.js","sources":["../src/hooks/useHover.ts"],"sourcesContent":["import { useState, useRef, useEffect, type RefObject } from 'react'\n\nexport interface UseHoverReturn<T extends HTMLElement> {\n  ref: RefObject<T | null>\n  isHovered: boolean\n}\n\n/**\n * Hook that tracks hover state of an element.\n *\n * @returns Object with ref and isHovered state\n *\n * @example\n * const { ref, isHovered } = useHover<HTMLDivElement>()\n *\n * <div ref={ref} className={isHovered ? 'bg-blue-500' : 'bg-gray-500'}>\n *   Hover me!\n * </div>\n */\nexport function useHover<T extends HTMLElement = HTMLElement>(): UseHoverReturn<T> {\n  const [isHovered, setIsHovered] = useState(false)\n  const ref = useRef<T>(null)\n\n  useEffect(() => {\n    const node = ref.current\n    if (!node) return\n\n    const handleMouseEnter = () => setIsHovered(true)\n    const handleMouseLeave = () => setIsHovered(false)\n\n    node.addEventListener('mouseenter', handleMouseEnter)\n    node.addEventListener('mouseleave', handleMouseLeave)\n\n    return () => {\n      node.removeEventListener('mouseenter', handleMouseEnter)\n      node.removeEventListener('mouseleave', handleMouseLeave)\n    }\n  }, [])\n\n  return { ref, isHovered }\n}\n"],"names":["useHover","isHovered","setIsHovered","useState","ref","useRef","useEffect","node","handleMouseEnter","handleMouseLeave"],"mappings":";AAmBO,SAASA,IAAmE;AACjF,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAMC,EAAU,IAAI;AAE1B,SAAAC,EAAU,MAAM;AACd,UAAMC,IAAOH,EAAI;AACjB,QAAI,CAACG,EAAM;AAEX,UAAMC,IAAmB,MAAMN,EAAa,EAAI,GAC1CO,IAAmB,MAAMP,EAAa,EAAK;AAEjD,WAAAK,EAAK,iBAAiB,cAAcC,CAAgB,GACpDD,EAAK,iBAAiB,cAAcE,CAAgB,GAE7C,MAAM;AACX,MAAAF,EAAK,oBAAoB,cAAcC,CAAgB,GACvDD,EAAK,oBAAoB,cAAcE,CAAgB;AAAA,IACzD;AAAA,EACF,GAAG,CAAA,CAAE,GAEE,EAAE,KAAAL,GAAK,WAAAH,EAAA;AAChB;"}
+{"version":3,"file":"index100.js","sources":["../src/hooks/usePrevious.ts"],"sourcesContent":["import { useRef, useEffect } from 'react'\n\n/**\n * Hook that returns the previous value of a variable.\n * Useful for comparing current and previous values in effects.\n *\n * @param value - Current value\n * @returns Previous value (undefined on first render)\n *\n * @example\n * const [count, setCount] = useState(0)\n * const prevCount = usePrevious(count)\n *\n * // prevCount is the value from previous render\n * console.log(`Changed from ${prevCount} to ${count}`)\n */\nexport function usePrevious<T>(value: T): T | undefined {\n  const ref = useRef<T | undefined>(undefined)\n\n  useEffect(() => {\n    ref.current = value\n  }, [value])\n\n  return ref.current\n}\n"],"names":["usePrevious","value","ref","useRef","useEffect"],"mappings":";AAgBO,SAASA,EAAeC,GAAyB;AACtD,QAAMC,IAAMC,EAAsB,MAAS;AAE3C,SAAAC,EAAU,MAAM;AACd,IAAAF,EAAI,UAAUD;AAAA,EAChB,GAAG,CAACA,CAAK,CAAC,GAEHC,EAAI;AACb;"}

package/dist/index101.js

@@ -1,34 +1,16 @@
-import { useState as v, useCallback as i, useEffect as l } from "react";
-function c(n, f = {}) {
-  const { target: u, event: o = "keydown", preventDefault: r = !1 } = f, [a, d] = v(!1), t = i(
-    (e) => {
-      e.key === n && (r && e.preventDefault(), d(!0));
-    },
-    [n, r]
-  ), s = i(
-    (e) => {
-      e.key === n && d(!1);
-    },
-    [n]
-  );
-  return l(() => {
-    const e = u ?? window;
-    return o === "keydown" ? (e.addEventListener("keydown", t), e.addEventListener("keyup", s)) : e.addEventListener("keyup", t), () => {
-      e.removeEventListener("keydown", t), e.removeEventListener("keyup", s);
+import { useState as u, useRef as v, useEffect as a } from "react";
+function f() {
+  const [o, t] = u(!1), n = v(null);
+  return a(() => {
+    const e = n.current;
+    if (!e) return;
+    const r = () => t(!0), s = () => t(!1);
+    return e.addEventListener("mouseenter", r), e.addEventListener("mouseleave", s), () => {
+      e.removeEventListener("mouseenter", r), e.removeEventListener("mouseleave", s);
     };
-  }, [u, o, t, s]), a;
-}
-function y(n, f, u = {}) {
-  const { target: o, event: r = "keydown", preventDefault: a = !1 } = u;
-  l(() => {
-    const d = o ?? window, t = (s) => {
-      s.key === n && (a && s.preventDefault(), f(s));
-    };
-    return d.addEventListener(r, t), () => d.removeEventListener(r, t);
-  }, [o, n, f, r, a]);
+  }, []), { ref: n, isHovered: o };
 }
 export {
-  c as useKeyPress,
-  y as useKeyPressCallback
+  f as useHover
 };
 //# sourceMappingURL=index101.js.map

package/dist/index101.js.map

@@ -1 +1 @@
-{"version":3,"file":"index101.js","sources":["../src/hooks/useKeyPress.ts"],"sourcesContent":["import { useState, useEffect, useCallback } from 'react'\n\nexport interface UseKeyPressOptions {\n  /** Target element (default: window) */\n  target?: HTMLElement | Window | null\n  /** Event type: 'keydown' | 'keyup' (default: 'keydown') */\n  event?: 'keydown' | 'keyup'\n  /** Prevent default browser behavior */\n  preventDefault?: boolean\n}\n\n/**\n * Hook that detects when a specific key is pressed.\n *\n * @param targetKey - Key to detect (e.g., 'Enter', 'Escape', 'a')\n * @param options - Configuration options\n * @returns Whether the key is currently pressed\n *\n * @example\n * const enterPressed = useKeyPress('Enter')\n * const escapePressed = useKeyPress('Escape')\n *\n * useEffect(() => {\n *   if (escapePressed) closeModal()\n * }, [escapePressed])\n *\n * @example\n * // With callback for immediate action\n * useKeyPress('Escape', { preventDefault: true })\n */\nexport function useKeyPress(\n  targetKey: string,\n  options: UseKeyPressOptions = {}\n): boolean {\n  const { target, event = 'keydown', preventDefault = false } = options\n  const [keyPressed, setKeyPressed] = useState(false)\n\n  const downHandler = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === targetKey) {\n        if (preventDefault) e.preventDefault()\n        setKeyPressed(true)\n      }\n    },\n    [targetKey, preventDefault]\n  )\n\n  const upHandler = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === targetKey) {\n        setKeyPressed(false)\n      }\n    },\n    [targetKey]\n  )\n\n  useEffect(() => {\n    const targetElement = target ?? window\n\n    if (event === 'keydown') {\n      targetElement.addEventListener('keydown', downHandler as EventListener)\n      targetElement.addEventListener('keyup', upHandler as EventListener)\n    } else {\n      targetElement.addEventListener('keyup', downHandler as EventListener)\n    }\n\n    return () => {\n      targetElement.removeEventListener('keydown', downHandler as EventListener)\n      targetElement.removeEventListener('keyup', upHandler as EventListener)\n    }\n  }, [target, event, downHandler, upHandler])\n\n  return keyPressed\n}\n\n/**\n * Hook that calls a callback when a specific key is pressed.\n *\n * @param targetKey - Key to detect\n * @param callback - Function to call when key is pressed\n * @param options - Configuration options\n *\n * @example\n * useKeyPressCallback('Escape', () => closeModal())\n * useKeyPressCallback('Enter', () => submitForm(), { preventDefault: true })\n */\nexport function useKeyPressCallback(\n  targetKey: string,\n  callback: (event: KeyboardEvent) => void,\n  options: UseKeyPressOptions = {}\n): void {\n  const { target, event = 'keydown', preventDefault = false } = options\n\n  useEffect(() => {\n    const targetElement = target ?? window\n\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === targetKey) {\n        if (preventDefault) e.preventDefault()\n        callback(e)\n      }\n    }\n\n    targetElement.addEventListener(event, handler as EventListener)\n    return () => targetElement.removeEventListener(event, handler as EventListener)\n  }, [target, targetKey, callback, event, preventDefault])\n}\n"],"names":["useKeyPress","targetKey","options","target","event","preventDefault","keyPressed","setKeyPressed","useState","downHandler","useCallback","upHandler","useEffect","targetElement","useKeyPressCallback","callback","handler","e"],"mappings":";AA8BO,SAASA,EACdC,GACAC,IAA8B,IACrB;AACT,QAAM,EAAE,QAAAC,GAAQ,OAAAC,IAAQ,WAAW,gBAAAC,IAAiB,OAAUH,GACxD,CAACI,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAE5CC,IAAcC;AAAA,IAClB,CAAC,MAAqB;AACpB,MAAI,EAAE,QAAQT,MACRI,OAAkB,eAAA,GACtBE,EAAc,EAAI;AAAA,IAEtB;AAAA,IACA,CAACN,GAAWI,CAAc;AAAA,EAAA,GAGtBM,IAAYD;AAAA,IAChB,CAAC,MAAqB;AACpB,MAAI,EAAE,QAAQT,KACZM,EAAc,EAAK;AAAA,IAEvB;AAAA,IACA,CAACN,CAAS;AAAA,EAAA;AAGZ,SAAAW,EAAU,MAAM;AACd,UAAMC,IAAgBV,KAAU;AAEhC,WAAIC,MAAU,aACZS,EAAc,iBAAiB,WAAWJ,CAA4B,GACtEI,EAAc,iBAAiB,SAASF,CAA0B,KAElEE,EAAc,iBAAiB,SAASJ,CAA4B,GAG/D,MAAM;AACX,MAAAI,EAAc,oBAAoB,WAAWJ,CAA4B,GACzEI,EAAc,oBAAoB,SAASF,CAA0B;AAAA,IACvE;AAAA,EACF,GAAG,CAACR,GAAQC,GAAOK,GAAaE,CAAS,CAAC,GAEnCL;AACT;AAaO,SAASQ,EACdb,GACAc,GACAb,IAA8B,CAAA,GACxB;AACN,QAAM,EAAE,QAAAC,GAAQ,OAAAC,IAAQ,WAAW,gBAAAC,IAAiB,OAAUH;AAE9D,EAAAU,EAAU,MAAM;AACd,UAAMC,IAAgBV,KAAU,QAE1Ba,IAAU,CAACC,MAAqB;AACpC,MAAIA,EAAE,QAAQhB,MACRI,OAAkB,eAAA,GACtBU,EAASE,CAAC;AAAA,IAEd;AAEA,WAAAJ,EAAc,iBAAiBT,GAAOY,CAAwB,GACvD,MAAMH,EAAc,oBAAoBT,GAAOY,CAAwB;AAAA,EAChF,GAAG,CAACb,GAAQF,GAAWc,GAAUX,GAAOC,CAAc,CAAC;AACzD;"}
+{"version":3,"file":"index101.js","sources":["../src/hooks/useHover.ts"],"sourcesContent":["import { useState, useRef, useEffect, type RefObject } from 'react'\n\nexport interface UseHoverReturn<T extends HTMLElement> {\n  ref: RefObject<T | null>\n  isHovered: boolean\n}\n\n/**\n * Hook that tracks hover state of an element.\n *\n * @returns Object with ref and isHovered state\n *\n * @example\n * const { ref, isHovered } = useHover<HTMLDivElement>()\n *\n * <div ref={ref} className={isHovered ? 'bg-blue-500' : 'bg-gray-500'}>\n *   Hover me!\n * </div>\n */\nexport function useHover<T extends HTMLElement = HTMLElement>(): UseHoverReturn<T> {\n  const [isHovered, setIsHovered] = useState(false)\n  const ref = useRef<T>(null)\n\n  useEffect(() => {\n    const node = ref.current\n    if (!node) return\n\n    const handleMouseEnter = () => setIsHovered(true)\n    const handleMouseLeave = () => setIsHovered(false)\n\n    node.addEventListener('mouseenter', handleMouseEnter)\n    node.addEventListener('mouseleave', handleMouseLeave)\n\n    return () => {\n      node.removeEventListener('mouseenter', handleMouseEnter)\n      node.removeEventListener('mouseleave', handleMouseLeave)\n    }\n  }, [])\n\n  return { ref, isHovered }\n}\n"],"names":["useHover","isHovered","setIsHovered","useState","ref","useRef","useEffect","node","handleMouseEnter","handleMouseLeave"],"mappings":";AAmBO,SAASA,IAAmE;AACjF,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAMC,EAAU,IAAI;AAE1B,SAAAC,EAAU,MAAM;AACd,UAAMC,IAAOH,EAAI;AACjB,QAAI,CAACG,EAAM;AAEX,UAAMC,IAAmB,MAAMN,EAAa,EAAI,GAC1CO,IAAmB,MAAMP,EAAa,EAAK;AAEjD,WAAAK,EAAK,iBAAiB,cAAcC,CAAgB,GACpDD,EAAK,iBAAiB,cAAcE,CAAgB,GAE7C,MAAM;AACX,MAAAF,EAAK,oBAAoB,cAAcC,CAAgB,GACvDD,EAAK,oBAAoB,cAAcE,CAAgB;AAAA,IACzD;AAAA,EACF,GAAG,CAAA,CAAE,GAEE,EAAE,KAAAL,GAAK,WAAAH,EAAA;AAChB;"}

package/dist/index102.js

@@ -1,21 +1,34 @@
-import { useState as t, useEffect as d } from "react";
-function r() {
-  const [i, n] = t(() => typeof window > "u" ? { width: 0, height: 0 } : {
-    width: window.innerWidth,
-    height: window.innerHeight
-  });
-  return d(() => {
-    if (typeof window > "u") return;
-    const e = () => {
-      n({
-        width: window.innerWidth,
-        height: window.innerHeight
-      });
+import { useState as v, useCallback as i, useEffect as l } from "react";
+function c(n, f = {}) {
+  const { target: u, event: o = "keydown", preventDefault: r = !1 } = f, [a, d] = v(!1), t = i(
+    (e) => {
+      e.key === n && (r && e.preventDefault(), d(!0));
+    },
+    [n, r]
+  ), s = i(
+    (e) => {
+      e.key === n && d(!1);
+    },
+    [n]
+  );
+  return l(() => {
+    const e = u ?? window;
+    return o === "keydown" ? (e.addEventListener("keydown", t), e.addEventListener("keyup", s)) : e.addEventListener("keyup", t), () => {
+      e.removeEventListener("keydown", t), e.removeEventListener("keyup", s);
     };
-    return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
-  }, []), i;
+  }, [u, o, t, s]), a;
+}
+function y(n, f, u = {}) {
+  const { target: o, event: r = "keydown", preventDefault: a = !1 } = u;
+  l(() => {
+    const d = o ?? window, t = (s) => {
+      s.key === n && (a && s.preventDefault(), f(s));
+    };
+    return d.addEventListener(r, t), () => d.removeEventListener(r, t);
+  }, [o, n, f, r, a]);
 }
 export {
-  r as useWindowSize
+  c as useKeyPress,
+  y as useKeyPressCallback
 };
 //# sourceMappingURL=index102.js.map

package/dist/index102.js.map

@@ -1 +1 @@
-{"version":3,"file":"index102.js","sources":["../src/hooks/useWindowSize.ts"],"sourcesContent":["import { useState, useEffect } from 'react'\n\nexport interface WindowSize {\n  width: number\n  height: number\n}\n\n/**\n * Hook that tracks window dimensions.\n * Updates on window resize.\n *\n * @returns Object with current width and height\n *\n * @example\n * const { width, height } = useWindowSize()\n *\n * return (\n *   <div>\n *     Window: {width} x {height}\n *     {width < 768 && <MobileNav />}\n *   </div>\n * )\n */\nexport function useWindowSize(): WindowSize {\n  const [windowSize, setWindowSize] = useState<WindowSize>(() => {\n    if (typeof window === 'undefined') {\n      return { width: 0, height: 0 }\n    }\n    return {\n      width: window.innerWidth,\n      height: window.innerHeight,\n    }\n  })\n\n  useEffect(() => {\n    if (typeof window === 'undefined') return\n\n    const handleResize = () => {\n      setWindowSize({\n        width: window.innerWidth,\n        height: window.innerHeight,\n      })\n    }\n\n    window.addEventListener('resize', handleResize)\n    return () => window.removeEventListener('resize', handleResize)\n  }, [])\n\n  return windowSize\n}\n"],"names":["useWindowSize","windowSize","setWindowSize","useState","useEffect","handleResize"],"mappings":";AAuBO,SAASA,IAA4B;AAC1C,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAqB,MACnD,OAAO,SAAW,MACb,EAAE,OAAO,GAAG,QAAQ,EAAA,IAEtB;AAAA,IACL,OAAO,OAAO;AAAA,IACd,QAAQ,OAAO;AAAA,EAAA,CAElB;AAED,SAAAC,EAAU,MAAM;AACd,QAAI,OAAO,SAAW,IAAa;AAEnC,UAAMC,IAAe,MAAM;AACzB,MAAAH,EAAc;AAAA,QACZ,OAAO,OAAO;AAAA,QACd,QAAQ,OAAO;AAAA,MAAA,CAChB;AAAA,IACH;AAEA,kBAAO,iBAAiB,UAAUG,CAAY,GACvC,MAAM,OAAO,oBAAoB,UAAUA,CAAY;AAAA,EAChE,GAAG,CAAA,CAAE,GAEEJ;AACT;"}
+{"version":3,"file":"index102.js","sources":["../src/hooks/useKeyPress.ts"],"sourcesContent":["import { useState, useEffect, useCallback } from 'react'\n\nexport interface UseKeyPressOptions {\n  /** Target element (default: window) */\n  target?: HTMLElement | Window | null\n  /** Event type: 'keydown' | 'keyup' (default: 'keydown') */\n  event?: 'keydown' | 'keyup'\n  /** Prevent default browser behavior */\n  preventDefault?: boolean\n}\n\n/**\n * Hook that detects when a specific key is pressed.\n *\n * @param targetKey - Key to detect (e.g., 'Enter', 'Escape', 'a')\n * @param options - Configuration options\n * @returns Whether the key is currently pressed\n *\n * @example\n * const enterPressed = useKeyPress('Enter')\n * const escapePressed = useKeyPress('Escape')\n *\n * useEffect(() => {\n *   if (escapePressed) closeModal()\n * }, [escapePressed])\n *\n * @example\n * // With callback for immediate action\n * useKeyPress('Escape', { preventDefault: true })\n */\nexport function useKeyPress(\n  targetKey: string,\n  options: UseKeyPressOptions = {}\n): boolean {\n  const { target, event = 'keydown', preventDefault = false } = options\n  const [keyPressed, setKeyPressed] = useState(false)\n\n  const downHandler = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === targetKey) {\n        if (preventDefault) e.preventDefault()\n        setKeyPressed(true)\n      }\n    },\n    [targetKey, preventDefault]\n  )\n\n  const upHandler = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === targetKey) {\n        setKeyPressed(false)\n      }\n    },\n    [targetKey]\n  )\n\n  useEffect(() => {\n    const targetElement = target ?? window\n\n    if (event === 'keydown') {\n      targetElement.addEventListener('keydown', downHandler as EventListener)\n      targetElement.addEventListener('keyup', upHandler as EventListener)\n    } else {\n      targetElement.addEventListener('keyup', downHandler as EventListener)\n    }\n\n    return () => {\n      targetElement.removeEventListener('keydown', downHandler as EventListener)\n      targetElement.removeEventListener('keyup', upHandler as EventListener)\n    }\n  }, [target, event, downHandler, upHandler])\n\n  return keyPressed\n}\n\n/**\n * Hook that calls a callback when a specific key is pressed.\n *\n * @param targetKey - Key to detect\n * @param callback - Function to call when key is pressed\n * @param options - Configuration options\n *\n * @example\n * useKeyPressCallback('Escape', () => closeModal())\n * useKeyPressCallback('Enter', () => submitForm(), { preventDefault: true })\n */\nexport function useKeyPressCallback(\n  targetKey: string,\n  callback: (event: KeyboardEvent) => void,\n  options: UseKeyPressOptions = {}\n): void {\n  const { target, event = 'keydown', preventDefault = false } = options\n\n  useEffect(() => {\n    const targetElement = target ?? window\n\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === targetKey) {\n        if (preventDefault) e.preventDefault()\n        callback(e)\n      }\n    }\n\n    targetElement.addEventListener(event, handler as EventListener)\n    return () => targetElement.removeEventListener(event, handler as EventListener)\n  }, [target, targetKey, callback, event, preventDefault])\n}\n"],"names":["useKeyPress","targetKey","options","target","event","preventDefault","keyPressed","setKeyPressed","useState","downHandler","useCallback","upHandler","useEffect","targetElement","useKeyPressCallback","callback","handler","e"],"mappings":";AA8BO,SAASA,EACdC,GACAC,IAA8B,IACrB;AACT,QAAM,EAAE,QAAAC,GAAQ,OAAAC,IAAQ,WAAW,gBAAAC,IAAiB,OAAUH,GACxD,CAACI,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAE5CC,IAAcC;AAAA,IAClB,CAAC,MAAqB;AACpB,MAAI,EAAE,QAAQT,MACRI,OAAkB,eAAA,GACtBE,EAAc,EAAI;AAAA,IAEtB;AAAA,IACA,CAACN,GAAWI,CAAc;AAAA,EAAA,GAGtBM,IAAYD;AAAA,IAChB,CAAC,MAAqB;AACpB,MAAI,EAAE,QAAQT,KACZM,EAAc,EAAK;AAAA,IAEvB;AAAA,IACA,CAACN,CAAS;AAAA,EAAA;AAGZ,SAAAW,EAAU,MAAM;AACd,UAAMC,IAAgBV,KAAU;AAEhC,WAAIC,MAAU,aACZS,EAAc,iBAAiB,WAAWJ,CAA4B,GACtEI,EAAc,iBAAiB,SAASF,CAA0B,KAElEE,EAAc,iBAAiB,SAASJ,CAA4B,GAG/D,MAAM;AACX,MAAAI,EAAc,oBAAoB,WAAWJ,CAA4B,GACzEI,EAAc,oBAAoB,SAASF,CAA0B;AAAA,IACvE;AAAA,EACF,GAAG,CAACR,GAAQC,GAAOK,GAAaE,CAAS,CAAC,GAEnCL;AACT;AAaO,SAASQ,EACdb,GACAc,GACAb,IAA8B,CAAA,GACxB;AACN,QAAM,EAAE,QAAAC,GAAQ,OAAAC,IAAQ,WAAW,gBAAAC,IAAiB,OAAUH;AAE9D,EAAAU,EAAU,MAAM;AACd,UAAMC,IAAgBV,KAAU,QAE1Ba,IAAU,CAACC,MAAqB;AACpC,MAAIA,EAAE,QAAQhB,MACRI,OAAkB,eAAA,GACtBU,EAASE,CAAC;AAAA,IAEd;AAEA,WAAAJ,EAAc,iBAAiBT,GAAOY,CAAwB,GACvD,MAAMH,EAAc,oBAAoBT,GAAOY,CAAwB;AAAA,EAChF,GAAG,CAACb,GAAQF,GAAWc,GAAUX,GAAOC,CAAc,CAAC;AACzD;"}