@brycks/core-front 0.3.1 → 0.3.2

package/dist/form.d.ts

@@ -31,6 +31,64 @@ export declare interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInpu
 
 export declare type CheckboxSize = 'sm' | 'md' | 'lg';
 
+export declare const Combobox: ForwardRefExoticComponent<ComboboxProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface ComboboxOption {
+    /** Unique identifier for the option */
+    value: string;
+    /** Display label */
+    label: string;
+    /** Optional description */
+    description?: string;
+    /** Optional icon */
+    icon?: ReactNode;
+    /** Whether the option is disabled */
+    disabled?: boolean;
+}
+
+export declare interface ComboboxProps {
+    /** Available options */
+    options: ComboboxOption[];
+    /** Currently selected value (controlled) */
+    value?: string | null;
+    /** Default selected value (uncontrolled) */
+    defaultValue?: string | null;
+    /** Callback when selection changes */
+    onChange?: (value: string | null) => void;
+    /** Callback when input value changes */
+    onInputChange?: (value: string) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Component size */
+    size?: ComboboxSize;
+    /** Whether the combobox is disabled */
+    disabled?: boolean;
+    /** Whether the combobox is invalid */
+    isInvalid?: boolean;
+    /** Whether the combobox is required */
+    required?: boolean;
+    /** Whether to allow clearing the selection */
+    clearable?: boolean;
+    /** Label for accessibility */
+    'aria-label'?: string;
+    /** ID of element that labels this combobox */
+    'aria-labelledby'?: string;
+    /** Custom filter function */
+    filterFn?: (option: ComboboxOption, inputValue: string) => boolean;
+    /** Text to show when no options match */
+    emptyText?: string;
+    /** Whether to allow creating new options */
+    creatable?: boolean;
+    /** Callback when creating new option */
+    onCreate?: (inputValue: string) => void;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type ComboboxSize = 'sm' | 'md' | 'lg';
+
 export declare const DateInput: ForwardRefExoticComponent<DateInputProps & RefAttributes<HTMLInputElement>>;
 
 export declare interface DateInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
@@ -62,6 +120,61 @@ export declare type DateInputType = 'date' | 'datetime-local' | 'time' | 'month'
 
 export declare type DateInputVariant = 'outline' | 'filled' | 'flushed';
 
+export declare interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+
+export declare const DateRangePicker: ForwardRefExoticComponent<DateRangePickerProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface DateRangePickerProps {
+    /** Current date range value */
+    value?: DateRange;
+    /** Default date range value (uncontrolled) */
+    defaultValue?: DateRange;
+    /** Callback when date range changes */
+    onChange?: (value: DateRange) => void;
+    /** Component size */
+    size?: DateRangePickerSize;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Whether the input is invalid */
+    isInvalid?: boolean;
+    /** Whether to allow clearing */
+    clearable?: boolean;
+    /** Preset date ranges */
+    presets?: DateRangePreset[];
+    /** Date format display */
+    dateFormat?: (date: Date) => string;
+    /** Label for accessibility */
+    'aria-label'?: string;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+/**
+ * DateRangePicker Component
+ *
+ * A date range selection component with calendar UI.
+ * Supports preset ranges and custom date selection.
+ *
+ * @module components/form/DateRangePicker
+ */
+export declare type DateRangePickerSize = 'sm' | 'md' | 'lg';
+
+export declare interface DateRangePreset {
+    label: string;
+    getValue: () => DateRange;
+}
+
 export declare const FieldError: ForwardRefExoticComponent<FieldErrorProps & RefAttributes<HTMLSpanElement>>;
 
 export declare interface FieldErrorProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
@@ -245,6 +358,62 @@ export declare type InputSize = 'sm' | 'md' | 'lg';
 
 export declare type InputVariant = 'outline' | 'filled' | 'flushed';
 
+export declare const MultiSelect: ForwardRefExoticComponent<MultiSelectProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface MultiSelectOption {
+    /** Unique identifier */
+    value: string;
+    /** Display label */
+    label: string;
+    /** Optional description */
+    description?: string;
+    /** Optional icon */
+    icon?: ReactNode;
+    /** Whether the option is disabled */
+    disabled?: boolean;
+    /** Optional group */
+    group?: string;
+}
+
+export declare interface MultiSelectProps {
+    /** Available options */
+    options: MultiSelectOption[];
+    /** Selected values (controlled) */
+    value?: string[];
+    /** Default selected values (uncontrolled) */
+    defaultValue?: string[];
+    /** Callback when selection changes */
+    onChange?: (values: string[]) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Component size */
+    size?: MultiSelectSize;
+    /** Maximum selections allowed */
+    maxSelections?: number;
+    /** Whether the select is searchable */
+    searchable?: boolean;
+    /** Whether the select is disabled */
+    disabled?: boolean;
+    /** Whether the select is invalid */
+    isInvalid?: boolean;
+    /** Whether to allow clearing all */
+    clearable?: boolean;
+    /** Text when no options match search */
+    emptyText?: string;
+    /** Whether to close on select */
+    closeOnSelect?: boolean;
+    /** Label for accessibility */
+    'aria-label'?: string;
+    /** ID of element that labels this select */
+    'aria-labelledby'?: string;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type MultiSelectSize = 'sm' | 'md' | 'lg';
+
 export declare const Radio: ForwardRefExoticComponent<RadioProps & RefAttributes<HTMLInputElement>>;
 
 export declare function RadioGroup({ name, value: controlledValue, defaultValue, onChange, disabled, size, orientation, gap, children, className, style, }: RadioGroupProps): JSX.Element;
@@ -295,6 +464,45 @@ export declare interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputEl
 
 export declare type RadioSize = 'sm' | 'md' | 'lg';
 
+export declare const Rating: ForwardRefExoticComponent<RatingProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface RatingProps {
+    /** Current rating value */
+    value?: number;
+    /** Default rating value (uncontrolled) */
+    defaultValue?: number;
+    /** Callback when rating changes */
+    onChange?: (value: number) => void;
+    /** Maximum rating (number of stars) */
+    max?: number;
+    /** Component size */
+    size?: RatingSize;
+    /** Whether to allow half stars */
+    allowHalf?: boolean;
+    /** Whether the rating is read-only */
+    readOnly?: boolean;
+    /** Whether the rating is disabled */
+    disabled?: boolean;
+    /** Whether to allow clearing (clicking same value again) */
+    allowClear?: boolean;
+    /** Custom filled icon */
+    filledIcon?: ReactNode;
+    /** Custom empty icon */
+    emptyIcon?: ReactNode;
+    /** Custom half-filled icon */
+    halfIcon?: ReactNode;
+    /** Color for filled stars */
+    color?: string;
+    /** Label for accessibility */
+    'aria-label'?: string;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type RatingSize = 'sm' | 'md' | 'lg' | 'xl';
+
 export declare const Select: ForwardRefExoticComponent<SelectProps & RefAttributes<HTMLSelectElement>>;
 
 export declare interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
@@ -368,6 +576,58 @@ export declare interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputE
 
 export declare type SwitchSize = 'sm' | 'md' | 'lg';
 
+export declare const TagInput: ForwardRefExoticComponent<TagInputProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface TagInputProps {
+    /** Current tags */
+    value?: TagItem[];
+    /** Default tags (uncontrolled) */
+    defaultValue?: TagItem[];
+    /** Callback when tags change */
+    onChange?: (tags: TagItem[]) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Component size */
+    size?: TagInputSize;
+    /** Maximum number of tags */
+    maxTags?: number;
+    /** Whether to allow duplicates */
+    allowDuplicates?: boolean;
+    /** Delimiter keys to create tag (default: Enter, comma) */
+    delimiters?: string[];
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Whether the input is invalid */
+    isInvalid?: boolean;
+    /** Whether the input is read-only */
+    readOnly?: boolean;
+    /** Validation function for new tags */
+    validateTag?: (value: string) => boolean | string;
+    /** Transform function for new tag value */
+    transformTag?: (value: string) => string;
+    /** Suggested tags for autocomplete */
+    suggestions?: TagItem[];
+    /** Custom tag renderer */
+    renderTag?: (tag: TagItem, onRemove: () => void) => ReactNode;
+    /** Label for accessibility */
+    'aria-label'?: string;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type TagInputSize = 'sm' | 'md' | 'lg';
+
+export declare interface TagItem {
+    /** Unique identifier */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Optional color */
+    color?: string;
+}
+
 export declare const Textarea: ForwardRefExoticComponent<TextareaProps & RefAttributes<HTMLTextAreaElement>>;
 
 export declare interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
@@ -412,4 +672,60 @@ export declare interface TextFieldProps extends InputProps {
     hideLabel?: boolean;
 }
 
+export declare type TimeFormat = '12h' | '24h';
+
+export declare const TimePicker: ForwardRefExoticComponent<TimePickerProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface TimePickerProps {
+    /** Current time value */
+    value?: TimeValue | null;
+    /** Default time value (uncontrolled) */
+    defaultValue?: TimeValue | null;
+    /** Callback when time changes */
+    onChange?: (value: TimeValue | null) => void;
+    /** Time format */
+    format?: TimeFormat;
+    /** Component size */
+    size?: TimePickerSize;
+    /** Minute step interval */
+    minuteStep?: number;
+    /** Minimum selectable time */
+    minTime?: TimeValue;
+    /** Maximum selectable time */
+    maxTime?: TimeValue;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Whether the input is invalid */
+    isInvalid?: boolean;
+    /** Whether to allow clearing */
+    clearable?: boolean;
+    /** Label for accessibility */
+    'aria-label'?: string;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+/**
+ * TimePicker Component
+ *
+ * A time selection component with hour, minute, and optional period (AM/PM).
+ * Supports keyboard navigation and manual input.
+ *
+ * @module components/form/TimePicker
+ */
+export declare type TimePickerSize = 'sm' | 'md' | 'lg';
+
+export declare interface TimeValue {
+    /** Hours (0-23 for 24h, 1-12 for 12h) */
+    hours: number;
+    /** Minutes (0-59) */
+    minutes: number;
+    /** Period for 12h format */
+    period?: 'AM' | 'PM';
+}
+
 export { }

package/dist/hooks/useInteractionState.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react");function I(b={}){const{onFocusChange:t,onHoverChange:a,onPressedChange:u,onFocus:c,onBlur:d,onMouseEnter:f,onMouseLeave:M,onMouseDown:i,onMouseUp:h,disabled:n=!1}=b,[C,l]=s.useState(!1),[v,r]=s.useState(!1),[F,o]=s.useState(!1),O=s.useCallback(e=>{n||(l(!0),t?.(!0),c?.(e))},[n,t,c]),S=s.useCallback(e=>{l(!1),o(!1),t?.(!1),d?.(e)},[t,d]),k=s.useCallback(e=>{n||(r(!0),a?.(!0),f?.(e))},[n,a,f]),x=s.useCallback(e=>{r(!1),o(!1),a?.(!1),M?.(e)},[a,M]),g=s.useCallback(e=>{n||(o(!0),u?.(!0),i?.(e))},[n,u,i]),p=s.useCallback(e=>{o(!1),u?.(!1),h?.(e)},[u,h]);return{state:{isFocused:C,isHovered:v,isPressed:F},handlers:{onFocus:O,onBlur:S,onMouseEnter:k,onMouseLeave:x,onMouseDown:g,onMouseUp:p},setIsFocused:l,setIsHovered:r,setIsPressed:o}}exports.useInteractionState=I;
+//# sourceMappingURL=useInteractionState.cjs.map

package/dist/hooks/useInteractionState.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInteractionState.cjs","sources":["../../src/hooks/useInteractionState.ts"],"sourcesContent":["/**\n * useInteractionState Hook\n *\n * Manages common interaction states (focus, hover, pressed) for interactive components.\n * Eliminates duplicate state management across form components.\n */\n\nimport { useState, useCallback, type FocusEvent, type MouseEvent } from 'react'\n\nexport interface InteractionState {\n  /** Whether the element is currently focused */\n  isFocused: boolean\n  /** Whether the element is currently hovered */\n  isHovered: boolean\n  /** Whether the element is currently pressed */\n  isPressed: boolean\n}\n\nexport interface InteractionHandlers<T extends HTMLElement = HTMLElement> {\n  /** Handler for focus events */\n  onFocus: (event: FocusEvent<T>) => void\n  /** Handler for blur events */\n  onBlur: (event: FocusEvent<T>) => void\n  /** Handler for mouse enter events */\n  onMouseEnter: (event: MouseEvent<T>) => void\n  /** Handler for mouse leave events */\n  onMouseLeave: (event: MouseEvent<T>) => void\n  /** Handler for mouse down events */\n  onMouseDown: (event: MouseEvent<T>) => void\n  /** Handler for mouse up events */\n  onMouseUp: (event: MouseEvent<T>) => void\n}\n\nexport interface UseInteractionStateOptions<T extends HTMLElement = HTMLElement> {\n  /** Callback when focus state changes */\n  onFocusChange?: (isFocused: boolean) => void\n  /** Callback when hover state changes */\n  onHoverChange?: (isHovered: boolean) => void\n  /** Callback when pressed state changes */\n  onPressedChange?: (isPressed: boolean) => void\n  /** External focus handler to merge */\n  onFocus?: (event: FocusEvent<T>) => void\n  /** External blur handler to merge */\n  onBlur?: (event: FocusEvent<T>) => void\n  /** External mouse enter handler to merge */\n  onMouseEnter?: (event: MouseEvent<T>) => void\n  /** External mouse leave handler to merge */\n  onMouseLeave?: (event: MouseEvent<T>) => void\n  /** External mouse down handler to merge */\n  onMouseDown?: (event: MouseEvent<T>) => void\n  /** External mouse up handler to merge */\n  onMouseUp?: (event: MouseEvent<T>) => void\n  /** Whether the element is disabled (disables all interactions) */\n  disabled?: boolean\n}\n\nexport interface UseInteractionStateReturn<T extends HTMLElement = HTMLElement> {\n  /** Current interaction state */\n  state: InteractionState\n  /** Event handlers to spread onto the element */\n  handlers: InteractionHandlers<T>\n  /** Manually set focus state */\n  setIsFocused: (value: boolean) => void\n  /** Manually set hover state */\n  setIsHovered: (value: boolean) => void\n  /** Manually set pressed state */\n  setIsPressed: (value: boolean) => void\n}\n\n/**\n * Hook for managing interactive states in form components.\n *\n * @example\n * ```tsx\n * function MyInput(props) {\n *   const { state, handlers } = useInteractionState({\n *     disabled: props.disabled,\n *     onFocus: props.onFocus,\n *     onBlur: props.onBlur,\n *   })\n *\n *   return (\n *     <input\n *       {...handlers}\n *       style={{\n *         borderColor: state.isFocused ? 'blue' : 'gray',\n *       }}\n *     />\n *   )\n * }\n * ```\n */\nexport function useInteractionState<T extends HTMLElement = HTMLElement>(\n  options: UseInteractionStateOptions<T> = {}\n): UseInteractionStateReturn<T> {\n  const {\n    onFocusChange,\n    onHoverChange,\n    onPressedChange,\n    onFocus: externalOnFocus,\n    onBlur: externalOnBlur,\n    onMouseEnter: externalOnMouseEnter,\n    onMouseLeave: externalOnMouseLeave,\n    onMouseDown: externalOnMouseDown,\n    onMouseUp: externalOnMouseUp,\n    disabled = false,\n  } = options\n\n  const [isFocused, setIsFocused] = useState(false)\n  const [isHovered, setIsHovered] = useState(false)\n  const [isPressed, setIsPressed] = useState(false)\n\n  const handleFocus = useCallback(\n    (event: FocusEvent<T>) => {\n      if (disabled) return\n      setIsFocused(true)\n      onFocusChange?.(true)\n      externalOnFocus?.(event)\n    },\n    [disabled, onFocusChange, externalOnFocus]\n  )\n\n  const handleBlur = useCallback(\n    (event: FocusEvent<T>) => {\n      setIsFocused(false)\n      setIsPressed(false)\n      onFocusChange?.(false)\n      externalOnBlur?.(event)\n    },\n    [onFocusChange, externalOnBlur]\n  )\n\n  const handleMouseEnter = useCallback(\n    (event: MouseEvent<T>) => {\n      if (disabled) return\n      setIsHovered(true)\n      onHoverChange?.(true)\n      externalOnMouseEnter?.(event)\n    },\n    [disabled, onHoverChange, externalOnMouseEnter]\n  )\n\n  const handleMouseLeave = useCallback(\n    (event: MouseEvent<T>) => {\n      setIsHovered(false)\n      setIsPressed(false)\n      onHoverChange?.(false)\n      externalOnMouseLeave?.(event)\n    },\n    [onHoverChange, externalOnMouseLeave]\n  )\n\n  const handleMouseDown = useCallback(\n    (event: MouseEvent<T>) => {\n      if (disabled) return\n      setIsPressed(true)\n      onPressedChange?.(true)\n      externalOnMouseDown?.(event)\n    },\n    [disabled, onPressedChange, externalOnMouseDown]\n  )\n\n  const handleMouseUp = useCallback(\n    (event: MouseEvent<T>) => {\n      setIsPressed(false)\n      onPressedChange?.(false)\n      externalOnMouseUp?.(event)\n    },\n    [onPressedChange, externalOnMouseUp]\n  )\n\n  return {\n    state: {\n      isFocused,\n      isHovered,\n      isPressed,\n    },\n    handlers: {\n      onFocus: handleFocus,\n      onBlur: handleBlur,\n      onMouseEnter: handleMouseEnter,\n      onMouseLeave: handleMouseLeave,\n      onMouseDown: handleMouseDown,\n      onMouseUp: handleMouseUp,\n    },\n    setIsFocused,\n    setIsHovered,\n    setIsPressed,\n  }\n}\n"],"names":["useInteractionState","options","onFocusChange","onHoverChange","onPressedChange","externalOnFocus","externalOnBlur","externalOnMouseEnter","externalOnMouseLeave","externalOnMouseDown","externalOnMouseUp","disabled","isFocused","setIsFocused","useState","isHovered","setIsHovered","isPressed","setIsPressed","handleFocus","useCallback","event","handleBlur","handleMouseEnter","handleMouseLeave","handleMouseDown","handleMouseUp"],"mappings":"yGA4FO,SAASA,EACdC,EAAyC,GACX,CAC9B,KAAM,CACJ,cAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,QAASC,EACT,OAAQC,EACR,aAAcC,EACd,aAAcC,EACd,YAAaC,EACb,UAAWC,EACX,SAAAC,EAAW,EAAA,EACTV,EAEE,CAACW,EAAWC,CAAY,EAAIC,EAAAA,SAAS,EAAK,EAC1C,CAACC,EAAWC,CAAY,EAAIF,EAAAA,SAAS,EAAK,EAC1C,CAACG,EAAWC,CAAY,EAAIJ,EAAAA,SAAS,EAAK,EAE1CK,EAAcC,EAAAA,YACjBC,GAAyB,CACpBV,IACJE,EAAa,EAAI,EACjBX,IAAgB,EAAI,EACpBG,IAAkBgB,CAAK,EACzB,EACA,CAACV,EAAUT,EAAeG,CAAe,CAAA,EAGrCiB,EAAaF,EAAAA,YAChBC,GAAyB,CACxBR,EAAa,EAAK,EAClBK,EAAa,EAAK,EAClBhB,IAAgB,EAAK,EACrBI,IAAiBe,CAAK,CACxB,EACA,CAACnB,EAAeI,CAAc,CAAA,EAG1BiB,EAAmBH,EAAAA,YACtBC,GAAyB,CACpBV,IACJK,EAAa,EAAI,EACjBb,IAAgB,EAAI,EACpBI,IAAuBc,CAAK,EAC9B,EACA,CAACV,EAAUR,EAAeI,CAAoB,CAAA,EAG1CiB,EAAmBJ,EAAAA,YACtBC,GAAyB,CACxBL,EAAa,EAAK,EAClBE,EAAa,EAAK,EAClBf,IAAgB,EAAK,EACrBK,IAAuBa,CAAK,CAC9B,EACA,CAAClB,EAAeK,CAAoB,CAAA,EAGhCiB,EAAkBL,EAAAA,YACrBC,GAAyB,CACpBV,IACJO,EAAa,EAAI,EACjBd,IAAkB,EAAI,EACtBK,IAAsBY,CAAK,EAC7B,EACA,CAACV,EAAUP,EAAiBK,CAAmB,CAAA,EAG3CiB,EAAgBN,EAAAA,YACnBC,GAAyB,CACxBH,EAAa,EAAK,EAClBd,IAAkB,EAAK,EACvBM,IAAoBW,CAAK,CAC3B,EACA,CAACjB,EAAiBM,CAAiB,CAAA,EAGrC,MAAO,CACL,MAAO,CACL,UAAAE,EACA,UAAAG,EACA,UAAAE,CAAA,EAEF,SAAU,CACR,QAASE,EACT,OAAQG,EACR,aAAcC,EACd,aAAcC,EACd,YAAaC,EACb,UAAWC,CAAA,EAEb,aAAAb,EACA,aAAAG,EACA,aAAAE,CAAA,CAEJ"}

package/dist/hooks/useInteractionState.js

@@ -0,0 +1,67 @@
+import { useState as c, useCallback as n } from "react";
+function U(x = {}) {
+  const {
+    onFocusChange: t,
+    onHoverChange: u,
+    onPressedChange: a,
+    onFocus: f,
+    onBlur: d,
+    onMouseEnter: M,
+    onMouseLeave: h,
+    onMouseDown: i,
+    onMouseUp: v,
+    disabled: s = !1
+  } = x, [F, r] = c(!1), [p, l] = c(!1), [O, o] = c(!1), w = n(
+    (e) => {
+      s || (r(!0), t?.(!0), f?.(e));
+    },
+    [s, t, f]
+  ), B = n(
+    (e) => {
+      r(!1), o(!1), t?.(!1), d?.(e);
+    },
+    [t, d]
+  ), C = n(
+    (e) => {
+      s || (l(!0), u?.(!0), M?.(e));
+    },
+    [s, u, M]
+  ), D = n(
+    (e) => {
+      l(!1), o(!1), u?.(!1), h?.(e);
+    },
+    [u, h]
+  ), E = n(
+    (e) => {
+      s || (o(!0), a?.(!0), i?.(e));
+    },
+    [s, a, i]
+  ), I = n(
+    (e) => {
+      o(!1), a?.(!1), v?.(e);
+    },
+    [a, v]
+  );
+  return {
+    state: {
+      isFocused: F,
+      isHovered: p,
+      isPressed: O
+    },
+    handlers: {
+      onFocus: w,
+      onBlur: B,
+      onMouseEnter: C,
+      onMouseLeave: D,
+      onMouseDown: E,
+      onMouseUp: I
+    },
+    setIsFocused: r,
+    setIsHovered: l,
+    setIsPressed: o
+  };
+}
+export {
+  U as useInteractionState
+};
+//# sourceMappingURL=useInteractionState.js.map

package/dist/hooks/useInteractionState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInteractionState.js","sources":["../../src/hooks/useInteractionState.ts"],"sourcesContent":["/**\n * useInteractionState Hook\n *\n * Manages common interaction states (focus, hover, pressed) for interactive components.\n * Eliminates duplicate state management across form components.\n */\n\nimport { useState, useCallback, type FocusEvent, type MouseEvent } from 'react'\n\nexport interface InteractionState {\n  /** Whether the element is currently focused */\n  isFocused: boolean\n  /** Whether the element is currently hovered */\n  isHovered: boolean\n  /** Whether the element is currently pressed */\n  isPressed: boolean\n}\n\nexport interface InteractionHandlers<T extends HTMLElement = HTMLElement> {\n  /** Handler for focus events */\n  onFocus: (event: FocusEvent<T>) => void\n  /** Handler for blur events */\n  onBlur: (event: FocusEvent<T>) => void\n  /** Handler for mouse enter events */\n  onMouseEnter: (event: MouseEvent<T>) => void\n  /** Handler for mouse leave events */\n  onMouseLeave: (event: MouseEvent<T>) => void\n  /** Handler for mouse down events */\n  onMouseDown: (event: MouseEvent<T>) => void\n  /** Handler for mouse up events */\n  onMouseUp: (event: MouseEvent<T>) => void\n}\n\nexport interface UseInteractionStateOptions<T extends HTMLElement = HTMLElement> {\n  /** Callback when focus state changes */\n  onFocusChange?: (isFocused: boolean) => void\n  /** Callback when hover state changes */\n  onHoverChange?: (isHovered: boolean) => void\n  /** Callback when pressed state changes */\n  onPressedChange?: (isPressed: boolean) => void\n  /** External focus handler to merge */\n  onFocus?: (event: FocusEvent<T>) => void\n  /** External blur handler to merge */\n  onBlur?: (event: FocusEvent<T>) => void\n  /** External mouse enter handler to merge */\n  onMouseEnter?: (event: MouseEvent<T>) => void\n  /** External mouse leave handler to merge */\n  onMouseLeave?: (event: MouseEvent<T>) => void\n  /** External mouse down handler to merge */\n  onMouseDown?: (event: MouseEvent<T>) => void\n  /** External mouse up handler to merge */\n  onMouseUp?: (event: MouseEvent<T>) => void\n  /** Whether the element is disabled (disables all interactions) */\n  disabled?: boolean\n}\n\nexport interface UseInteractionStateReturn<T extends HTMLElement = HTMLElement> {\n  /** Current interaction state */\n  state: InteractionState\n  /** Event handlers to spread onto the element */\n  handlers: InteractionHandlers<T>\n  /** Manually set focus state */\n  setIsFocused: (value: boolean) => void\n  /** Manually set hover state */\n  setIsHovered: (value: boolean) => void\n  /** Manually set pressed state */\n  setIsPressed: (value: boolean) => void\n}\n\n/**\n * Hook for managing interactive states in form components.\n *\n * @example\n * ```tsx\n * function MyInput(props) {\n *   const { state, handlers } = useInteractionState({\n *     disabled: props.disabled,\n *     onFocus: props.onFocus,\n *     onBlur: props.onBlur,\n *   })\n *\n *   return (\n *     <input\n *       {...handlers}\n *       style={{\n *         borderColor: state.isFocused ? 'blue' : 'gray',\n *       }}\n *     />\n *   )\n * }\n * ```\n */\nexport function useInteractionState<T extends HTMLElement = HTMLElement>(\n  options: UseInteractionStateOptions<T> = {}\n): UseInteractionStateReturn<T> {\n  const {\n    onFocusChange,\n    onHoverChange,\n    onPressedChange,\n    onFocus: externalOnFocus,\n    onBlur: externalOnBlur,\n    onMouseEnter: externalOnMouseEnter,\n    onMouseLeave: externalOnMouseLeave,\n    onMouseDown: externalOnMouseDown,\n    onMouseUp: externalOnMouseUp,\n    disabled = false,\n  } = options\n\n  const [isFocused, setIsFocused] = useState(false)\n  const [isHovered, setIsHovered] = useState(false)\n  const [isPressed, setIsPressed] = useState(false)\n\n  const handleFocus = useCallback(\n    (event: FocusEvent<T>) => {\n      if (disabled) return\n      setIsFocused(true)\n      onFocusChange?.(true)\n      externalOnFocus?.(event)\n    },\n    [disabled, onFocusChange, externalOnFocus]\n  )\n\n  const handleBlur = useCallback(\n    (event: FocusEvent<T>) => {\n      setIsFocused(false)\n      setIsPressed(false)\n      onFocusChange?.(false)\n      externalOnBlur?.(event)\n    },\n    [onFocusChange, externalOnBlur]\n  )\n\n  const handleMouseEnter = useCallback(\n    (event: MouseEvent<T>) => {\n      if (disabled) return\n      setIsHovered(true)\n      onHoverChange?.(true)\n      externalOnMouseEnter?.(event)\n    },\n    [disabled, onHoverChange, externalOnMouseEnter]\n  )\n\n  const handleMouseLeave = useCallback(\n    (event: MouseEvent<T>) => {\n      setIsHovered(false)\n      setIsPressed(false)\n      onHoverChange?.(false)\n      externalOnMouseLeave?.(event)\n    },\n    [onHoverChange, externalOnMouseLeave]\n  )\n\n  const handleMouseDown = useCallback(\n    (event: MouseEvent<T>) => {\n      if (disabled) return\n      setIsPressed(true)\n      onPressedChange?.(true)\n      externalOnMouseDown?.(event)\n    },\n    [disabled, onPressedChange, externalOnMouseDown]\n  )\n\n  const handleMouseUp = useCallback(\n    (event: MouseEvent<T>) => {\n      setIsPressed(false)\n      onPressedChange?.(false)\n      externalOnMouseUp?.(event)\n    },\n    [onPressedChange, externalOnMouseUp]\n  )\n\n  return {\n    state: {\n      isFocused,\n      isHovered,\n      isPressed,\n    },\n    handlers: {\n      onFocus: handleFocus,\n      onBlur: handleBlur,\n      onMouseEnter: handleMouseEnter,\n      onMouseLeave: handleMouseLeave,\n      onMouseDown: handleMouseDown,\n      onMouseUp: handleMouseUp,\n    },\n    setIsFocused,\n    setIsHovered,\n    setIsPressed,\n  }\n}\n"],"names":["useInteractionState","options","onFocusChange","onHoverChange","onPressedChange","externalOnFocus","externalOnBlur","externalOnMouseEnter","externalOnMouseLeave","externalOnMouseDown","externalOnMouseUp","disabled","isFocused","setIsFocused","useState","isHovered","setIsHovered","isPressed","setIsPressed","handleFocus","useCallback","event","handleBlur","handleMouseEnter","handleMouseLeave","handleMouseDown","handleMouseUp"],"mappings":";AA4FO,SAASA,EACdC,IAAyC,IACX;AAC9B,QAAM;AAAA,IACJ,eAAAC;AAAA,IACA,eAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,SAASC;AAAA,IACT,QAAQC;AAAA,IACR,cAAcC;AAAA,IACd,cAAcC;AAAA,IACd,aAAaC;AAAA,IACb,WAAWC;AAAA,IACX,UAAAC,IAAW;AAAA,EAAA,IACTV,GAEE,CAACW,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1C,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK,GAC1C,CAACG,GAAWC,CAAY,IAAIJ,EAAS,EAAK,GAE1CK,IAAcC;AAAA,IAClB,CAACC,MAAyB;AACxB,MAAIV,MACJE,EAAa,EAAI,GACjBX,IAAgB,EAAI,GACpBG,IAAkBgB,CAAK;AAAA,IACzB;AAAA,IACA,CAACV,GAAUT,GAAeG,CAAe;AAAA,EAAA,GAGrCiB,IAAaF;AAAA,IACjB,CAACC,MAAyB;AACxB,MAAAR,EAAa,EAAK,GAClBK,EAAa,EAAK,GAClBhB,IAAgB,EAAK,GACrBI,IAAiBe,CAAK;AAAA,IACxB;AAAA,IACA,CAACnB,GAAeI,CAAc;AAAA,EAAA,GAG1BiB,IAAmBH;AAAA,IACvB,CAACC,MAAyB;AACxB,MAAIV,MACJK,EAAa,EAAI,GACjBb,IAAgB,EAAI,GACpBI,IAAuBc,CAAK;AAAA,IAC9B;AAAA,IACA,CAACV,GAAUR,GAAeI,CAAoB;AAAA,EAAA,GAG1CiB,IAAmBJ;AAAA,IACvB,CAACC,MAAyB;AACxB,MAAAL,EAAa,EAAK,GAClBE,EAAa,EAAK,GAClBf,IAAgB,EAAK,GACrBK,IAAuBa,CAAK;AAAA,IAC9B;AAAA,IACA,CAAClB,GAAeK,CAAoB;AAAA,EAAA,GAGhCiB,IAAkBL;AAAA,IACtB,CAACC,MAAyB;AACxB,MAAIV,MACJO,EAAa,EAAI,GACjBd,IAAkB,EAAI,GACtBK,IAAsBY,CAAK;AAAA,IAC7B;AAAA,IACA,CAACV,GAAUP,GAAiBK,CAAmB;AAAA,EAAA,GAG3CiB,IAAgBN;AAAA,IACpB,CAACC,MAAyB;AACxB,MAAAH,EAAa,EAAK,GAClBd,IAAkB,EAAK,GACvBM,IAAoBW,CAAK;AAAA,IAC3B;AAAA,IACA,CAACjB,GAAiBM,CAAiB;AAAA,EAAA;AAGrC,SAAO;AAAA,IACL,OAAO;AAAA,MACL,WAAAE;AAAA,MACA,WAAAG;AAAA,MACA,WAAAE;AAAA,IAAA;AAAA,IAEF,UAAU;AAAA,MACR,SAASE;AAAA,MACT,QAAQG;AAAA,MACR,cAAcC;AAAA,MACd,cAAcC;AAAA,MACd,aAAaC;AAAA,MACb,WAAWC;AAAA,IAAA;AAAA,IAEb,cAAAb;AAAA,IACA,cAAAG;AAAA,IACA,cAAAE;AAAA,EAAA;AAEJ;"}

package/dist/hooks.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./hooks/useMediaQuery.cjs"),u=require("./hooks/useDisclosure.cjs"),r=require("./hooks/useClickOutside.cjs"),o=require("./hooks/useKeyboardNavigation.cjs"),i=require("./hooks/useFocusTrap.cjs"),s=require("./hooks/useId.cjs"),t=require("./hooks/useControllable.cjs");exports.useIsDesktop=e.useIsDesktop;exports.useIsMobile=e.useIsMobile;exports.useIsTablet=e.useIsTablet;exports.useMediaQuery=e.useMediaQuery;exports.usePrefersDarkMode=e.usePrefersDarkMode;exports.usePrefersReducedMotion=e.usePrefersReducedMotion;exports.useDisclosure=u.useDisclosure;exports.useClickOutside=r.useClickOutside;exports.useKeyboardNavigation=o.useKeyboardNavigation;exports.useFocusTrap=i.useFocusTrap;exports.useId=s.useId;exports.useIds=s.useIds;exports.useControllable=t.useControllable;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./hooks/useMediaQuery.cjs"),u=require("./hooks/useDisclosure.cjs"),r=require("./hooks/useClickOutside.cjs"),o=require("./hooks/useKeyboardNavigation.cjs"),t=require("./hooks/useFocusTrap.cjs"),s=require("./hooks/useId.cjs"),i=require("./hooks/useControllable.cjs"),a=require("./hooks/useInteractionState.cjs");exports.useIsDesktop=e.useIsDesktop;exports.useIsMobile=e.useIsMobile;exports.useIsTablet=e.useIsTablet;exports.useMediaQuery=e.useMediaQuery;exports.usePrefersDarkMode=e.usePrefersDarkMode;exports.usePrefersReducedMotion=e.usePrefersReducedMotion;exports.useDisclosure=u.useDisclosure;exports.useClickOutside=r.useClickOutside;exports.useKeyboardNavigation=o.useKeyboardNavigation;exports.useFocusTrap=t.useFocusTrap;exports.useId=s.useId;exports.useIds=s.useIds;exports.useControllable=i.useControllable;exports.useInteractionState=a.useInteractionState;
 //# sourceMappingURL=hooks.cjs.map

package/dist/hooks.d.ts

@@ -1,5 +1,31 @@
+import { FocusEvent as FocusEvent_2 } from 'react';
+import { MouseEvent as MouseEvent_2 } from 'react';
 import { RefObject } from 'react';
 
+export declare interface InteractionHandlers<T extends HTMLElement = HTMLElement> {
+    /** Handler for focus events */
+    onFocus: (event: FocusEvent_2<T>) => void;
+    /** Handler for blur events */
+    onBlur: (event: FocusEvent_2<T>) => void;
+    /** Handler for mouse enter events */
+    onMouseEnter: (event: MouseEvent_2<T>) => void;
+    /** Handler for mouse leave events */
+    onMouseLeave: (event: MouseEvent_2<T>) => void;
+    /** Handler for mouse down events */
+    onMouseDown: (event: MouseEvent_2<T>) => void;
+    /** Handler for mouse up events */
+    onMouseUp: (event: MouseEvent_2<T>) => void;
+}
+
+export declare interface InteractionState {
+    /** Whether the element is currently focused */
+    isFocused: boolean;
+    /** Whether the element is currently hovered */
+    isHovered: boolean;
+    /** Whether the element is currently pressed */
+    isPressed: boolean;
+}
+
 export declare function useClickOutside<T extends HTMLElement = HTMLElement>(handler: (event: MouseEvent | TouchEvent) => void, options?: UseClickOutsideOptions): RefObject<T | null>;
 
 export declare interface UseClickOutsideOptions {
@@ -88,6 +114,67 @@ export declare function useId(prefix?: string): string;
 
 export declare function useIds(count: number, prefix?: string): string[];
 
+/**
+ * Hook for managing interactive states in form components.
+ *
+ * @example
+ * ```tsx
+ * function MyInput(props) {
+ *   const { state, handlers } = useInteractionState({
+ *     disabled: props.disabled,
+ *     onFocus: props.onFocus,
+ *     onBlur: props.onBlur,
+ *   })
+ *
+ *   return (
+ *     <input
+ *       {...handlers}
+ *       style={{
+ *         borderColor: state.isFocused ? 'blue' : 'gray',
+ *       }}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+export declare function useInteractionState<T extends HTMLElement = HTMLElement>(options?: UseInteractionStateOptions<T>): UseInteractionStateReturn<T>;
+
+export declare interface UseInteractionStateOptions<T extends HTMLElement = HTMLElement> {
+    /** Callback when focus state changes */
+    onFocusChange?: (isFocused: boolean) => void;
+    /** Callback when hover state changes */
+    onHoverChange?: (isHovered: boolean) => void;
+    /** Callback when pressed state changes */
+    onPressedChange?: (isPressed: boolean) => void;
+    /** External focus handler to merge */
+    onFocus?: (event: FocusEvent_2<T>) => void;
+    /** External blur handler to merge */
+    onBlur?: (event: FocusEvent_2<T>) => void;
+    /** External mouse enter handler to merge */
+    onMouseEnter?: (event: MouseEvent_2<T>) => void;
+    /** External mouse leave handler to merge */
+    onMouseLeave?: (event: MouseEvent_2<T>) => void;
+    /** External mouse down handler to merge */
+    onMouseDown?: (event: MouseEvent_2<T>) => void;
+    /** External mouse up handler to merge */
+    onMouseUp?: (event: MouseEvent_2<T>) => void;
+    /** Whether the element is disabled (disables all interactions) */
+    disabled?: boolean;
+}
+
+export declare interface UseInteractionStateReturn<T extends HTMLElement = HTMLElement> {
+    /** Current interaction state */
+    state: InteractionState;
+    /** Event handlers to spread onto the element */
+    handlers: InteractionHandlers<T>;
+    /** Manually set focus state */
+    setIsFocused: (value: boolean) => void;
+    /** Manually set hover state */
+    setIsHovered: (value: boolean) => void;
+    /** Manually set pressed state */
+    setIsPressed: (value: boolean) => void;
+}
+
 export declare function useIsDesktop(): boolean;
 
 /** Pre-built responsive hooks */

package/dist/hooks.js

@@ -1,23 +1,25 @@
-import { useIsDesktop as r, useIsMobile as s, useIsTablet as u, useMediaQuery as t, usePrefersDarkMode as f, usePrefersReducedMotion as p } from "./hooks/useMediaQuery.js";
-import { useDisclosure as d } from "./hooks/useDisclosure.js";
-import { useClickOutside as l } from "./hooks/useClickOutside.js";
-import { useKeyboardNavigation as x } from "./hooks/useKeyboardNavigation.js";
-import { useFocusTrap as b } from "./hooks/useFocusTrap.js";
-import { useId as M, useIds as k } from "./hooks/useId.js";
+import { useIsDesktop as r, useIsMobile as s, useIsTablet as u, useMediaQuery as t, usePrefersDarkMode as a, usePrefersReducedMotion as f } from "./hooks/useMediaQuery.js";
+import { useDisclosure as i } from "./hooks/useDisclosure.js";
+import { useClickOutside as m } from "./hooks/useClickOutside.js";
+import { useKeyboardNavigation as l } from "./hooks/useKeyboardNavigation.js";
+import { useFocusTrap as c } from "./hooks/useFocusTrap.js";
+import { useId as b, useIds as M } from "./hooks/useId.js";
 import { useControllable as D } from "./hooks/useControllable.js";
+import { useInteractionState as C } from "./hooks/useInteractionState.js";
 export {
-  l as useClickOutside,
+  m as useClickOutside,
   D as useControllable,
-  d as useDisclosure,
-  b as useFocusTrap,
-  M as useId,
-  k as useIds,
+  i as useDisclosure,
+  c as useFocusTrap,
+  b as useId,
+  M as useIds,
+  C as useInteractionState,
   r as useIsDesktop,
   s as useIsMobile,
   u as useIsTablet,
-  x as useKeyboardNavigation,
+  l as useKeyboardNavigation,
   t as useMediaQuery,
-  f as usePrefersDarkMode,
-  p as usePrefersReducedMotion
+  a as usePrefersDarkMode,
+  f as usePrefersReducedMotion
 };
 //# sourceMappingURL=hooks.js.map

package/dist/hooks.js.map

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

package/dist/layout.d.ts

@@ -132,6 +132,50 @@ export declare interface CardProps extends HTMLAttributes<HTMLDivElement> {
 
 export declare type CardVariant = 'elevated' | 'outline' | 'filled' | 'ghost';
 
+export declare const Collapse: ForwardRefExoticComponent<CollapseProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface CollapseProps {
+    /** Whether the content is expanded (controlled) */
+    isOpen?: boolean;
+    /** Default expanded state (uncontrolled) */
+    defaultIsOpen?: boolean;
+    /** Content to show when collapsed */
+    children: ReactNode;
+    /** Animation duration in milliseconds */
+    duration?: number;
+    /** Easing function */
+    easing?: string;
+    /** Whether to animate on initial render */
+    animateOnMount?: boolean;
+    /** Whether to unmount content when collapsed */
+    unmountOnCollapse?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare const Collapsible: ForwardRefExoticComponent<CollapsibleProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface CollapsibleProps {
+    /** Header content (always visible) */
+    header: ReactNode;
+    /** Collapsible content */
+    children: ReactNode;
+    /** Whether expanded (controlled) */
+    isOpen?: boolean;
+    /** Default expanded state (uncontrolled) */
+    defaultIsOpen?: boolean;
+    /** Callback when expanded state changes */
+    onToggle?: (isOpen: boolean) => void;
+    /** Whether the collapsible is disabled */
+    disabled?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
 export declare const Container: ContainerComponent;
 
 declare interface ContainerComponent {