@donotdev/components 0.0.11 → 0.0.12

package/dist/atomic/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Button/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAK1D,OAAO,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,KAAK,EAAE,oBAAoB,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5E;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;CAKjB,CAAC;AAEX,QAAA,MAAM,cAAc;;8EAmBlB,CAAC;AAEH;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,SAAS,CAAC,CAAC;AAE3E;;;;;;GAMG;AACH,qEAAqE;AACrE,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,MAAM,WAAW,WACf,SACE,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC;;;;;;;;;;;;;;;OAeG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC;IACjD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;IACjD,yDAAyD;IACzD,IAAI,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,QAAA,MAAM,MAAM,GAAI,wKAcb,WAAW,4UAmFb,CAAC;AAEF,eAAe,MAAM,CAAC;AACtB,OAAO,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Button/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAK1D,OAAO,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,KAAK,EAAE,oBAAoB,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5E;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;CAKjB,CAAC;AAEX,QAAA,MAAM,cAAc;;8EAmBlB,CAAC;AAEH;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,SAAS,CAAC,CAAC;AAE3E;;;;;;GAMG;AACH,qEAAqE;AACrE,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,MAAM,WAAW,WACf,SACE,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC;;;;;;;;;;;;;;;OAeG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC;IACjD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;IACjD,yDAAyD;IACzD,IAAI,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,QAAA,MAAM,MAAM,GAAI,wKAcb,WAAW,4UAuFb,CAAC;AAEF,eAAe,MAAM,CAAC;AACtB,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/atomic/Button/index.js

@@ -91,6 +91,9 @@ const Button = ({ className, variant, render, display = DISPLAY.AUTO, icon, icon
     // Map 'default' variant to 'primary' for data-variant (same styling)
     const variantForDataAttr = variant === THEME_VARIANT.DEFAULT ? THEME_VARIANT.PRIMARY : variant;
     const variantAttrs = getVariantDataAttrs({ variant: variantForDataAttr });
+    // Extract type from props before spreading (to ensure it's not overridden)
+    const buttonType = props.type || 'button';
+    const { type: _type, ...restProps } = props;
     // Build all props that should be passed to element (button or render prop)
     const elementProps = {
         children: buttonContent,
@@ -101,10 +104,10 @@ const Button = ({ className, variant, render, display = DISPLAY.AUTO, icon, icon
         ...(floating && { 'data-floating': 'true' }),
         ...(fullWidth && { 'data-full-width': 'true' }),
         ...(effectiveDisplay && { 'data-display': effectiveDisplay }),
-        ...props,
+        ...restProps,
     };
     // Render prop pattern - no cloneElement needed (React 19 compatible)
-    const buttonElement = render ? (render(elementProps)) : (_jsx("button", { type: props.type || 'button', role: "button", tabIndex: 0, ...elementProps, children: buttonContent }));
+    const buttonElement = render ? (render(elementProps)) : (_jsx("button", { type: buttonType, role: "button", tabIndex: 0, ...elementProps, children: buttonContent }));
     // Tooltip: COMPACT/AUTO (may be icon-only when collapsed), others only if explicit
     // Don't specify side - let CSS --tooltip-side take priority (RTL-aware in sidebars)
     if (effectiveDisplay === DISPLAY.COMPACT ||

package/dist/atomic/Calendar/index.js

@@ -13,7 +13,7 @@ function CalendarDropdown({ options = [], value, onChange, 'aria-label': ariaLab
     const gridStyle = {
         display: 'grid',
         gridTemplateColumns: isMonth ? 'repeat(3, 1fr)' : 'repeat(5, 1fr)',
-        gap: 'var(--gap-xs)',
+        gap: 'var(--gap-sm)',
         padding: '0',
     };
     const handleSelect = (newValue) => {

package/dist/atomic/Collapsible/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Collapsible/index.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,gBAAgB;IAC/B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,wCAAwC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACrC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;GAaG;AACH,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,QAAgB,EAChB,SAAwB,EACxB,SAAS,GACV,EAAE,gBAAgB,2CAmElB;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Collapsible/index.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,gBAAgB;IAC/B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,wCAAwC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACrC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;GAaG;AACH,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,QAAgB,EAChB,SAAwB,EACxB,SAAS,GACV,EAAE,gBAAgB,2CA+DlB;AAED,eAAe,WAAW,CAAC"}

package/dist/atomic/Collapsible/index.js

@@ -42,11 +42,7 @@ function Collapsible({ trigger, children, open, onOpenChange, defaultOpen, disab
         if (!trigger)
             return null;
         if (showIcon) {
-            const IconComponent = iconStyle === 'chevron'
-                ? ChevronDown
-                : isOpen
-                    ? Minus
-                    : Plus;
+            const IconComponent = iconStyle === 'chevron' ? ChevronDown : isOpen ? Minus : Plus;
             return (_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(Stack, { as: "div", direction: "row", align: "center", justify: "between", className: "dndev-collapsible-trigger", children: [trigger, iconStyle === 'chevron' ? (_jsx(ChevronDown, { className: "dndev-collapsible-icon dndev-collapsible-chevron", "aria-hidden": "true" })) : (_jsx(IconComponent, { className: "dndev-collapsible-icon", "aria-hidden": "true" }))] }) }));
         }
         return _jsx(CollapsibleTrigger, { asChild: true, children: trigger });

package/dist/atomic/Combobox/index.d.ts

@@ -1,12 +1,3 @@
-/**
- * @fileoverview Combobox component
- * @description Accessible combobox with search/filter functionality. Provides a prop-based implementation.
- *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
-import { type ReactNode } from 'react';
 import { CONTROL_VARIANT, type ControlVariant } from '../../utils/constants';
 import './Combobox.css';
 export interface ComboboxOption {
@@ -14,57 +5,28 @@ export interface ComboboxOption {
     label: string;
     disabled?: boolean;
     description?: string;
-    content?: ReactNode;
+    content?: React.ReactNode;
 }
 export interface ComboboxProps {
-    /** Selected value (string for single, array for multiple) */
     value?: string | string[];
-    /** Change handler */
     onValueChange?: (value: string | string[]) => void;
-    /** Placeholder text for trigger */
     placeholder?: string;
-    /** Array of options */
     options?: ComboboxOption[];
-    /** Custom trigger element */
-    trigger?: ReactNode;
-    /** Whether the combobox is disabled */
     disabled?: boolean;
-    /** Whether the combobox is in a loading state */
     isLoading?: boolean;
-    /** Variant for styling */
     variant?: ControlVariant;
-    /** Placeholder for search input */
-    searchPlaceholder?: string;
-    /** Message when no results found */
     emptyMessage?: string;
-    /** Custom filter function */
-    filterFn?: (option: ComboboxOption, searchTerm: string) => boolean;
-    /** Enable multiple selection */
     multiple?: boolean;
-    /** Label for floating label - automatically floats when both label and placeholder are provided */
     label?: string;
+    creatable?: boolean;
+    createLabel?: string;
+    clearable?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onSearchChange?: (search: string) => void;
+    /** Whether the field is required - shows asterisk indicator */
+    required?: boolean;
 }
-/**
- * Accessible combobox component with search/filter functionality.
- * Provides a prop-based implementation to abstract complexity.
- *
- * @component
- * @example
- * ```tsx
- * <Combobox
- *   value={value}
- *   onValueChange={setValue}
- *   placeholder="Select option..."
- *   options={[
- *     { value: 'option1', label: 'Option 1' },
- *     { value: 'option2', label: 'Option 2' }
- *   ]}
- * />
- * ```
- * @param {ComboboxProps} props - The props for the combobox
- * @returns {JSX.Element} The rendered combobox
- */
-declare const Combobox: ({ value, onValueChange, placeholder, searchPlaceholder, emptyMessage, options, trigger, disabled, isLoading, variant, filterFn, multiple, label, }: ComboboxProps) => import("react/jsx-runtime").JSX.Element;
+declare const Combobox: ({ value, onValueChange, placeholder, emptyMessage, options, disabled, isLoading, variant, multiple, label, creatable, createLabel, clearable, onOpenChange, onSearchChange, required, }: ComboboxProps) => import("react/jsx-runtime").JSX.Element;
 export default Combobox;
 export { CONTROL_VARIANT as COMBOBOX_VARIANT };
 export type { ControlVariant as ComboboxVariant };

package/dist/atomic/Combobox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Combobox/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAML,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,eAAe,EAAE,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAW7E,OAAO,gBAAgB,CAAC;AAExB,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,qBAAqB;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IACnD,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uBAAuB;IACvB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,6BAA6B;IAC7B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC;IACnE,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mGAAmG;IACnG,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAYD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,QAAQ,GAAI,oJAcf,aAAa,4CA2Pf,CAAC;AAEF,eAAe,QAAQ,CAAC;AACxB,OAAO,EAAE,eAAe,IAAI,gBAAgB,EAAE,CAAC;AAC/C,YAAY,EAAE,cAAc,IAAI,eAAe,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Combobox/index.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,eAAe,EAAE,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAG7E,OAAO,gBAAgB,CAAC;AAExB,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,GAAI,yLAiBf,aAAa,4CA4Uf,CAAC;AAEF,eAAe,QAAQ,CAAC;AACxB,OAAO,EAAE,eAAe,IAAI,gBAAgB,EAAE,CAAC;AAC/C,YAAY,EAAE,cAAc,IAAI,eAAe,EAAE,CAAC"}

package/dist/atomic/Combobox/index.js

@@ -1,77 +1,64 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // packages/components/src/atomic/Combobox/index.tsx
-/**
- * @fileoverview Combobox component
- * @description Accessible combobox with search/filter functionality. Provides a prop-based implementation.
- *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
 import { useState, useMemo, useRef, useEffect, useId, } from 'react';
-import { Check, ChevronDown, X } from 'lucide-react';
+import { Check, ChevronDown, Plus, X } from 'lucide-react';
+import Spinner from '../Spinner';
+import ScrollArea from '../ScrollArea';
 import { cn } from '../../utils/helpers';
 import { CONTROL_VARIANT } from '../../utils/constants';
-import { ComboboxRootPrimitive, ComboboxTriggerPrimitive, ComboboxContentPrimitive, ComboboxAnchorPrimitive, } from './ComboboxPrimitive';
 import Input from '../Input';
-import Button from '../Button';
-import Label from '../Label';
 import './Combobox.css';
-/**
- * Default filter function - case-insensitive label search
- */
-const defaultFilterFn = (option, searchTerm) => {
-    return option.label.toLowerCase().includes(searchTerm.toLowerCase());
-};
-/**
- * Accessible combobox component with search/filter functionality.
- * Provides a prop-based implementation to abstract complexity.
- *
- * @component
- * @example
- * ```tsx
- * <Combobox
- *   value={value}
- *   onValueChange={setValue}
- *   placeholder="Select option..."
- *   options={[
- *     { value: 'option1', label: 'Option 1' },
- *     { value: 'option2', label: 'Option 2' }
- *   ]}
- * />
- * ```
- * @param {ComboboxProps} props - The props for the combobox
- * @returns {JSX.Element} The rendered combobox
- */
-const Combobox = ({ value, onValueChange, placeholder = 'Select...', searchPlaceholder = 'Search...', emptyMessage = 'No results found', options = [], trigger, disabled, isLoading, variant, filterFn = defaultFilterFn, multiple = false, label, }) => {
+const Combobox = ({ value, onValueChange, placeholder = 'Select...', emptyMessage = 'No results found', options = [], disabled, isLoading, variant, multiple = false, label, creatable = false, createLabel = 'Create', clearable = false, onOpenChange, onSearchChange, required, }) => {
     const id = useId();
     const [open, setOpen] = useState(false);
     const [search, setSearch] = useState('');
     const [highlightedIndex, setHighlightedIndex] = useState(0);
+    const containerRef = useRef(null);
     const inputRef = useRef(null);
     const listRef = useRef(null);
-    // Normalize value to array for easier handling
     const selectedValues = useMemo(() => {
         if (!value)
             return [];
         return Array.isArray(value) ? value : [value];
     }, [value]);
-    // Filter options based on search
     const filteredOptions = useMemo(() => {
         if (!search)
             return options;
-        return options.filter((option) => filterFn(option, search));
-    }, [options, search, filterFn]);
-    // Reset search and highlighted index when opening
+        const searchLower = search.toLowerCase();
+        return options.filter((option) => {
+            const labelMatch = option.label.toLowerCase().includes(searchLower);
+            const descMatch = option.description?.toLowerCase().includes(searchLower);
+            return labelMatch || descMatch;
+        });
+    }, [options, search]);
+    const showCreateOption = useMemo(() => {
+        if (!creatable || !search.trim())
+            return false;
+        const exactMatch = options.some((opt) => opt.value.toLowerCase() === search.toLowerCase() ||
+            opt.label.toLowerCase() === search.toLowerCase());
+        return !exactMatch;
+    }, [creatable, search, options]);
+    const displayOptions = useMemo(() => {
+        if (showCreateOption) {
+            return [
+                ...filteredOptions,
+                {
+                    value: search.trim(),
+                    label: `${createLabel} "${search.trim()}"`,
+                    isCreateOption: true,
+                },
+            ];
+        }
+        return filteredOptions;
+    }, [filteredOptions, showCreateOption, search, createLabel]);
     useEffect(() => {
         if (open) {
-            setSearch('');
             setHighlightedIndex(0);
-            // Focus input when opened
-            setTimeout(() => inputRef.current?.focus(), 0);
         }
-    }, [open]);
-    // Scroll highlighted item into view
+        else if (!multiple) {
+            setSearch('');
+        }
+    }, [open, multiple]);
     useEffect(() => {
         if (open && listRef.current) {
             const highlightedElement = listRef.current.children[highlightedIndex];
@@ -80,6 +67,21 @@ const Combobox = ({ value, onValueChange, placeholder = 'Select...', searchPlace
             }
         }
     }, [highlightedIndex, open]);
+    useEffect(() => {
+        setHighlightedIndex(0);
+    }, [displayOptions.length]);
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (containerRef.current &&
+                !containerRef.current.contains(e.target)) {
+                setOpen(false);
+            }
+        };
+        if (open) {
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => document.removeEventListener('mousedown', handleClickOutside);
+        }
+    }, [open]);
     const handleSelect = (optionValue) => {
         if (multiple) {
             const newValues = selectedValues.includes(optionValue)
@@ -90,30 +92,43 @@ const Combobox = ({ value, onValueChange, placeholder = 'Select...', searchPlace
         else {
             onValueChange?.(optionValue);
             setOpen(false);
+            setSearch('');
+            inputRef.current?.blur();
         }
     };
     const handleKeyDown = (e) => {
-        if (!open)
-            return;
         switch (e.key) {
             case 'ArrowDown':
                 e.preventDefault();
-                setHighlightedIndex((prev) => (prev + 1) % filteredOptions.length);
+                if (!open) {
+                    setOpen(true);
+                }
+                else {
+                    setHighlightedIndex((prev) => (prev + 1) % displayOptions.length);
+                }
                 break;
             case 'ArrowUp':
                 e.preventDefault();
-                setHighlightedIndex((prev) => (prev - 1 + filteredOptions.length) % filteredOptions.length);
+                if (open) {
+                    setHighlightedIndex((prev) => (prev - 1 + displayOptions.length) % displayOptions.length);
+                }
                 break;
             case 'Enter':
                 e.preventDefault();
-                if (filteredOptions[highlightedIndex] &&
-                    !filteredOptions[highlightedIndex].disabled) {
-                    handleSelect(filteredOptions[highlightedIndex].value);
+                if (open &&
+                    displayOptions[highlightedIndex] &&
+                    !displayOptions[highlightedIndex].disabled) {
+                    handleSelect(displayOptions[highlightedIndex].value);
+                }
+                else if (!open) {
+                    setOpen(true);
                 }
                 break;
             case 'Escape':
                 e.preventDefault();
                 setOpen(false);
+                setSearch('');
+                inputRef.current?.blur();
                 break;
         }
     };
@@ -121,43 +136,76 @@ const Combobox = ({ value, onValueChange, placeholder = 'Select...', searchPlace
         e.stopPropagation();
         onValueChange?.(multiple ? [] : '');
     };
-    // Get display text for selected values
-    const getDisplayText = () => {
+    const getDisplayValue = () => {
+        if (open && search)
+            return search;
         if (selectedValues.length === 0)
-            return placeholder;
-        if (multiple) {
-            return `${selectedValues.length} selected`;
-        }
+            return '';
+        if (multiple)
+            return '';
         const selectedOption = options.find((opt) => opt.value === selectedValues[0]);
-        return selectedOption?.label || placeholder;
+        return selectedOption?.label || (creatable ? selectedValues[0] : '');
     };
-    const displayText = getDisplayText();
+    const displayValue = getDisplayValue();
     const hasSelection = selectedValues.length > 0;
-    const hasLabel = !!label;
-    return (_jsxs(ComboboxRootPrimitive, { open: open, onOpenChange: setOpen, children: [_jsx(ComboboxAnchorPrimitive, { asChild: true, children: trigger ? (_jsx(ComboboxTriggerPrimitive, { asChild: true, disabled: disabled, children: trigger })) : (_jsxs("div", { className: "dndev-relative", children: [hasLabel && (_jsx(Label, { htmlFor: id, style: {
-                                position: 'absolute',
-                                left: 'var(--gap-md)',
-                                top: 'calc(-1 * var(--font-size-xs) / 2 - 1px)',
-                                fontSize: 'var(--font-size-xs)',
-                                fontWeight: 500,
-                                color: disabled
-                                    ? 'var(--muted-foreground)'
-                                    : 'var(--foreground)',
-                                pointerEvents: 'none',
-                                zIndex: 1,
-                                backgroundColor: 'var(--background)',
-                                padding: '0 var(--gap-xs)',
-                                lineHeight: 1,
-                            }, children: label })), _jsx(ComboboxTriggerPrimitive, { id: id, className: "dndev-input dndev-combobox-trigger", disabled: disabled, asChild: true, children: _jsxs("button", { type: "button", children: [isLoading ? (_jsxs("div", { className: "dndev-combobox-loading-container", children: [_jsx("div", { className: "dndev-animate-spin dndev-combobox-loading-spinner" }), _jsx("span", { children: "Loading..." })] })) : (_jsx("span", { className: cn(!hasSelection && 'dndev-combobox-placeholder'), children: displayText })), _jsxs("div", { className: "dndev-combobox-trigger-icons", children: [hasSelection && !disabled && (_jsx("span", { role: "button", tabIndex: 0, onClick: handleClear, onKeyDown: (e) => {
-                                                    if (e.key === 'Enter' || e.key === ' ') {
-                                                        e.preventDefault();
-                                                        handleClear(e);
-                                                    }
-                                                }, className: "dndev-combobox-clear", "aria-label": "Clear selection", children: _jsx(X, {}) })), _jsx(ChevronDown, { className: "dndev-combobox-chevron" })] })] }) })] })) }), _jsxs(ComboboxContentPrimitive, { className: "dndev-floating dndev-menu-content dndev-z-tooltip dndev-combobox-content", sideOffset: 4, align: "start", "data-glow": "blank", onOpenAutoFocus: (e) => e.preventDefault(), children: [_jsx("div", { className: "dndev-combobox-search-container", children: _jsx(Input, { ref: inputRef, value: search, onChange: (e) => setSearch(e.target.value), onKeyDown: handleKeyDown, placeholder: searchPlaceholder, className: "dndev-combobox-search-input" }) }), _jsx("div", { className: "dndev-combobox-list", ref: listRef, children: filteredOptions.length === 0 ? (_jsx("div", { className: "dndev-combobox-empty", children: emptyMessage })) : (filteredOptions.map((option, index) => {
+    const handleInputChange = (e) => {
+        const newValue = e.target.value;
+        setSearch(newValue);
+        onSearchChange?.(newValue);
+        if (!open)
+            setOpen(true);
+    };
+    const handleInputFocus = () => {
+        if (!disabled && !isLoading) {
+            setOpen(true);
+        }
+    };
+    const handleInputClick = () => {
+        if (!disabled && !isLoading) {
+            setOpen(true);
+            inputRef.current?.focus();
+        }
+    };
+    const handleOpenChange = (isOpen) => {
+        setOpen(isOpen);
+        onOpenChange?.(isOpen);
+    };
+    return (_jsxs("div", { ref: containerRef, className: cn('dndev-relative', open && 'dndev-combobox-open'), style: { width: '100%' }, children: [_jsxs("div", { className: "dndev-relative", children: [_jsx(Input, { ref: inputRef, id: id, label: label, value: displayValue, onChange: handleInputChange, onFocus: handleInputFocus, onClick: handleInputClick, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled || isLoading, icon: isLoading ? _jsx(Spinner, {}) : ChevronDown, iconEnd: true, required: required, "data-variant": variant, style: {
+                            '--chevron-rotation': open ? '180deg' : '0deg',
+                        } }), clearable && hasSelection && !disabled && (_jsx("button", { type: "button", onClick: handleClear, className: "dndev-absolute", style: {
+                            insetInlineEnd: 'calc(var(--gap-md) + var(--icon-md) + var(--gap-sm))',
+                            top: '50%',
+                            transform: 'translateY(-50%)',
+                            background: 'none',
+                            border: 'none',
+                            cursor: 'pointer',
+                            padding: 'var(--gap-tight)',
+                            display: 'flex',
+                            alignItems: 'center',
+                            opacity: 0.5,
+                            zIndex: 1,
+                        }, "aria-label": "Clear", children: _jsx(X, { style: {
+                                width: 'var(--size-icon-sm)',
+                                height: 'var(--size-icon-sm)',
+                            } }) }))] }), open && (_jsx("div", { className: "dndev-floating dndev-menu-content dndev-z-tooltip dndev-combobox-content", style: {
+                    position: 'absolute',
+                    top: '100%',
+                    insetInlineStart: 0,
+                    insetInlineEnd: 0,
+                    width: '100%',
+                    marginTop: 'var(--gap-tight)',
+                    padding: 'var(--gap-tight)',
+                    textAlign: 'start',
+                }, "data-glow": "blank", children: _jsx(ScrollArea, { className: "dndev-menu-scroll-area", end: true, children: _jsx("div", { ref: listRef, style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 'var(--gap-none)',
+                        }, children: displayOptions.length === 0 ? (_jsx("div", { className: "dndev-combobox-empty", style: { textAlign: 'start' }, children: emptyMessage })) : (displayOptions.map((option, index) => {
                             const isSelected = selectedValues.includes(option.value);
                             const isHighlighted = index === highlightedIndex;
-                            return (_jsx("button", { type: "button", onClick: () => !option.disabled && handleSelect(option.value), disabled: option.disabled, className: cn('dndev-interactive dndev-combobox-option', isHighlighted && 'dndev-combobox-option-highlighted', isSelected && 'dndev-combobox-option-selected'), onMouseEnter: () => setHighlightedIndex(index), children: option.content ? (option.content) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "dndev-combobox-option-content", children: [_jsx("span", { className: "dndev-combobox-option-label", children: option.label }), option.description && (_jsx("span", { className: "dndev-combobox-option-description", children: option.description }))] }), isSelected && (_jsx(Check, { className: "dndev-combobox-option-check" }))] })) }, option.value));
-                        })) })] })] }));
+                            const isCreateOption = option.isCreateOption;
+                            return (_jsx("button", { type: "button", onClick: () => !option.disabled && handleSelect(option.value), disabled: option.disabled, className: cn('dndev-interactive dndev-combobox-option', isHighlighted && 'dndev-combobox-option-highlighted', isSelected && 'dndev-combobox-option-selected', isCreateOption && 'dndev-combobox-option-create'), onMouseEnter: () => setHighlightedIndex(index), children: option.content ? (option.content) : (_jsxs(_Fragment, { children: [isCreateOption && (_jsx(Plus, { className: "dndev-combobox-option-create-icon" })), _jsxs("div", { className: "dndev-combobox-option-content", children: [_jsx("span", { className: "dndev-combobox-option-label", children: option.label }), option.description && (_jsx("span", { className: "dndev-combobox-option-description", children: option.description }))] }), isSelected && !isCreateOption && (_jsx(Check, { className: "dndev-combobox-option-check" }))] })) }, isCreateOption ? `create-${option.value}` : option.value));
+                        })) }) }) }))] }));
 };
 export default Combobox;
 export { CONTROL_VARIANT as COMBOBOX_VARIANT };

package/dist/atomic/Dialog/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Dialog/index.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAG7E,OAAe,EAAkB,KAAK,aAAa,EAAE,MAAM,WAAW,CAAC;AACvE,OAAO,EAGL,aAAa,IAAI,gBAAgB,EAQlC,MAAM,mBAAmB,CAAC;AAE3B,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElE,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAU/E,QAAA,MAAM,aAAa,GAAI,0EAOpB,cAAc,CAAC,OAAO,gBAAgB,CAAC,GAAG;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,4CAyBA,CAAC;AAiCF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC;AAEtE,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,kBAAkB,EAClB,UAAU,GAAG,OAAO,CACrB;IACC,wCAAwC;IACxC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,mBAAmB;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qBAAqB;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sIAAsI;IACtI,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,OAAO,CAAC,EAAE;QACR,MAAM,CAAC,EAAE;YACP,KAAK,EAAE,MAAM,CAAC;YACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;SACtB,CAAC;QACF,OAAO,CAAC,EAAE;YACR,KAAK,EAAE,MAAM,CAAC;YACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;YACrB,OAAO,CAAC,EAAE,aAAa,CAAC;SACzB,CAAC;KACH,CAAC;CACH;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,MAAM,GAAI,yIAcb,WAAW,4CA2Eb,CAAC;AAEF,eAAe,MAAM,CAAC;AACtB,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC1E,YAAY,EAAE,cAAc,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Dialog/index.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAG7E,OAAe,EAAkB,KAAK,aAAa,EAAE,MAAM,WAAW,CAAC;AACvE,OAAO,EAGL,aAAa,IAAI,gBAAgB,EAQlC,MAAM,mBAAmB,CAAC;AAE3B,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElE,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAU/E,QAAA,MAAM,aAAa,GAAI,0EAOpB,cAAc,CAAC,OAAO,gBAAgB,CAAC,GAAG;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,4CAyBA,CAAC;AAiCF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC;AAEtE,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,kBAAkB,EAClB,UAAU,GAAG,OAAO,CACrB;IACC,wCAAwC;IACxC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,mBAAmB;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qBAAqB;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sIAAsI;IACtI,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,OAAO,CAAC,EAAE;QACR,MAAM,CAAC,EAAE;YACP,KAAK,EAAE,MAAM,CAAC;YACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;SACtB,CAAC;QACF,OAAO,CAAC,EAAE;YACR,KAAK,EAAE,MAAM,CAAC;YACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;YACrB,OAAO,CAAC,EAAE,aAAa,CAAC;SACzB,CAAC;KACH,CAAC;CACH;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,MAAM,GAAI,yIAcb,WAAW,4CAyEb,CAAC;AAEF,eAAe,MAAM,CAAC;AACtB,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC1E,YAAY,EAAE,cAAc,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/atomic/Dialog/index.js

@@ -57,7 +57,7 @@ const Dialog = ({ trigger, title, description, children, footer, open, onOpenCha
     const variantAttrs = getVariantDataAttrs({
         variant: variant !== SURFACE_VARIANT.DEFAULT ? variant : undefined,
     });
-    return (_jsxs(Root, { open: open, onOpenChange: onOpenChange, children: [trigger && _jsx(Trigger, { asChild: true, children: trigger }), _jsxs(DialogContent, { className: cn('dndev-surface', className), noSwipe: noSwipe, closeButtonRef: closeButtonRef, onOpenChange: onOpenChange, ...variantAttrs, ...contentProps, children: [title ? (_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title }), description && (_jsx(DialogDescription, { className: "dndev-sr-only", children: description }))] })) : (_jsxs(_Fragment, { children: [_jsx(DialogTitle, { className: "dndev-sr-only", children: "Dialog" }), _jsx(DialogDescription, { className: "dndev-sr-only", children: description || 'Dialog content' })] })), _jsx("div", { className: "dndev-modal-body", children: children }), (footer || actions) && (_jsxs(DialogFooter, { children: [footer, actions && (_jsxs(_Fragment, { children: [actions.cancel && (_jsx(Close, { asChild: true, children: _jsx(Button, { variant: BUTTON_VARIANT.OUTLINE, onClick: actions.cancel.onClick, children: actions.cancel.label }) })), actions.confirm && (_jsx(Button, { variant: actions.confirm.variant || BUTTON_VARIANT.PRIMARY, onClick: actions.confirm.onClick, children: actions.confirm.label }))] }))] })), showClose && (_jsx(Close, { ref: closeButtonRef, asChild: true, children: _jsx(Button, { variant: BUTTON_VARIANT.GHOST, icon: X, className: "dndev-modal-close", "aria-label": "Close" }) }))] })] }));
+    return (_jsxs(Root, { open: open, onOpenChange: onOpenChange, children: [trigger && _jsx(Trigger, { asChild: true, children: trigger }), _jsxs(DialogContent, { className: cn('dndev-surface dndev-modal-content', className), noSwipe: noSwipe, closeButtonRef: closeButtonRef, onOpenChange: onOpenChange, ...variantAttrs, ...contentProps, children: [title ? (_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { className: "dndev-sr-only", children: description || 'Dialog content' })] })) : (_jsxs(_Fragment, { children: [_jsx(DialogTitle, { className: "dndev-sr-only", children: "Dialog" }), _jsx(DialogDescription, { className: "dndev-sr-only", children: description || 'Dialog content' })] })), _jsx("div", { className: "dndev-modal-body", children: children }), (footer || actions) && (_jsxs(DialogFooter, { children: [footer, actions && (_jsxs(_Fragment, { children: [actions.cancel && (_jsx(Close, { asChild: true, children: _jsx(Button, { variant: BUTTON_VARIANT.OUTLINE, onClick: actions.cancel.onClick, children: actions.cancel.label }) })), actions.confirm && (_jsx(Button, { variant: actions.confirm.variant || BUTTON_VARIANT.PRIMARY, onClick: actions.confirm.onClick, children: actions.confirm.label }))] }))] })), showClose && (_jsx(Close, { ref: closeButtonRef, asChild: true, children: _jsx(Button, { variant: BUTTON_VARIANT.GHOST, icon: X, className: "dndev-modal-close", "aria-label": "Close" }) }))] })] }));
 };
 export default Dialog;
 export { SURFACE_VARIANT as DIALOG_VARIANT } from '../../utils/constants';

package/dist/atomic/DropdownMenu/index.js

@@ -112,6 +112,6 @@ const DropdownMenu = ({ trigger, items = [], children, contentWidth, contentAlig
                             'data-state': 'checked',
                         }), children: normalItem.children ? (_jsxs(_Fragment, { children: [normalItem.children, IconEnd && (_jsx(IconEnd, { className: "dndev-dropdown-menu-trailing" }))] })) : (_jsxs(_Fragment, { children: [Icon && _jsx(Icon, {}), _jsx("span", { children: normalItem.label }), IconEnd && (_jsx(IconEnd, { className: "dndev-dropdown-menu-trailing" })), normalItem.checked && (_jsx(Check, { className: "dndev-dropdown-menu-checkmark dndev-dropdown-menu-trailing" }))] })) }, index));
                 })] }));
-    return (_jsxs(DropdownMenuPrimitive, { open: open, onOpenChange: onOpenChange, children: [_jsx(DropdownMenuTriggerPrimitive, { asChild: true, children: trigger }), _jsx(DropdownMenuContentPrimitive, { align: contentAlign, className: "dndev-floating dndev-menu-content dndev-z-tooltip", style: contentWidth ? { width: contentWidth } : undefined, children: _jsx(ScrollArea, { className: "dndev-dropdown-scroll-area", end: true, children: content }) })] }));
+    return (_jsxs(DropdownMenuPrimitive, { open: open, onOpenChange: onOpenChange, children: [_jsx(DropdownMenuTriggerPrimitive, { asChild: true, children: trigger }), _jsx(DropdownMenuContentPrimitive, { align: contentAlign, className: "dndev-floating dndev-menu-content dndev-z-tooltip", style: contentWidth ? { width: contentWidth } : undefined, children: _jsx(ScrollArea, { className: "dndev-menu-scroll-area", end: true, children: content }) })] }));
 };
 export default DropdownMenu;

package/dist/atomic/Input/index.d.ts

@@ -32,6 +32,6 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  * @param {InputProps} props - The props for the input
  * @returns {JSX.Element} The rendered input
  */
-declare const Input: ({ className, type, icon, iconEnd, label, value, onFocus, onBlur, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
+declare const Input: ({ className, type, icon, iconEnd, label, value, onFocus, onBlur, required, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
 export default Input;
 //# sourceMappingURL=index.d.ts.map

package/dist/atomic/Input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Input/index.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,WAAW,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACvE,gDAAgD;IAChD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,KAAK,GAAI,6EAUZ,UAAU,4CA4EZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Input/index.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,WAAW,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACvE,gDAAgD;IAChD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,KAAK,GAAI,uFAWZ,UAAU,4CA+DZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/atomic/Input/index.js

@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useId } from 'react';
 import { cn } from '../../utils/helpers';
 import Icon from '../Icons/Icon';
-import Label from '../Label';
+import { FloatingLabel } from '../Label';
 import './Input.css';
 /**
  * Accessible input component with mobile-friendly touch targets.
@@ -31,36 +31,20 @@ import './Input.css';
  * @param {InputProps} props - The props for the input
  * @returns {JSX.Element} The rendered input
  */
-const Input = ({ className, type, icon, iconEnd = false, label, value, onFocus, onBlur, ...props }) => {
+const Input = ({ className, type, icon, iconEnd = false, label, value, onFocus, onBlur, required, ...props }) => {
     const id = useId();
     const hasIcon = !!icon;
     const isLeading = !iconEnd;
     const isTrailing = iconEnd;
     const hasLabel = !!label;
     const inputClasses = cn('dndev-input', hasIcon && isLeading && 'dndev-input-with-leading-icon', hasIcon && isTrailing && 'dndev-input-with-trailing-icon', className);
-    const inputElement = (_jsx("input", { id: id, type: type, value: value, className: inputClasses, ...props }));
+    // Explicitly exclude children to prevent void element error (input is a void element)
+    const { children: _children, ...inputProps } = props;
+    const inputElement = (_jsx("input", { id: id, type: type, value: value, required: required, className: inputClasses, ...inputProps }));
     const needsWrapper = hasIcon || hasLabel;
     if (!needsWrapper) {
         return inputElement;
     }
-    return (_jsxs("div", { className: "dndev-relative", children: [hasLabel && (_jsx(Label, { htmlFor: id, style: {
-                    position: 'absolute',
-                    left: 'var(--gap-md)',
-                    top: 'calc(-1 * var(--font-size-xs) / 2 - 1px)',
-                    fontSize: 'var(--font-size-xs)',
-                    fontWeight: 500,
-                    color: props.disabled
-                        ? 'var(--muted-foreground)'
-                        : 'var(--foreground)',
-                    pointerEvents: 'none',
-                    zIndex: 1,
-                    backgroundColor: 'var(--background)',
-                    padding: '0 var(--gap-xs)',
-                    lineHeight: 1,
-                    maxWidth: 'calc(100% - var(--gap-md) * 2)',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
-                }, children: label })), inputElement, hasIcon && (_jsx("div", { className: cn('dndev-input-icon', isLeading && 'dndev-input-icon-leading', isTrailing && 'dndev-input-icon-trailing'), children: _jsx(Icon, { icon: icon, className: "dndev-size-md", ariaHidden: true }) }))] }));
+    return (_jsxs("div", { className: "dndev-relative", children: [hasLabel && (_jsx(FloatingLabel, { htmlFor: id, disabled: props.disabled, required: required, children: label })), inputElement, hasIcon && (_jsx("div", { className: cn('dndev-input-icon', isLeading && 'dndev-input-icon-leading', isTrailing && 'dndev-input-icon-trailing'), children: _jsx(Icon, { icon: icon, className: "dndev-size-md", ariaHidden: true }) }))] }));
 };
 export default Input;

package/dist/atomic/Label/FloatingLabel.d.ts

@@ -0,0 +1,31 @@
+import './Label.css';
+import type { ReactNode } from 'react';
+export interface FloatingLabelProps {
+    /** HTML id to associate label with input */
+    htmlFor: string;
+    /** Label text or content */
+    children: ReactNode;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Whether to truncate long labels with ellipsis */
+    truncate?: boolean;
+    /** Whether the field is required - shows asterisk indicator */
+    required?: boolean;
+}
+/**
+ * FloatingLabel - Shared floating label component
+ *
+ * Positioned absolutely at the top of input fields.
+ * Uses transparent background to adapt to any parent container (dropdowns, cards, etc.)
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <FloatingLabel htmlFor="email" disabled={false} truncate>
+ *   Email Address
+ * </FloatingLabel>
+ * ```
+ */
+export declare function FloatingLabel({ htmlFor, children, disabled, truncate, required, }: FloatingLabelProps): import("react/jsx-runtime").JSX.Element;
+export default FloatingLabel;
+//# sourceMappingURL=FloatingLabel.d.ts.map

package/dist/atomic/Label/FloatingLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingLabel.d.ts","sourceRoot":"","sources":["../../../src/atomic/Label/FloatingLabel.tsx"],"names":[],"mappings":"AAaA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,kBAAkB;IACjC,4CAA4C;IAC5C,OAAO,EAAE,MAAM,CAAC;IAChB,4BAA4B;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,QAAQ,EACR,QAAgB,EAChB,QAAgB,EAChB,QAAgB,GACjB,EAAE,kBAAkB,2CAsBpB;AAED,eAAe,aAAa,CAAC"}