@donotdev/components 0.0.12 → 0.0.14

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, 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,11 +162,12 @@ const DataTable = ({ data, columns, sortable = true, selectable = false, searcha
         setSearchQuery(query);
         onSearch?.(query);
     };
-    if (loading) {
-        return (_jsxs(Stack, { gap: "medium", children: [_jsxs(Stack, { direction: "row", align: "center", justify: "between", children: [_jsx(Skeleton, { className: "dndev-h-touch dndev-w-16" }), _jsx(Skeleton, { className: "dndev-h-touch dndev-w-8" })] }), _jsx(Stack, { gap: "tight", children: Array.from({ length: 5 }, (_, i) => (_jsx(Skeleton, { className: "dndev-w-full dndev-h-touch" }, i))) })] }));
-    }
-    return (_jsxs(Stack, { gap: "medium", children: [(searchable || filterable) && (_jsxs(Stack, { direction: "row", align: "center", justify: "between", gap: "tight", children: [searchable && (_jsxs(Stack, { direction: "row", align: "center", className: "dndev-relative dndev-flex-1 dndev-table-search-container", children: [_jsx(Search, { className: "dndev-table-search-icon" }), _jsx(Input, { placeholder: "Search...", value: searchQuery, onChange: (e) => handleSearch(e.target.value), className: "dndev-table-search-input" })] })), filterable && (_jsx(Button, { variant: BUTTON_VARIANT.OUTLINE, icon: Filter, children: "Filters" }))] })), _jsxs(Table, { 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;
@@ -140,13 +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, { 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" })] })] }))] }));
+                                    }, 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(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/Tabs/TabsPrimitive.d.ts

@@ -7,7 +7,7 @@
  * @author AMBROISE PARK Consulting
  */
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { type ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 declare const TabsPrimitiveRoot: import("react").ForwardRefExoticComponent<TabsPrimitive.TabsProps & import("react").RefAttributes<HTMLDivElement>>;
 declare const TabsListPrimitive: ({ className, ...props }: ComponentProps<typeof TabsPrimitive.List>) => import("react/jsx-runtime").JSX.Element;
 declare const TabsTriggerPrimitive: ({ className, ...props }: ComponentProps<typeof TabsPrimitive.Trigger>) => import("react/jsx-runtime").JSX.Element;

package/dist/atomic/Tabs/TabsPrimitive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsPrimitive.d.ts","sourceRoot":"","sources":["../../../src/atomic/Tabs/TabsPrimitive.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,QAAA,MAAM,iBAAiB,oHAAqB,CAAC;AAE7C,QAAA,MAAM,iBAAiB,GAAI,yBAGxB,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,4CAE3C,CAAC;AAEF,QAAA,MAAM,oBAAoB,GAAI,yBAG3B,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,4CAM9C,CAAC;AAEF,KAAK,yBAAyB,GAAG,cAAc,CAC7C,OAAO,aAAa,CAAC,OAAO,CAC7B,GAAG;IACF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,oBAAoB,GAAI,qCAI3B,yBAAyB,4CAM3B,CAAC;AAEF,eAAe,iBAAiB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"TabsPrimitive.d.ts","sourceRoot":"","sources":["../../../src/atomic/Tabs/TabsPrimitive.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AAItD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,QAAA,MAAM,iBAAiB,oHAAqB,CAAC;AAE7C,QAAA,MAAM,iBAAiB,GAAI,yBAGxB,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,4CAE3C,CAAC;AAEF,QAAA,MAAM,oBAAoB,GAAI,yBAG3B,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,4CAM9C,CAAC;AAEF,KAAK,yBAAyB,GAAG,cAAc,CAC7C,OAAO,aAAa,CAAC,OAAO,CAC7B,GAAG;IACF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,oBAAoB,GAAI,qCAI3B,yBAAyB,4CAM3B,CAAC;AAEF,eAAe,iBAAiB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/atomic/Tabs/TabsPrimitive.js

@@ -9,7 +9,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @author AMBROISE PARK Consulting
  */
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import {} from 'react';
 import { cn } from '../../utils/helpers';
 const TabsPrimitiveRoot = TabsPrimitive.Root;
 const TabsListPrimitive = ({ className, ...props }) => (_jsx(TabsPrimitive.List, { className: cn(className), ...props }));

package/dist/atomic/Tabs/index.js

@@ -10,8 +10,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { cva } from 'class-variance-authority';
 import TabsPrimitive, { TabsListPrimitive, TabsTriggerPrimitive, TabsContentPrimitive, } from './TabsPrimitive';
-import { cn, getVariantDataAttrs } from '../../utils/helpers';
 import { THEME_VARIANT } from '../../utils/constants';
+import { cn, getVariantDataAttrs } from '../../utils/helpers';
 const tabsVariants = cva('', {
     variants: {
         variant: {

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

@@ -1,3 +1,11 @@
+/**
+ * @fileoverview Tag component
+ * @description Interactive tag component for categorization and filters
+ *
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
 import { type VariantProps } from 'class-variance-authority';
 import './Tag.css';
 import type { HTMLAttributes, ReactNode } from 'react';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Tag/index.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,OAAO,WAAW,CAAC;AAEnB,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAEX,QAAA,MAAM,WAAW;;;8EAiBf,CAAC;AAEH,MAAM,WAAW,QACf,SACE,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,SAAS,CAAC,EAChD,YAAY,CAAC,OAAO,WAAW,CAAC;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,GAAG,GAAI,4FAUV,QAAQ,4CAkCV,CAAC;AAEF,eAAe,GAAG,CAAC;AACnB,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Tag/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,OAAO,WAAW,CAAC;AAEnB,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAEX,QAAA,MAAM,WAAW;;;8EAiBf,CAAC;AAEH,MAAM,WAAW,QACf,SACE,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,SAAS,CAAC,EAChD,YAAY,CAAC,OAAO,WAAW,CAAC;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,GAAG,GAAI,4FAUV,QAAQ,4CAkCV,CAAC;AAEF,eAAe,GAAG,CAAC;AACnB,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/atomic/Tag/index.js

@@ -8,8 +8,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
-import { X } from 'lucide-react';
 import { cva } from 'class-variance-authority';
+import { X } from 'lucide-react';
 import { cn } from '../../utils/helpers';
 import Icon from '../Icons/Icon';
 import './Tag.css';

package/dist/atomic/Text/index.js

@@ -9,8 +9,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @author AMBROISE PARK Consulting
  */
 import { createElement, forwardRef, } from 'react';
-import { cn, getVariantDataAttrs } from '../../utils/helpers';
 import { THEME_VARIANT } from '../../utils/constants';
+import { cn, getVariantDataAttrs } from '../../utils/helpers';
 /**
  * Text variant constants - THEME_VARIANT + CODE (Text-specific)
  * Color variants for text styling via data-variant attribute

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":"AAcA,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/ToggleGroup/ToggleGroupPrimitive.d.ts

@@ -8,7 +8,7 @@
  * @author AMBROISE PARK Consulting
  */
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
-import { type ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 export type ToggleGroupPrimitiveProps = ComponentProps<typeof ToggleGroupPrimitive.Root> & {
     'data-variant'?: string;
     'data-size'?: string;

package/dist/atomic/ToggleGroup/ToggleGroupPrimitive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupPrimitive.d.ts","sourceRoot":"","sources":["../../../src/atomic/ToggleGroup/ToggleGroupPrimitive.tsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAchE,MAAM,MAAM,yBAAyB,GAAG,cAAc,CACpD,OAAO,oBAAoB,CAAC,IAAI,CACjC,GAAG;IACF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,iBAAS,6BAA6B,CAAC,EACrC,SAAS,EACT,QAAQ,EACR,cAAc,EAAE,WAAW,EAC3B,WAAW,EAAE,QAAQ,EACrB,GAAG,KAAK,EACT,EAAE,yBAAyB,2CAkB3B;AAED,MAAM,WAAW,6BAA8B,SAAQ,cAAc,CACnE,OAAO,oBAAoB,CAAC,IAAI,CACjC;IACC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,iBAAS,wBAAwB,CAAC,EAChC,SAAS,EACT,QAAQ,EACR,cAAc,EAAE,WAAW,EAC3B,WAAW,EAAE,QAAQ,EACrB,GAAG,KAAK,EACT,EAAE,6BAA6B,2CAe/B;AAED,eAAe,6BAA6B,CAAC;AAC7C,OAAO,EAAE,wBAAwB,EAAE,CAAC"}
+{"version":3,"file":"ToggleGroupPrimitive.d.ts","sourceRoot":"","sources":["../../../src/atomic/ToggleGroup/ToggleGroupPrimitive.tsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AAKrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAY5C,MAAM,MAAM,yBAAyB,GAAG,cAAc,CACpD,OAAO,oBAAoB,CAAC,IAAI,CACjC,GAAG;IACF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,iBAAS,6BAA6B,CAAC,EACrC,SAAS,EACT,QAAQ,EACR,cAAc,EAAE,WAAW,EAC3B,WAAW,EAAE,QAAQ,EACrB,GAAG,KAAK,EACT,EAAE,yBAAyB,2CAkB3B;AAED,MAAM,WAAW,6BAA8B,SAAQ,cAAc,CACnE,OAAO,oBAAoB,CAAC,IAAI,CACjC;IACC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,iBAAS,wBAAwB,CAAC,EAChC,SAAS,EACT,QAAQ,EACR,cAAc,EAAE,WAAW,EAC3B,WAAW,EAAE,QAAQ,EACrB,GAAG,KAAK,EACT,EAAE,6BAA6B,2CAe/B;AAED,eAAe,6BAA6B,CAAC;AAC7C,OAAO,EAAE,wBAAwB,EAAE,CAAC"}

package/dist/atomic/Tooltip/TooltipPrimitive.d.ts

@@ -7,7 +7,7 @@
  * @author AMBROISE PARK Consulting
  */
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { type ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 declare const TooltipProvider: import("react").FC<TooltipPrimitive.TooltipProviderProps>;
 declare const TooltipPrimitiveComponent: import("react").FC<TooltipPrimitive.TooltipProps>;
 declare const TooltipTrigger: import("react").ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"TooltipPrimitive.d.ts","sourceRoot":"","sources":["../../../src/atomic/Tooltip/TooltipPrimitive.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,QAAA,MAAM,eAAe,2DAA4B,CAAC;AAClD,QAAA,MAAM,yBAAyB,mDAAwB,CAAC;AACxD,QAAA,MAAM,cAAc,oIAA2B,CAAC;AAEhD,UAAU,mBAAoB,SAAQ,cAAc,CAClD,OAAO,gBAAgB,CAAC,OAAO,CAChC;IACC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,UAAc,EACd,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAarB;AAED,eAAe,yBAAyB,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"TooltipPrimitive.d.ts","sourceRoot":"","sources":["../../../src/atomic/Tooltip/TooltipPrimitive.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAI5D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,QAAA,MAAM,eAAe,2DAA4B,CAAC;AAClD,QAAA,MAAM,yBAAyB,mDAAwB,CAAC;AACxD,QAAA,MAAM,cAAc,oIAA2B,CAAC;AAEhD,UAAU,mBAAoB,SAAQ,cAAc,CAClD,OAAO,gBAAgB,CAAC,OAAO,CAChC;IACC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,UAAc,EACd,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAarB;AAED,eAAe,yBAAyB,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}

package/dist/atomic/Tooltip/TooltipPrimitive.js

@@ -9,7 +9,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @author AMBROISE PARK Consulting
  */
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import {} from 'react';
 import { cn } from '../../utils/helpers';
 const TooltipProvider = TooltipPrimitive.Provider;
 const TooltipPrimitiveComponent = TooltipPrimitive.Root;

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

@@ -1,14 +1,3 @@
-/**
- * @fileoverview Tooltip component
- * @description Accessible tooltip built on Radix UI primitives.
- *
- * Positioning: prop > CSS --tooltip-side > 'bottom'
- * Smart hiding: Tooltip auto-hides when trigger has visible label
- *
- * @version 0.0.6
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
 import { TooltipProvider } from './TooltipPrimitive';
 import { type FloatingVariant } from '../../utils/constants';
 import type { ReactNode } from 'react';
@@ -28,6 +17,11 @@ export interface TooltipProps {
  * Auto-hides when trigger has visible label (e.g., button not in compact mode).
  * Only shows tooltip when label is hidden, avoiding redundant information.
  *
+ * Positioning priority:
+ * 1. Explicit `side` prop
+ * 2. CSS `--tooltip-side` property (set by container like Sidebar)
+ * 3. Default 'bottom'
+ *
  * @example
  * // Explicit side
  * <Tooltip content="Help" side="right">...</Tooltip>
@@ -36,7 +30,7 @@ export interface TooltipProps {
  * // Container-aware (sidebar sets --tooltip-side: right)
  * <Tooltip content="Help">...</Tooltip>
  */
-declare const Tooltip: ({ content, children, side, align, delayDuration, variant, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+declare function Tooltip({ content, children, side, align, delayDuration, variant, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
 export default Tooltip;
 export { TooltipProvider };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Tooltip/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAyB,EAGvB,eAAe,EAChB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAI/E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,KAAK,WAAW,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEvD,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,uEAAuE;IACvE,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B;AA4BD;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,OAAO,GAAI,6DAOd,YAAY,4CA0Dd,CAAC;AAEF,eAAe,OAAO,CAAC;AACvB,OAAO,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Tooltip/index.tsx"],"names":[],"mappings":"AAiBA,OAAyB,EAGvB,eAAe,EAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAG/E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,KAAK,WAAW,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEvD,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,uEAAuE;IACvE,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B;AAYD;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,OAAO,CAAC,EACf,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,KAAgB,EAChB,aAAmB,EACnB,OAAO,GACR,EAAE,YAAY,2CAqDd;AAED,eAAe,OAAO,CAAC;AACvB,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/atomic/Tooltip/index.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // packages/components/src/atomic/Tooltip/index.tsx
 /**
@@ -7,36 +8,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Positioning: prop > CSS --tooltip-side > 'bottom'
  * Smart hiding: Tooltip auto-hides when trigger has visible label
  *
- * @version 0.0.6
+ * @version 0.0.7
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
+import { useCallback, useRef, useState } from 'react';
 import TooltipPrimitive, { TooltipTrigger, TooltipContent, TooltipProvider, } from './TooltipPrimitive';
 import { FLOATING_VARIANT } from '../../utils/constants';
 import { getVariantDataAttrs } from '../../utils/helpers';
-import { useCallback, useRef, useState } from 'react';
 /**
  * Check if trigger element has a visible label.
- * Uses checkVisibility() API when available (lighter than offsetWidth),
- * falls back to checking if label has content and isn't hidden.
+ * Returns true if label exists and has width (not hidden).
  */
 function hasVisibleLabel(element) {
     if (!element)
         return false;
     const label = element.querySelector('.dndev-interactive-label');
-    if (!(label instanceof HTMLElement))
-        return false;
-    // Modern browsers: use checkVisibility() - avoids forced reflow
-    if ('checkVisibility' in label &&
-        typeof label.checkVisibility === 'function') {
-        return label.checkVisibility({
-            checkOpacity: true,
-            checkVisibilityCSS: true,
-        });
-    }
-    // Fallback: check if element is in DOM and not display:none
-    // offsetParent is null for hidden elements (still forces reflow but only in older browsers)
-    return label.offsetParent !== null;
+    return label instanceof HTMLElement && label.offsetWidth > 0;
 }
 /**
  * Accessible tooltip component.
@@ -44,6 +32,11 @@ function hasVisibleLabel(element) {
  * Auto-hides when trigger has visible label (e.g., button not in compact mode).
  * Only shows tooltip when label is hidden, avoiding redundant information.
  *
+ * Positioning priority:
+ * 1. Explicit `side` prop
+ * 2. CSS `--tooltip-side` property (set by container like Sidebar)
+ * 3. Default 'bottom'
+ *
  * @example
  * // Explicit side
  * <Tooltip content="Help" side="right">...</Tooltip>
@@ -52,7 +45,7 @@ function hasVisibleLabel(element) {
  * // Container-aware (sidebar sets --tooltip-side: right)
  * <Tooltip content="Help">...</Tooltip>
  */
-const Tooltip = ({ content, children, side, align = 'center', delayDuration = 300, variant, }) => {
+function Tooltip({ content, children, side, align = 'center', delayDuration = 300, variant, }) {
     const [mounted, setMounted] = useState(false);
     const [cssSide, setCssSide] = useState(null);
     const [open, setOpen] = useState(false);
@@ -71,13 +64,11 @@ const Tooltip = ({ content, children, side, align = 'center', delayDuration = 30
     }, []);
     // Handle open change - skip if label is visible
     const handleOpenChange = useCallback((nextOpen) => {
-        if (!mounted)
-            return; // SSR: no-op
         if (nextOpen && hasVisibleLabel(triggerElement.current)) {
             return; // Label visible, don't show tooltip
         }
         setOpen(nextOpen);
-    }, [mounted]);
+    }, []);
     // Priority: prop > CSS > 'bottom'
     const finalSide = side ?? cssSide ?? 'bottom';
     const variantAttrs = getVariantDataAttrs({
@@ -85,8 +76,7 @@ const Tooltip = ({ content, children, side, align = 'center', delayDuration = 30
     });
     // Always pass open/onOpenChange to avoid controlled/uncontrolled switch
     // During SSR (!mounted), open=false keeps it controlled but closed
-    // Wrap with TooltipProvider for SSR/static generation safety (nesting is fine)
     return (_jsx(TooltipProvider, { children: _jsxs(TooltipPrimitive, { delayDuration: delayDuration, open: mounted ? open : false, onOpenChange: handleOpenChange, children: [_jsx(TooltipTrigger, { asChild: true, ref: triggerRef, children: children }), mounted && (_jsx(TooltipContent, { side: finalSide, align: align, ...variantAttrs, children: content }))] }) }));
-};
+}
 export default Tooltip;
 export { TooltipProvider };

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 { useTranslation } from '@donotdev/core';
-import { useIntersectionObserver } from '@donotdev/components';
+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/VisuallyHidden/VisuallyHiddenPrimitive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VisuallyHiddenPrimitive.d.ts","sourceRoot":"","sources":["../../../src/atomic/VisuallyHidden/VisuallyHiddenPrimitive.tsx"],"names":[],"mappings":"AAEA;;;GAGG;AAEH,OAAO,KAAK,mBAAmB,MAAM,iCAAiC,CAAC;AAGvE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,QAAA,MAAM,uBAAuB,GAAI,yBAG9B,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,4CAEjD,CAAC;AAEF,eAAe,uBAAuB,CAAC;AACvC,OAAO,EAAE,uBAAuB,EAAE,CAAC"}
+{"version":3,"file":"VisuallyHiddenPrimitive.d.ts","sourceRoot":"","sources":["../../../src/atomic/VisuallyHidden/VisuallyHiddenPrimitive.tsx"],"names":[],"mappings":"AAEA;;;GAGG;AAEH,OAAO,KAAK,mBAAmB,MAAM,iCAAiC,CAAC;AAIvE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,QAAA,MAAM,uBAAuB,GAAI,yBAG9B,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,4CAEjD,CAAC;AAEF,eAAe,uBAAuB,CAAC;AACvC,OAAO,EAAE,uBAAuB,EAAE,CAAC"}

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';