@donotdev/components 0.0.10 → 0.0.12

package/dist/atomic/PasswordInput/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // packages/components/src/atomic/PasswordInput/index.tsx
 /**
  * @fileoverview PasswordInput component
@@ -9,25 +9,26 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * @author AMBROISE PARK Consulting
  */
 import { Eye, EyeOff } from 'lucide-react';
-import { useState, useId, } from 'react';
+import { useState, useId } from 'react';
 import { cn } from '../../utils/helpers';
-import Button, { BUTTON_VARIANT } from '../Button';
-import Label from '../Label';
+import { FloatingLabel } from '../Label';
 import './PasswordInput.css';
 /**
  * PasswordInput Component
  *
  * A password input field with show/hide toggle functionality.
  * Features industry-standard UX patterns:
- * - Eye icon toggle (show/hide password)
- * - Keyboard accessibility (Enter to toggle)
+ * - Eye icon toggle (show/hide password) - ALWAYS at end, cannot be overridden
  * - Smooth icon transitions
  * - Mobile-friendly touch targets
  * - Screen reader support
  * - ARIA labels and descriptions
  *
+ * Opinionated: Eye icon is ALWAYS positioned at end with inline styles.
+ * If you need different behavior, create your own component.
+ *
  * @component
- * @version 0.0.1
+ * @version 0.0.2
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  * @example
@@ -36,13 +37,12 @@ import './PasswordInput.css';
  *   value={password}
  *   onChange={setPassword}
  *   placeholder="Enter password"
- *   showToggle={true}
  * />
  * ```
  * @param {PasswordInputProps} props - The props for the password input
  * @returns {JSX.Element} The rendered password input
  */
-const PasswordInput = ({ className, showToggle = true, toggleButton, visible: controlledVisible, onVisibilityChange, label, value, onFocus, onBlur, ...props }) => {
+const PasswordInput = ({ className, visible: controlledVisible, onVisibilityChange, label, value, onFocus, onBlur, required, ...props }) => {
     const id = useId();
     const [internalVisible, setInternalVisible] = useState(false);
     // Use controlled or internal state
@@ -55,26 +55,6 @@ const PasswordInput = ({ className, showToggle = true, toggleButton, visible: co
         }
         onVisibilityChange?.(newVisible);
     };
-    const handleKeyDown = (e) => {
-        if (e.key === 'Enter' && showToggle) {
-            e.preventDefault();
-            toggleVisibility();
-        }
-    };
-    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,
-                }, children: label })), _jsx("input", { id: id, type: isVisible ? 'text' : 'password', value: value, className: cn('dndev-input', showToggle && 'dndev-password-input-with-toggle', className), onKeyDown: handleKeyDown, onFocus: onFocus, onBlur: onBlur, ...props }), showToggle && (_jsx(Button, { type: "button", variant: BUTTON_VARIANT.GHOST, className: "dndev-password-toggle-button", onClick: toggleVisibility, "aria-label": isVisible ? 'Hide password' : 'Show password', "aria-describedby": props['aria-describedby'], tabIndex: -1, children: toggleButton || (_jsx(_Fragment, { children: isVisible ? (_jsx(EyeOff, { className: "dndev-size-md dndev-password-toggle-icon" })) : (_jsx(Eye, { className: "dndev-size-md dndev-password-toggle-icon" })) })) }))] }));
+    return (_jsxs("div", { className: "dndev-relative", children: [hasLabel && (_jsx(FloatingLabel, { htmlFor: id, disabled: props.disabled, required: required, children: label })), _jsx("input", { id: id, type: isVisible ? 'text' : 'password', value: value, className: cn('dndev-input', 'dndev-password-input-with-toggle', className), onFocus: onFocus, onBlur: onBlur, required: required, ...props }), _jsx("button", { type: "button", className: "dndev-password-toggle-button", onClick: toggleVisibility, "aria-label": isVisible ? 'Hide password' : 'Show password', "aria-describedby": props['aria-describedby'], tabIndex: -1, children: isVisible ? (_jsx(EyeOff, { className: "dndev-size-md dndev-password-toggle-icon" })) : (_jsx(Eye, { className: "dndev-size-md dndev-password-toggle-icon" })) })] }));
 };
 export default PasswordInput;

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

@@ -18,9 +18,15 @@
  *   <Card />
  *   <Card />
  * </Section>
+ *
+ * // Collapsible section
+ * <Section title="Details" collapsible defaultOpen={false}>
+ *   <Card />
+ *   <Card />
+ * </Section>
  * ```
  *
- * @version 0.0.4
+ * @version 0.0.5
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
@@ -61,6 +67,24 @@ interface SectionOwnProps {
      * @default 'medium'
      */
     gridGap?: 'none' | 'tight' | 'medium' | 'large';
+    /**
+     * Whether the section is collapsible
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * Controlled open state (when collapsible)
+     */
+    open?: boolean;
+    /**
+     * Callback when open state changes (when collapsible)
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Default open state (uncontrolled, when collapsible)
+     * @default false
+     */
+    defaultOpen?: boolean;
 }
 /**
  * Polymorphic Section props

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Section/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,qBAAqB,EAC1B,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAa,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAIpD,OAAO,eAAe,CAAC;AAEvB;;GAEG;AACH,UAAU,eAAe;IACvB;;;OAGG;IACH,EAAE,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IAEtD,sBAAsB;IACtB,QAAQ,EAAE,SAAS,CAAC;IAEpB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,kDAAkD;IAClD,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC;IAE7D;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAEnC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;IAEnC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACjD;AAED;;GAEG;AACH,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,SAAS,IAAI,eAAe,GAC3E,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,MAAM,eAAe,CAAC,CAAC;AAExD;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,OAAO,8HAmDZ,CAAC;AAIF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Section/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,EAIL,KAAK,WAAW,EAChB,KAAK,qBAAqB,EAC1B,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAa,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AASpD,OAAO,eAAe,CAAC;AAEvB;;GAEG;AACH,UAAU,eAAe;IACvB;;;OAGG;IACH,EAAE,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IAEtD,sBAAsB;IACtB,QAAQ,EAAE,SAAS,CAAC;IAEpB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,kDAAkD;IAClD,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC;IAE7D;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAEnC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;IAEnC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEhD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,SAAS,IAAI,eAAe,GAC3E,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,MAAM,eAAe,CAAC,CAAC;AAExD;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,OAAO,8HAmGZ,CAAC;AAIF,eAAe,OAAO,CAAC"}

package/dist/atomic/Section/index.js

@@ -20,18 +20,27 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *   <Card />
  *   <Card />
  * </Section>
+ *
+ * // Collapsible section
+ * <Section title="Details" collapsible defaultOpen={false}>
+ *   <Card />
+ *   <Card />
+ * </Section>
  * ```
  *
- * @version 0.0.4
+ * @version 0.0.5
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
-import { createElement, forwardRef, } from 'react';
+import { createElement, forwardRef, useState, } from 'react';
+import { Plus, Minus } from 'lucide-react';
 import { GAP_VARIANT } from '../../styles/componentConstants';
 import { cn } from '../../utils/helpers';
 import Grid, {} from '../Grid';
 import Separator, { SEPARATOR_VARIANT } from '../Separator';
 import Text from '../Text';
+import Stack from '../Stack';
+import CollapsiblePrimitive, { CollapsibleTrigger, CollapsibleContent, } from '../Collapsible/CollapsiblePrimitive';
 import './Section.css';
 /**
  * Minimal layout section with title, optional separator, and tone backgrounds.
@@ -46,9 +55,18 @@ import './Section.css';
  * </Section>
  * ```
  */
-const Section = forwardRef(function Section({ as = 'section', children, title, separator = false, tone = 'base', align: textAlign = 'center', gridCols, gridGap, className, ...props }, ref) {
+const Section = forwardRef(function Section({ as = 'section', children, title, separator = false, tone = 'base', align: textAlign = 'center', gridCols, gridGap, collapsible = false, open, onOpenChange, defaultOpen = false, className, ...props }, ref) {
     const Component = as;
+    const [internalOpen, setInternalOpen] = useState(() => collapsible ? defaultOpen : false);
+    const isControlled = collapsible && open !== undefined;
+    const isOpen = isControlled ? open : internalOpen;
+    const handleOpenChange = isControlled ? onOpenChange : setInternalOpen;
     const content = gridCols ? (_jsx(Grid, { cols: gridCols, gap: gridGap || GAP_VARIANT.MEDIUM, children: children })) : (children);
+    const titleElement = title &&
+        (collapsible ? (_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(Stack, { as: "div", direction: "row", align: "center", justify: "between", className: "dndev-section-title-trigger", children: [_jsx(Text, { as: "div", level: "h2", className: "dndev-section-title", children: title }), isOpen ? (_jsx(Minus, { className: "dndev-section-icon", "aria-hidden": "true" })) : (_jsx(Plus, { className: "dndev-section-icon", "aria-hidden": "true" }))] }) })) : (_jsx(Text, { as: "div", level: "h2", className: "dndev-section-title", children: title })));
+    const sectionContent = collapsible ? (_jsxs(CollapsiblePrimitive, { ...(isControlled
+            ? { open: isOpen, onOpenChange: handleOpenChange }
+            : { defaultOpen: defaultOpen, onOpenChange: handleOpenChange }), children: [titleElement, _jsx(CollapsibleContent, { className: "dndev-collapsible-content", children: content })] })) : (_jsxs(_Fragment, { children: [titleElement, content] }));
     return createElement(Component, {
         ref,
         'aria-label': props['aria-label'],
@@ -56,7 +74,7 @@ const Section = forwardRef(function Section({ as = 'section', children, title, s
         'data-tone': tone,
         'data-text-align': textAlign,
         ...props,
-    }, _jsxs(_Fragment, { children: [separator && _jsx(Separator, { variant: SEPARATOR_VARIANT.ACCENT }), _jsxs("div", { className: "dndev-section-content", children: [title && (_jsx(Text, { as: "div", level: "h2", className: "dndev-section-title", children: title })), content] })] }));
+    }, _jsxs(_Fragment, { children: [separator && _jsx(Separator, { variant: SEPARATOR_VARIANT.ACCENT }), _jsx("div", { className: "dndev-section-content", children: sectionContent })] }));
 });
 Section.displayName = 'Section';
 export default Section;

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

@@ -25,6 +25,8 @@ export interface SelectProps extends Omit<ComponentProps<typeof SelectRootPrimit
     isLoading?: boolean;
     /** Label for floating label - automatically floats when both label and placeholder are provided */
     label?: string;
+    /** Whether the field is required - shows asterisk indicator */
+    required?: boolean;
 }
 /**
  * Accessible select component built on Radix UI primitives.
@@ -46,6 +48,6 @@ export interface SelectProps extends Omit<ComponentProps<typeof SelectRootPrimit
  * @param {SelectProps} props - The props for the select
  * @returns {JSX.Element} The rendered select
  */
-declare const Select: ({ value, onValueChange, placeholder, options, trigger, disabled, isLoading, defaultValue, label, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const Select: ({ value, onValueChange, placeholder, options, trigger, disabled, isLoading, defaultValue, label, required, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element;
 export default Select;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Select/index.tsx"],"names":[],"mappings":"AAgBA,OAAO,mBAON,MAAM,mBAAmB,CAAC;AAE3B,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,YAAY;IAC3B,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,WAAY,SAAQ,IAAI,CACvC,cAAc,CAAC,OAAO,mBAAmB,CAAC,EAC1C,UAAU,CACX;IACC,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uBAAuB;IACvB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mGAAmG;IACnG,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,MAAM,GAAI,6GAWb,WAAW,4CAiIb,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Select/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,mBAON,MAAM,mBAAmB,CAAC;AAE3B,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,YAAY;IAC3B,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,WAAY,SAAQ,IAAI,CACvC,cAAc,CAAC,OAAO,mBAAmB,CAAC,EAC1C,UAAU,CACX;IACC,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uBAAuB;IACvB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mGAAmG;IACnG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,MAAM,GAAI,uHAYb,WAAW,4CAoHb,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/atomic/Select/index.js

@@ -12,7 +12,8 @@ import * as SelectRadix from '@radix-ui/react-select';
 import { Check, ChevronDown } from 'lucide-react';
 import { useState, useId } from 'react';
 import { cn } from '../../utils/helpers';
-import Label from '../Label';
+import { FloatingLabel } from '../Label';
+import ScrollArea from '../ScrollArea';
 import SelectRootPrimitive, { SelectTriggerPrimitive, SelectValuePrimitive, SelectContentPrimitive, SelectItemPrimitive, SelectLabelPrimitive, SelectSeparatorPrimitive, } from './SelectPrimitive';
 import './Select.css';
 /**
@@ -35,31 +36,19 @@ import './Select.css';
  * @param {SelectProps} props - The props for the select
  * @returns {JSX.Element} The rendered select
  */
-const Select = ({ value, onValueChange, placeholder = 'Select an option...', options = [], trigger, disabled, isLoading, defaultValue, label, ...props }) => {
+const Select = ({ value, onValueChange, placeholder = 'Select an option...', options = [], trigger, disabled, isLoading, defaultValue, label, required, ...props }) => {
     const id = useId();
     const [isOpen, setIsOpen] = useState(false);
     const hasLabel = !!label;
-    const customTrigger = trigger ? (_jsx(SelectTriggerPrimitive, { asChild: true, disabled: disabled, className: "dndev-input dndev-select-trigger", 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 })), _jsxs(SelectTriggerPrimitive, { id: id, className: "dndev-input dndev-select-trigger", disabled: disabled, children: [isLoading ? (_jsxs("div", { className: "dndev-select-loading-container", children: [_jsx("div", { className: "dndev-animate-spin dndev-select-loading-spinner" }), _jsx("span", { children: "Loading..." })] })) : (_jsx(SelectValuePrimitive, { placeholder: placeholder })), _jsx(SelectRadix.Icon, { asChild: true, children: _jsx(ChevronDown, {}) })] })] }));
-    return (_jsxs(SelectRootPrimitive, { value: value, onValueChange: onValueChange, defaultValue: defaultValue, disabled: disabled, onOpenChange: setIsOpen, ...props, children: [customTrigger, _jsx(SelectRadix.Portal, { children: _jsx(SelectContentPrimitive, { className: "dndev-floating dndev-menu-content dndev-z-tooltip dndev-select-content", position: "popper", side: "bottom", sideOffset: 4, align: "start", "data-glow": "blank", children: _jsx(SelectRadix.Viewport, { children: options.map((option) => {
-                            if (option.value === '__label__') {
-                                return (_jsx(SelectLabelPrimitive, { className: "dndev-menu-label", children: option.label }, option.label));
-                            }
-                            if (option.value === '__separator__') {
-                                return (_jsx(SelectSeparatorPrimitive, { className: "dndev-menu-separator" }, "separator"));
-                            }
-                            return (_jsxs(SelectItemPrimitive, { value: option.value, disabled: option.disabled, className: "dndev-interactive", "data-role": "menu-item", children: [option.content ? (option.content) : (_jsx(_Fragment, { children: _jsxs(SelectRadix.ItemText, { children: [_jsx("span", { children: option.label }), option.description && (_jsx("span", { className: "dndev-select-item-description", children: option.description }))] }) })), _jsx(SelectRadix.ItemIndicator, { className: "dndev-dropdown-menu-checkmark dndev-dropdown-menu-trailing", children: _jsx(Check, {}) })] }, option.value));
-                        }) }) }) })] }));
+    const customTrigger = trigger ? (_jsx(SelectTriggerPrimitive, { asChild: true, disabled: disabled, className: "dndev-input dndev-select-trigger", children: trigger })) : (_jsxs("div", { className: "dndev-relative", children: [hasLabel && (_jsx(FloatingLabel, { htmlFor: id, disabled: disabled, required: required, children: label })), _jsxs(SelectTriggerPrimitive, { id: id, className: "dndev-input dndev-select-trigger", disabled: disabled, children: [isLoading ? (_jsxs("div", { className: "dndev-select-loading-container", children: [_jsx("div", { className: "dndev-animate-spin dndev-select-loading-spinner" }), _jsx("span", { children: "Loading..." })] })) : (_jsx(SelectValuePrimitive, { placeholder: placeholder })), _jsx(SelectRadix.Icon, { asChild: true, children: _jsx(ChevronDown, {}) })] })] }));
+    return (_jsxs(SelectRootPrimitive, { value: value, onValueChange: onValueChange, defaultValue: defaultValue, disabled: disabled, onOpenChange: setIsOpen, ...props, children: [customTrigger, _jsx(SelectRadix.Portal, { children: _jsx(SelectContentPrimitive, { className: "dndev-floating dndev-menu-content dndev-z-tooltip dndev-select-content", position: "popper", side: "bottom", sideOffset: 4, align: "start", "data-glow": "blank", children: _jsx(SelectRadix.Viewport, { children: _jsx(ScrollArea, { className: "dndev-menu-scroll-area", end: true, children: options.map((option) => {
+                                if (option.value === '__label__') {
+                                    return (_jsx(SelectLabelPrimitive, { className: "dndev-menu-label", children: option.label }, option.label));
+                                }
+                                if (option.value === '__separator__') {
+                                    return (_jsx(SelectSeparatorPrimitive, { className: "dndev-menu-separator" }, "separator"));
+                                }
+                                return (_jsxs(SelectItemPrimitive, { value: option.value, disabled: option.disabled, className: "dndev-interactive", "data-role": "menu-item", children: [option.content ? (option.content) : (_jsx(_Fragment, { children: _jsxs(SelectRadix.ItemText, { children: [_jsx("span", { children: option.label }), option.description && (_jsx("span", { className: "dndev-select-item-description", children: option.description }))] }) })), _jsx(SelectRadix.ItemIndicator, { className: "dndev-dropdown-menu-checkmark dndev-dropdown-menu-trailing", children: _jsx(Check, {}) })] }, option.value));
+                            }) }) }) }) })] }));
 };
 export default Select;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Skeleton/index.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,wBAAwB;IACxB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IAChD,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC9E,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAuBD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,OAAiB,EACjB,IAAe,EACf,KAAK,EACL,MAAM,EACN,KAAS,EACT,YAAY,EAAE,SAA6B,EAC3C,GAAG,KAAK,EACT,EAAE,aAAa,2CA8Cf;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Skeleton/index.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,wBAAwB;IACxB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IAChD,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC9E,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAuBD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,OAAiB,EACjB,IAAe,EACf,KAAK,EACL,MAAM,EACN,KAAS,EACT,YAAY,EAAE,SAA6B,EAC3C,GAAG,KAAK,EACT,EAAE,aAAa,2CAiDf;AAED,eAAe,QAAQ,CAAC"}

package/dist/atomic/Skeleton/index.js

@@ -11,16 +11,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../utils/helpers';
 const sizePresets = {
     text: { height: 'var(--gap-md)', width: '100%' },
-    heading: { height: 'var(--icon-touch)', width: '75%' },
+    heading: { height: 'var(--icon-touch)', width: '100%' },
     avatar: {
         height: 'var(--icon-touch)',
         width: 'var(--icon-touch)',
         borderRadius: 'var(--radius-full)',
     },
-    button: { height: 'var(--icon-touch)', width: '6rem' },
+    button: { height: 'var(--icon-touch)', width: '100%' },
     card: { height: '8rem', width: '100%' },
     image: { height: '12rem', width: '100%' },
-    custom: {},
+    custom: { width: '100%' },
 };
 const animationClasses = {
     pulse: 'dndev-skeleton-pulse',
@@ -56,10 +56,13 @@ function Skeleton({ className, variant = 'pulse', size = 'custom', width, height
     const animationClass = animationClasses[variant];
     const style = {
         ...sizeStyles,
+        // Width: explicit width prop overrides preset, otherwise use preset (defaults to 100%)
         ...(width && { width: typeof width === 'number' ? `${width}px` : width }),
+        // Height: explicit height prop overrides preset
         ...(height && {
             height: typeof height === 'number' ? `${height}px` : height,
         }),
+        // User-provided style overrides everything
         ...props.style,
     };
     if (lines > 1) {

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

@@ -1,8 +1,9 @@
 /**
  * @fileoverview Switch component
  * @description Accessible switch component built on Radix UI primitives with semantic color variants.
+ * Supports optional labels for binary choices (e.g., Manual/Automatic).
  *
- * @version 0.0.1
+ * @version 0.0.2
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
@@ -14,21 +15,34 @@ import './Switch.css';
 export interface SwitchProps extends ComponentProps<typeof SwitchPrimitives.Root> {
     /** Semantic color variant */
     variant?: ControlVariant;
+    /** Label for unchecked state (e.g., "Manual") */
+    uncheckedLabel?: string;
+    /** Label for checked state (e.g., "Automatic") */
+    checkedLabel?: string;
 }
 /**
  * Accessible switch control with semantic color variants.
- * Supports smooth animations and full state management.
+ * Supports optional labels for binary choices with automatic active/inactive styling.
  *
  * @component
  * @example
  * ```tsx
+ * // Simple switch without labels
  * <Switch checked={enabled} onCheckedChange={setEnabled} variant="success" />
- * <Switch checked={dangerous} variant="destructive" />
+ *
+ * // Switch with labels (Manual/Automatic)
+ * <Switch
+ *   checked={isAutomatic}
+ *   onCheckedChange={setIsAutomatic}
+ *   uncheckedLabel="Manual"
+ *   checkedLabel="Automatic"
+ *   variant="muted"
+ * />
  * ```
  * @param {SwitchProps} props - The props for the switch
  * @returns {JSX.Element} The rendered switch
  */
-declare const Switch: ({ className, variant, ...props }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+declare const Switch: ({ className, variant, uncheckedLabel, checkedLabel, checked, ...props }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
 export default Switch;
 export { SwitchPrimitive, CONTROL_VARIANT as SWITCH_VARIANT };
 export type { ControlVariant as SwitchVariant };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Switch/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,gBAAgB,MAAM,wBAAwB,CAAC;AAE3D,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,eAAe,EAAE,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC7E,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,WAAY,SAAQ,cAAc,CACjD,OAAO,gBAAgB,CAAC,IAAI,CAC7B;IACC,6BAA6B;IAC7B,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAoBD;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,MAAM,GAAI,kCAAkC,WAAW,4CAY5D,CAAC;AAEF,eAAe,MAAM,CAAC;AACtB,OAAO,EAAE,eAAe,EAAE,eAAe,IAAI,cAAc,EAAE,CAAC;AAC9D,YAAY,EAAE,cAAc,IAAI,aAAa,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Switch/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,OAAO,KAAK,gBAAgB,MAAM,wBAAwB,CAAC;AAE3D,OAAO,EAAE,KAAK,cAAc,EAAkB,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC7E,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,WAAY,SAAQ,cAAc,CACjD,OAAO,gBAAgB,CAAC,IAAI,CAC7B;IACC,6BAA6B;IAC7B,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,iDAAiD;IACjD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAoBD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,MAAM,GAAI,yEAOb,WAAW,4CAyCb,CAAC;AAEF,eAAe,MAAM,CAAC;AACtB,OAAO,EAAE,eAAe,EAAE,eAAe,IAAI,cAAc,EAAE,CAAC;AAC9D,YAAY,EAAE,cAAc,IAAI,aAAa,EAAE,CAAC"}

package/dist/atomic/Switch/index.js

@@ -1,10 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // packages/components/src/atomic/Switch/index.tsx
 /**
  * @fileoverview Switch component
  * @description Accessible switch component built on Radix UI primitives with semantic color variants.
+ * Supports optional labels for binary choices (e.g., Manual/Automatic).
  *
- * @version 0.0.1
+ * @version 0.0.2
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
@@ -34,20 +35,38 @@ const switchVariants = cva('dndev-switch', {
 });
 /**
  * Accessible switch control with semantic color variants.
- * Supports smooth animations and full state management.
+ * Supports optional labels for binary choices with automatic active/inactive styling.
  *
  * @component
  * @example
  * ```tsx
+ * // Simple switch without labels
  * <Switch checked={enabled} onCheckedChange={setEnabled} variant="success" />
- * <Switch checked={dangerous} variant="destructive" />
+ *
+ * // Switch with labels (Manual/Automatic)
+ * <Switch
+ *   checked={isAutomatic}
+ *   onCheckedChange={setIsAutomatic}
+ *   uncheckedLabel="Manual"
+ *   checkedLabel="Automatic"
+ *   variant="muted"
+ * />
  * ```
  * @param {SwitchProps} props - The props for the switch
  * @returns {JSX.Element} The rendered switch
  */
-const Switch = ({ className, variant, ...props }) => {
+const Switch = ({ className, variant, uncheckedLabel, checkedLabel, checked, ...props }) => {
     const variantAttrs = getVariantDataAttrs({ variant });
-    return (_jsx(SwitchPrimitives.Root, { className: cn(switchVariants({ variant }), className), ...variantAttrs, ...props, children: _jsx(SwitchPrimitives.Thumb, { className: cn('dndev-switch-thumb') }) }));
+    const hasLabels = uncheckedLabel || checkedLabel;
+    const switchElement = (_jsx(SwitchPrimitives.Root, { className: cn(switchVariants({ variant }), className), ...variantAttrs, checked: checked, ...props, children: _jsx(SwitchPrimitives.Thumb, { className: cn('dndev-switch-thumb') }) }));
+    // If no labels, return just the switch
+    if (!hasLabels) {
+        return switchElement;
+    }
+    // With labels: render [uncheckedLabel] [Switch] [checkedLabel]
+    // Add data-checked attribute to container for CSS styling
+    const isChecked = checked ?? false;
+    return (_jsxs("div", { className: "dndev-switch-with-labels", "data-checked": isChecked ? 'true' : 'false', children: [uncheckedLabel && (_jsx("span", { className: "dndev-switch-label dndev-switch-label-unchecked", children: uncheckedLabel })), switchElement, checkedLabel && (_jsx("span", { className: "dndev-switch-label dndev-switch-label-checked", children: checkedLabel }))] }));
 };
 export default Switch;
 export { SwitchPrimitive, CONTROL_VARIANT as SWITCH_VARIANT };

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

@@ -3,9 +3,10 @@ import './Table.css';
 /**
  * Table column configuration
  *
- * LAYOUT EXCEPTION: The `width` property is a layout control, not a styling prop.
- * Similar to Grid's `cols`, column width defines the structural layout of data,
- * not superficial styling. This exception is documented in architecture docs.
+ * LAYOUT EXCEPTIONS:
+ * - `width`: Layout control for structural column layout (not styling)
+ * - `render`: Render prop pattern for custom cell content (modern children pattern)
+ *   This is the preferred way to handle dynamic cell content vs nested component composition.
  *
  * @version 0.0.1
  * @since 0.0.1
@@ -13,10 +14,16 @@ import './Table.css';
  */
 export interface TableColumn<T = any> {
     key: string;
-    title: string;
+    /** Column header - can be a string or ReactNode (e.g., Button, icon) */
+    title: string | ReactNode;
     dataIndex?: keyof T;
     sortable?: boolean;
     filterable?: boolean;
+    /**
+     * Render prop for custom cell content - RENDER PROP EXCEPTION
+     * Modern pattern for dynamic content generation. Preferred over nested component composition.
+     * Allows rendering custom components (buttons, inputs, etc.) within table cells.
+     */
     render?: (value: any, record: T, index: number) => ReactNode;
     /**
      * Column width - LAYOUT EXCEPTION
@@ -26,9 +33,10 @@ export interface TableColumn<T = any> {
     width?: string | number;
     /**
      * Text alignment - LAYOUT CONTROL
-     * Semantic alignment for data presentation (left for text, right for numbers).
+     * Semantic alignment for data presentation (start for text, end for numbers).
+     * Uses logical alignment for RTL support.
      */
-    align?: 'left' | 'center' | 'right';
+    align?: 'start' | 'center' | 'end';
 }
 /**
  * Data table component props
@@ -56,6 +64,8 @@ export interface DataTableProps<T = any> {
     pageSize?: number;
     /** Loading state */
     loading?: boolean;
+    /** Excel-like grid lines (borders on all cells) */
+    gridLines?: boolean;
     /** Callback when sorting changes */
     onSort?: (column: string, direction: 'asc' | 'desc') => void;
     /** Callback when selection changes */
@@ -98,7 +108,7 @@ declare function TableCaption({ className, ...props }: HTMLAttributes<HTMLTableC
  * @param {DataTableProps} props - The props for the data table
  * @returns {ReactNode} The rendered data table
  */
-declare const DataTable: <T = any>({ data, columns, sortable, selectable, searchable, filterable, pagination, pageSize, loading, onSort, onSelect, onSearch, onFilter, className, }: DataTableProps<T>) => ReactNode;
+declare const DataTable: <T = any>({ data, columns, sortable, selectable, searchable, filterable, pagination, pageSize, loading, gridLines, onSort, onSelect, onSearch, onFilter, className, }: DataTableProps<T>) => ReactNode;
 export default Table;
 export { TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, DataTable, };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Table/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Table/index.tsx"],"names":[],"mappings":"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"}

package/dist/atomic/Table/index.js

@@ -16,6 +16,7 @@ import Checkbox from '../Checkbox';
 import Input from '../Input';
 import Skeleton from '../Skeleton';
 import Stack from '../Stack';
+import Text from '../Text';
 import './Table.css';
 /**
  * Basic Table wrapper component.
@@ -65,7 +66,7 @@ function TableCaption({ className, ...props }) {
  * @param {DataTableProps} props - The props for the data table
  * @returns {ReactNode} The rendered data table
  */
-const DataTable = ({ data, columns, sortable = true, selectable = false, searchable = true, filterable = false, pagination = true, pageSize = 10, loading = false, onSort, onSelect, onSearch, onFilter, className, }) => {
+const DataTable = ({ data, columns, sortable = true, selectable = false, searchable = true, filterable = false, pagination = true, pageSize = 10, loading = false, gridLines = false, onSort, onSelect, onSearch, onFilter, className, }) => {
     const [sortColumn, setSortColumn] = useState('');
     const [sortDirection, setSortDirection] = useState('asc');
     const [searchQuery, setSearchQuery] = useState('');
@@ -129,8 +130,17 @@ const DataTable = ({ data, columns, sortable = true, selectable = false, searcha
     if (loading) {
         return (_jsxs(Stack, { gap: "medium", children: [_jsxs(Stack, { direction: "row", align: "center", justify: "between", children: [_jsx(Skeleton, { className: "dndev-h-touch dndev-w-16" }), _jsx(Skeleton, { className: "dndev-h-touch dndev-w-8" })] }), _jsx(Stack, { gap: "tight", children: Array.from({ length: 5 }, (_, i) => (_jsx(Skeleton, { className: "dndev-w-full dndev-h-touch" }, i))) })] }));
     }
-    return (_jsxs(Stack, { gap: "medium", children: [(searchable || filterable) && (_jsxs(Stack, { direction: "row", align: "center", justify: "between", gap: "tight", children: [searchable && (_jsxs(Stack, { direction: "row", align: "center", className: "dndev-relative dndev-flex-1 dndev-table-search-container", children: [_jsx(Search, { className: "dndev-table-search-icon" }), _jsx(Input, { placeholder: "Search...", value: searchQuery, onChange: (e) => handleSearch(e.target.value), className: "dndev-table-search-input" })] })), filterable && (_jsx(Button, { variant: BUTTON_VARIANT.OUTLINE, icon: Filter, children: "Filters" }))] })), _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [selectable && (_jsx(TableHead, { className: "dndev-w-touch", children: _jsx(Checkbox, { checked: selectedRows.length === paginatedData.length &&
-                                            paginatedData.length > 0, onCheckedChange: handleSelectAll, "aria-label": "Select all rows" }) })), columns.map((column) => (_jsx(TableHead, { className: cn(column.sortable && 'dndev-cursor-pointer'), "data-sortable": column.sortable, "data-align": column.align, style: { width: column.width }, onClick: () => column.sortable && handleSort(column.key), children: _jsxs(Stack, { direction: "row", align: "center", gap: "tight", children: [column.title, column.sortable &&
+    return (_jsxs(Stack, { gap: "medium", children: [(searchable || filterable) && (_jsxs(Stack, { direction: "row", align: "center", justify: "between", gap: "tight", children: [searchable && (_jsxs(Stack, { direction: "row", align: "center", className: "dndev-relative dndev-flex-1 dndev-table-search-container", children: [_jsx(Search, { className: "dndev-table-search-icon" }), _jsx(Input, { placeholder: "Search...", value: searchQuery, onChange: (e) => handleSearch(e.target.value), className: "dndev-table-search-input" })] })), filterable && (_jsx(Button, { variant: BUTTON_VARIANT.OUTLINE, icon: Filter, children: "Filters" }))] })), _jsxs(Table, { className: cn(gridLines && 'dndev-table-grid'), children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [selectable && (_jsx(TableHead, { className: "dndev-w-touch", children: _jsx(Checkbox, { checked: selectedRows.length === paginatedData.length &&
+                                            paginatedData.length > 0, onCheckedChange: handleSelectAll, "aria-label": "Select all rows" }) })), columns.map((column) => (_jsx(TableHead, { className: cn(column.sortable && 'dndev-cursor-pointer'), "data-sortable": column.sortable, "data-align": column.align, style: { width: column.width }, onClick: (e) => {
+                                        // Only sort if clicking on header, not on interactive elements (buttons, inputs, etc.)
+                                        if (column.sortable) {
+                                            const target = e.target;
+                                            const isInteractive = target.closest('button, input, a, [role="button"]');
+                                            if (!isInteractive) {
+                                                handleSort(column.key);
+                                            }
+                                        }
+                                    }, children: _jsxs(Stack, { direction: "row", align: "center", gap: "tight", children: [typeof column.title === 'string' ? (_jsx(Text, { level: "body", style: { paddingInline: 'var(--gap-sm)' }, children: column.title })) : (column.title), column.sortable &&
                                                 sortColumn === column.key &&
                                                 (sortDirection === 'asc' ? (_jsx(ChevronUp, { className: "dndev-size-md" })) : (_jsx(ChevronDown, { className: "dndev-size-md" })))] }) }, column.key)))] }) }), _jsx(TableBody, { children: paginatedData.map((row, index) => (_jsxs(TableRow, { children: [selectable && (_jsx(TableCell, { children: _jsx(Checkbox, { checked: selectedRows.includes(row), onCheckedChange: (checked) => handleSelectRow(row, !!checked), "aria-label": `Select row ${index + 1}` }) })), columns.map((column) => (_jsx(TableCell, { "data-align": column.align, children: column.render
                                         ? column.render(column.dataIndex ? row[column.dataIndex] : null, row, index)

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Tooltip/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAyB,EAGvB,eAAe,EAChB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAI/E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,KAAK,WAAW,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEvD,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,uEAAuE;IACvE,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B;AAsBD;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,OAAO,GAAI,6DAOd,YAAY,4CAuDd,CAAC;AAEF,eAAe,OAAO,CAAC;AACvB,OAAO,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Tooltip/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAyB,EAGvB,eAAe,EAChB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAI/E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,KAAK,WAAW,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEvD,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,uEAAuE;IACvE,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B;AA4BD;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,OAAO,GAAI,6DAOd,YAAY,4CA0Dd,CAAC;AAEF,eAAe,OAAO,CAAC;AACvB,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/atomic/Tooltip/index.js

@@ -27,8 +27,12 @@ function hasVisibleLabel(element) {
     if (!(label instanceof HTMLElement))
         return false;
     // Modern browsers: use checkVisibility() - avoids forced reflow
-    if ('checkVisibility' in label && typeof label.checkVisibility === 'function') {
-        return label.checkVisibility({ checkOpacity: true, checkVisibilityCSS: true });
+    if ('checkVisibility' in label &&
+        typeof label.checkVisibility === 'function') {
+        return label.checkVisibility({
+            checkOpacity: true,
+            checkVisibilityCSS: true,
+        });
     }
     // Fallback: check if element is in DOM and not display:none
     // offsetParent is null for hidden elements (still forces reflow but only in older browsers)

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/VideoPlayer/index.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;GAMG;AACH,MAAM,WAAW,WAAW;IAC1B,qBAAqB;IACrB,QAAQ,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,eAAe;IACf,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,qFAAqF;IACrF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;;;;;;;;;OAaG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA+JD,QAAA,MAAM,WAAW,GAAI,sGAWlB,gBAAgB,4CAwJlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/VideoPlayer/index.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;GAMG;AACH,MAAM,WAAW,WAAW;IAC1B,qBAAqB;IACrB,QAAQ,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,eAAe;IACf,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,qFAAqF;IACrF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;;;;;;;;;OAaG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA4JD,QAAA,MAAM,WAAW,GAAI,sGAWlB,gBAAgB,4CAwJlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/atomic/index.d.ts

@@ -47,7 +47,6 @@ export { default as Collapsible } from './Collapsible';
 export * from './Collapsible/CollapsiblePrimitive';
 export type { CollapsibleProps } from './Collapsible';
 export { default as Combobox, COMBOBOX_VARIANT } from './Combobox';
-export * from './Combobox/ComboboxPrimitive';
 export type { ComboboxProps, ComboboxOption, ComboboxVariant, } from './Combobox';
 export { default as Command } from './Command';
 export type { CommandProps, CommandItem, CommandGroup } from './Command';
@@ -79,9 +78,9 @@ export { default as InfiniteScroll } from './InfiniteScroll';
 export type { InfiniteScrollProps } from './InfiniteScroll';
 export { default as Input } from './Input';
 export type { InputProps } from './Input';
-export { default as Label } from './Label';
+export { default as Label, FloatingLabel } from './Label';
 export * from './Label/LabelPrimitive';
-export type { LabelProps } from './Label';
+export type { LabelProps, FloatingLabelProps } from './Label';
 export { default as List } from './List';
 export type { ListProps, ListItem } from './List';
 export { default as NavigationMenu } from './NavigationMenu';