@donotdev/components 0.0.11 → 0.0.12

package/dist/atomic/Label/FloatingLabel.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// packages/components/src/atomic/Label/FloatingLabel.tsx
+/**
+ * @fileoverview FloatingLabel component
+ * @description Shared floating label component for Input, PasswordInput, Select, and Combobox
+ *
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+import LabelPrimitive from './LabelPrimitive';
+import { cn } from '../../utils/helpers';
+import './Label.css';
+/**
+ * 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 function FloatingLabel({ htmlFor, children, disabled = false, truncate = false, required = false, }) {
+    return (_jsxs(LabelPrimitive, { htmlFor: htmlFor, className: "dndev-floating-label", "data-disabled": disabled ? 'true' : undefined, "data-truncate": truncate ? 'true' : undefined, children: [children, required && (_jsx("span", { style: {
+                    color: 'var(--destructive-foreground)',
+                    marginInlineStart: 'var(--gap-tight)',
+                }, "aria-hidden": "true", children: "*" }))] }));
+}
+export default FloatingLabel;

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

@@ -7,6 +7,7 @@
  * @author AMBROISE PARK Consulting
  */
 import { type LabelPrimitiveProps } from './LabelPrimitive';
+import { FloatingLabel, type FloatingLabelProps } from './FloatingLabel';
 import type { ComponentType, ReactNode } from 'react';
 export interface LabelProps extends LabelPrimitiveProps {
     /** Optional icon to display with the label */
@@ -24,6 +25,8 @@ export interface LabelProps extends LabelPrimitiveProps {
      * @default false
      */
     plain?: boolean;
+    /** Whether the field is required - shows asterisk indicator */
+    required?: boolean;
     children?: ReactNode;
 }
 /**
@@ -38,6 +41,7 @@ export interface LabelProps extends LabelPrimitiveProps {
  * @param {LabelProps} props - The props for the label
  * @returns {JSX.Element} The rendered label
  */
-declare const Label: ({ className, icon: Icon, iconEnd, plain, children, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+declare const Label: ({ className, icon: Icon, iconEnd, plain, required, children, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;
 export default Label;
+export { FloatingLabel, type FloatingLabelProps };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Label/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAuB,EAAE,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAG5E,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,WAAW,UAAW,SAAQ,mBAAmB;IACrD,8CAA8C;IAC9C,IAAI,CAAC,EAAE,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC7C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,KAAK,GAAI,+DAOZ,UAAU,4CAmBZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Label/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAuB,EAAE,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5E,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEzE,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,WAAW,UAAW,SAAQ,mBAAmB;IACrD,8CAA8C;IAC9C,IAAI,CAAC,EAAE,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC7C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,KAAK,GAAI,yEAQZ,UAAU,4CAgCZ,CAAC;AAEF,eAAe,KAAK,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,CAAC"}

package/dist/atomic/Label/index.js

@@ -10,6 +10,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import LabelPrimitive, {} from './LabelPrimitive';
 import { cn } from '../../utils/helpers';
+import { FloatingLabel } from './FloatingLabel';
 /**
  * Accessible label component built on Radix UI Label.
  * Supports icons and various label positions.
@@ -22,8 +23,13 @@ import { cn } from '../../utils/helpers';
  * @param {LabelProps} props - The props for the label
  * @returns {JSX.Element} The rendered label
  */
-const Label = ({ className, icon: Icon, iconEnd = false, plain = false, children, ...props }) => {
+const Label = ({ className, icon: Icon, iconEnd = false, plain = false, required = false, children, ...props }) => {
     const iconElement = Icon ? (_jsx(Icon, { className: "dndev-label-icon", "data-position": iconEnd ? 'trailing' : 'leading' })) : null;
-    return (_jsxs(LabelPrimitive, { className: cn('dndev-text-base dndev-label-base', className), "data-plain": plain ? 'true' : undefined, ...props, children: [!iconEnd && iconElement, children, iconEnd && iconElement] }));
+    const requiredIndicator = required ? (_jsx("span", { style: {
+            color: 'var(--destructive-foreground)',
+            marginInlineStart: 'var(--gap-tight)',
+        }, "aria-hidden": "true", children: "*" })) : null;
+    return (_jsxs(LabelPrimitive, { className: cn('dndev-text-base dndev-label-base', className), "data-plain": plain ? 'true' : undefined, ...props, children: [!iconEnd && iconElement, children, requiredIndicator, iconEnd && iconElement] }));
 };
 export default Label;
+export { FloatingLabel };

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

@@ -1,31 +1,31 @@
-import { type InputHTMLAttributes, type ReactNode } from 'react';
+import { type InputHTMLAttributes } from 'react';
 import './PasswordInput.css';
 export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
-    /** Whether to show the password toggle button */
-    showToggle?: boolean;
-    /** Custom toggle button content */
-    toggleButton?: ReactNode;
     /** Whether the password is currently visible */
     visible?: boolean;
     /** Callback when visibility changes */
     onVisibilityChange?: (visible: boolean) => void;
     /** Label for floating label - always shown small at top-left when provided */
     label?: string;
+    /** Whether the field is required - shows asterisk indicator */
+    required?: boolean;
 }
 /**
  * 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
@@ -34,12 +34,11 @@ export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputEl
  *   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
  */
-declare const PasswordInput: ({ className, showToggle, toggleButton, visible: controlledVisible, onVisibilityChange, label, value, onFocus, onBlur, ...props }: PasswordInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const PasswordInput: ({ className, visible: controlledVisible, onVisibilityChange, label, value, onFocus, onBlur, required, ...props }: PasswordInputProps) => import("react/jsx-runtime").JSX.Element;
 export default PasswordInput;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/PasswordInput/index.tsx"],"names":[],"mappings":"AAYA,OAAO,EAGL,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,qBAAqB,CAAC;AAE7B,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAC9C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,CACP;IACC,iDAAiD;IACjD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mCAAmC;IACnC,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,QAAA,MAAM,aAAa,GAAI,kIAWpB,kBAAkB,4CAyFpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/PasswordInput/index.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAmB,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAIlE,OAAO,qBAAqB,CAAC;AAE7B,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAC9C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,CACP;IACC,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,QAAA,MAAM,aAAa,GAAI,kHAUpB,kBAAkB,4CA+DpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

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.map

@@ -1 +1 @@
-{"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,8HAuGZ,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

@@ -60,11 +60,10 @@ const Section = forwardRef(function Section({ as = 'section', children, title, s
     const [internalOpen, setInternalOpen] = useState(() => collapsible ? defaultOpen : false);
     const isControlled = collapsible && open !== undefined;
     const isOpen = isControlled ? open : internalOpen;
-    const handleOpenChange = isControlled
-        ? onOpenChange
-        : setInternalOpen;
+    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 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] }));

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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"}