@donotdev/components 0.0.16 → 0.0.18

package/dist/atomic/DropdownMenu/index.js

@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * @author AMBROISE PARK Consulting
  */
 import { ChevronRight, Check } from 'lucide-react';
-import { Children, isValidElement } from 'react';
+import { Children } from 'react';
 import { DropdownMenuPrimitive, DropdownMenuTriggerPrimitive, DropdownMenuContentPrimitive, DropdownMenuItemPrimitive, DropdownMenuSubPrimitive, DropdownMenuSubTriggerPrimitive, DropdownMenuSubContentPrimitive, DropdownMenuPortalPrimitive, DropdownMenuLabelPrimitive, DropdownMenuSeparatorPrimitive, } from './DropdownMenuPrimitive';
 import { cn } from '../../utils/helpers';
 import ScrollArea from '../ScrollArea';
@@ -48,22 +48,12 @@ const getIconOnlyAriaLabel = (hasIcon, hasLabel, label, fallback) => {
 const DropdownMenu = ({ trigger, items = [], children, contentWidth, contentAlign = 'start', open, onOpenChange, }) => {
     if (!trigger)
         return null;
-    // Normalize children to ensure keys (React.Children.toArray handles this automatically)
     const normalizedChildren = children ? Children.toArray(children) : [];
-    // Wrap children in DropdownMenuItemPrimitive so they trigger auto-close behavior
-    // This ensures clicking any child (like GoTo button) closes the dropdown
-    const wrappedChildren = normalizedChildren.map((child, index) => {
-        // Check if child is already a menu item by checking for data-role attribute
-        // (our DropdownMenuItemPrimitive sets data-role="menu-item")
-        if (isValidElement(child) &&
-            child.props?.['data-role'] === 'menu-item') {
-            // Already a menu item, don't wrap
-            return child;
-        }
-        // Wrap child in DropdownMenuItemPrimitive for auto-close behavior
-        // Using asChild merges props correctly with the child component
-        return (_jsx(DropdownMenuItemPrimitive, { className: "dndev-interactive", asChild: true, children: child }, index));
-    });
+    // Wrap children in DropdownMenuItemPrimitive (without asChild).
+    // Radix renders its own wrapper element with proper onSelect → auto-close.
+    // asChild doesn't work here because components (GoTo, ThemeToggle, etc.)
+    // don't forward Radix's merged event handlers to the DOM.
+    const wrappedChildren = normalizedChildren.map((child, index) => (_jsx(DropdownMenuItemPrimitive, { children: child }, index)));
     const content = (_jsxs(_Fragment, { children: [wrappedChildren, items.length > 0 &&
                 items.map((item, index) => {
                     // Label item
@@ -84,7 +74,7 @@ const DropdownMenu = ({ trigger, items = [], children, contentWidth, contentAlig
                                         !hasSubLabel && { 'data-display': 'compact' }), children: [Icon && _jsx(Icon, {}), _jsx("span", { children: submenuItem.label }), _jsx(ChevronRight, { className: "dndev-dropdown-menu-trailing" })] }), _jsx(DropdownMenuPortalPrimitive, { children: _jsx(DropdownMenuSubContentPrimitive, { className: cn('dndev-floating dndev-z-tooltip', submenuItem.subContent
                                             ? 'dndev-dropdown-sub-content-custom'
                                             : ''), children: submenuItem.subContent ||
-                                            submenuItem.subItems.map((subItem, subIndex) => {
+                                            submenuItem.subItems?.map((subItem, subIndex) => {
                                                 // Handle label/separator in submenu
                                                 if (subItem.type === 'label') {
                                                     return (_jsx(DropdownMenuLabelPrimitive, { className: cn('dndev-menu-label', subItem.className), children: subItem.label }, subIndex));

package/dist/atomic/Grid/GridArea.d.ts

@@ -9,7 +9,7 @@
  * @example
  * ```tsx
  * // Generic grid areas (default)
- * <Grid areas="left center right" templateColumns="1fr auto 1fr">
+ * <Grid areas="left center right" cols=fr">
  *   <GridArea name="left">{leftContent}</GridArea>
  *   <GridArea name="center">{centerContent}</GridArea>
  *   <GridArea name="right">{rightContent}</GridArea>
@@ -19,7 +19,7 @@
  * @example
  * ```tsx
  * // Semantic grid layout
- * <Grid areas="header main sidebar footer" templateColumns="1fr 3fr 1fr">
+ * <Grid areas="header main sidebar footer" cols=r">
  *   <GridArea as="header" name="header">Header</GridArea>
  *   <GridArea as="main" name="main">Main Content</GridArea>
  *   <GridArea as="aside" name="sidebar">Sidebar</GridArea>

package/dist/atomic/Grid/GridArea.js

@@ -10,7 +10,7 @@
  * @example
  * ```tsx
  * // Generic grid areas (default)
- * <Grid areas="left center right" templateColumns="1fr auto 1fr">
+ * <Grid areas="left center right" cols=fr">
  *   <GridArea name="left">{leftContent}</GridArea>
  *   <GridArea name="center">{centerContent}</GridArea>
  *   <GridArea name="right">{rightContent}</GridArea>
@@ -20,7 +20,7 @@
  * @example
  * ```tsx
  * // Semantic grid layout
- * <Grid areas="header main sidebar footer" templateColumns="1fr 3fr 1fr">
+ * <Grid areas="header main sidebar footer" cols=r">
  *   <GridArea as="header" name="header">Header</GridArea>
  *   <GridArea as="main" name="main">Main Content</GridArea>
  *   <GridArea as="aside" name="sidebar">Sidebar</GridArea>

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

@@ -5,29 +5,37 @@
  * @example
  * ```tsx
  * // Fixed 3-column grid
- * <Grid cols={3} gap="medium">
+ * <Grid cols={3}>
  *   <Card />
  *   <Card />
  *   <Card />
  * </Grid>
  *
- * // Responsive grid: [mobile, tablet, laptop, desktop]
- * // 1 col on mobile/tablet, 2 on laptop, 3 on desktop
- * <Grid cols={[1, 1, 2, 3]} gap="medium">
+ * // Responsive equal columns: [mobile, tablet, laptop, desktop]
+ * <Grid cols={[1, 1, 2, 3]}>
  *   <Card />
  *   <Card />
  *   <Card />
  * </Grid>
  *
- * // Named grid areas
- * <Grid areas="left center right" templateColumns="1fr auto 1fr">
+ * // Custom column template (static)
+ * <Grid cols="1fr auto 1fr" areas="left center right">
  *   <GridArea name="left">{left}</GridArea>
  *   <GridArea name="center">{center}</GridArea>
  *   <GridArea name="right">{right}</GridArea>
  * </Grid>
+ *
+ * // Custom column template (responsive) + responsive areas
+ * <Grid
+ *   cols={["1fr", "1fr", "1fr 3fr", "1fr 3fr"]}
+ *   areas={['"a" "b"', '"a" "b"', '"a b"', '"a b"']}
+ * >
+ *   <GridArea name="a">{left}</GridArea>
+ *   <GridArea name="b">{right}</GridArea>
+ * </Grid>
  * ```
  *
- * @version 0.0.4
+ * @version 0.0.5
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
@@ -38,6 +46,15 @@ import './Grid.css';
  * @example [1, 1, 2, 3] - 1 col on mobile/tablet, 2 on laptop, 3 on desktop
  */
 export type ResponsiveCols = [number, number, number, number];
+/**
+ * Responsive template array: [mobile, tablet, laptop, desktop]
+ * @example ["1fr", "1fr", "1fr 3fr", "1fr 3fr"] - stacked on mobile/tablet, 1:3 ratio on laptop/desktop
+ */
+export type ResponsiveTemplate = [string, string, string, string];
+/**
+ * Unified column type: equal columns (number) or custom template (string), static or responsive
+ */
+export type GridCols = number | string | ResponsiveCols | ResponsiveTemplate;
 /**
  * Grid-specific props (layout directives)
  */
@@ -49,15 +66,18 @@ interface GridOwnProps {
      */
     as?: ElementType;
     /**
-     * Number of columns - fixed or responsive
-     * - number: fixed columns (same on all breakpoints)
-     * - [mobile, tablet, laptop, desktop]: responsive columns per breakpoint
+     * Column layout — unified prop for all column patterns:
+     * - number: fixed equal columns → repeat(N, 1fr)
+     * - string: custom template → raw grid-template-columns value
+     * - [number x4]: responsive equal columns per breakpoint
+     * - [string x4]: responsive custom template per breakpoint
      * @default 1
-     * @example 3 - always 3 columns
-     * @example [1, 1, 2, 3] - 1 col mobile/tablet, 2 laptop, 3 desktop
-     * @example [1, 2, 3, 3] - 1 mobile, 2 tablet, 3 laptop/desktop
+     * @example 3 - always 3 equal columns
+     * @example "1fr 3fr" - custom ratio
+     * @example [1, 1, 2, 3] - responsive equal: 1 mobile/tablet, 2 laptop, 3 desktop
+     * @example ["1fr", "1fr", "1fr 3fr", "1fr 3fr"] - responsive template: stacked mobile, 1:3 desktop
      */
-    cols?: number | ResponsiveCols;
+    cols?: GridCols;
     /**
      * Spacing between items
      * @default 'medium'
@@ -76,15 +96,12 @@ interface GridOwnProps {
     /**
      * Named grid areas (CSS grid-template-areas)
      * Use with GridArea component for semantic grid layouts
-     * @example "left center right", "left right", "header header" / "sidebar main"
-     */
-    areas?: string;
-    /**
-     * Grid template columns (CSS grid-template-columns)
-     * Required when using `areas` prop
-     * @example "1fr auto 1fr", "1fr auto", "200px 1fr"
+     * - string: static areas (same on all breakpoints)
+     * - [mobile, tablet, laptop, desktop]: responsive areas per breakpoint
+     * @example "left center right"
+     * @example ['"a" "b"', '"a" "b"', '"a b"', '"a b"'] - stacked mobile, side-by-side desktop
      */
-    templateColumns?: string;
+    areas?: string | ResponsiveTemplate;
     /** Content */
     children: ReactNode;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Grid/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,qBAAqB,EAC1B,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAIf,OAAO,YAAY,CAAC;AAEpB;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAE9D;;GAEG;AACH,UAAU,YAAY;IACpB;;;;OAIG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IAEjB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;IAE/B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAE5C;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAE/C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAEjD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,cAAc;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,YAAY,GACjE,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,MAAM,YAAY,CAAC,CAAC;AAErD;;;;;GAKG;AACH,QAAA,MAAM,IAAI,uHA2DT,CAAC;AAIF,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Grid/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,qBAAqB,EAC1B,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAIf,OAAO,YAAY,CAAC;AAEpB;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAElE;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,cAAc,GAAG,kBAAkB,CAAC;AAE7E;;GAEG;AACH,UAAU,YAAY;IACpB;;;;OAIG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IAEjB;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAE5C;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAE/C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAEjD;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,kBAAkB,CAAC;IAEpC,cAAc;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,YAAY,GACjE,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,MAAM,YAAY,CAAC,CAAC;AAErD;;;;;GAKG;AACH,QAAA,MAAM,IAAI,uHA8ET,CAAC;AAIF,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,eAAe,IAAI,CAAC"}

package/dist/atomic/Grid/index.js

@@ -6,29 +6,37 @@
  * @example
  * ```tsx
  * // Fixed 3-column grid
- * <Grid cols={3} gap="medium">
+ * <Grid cols={3}>
  *   <Card />
  *   <Card />
  *   <Card />
  * </Grid>
  *
- * // Responsive grid: [mobile, tablet, laptop, desktop]
- * // 1 col on mobile/tablet, 2 on laptop, 3 on desktop
- * <Grid cols={[1, 1, 2, 3]} gap="medium">
+ * // Responsive equal columns: [mobile, tablet, laptop, desktop]
+ * <Grid cols={[1, 1, 2, 3]}>
  *   <Card />
  *   <Card />
  *   <Card />
  * </Grid>
  *
- * // Named grid areas
- * <Grid areas="left center right" templateColumns="1fr auto 1fr">
+ * // Custom column template (static)
+ * <Grid cols="1fr auto 1fr" areas="left center right">
  *   <GridArea name="left">{left}</GridArea>
  *   <GridArea name="center">{center}</GridArea>
  *   <GridArea name="right">{right}</GridArea>
  * </Grid>
+ *
+ * // Custom column template (responsive) + responsive areas
+ * <Grid
+ *   cols={["1fr", "1fr", "1fr 3fr", "1fr 3fr"]}
+ *   areas={['"a" "b"', '"a" "b"', '"a b"', '"a b"']}
+ * >
+ *   <GridArea name="a">{left}</GridArea>
+ *   <GridArea name="b">{right}</GridArea>
+ * </Grid>
  * ```
  *
- * @version 0.0.4
+ * @version 0.0.5
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
@@ -42,38 +50,59 @@ import './Grid.css';
  * Polymorphic CSS Grid layout primitive.
  * Can render as any HTML element while maintaining grid layout.
  */
-const Grid = forwardRef(({ as = 'div', cols = 1, gap = GAP_VARIANT.MEDIUM, align = 'stretch', justify = 'stretch', areas, templateColumns, className, style, children, ...props }, ref) => {
+const Grid = forwardRef(({ as = 'div', cols = 1, gap = GAP_VARIANT.MEDIUM, align = 'stretch', justify = 'stretch', areas, className, style, children, ...props }, ref) => {
     const Component = as;
-    // Parse cols into responsive values
-    const isResponsive = Array.isArray(cols);
-    const [colsMobile, colsTablet, colsLaptop, colsDesktop] = isResponsive
-        ? cols
-        : [cols, cols, cols, cols];
+    // Detect which cols variant we're dealing with
+    const isArray = Array.isArray(cols);
+    const isResponsiveEqual = isArray && typeof cols[0] === 'number';
+    const isResponsiveTpl = isArray && typeof cols[0] === 'string';
+    const isStaticTpl = typeof cols === 'string';
+    const isResponsiveAreas = Array.isArray(areas);
     const customStyle = {
         display: 'grid',
         width: '100%',
-        // Set CSS custom properties for responsive columns
-        '--grid-cols-mobile': colsMobile,
-        '--grid-cols-tablet': colsTablet,
-        '--grid-cols-laptop': colsLaptop,
-        '--grid-cols-desktop': colsDesktop,
         ...style,
-        ...(areas
-            ? {
-                gridTemplateAreas: areas.trim().startsWith('"')
-                    ? areas
-                    : `"${areas}"`,
-            }
-            : {}),
-        ...(templateColumns && { gridTemplateColumns: templateColumns }),
     };
+    if (isResponsiveTpl) {
+        const tpl = cols;
+        customStyle['--grid-tpl-mobile'] = tpl[0];
+        customStyle['--grid-tpl-tablet'] = tpl[1];
+        customStyle['--grid-tpl-laptop'] = tpl[2];
+        customStyle['--grid-tpl-desktop'] = tpl[3];
+    }
+    else if (isStaticTpl) {
+        customStyle.gridTemplateColumns = cols;
+    }
+    else {
+        const [m, t, l, d] = isResponsiveEqual
+            ? cols
+            : [cols, cols, cols, cols];
+        customStyle['--grid-cols-mobile'] = m;
+        customStyle['--grid-cols-tablet'] = t;
+        customStyle['--grid-cols-laptop'] = l;
+        customStyle['--grid-cols-desktop'] = d;
+    }
+    if (isResponsiveAreas) {
+        const fmt = (v) => (v.trim().startsWith('"') ? v : `"${v}"`);
+        customStyle['--grid-areas-mobile'] = fmt(areas[0]);
+        customStyle['--grid-areas-tablet'] = fmt(areas[1]);
+        customStyle['--grid-areas-laptop'] = fmt(areas[2]);
+        customStyle['--grid-areas-desktop'] = fmt(areas[3]);
+    }
+    else if (typeof areas === 'string') {
+        customStyle.gridTemplateAreas = areas.trim().startsWith('"')
+            ? areas
+            : `"${areas}"`;
+    }
     return createElement(Component, {
         ref,
         className: cn('dndev-grid-component', className),
         'data-gap': gap,
         'data-align': align,
         'data-justify': justify,
-        'data-responsive': isResponsive ? 'true' : undefined,
+        'data-responsive': isResponsiveEqual ? 'true' : undefined,
+        'data-responsive-tpl': isResponsiveTpl ? 'true' : undefined,
+        'data-responsive-areas': isResponsiveAreas ? 'true' : undefined,
         style: customStyle,
         ...props,
     }, children);

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

@@ -22,6 +22,7 @@
  */
 import { type VariantProps } from 'class-variance-authority';
 import { type ElementType, type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type Tone } from '../../utils/constants';
 import './HeroSection.css';
 declare const heroSectionVariants: (props?: ({
     variant?: "primary" | "accent" | "subtle" | null | undefined;
@@ -39,6 +40,8 @@ interface HeroSectionOwnProps extends VariantProps<typeof heroSectionVariants> {
     fullHeight?: boolean;
     /** Content alignment @default 'center' */
     align?: 'start' | 'center' | 'end';
+    /** Tone system for background colors (matches Section/CallToAction) */
+    tone?: Tone;
     /** Content */
     children?: ReactNode;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/HeroSection/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,qBAAqB,EAC1B,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAOf,OAAO,mBAAmB,CAAC;AAE3B,QAAA,MAAM,mBAAmB;;8EAWvB,CAAC;AAEH,UAAU,mBAAoB,SAAQ,YAAY,CAAC,OAAO,mBAAmB,CAAC;IAC5E,mDAAmD;IACnD,EAAE,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,KAAK,CAAC;IAClC,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,2BAA2B;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,SAAS,IAC5D,mBAAmB,GACjB,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,MAAM,mBAAmB,CAAC,CAAC;AAE9D,QAAA,MAAM,WAAW,kIA6DhB,CAAC;AAIF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/HeroSection/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,qBAAqB,EAC1B,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAQ,KAAK,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAMxD,OAAO,mBAAmB,CAAC;AAE3B,QAAA,MAAM,mBAAmB;;8EAWvB,CAAC;AAEH,UAAU,mBAAoB,SAAQ,YAAY,CAAC,OAAO,mBAAmB,CAAC;IAC5E,mDAAmD;IACnD,EAAE,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,KAAK,CAAC;IAClC,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,2BAA2B;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,uEAAuE;IACvE,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,SAAS,IAC5D,mBAAmB,GACjB,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,MAAM,mBAAmB,CAAC,CAAC;AAE9D,QAAA,MAAM,WAAW,kIAgEhB,CAAC;AAIF,eAAe,WAAW,CAAC"}

package/dist/atomic/HeroSection/index.js

@@ -24,6 +24,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { cva } from 'class-variance-authority';
 import { createElement, forwardRef, } from 'react';
+import { TONE } from '../../utils/constants';
 import { cn } from '../../utils/helpers';
 import Badge, { BADGE_VARIANT } from '../Badge';
 import Stack from '../Stack';
@@ -41,11 +42,13 @@ const heroSectionVariants = cva('', {
         variant: 'primary',
     },
 });
-const HeroSection = forwardRef(function HeroSection({ as = 'section', badge, title, subtitle, variant, fullHeight = false, align = 'center', children, className, ...props }, ref) {
+const HeroSection = forwardRef(function HeroSection({ as = 'section', badge, title, subtitle, variant, fullHeight = false, align = 'center', tone = TONE.GHOST, children, className, ...props }, ref) {
     return createElement(as, {
         ref,
         className: cn('dndev-hero-section', className),
         'data-text-align': align,
+        'data-variant': variant || undefined,
+        'data-tone': tone,
         style: {
             ...(fullHeight
                 ? {
@@ -56,7 +59,7 @@ const HeroSection = forwardRef(function HeroSection({ as = 'section', badge, tit
             ...props.style,
         },
         ...props,
-    }, _jsxs(Stack, { gap: "medium", children: [badge && _jsx(Badge, { variant: BADGE_VARIANT.ACCENT, children: badge }), title && (_jsx(Text, { as: "div", level: "h1", className: "dndev-hero-title", "data-gradient-text": variant === 'subtle' ? undefined : variant || 'primary', children: title })), subtitle && (_jsx(Text, { as: "p", level: "body", className: "dndev-hero-subtitle", children: subtitle })), children] }));
+    }, _jsxs(Stack, { children: [badge && _jsx(Badge, { variant: BADGE_VARIANT.ACCENT, children: badge }), title && (_jsx(Text, { as: "div", level: "h1", className: "dndev-hero-title", "data-gradient-text": variant === 'subtle' ? undefined : variant || 'primary', children: title })), subtitle && (_jsx(Text, { as: "p", level: "body", className: "dndev-hero-subtitle", children: subtitle })), children] }));
 });
 HeroSection.displayName = 'HeroSection';
 export default HeroSection;

package/dist/atomic/HoverCard/HoverCardPrimitive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCardPrimitive.d.ts","sourceRoot":"","sources":["../../../src/atomic/HoverCard/HoverCardPrimitive.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,cAAc,MAAM,4BAA4B,CAAC;AAI7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,QAAA,MAAM,kBAAkB,GAAI,yBAGzB,cAAc,CAAC,cAAc,4CAE/B,CAAC;AAEF,QAAA,MAAM,gBAAgB,oIAAyB,CAAC;AAEhD,QAAA,MAAM,gBAAgB,GAAI,4CAKvB,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,4CAS/C,CAAC;AAEF,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAC9B,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"HoverCardPrimitive.d.ts","sourceRoot":"","sources":["../../../src/atomic/HoverCard/HoverCardPrimitive.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,cAAc,MAAM,4BAA4B,CAAC;AAI7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,QAAA,MAAM,kBAAkB,GAAI,yBAGzB,cAAc,CAAC,cAAc,4CAE/B,CAAC;AAEF,QAAA,MAAM,gBAAgB,oIAAyB,CAAC;AAEhD,QAAA,MAAM,gBAAgB,GAAI,4CAKvB,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,4CAW/C,CAAC;AAEF,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAC9B,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/atomic/HoverCard/HoverCardPrimitive.js

@@ -13,7 +13,7 @@ import { cn } from '../../utils/helpers';
 const HoverCardPrimitive = ({ openDelay = 0, ...props }) => (_jsx(RadixHoverCard.Root, { openDelay: openDelay, ...props }));
 const HoverCardTrigger = RadixHoverCard.Trigger;
 const HoverCardContent = ({ className, align = 'center', sideOffset = 4, ...props }) => {
-    return (_jsx(RadixHoverCard.Content, { align: align, sideOffset: sideOffset, className: cn(className), ...props }));
+    return (_jsx(RadixHoverCard.Portal, { children: _jsx(RadixHoverCard.Content, { align: align, sideOffset: sideOffset, className: cn(className), ...props }) }));
 };
 export { HoverCardPrimitive };
 export { HoverCardTrigger, HoverCardContent };

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

@@ -1,8 +1,9 @@
+import { type CardProps } from '../Card';
 import type { ReactNode } from 'react';
-export interface HoverCardProps {
+export interface HoverCardProps extends Pick<CardProps, 'title' | 'subtitle' | 'content' | 'footer' | 'icon' | 'variant'> {
     /** Trigger element (button, text, avatar, etc.) */
     trigger?: ReactNode;
-    /** HoverCard content */
+    /** HoverCard content (alternative to content prop, for full control) */
     children?: ReactNode;
     /** Controlled open state */
     open?: boolean;
@@ -23,11 +24,25 @@ export interface HoverCardProps {
 }
 /**
  * Accessible hover card component.
- * Shows rich content on hover with smooth animations.
+ * Shows rich content on hover using Radix HoverCard primitive.
+ *
+ * ⚠️ **Desktop only**: This component uses hover events and does not support touch/click interactions.
+ * For mobile/click support, use {@link Popover} instead.
+ *
+ * Accepts Card props (title, subtitle, content, footer, variant, icon) and renders a Card internally.
  *
  * @component
  * @example
  * ```tsx
+ * // Using Card props
+ * <HoverCard
+ *   trigger={<Avatar src="..." />}
+ *   title="John Doe"
+ *   subtitle="Software Engineer"
+ *   content="Building amazing products"
+ * />
+ *
+ * // Using children for full control
  * <HoverCard trigger={<Avatar src="..." />}>
  *   <Stack gap="tight">
  *     <Text>John Doe</Text>
@@ -38,6 +53,6 @@ export interface HoverCardProps {
  * @param {HoverCardProps} props - The props for the hover card
  * @returns {JSX.Element} The rendered hover card
  */
-declare function HoverCard({ trigger, children, open, onOpenChange, openDelay, closeDelay, align, side, sideOffset, className, }: HoverCardProps): import("react/jsx-runtime").JSX.Element;
+declare function HoverCard({ trigger, title, subtitle, content, footer, icon, variant, children, open, onOpenChange, openDelay, closeDelay, align, side, sideOffset, className, }: HoverCardProps): import("react/jsx-runtime").JSX.Element;
 export default HoverCard;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/HoverCard/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,cAAc;IAC7B,mDAAmD;IACnD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,8BAA8B;IAC9B,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,SAAS,CAAC,EACjB,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,SAAa,EACb,UAAc,EACd,KAAgB,EAChB,IAAe,EACf,UAAc,EACd,SAAS,GACV,EAAE,cAAc,2CAsBhB;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/HoverCard/index.tsx"],"names":[],"mappings":"AAmBA,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAG/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CACjE;IACC,mDAAmD;IACnD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,8BAA8B;IAC9B,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,iBAAS,SAAS,CAAC,EACjB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,OAAO,EACP,MAAM,EACN,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,SAAa,EACb,UAAc,EACd,KAAgB,EAChB,IAAe,EACf,UAAc,EACd,SAAS,GACV,EAAE,cAAc,2CAqChB;AAED,eAAe,SAAS,CAAC"}

package/dist/atomic/HoverCard/index.js

@@ -2,21 +2,38 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // packages/components/src/atomic/HoverCard/index.tsx
 /**
  * @fileoverview HoverCard component
- * @description Accessible hover card component built on Radix UI primitives
+ * @description Accessible hover card component built on Radix UI primitives.
+ * Accepts Card props and renders a Card internally.
  *
- * @version 0.0.1
+ * @version 0.0.2
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
+import { useState } from 'react';
 import { HoverCardPrimitive, HoverCardTrigger, HoverCardContent, } from './HoverCardPrimitive';
+import Card, {} from '../Card';
 import { cn } from '../../utils/helpers';
 /**
  * Accessible hover card component.
- * Shows rich content on hover with smooth animations.
+ * Shows rich content on hover using Radix HoverCard primitive.
+ *
+ * ⚠️ **Desktop only**: This component uses hover events and does not support touch/click interactions.
+ * For mobile/click support, use {@link Popover} instead.
+ *
+ * Accepts Card props (title, subtitle, content, footer, variant, icon) and renders a Card internally.
  *
  * @component
  * @example
  * ```tsx
+ * // Using Card props
+ * <HoverCard
+ *   trigger={<Avatar src="..." />}
+ *   title="John Doe"
+ *   subtitle="Software Engineer"
+ *   content="Building amazing products"
+ * />
+ *
+ * // Using children for full control
  * <HoverCard trigger={<Avatar src="..." />}>
  *   <Stack gap="tight">
  *     <Text>John Doe</Text>
@@ -27,7 +44,9 @@ import { cn } from '../../utils/helpers';
  * @param {HoverCardProps} props - The props for the hover card
  * @returns {JSX.Element} The rendered hover card
  */
-function HoverCard({ trigger, children, open, onOpenChange, openDelay = 0, closeDelay = 0, align = 'center', side = 'bottom', sideOffset = 4, className, }) {
-    return (_jsxs(HoverCardPrimitive, { open: open, onOpenChange: onOpenChange, openDelay: openDelay, closeDelay: closeDelay, children: [trigger && _jsx(HoverCardTrigger, { asChild: true, children: trigger }), _jsx(HoverCardContent, { align: align, side: side, sideOffset: sideOffset, className: cn('dndev-surface dndev-z-tooltip dndev-hovercard-content', className), children: children })] }));
+function HoverCard({ trigger, title, subtitle, content, footer, icon, variant, children, open, onOpenChange, openDelay = 0, closeDelay = 0, align = 'center', side = 'bottom', sideOffset = 4, className, }) {
+    const hasCardProps = !!(title || subtitle || content || footer || icon || variant);
+    const cardContent = hasCardProps ? (_jsx(Card, { title: title, subtitle: subtitle, content: content, footer: footer, icon: icon, variant: variant })) : (children);
+    return (_jsxs(HoverCardPrimitive, { open: open, onOpenChange: onOpenChange, openDelay: openDelay, closeDelay: closeDelay, children: [trigger && _jsx(HoverCardTrigger, { asChild: true, children: trigger }), _jsx(HoverCardContent, { align: align, side: side, sideOffset: sideOffset, className: cn('dndev-z-tooltip dndev-hovercard-content', !hasCardProps && 'dndev-surface', className), children: cardContent })] }));
 }
 export default HoverCard;

package/dist/atomic/Icons/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/atomic/Icons/Icon.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,WAAW,SAAS;IACxB,IAAI,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD,kEAAkE;IAClE,QAAQ,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,GAAG,MAAM,GAAG,SAAS,CAAC;IAC3D,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,IAAI,EAAE,aAAa,CAAC,SAAS,CA2FlC,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/atomic/Icons/Icon.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,WAAW,SAAS;IACxB,IAAI,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD,kEAAkE;IAClE,QAAQ,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,GAAG,MAAM,GAAG,SAAS,CAAC;IAC3D,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,IAAI,EAAE,aAAa,CAAC,SAAS,CA4FlC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/atomic/Icons/Icon.js

@@ -12,6 +12,14 @@ import { cn } from '../../utils/helpers';
 const Icon = ({ icon, fallback, className, ariaHidden = false, }) => {
     // Memoize icon resolution to avoid recalculation
     const iconToRender = useMemo(() => icon || fallback, [icon, fallback]);
+    // Memoize emoji check — must be unconditional (Rules of Hooks)
+    const isEmoji = useMemo(() => {
+        if (typeof iconToRender !== 'string')
+            return false;
+        // If it's a valid identifier pattern, it's NOT an emoji (it's a Lucide icon name)
+        const isValidIdentifier = /^[a-zA-Z0-9_-]+$/.test(iconToRender);
+        return !isValidIdentifier;
+    }, [iconToRender]);
     if (!iconToRender)
         return null;
     const sizeClass = 'dndev-size-md';
@@ -25,21 +33,14 @@ const Icon = ({ icon, fallback, className, ariaHidden = false, }) => {
     }
     // Type 2: String (emoji only - no dynamic icon name lookup for tree-shaking)
     if (typeof iconToRender === 'string') {
-        // Check if string is an emoji (not a valid identifier)
-        // Valid identifiers: alphanumeric, underscore, hyphen (Lucide icon names)
-        // Emojis: anything else (Unicode symbols, emojis, etc.)
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        const isEmoji = useMemo(() => {
-            // If it's a valid identifier pattern, it's NOT an emoji (it's a Lucide icon name)
-            const isValidIdentifier = /^[a-zA-Z0-9_-]+$/.test(iconToRender);
-            return !isValidIdentifier;
-        }, [iconToRender]);
         if (isEmoji) {
             return (_jsx("span", { className: cn('dndev-inline-flex dndev-items-center dndev-justify-center', sizeClass, className), "aria-hidden": ariaHidden, children: iconToRender }));
         }
         // Non-emoji string: Not supported (would require full lucide-react import)
         // Use Icon from @donotdev/ui for dynamic string icon resolution
-        console.warn(`Icon component from @donotdev/components does not support Lucide icon name strings. Use Icon from @donotdev/ui for dynamic string resolution, or import the icon component directly. Received: "${iconToRender}"`);
+        if (process.env.NODE_ENV === 'development') {
+            console.warn(`Icon component from @donotdev/components does not support Lucide icon name strings. Use Icon from @donotdev/ui for dynamic string resolution, or import the icon component directly. Received: "${iconToRender}"`);
+        }
         return null;
     }
     // Type 3: ReactNode (custom content)

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

@@ -11,7 +11,9 @@ import './InfiniteScroll.css';
 export interface InfiniteScrollProps<T> {
     items: T[];
     renderItem: (item: T, index: number) => ReactNode;
-    loadMore: () => void;
+    /** Extract a stable key for each item. Falls back to index when not provided. */
+    keyExtractor?: (item: T, index: number) => string | number;
+    loadMore: () => void | Promise<void>;
     hasMore: boolean;
     loading?: boolean;
     loadingComponent?: ReactNode;
@@ -23,6 +25,6 @@ export interface InfiniteScrollProps<T> {
     gridCols?: 1 | 2 | 3 | 4 | 5 | 6;
     gap?: 'none' | 'tight' | 'medium' | 'large';
 }
-declare const InfiniteScroll: <T>({ items, renderItem, loadMore, hasMore, loading, loadingComponent, endMessage, threshold, rootMargin, className, itemClassName, gridCols, gap, }: InfiniteScrollProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const InfiniteScroll: <T>({ items, renderItem, keyExtractor, loadMore, hasMore, loading, loadingComponent, endMessage, threshold, rootMargin, className, itemClassName, gridCols, gap, }: InfiniteScrollProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default InfiniteScroll;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/InfiniteScroll/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAMf,OAAO,sBAAsB,CAAC;AAE9B,MAAM,WAAW,mBAAmB,CAAC,CAAC;IACpC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACjC,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CAC7C;AAED,QAAA,MAAM,cAAc,GAAI,CAAC,EAAG,kJAczB,mBAAmB,CAAC,CAAC,CAAC,4CAuGxB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/InfiniteScroll/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAMf,OAAO,sBAAsB,CAAC;AAE9B,MAAM,WAAW,mBAAmB,CAAC,CAAC;IACpC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,iFAAiF;IACjF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IAC3D,QAAQ,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACjC,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CAC7C;AAED,QAAA,MAAM,cAAc,GAAI,CAAC,EAAG,gKAezB,mBAAmB,CAAC,CAAC,CAAC,4CAuGxB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/atomic/InfiniteScroll/index.js

@@ -14,7 +14,7 @@ import { cn, observeElement } from '../../utils';
 import Spinner from '../Spinner';
 import Stack from '../Stack';
 import './InfiniteScroll.css';
-const InfiniteScroll = ({ items, renderItem, loadMore, hasMore, loading = false, loadingComponent, endMessage, threshold = 0.1, rootMargin = '100px', className, itemClassName, gridCols = 3, gap = GAP_VARIANT.MEDIUM, }) => {
+const InfiniteScroll = ({ items, renderItem, keyExtractor, loadMore, hasMore, loading = false, loadingComponent, endMessage, threshold = 0.1, rootMargin = '100px', className, itemClassName, gridCols = 3, gap = GAP_VARIANT.MEDIUM, }) => {
     const [isLoading, setIsLoading] = useState(false);
     const loadMoreRef = useRef(null);
     const handleLoadMore = useCallback(async () => {
@@ -48,6 +48,6 @@ const InfiniteScroll = ({ items, renderItem, loadMore, hasMore, loading = false,
     }[gap];
     const defaultLoadingComponent = (_jsx(Stack, { align: "center", justify: "center", className: "dndev-py-lg", children: _jsxs(Stack, { direction: "row", align: "center", gap: "tight", className: "dndev-infinite-scroll-loading-container", children: [_jsx(Spinner, {}), _jsx("span", { children: "Loading more..." })] }) }));
     const defaultEndMessage = (_jsx(Stack, { align: "center", justify: "center", className: "dndev-py-lg", children: _jsxs("div", { className: "dndev-text-center dndev-infinite-scroll-end-title", children: [_jsx("p", { className: "dndev-text-lg dndev-font-medium", children: "\uD83C\uDF89 You've seen it all!" }), _jsx("p", { className: "dndev-text-sm dndev-infinite-scroll-end-text", children: "That's everything we have to showcase." })] }) }));
-    return (_jsxs("div", { className: cn('dndev-grid dndev-gap-md', className), children: [_jsx("div", { className: "dndev-infinite-scroll-grid", "data-cols": gridCols, style: gapStyle, children: items.map((item, index) => (_jsx("div", { className: itemClassName, children: renderItem(item, index) }, index))) }), hasMore && (_jsx(Stack, { ref: loadMoreRef, justify: "center", className: "dndev-py-md", children: loading || isLoading ? (loadingComponent || defaultLoadingComponent) : (_jsx("div", { className: "dndev-text-sm dndev-infinite-scroll-more-text", children: "Scroll down to load more..." })) })), !hasMore && items.length > 0 && (_jsx(Stack, { justify: "center", className: "dndev-infinite-scroll-end-container", children: endMessage || defaultEndMessage }))] }));
+    return (_jsxs("div", { className: cn('dndev-grid dndev-gap-md', className), children: [_jsx("div", { className: "dndev-infinite-scroll-grid", "data-cols": gridCols, style: gapStyle, children: items.map((item, index) => (_jsx("div", { className: itemClassName, children: renderItem(item, index) }, keyExtractor ? keyExtractor(item, index) : index))) }), hasMore && (_jsx(Stack, { ref: loadMoreRef, justify: "center", className: "dndev-py-md", children: loading || isLoading ? (loadingComponent || defaultLoadingComponent) : (_jsx("div", { className: "dndev-text-sm dndev-infinite-scroll-more-text", children: "Scroll down to load more..." })) })), !hasMore && items.length > 0 && (_jsx(Stack, { justify: "center", className: "dndev-infinite-scroll-end-container", children: endMessage || defaultEndMessage }))] }));
 };
 export default InfiniteScroll;

package/dist/atomic/Pagination/index.js

@@ -44,7 +44,7 @@ showNavigation = true, previousLabel = 'Previous', nextLabel = 'Next', itemsPerP
             pageSizeOptions = [
                 { value: '12', label: '12' },
                 { value: '36', label: '36' },
-                { value: 'ALL', label: String(total) },
+                { value: 'all', label: String(total) },
             ];
         }
         else {