@donotdev/components 0.0.13 → 0.0.14

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

@@ -0,0 +1,45 @@
+import type { InputHTMLAttributes } from 'react';
+import './RangeInput.css';
+export interface RangeInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
+    /** Label for the range (single FloatingLabel wrapping both inputs) */
+    label?: string;
+    /** Placeholder for min input */
+    minPlaceholder?: string;
+    /** Placeholder for max input */
+    maxPlaceholder?: string;
+    /** Current min value */
+    minValue?: string;
+    /** Current max value */
+    maxValue?: string;
+    /** Actual min value from data (for auto-populate on focus) */
+    actualMin?: string | number;
+    /** Actual max value from data (for auto-populate on focus) */
+    actualMax?: string | number;
+    /** Change handler: (min, max) => void */
+    onChange: (min: string, max: string) => void;
+    /** Clear handler - required, X button always visible */
+    onClear: () => void;
+}
+/**
+ * RangeInput - Two-input component for min/max ranges
+ *
+ * Features:
+ * - Single FloatingLabel wrapping both inputs (when label provided)
+ * - Auto-populates with actual data min/max on focus if empty
+ * - Selects all text on focus
+ * - Clear button always visible (disabled when empty)
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <RangeInput
+ *   type="number"
+ *   label="Price"
+ *   onChange={(min, max) => setFilter({ min, max })}
+ *   onClear={() => setFilter({ min: '', max: '' })}
+ * />
+ * ```
+ */
+export declare function RangeInput({ type, label, minPlaceholder, maxPlaceholder, minValue, maxValue, actualMin, actualMax, min, max, onChange, onClear, ...props }: RangeInputProps): import("react/jsx-runtime").JSX.Element;
+export default RangeInput;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/RangeInput/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,kBAAkB,CAAC;AAE1B,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,UAAU,GAAG,OAAO,CACrB;IACC,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gCAAgC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,yCAAyC;IACzC,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,wDAAwD;IACxD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAe,EACf,KAAK,EACL,cAAsB,EACtB,cAAsB,EACtB,QAAa,EACb,QAAa,EACb,SAAS,EACT,SAAS,EACT,GAAG,EACH,GAAG,EACH,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACT,EAAE,eAAe,2CA+EjB;AAED,eAAe,UAAU,CAAC"}

package/dist/atomic/RangeInput/index.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// packages/components/src/atomic/RangeInput/index.tsx
+/**
+ * @fileoverview RangeInput component
+ * @description Two-input range component for min/max values (e.g., price ranges, date ranges)
+ *
+ * @version 0.0.2
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+import { X } from 'lucide-react';
+import Button from '../Button';
+import Input from '../Input';
+import { FloatingLabel } from '../Label';
+import Text from '../Text';
+import './RangeInput.css';
+/**
+ * RangeInput - Two-input component for min/max ranges
+ *
+ * Features:
+ * - Single FloatingLabel wrapping both inputs (when label provided)
+ * - Auto-populates with actual data min/max on focus if empty
+ * - Selects all text on focus
+ * - Clear button always visible (disabled when empty)
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <RangeInput
+ *   type="number"
+ *   label="Price"
+ *   onChange={(min, max) => setFilter({ min, max })}
+ *   onClear={() => setFilter({ min: '', max: '' })}
+ * />
+ * ```
+ */
+export function RangeInput({ type = 'number', label, minPlaceholder = 'Min', maxPlaceholder = 'Max', minValue = '', maxValue = '', actualMin, actualMax, min, max, onChange, onClear, ...props }) {
+    const handleMinFocus = (e) => {
+        e.target.select();
+        if (!minValue &&
+            actualMin !== null &&
+            actualMin !== undefined &&
+            actualMin !== '') {
+            onChange(String(actualMin), maxValue);
+        }
+    };
+    const handleMaxFocus = (e) => {
+        e.target.select();
+        if (!maxValue &&
+            actualMax !== null &&
+            actualMax !== undefined &&
+            actualMax !== '') {
+            onChange(minValue, String(actualMax));
+        }
+    };
+    const hasValue = !!(minValue || maxValue);
+    const inputs = (_jsxs(_Fragment, { children: [_jsx(Input, { type: type, placeholder: minPlaceholder, value: minValue, min: min, max: max, bare: true, onFocus: handleMinFocus, onChange: (e) => onChange(e.target.value, maxValue), ...props }), _jsx(Text, { level: "small", variant: "muted", className: "dndev-range-input-separator", children: "\u2013" }), _jsx(Input, { type: type, placeholder: maxPlaceholder, value: maxValue, min: min, max: max, bare: true, onFocus: handleMaxFocus, onChange: (e) => onChange(minValue, e.target.value), ...props }), _jsx(Button, { icon: X, variant: "ghost", display: "compact", onClick: onClear, disabled: !hasValue, "aria-label": "Clear", className: "dndev-range-input-clear" })] }));
+    if (label) {
+        return (_jsx(FloatingLabel, { label: label, className: "dndev-range-input", children: inputs }));
+    }
+    return _jsx("div", { className: "dndev-range-input", children: inputs });
+}
+export default RangeInput;

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":"AAkBA,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,4CAwHb,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Select/index.tsx"],"names":[],"mappings":"AAkBA,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,4CAyHb,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/atomic/Select/index.js

@@ -40,7 +40,7 @@ const Select = ({ value, onValueChange, placeholder = 'Select an option...', opt
     const id = useId();
     const [isOpen, setIsOpen] = useState(false);
     const hasLabel = !!label;
-    const triggerElement = (_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, {}) })] }));
+    const triggerElement = (_jsxs(SelectTriggerPrimitive, { id: id, className: "dndev-input dndev-select-trigger", disabled: disabled, "data-bare": hasLabel || undefined, 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, {}) })] }));
     const customTrigger = trigger ? (_jsx(SelectTriggerPrimitive, { asChild: true, disabled: disabled, className: "dndev-input dndev-select-trigger", children: trigger })) : hasLabel ? (_jsx(FloatingLabel, { htmlFor: id, label: label, disabled: disabled, required: required, children: triggerElement })) : (triggerElement);
     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__') {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Slider/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAI1D,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAGxD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,WAAY,SAAQ,cAAc,CACjD,OAAO,eAAe,CAAC,IAAI,CAC5B;IACC,6BAA6B;IAC7B,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,yBAAyB;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAoBD;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,MAAM,GAAI,kEAOb,WAAW,4CA2Bb,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/Slider/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAI1D,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAGxD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,WAAY,SAAQ,cAAc,CACjD,OAAO,eAAe,CAAC,IAAI,CAC5B;IACC,6BAA6B;IAC7B,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,yBAAyB;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAoBD;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,MAAM,GAAI,kEAOb,WAAW,4CAmCb,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/Slider/index.js

@@ -47,10 +47,13 @@ const sliderVariants = cva('dndev-slider', {
 const Slider = ({ className, variant, showValue, value, defaultValue, ...props }) => {
     const variantAttrs = getVariantDataAttrs({ variant });
     const currentValue = value ?? defaultValue;
-    const displayValue = Array.isArray(currentValue)
-        ? currentValue[0]
-        : currentValue;
-    return (_jsx("div", { className: "dndev-slider-container", children: _jsxs(SliderPrimitive.Root, { className: cn(sliderVariants({ variant }), className), value: value, defaultValue: defaultValue, ...variantAttrs, ...props, children: [_jsx(SliderPrimitive.Track, { className: cn('dndev-slider-track'), children: _jsx(SliderPrimitive.Range, { className: cn('dndev-slider-range') }) }), _jsx(SliderPrimitive.Thumb, { className: cn('dndev-slider-thumb'), children: showValue && displayValue !== undefined && (_jsx("span", { className: "dndev-slider-value", children: displayValue })) })] }) }));
+    // Handle array values (for range sliders) or single values
+    const values = Array.isArray(currentValue)
+        ? currentValue
+        : currentValue !== undefined
+            ? [currentValue]
+            : [];
+    return (_jsx("div", { className: "dndev-slider-container", children: _jsxs(SliderPrimitive.Root, { className: cn(sliderVariants({ variant }), className), value: value, defaultValue: defaultValue, ...variantAttrs, ...props, children: [_jsx(SliderPrimitive.Track, { className: cn('dndev-slider-track'), children: _jsx(SliderPrimitive.Range, { className: cn('dndev-slider-range') }) }), values.map((val, index) => (_jsx(SliderPrimitive.Thumb, { className: cn('dndev-slider-thumb'), children: showValue && val !== undefined && (_jsx("span", { className: "dndev-slider-value", children: val })) }, index)))] }) }));
 };
 export default Slider;
 export { SliderPrimitive, CONTROL_VARIANT as SLIDER_VARIANT };

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

@@ -18,6 +18,7 @@ export interface TableColumn<T = any> {
     title: string | ReactNode;
     dataIndex?: keyof T;
     sortable?: boolean;
+    /** Enable column header filter (Excel-style dropdown) */
     filterable?: boolean;
     /**
      * Render prop for custom cell content - RENDER PROP EXCEPTION
@@ -56,12 +57,26 @@ export interface DataTableProps<T = any> {
     selectable?: boolean;
     /** Enable search */
     searchable?: boolean;
-    /** Enable filtering (placeholder UI) */
-    filterable?: boolean;
     /** Enable pagination */
     pagination?: boolean;
+    /** Current page (1-indexed) */
+    currentPage?: number;
     /** Page size */
     pageSize?: number;
+    /** Total number of items (for server-side pagination) */
+    total?: number;
+    /** Callback when page changes */
+    onPageChange?: (page: number) => void;
+    /** Callback when page size changes */
+    onPageSizeChange?: (pageSize: number) => void;
+    /** Label for "Showing X to Y of Z" text (default: "Showing {{from}} to {{to}} of {{total}} results") */
+    showingLabel?: string;
+    /** Label for previous button (passed to Pagination) */
+    paginationPreviousLabel?: string;
+    /** Label for next button (passed to Pagination) */
+    paginationNextLabel?: string;
+    /** Placeholder for items per page selector (passed to Pagination) */
+    paginationItemsPerPagePlaceholder?: string;
     /** Loading state */
     loading?: boolean;
     /** Excel-like grid lines (borders on all cells) */
@@ -72,8 +87,6 @@ export interface DataTableProps<T = any> {
     onSelect?: (selectedRows: T[]) => void;
     /** Callback when search query changes */
     onSearch?: (query: string) => void;
-    /** Callback when filters change */
-    onFilter?: (filters: Record<string, any>) => void;
     /** Callback when a row is clicked */
     onRowClick?: (row: T) => void;
     /** Additional CSS classes */
@@ -110,7 +123,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, gridLines, onSort, onSelect, onSearch, onFilter, onRowClick, className, }: DataTableProps<T>) => ReactNode;
+declare const DataTable: <T = any>({ data, columns, sortable, selectable, searchable, pagination, currentPage: currentPageProp, pageSize: pageSizeProp, total: totalProp, onPageChange, onPageSizeChange, showingLabel, paginationPreviousLabel, paginationNextLabel, paginationItemsPerPagePlaceholder, loading, gridLines, onSort, onSelect, onSearch, onRowClick, 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":"AAYA,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAC;AASf,OAAO,aAAa,CAAC;AAErB;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,GAAG;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,wEAAwE;IACxE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAC7D;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC;AAED;;;;;;GAMG;AACH,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,GAAG;IACrC,iBAAiB;IACjB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,yBAAyB;IACzB,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wBAAwB;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mDAAmD;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,GAAG,MAAM,KAAK,IAAI,CAAC;IAC7D,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IACvC,yCAAyC;IACzC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,mCAAmC;IACnC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAClD,qCAAqC;IACrC,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,gBAAgB,CAAC,2CAMvE;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,uBAAuB,CAAC,2CAEzC;AAED,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,uBAAuB,CAAC,2CAEzC;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,uBAAuB,CAAC,2CAEzC;AAED,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,mBAAmB,CAAC,2CAErC;AAED,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,oBAAoB,CAAC,2CAEtC;AAED,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,oBAAoB,CAAC,2CAEtC;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,uBAAuB,CAAC,2CAIzC;AAGD;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,SAAS,GAAI,CAAC,GAAG,GAAG,EAAG,yKAiB1B,cAAc,CAAC,CAAC,CAAC,KAAG,SAqUtB,CAAC;AAEF,eAAe,KAAK,CAAC;AACrB,OAAO,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,SAAS,GACV,CAAC"}
+{"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

@@ -8,13 +8,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
-import { ChevronUp, ChevronDown, Search, Filter } from 'lucide-react';
+import { ChevronUp, ChevronDown, Search } from 'lucide-react';
 import { useState, useMemo, } from 'react';
 import { cn } from '../../utils/helpers';
 import Button, { BUTTON_VARIANT } from '../Button';
 import Checkbox from '../Checkbox';
 import Input from '../Input';
-import Skeleton from '../Skeleton';
+import Pagination from '../Pagination';
+import Select from '../Select';
 import Stack from '../Stack';
 import Text from '../Text';
 import './Table.css';
@@ -66,12 +67,38 @@ 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, gridLines = false, onSort, onSelect, onSearch, onFilter, onRowClick, className, }) => {
+const DataTable = ({ data, columns, sortable = true, selectable = false, searchable = true, pagination = true, currentPage: currentPageProp, pageSize: pageSizeProp, total: totalProp, onPageChange, onPageSizeChange, showingLabel, paginationPreviousLabel, paginationNextLabel, paginationItemsPerPagePlaceholder, loading = false, gridLines = false, onSort, onSelect, onSearch, onRowClick, className, }) => {
     const [sortColumn, setSortColumn] = useState('');
     const [sortDirection, setSortDirection] = useState('asc');
     const [searchQuery, setSearchQuery] = useState('');
     const [selectedRows, setSelectedRows] = useState([]);
-    const [currentPage, setCurrentPage] = useState(1);
+    // Page size state (for client-side pagination) - default 12
+    const [internalPageSize, setInternalPageSize] = useState(12);
+    const effectivePageSize = pageSizeProp ?? internalPageSize;
+    // Controlled vs uncontrolled pagination
+    const isControlledPagination = currentPageProp !== undefined && onPageChange !== undefined;
+    const [internalPage, setInternalPage] = useState(1);
+    const currentPage = isControlledPagination ? currentPageProp : internalPage;
+    const handlePageChange = (page) => {
+        if (isControlledPagination) {
+            onPageChange?.(page);
+        }
+        else {
+            setInternalPage(page);
+        }
+    };
+    // Handle page size change
+    const handlePageSizeChange = (newPageSize) => {
+        if (onPageSizeChange) {
+            // Controlled mode (server-side)
+            onPageSizeChange(newPageSize);
+        }
+        else {
+            // Uncontrolled mode (client-side) - update internal state
+            setInternalPageSize(newPageSize);
+            setInternalPage(1); // Reset to page 1
+        }
+    };
     // Filter and sort data
     const processedData = useMemo(() => {
         let filtered = data;
@@ -98,11 +125,19 @@ const DataTable = ({ data, columns, sortable = true, selectable = false, searcha
         }
         return filtered;
     }, [data, searchQuery, sortColumn, sortDirection, columns]);
-    // Pagination
-    const totalPages = Math.ceil(processedData.length / pageSize);
-    const paginatedData = pagination
-        ? processedData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
-        : processedData;
+    // Pagination: use server-side total if provided, otherwise client-side
+    const total = totalProp ?? processedData.length;
+    // Handle "All" case (pageSize = 0 means show all)
+    const isShowingAll = effectivePageSize === 0;
+    const pageSize = isShowingAll ? total : effectivePageSize;
+    const totalPages = isShowingAll ? 1 : Math.ceil(total / pageSize);
+    // For server-side pagination, data is already paginated - use as-is
+    // For client-side pagination, slice the data
+    const displayData = isControlledPagination && totalProp !== undefined
+        ? processedData // Server-side: data already paginated
+        : pagination && !isShowingAll
+            ? processedData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
+            : processedData;
     const handleSort = (column) => {
         if (!sortable)
             return;
@@ -112,7 +147,7 @@ const DataTable = ({ data, columns, sortable = true, selectable = false, searcha
         onSort?.(column, newDirection);
     };
     const handleSelectAll = (checked) => {
-        const newSelection = checked ? paginatedData : [];
+        const newSelection = checked ? displayData : [];
         setSelectedRows(newSelection);
         onSelect?.(newSelection);
     };
@@ -127,12 +162,12 @@ const DataTable = ({ data, columns, sortable = true, selectable = false, searcha
         setSearchQuery(query);
         onSearch?.(query);
     };
-    // Skeleton loading state - show real headers with simple skeleton rows
-    if (loading) {
-        return (_jsxs(Stack, { gap: "medium", children: [(searchable || filterable) && (_jsxs(Stack, { direction: "row", align: "center", justify: "between", gap: "tight", children: [searchable && (_jsx(Skeleton, { className: "dndev-h-touch dndev-flex-1" })), filterable && (_jsx(Skeleton, { className: "dndev-h-touch dndev-w-24" }))] })), _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: false, disabled: true, "aria-label": "Select all rows" }) })), columns.map((column) => (_jsx(TableHead, { className: cn(column.sortable && 'dndev-cursor-default'), "data-sortable": column.sortable, "data-align": column.align, style: { width: column.width }, 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 && (_jsx(ChevronUp, { className: "dndev-size-md dndev-opacity-30" }))] }) }, column.key)))] }) }), _jsx(TableBody, { children: Array.from({ length: 3 }, (_, rowIndex) => (_jsxs(TableRow, { children: [selectable && (_jsx(TableCell, { className: "dndev-w-touch", children: _jsx(Skeleton, { className: "dndev-h-4 dndev-w-4" }) })), columns.map((column) => (_jsx(TableCell, { "data-align": column.align, style: { width: column.width }, children: _jsx(Skeleton, { size: "text" }) }, `skeleton-cell-${rowIndex}-${column.key}`)))] }, `skeleton-row-${rowIndex}`))) })] })] }));
-    }
-    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) => {
+    // Industry standard pattern: When loading, pass empty rows to render actual structure
+    // Component will detect empty data and render skeleton bars in cells
+    const skeletonRows = Array.from({ length: 3 }, () => ({}));
+    const finalDisplayData = loading ? skeletonRows : displayData;
+    return (_jsxs(Stack, { gap: "medium", 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" })] })), _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 === displayData.length &&
+                                            displayData.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;
@@ -141,22 +176,47 @@ const DataTable = ({ data, columns, sortable = true, selectable = false, searcha
                                                 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, { onClick: (e) => {
-                                if (onRowClick) {
-                                    const target = e.target;
-                                    // Prevent row click if clicking interactive elements
-                                    const isInteractive = target.closest('button, a, input, [role="button"], label');
-                                    if (!isInteractive) {
-                                        onRowClick(row);
+                                    }, children: _jsxs(Stack, { direction: "row", align: "center", justify: column.align || 'start', gap: "tight", children: [typeof column.title === 'string' ? (_jsx(Text, { level: "body", children: column.title })) : (column.title), column.sortable &&
+                                                (sortColumn === column.key ? (sortDirection === 'asc' ? (_jsx(ChevronUp, { className: "dndev-size-md" })) : (_jsx(ChevronDown, { className: "dndev-size-md" }))) : (_jsx(ChevronUp, { className: "dndev-size-md", style: { opacity: 0.3 } })))] }) }, column.key)))] }) }), _jsx(TableBody, { children: finalDisplayData.map((row, index) => {
+                            const isSkeletonRow = loading &&
+                                Object.keys(row).length === 0;
+                            return (_jsxs(TableRow, { onClick: (e) => {
+                                    if (onRowClick && !isSkeletonRow) {
+                                        const target = e.target;
+                                        // Prevent row click if clicking interactive elements
+                                        const isInteractive = target.closest('button, a, input, [role="button"], label');
+                                        if (!isInteractive) {
+                                            onRowClick(row);
+                                        }
                                     }
-                                }
-                            }, className: cn(onRowClick && 'dndev-cursor-pointer dndev-hover-bg-muted'), 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)
-                                        : column.dataIndex
-                                            ? String(row[column.dataIndex] || '')
-                                            : '' }, column.key)))] }, index))) })] }), pagination && totalPages > 1 && (_jsxs(Stack, { direction: "row", align: "center", justify: "between", children: [_jsxs("div", { className: "dndev-text-sm dndev-text-muted", children: ["Showing ", (currentPage - 1) * pageSize + 1, " to", ' ', Math.min(currentPage * pageSize, processedData.length), " of", ' ', processedData.length, " results"] }), _jsxs(Stack, { direction: "row", align: "center", gap: "tight", children: [_jsx(Button, { variant: BUTTON_VARIANT.OUTLINE, onClick: () => setCurrentPage(Math.max(1, currentPage - 1)), disabled: currentPage === 1, children: "Previous" }), _jsxs("span", { className: "dndev-text-sm", children: ["Page ", currentPage, " of ", totalPages] }), _jsx(Button, { variant: BUTTON_VARIANT.OUTLINE, onClick: () => setCurrentPage(Math.min(totalPages, currentPage + 1)), disabled: currentPage === totalPages, children: "Next" })] })] }))] }));
+                                }, className: cn(isSkeletonRow && 'dndev-skeleton-row', onRowClick &&
+                                    !isSkeletonRow &&
+                                    'dndev-cursor-pointer dndev-hover-bg-muted'), children: [selectable && (_jsx(TableCell, { children: isSkeletonRow ? (_jsx("div", { className: "dndev-skeleton dndev-skeleton-pulse", style: {
+                                                width: 'var(--icon-md)',
+                                                height: 'var(--icon-md)',
+                                                borderRadius: 'var(--radius)',
+                                            }, "aria-hidden": "true" })) : (_jsx(Checkbox, { checked: selectedRows.includes(row), onCheckedChange: (checked) => handleSelectRow(row, !!checked), "aria-label": `Select row ${index + 1}` })) })), columns.map((column) => {
+                                        const cellValue = column.dataIndex
+                                            ? row[column.dataIndex]
+                                            : null;
+                                        const isEmpty = cellValue === null ||
+                                            cellValue === undefined ||
+                                            cellValue === '';
+                                        // Always call render function if it exists (for action columns, etc.)
+                                        // Let the render function decide what to show for empty/skeleton states
+                                        if (column.render) {
+                                            return (_jsx(TableCell, { "data-align": column.align, children: column.render(cellValue, row, index) }, column.key));
+                                        }
+                                        // For data columns: show skeleton only when loading AND empty
+                                        // When not loading but empty, show empty string (fallback)
+                                        return (_jsx(TableCell, { "data-align": column.align, children: isSkeletonRow ? (_jsx("div", { className: "dndev-skeleton dndev-skeleton-pulse", style: {
+                                                    height: 'var(--gap-md)',
+                                                    width: index % 2 === 0 ? '80%' : '60%',
+                                                    borderRadius: 'var(--radius)',
+                                                }, "aria-hidden": "true" })) : isEmpty ? ('' // Empty state - show nothing, not skeleton
+                                            ) : (String(cellValue || '')) }, column.key));
+                                    })] }, index));
+                        }) })] }), pagination && totalPages > 1 && (_jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: handlePageChange, pageSize: pageSize, total: total, onPageSizeChange: handlePageSizeChange, showingLabel: showingLabel, previousLabel: paginationPreviousLabel, nextLabel: paginationNextLabel, itemsPerPagePlaceholder: paginationItemsPerPagePlaceholder }))] }));
 };
 export default Table;
 export { TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, DataTable, };

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

@@ -1,5 +1,9 @@
 import type { ComponentPropsWithRef } from 'react';
 export interface TextareaProps extends ComponentPropsWithRef<'textarea'> {
+    /**
+     * Bare mode - no border/shadow (for use inside FloatingLabel or custom wrappers)
+     */
+    bare?: boolean;
 }
 /**
  * Textarea component with ref forwarding.

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Textarea/index.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,MAAM,WAAW,aAAc,SAAQ,qBAAqB,CAAC,UAAU,CAAC;CAAG;AAE3E;;GAEG;AACH,QAAA,MAAM,QAAQ,4HAMb,CAAC;AAIF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Textarea/index.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,MAAM,WAAW,aAAc,SAAQ,qBAAqB,CAAC,UAAU,CAAC;IACtE;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED;;GAEG;AACH,QAAA,MAAM,QAAQ,4HAWb,CAAC;AAIF,eAAe,QAAQ,CAAC"}

package/dist/atomic/Textarea/index.js

@@ -4,7 +4,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @fileoverview Textarea component
  * @description Accessible textarea component with mobile-friendly touch targets
  *
- * @version 0.0.1
+ * @version 0.0.2
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
@@ -13,8 +13,8 @@ import { cn } from '../../utils/helpers';
 /**
  * Textarea component with ref forwarding.
  */
-const Textarea = forwardRef(({ className, ...props }, ref) => {
-    return (_jsx("textarea", { ref: ref, className: cn('dndev-input', className), ...props }));
+const Textarea = forwardRef(({ className, bare, ...props }, ref) => {
+    return (_jsx("textarea", { ref: ref, className: cn('dndev-input', className), "data-bare": bare || undefined, ...props }));
 });
 Textarea.displayName = 'Textarea';
 export default Textarea;

package/dist/atomic/Toaster/Toast.types.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @fileoverview Toast Types
+ * @description Type definitions for toast notifications
+ *
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+/**
+ * Toast type variants
+ *
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info';
+//# sourceMappingURL=Toast.types.d.ts.map

package/dist/atomic/Toaster/Toast.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.types.d.ts","sourceRoot":"","sources":["../../../src/atomic/Toaster/Toast.types.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH;;;;;;GAMG;AACH,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC"}

package/dist/atomic/Toaster/Toast.types.js

@@ -0,0 +1,2 @@
+// packages/components/src/atomic/Toaster/Toast.types.ts
+export {};

package/dist/atomic/Toaster/ToastPrimitive.d.ts

@@ -8,7 +8,7 @@
  */
 import * as ToastPrimitives from '@radix-ui/react-toast';
 import { type VariantProps } from 'class-variance-authority';
-import type { ToastType } from '../../hooks/useToast';
+import type { ToastType } from './Toast.types';
 import type { ComponentProps, ReactElement } from 'react';
 declare const ToastProvider: import("react").FC<ToastPrimitives.ToastProviderProps>;
 declare function ToastViewport({ className, ...props }: ComponentProps<typeof ToastPrimitives.Viewport>): import("react/jsx-runtime").JSX.Element;

package/dist/atomic/Toaster/ToastPrimitive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastPrimitive.d.ts","sourceRoot":"","sources":["../../../src/atomic/Toaster/ToastPrimitive.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,eAAe,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1D,QAAA,MAAM,aAAa,wDAA2B,CAAC;AAE/C,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC,2CAOjD;AAED,QAAA,MAAM,aAAa;;8EAajB,CAAC;AAEH,UAAU,UACR,SACE,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAC3C,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AAE3D,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CA6BrE;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,2CAQ/C;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAyB9C;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAO9C;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,2CAOpD;AAED,eAAe,KAAK,CAAC;AACrB,OAAO,EACL,KAAK,UAAU,EACf,KAAK,kBAAkB,EACvB,aAAa,EACb,aAAa,EACb,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,WAAW,GACZ,CAAC"}
+{"version":3,"file":"ToastPrimitive.d.ts","sourceRoot":"","sources":["../../../src/atomic/Toaster/ToastPrimitive.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,eAAe,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1D,QAAA,MAAM,aAAa,wDAA2B,CAAC;AAE/C,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC,2CAOjD;AAED,QAAA,MAAM,aAAa;;8EAajB,CAAC;AAEH,UAAU,UACR,SACE,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAC3C,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AAE3D,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CA6BrE;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,2CAQ/C;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAyB9C;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAO9C;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,2CAOpD;AAED,eAAe,KAAK,CAAC;AACrB,OAAO,EACL,KAAK,UAAU,EACf,KAAK,kBAAkB,EACvB,aAAa,EACb,aAAa,EACb,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,WAAW,GACZ,CAAC"}

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

@@ -97,7 +97,17 @@ export interface VideoPlayerProps {
      * @default true
      */
     allowFullscreen?: boolean;
+    /**
+     * Aria label for the play button/thumbnail
+     * @default 'Click to watch video'
+     */
+    playButtonLabel?: string;
+    /**
+     * Aria label for loading state
+     * @default 'Loading video'
+     */
+    loadingLabel?: string;
 }
-declare const VideoPlayer: ({ url, trigger, thumbnail, eager, title, modal, aspectRatio, className, autoplay, allowFullscreen, }: VideoPlayerProps) => import("react/jsx-runtime").JSX.Element;
+declare const VideoPlayer: ({ url, trigger, thumbnail, eager, title, modal, aspectRatio, className, autoplay, allowFullscreen, playButtonLabel, loadingLabel, }: VideoPlayerProps) => import("react/jsx-runtime").JSX.Element;
 export default VideoPlayer;
 //# sourceMappingURL=index.d.ts.map

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;AA4JD,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":"AAqBA,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;IAC1B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA4JD,QAAA,MAAM,WAAW,GAAI,qIAalB,gBAAgB,4CAuJlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/atomic/VideoPlayer/index.js

@@ -9,9 +9,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @author AMBROISE PARK Consulting
  */
 import { Play } from 'lucide-react';
-import { useState, useEffect, useRef } from 'react';
-import { useIntersectionObserver } from '@donotdev/components';
-import { useTranslation } from '@donotdev/core';
+import { useState, useEffect } from 'react';
+import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
 import { cn } from '../../utils/helpers';
 import Button, { BUTTON_VARIANT } from '../Button';
 import Dialog from '../Dialog';
@@ -139,8 +138,7 @@ const getThumbnailUrl = (urlOrConfig) => {
  * Lazy-loads actual thumbnail on intersection
  */
 const VideoPlaceholder = ({ aspectRatio, className, }) => (_jsxs("svg", { className: cn('dndev-video-placeholder', className), viewBox: "0 0 16 9", style: { aspectRatio, width: '100%', display: 'block' }, preserveAspectRatio: "xMidYMid meet", "aria-hidden": "true", children: [_jsx("rect", { width: "16", height: "9", fill: "var(--muted)" }), _jsx("circle", { cx: "8", cy: "4.5", r: "1.5", fill: "var(--foreground)", opacity: "0.8" }), _jsx("path", { d: "M7 3.5L7 5.5L9 4.5Z", fill: "var(--background)" })] }));
-const VideoPlayer = ({ url = { platform: 'youtube', id: 'dQw4w9WgXcQ' }, trigger, thumbnail, eager = false, title = 'Video', modal = true, aspectRatio = '16/9', className, autoplay = false, allowFullscreen = true, }) => {
-    const { t } = useTranslation(['dndev']);
+const VideoPlayer = ({ url = { platform: 'youtube', id: 'dQw4w9WgXcQ' }, trigger, thumbnail, eager = false, title = 'Video', modal = true, aspectRatio = '16/9', className, autoplay = false, allowFullscreen = true, playButtonLabel = 'Click to watch video', loadingLabel = 'Loading video', }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [isLoaded, setIsLoaded] = useState(false);
     const [iframeReady, setIframeReady] = useState(false);
@@ -176,17 +174,17 @@ const VideoPlayer = ({ url = { platform: 'youtube', id: 'dQw4w9WgXcQ' }, trigger
                         e.preventDefault();
                         setIsLoaded(true);
                     }
-                }, className: cn('dndev-video-thumbnail', className), style: { aspectRatio }, "aria-label": t('video.clickToWatch', 'Click to watch video'), children: [thumbnailLoaded && thumbnailUrl ? (_jsx("img", { src: thumbnailUrl, alt: title, loading: "eager", fetchPriority: "high", decoding: "async" })) : (_jsx(VideoPlaceholder, { aspectRatio: aspectRatio })), _jsx("div", { className: "dndev-video-play-overlay", children: _jsx(Play, { className: "dndev-video-play-icon" }) })] }));
+                }, className: cn('dndev-video-thumbnail', className), style: { aspectRatio }, "aria-label": playButtonLabel, children: [thumbnailLoaded && thumbnailUrl ? (_jsx("img", { src: thumbnailUrl, alt: title, loading: "eager", fetchPriority: "high", decoding: "async" })) : (_jsx(VideoPlaceholder, { aspectRatio: aspectRatio })), _jsx("div", { className: "dndev-video-play-overlay", children: _jsx(Play, { className: "dndev-video-play-icon" }) })] }));
         }
         // Clicked - show iframe with thumbnail overlay until iframe loads
         return (_jsxs("div", { className: cn('dndev-video-container', className), style: { aspectRatio, position: 'relative' }, children: [videoFrame, !iframeReady && thumbnailUrl && (_jsxs("div", { className: "dndev-video-thumbnail dndev-video-loading-overlay", style: {
                         position: 'absolute',
                         inset: 0,
                         pointerEvents: 'none',
-                    }, children: [_jsx("img", { src: thumbnailUrl, alt: title, loading: "eager", decoding: "async" }), _jsx("div", { className: "dndev-video-play-overlay dndev-video-loading", children: _jsx(Spinner, { "aria-label": t('video.loading', 'Loading video') }) })] }))] }));
+                    }, children: [_jsx("img", { src: thumbnailUrl, alt: title, loading: "eager", decoding: "async" }), _jsx("div", { className: "dndev-video-play-overlay dndev-video-loading", children: _jsx(Spinner, { "aria-label": loadingLabel }) })] }))] }));
     }
     // Modal mode - lazy-load iframe when modal opens
-    const defaultTrigger = (_jsxs("button", { ref: thumbnailRef, type: "button", className: "dndev-video-thumbnail", style: { aspectRatio }, "aria-label": t('video.clickToWatch', 'Click to watch video'), children: [thumbnailLoaded && thumbnailUrl ? (_jsx("img", { src: thumbnailUrl, alt: title, loading: "eager", fetchPriority: "high", decoding: "async" })) : (_jsx(VideoPlaceholder, { aspectRatio: aspectRatio })), _jsx("div", { className: "dndev-video-play-overlay", children: _jsx(Play, { className: "dndev-video-play-icon" }) })] }));
+    const defaultTrigger = (_jsxs("button", { ref: thumbnailRef, type: "button", className: "dndev-video-thumbnail", style: { aspectRatio }, "aria-label": playButtonLabel, children: [thumbnailLoaded && thumbnailUrl ? (_jsx("img", { src: thumbnailUrl, alt: title, loading: "eager", fetchPriority: "high", decoding: "async" })) : (_jsx(VideoPlaceholder, { aspectRatio: aspectRatio })), _jsx("div", { className: "dndev-video-play-overlay", children: _jsx(Play, { className: "dndev-video-play-icon" }) })] }));
     return (_jsx(Dialog, { trigger: trigger || defaultTrigger, title: title, open: isOpen, onOpenChange: setIsOpen, showClose: true, className: "dndev-video-dialog", children: videoFrame }));
 };
 export default VideoPlayer;

package/dist/atomic/index.d.ts

@@ -105,6 +105,8 @@ export type { ProgressProps } from './Progress';
 export { default as RadioGroup } from './RadioGroup';
 export * from './RadioGroup/RadioGroupPrimitive';
 export type { RadioOption, RadioGroupProps, RadioGroupVariant, } from './RadioGroup';
+export { default as RangeInput } from './RangeInput';
+export type { RangeInputProps } from './RangeInput';
 export { default as ScrollArea, ScrollBar } from './ScrollArea';
 export * from './ScrollArea/ScrollAreaPrimitive';
 export type { ScrollAreaProps, ScrollBarProps } from './ScrollArea';