@donotdev/components 0.0.2 → 0.0.4

package/dist/atomic/Grid/index.js

@@ -1,33 +1,34 @@
 // packages/components/src/atomic/Grid/index.tsx
 /**
  * @fileoverview Grid component
- * @description Polymorphic CSS Grid layout primitive.
- * Replaces redundant `div className="dndev-grid ..."` usage.
+ * @description Polymorphic CSS Grid layout primitive with responsive columns.
  *
  * @example
  * ```tsx
- * // Simple 3-column grid (default div)
+ * // Fixed 3-column grid
  * <Grid cols={3} gap="medium">
  *   <Card />
  *   <Card />
  *   <Card />
  * </Grid>
  *
- * // Semantic section with grid layout
- * <Grid as="section" cols={2} aria-label="Features">
- *   <FeatureCard />
- *   <FeatureCard />
+ * // 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">
+ *   <Card />
+ *   <Card />
+ *   <Card />
  * </Grid>
  *
  * // Named grid areas
- * <Grid as="header" areas="left center right" templateColumns="1fr auto 1fr">
- *   <GridArea name="left">{leftContent}</GridArea>
- *   <GridArea name="center">{centerContent}</GridArea>
- *   <GridArea name="right">{rightContent}</GridArea>
+ * <Grid areas="left center right" templateColumns="1fr auto 1fr">
+ *   <GridArea name="left">{left}</GridArea>
+ *   <GridArea name="center">{center}</GridArea>
+ *   <GridArea name="right">{right}</GridArea>
  * </Grid>
  * ```
  *
- * @version 0.0.1
+ * @version 0.0.4
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
@@ -41,13 +42,22 @@ 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', minColWidth, areas, templateColumns, className, style, children, ...props }, ref) => {
+const Grid = forwardRef(({ as = 'div', cols = 1, gap = GAP_VARIANT.MEDIUM, align = 'stretch', justify = 'stretch', areas, templateColumns, 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];
     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,
-        ...(minColWidth ? { '--min-col-width': minColWidth } : {}),
         ...(areas
             ? {
                 gridTemplateAreas: areas.trim().startsWith('"')
@@ -55,15 +65,15 @@ const Grid = forwardRef(({ as = 'div', cols = 1, gap = GAP_VARIANT.MEDIUM, align
                     : `"${areas}"`,
             }
             : {}),
-        ...(templateColumns ? { gridTemplateColumns: templateColumns } : {}),
+        ...(templateColumns && { gridTemplateColumns: templateColumns }),
     };
     return createElement(Component, {
         ref,
         className: cn('dndev-grid-component', className),
-        'data-cols': areas ? undefined : cols,
         'data-gap': gap,
         'data-align': align,
         'data-justify': justify,
+        'data-responsive': isResponsive ? 'true' : undefined,
         style: customStyle,
         ...props,
     }, children);

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

@@ -1,79 +1,43 @@
 /**
  * @fileoverview Hero Section Component
- * @description Simple hero section with title, subtitle, and optional children.
- * Content width is automatically constrained by PageContainer's --content-width variable.
- * Use utility class `dndev-max-w-none` to bypass width constraints.
+ * @description Punchy hero section with gradient title, subtitle, and optional children.
+ * Title always renders as h1 with maximum impact. Users who need different sizing make their own.
  *
  * **Polymorphic Component**: Can render as `section`, `header`, or `div` based on semantic needs.
- * Defaults to `section` for semantic HTML. Use `header` for page headers with hero content.
  *
  * @example
  * ```tsx
- * // Standard hero section (default)
  * <HeroSection
  *   title="Build Faster"
  *   subtitle="The ultimate framework"
  *   badge="New v2.0"
- *   variant="primary"
  * >
  *   <Button>Get Started</Button>
  * </HeroSection>
  * ```
  *
- * @example
- * ```tsx
- * // Page header with hero content
- * <HeroSection
- *   as="header"
- *   title="Welcome"
- *   subtitle="Get started today"
- *   fullHeight
- * />
- * ```
- *
- * @version 0.0.2
+ * @version 0.0.4
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
 import { type VariantProps } from 'class-variance-authority';
 import { type ElementType, type ComponentPropsWithRef, type ReactNode } from 'react';
+import './HeroSection.css';
 declare const heroSectionVariants: (props?: ({
     variant?: "primary" | "accent" | "subtle" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-/**
- * HeroSection-specific props (content and styling directives)
- */
 interface HeroSectionOwnProps extends VariantProps<typeof heroSectionVariants> {
-    /**
-     * Element type to render as
-     * @default 'section'
-     * @example 'section' - Standard hero section (default)
-     * @example 'header' - Page header with hero content
-     * @example 'div' - Generic container when semantic meaning not needed
-     */
+    /** Element type to render as @default 'section' */
     as?: 'section' | 'header' | 'div';
     /** Badge text */
     badge?: string;
-    /** Hero title */
-    title?: string;
-    /**
-     * Mobile-specific hero title (shown below 1024px)
-     * If provided, 'title' becomes desktop-only
-     */
-    mobileTitle?: string;
-    /** Hero subtitle */
-    subtitle?: string;
-    /**
-     * Mobile-specific hero subtitle (shown below 1024px)
-     * If provided, 'subtitle' becomes desktop-only
-     */
-    mobileSubtitle?: string;
+    /** Hero title (renders as h1 with gradient) - string or ReactNode for Trans */
+    title?: string | ReactNode;
+    /** Hero subtitle - string or ReactNode for Trans */
+    subtitle?: string | ReactNode;
     /** Full viewport height */
     fullHeight?: boolean;
-    /**
-     * Content alignment
-     * @default 'center'
-     */
+    /** Content alignment @default 'center' */
     align?: 'start' | 'center' | 'end';
     /** 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;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,QAAA,MAAM,mBAAmB;;8EAWvB,CAAC;AAEH;;GAEG;AACH,UAAU,mBAAoB,SAAQ,YAAY,CAAC,OAAO,mBAAmB,CAAC;IAC5E;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,KAAK,CAAC;IAElC,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAEnC,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,kIAkGhB,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;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"}

package/dist/atomic/HeroSection/index.js

@@ -2,38 +2,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // packages/components/src/atomic/HeroSection/index.tsx
 /**
  * @fileoverview Hero Section Component
- * @description Simple hero section with title, subtitle, and optional children.
- * Content width is automatically constrained by PageContainer's --content-width variable.
- * Use utility class `dndev-max-w-none` to bypass width constraints.
+ * @description Punchy hero section with gradient title, subtitle, and optional children.
+ * Title always renders as h1 with maximum impact. Users who need different sizing make their own.
  *
  * **Polymorphic Component**: Can render as `section`, `header`, or `div` based on semantic needs.
- * Defaults to `section` for semantic HTML. Use `header` for page headers with hero content.
  *
  * @example
  * ```tsx
- * // Standard hero section (default)
  * <HeroSection
  *   title="Build Faster"
  *   subtitle="The ultimate framework"
  *   badge="New v2.0"
- *   variant="primary"
  * >
  *   <Button>Get Started</Button>
  * </HeroSection>
  * ```
  *
- * @example
- * ```tsx
- * // Page header with hero content
- * <HeroSection
- *   as="header"
- *   title="Welcome"
- *   subtitle="Get started today"
- *   fullHeight
- * />
- * ```
- *
- * @version 0.0.2
+ * @version 0.0.4
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
@@ -43,6 +28,7 @@ import { cn } from '../../utils/helpers';
 import Badge, { BADGE_VARIANT } from '../Badge';
 import Stack from '../Stack';
 import Text from '../Text';
+import './HeroSection.css';
 const heroSectionVariants = cva('', {
     variants: {
         variant: {
@@ -55,9 +41,8 @@ const heroSectionVariants = cva('', {
         variant: 'primary',
     },
 });
-const HeroSection = forwardRef(function HeroSection({ as = 'section', badge, title, mobileTitle, subtitle, mobileSubtitle, variant, fullHeight = false, align = 'center', children, className, ...props }, ref) {
-    const Component = as;
-    return createElement(Component, {
+const HeroSection = forwardRef(function HeroSection({ as = 'section', badge, title, subtitle, variant, fullHeight = false, align = 'center', children, className, ...props }, ref) {
+    return createElement(as, {
         ref,
         className: cn('dndev-hero-section', className),
         'data-text-align': align,
@@ -71,7 +56,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: "h1", level: "h1", className: cn('dndev-hero-title', mobileTitle && 'dndev-desktop-only'), "data-gradient-text": variant === 'subtle' ? undefined : variant || 'primary', children: title })), mobileTitle && (_jsx(Text, { as: "h1", level: "h1", className: "dndev-hero-title dndev-mobile-only", "data-gradient-text": variant === 'subtle' ? undefined : variant || 'primary', children: mobileTitle })), subtitle && (_jsx(Text, { as: "p", level: "body", className: cn('dndev-hero-subtitle', mobileSubtitle && 'dndev-desktop-only'), children: subtitle })), mobileSubtitle && (_jsx(Text, { as: "p", level: "body", className: "dndev-hero-subtitle dndev-mobile-only", children: mobileSubtitle })), children] }));
+    }, _jsxs(Stack, { gap: "medium", children: [badge && _jsx(Badge, { variant: BADGE_VARIANT.ACCENT, children: badge }), title && (_jsx(Text, { as: "h1", 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/Input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Input/index.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,WAAW,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACvE,gDAAgD;IAChD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,KAAK,GAAI,6EAUZ,UAAU,4CAwEZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Input/index.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,WAAW,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACvE,gDAAgD;IAChD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,KAAK,GAAI,6EAUZ,UAAU,4CA4EZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/atomic/Input/index.js

@@ -57,6 +57,10 @@ const Input = ({ className, type, icon, iconEnd = false, label, value, onFocus,
                     backgroundColor: 'var(--background)',
                     padding: '0 var(--gap-xs)',
                     lineHeight: 1,
+                    maxWidth: 'calc(100% - var(--gap-md) * 2)',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
                 }, children: label })), inputElement, hasIcon && (_jsx("div", { className: cn('dndev-input-icon', isLeading && 'dndev-input-icon-leading', isTrailing && 'dndev-input-icon-trailing'), children: _jsx(Icon, { icon: icon, className: "dndev-size-md", ariaHidden: true }) }))] }));
 };
 export default Input;

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

@@ -14,6 +14,11 @@ export interface ListProps extends HTMLAttributes<HTMLUListElement | HTMLOListEl
     items?: (string | ReactNode | ListItem)[];
     /** Whether to render as ordered list (numbers) */
     ordered?: boolean;
+    /**
+     * Default icon for all string items.
+     * Individual ListItem.icon takes precedence.
+     */
+    icon?: ReactNode;
     /**
      * Spacing between items
      * @default 'none'
@@ -53,7 +58,7 @@ export interface ListProps extends HTMLAttributes<HTMLUListElement | HTMLOListEl
  * @param {ListProps} props - The props for the list
  * @returns {JSX.Element} The rendered list component
  */
-declare const List: ({ items, ordered, gap, density, className, ...props }: ListProps) => import("react/jsx-runtime").JSX.Element;
+declare const List: ({ items, ordered, icon, gap, density, className, ...props }: ListProps) => import("react/jsx-runtime").JSX.Element;
 export { GAP_VARIANT };
 export type GapVariant = (typeof GAP_VARIANT)[keyof typeof GAP_VARIANT];
 export default List;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/List/index.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAE9D,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,YAAY,CAAC;AAEpB,MAAM,WAAW,QAAQ;IACvB,uCAAuC;IACvC,OAAO,EAAE,SAAS,CAAC;IACnB,gCAAgC;IAChC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,SAAU,SAAQ,cAAc,CAC/C,gBAAgB,GAAG,gBAAgB,CACpC;IACC,0CAA0C;IAC1C,KAAK,CAAC,EAAE,CAAC,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC,EAAE,CAAC;IAC1C,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,YAAY,CAAC;IACxD,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,IAAI,GAAI,uDAOX,SAAS,4CA2CX,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AAExE,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/List/index.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAE9D,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,YAAY,CAAC;AAEpB,MAAM,WAAW,QAAQ;IACvB,uCAAuC;IACvC,OAAO,EAAE,SAAS,CAAC;IACnB,gCAAgC;IAChC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,SAAU,SAAQ,cAAc,CAC/C,gBAAgB,GAAG,gBAAgB,CACpC;IACC,0CAA0C;IAC1C,KAAK,CAAC,EAAE,CAAC,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC,EAAE,CAAC;IAC1C,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,YAAY,CAAC;IACxD,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,IAAI,GAAI,6DAQX,SAAS,4CAoDX,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AAExE,eAAe,IAAI,CAAC"}

package/dist/atomic/List/index.js

@@ -33,20 +33,24 @@ import './List.css';
  * @param {ListProps} props - The props for the list
  * @returns {JSX.Element} The rendered list component
  */
-const List = ({ items = [], ordered = false, gap = GAP_VARIANT.NONE, density = 'default', className, ...props }) => {
+const List = ({ items = [], ordered = false, icon, gap = GAP_VARIANT.NONE, density = 'default', className, ...props }) => {
     const Component = ordered ? 'ol' : 'ul';
     return (_jsx(Component, { className: cn('dndev-list', className), "data-ordered": ordered ? 'true' : undefined, "data-gap": gap, "data-density": density, ...props, children: items.map((item, index) => {
-            // Handle different item formats
+            // Handle string/number - apply container icon if provided
             if (typeof item === 'string' || typeof item === 'number') {
+                if (icon) {
+                    return (_jsxs("li", { className: "dndev-list-item", children: [_jsx("span", { className: "dndev-list-item-icon", children: icon }), _jsx("span", { className: "dndev-list-item-content", children: item })] }, index));
+                }
                 return (_jsx("li", { className: "dndev-list-item", children: item }, index));
             }
             // Handle ReactNode (JSX elements)
             if (!item || typeof item !== 'object' || !('content' in item)) {
                 return (_jsx("li", { className: "dndev-list-item", children: item }, index));
             }
-            // Handle ListItem object
+            // Handle ListItem object - item icon takes precedence over container icon
             const listItem = item;
-            return (_jsxs("li", { className: cn('dndev-list-item', listItem.className), children: [listItem.icon && (_jsx("span", { className: "dndev-list-item-icon", children: listItem.icon })), _jsx("span", { className: "dndev-list-item-content", children: listItem.content })] }, index));
+            const itemIcon = listItem.icon ?? icon;
+            return (_jsxs("li", { className: cn('dndev-list-item', listItem.className), children: [itemIcon && (_jsx("span", { className: "dndev-list-item-icon", children: itemIcon })), _jsx("span", { className: "dndev-list-item-content", children: listItem.content })] }, index));
         }) }));
 };
 export { GAP_VARIANT };

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

@@ -2,7 +2,7 @@
  * @fileoverview NavigationMenu component
  * @description Props-based navigation menu component built on Radix UI primitives
  *
- * @version 0.0.2
+ * @version 0.0.3
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/NavigationMenu/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,uBAON,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAE1D,OAAO,sBAAsB,CAAC;AAG9B,UAAU,kBAAkB;IAC1B,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAChC,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,gDAAgD;IAChD,YAAY,CAAC,EAAE;QACb,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,WAAW,EAAE,MAAM,CAAC;QACpB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACH;AAED,UAAU,mBAAoB,SAAQ,IAAI,CACxC,cAAc,CAAC,OAAO,uBAAuB,CAAC,EAC9C,UAAU,CACX;IACC,+BAA+B;IAC/B,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC7B,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;IACjD,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,aAAa,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;CACpC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,QAAA,MAAM,cAAc,GAAI,4EAQrB,mBAAmB,4CAqOrB,CAAC;AAEF,eAAe,cAAc,CAAC;AAC9B,YAAY,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/NavigationMenu/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,uBAON,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAE1D,OAAO,sBAAsB,CAAC;AAE9B,UAAU,kBAAkB;IAC1B,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAChC,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,gDAAgD;IAChD,YAAY,CAAC,EAAE;QACb,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,WAAW,EAAE,MAAM,CAAC;QACpB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACH;AAED,UAAU,mBAAoB,SAAQ,IAAI,CACxC,cAAc,CAAC,OAAO,uBAAuB,CAAC,EAC9C,UAAU,CACX;IACC,+BAA+B;IAC/B,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC7B,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;IACjD,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,aAAa,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;CACpC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,QAAA,MAAM,cAAc,GAAI,4EAQrB,mBAAmB,4CAqOrB,CAAC;AAEF,eAAe,cAAc,CAAC;AAC9B,YAAY,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,CAAC"}

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

@@ -7,6 +7,15 @@
  * @author AMBROISE PARK Consulting
  */
 import { type FloatingVariant } from '../../utils/constants';
+/**
+ * Popover subcomponents for advanced usage
+ */
+declare const PopoverRoot: import("react").FC<import("@radix-ui/react-popover").PopoverProps>;
+declare const PopoverTriggerComponent: import("react").ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const PopoverContentComponent: ({ className, align, side, sideOffset, onCloseAutoFocus, onInteractOutside, ...props }: import("react").ComponentProps<import("react").ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>> & {
+    onCloseAutoFocus?: (event: Event) => void;
+    onInteractOutside?: (event: Event) => void;
+}) => import("react/jsx-runtime").JSX.Element;
 import type { ReactNode } from 'react';
 /**
  * Popover variant constants - re-exported from shared FLOATING_VARIANT
@@ -61,6 +70,19 @@ export interface PopoverProps {
  * @param {PopoverProps} props - The props for the popover
  * @returns {JSX.Element} The rendered popover
  */
-declare const Popover: ({ trigger, children, open, onOpenChange, align, side, sideOffset, variant, className, modal, onInteractOutside, }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
-export default Popover;
+declare const Popover: {
+    ({ trigger, children, open, onOpenChange, align, side, sideOffset, variant, className, modal, onInteractOutside, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+    Root: import("react").FC<import("@radix-ui/react-popover").PopoverProps>;
+    Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: ({ className, align, side, sideOffset, onCloseAutoFocus, onInteractOutside, ...props }: import("react").ComponentProps<import("react").ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>> & {
+        onCloseAutoFocus?: (event: Event) => void;
+        onInteractOutside?: (event: Event) => void;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+declare const _default: typeof Popover & {
+    Root: typeof PopoverRoot;
+    Trigger: typeof PopoverTriggerComponent;
+    Content: typeof PopoverContentComponent;
+};
+export default _default;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Popover/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAO/E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;GAIG;AACH,eAAO,MAAM,eAAe;;;;;;;;;CAAmB,CAAC;AAEhD,MAAM,WAAW,YAAY;IAC3B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sBAAsB;IACtB,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,oCAAoC;IACpC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,2BAA2B;IAC3B,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gCAAgC;IAChC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAC5C;AAED;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,OAAO,GAAI,mHAYd,YAAY,4CAkBd,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Popover/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAO/E;;GAEG;AACH,QAAA,MAAM,WAAW,oEAAmB,CAAC;AACrC,QAAA,MAAM,uBAAuB,qJAAiB,CAAC;AAC/C,QAAA,MAAM,uBAAuB;oBAK1B,CAAA;qBAA6C,CAAC;6CALH,CAAC;AAE/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;GAIG;AACH,eAAO,MAAM,eAAe;;;;;;;;;CAAmB,CAAC;AAEhD,MAAM,WAAW,YAAY;IAC3B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sBAAsB;IACtB,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,oCAAoC;IACpC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,2BAA2B;IAC3B,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gCAAgC;IAChC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAC5C;AAED;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,OAAO;wHAYV,YAAY;;;;wBAzDZ,CAAA;yBAA6C,CAAC;;CA2EhD,CAAC;wBAMwB,OAAO,OAAO,GAAG;IACzC,IAAI,EAAE,OAAO,WAAW,CAAC;IACzB,OAAO,EAAE,OAAO,uBAAuB,CAAC;IACxC,OAAO,EAAE,OAAO,uBAAuB,CAAC;CACzC;AAJD,wBAIE"}

package/dist/atomic/Popover/index.js

@@ -11,6 +11,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FLOATING_VARIANT } from '../../utils/constants';
 import { cn, getVariantDataAttrs } from '../../utils/helpers';
 import PopoverPrimitive, { PopoverTrigger, PopoverContent, } from './PopoverPrimitive';
+/**
+ * Popover subcomponents for advanced usage
+ */
+const PopoverRoot = PopoverPrimitive;
+const PopoverTriggerComponent = PopoverTrigger;
+const PopoverContentComponent = PopoverContent;
 /**
  * Popover variant constants - re-exported from shared FLOATING_VARIANT
  * Matches .dndev-floating CSS class
@@ -35,4 +41,7 @@ const Popover = ({ trigger, children, open, onOpenChange, align = 'start', side
     const variantAttrs = getVariantDataAttrs({ variant });
     return (_jsxs(PopoverPrimitive, { open: open, onOpenChange: onOpenChange, modal: modal, children: [trigger && _jsx(PopoverTrigger, { asChild: true, children: trigger }), _jsx(PopoverContent, { align: align, side: side, sideOffset: sideOffset, className: cn('dndev-floating', className), ...variantAttrs, onInteractOutside: onInteractOutside, children: children })] }));
 };
+Popover.Root = PopoverRoot;
+Popover.Trigger = PopoverTriggerComponent;
+Popover.Content = PopoverContentComponent;
 export default Popover;

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

@@ -3,7 +3,7 @@
  * @description Accessible radio group component built on Radix UI primitives with semantic color variants.
  * Provides props-based API for 90% use cases with items prop.
  *
- * @version 0.0.1
+ * @version 0.0.3
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
@@ -16,6 +16,8 @@ export interface RadioGroupProps extends Omit<RadioGroupRootProps, 'children'> {
     variant?: ControlVariant;
     /** List of radio options (alternative to children) */
     items?: RadioOption[];
+    /** Grid columns (if provided, uses Grid layout instead of Stack) */
+    gridCols?: 1 | 2 | 3 | 4 | 5 | 6 | 10 | 12 | 'auto-fit' | 'auto-fill';
     /** Custom content to render (for power users) */
     children?: ReactNode;
 }
@@ -38,7 +40,7 @@ export interface RadioGroupProps extends Omit<RadioGroupRootProps, 'children'> {
  * @param {RadioGroupProps} props - The props for the radio group
  * @returns {JSX.Element} The rendered radio group
  */
-declare const RadioGroup: ({ variant, className, items, children, ...props }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+declare const RadioGroup: ({ variant, className, items, gridCols, children, ...props }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
 export default RadioGroup;
 export { CONTROL_VARIANT as RADIOGROUP_VARIANT };
 export type { RadioOption, ControlVariant as RadioGroupVariant };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/RadioGroup/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,OAA4B,EAI1B,KAAK,WAAW,EAChB,KAAK,mBAAmB,EACzB,MAAM,uBAAuB,CAAC;AAI/B,OAAO,EAAE,eAAe,EAAE,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAG7E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,kBAAkB,CAAC;AAoB1B,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC;IAC5E,6BAA6B;IAC7B,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,sDAAsD;IACtD,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,UAAU,GAAI,mDAMjB,eAAe,4CAmCjB,CAAC;AAEF,eAAe,UAAU,CAAC;AAC1B,OAAO,EAAE,eAAe,IAAI,kBAAkB,EAAE,CAAC;AACjD,YAAY,EAAE,WAAW,EAAE,cAAc,IAAI,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/RadioGroup/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,OAA4B,EAI1B,KAAK,WAAW,EAChB,KAAK,mBAAmB,EACzB,MAAM,uBAAuB,CAAC;AAI/B,OAAO,EAAE,eAAe,EAAE,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE7E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,kBAAkB,CAAC;AAoB1B,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC;IAC5E,6BAA6B;IAC7B,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,sDAAsD;IACtD,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,UAAU,GAAG,WAAW,CAAC;IACtE,iDAAiD;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,UAAU,GAAI,6DAOjB,eAAe,4CAyBjB,CAAC;AAEF,eAAe,UAAU,CAAC;AAC1B,OAAO,EAAE,eAAe,IAAI,kBAAkB,EAAE,CAAC;AACjD,YAAY,EAAE,WAAW,EAAE,cAAc,IAAI,iBAAiB,EAAE,CAAC"}

package/dist/atomic/RadioGroup/index.js

@@ -5,7 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @description Accessible radio group component built on Radix UI primitives with semantic color variants.
  * Provides props-based API for 90% use cases with items prop.
  *
- * @version 0.0.1
+ * @version 0.0.3
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
@@ -13,9 +13,8 @@ import RadioGroupPrimitive, { RadioGroupRootPrimitive, RadioGroupItemPrimitive,
 import { cva } from 'class-variance-authority';
 import { cn, getVariantDataAttrs } from '../../utils/helpers';
 import { CONTROL_VARIANT } from '../../utils/constants';
-import Stack from '../Stack';
 import './RadioGroup.css';
-const radioGroupVariants = cva('dndev-radio-group', {
+const radioGroupVariants = cva('dndev-radio-group dndev-control-group', {
     variants: {
         variant: {
             [CONTROL_VARIANT.DEFAULT]: '',
@@ -51,9 +50,9 @@ const radioGroupVariants = cva('dndev-radio-group', {
  * @param {RadioGroupProps} props - The props for the radio group
  * @returns {JSX.Element} The rendered radio group
  */
-const RadioGroup = ({ variant, className, items = [], children, ...props }) => {
+const RadioGroup = ({ variant, className, items = [], gridCols, children, ...props }) => {
     const variantAttrs = getVariantDataAttrs({ variant });
-    return (_jsxs(RadioGroupRootPrimitive, { className: cn(radioGroupVariants({ variant }), className), ...variantAttrs, ...props, children: [children, items.length > 0 && (_jsx(Stack, { gap: "tight", children: items.map((option) => (_jsxs(Stack, { as: "label", direction: "row", align: "center", gap: "tight", className: "dndev-text-base", children: [_jsx(RadioGroupItemPrimitive, { value: option.value, className: "dndev-control dndev-size-md", ...variantAttrs, children: _jsx(RadioGroupIndicatorPrimitive, {}) }), _jsx("span", { children: option.label })] }, option.value))) }))] }));
+    return (_jsxs(RadioGroupRootPrimitive, { className: cn(radioGroupVariants({ variant }), className), "data-cols": gridCols, ...variantAttrs, ...props, children: [children, items.map((option) => (_jsxs("label", { children: [_jsx(RadioGroupItemPrimitive, { value: option.value, className: "dndev-control dndev-size-md", ...variantAttrs, children: _jsx(RadioGroupIndicatorPrimitive, {}) }), _jsx("span", { children: option.label })] }, option.value)))] }));
 };
 export default RadioGroup;
 export { CONTROL_VARIANT as RADIOGROUP_VARIANT };

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

@@ -1,22 +1,32 @@
 /**
  * @fileoverview Section component
- * @description Minimal layout section with title, optional separator, and grid.
+ * @description Minimal layout section with title, optional separator, and tone backgrounds.
  * Content width is automatically constrained by PageContainer's --content-width variable.
  *
  * @example
  * ```tsx
+ * // Fixed 3 columns
  * <Section title="Features" gridCols={3}>
- *   <Card title="Feature 1" />
- *   <Card title="Feature 2" />
- *   <Card title="Feature 3" />
+ *   <Card />
+ *   <Card />
+ *   <Card />
+ * </Section>
+ *
+ * // Responsive: [mobile, tablet, laptop, desktop]
+ * <Section title="Features" gridCols={[1, 1, 2, 3]}>
+ *   <Card />
+ *   <Card />
+ *   <Card />
  * </Section>
  * ```
  *
- * @version 0.0.2
+ * @version 0.0.4
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
 import { type ElementType, type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type ResponsiveCols } from '../Grid';
+import './Section.css';
 /**
  * Section-specific props
  */
@@ -34,29 +44,38 @@ interface SectionOwnProps {
     separator?: boolean;
     /** Tone system for visual rhythm */
     tone?: 'base' | 'muted' | 'elevated' | 'contrast' | 'accent';
-    /** Grid columns (1-4) */
-    gridCols?: 1 | 2 | 3 | 4;
-    /** Grid gap size */
-    gridGap?: 'none' | 'tight' | 'medium' | 'large';
     /**
-     * Content alignment
+     * Content alignment (text alignment)
      * @default 'center'
      */
     align?: 'start' | 'center' | 'end';
+    /**
+     * Grid columns - fixed or responsive
+     * When provided, wraps children in Grid
+     * @example 3 - always 3 columns
+     * @example [1, 1, 2, 3] - responsive: 1 mobile/tablet, 2 laptop, 3 desktop
+     */
+    gridCols?: number | ResponsiveCols;
+    /**
+     * Grid gap size
+     * @default 'medium'
+     */
+    gridGap?: 'none' | 'tight' | 'medium' | 'large';
 }
 /**
  * Polymorphic Section props
  */
 export type SectionProps<T extends ElementType = 'section'> = SectionOwnProps & Omit<ComponentPropsWithRef<T>, keyof SectionOwnProps>;
 /**
- * Minimal layout section with title, optional separator, and grid.
+ * Minimal layout section with title, optional separator, and tone backgrounds.
  *
  * @component
  * @example
  * ```tsx
- * <Section title="Features" gridCols={3}>
- *   <Card title="Feature 1" />
- *   <Card title="Feature 2" />
+ * <Section title="Features" gridCols={[1, 1, 2, 3]}>
+ *   <Card />
+ *   <Card />
+ *   <Card />
  * </Section>
  * ```
  */

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

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