@fragments-sdk/ui 0.13.0 → 0.14.0

package/dist/components/BentoGrid/index.js

@@ -26,7 +26,8 @@ const BentoGrid = React.forwardRef(
     columns = 3,
     gap = "md",
     className,
-    style
+    style,
+    ...htmlProps
   }, ref) {
     const classes = [
       styles.grid,
@@ -34,7 +35,7 @@ const BentoGrid = React.forwardRef(
       gapClasses[gap],
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsx("div", { ref, className: classes, style, children });
+    return /* @__PURE__ */ jsx("div", { ref, ...htmlProps, className: classes, style, children });
   }
 );
 const BentoGridItem = React.forwardRef(
@@ -42,16 +43,18 @@ const BentoGridItem = React.forwardRef(
     children,
     colSpan,
     rowSpan,
-    className
+    className,
+    style,
+    ...htmlProps
   }, ref) {
     const spanVars = {
       ...getSpanVars(colSpan, "bento-col-span"),
       ...getSpanVars(rowSpan, "bento-row-span")
     };
     const hasVars = Object.keys(spanVars).length > 0;
-    const inlineStyle = hasVars ? spanVars : void 0;
+    const inlineStyle = hasVars ? { ...spanVars, ...style } : style;
     const classes = [styles.item, className].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsx("div", { ref, className: classes, style: inlineStyle, children });
+    return /* @__PURE__ */ jsx("div", { ref, ...htmlProps, className: classes, style: inlineStyle, children });
   }
 );
 BentoGrid.Item = BentoGridItem;

package/dist/components/BentoGrid/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/BentoGrid/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport styles from './BentoGrid.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\ntype SpanValue = 1 | 2 | 3;\n\nexport interface ResponsiveSpan {\n  /** Default (mobile-first) */\n  base?: SpanValue;\n  /** ≥640px */\n  sm?: SpanValue;\n  /** ≥768px */\n  md?: SpanValue;\n  /** ≥1024px */\n  lg?: SpanValue;\n  /** ≥1280px */\n  xl?: SpanValue;\n}\n\nexport interface BentoGridProps {\n  children?: React.ReactNode;\n  /** Number of columns (default: 3) — auto-collapses responsively */\n  columns?: 2 | 3 | 4;\n  /** Gap between grid items */\n  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Additional class name */\n  className?: string;\n  /** Inline styles */\n  style?: React.CSSProperties;\n}\n\nexport interface BentoGridItemProps {\n  children?: React.ReactNode;\n  /** Columns to span — number for all breakpoints, object for per-breakpoint */\n  colSpan?: SpanValue | ResponsiveSpan;\n  /** Rows to span — number for all breakpoints, object for per-breakpoint */\n  rowSpan?: SpanValue | ResponsiveSpan;\n  /** Additional class name */\n  className?: string;\n}\n\n// ============================================\n// Helpers\n// ============================================\n\nconst gapClasses: Record<NonNullable<BentoGridProps['gap']>, string> = {\n  none: styles.gapNone,\n  xs: styles.gapXs,\n  sm: styles.gapSm,\n  md: styles.gapMd,\n  lg: styles.gapLg,\n  xl: styles.gapXl,\n};\n\nfunction getSpanVars(\n  span: SpanValue | ResponsiveSpan | undefined,\n  prefix: string\n): Record<string, number> {\n  if (!span || span === 1) return {};\n  if (typeof span === 'number') return { [`--${prefix}`]: span };\n  const vars: Record<string, number> = {};\n  if (span.base && span.base > 1) vars[`--${prefix}`] = span.base;\n  if (span.sm) vars[`--${prefix}-sm`] = span.sm;\n  if (span.md) vars[`--${prefix}-md`] = span.md;\n  if (span.lg) vars[`--${prefix}-lg`] = span.lg;\n  if (span.xl) vars[`--${prefix}-xl`] = span.xl;\n  return vars;\n}\n\n// ============================================\n// BentoGrid Component\n// ============================================\n\nexport const BentoGrid = React.forwardRef<HTMLDivElement, BentoGridProps>(\n  function BentoGrid(\n    {\n      children,\n      columns = 3,\n      gap = 'md',\n      className,\n      style,\n    },\n    ref\n  ) {\n    const classes = [\n      styles.grid,\n      styles[`columns${columns}`],\n      gapClasses[gap],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <div ref={ref} className={classes} style={style}>\n        {children}\n      </div>\n    );\n  }\n) as BentoGridComponent;\n\n// ============================================\n// BentoGrid.Item Sub-component\n// ============================================\n\nconst BentoGridItem = React.forwardRef<HTMLDivElement, BentoGridItemProps>(\n  function BentoGridItem(\n    {\n      children,\n      colSpan,\n      rowSpan,\n      className,\n    },\n    ref\n  ) {\n    const spanVars = {\n      ...getSpanVars(colSpan, 'bento-col-span'),\n      ...getSpanVars(rowSpan, 'bento-row-span'),\n    };\n\n    const hasVars = Object.keys(spanVars).length > 0;\n    const inlineStyle = hasVars\n      ? (spanVars as unknown as React.CSSProperties)\n      : undefined;\n\n    const classes = [styles.item, className].filter(Boolean).join(' ');\n\n    return (\n      <div ref={ref} className={classes} style={inlineStyle}>\n        {children}\n      </div>\n    );\n  }\n);\n\n// ============================================\n// Compound component type\n// ============================================\n\ninterface BentoGridComponent\n  extends React.ForwardRefExoticComponent<BentoGridProps & React.RefAttributes<HTMLDivElement>> {\n  Item: typeof BentoGridItem;\n}\n\n(BentoGrid as BentoGridComponent).Item = BentoGridItem;\n"],"names":["BentoGrid","BentoGridItem"],"mappings":";;;AAgDA,MAAM,aAAiE;AAAA,EACrE,MAAM,OAAO;AAAA,EACb,IAAI,OAAO;AAAA,EACX,IAAI,OAAO;AAAA,EACX,IAAI,OAAO;AAAA,EACX,IAAI,OAAO;AAAA,EACX,IAAI,OAAO;AACb;AAEA,SAAS,YACP,MACA,QACwB;AACxB,MAAI,CAAC,QAAQ,SAAS,UAAU,CAAA;AAChC,MAAI,OAAO,SAAS,SAAU,QAAO,EAAE,CAAC,KAAK,MAAM,EAAE,GAAG,KAAA;AACxD,QAAM,OAA+B,CAAA;AACrC,MAAI,KAAK,QAAQ,KAAK,OAAO,QAAQ,KAAK,MAAM,EAAE,IAAI,KAAK;AAC3D,MAAI,KAAK,GAAI,MAAK,KAAK,MAAM,KAAK,IAAI,KAAK;AAC3C,MAAI,KAAK,GAAI,MAAK,KAAK,MAAM,KAAK,IAAI,KAAK;AAC3C,MAAI,KAAK,GAAI,MAAK,KAAK,MAAM,KAAK,IAAI,KAAK;AAC3C,MAAI,KAAK,GAAI,MAAK,KAAK,MAAM,KAAK,IAAI,KAAK;AAC3C,SAAO;AACT;AAMO,MAAM,YAAY,MAAM;AAAA,EAC7B,SAASA,WACP;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EAAA,GAEF,KACA;AACA,UAAM,UAAU;AAAA,MACd,OAAO;AAAA,MACP,OAAO,UAAU,OAAO,EAAE;AAAA,MAC1B,WAAW,GAAG;AAAA,MACd;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,+BACG,OAAA,EAAI,KAAU,WAAW,SAAS,OAChC,UACH;AAAA,EAEJ;AACF;AAMA,MAAM,gBAAgB,MAAM;AAAA,EAC1B,SAASC,eACP;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEF,KACA;AACA,UAAM,WAAW;AAAA,MACf,GAAG,YAAY,SAAS,gBAAgB;AAAA,MACxC,GAAG,YAAY,SAAS,gBAAgB;AAAA,IAAA;AAG1C,UAAM,UAAU,OAAO,KAAK,QAAQ,EAAE,SAAS;AAC/C,UAAM,cAAc,UACf,WACD;AAEJ,UAAM,UAAU,CAAC,OAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjE,+BACG,OAAA,EAAI,KAAU,WAAW,SAAS,OAAO,aACvC,UACH;AAAA,EAEJ;AACF;AAWC,UAAiC,OAAO;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/BentoGrid/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport styles from './BentoGrid.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\ntype SpanValue = 1 | 2 | 3;\n\nexport interface ResponsiveSpan {\n  /** Default (mobile-first) */\n  base?: SpanValue;\n  /** ≥640px */\n  sm?: SpanValue;\n  /** ≥768px */\n  md?: SpanValue;\n  /** ≥1024px */\n  lg?: SpanValue;\n  /** ≥1280px */\n  xl?: SpanValue;\n}\n\nexport interface BentoGridProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  /** Number of columns (default: 3) — auto-collapses responsively */\n  columns?: 2 | 3 | 4;\n  /** Gap between grid items */\n  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n}\n\nexport interface BentoGridItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  /** Columns to span — number for all breakpoints, object for per-breakpoint */\n  colSpan?: SpanValue | ResponsiveSpan;\n  /** Rows to span — number for all breakpoints, object for per-breakpoint */\n  rowSpan?: SpanValue | ResponsiveSpan;\n}\n\n// ============================================\n// Helpers\n// ============================================\n\nconst gapClasses: Record<NonNullable<BentoGridProps['gap']>, string> = {\n  none: styles.gapNone,\n  xs: styles.gapXs,\n  sm: styles.gapSm,\n  md: styles.gapMd,\n  lg: styles.gapLg,\n  xl: styles.gapXl,\n};\n\nfunction getSpanVars(\n  span: SpanValue | ResponsiveSpan | undefined,\n  prefix: string\n): Record<string, number> {\n  if (!span || span === 1) return {};\n  if (typeof span === 'number') return { [`--${prefix}`]: span };\n  const vars: Record<string, number> = {};\n  if (span.base && span.base > 1) vars[`--${prefix}`] = span.base;\n  if (span.sm) vars[`--${prefix}-sm`] = span.sm;\n  if (span.md) vars[`--${prefix}-md`] = span.md;\n  if (span.lg) vars[`--${prefix}-lg`] = span.lg;\n  if (span.xl) vars[`--${prefix}-xl`] = span.xl;\n  return vars;\n}\n\n// ============================================\n// BentoGrid Component\n// ============================================\n\nexport const BentoGrid = React.forwardRef<HTMLDivElement, BentoGridProps>(\n  function BentoGrid(\n    {\n      children,\n      columns = 3,\n      gap = 'md',\n      className,\n      style,\n      ...htmlProps\n    },\n    ref\n  ) {\n    const classes = [\n      styles.grid,\n      styles[`columns${columns}`],\n      gapClasses[gap],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <div ref={ref} {...htmlProps} className={classes} style={style}>\n        {children}\n      </div>\n    );\n  }\n) as BentoGridComponent;\n\n// ============================================\n// BentoGrid.Item Sub-component\n// ============================================\n\nconst BentoGridItem = React.forwardRef<HTMLDivElement, BentoGridItemProps>(\n  function BentoGridItem(\n    {\n      children,\n      colSpan,\n      rowSpan,\n      className,\n      style,\n      ...htmlProps\n    },\n    ref\n  ) {\n    const spanVars = {\n      ...getSpanVars(colSpan, 'bento-col-span'),\n      ...getSpanVars(rowSpan, 'bento-row-span'),\n    };\n\n    const hasVars = Object.keys(spanVars).length > 0;\n    const inlineStyle = hasVars\n      ? ({ ...(spanVars as unknown as React.CSSProperties), ...style } as React.CSSProperties)\n      : style;\n\n    const classes = [styles.item, className].filter(Boolean).join(' ');\n\n    return (\n      <div ref={ref} {...htmlProps} className={classes} style={inlineStyle}>\n        {children}\n      </div>\n    );\n  }\n);\n\n// ============================================\n// Compound component type\n// ============================================\n\ninterface BentoGridComponent\n  extends React.ForwardRefExoticComponent<BentoGridProps & React.RefAttributes<HTMLDivElement>> {\n  Item: typeof BentoGridItem;\n}\n\n(BentoGrid as BentoGridComponent).Item = BentoGridItem;\n"],"names":["BentoGrid","BentoGridItem"],"mappings":";;;AA0CA,MAAM,aAAiE;AAAA,EACrE,MAAM,OAAO;AAAA,EACb,IAAI,OAAO;AAAA,EACX,IAAI,OAAO;AAAA,EACX,IAAI,OAAO;AAAA,EACX,IAAI,OAAO;AAAA,EACX,IAAI,OAAO;AACb;AAEA,SAAS,YACP,MACA,QACwB;AACxB,MAAI,CAAC,QAAQ,SAAS,UAAU,CAAA;AAChC,MAAI,OAAO,SAAS,SAAU,QAAO,EAAE,CAAC,KAAK,MAAM,EAAE,GAAG,KAAA;AACxD,QAAM,OAA+B,CAAA;AACrC,MAAI,KAAK,QAAQ,KAAK,OAAO,QAAQ,KAAK,MAAM,EAAE,IAAI,KAAK;AAC3D,MAAI,KAAK,GAAI,MAAK,KAAK,MAAM,KAAK,IAAI,KAAK;AAC3C,MAAI,KAAK,GAAI,MAAK,KAAK,MAAM,KAAK,IAAI,KAAK;AAC3C,MAAI,KAAK,GAAI,MAAK,KAAK,MAAM,KAAK,IAAI,KAAK;AAC3C,MAAI,KAAK,GAAI,MAAK,KAAK,MAAM,KAAK,IAAI,KAAK;AAC3C,SAAO;AACT;AAMO,MAAM,YAAY,MAAM;AAAA,EAC7B,SAASA,WACP;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,KACA;AACA,UAAM,UAAU;AAAA,MACd,OAAO;AAAA,MACP,OAAO,UAAU,OAAO,EAAE;AAAA,MAC1B,WAAW,GAAG;AAAA,MACd;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACE,oBAAC,SAAI,KAAW,GAAG,WAAW,WAAW,SAAS,OAC/C,UACH;AAAA,EAEJ;AACF;AAMA,MAAM,gBAAgB,MAAM;AAAA,EAC1B,SAASC,eACP;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,KACA;AACA,UAAM,WAAW;AAAA,MACf,GAAG,YAAY,SAAS,gBAAgB;AAAA,MACxC,GAAG,YAAY,SAAS,gBAAgB;AAAA,IAAA;AAG1C,UAAM,UAAU,OAAO,KAAK,QAAQ,EAAE,SAAS;AAC/C,UAAM,cAAc,UACf,EAAE,GAAI,UAA6C,GAAG,UACvD;AAEJ,UAAM,UAAU,CAAC,OAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjE,WACE,oBAAC,SAAI,KAAW,GAAG,WAAW,WAAW,SAAS,OAAO,aACtD,SAAA,CACH;AAAA,EAEJ;AACF;AAWC,UAAiC,OAAO;"}

package/dist/components/Box/index.cjs

@@ -52,7 +52,8 @@ const BoxRoot = React__namespace.forwardRef(
     minHeight,
     maxHeight,
     className,
-    style
+    style,
+    ...htmlProps
   }, ref) {
     const classes = [
       Box_module.default.box,
@@ -85,7 +86,16 @@ const BoxRoot = React__namespace.forwardRef(
     if (maxHeight != null) sizingStyle.maxHeight = toCss(maxHeight);
     const hasSizing = Object.keys(sizingStyle).length > 0;
     const mergedStyle = hasSizing ? { ...sizingStyle, ...style } : style;
-    return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: classes, style: mergedStyle, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ref,
+        ...htmlProps,
+        className: classes,
+        style: mergedStyle,
+        children
+      }
+    );
   }
 );
 const Box = Object.assign(BoxRoot, {

package/dist/components/Box/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Box/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport styles from './Box.module.scss';\n\nexport interface BoxProps {\n  children?: React.ReactNode;\n  /** HTML element to render */\n  as?: 'div' | 'section' | 'article' | 'aside' | 'main' | 'header' | 'footer' | 'nav' | 'span';\n  /** Padding on all sides */\n  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Horizontal padding (overrides padding) */\n  paddingX?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Vertical padding (overrides padding) */\n  paddingY?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Margin on all sides */\n  margin?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';\n  /** Horizontal margin (overrides margin) */\n  marginX?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';\n  /** Vertical margin (overrides margin) */\n  marginY?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';\n  /** Background color */\n  background?: 'none' | 'primary' | 'secondary' | 'tertiary' | 'elevated';\n  /** Border radius */\n  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n  /** Border */\n  border?: boolean;\n  /** Top border */\n  borderTop?: boolean;\n  /** Bottom border */\n  borderBottom?: boolean;\n  /** Left border */\n  borderLeft?: boolean;\n  /** Right border */\n  borderRight?: boolean;\n  /** Border color variant */\n  borderColor?: 'default' | 'strong' | 'accent' | 'danger';\n  /** Box shadow */\n  shadow?: 'sm' | 'md' | 'lg' | 'none';\n  /** Overflow behavior */\n  overflow?: 'hidden' | 'auto' | 'scroll' | 'visible';\n  /** Text color */\n  color?: 'primary' | 'secondary' | 'tertiary' | 'accent' | 'inverse';\n  /** Display type */\n  display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none';\n  /** Width (CSS value, e.g. \"100%\", \"300px\", 200) */\n  width?: string | number;\n  /** Min width */\n  minWidth?: string | number;\n  /** Max width */\n  maxWidth?: string | number;\n  /** Height (CSS value, e.g. \"100%\", \"300px\", 200) */\n  height?: string | number;\n  /** Min height */\n  minHeight?: string | number;\n  /** Max height */\n  maxHeight?: string | number;\n  /** Additional class name */\n  className?: string;\n  /** Inline styles */\n  style?: React.CSSProperties;\n}\n\n/** Convert string | number to CSS value */\nfunction toCss(value: string | number): string {\n  return typeof value === 'number' ? `${value}px` : value;\n}\n\nconst BoxRoot = React.forwardRef<HTMLElement, BoxProps>(\n  function Box(\n    {\n      children,\n      as: Component = 'div',\n      padding,\n      paddingX,\n      paddingY,\n      margin,\n      marginX,\n      marginY,\n      background,\n      rounded,\n      border,\n      borderTop,\n      borderBottom,\n      borderLeft,\n      borderRight,\n      borderColor,\n      shadow,\n      overflow,\n      color,\n      display,\n      width,\n      minWidth,\n      maxWidth,\n      height,\n      minHeight,\n      maxHeight,\n      className,\n      style,\n    },\n    ref\n  ) {\n    const classes = [\n      styles.box,\n      padding && styles[`p-${padding}`],\n      paddingX && styles[`px-${paddingX}`],\n      paddingY && styles[`py-${paddingY}`],\n      margin && styles[`m-${margin}`],\n      marginX && styles[`mx-${marginX}`],\n      marginY && styles[`my-${marginY}`],\n      background && styles[`bg-${background}`],\n      rounded && styles[`rounded-${rounded}`],\n      border && styles.border,\n      borderTop && styles.borderTop,\n      borderBottom && styles.borderBottom,\n      borderLeft && styles.borderLeft,\n      borderRight && styles.borderRight,\n      borderColor && styles[`borderColor-${borderColor}`],\n      shadow && styles[`shadow-${shadow}`],\n      overflow && styles[`overflow-${overflow}`],\n      color && styles[`color-${color}`],\n      display && styles[`display-${display}`],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    // Build sizing styles only when props are provided\n    const sizingStyle: React.CSSProperties = {};\n    if (width != null) sizingStyle.width = toCss(width);\n    if (minWidth != null) sizingStyle.minWidth = toCss(minWidth);\n    if (maxWidth != null) sizingStyle.maxWidth = toCss(maxWidth);\n    if (height != null) sizingStyle.height = toCss(height);\n    if (minHeight != null) sizingStyle.minHeight = toCss(minHeight);\n    if (maxHeight != null) sizingStyle.maxHeight = toCss(maxHeight);\n\n    const hasSizing = Object.keys(sizingStyle).length > 0;\n    const mergedStyle = hasSizing ? { ...sizingStyle, ...style } : style;\n\n    return (\n      <Component ref={ref as React.Ref<never>} className={classes} style={mergedStyle}>\n        {children}\n      </Component>\n    );\n  }\n);\n\nexport const Box = Object.assign(BoxRoot, {\n  Root: BoxRoot,\n});\n"],"names":["React","Box","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA8DA,SAAS,MAAM,OAAgC;AAC7C,SAAO,OAAO,UAAU,WAAW,GAAG,KAAK,OAAO;AACpD;AAEA,MAAM,UAAUA,iBAAM;AAAA,EACpB,SAASC,KACP;AAAA,IACE;AAAA,IACA,IAAI,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEF,KACA;AACA,UAAM,UAAU;AAAA,MACdC,WAAAA,QAAO;AAAA,MACP,WAAWA,WAAAA,QAAO,KAAK,OAAO,EAAE;AAAA,MAChC,YAAYA,WAAAA,QAAO,MAAM,QAAQ,EAAE;AAAA,MACnC,YAAYA,WAAAA,QAAO,MAAM,QAAQ,EAAE;AAAA,MACnC,UAAUA,WAAAA,QAAO,KAAK,MAAM,EAAE;AAAA,MAC9B,WAAWA,WAAAA,QAAO,MAAM,OAAO,EAAE;AAAA,MACjC,WAAWA,WAAAA,QAAO,MAAM,OAAO,EAAE;AAAA,MACjC,cAAcA,WAAAA,QAAO,MAAM,UAAU,EAAE;AAAA,MACvC,WAAWA,WAAAA,QAAO,WAAW,OAAO,EAAE;AAAA,MACtC,UAAUA,WAAAA,QAAO;AAAA,MACjB,aAAaA,WAAAA,QAAO;AAAA,MACpB,gBAAgBA,WAAAA,QAAO;AAAA,MACvB,cAAcA,WAAAA,QAAO;AAAA,MACrB,eAAeA,WAAAA,QAAO;AAAA,MACtB,eAAeA,WAAAA,QAAO,eAAe,WAAW,EAAE;AAAA,MAClD,UAAUA,WAAAA,QAAO,UAAU,MAAM,EAAE;AAAA,MACnC,YAAYA,WAAAA,QAAO,YAAY,QAAQ,EAAE;AAAA,MACzC,SAASA,WAAAA,QAAO,SAAS,KAAK,EAAE;AAAA,MAChC,WAAWA,WAAAA,QAAO,WAAW,OAAO,EAAE;AAAA,MACtC;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAGX,UAAM,cAAmC,CAAA;AACzC,QAAI,SAAS,KAAM,aAAY,QAAQ,MAAM,KAAK;AAClD,QAAI,YAAY,KAAM,aAAY,WAAW,MAAM,QAAQ;AAC3D,QAAI,YAAY,KAAM,aAAY,WAAW,MAAM,QAAQ;AAC3D,QAAI,UAAU,KAAM,aAAY,SAAS,MAAM,MAAM;AACrD,QAAI,aAAa,KAAM,aAAY,YAAY,MAAM,SAAS;AAC9D,QAAI,aAAa,KAAM,aAAY,YAAY,MAAM,SAAS;AAE9D,UAAM,YAAY,OAAO,KAAK,WAAW,EAAE,SAAS;AACpD,UAAM,cAAc,YAAY,EAAE,GAAG,aAAa,GAAG,UAAU;AAE/D,0CACG,WAAA,EAAU,KAA8B,WAAW,SAAS,OAAO,aACjE,UACH;AAAA,EAEJ;AACF;AAEO,MAAM,MAAM,OAAO,OAAO,SAAS;AAAA,EACxC,MAAM;AACR,CAAC;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Box/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport styles from './Box.module.scss';\n\nexport interface BoxProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'> {\n  children?: React.ReactNode;\n  /** HTML element to render */\n  as?: 'div' | 'section' | 'article' | 'aside' | 'main' | 'header' | 'footer' | 'nav' | 'span';\n  /** Padding on all sides */\n  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Horizontal padding (overrides padding) */\n  paddingX?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Vertical padding (overrides padding) */\n  paddingY?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Margin on all sides */\n  margin?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';\n  /** Horizontal margin (overrides margin) */\n  marginX?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';\n  /** Vertical margin (overrides margin) */\n  marginY?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';\n  /** Background color */\n  background?: 'none' | 'primary' | 'secondary' | 'tertiary' | 'elevated';\n  /** Border radius */\n  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n  /** Border */\n  border?: boolean;\n  /** Top border */\n  borderTop?: boolean;\n  /** Bottom border */\n  borderBottom?: boolean;\n  /** Left border */\n  borderLeft?: boolean;\n  /** Right border */\n  borderRight?: boolean;\n  /** Border color variant */\n  borderColor?: 'default' | 'strong' | 'accent' | 'danger';\n  /** Box shadow */\n  shadow?: 'sm' | 'md' | 'lg' | 'none';\n  /** Overflow behavior */\n  overflow?: 'hidden' | 'auto' | 'scroll' | 'visible';\n  /** Text color */\n  color?: 'primary' | 'secondary' | 'tertiary' | 'accent' | 'inverse';\n  /** Display type */\n  display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none';\n  /** Width (CSS value, e.g. \"100%\", \"300px\", 200) */\n  width?: string | number;\n  /** Min width */\n  minWidth?: string | number;\n  /** Max width */\n  maxWidth?: string | number;\n  /** Height (CSS value, e.g. \"100%\", \"300px\", 200) */\n  height?: string | number;\n  /** Min height */\n  minHeight?: string | number;\n  /** Max height */\n  maxHeight?: string | number;\n  /** Additional class name */\n  className?: string;\n  /** Inline styles */\n  style?: React.CSSProperties;\n}\n\n/** Convert string | number to CSS value */\nfunction toCss(value: string | number): string {\n  return typeof value === 'number' ? `${value}px` : value;\n}\n\nconst BoxRoot = React.forwardRef<HTMLElement, BoxProps>(\n  function Box(\n    {\n      children,\n      as: Component = 'div',\n      padding,\n      paddingX,\n      paddingY,\n      margin,\n      marginX,\n      marginY,\n      background,\n      rounded,\n      border,\n      borderTop,\n      borderBottom,\n      borderLeft,\n      borderRight,\n      borderColor,\n      shadow,\n      overflow,\n      color,\n      display,\n      width,\n      minWidth,\n      maxWidth,\n      height,\n      minHeight,\n      maxHeight,\n      className,\n      style,\n      ...htmlProps\n    },\n    ref\n  ) {\n    const classes = [\n      styles.box,\n      padding && styles[`p-${padding}`],\n      paddingX && styles[`px-${paddingX}`],\n      paddingY && styles[`py-${paddingY}`],\n      margin && styles[`m-${margin}`],\n      marginX && styles[`mx-${marginX}`],\n      marginY && styles[`my-${marginY}`],\n      background && styles[`bg-${background}`],\n      rounded && styles[`rounded-${rounded}`],\n      border && styles.border,\n      borderTop && styles.borderTop,\n      borderBottom && styles.borderBottom,\n      borderLeft && styles.borderLeft,\n      borderRight && styles.borderRight,\n      borderColor && styles[`borderColor-${borderColor}`],\n      shadow && styles[`shadow-${shadow}`],\n      overflow && styles[`overflow-${overflow}`],\n      color && styles[`color-${color}`],\n      display && styles[`display-${display}`],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    // Build sizing styles only when props are provided\n    const sizingStyle: React.CSSProperties = {};\n    if (width != null) sizingStyle.width = toCss(width);\n    if (minWidth != null) sizingStyle.minWidth = toCss(minWidth);\n    if (maxWidth != null) sizingStyle.maxWidth = toCss(maxWidth);\n    if (height != null) sizingStyle.height = toCss(height);\n    if (minHeight != null) sizingStyle.minHeight = toCss(minHeight);\n    if (maxHeight != null) sizingStyle.maxHeight = toCss(maxHeight);\n\n    const hasSizing = Object.keys(sizingStyle).length > 0;\n    const mergedStyle = hasSizing ? { ...sizingStyle, ...style } : style;\n\n    return (\n      <Component\n        ref={ref as React.Ref<never>}\n        {...htmlProps}\n        className={classes}\n        style={mergedStyle}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nexport const Box = Object.assign(BoxRoot, {\n  Root: BoxRoot,\n});\n"],"names":["React","Box","styles","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA8DA,SAAS,MAAM,OAAgC;AAC7C,SAAO,OAAO,UAAU,WAAW,GAAG,KAAK,OAAO;AACpD;AAEA,MAAM,UAAUA,iBAAM;AAAA,EACpB,SAASC,KACP;AAAA,IACE;AAAA,IACA,IAAI,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,KACA;AACA,UAAM,UAAU;AAAA,MACdC,WAAAA,QAAO;AAAA,MACP,WAAWA,WAAAA,QAAO,KAAK,OAAO,EAAE;AAAA,MAChC,YAAYA,WAAAA,QAAO,MAAM,QAAQ,EAAE;AAAA,MACnC,YAAYA,WAAAA,QAAO,MAAM,QAAQ,EAAE;AAAA,MACnC,UAAUA,WAAAA,QAAO,KAAK,MAAM,EAAE;AAAA,MAC9B,WAAWA,WAAAA,QAAO,MAAM,OAAO,EAAE;AAAA,MACjC,WAAWA,WAAAA,QAAO,MAAM,OAAO,EAAE;AAAA,MACjC,cAAcA,WAAAA,QAAO,MAAM,UAAU,EAAE;AAAA,MACvC,WAAWA,WAAAA,QAAO,WAAW,OAAO,EAAE;AAAA,MACtC,UAAUA,WAAAA,QAAO;AAAA,MACjB,aAAaA,WAAAA,QAAO;AAAA,MACpB,gBAAgBA,WAAAA,QAAO;AAAA,MACvB,cAAcA,WAAAA,QAAO;AAAA,MACrB,eAAeA,WAAAA,QAAO;AAAA,MACtB,eAAeA,WAAAA,QAAO,eAAe,WAAW,EAAE;AAAA,MAClD,UAAUA,WAAAA,QAAO,UAAU,MAAM,EAAE;AAAA,MACnC,YAAYA,WAAAA,QAAO,YAAY,QAAQ,EAAE;AAAA,MACzC,SAASA,WAAAA,QAAO,SAAS,KAAK,EAAE;AAAA,MAChC,WAAWA,WAAAA,QAAO,WAAW,OAAO,EAAE;AAAA,MACtC;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAGX,UAAM,cAAmC,CAAA;AACzC,QAAI,SAAS,KAAM,aAAY,QAAQ,MAAM,KAAK;AAClD,QAAI,YAAY,KAAM,aAAY,WAAW,MAAM,QAAQ;AAC3D,QAAI,YAAY,KAAM,aAAY,WAAW,MAAM,QAAQ;AAC3D,QAAI,UAAU,KAAM,aAAY,SAAS,MAAM,MAAM;AACrD,QAAI,aAAa,KAAM,aAAY,YAAY,MAAM,SAAS;AAC9D,QAAI,aAAa,KAAM,aAAY,YAAY,MAAM,SAAS;AAE9D,UAAM,YAAY,OAAO,KAAK,WAAW,EAAE,SAAS;AACpD,UAAM,cAAc,YAAY,EAAE,GAAG,aAAa,GAAG,UAAU;AAE/D,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACC,GAAG;AAAA,QACJ,WAAW;AAAA,QACX,OAAO;AAAA,QAEN;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEO,MAAM,MAAM,OAAO,OAAO,SAAS;AAAA,EACxC,MAAM;AACR,CAAC;;"}

package/dist/components/Box/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export interface BoxProps {
+export interface BoxProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'> {
     children?: React.ReactNode;
     /** HTML element to render */
     as?: 'div' | 'section' | 'article' | 'aside' | 'main' | 'header' | 'footer' | 'nav' | 'span';

package/dist/components/Box/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Box/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Box/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Box/index.js

@@ -33,7 +33,8 @@ const BoxRoot = React.forwardRef(
     minHeight,
     maxHeight,
     className,
-    style
+    style,
+    ...htmlProps
   }, ref) {
     const classes = [
       styles.box,
@@ -66,7 +67,16 @@ const BoxRoot = React.forwardRef(
     if (maxHeight != null) sizingStyle.maxHeight = toCss(maxHeight);
     const hasSizing = Object.keys(sizingStyle).length > 0;
     const mergedStyle = hasSizing ? { ...sizingStyle, ...style } : style;
-    return /* @__PURE__ */ jsx(Component, { ref, className: classes, style: mergedStyle, children });
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        ...htmlProps,
+        className: classes,
+        style: mergedStyle,
+        children
+      }
+    );
   }
 );
 const Box = Object.assign(BoxRoot, {

package/dist/components/Box/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Box/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport styles from './Box.module.scss';\n\nexport interface BoxProps {\n  children?: React.ReactNode;\n  /** HTML element to render */\n  as?: 'div' | 'section' | 'article' | 'aside' | 'main' | 'header' | 'footer' | 'nav' | 'span';\n  /** Padding on all sides */\n  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Horizontal padding (overrides padding) */\n  paddingX?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Vertical padding (overrides padding) */\n  paddingY?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Margin on all sides */\n  margin?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';\n  /** Horizontal margin (overrides margin) */\n  marginX?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';\n  /** Vertical margin (overrides margin) */\n  marginY?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';\n  /** Background color */\n  background?: 'none' | 'primary' | 'secondary' | 'tertiary' | 'elevated';\n  /** Border radius */\n  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n  /** Border */\n  border?: boolean;\n  /** Top border */\n  borderTop?: boolean;\n  /** Bottom border */\n  borderBottom?: boolean;\n  /** Left border */\n  borderLeft?: boolean;\n  /** Right border */\n  borderRight?: boolean;\n  /** Border color variant */\n  borderColor?: 'default' | 'strong' | 'accent' | 'danger';\n  /** Box shadow */\n  shadow?: 'sm' | 'md' | 'lg' | 'none';\n  /** Overflow behavior */\n  overflow?: 'hidden' | 'auto' | 'scroll' | 'visible';\n  /** Text color */\n  color?: 'primary' | 'secondary' | 'tertiary' | 'accent' | 'inverse';\n  /** Display type */\n  display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none';\n  /** Width (CSS value, e.g. \"100%\", \"300px\", 200) */\n  width?: string | number;\n  /** Min width */\n  minWidth?: string | number;\n  /** Max width */\n  maxWidth?: string | number;\n  /** Height (CSS value, e.g. \"100%\", \"300px\", 200) */\n  height?: string | number;\n  /** Min height */\n  minHeight?: string | number;\n  /** Max height */\n  maxHeight?: string | number;\n  /** Additional class name */\n  className?: string;\n  /** Inline styles */\n  style?: React.CSSProperties;\n}\n\n/** Convert string | number to CSS value */\nfunction toCss(value: string | number): string {\n  return typeof value === 'number' ? `${value}px` : value;\n}\n\nconst BoxRoot = React.forwardRef<HTMLElement, BoxProps>(\n  function Box(\n    {\n      children,\n      as: Component = 'div',\n      padding,\n      paddingX,\n      paddingY,\n      margin,\n      marginX,\n      marginY,\n      background,\n      rounded,\n      border,\n      borderTop,\n      borderBottom,\n      borderLeft,\n      borderRight,\n      borderColor,\n      shadow,\n      overflow,\n      color,\n      display,\n      width,\n      minWidth,\n      maxWidth,\n      height,\n      minHeight,\n      maxHeight,\n      className,\n      style,\n    },\n    ref\n  ) {\n    const classes = [\n      styles.box,\n      padding && styles[`p-${padding}`],\n      paddingX && styles[`px-${paddingX}`],\n      paddingY && styles[`py-${paddingY}`],\n      margin && styles[`m-${margin}`],\n      marginX && styles[`mx-${marginX}`],\n      marginY && styles[`my-${marginY}`],\n      background && styles[`bg-${background}`],\n      rounded && styles[`rounded-${rounded}`],\n      border && styles.border,\n      borderTop && styles.borderTop,\n      borderBottom && styles.borderBottom,\n      borderLeft && styles.borderLeft,\n      borderRight && styles.borderRight,\n      borderColor && styles[`borderColor-${borderColor}`],\n      shadow && styles[`shadow-${shadow}`],\n      overflow && styles[`overflow-${overflow}`],\n      color && styles[`color-${color}`],\n      display && styles[`display-${display}`],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    // Build sizing styles only when props are provided\n    const sizingStyle: React.CSSProperties = {};\n    if (width != null) sizingStyle.width = toCss(width);\n    if (minWidth != null) sizingStyle.minWidth = toCss(minWidth);\n    if (maxWidth != null) sizingStyle.maxWidth = toCss(maxWidth);\n    if (height != null) sizingStyle.height = toCss(height);\n    if (minHeight != null) sizingStyle.minHeight = toCss(minHeight);\n    if (maxHeight != null) sizingStyle.maxHeight = toCss(maxHeight);\n\n    const hasSizing = Object.keys(sizingStyle).length > 0;\n    const mergedStyle = hasSizing ? { ...sizingStyle, ...style } : style;\n\n    return (\n      <Component ref={ref as React.Ref<never>} className={classes} style={mergedStyle}>\n        {children}\n      </Component>\n    );\n  }\n);\n\nexport const Box = Object.assign(BoxRoot, {\n  Root: BoxRoot,\n});\n"],"names":["Box"],"mappings":";;;AA8DA,SAAS,MAAM,OAAgC;AAC7C,SAAO,OAAO,UAAU,WAAW,GAAG,KAAK,OAAO;AACpD;AAEA,MAAM,UAAU,MAAM;AAAA,EACpB,SAASA,KACP;AAAA,IACE;AAAA,IACA,IAAI,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEF,KACA;AACA,UAAM,UAAU;AAAA,MACd,OAAO;AAAA,MACP,WAAW,OAAO,KAAK,OAAO,EAAE;AAAA,MAChC,YAAY,OAAO,MAAM,QAAQ,EAAE;AAAA,MACnC,YAAY,OAAO,MAAM,QAAQ,EAAE;AAAA,MACnC,UAAU,OAAO,KAAK,MAAM,EAAE;AAAA,MAC9B,WAAW,OAAO,MAAM,OAAO,EAAE;AAAA,MACjC,WAAW,OAAO,MAAM,OAAO,EAAE;AAAA,MACjC,cAAc,OAAO,MAAM,UAAU,EAAE;AAAA,MACvC,WAAW,OAAO,WAAW,OAAO,EAAE;AAAA,MACtC,UAAU,OAAO;AAAA,MACjB,aAAa,OAAO;AAAA,MACpB,gBAAgB,OAAO;AAAA,MACvB,cAAc,OAAO;AAAA,MACrB,eAAe,OAAO;AAAA,MACtB,eAAe,OAAO,eAAe,WAAW,EAAE;AAAA,MAClD,UAAU,OAAO,UAAU,MAAM,EAAE;AAAA,MACnC,YAAY,OAAO,YAAY,QAAQ,EAAE;AAAA,MACzC,SAAS,OAAO,SAAS,KAAK,EAAE;AAAA,MAChC,WAAW,OAAO,WAAW,OAAO,EAAE;AAAA,MACtC;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAGX,UAAM,cAAmC,CAAA;AACzC,QAAI,SAAS,KAAM,aAAY,QAAQ,MAAM,KAAK;AAClD,QAAI,YAAY,KAAM,aAAY,WAAW,MAAM,QAAQ;AAC3D,QAAI,YAAY,KAAM,aAAY,WAAW,MAAM,QAAQ;AAC3D,QAAI,UAAU,KAAM,aAAY,SAAS,MAAM,MAAM;AACrD,QAAI,aAAa,KAAM,aAAY,YAAY,MAAM,SAAS;AAC9D,QAAI,aAAa,KAAM,aAAY,YAAY,MAAM,SAAS;AAE9D,UAAM,YAAY,OAAO,KAAK,WAAW,EAAE,SAAS;AACpD,UAAM,cAAc,YAAY,EAAE,GAAG,aAAa,GAAG,UAAU;AAE/D,+BACG,WAAA,EAAU,KAA8B,WAAW,SAAS,OAAO,aACjE,UACH;AAAA,EAEJ;AACF;AAEO,MAAM,MAAM,OAAO,OAAO,SAAS;AAAA,EACxC,MAAM;AACR,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Box/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport styles from './Box.module.scss';\n\nexport interface BoxProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'> {\n  children?: React.ReactNode;\n  /** HTML element to render */\n  as?: 'div' | 'section' | 'article' | 'aside' | 'main' | 'header' | 'footer' | 'nav' | 'span';\n  /** Padding on all sides */\n  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Horizontal padding (overrides padding) */\n  paddingX?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Vertical padding (overrides padding) */\n  paddingY?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Margin on all sides */\n  margin?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';\n  /** Horizontal margin (overrides margin) */\n  marginX?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';\n  /** Vertical margin (overrides margin) */\n  marginY?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';\n  /** Background color */\n  background?: 'none' | 'primary' | 'secondary' | 'tertiary' | 'elevated';\n  /** Border radius */\n  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n  /** Border */\n  border?: boolean;\n  /** Top border */\n  borderTop?: boolean;\n  /** Bottom border */\n  borderBottom?: boolean;\n  /** Left border */\n  borderLeft?: boolean;\n  /** Right border */\n  borderRight?: boolean;\n  /** Border color variant */\n  borderColor?: 'default' | 'strong' | 'accent' | 'danger';\n  /** Box shadow */\n  shadow?: 'sm' | 'md' | 'lg' | 'none';\n  /** Overflow behavior */\n  overflow?: 'hidden' | 'auto' | 'scroll' | 'visible';\n  /** Text color */\n  color?: 'primary' | 'secondary' | 'tertiary' | 'accent' | 'inverse';\n  /** Display type */\n  display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none';\n  /** Width (CSS value, e.g. \"100%\", \"300px\", 200) */\n  width?: string | number;\n  /** Min width */\n  minWidth?: string | number;\n  /** Max width */\n  maxWidth?: string | number;\n  /** Height (CSS value, e.g. \"100%\", \"300px\", 200) */\n  height?: string | number;\n  /** Min height */\n  minHeight?: string | number;\n  /** Max height */\n  maxHeight?: string | number;\n  /** Additional class name */\n  className?: string;\n  /** Inline styles */\n  style?: React.CSSProperties;\n}\n\n/** Convert string | number to CSS value */\nfunction toCss(value: string | number): string {\n  return typeof value === 'number' ? `${value}px` : value;\n}\n\nconst BoxRoot = React.forwardRef<HTMLElement, BoxProps>(\n  function Box(\n    {\n      children,\n      as: Component = 'div',\n      padding,\n      paddingX,\n      paddingY,\n      margin,\n      marginX,\n      marginY,\n      background,\n      rounded,\n      border,\n      borderTop,\n      borderBottom,\n      borderLeft,\n      borderRight,\n      borderColor,\n      shadow,\n      overflow,\n      color,\n      display,\n      width,\n      minWidth,\n      maxWidth,\n      height,\n      minHeight,\n      maxHeight,\n      className,\n      style,\n      ...htmlProps\n    },\n    ref\n  ) {\n    const classes = [\n      styles.box,\n      padding && styles[`p-${padding}`],\n      paddingX && styles[`px-${paddingX}`],\n      paddingY && styles[`py-${paddingY}`],\n      margin && styles[`m-${margin}`],\n      marginX && styles[`mx-${marginX}`],\n      marginY && styles[`my-${marginY}`],\n      background && styles[`bg-${background}`],\n      rounded && styles[`rounded-${rounded}`],\n      border && styles.border,\n      borderTop && styles.borderTop,\n      borderBottom && styles.borderBottom,\n      borderLeft && styles.borderLeft,\n      borderRight && styles.borderRight,\n      borderColor && styles[`borderColor-${borderColor}`],\n      shadow && styles[`shadow-${shadow}`],\n      overflow && styles[`overflow-${overflow}`],\n      color && styles[`color-${color}`],\n      display && styles[`display-${display}`],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    // Build sizing styles only when props are provided\n    const sizingStyle: React.CSSProperties = {};\n    if (width != null) sizingStyle.width = toCss(width);\n    if (minWidth != null) sizingStyle.minWidth = toCss(minWidth);\n    if (maxWidth != null) sizingStyle.maxWidth = toCss(maxWidth);\n    if (height != null) sizingStyle.height = toCss(height);\n    if (minHeight != null) sizingStyle.minHeight = toCss(minHeight);\n    if (maxHeight != null) sizingStyle.maxHeight = toCss(maxHeight);\n\n    const hasSizing = Object.keys(sizingStyle).length > 0;\n    const mergedStyle = hasSizing ? { ...sizingStyle, ...style } : style;\n\n    return (\n      <Component\n        ref={ref as React.Ref<never>}\n        {...htmlProps}\n        className={classes}\n        style={mergedStyle}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nexport const Box = Object.assign(BoxRoot, {\n  Root: BoxRoot,\n});\n"],"names":["Box"],"mappings":";;;AA8DA,SAAS,MAAM,OAAgC;AAC7C,SAAO,OAAO,UAAU,WAAW,GAAG,KAAK,OAAO;AACpD;AAEA,MAAM,UAAU,MAAM;AAAA,EACpB,SAASA,KACP;AAAA,IACE;AAAA,IACA,IAAI,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,KACA;AACA,UAAM,UAAU;AAAA,MACd,OAAO;AAAA,MACP,WAAW,OAAO,KAAK,OAAO,EAAE;AAAA,MAChC,YAAY,OAAO,MAAM,QAAQ,EAAE;AAAA,MACnC,YAAY,OAAO,MAAM,QAAQ,EAAE;AAAA,MACnC,UAAU,OAAO,KAAK,MAAM,EAAE;AAAA,MAC9B,WAAW,OAAO,MAAM,OAAO,EAAE;AAAA,MACjC,WAAW,OAAO,MAAM,OAAO,EAAE;AAAA,MACjC,cAAc,OAAO,MAAM,UAAU,EAAE;AAAA,MACvC,WAAW,OAAO,WAAW,OAAO,EAAE;AAAA,MACtC,UAAU,OAAO;AAAA,MACjB,aAAa,OAAO;AAAA,MACpB,gBAAgB,OAAO;AAAA,MACvB,cAAc,OAAO;AAAA,MACrB,eAAe,OAAO;AAAA,MACtB,eAAe,OAAO,eAAe,WAAW,EAAE;AAAA,MAClD,UAAU,OAAO,UAAU,MAAM,EAAE;AAAA,MACnC,YAAY,OAAO,YAAY,QAAQ,EAAE;AAAA,MACzC,SAAS,OAAO,SAAS,KAAK,EAAE;AAAA,MAChC,WAAW,OAAO,WAAW,OAAO,EAAE;AAAA,MACtC;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAGX,UAAM,cAAmC,CAAA;AACzC,QAAI,SAAS,KAAM,aAAY,QAAQ,MAAM,KAAK;AAClD,QAAI,YAAY,KAAM,aAAY,WAAW,MAAM,QAAQ;AAC3D,QAAI,YAAY,KAAM,aAAY,WAAW,MAAM,QAAQ;AAC3D,QAAI,UAAU,KAAM,aAAY,SAAS,MAAM,MAAM;AACrD,QAAI,aAAa,KAAM,aAAY,YAAY,MAAM,SAAS;AAC9D,QAAI,aAAa,KAAM,aAAY,YAAY,MAAM,SAAS;AAE9D,UAAM,YAAY,OAAO,KAAK,WAAW,EAAE,SAAS;AACpD,UAAM,cAAc,YAAY,EAAE,GAAG,aAAa,GAAG,UAAU;AAE/D,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACC,GAAG;AAAA,QACJ,WAAW;AAAA,QACX,OAAO;AAAA,QAEN;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEO,MAAM,MAAM,OAAO,OAAO,SAAS;AAAA,EACxC,MAAM;AACR,CAAC;"}

package/dist/components/Breadcrumbs/index.cjs

@@ -25,7 +25,9 @@ function BreadcrumbsRoot({
   children,
   separator = "/",
   maxItems,
+  label = "Breadcrumb",
   className,
+  "aria-label": ariaLabel,
   ...htmlProps
 }) {
   const classes = [Breadcrumbs_module.default.root, className].filter(Boolean).join(" ");
@@ -39,7 +41,7 @@ function BreadcrumbsRoot({
     collapsedItems = items.slice(1, items.length - (maxItems - 1));
     items = [...first, ...last];
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbsSeparatorContext.Provider, { value: separator, children: /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Breadcrumb", className: classes, ...htmlProps, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: Breadcrumbs_module.default.list, children: items.map((item, index) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbsSeparatorContext.Provider, { value: separator, children: /* @__PURE__ */ jsxRuntime.jsx("nav", { ...htmlProps, "aria-label": ariaLabel ?? label, className: classes, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: Breadcrumbs_module.default.list, children: items.map((item, index) => {
     const isFirst = index === 0;
     const showEllipsis = collapsed && index === 1;
     return /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [

package/dist/components/Breadcrumbs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Breadcrumbs/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './Breadcrumbs.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n  /** Custom separator between items (default: '/') */\n  separator?: React.ReactNode;\n  /** Maximum visible items before collapsing middle items with ellipsis */\n  maxItems?: number;\n}\n\nexport interface BreadcrumbsItemProps extends React.HTMLAttributes<HTMLLIElement> {\n  children: React.ReactNode;\n  /** URL to navigate to (renders <a> if provided) */\n  href?: string;\n  /** Icon element to display before the label */\n  icon?: React.ReactNode;\n  /** Marks this item as the current page */\n  current?: boolean;\n}\n\nexport interface BreadcrumbsSeparatorProps {\n  children?: React.ReactNode;\n  className?: string;\n}\n\n// ============================================\n// Context for separator\n// ============================================\n\nconst BreadcrumbsSeparatorContext = React.createContext<React.ReactNode>('/');\n\n// ============================================\n// Components\n// ============================================\n\nfunction BreadcrumbsRoot({\n  children,\n  separator = '/',\n  maxItems,\n  className,\n  ...htmlProps\n}: BreadcrumbsProps) {\n  const classes = [styles.root, className].filter(Boolean).join(' ');\n\n  let items = React.Children.toArray(children).filter(React.isValidElement);\n\n  // Collapse middle items if maxItems is set\n  let collapsed = false;\n  let collapsedItems: React.ReactElement[] = [];\n  if (maxItems != null && maxItems > 1 && items.length > maxItems) {\n    collapsed = true;\n    const first = items.slice(0, 1);\n    const last = items.slice(-(maxItems - 1));\n    collapsedItems = items.slice(1, items.length - (maxItems - 1)) as React.ReactElement[];\n    items = [...first, ...last];\n  }\n\n  return (\n    <BreadcrumbsSeparatorContext.Provider value={separator}>\n      <nav aria-label=\"Breadcrumb\" className={classes} {...htmlProps}>\n        <ol className={styles.list}>\n          {items.map((item, index) => {\n            const isFirst = index === 0;\n            const showEllipsis = collapsed && index === 1;\n\n            return (\n              <React.Fragment key={(item as React.ReactElement).key ?? index}>\n                {!isFirst && (\n                  <li role=\"presentation\" aria-hidden=\"true\" className={styles.separator}>\n                    {separator}\n                  </li>\n                )}\n                {showEllipsis && (\n                  <EllipsisItem items={collapsedItems} separator={separator} />\n                )}\n                {item}\n              </React.Fragment>\n            );\n          })}\n        </ol>\n      </nav>\n    </BreadcrumbsSeparatorContext.Provider>\n  );\n}\n\nfunction EllipsisItem({\n  items,\n  separator,\n}: {\n  items: React.ReactElement[];\n  separator: React.ReactNode;\n}) {\n  const [expanded, setExpanded] = React.useState(false);\n\n  if (expanded) {\n    return (\n      <>\n        {items.map((item, i) => (\n          <React.Fragment key={item.key ?? `collapsed-${i}`}>\n            {item}\n            <li role=\"presentation\" aria-hidden=\"true\" className={styles.separator}>\n              {separator}\n            </li>\n          </React.Fragment>\n        ))}\n      </>\n    );\n  }\n\n  return (\n    <>\n      <li className={styles.item}>\n        <button\n          type=\"button\"\n          className={styles.ellipsis}\n          aria-label=\"Show collapsed breadcrumbs\"\n          onClick={() => setExpanded(true)}\n        >\n          &hellip;\n        </button>\n      </li>\n      <li role=\"presentation\" aria-hidden=\"true\" className={styles.separator}>\n        {separator}\n      </li>\n    </>\n  );\n}\n\nfunction BreadcrumbsItem({\n  children,\n  href,\n  icon,\n  current = false,\n  className,\n  ...htmlProps\n}: BreadcrumbsItemProps) {\n  const classes = [styles.item, className].filter(Boolean).join(' ');\n\n  const iconEl = icon ? <span className={styles.icon}>{icon}</span> : null;\n\n  if (current) {\n    return (\n      <li className={classes} {...htmlProps}>\n        <span className={styles.current} aria-current=\"page\">\n          {iconEl}\n          {children}\n        </span>\n      </li>\n    );\n  }\n\n  if (href) {\n    return (\n      <li className={classes} {...htmlProps}>\n        <a href={href} className={styles.link}>\n          {iconEl}\n          {children}\n        </a>\n      </li>\n    );\n  }\n\n  return (\n    <li className={classes} {...htmlProps}>\n      <span className={styles.link}>\n        {iconEl}\n        {children}\n      </span>\n    </li>\n  );\n}\n\nfunction BreadcrumbsSeparator({ children, className }: BreadcrumbsSeparatorProps) {\n  const defaultSeparator = React.useContext(BreadcrumbsSeparatorContext);\n  const classes = [styles.separator, className].filter(Boolean).join(' ');\n\n  return (\n    <span className={classes} role=\"presentation\" aria-hidden=\"true\">\n      {children ?? defaultSeparator}\n    </span>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Breadcrumbs = Object.assign(BreadcrumbsRoot, {\n  Item: BreadcrumbsItem,\n  Separator: BreadcrumbsSeparator,\n});\n\n// Re-export individual components\nexport { BreadcrumbsRoot, BreadcrumbsItem, BreadcrumbsSeparator };\n"],"names":["React","styles","jsx","jsxs","Fragment"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Breadcrumbs/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './Breadcrumbs.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n  /** Custom separator between items (default: '/') */\n  separator?: React.ReactNode;\n  /** Maximum visible items before collapsing middle items with ellipsis */\n  maxItems?: number;\n  /** Accessible label for the breadcrumb nav landmark (default: \"Breadcrumb\") */\n  label?: string;\n}\n\nexport interface BreadcrumbsItemProps extends React.HTMLAttributes<HTMLLIElement> {\n  children: React.ReactNode;\n  /** URL to navigate to (renders <a> if provided) */\n  href?: string;\n  /** Icon element to display before the label */\n  icon?: React.ReactNode;\n  /** Marks this item as the current page */\n  current?: boolean;\n}\n\nexport interface BreadcrumbsSeparatorProps {\n  children?: React.ReactNode;\n  className?: string;\n}\n\n// ============================================\n// Context for separator\n// ============================================\n\nconst BreadcrumbsSeparatorContext = React.createContext<React.ReactNode>('/');\n\n// ============================================\n// Components\n// ============================================\n\nfunction BreadcrumbsRoot({\n  children,\n  separator = '/',\n  maxItems,\n  label = 'Breadcrumb',\n  className,\n  'aria-label': ariaLabel,\n  ...htmlProps\n}: BreadcrumbsProps) {\n  const classes = [styles.root, className].filter(Boolean).join(' ');\n\n  let items = React.Children.toArray(children).filter(React.isValidElement);\n\n  // Collapse middle items if maxItems is set\n  let collapsed = false;\n  let collapsedItems: React.ReactElement[] = [];\n  if (maxItems != null && maxItems > 1 && items.length > maxItems) {\n    collapsed = true;\n    const first = items.slice(0, 1);\n    const last = items.slice(-(maxItems - 1));\n    collapsedItems = items.slice(1, items.length - (maxItems - 1)) as React.ReactElement[];\n    items = [...first, ...last];\n  }\n\n  return (\n    <BreadcrumbsSeparatorContext.Provider value={separator}>\n      <nav {...htmlProps} aria-label={ariaLabel ?? label} className={classes}>\n        <ol className={styles.list}>\n          {items.map((item, index) => {\n            const isFirst = index === 0;\n            const showEllipsis = collapsed && index === 1;\n\n            return (\n              <React.Fragment key={(item as React.ReactElement).key ?? index}>\n                {!isFirst && (\n                  <li role=\"presentation\" aria-hidden=\"true\" className={styles.separator}>\n                    {separator}\n                  </li>\n                )}\n                {showEllipsis && (\n                  <EllipsisItem items={collapsedItems} separator={separator} />\n                )}\n                {item}\n              </React.Fragment>\n            );\n          })}\n        </ol>\n      </nav>\n    </BreadcrumbsSeparatorContext.Provider>\n  );\n}\n\nfunction EllipsisItem({\n  items,\n  separator,\n}: {\n  items: React.ReactElement[];\n  separator: React.ReactNode;\n}) {\n  const [expanded, setExpanded] = React.useState(false);\n\n  if (expanded) {\n    return (\n      <>\n        {items.map((item, i) => (\n          <React.Fragment key={item.key ?? `collapsed-${i}`}>\n            {item}\n            <li role=\"presentation\" aria-hidden=\"true\" className={styles.separator}>\n              {separator}\n            </li>\n          </React.Fragment>\n        ))}\n      </>\n    );\n  }\n\n  return (\n    <>\n      <li className={styles.item}>\n        <button\n          type=\"button\"\n          className={styles.ellipsis}\n          aria-label=\"Show collapsed breadcrumbs\"\n          onClick={() => setExpanded(true)}\n        >\n          &hellip;\n        </button>\n      </li>\n      <li role=\"presentation\" aria-hidden=\"true\" className={styles.separator}>\n        {separator}\n      </li>\n    </>\n  );\n}\n\nfunction BreadcrumbsItem({\n  children,\n  href,\n  icon,\n  current = false,\n  className,\n  ...htmlProps\n}: BreadcrumbsItemProps) {\n  const classes = [styles.item, className].filter(Boolean).join(' ');\n\n  const iconEl = icon ? <span className={styles.icon}>{icon}</span> : null;\n\n  if (current) {\n    return (\n      <li className={classes} {...htmlProps}>\n        <span className={styles.current} aria-current=\"page\">\n          {iconEl}\n          {children}\n        </span>\n      </li>\n    );\n  }\n\n  if (href) {\n    return (\n      <li className={classes} {...htmlProps}>\n        <a href={href} className={styles.link}>\n          {iconEl}\n          {children}\n        </a>\n      </li>\n    );\n  }\n\n  return (\n    <li className={classes} {...htmlProps}>\n      <span className={styles.link}>\n        {iconEl}\n        {children}\n      </span>\n    </li>\n  );\n}\n\nfunction BreadcrumbsSeparator({ children, className }: BreadcrumbsSeparatorProps) {\n  const defaultSeparator = React.useContext(BreadcrumbsSeparatorContext);\n  const classes = [styles.separator, className].filter(Boolean).join(' ');\n\n  return (\n    <span className={classes} role=\"presentation\" aria-hidden=\"true\">\n      {children ?? defaultSeparator}\n    </span>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Breadcrumbs = Object.assign(BreadcrumbsRoot, {\n  Item: BreadcrumbsItem,\n  Separator: BreadcrumbsSeparator,\n});\n\n// Re-export individual components\nexport { BreadcrumbsRoot, BreadcrumbsItem, BreadcrumbsSeparator };\n"],"names":["React","styles","jsx","jsxs","Fragment"],"mappings":"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"}

package/dist/components/Breadcrumbs/index.d.ts

@@ -5,6 +5,8 @@ export interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {
     separator?: React.ReactNode;
     /** Maximum visible items before collapsing middle items with ellipsis */
     maxItems?: number;
+    /** Accessible label for the breadcrumb nav landmark (default: "Breadcrumb") */
+    label?: string;
 }
 export interface BreadcrumbsItemProps extends React.HTMLAttributes<HTMLLIElement> {
     children: React.ReactNode;
@@ -19,7 +21,7 @@ export interface BreadcrumbsSeparatorProps {
     children?: React.ReactNode;
     className?: string;
 }
-declare function BreadcrumbsRoot({ children, separator, maxItems, className, ...htmlProps }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbsRoot({ children, separator, maxItems, label, className, 'aria-label': ariaLabel, ...htmlProps }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
 declare function BreadcrumbsItem({ children, href, icon, current, className, ...htmlProps }: BreadcrumbsItemProps): import("react/jsx-runtime").JSX.Element;
 declare function BreadcrumbsSeparator({ children, className }: BreadcrumbsSeparatorProps): import("react/jsx-runtime").JSX.Element;
 export declare const Breadcrumbs: typeof BreadcrumbsRoot & {

package/dist/components/Breadcrumbs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACzE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,oDAAoD;IACpD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC;IAC/E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD,iBAAS,eAAe,CAAC,EACvB,QAAQ,EACR,SAAe,EACf,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACb,EAAE,gBAAgB,2CA0ClB;AA6CD,iBAAS,eAAe,CAAC,EACvB,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,OAAe,EACf,SAAS,EACT,GAAG,SAAS,EACb,EAAE,oBAAoB,2CAmCtB;AAED,iBAAS,oBAAoB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,yBAAyB,2CAS/E;AAMD,eAAO,MAAM,WAAW;;;CAGtB,CAAC;AAGH,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACzE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,oDAAoD;IACpD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC;IAC/E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD,iBAAS,eAAe,CAAC,EACvB,QAAQ,EACR,SAAe,EACf,QAAQ,EACR,KAAoB,EACpB,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,GAAG,SAAS,EACb,EAAE,gBAAgB,2CA0ClB;AA6CD,iBAAS,eAAe,CAAC,EACvB,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,OAAe,EACf,SAAS,EACT,GAAG,SAAS,EACb,EAAE,oBAAoB,2CAmCtB;AAED,iBAAS,oBAAoB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,yBAAyB,2CAS/E;AAMD,eAAO,MAAM,WAAW;;;CAGtB,CAAC;AAGH,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/components/Breadcrumbs/index.js

@@ -6,7 +6,9 @@ function BreadcrumbsRoot({
   children,
   separator = "/",
   maxItems,
+  label = "Breadcrumb",
   className,
+  "aria-label": ariaLabel,
   ...htmlProps
 }) {
   const classes = [styles.root, className].filter(Boolean).join(" ");
@@ -20,7 +22,7 @@ function BreadcrumbsRoot({
     collapsedItems = items.slice(1, items.length - (maxItems - 1));
     items = [...first, ...last];
   }
-  return /* @__PURE__ */ jsx(BreadcrumbsSeparatorContext.Provider, { value: separator, children: /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: classes, ...htmlProps, children: /* @__PURE__ */ jsx("ol", { className: styles.list, children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx(BreadcrumbsSeparatorContext.Provider, { value: separator, children: /* @__PURE__ */ jsx("nav", { ...htmlProps, "aria-label": ariaLabel ?? label, className: classes, children: /* @__PURE__ */ jsx("ol", { className: styles.list, children: items.map((item, index) => {
     const isFirst = index === 0;
     const showEllipsis = collapsed && index === 1;
     return /* @__PURE__ */ jsxs(React.Fragment, { children: [

package/dist/components/Breadcrumbs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Breadcrumbs/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './Breadcrumbs.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n  /** Custom separator between items (default: '/') */\n  separator?: React.ReactNode;\n  /** Maximum visible items before collapsing middle items with ellipsis */\n  maxItems?: number;\n}\n\nexport interface BreadcrumbsItemProps extends React.HTMLAttributes<HTMLLIElement> {\n  children: React.ReactNode;\n  /** URL to navigate to (renders <a> if provided) */\n  href?: string;\n  /** Icon element to display before the label */\n  icon?: React.ReactNode;\n  /** Marks this item as the current page */\n  current?: boolean;\n}\n\nexport interface BreadcrumbsSeparatorProps {\n  children?: React.ReactNode;\n  className?: string;\n}\n\n// ============================================\n// Context for separator\n// ============================================\n\nconst BreadcrumbsSeparatorContext = React.createContext<React.ReactNode>('/');\n\n// ============================================\n// Components\n// ============================================\n\nfunction BreadcrumbsRoot({\n  children,\n  separator = '/',\n  maxItems,\n  className,\n  ...htmlProps\n}: BreadcrumbsProps) {\n  const classes = [styles.root, className].filter(Boolean).join(' ');\n\n  let items = React.Children.toArray(children).filter(React.isValidElement);\n\n  // Collapse middle items if maxItems is set\n  let collapsed = false;\n  let collapsedItems: React.ReactElement[] = [];\n  if (maxItems != null && maxItems > 1 && items.length > maxItems) {\n    collapsed = true;\n    const first = items.slice(0, 1);\n    const last = items.slice(-(maxItems - 1));\n    collapsedItems = items.slice(1, items.length - (maxItems - 1)) as React.ReactElement[];\n    items = [...first, ...last];\n  }\n\n  return (\n    <BreadcrumbsSeparatorContext.Provider value={separator}>\n      <nav aria-label=\"Breadcrumb\" className={classes} {...htmlProps}>\n        <ol className={styles.list}>\n          {items.map((item, index) => {\n            const isFirst = index === 0;\n            const showEllipsis = collapsed && index === 1;\n\n            return (\n              <React.Fragment key={(item as React.ReactElement).key ?? index}>\n                {!isFirst && (\n                  <li role=\"presentation\" aria-hidden=\"true\" className={styles.separator}>\n                    {separator}\n                  </li>\n                )}\n                {showEllipsis && (\n                  <EllipsisItem items={collapsedItems} separator={separator} />\n                )}\n                {item}\n              </React.Fragment>\n            );\n          })}\n        </ol>\n      </nav>\n    </BreadcrumbsSeparatorContext.Provider>\n  );\n}\n\nfunction EllipsisItem({\n  items,\n  separator,\n}: {\n  items: React.ReactElement[];\n  separator: React.ReactNode;\n}) {\n  const [expanded, setExpanded] = React.useState(false);\n\n  if (expanded) {\n    return (\n      <>\n        {items.map((item, i) => (\n          <React.Fragment key={item.key ?? `collapsed-${i}`}>\n            {item}\n            <li role=\"presentation\" aria-hidden=\"true\" className={styles.separator}>\n              {separator}\n            </li>\n          </React.Fragment>\n        ))}\n      </>\n    );\n  }\n\n  return (\n    <>\n      <li className={styles.item}>\n        <button\n          type=\"button\"\n          className={styles.ellipsis}\n          aria-label=\"Show collapsed breadcrumbs\"\n          onClick={() => setExpanded(true)}\n        >\n          &hellip;\n        </button>\n      </li>\n      <li role=\"presentation\" aria-hidden=\"true\" className={styles.separator}>\n        {separator}\n      </li>\n    </>\n  );\n}\n\nfunction BreadcrumbsItem({\n  children,\n  href,\n  icon,\n  current = false,\n  className,\n  ...htmlProps\n}: BreadcrumbsItemProps) {\n  const classes = [styles.item, className].filter(Boolean).join(' ');\n\n  const iconEl = icon ? <span className={styles.icon}>{icon}</span> : null;\n\n  if (current) {\n    return (\n      <li className={classes} {...htmlProps}>\n        <span className={styles.current} aria-current=\"page\">\n          {iconEl}\n          {children}\n        </span>\n      </li>\n    );\n  }\n\n  if (href) {\n    return (\n      <li className={classes} {...htmlProps}>\n        <a href={href} className={styles.link}>\n          {iconEl}\n          {children}\n        </a>\n      </li>\n    );\n  }\n\n  return (\n    <li className={classes} {...htmlProps}>\n      <span className={styles.link}>\n        {iconEl}\n        {children}\n      </span>\n    </li>\n  );\n}\n\nfunction BreadcrumbsSeparator({ children, className }: BreadcrumbsSeparatorProps) {\n  const defaultSeparator = React.useContext(BreadcrumbsSeparatorContext);\n  const classes = [styles.separator, className].filter(Boolean).join(' ');\n\n  return (\n    <span className={classes} role=\"presentation\" aria-hidden=\"true\">\n      {children ?? defaultSeparator}\n    </span>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Breadcrumbs = Object.assign(BreadcrumbsRoot, {\n  Item: BreadcrumbsItem,\n  Separator: BreadcrumbsSeparator,\n});\n\n// Re-export individual components\nexport { BreadcrumbsRoot, BreadcrumbsItem, BreadcrumbsSeparator };\n"],"names":[],"mappings":";;;AAoCA,MAAM,8BAA8B,MAAM,cAA+B,GAAG;AAM5E,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,UAAU,CAAC,OAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjE,MAAI,QAAQ,MAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,MAAM,cAAc;AAGxE,MAAI,YAAY;AAChB,MAAI,iBAAuC,CAAA;AAC3C,MAAI,YAAY,QAAQ,WAAW,KAAK,MAAM,SAAS,UAAU;AAC/D,gBAAY;AACZ,UAAM,QAAQ,MAAM,MAAM,GAAG,CAAC;AAC9B,UAAM,OAAO,MAAM,MAAM,EAAE,WAAW,EAAE;AACxC,qBAAiB,MAAM,MAAM,GAAG,MAAM,UAAU,WAAW,EAAE;AAC7D,YAAQ,CAAC,GAAG,OAAO,GAAG,IAAI;AAAA,EAC5B;AAEA,SACE,oBAAC,4BAA4B,UAA5B,EAAqC,OAAO,WAC3C,UAAA,oBAAC,OAAA,EAAI,cAAW,cAAa,WAAW,SAAU,GAAG,WACnD,UAAA,oBAAC,MAAA,EAAG,WAAW,OAAO,MACnB,UAAA,MAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,UAAM,UAAU,UAAU;AAC1B,UAAM,eAAe,aAAa,UAAU;AAE5C,WACE,qBAAC,MAAM,UAAN,EACE,UAAA;AAAA,MAAA,CAAC,WACA,oBAAC,MAAA,EAAG,MAAK,gBAAe,eAAY,QAAO,WAAW,OAAO,WAC1D,UAAA,UAAA,CACH;AAAA,MAED,gBACC,oBAAC,cAAA,EAAa,OAAO,gBAAgB,WAAsB;AAAA,MAE5D;AAAA,IAAA,KATmB,KAA4B,OAAO,KAUzD;AAAA,EAEJ,CAAC,EAAA,CACH,EAAA,CACF,GACF;AAEJ;AAEA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AACF,GAGG;AACD,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,KAAK;AAEpD,MAAI,UAAU;AACZ,WACE,oBAAA,UAAA,EACG,gBAAM,IAAI,CAAC,MAAM,MAChB,qBAAC,MAAM,UAAN,EACE,UAAA;AAAA,MAAA;AAAA,MACD,oBAAC,QAAG,MAAK,gBAAe,eAAY,QAAO,WAAW,OAAO,WAC1D,UAAA,UAAA,CACH;AAAA,IAAA,EAAA,GAJmB,KAAK,OAAO,aAAa,CAAC,EAK/C,CACD,GACH;AAAA,EAEJ;AAEA,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,MAAA,EAAG,WAAW,OAAO,MACpB,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,OAAO;AAAA,QAClB,cAAW;AAAA,QACX,SAAS,MAAM,YAAY,IAAI;AAAA,QAChC,UAAA;AAAA,MAAA;AAAA,IAAA,GAGH;AAAA,IACA,oBAAC,QAAG,MAAK,gBAAe,eAAY,QAAO,WAAW,OAAO,WAC1D,UAAA,UAAA,CACH;AAAA,EAAA,GACF;AAEJ;AAEA,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,UAAU,CAAC,OAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjE,QAAM,SAAS,OAAO,oBAAC,QAAA,EAAK,WAAW,OAAO,MAAO,gBAAK,IAAU;AAEpE,MAAI,SAAS;AACX,WACE,oBAAC,MAAA,EAAG,WAAW,SAAU,GAAG,WAC1B,UAAA,qBAAC,QAAA,EAAK,WAAW,OAAO,SAAS,gBAAa,QAC3C,UAAA;AAAA,MAAA;AAAA,MACA;AAAA,IAAA,EAAA,CACH,EAAA,CACF;AAAA,EAEJ;AAEA,MAAI,MAAM;AACR,WACE,oBAAC,MAAA,EAAG,WAAW,SAAU,GAAG,WAC1B,UAAA,qBAAC,KAAA,EAAE,MAAY,WAAW,OAAO,MAC9B,UAAA;AAAA,MAAA;AAAA,MACA;AAAA,IAAA,EAAA,CACH,EAAA,CACF;AAAA,EAEJ;AAEA,SACE,oBAAC,MAAA,EAAG,WAAW,SAAU,GAAG,WAC1B,UAAA,qBAAC,QAAA,EAAK,WAAW,OAAO,MACrB,UAAA;AAAA,IAAA;AAAA,IACA;AAAA,EAAA,EAAA,CACH,EAAA,CACF;AAEJ;AAEA,SAAS,qBAAqB,EAAE,UAAU,aAAwC;AAChF,QAAM,mBAAmB,MAAM,WAAW,2BAA2B;AACrE,QAAM,UAAU,CAAC,OAAO,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEtE,SACE,oBAAC,UAAK,WAAW,SAAS,MAAK,gBAAe,eAAY,QACvD,UAAA,YAAY,iBAAA,CACf;AAEJ;AAMO,MAAM,cAAc,OAAO,OAAO,iBAAiB;AAAA,EACxD,MAAM;AAAA,EACN,WAAW;AACb,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Breadcrumbs/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './Breadcrumbs.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n  /** Custom separator between items (default: '/') */\n  separator?: React.ReactNode;\n  /** Maximum visible items before collapsing middle items with ellipsis */\n  maxItems?: number;\n  /** Accessible label for the breadcrumb nav landmark (default: \"Breadcrumb\") */\n  label?: string;\n}\n\nexport interface BreadcrumbsItemProps extends React.HTMLAttributes<HTMLLIElement> {\n  children: React.ReactNode;\n  /** URL to navigate to (renders <a> if provided) */\n  href?: string;\n  /** Icon element to display before the label */\n  icon?: React.ReactNode;\n  /** Marks this item as the current page */\n  current?: boolean;\n}\n\nexport interface BreadcrumbsSeparatorProps {\n  children?: React.ReactNode;\n  className?: string;\n}\n\n// ============================================\n// Context for separator\n// ============================================\n\nconst BreadcrumbsSeparatorContext = React.createContext<React.ReactNode>('/');\n\n// ============================================\n// Components\n// ============================================\n\nfunction BreadcrumbsRoot({\n  children,\n  separator = '/',\n  maxItems,\n  label = 'Breadcrumb',\n  className,\n  'aria-label': ariaLabel,\n  ...htmlProps\n}: BreadcrumbsProps) {\n  const classes = [styles.root, className].filter(Boolean).join(' ');\n\n  let items = React.Children.toArray(children).filter(React.isValidElement);\n\n  // Collapse middle items if maxItems is set\n  let collapsed = false;\n  let collapsedItems: React.ReactElement[] = [];\n  if (maxItems != null && maxItems > 1 && items.length > maxItems) {\n    collapsed = true;\n    const first = items.slice(0, 1);\n    const last = items.slice(-(maxItems - 1));\n    collapsedItems = items.slice(1, items.length - (maxItems - 1)) as React.ReactElement[];\n    items = [...first, ...last];\n  }\n\n  return (\n    <BreadcrumbsSeparatorContext.Provider value={separator}>\n      <nav {...htmlProps} aria-label={ariaLabel ?? label} className={classes}>\n        <ol className={styles.list}>\n          {items.map((item, index) => {\n            const isFirst = index === 0;\n            const showEllipsis = collapsed && index === 1;\n\n            return (\n              <React.Fragment key={(item as React.ReactElement).key ?? index}>\n                {!isFirst && (\n                  <li role=\"presentation\" aria-hidden=\"true\" className={styles.separator}>\n                    {separator}\n                  </li>\n                )}\n                {showEllipsis && (\n                  <EllipsisItem items={collapsedItems} separator={separator} />\n                )}\n                {item}\n              </React.Fragment>\n            );\n          })}\n        </ol>\n      </nav>\n    </BreadcrumbsSeparatorContext.Provider>\n  );\n}\n\nfunction EllipsisItem({\n  items,\n  separator,\n}: {\n  items: React.ReactElement[];\n  separator: React.ReactNode;\n}) {\n  const [expanded, setExpanded] = React.useState(false);\n\n  if (expanded) {\n    return (\n      <>\n        {items.map((item, i) => (\n          <React.Fragment key={item.key ?? `collapsed-${i}`}>\n            {item}\n            <li role=\"presentation\" aria-hidden=\"true\" className={styles.separator}>\n              {separator}\n            </li>\n          </React.Fragment>\n        ))}\n      </>\n    );\n  }\n\n  return (\n    <>\n      <li className={styles.item}>\n        <button\n          type=\"button\"\n          className={styles.ellipsis}\n          aria-label=\"Show collapsed breadcrumbs\"\n          onClick={() => setExpanded(true)}\n        >\n          &hellip;\n        </button>\n      </li>\n      <li role=\"presentation\" aria-hidden=\"true\" className={styles.separator}>\n        {separator}\n      </li>\n    </>\n  );\n}\n\nfunction BreadcrumbsItem({\n  children,\n  href,\n  icon,\n  current = false,\n  className,\n  ...htmlProps\n}: BreadcrumbsItemProps) {\n  const classes = [styles.item, className].filter(Boolean).join(' ');\n\n  const iconEl = icon ? <span className={styles.icon}>{icon}</span> : null;\n\n  if (current) {\n    return (\n      <li className={classes} {...htmlProps}>\n        <span className={styles.current} aria-current=\"page\">\n          {iconEl}\n          {children}\n        </span>\n      </li>\n    );\n  }\n\n  if (href) {\n    return (\n      <li className={classes} {...htmlProps}>\n        <a href={href} className={styles.link}>\n          {iconEl}\n          {children}\n        </a>\n      </li>\n    );\n  }\n\n  return (\n    <li className={classes} {...htmlProps}>\n      <span className={styles.link}>\n        {iconEl}\n        {children}\n      </span>\n    </li>\n  );\n}\n\nfunction BreadcrumbsSeparator({ children, className }: BreadcrumbsSeparatorProps) {\n  const defaultSeparator = React.useContext(BreadcrumbsSeparatorContext);\n  const classes = [styles.separator, className].filter(Boolean).join(' ');\n\n  return (\n    <span className={classes} role=\"presentation\" aria-hidden=\"true\">\n      {children ?? defaultSeparator}\n    </span>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Breadcrumbs = Object.assign(BreadcrumbsRoot, {\n  Item: BreadcrumbsItem,\n  Separator: BreadcrumbsSeparator,\n});\n\n// Re-export individual components\nexport { BreadcrumbsRoot, BreadcrumbsItem, BreadcrumbsSeparator };\n"],"names":[],"mappings":"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"}

package/dist/components/Button/Button.module.scss.cjs

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const button = "_button_1d9eh_1";
-const sm = "_sm_1d9eh_42";
-const md = "_md_1d9eh_48";
-const lg = "_lg_1d9eh_54";
-const primary = "_primary_1d9eh_60";
-const secondary = "_secondary_1d9eh_72";
-const ghost = "_ghost_1d9eh_84";
-const danger = "_danger_1d9eh_96";
-const outlined = "_outlined_1d9eh_108";
-const icon = "_icon_1d9eh_120";
-const fullWidth = "_fullWidth_1d9eh_134";
+const button = "_button_rqtum_1";
+const sm = "_sm_rqtum_42";
+const md = "_md_rqtum_48";
+const lg = "_lg_rqtum_54";
+const primary = "_primary_rqtum_60";
+const secondary = "_secondary_rqtum_72";
+const ghost = "_ghost_rqtum_84";
+const danger = "_danger_rqtum_96";
+const outlined = "_outlined_rqtum_108";
+const icon = "_icon_rqtum_120";
+const fullWidth = "_fullWidth_rqtum_134";
 const styles = {
   button,
   sm,

package/dist/components/Button/Button.module.scss.js

@@ -1,14 +1,14 @@
-const button = "_button_1d9eh_1";
-const sm = "_sm_1d9eh_42";
-const md = "_md_1d9eh_48";
-const lg = "_lg_1d9eh_54";
-const primary = "_primary_1d9eh_60";
-const secondary = "_secondary_1d9eh_72";
-const ghost = "_ghost_1d9eh_84";
-const danger = "_danger_1d9eh_96";
-const outlined = "_outlined_1d9eh_108";
-const icon = "_icon_1d9eh_120";
-const fullWidth = "_fullWidth_1d9eh_134";
+const button = "_button_rqtum_1";
+const sm = "_sm_rqtum_42";
+const md = "_md_rqtum_48";
+const lg = "_lg_rqtum_54";
+const primary = "_primary_rqtum_60";
+const secondary = "_secondary_rqtum_72";
+const ghost = "_ghost_rqtum_84";
+const danger = "_danger_rqtum_96";
+const outlined = "_outlined_rqtum_108";
+const icon = "_icon_rqtum_120";
+const fullWidth = "_fullWidth_rqtum_134";
 const styles = {
   button,
   sm,

package/dist/components/Button/index.cjs

@@ -32,17 +32,20 @@ const ButtonRoot = React__namespace.forwardRef(function Button2(props, ref) {
     className,
     ...rest
   } = props;
-  const variant = variantProp === "outline" ? "outlined" : variantProp;
+  const iconOnly = icon || variantProp === "icon";
+  const variant = variantProp === "outline" ? "outlined" : variantProp === "icon" ? "ghost" : variantProp;
   const classNames = [
     Button_module.default.button,
     Button_module.default[size],
     Button_module.default[variant],
-    icon && Button_module.default.icon,
+    iconOnly && Button_module.default.icon,
     fullWidth && Button_module.default.fullWidth,
     className
   ].filter(Boolean).join(" ");
   if (asChild && React__namespace.isValidElement(children)) {
+    const { as: _as2, ...childProps } = rest;
     return React__namespace.cloneElement(children, {
+      ...childProps,
       className: [classNames, children.props.className].filter(Boolean).join(" "),
       ref
     });

package/dist/components/Button/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Button/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Button as BaseButton } from '@base-ui/react/button';\nimport styles from './Button.module.scss';\n\n/**\n * Button props.\n * @see https://usefragments.com/components/button\n */\ntype ButtonBaseProps = {\n  children: React.ReactNode;\n  /** Visual style variant. `\"outline\"` is an alias for `\"outlined\"`.\n   * @default \"primary\"\n   * @see https://usefragments.com/components/button#variants */\n  variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'outlined' | 'outline';\n  /** Button size.\n   * @default \"md\"\n   * @see https://usefragments.com/components/button#sizes */\n  size?: 'sm' | 'md' | 'lg';\n  /** Render as icon-only button (square aspect ratio) */\n  icon?: boolean;\n  /** Make button full width of container */\n  fullWidth?: boolean;\n  /** Merge props onto child element instead of rendering a button. Useful for composition with Link components.\n   * @see https://usefragments.com/components/button#aschild */\n  asChild?: boolean;\n};\n\n// Button as native button element\nexport interface ButtonAsButtonProps\n  extends ButtonBaseProps,\n    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  as?: 'button';\n}\n\n// Button as anchor element\nexport interface ButtonAsAnchorProps\n  extends ButtonBaseProps,\n    Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> {\n  as: 'a';\n}\n\nexport type ButtonProps = ButtonAsButtonProps | ButtonAsAnchorProps;\n\nconst ButtonRoot = React.forwardRef<\n  HTMLButtonElement | HTMLAnchorElement,\n  ButtonProps\n>(function Button(props, ref) {\n  const {\n    children,\n    variant: variantProp = 'primary',\n    size = 'md',\n    icon = false,\n    fullWidth = false,\n    asChild = false,\n    className,\n    ...rest\n  } = props;\n\n  // Resolve alias: \"outline\" → \"outlined\"\n  const variant = variantProp === 'outline' ? 'outlined' : variantProp;\n\n  const classNames = [\n    styles.button,\n    styles[size],\n    styles[variant],\n    icon && styles.icon,\n    fullWidth && styles.fullWidth,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  // asChild: merge button styling onto child element (e.g. Next.js Link)\n  if (asChild && React.isValidElement(children)) {\n    return React.cloneElement(children as React.ReactElement<Record<string, unknown>>, {\n      className: [classNames, (children.props as Record<string, unknown>).className].filter(Boolean).join(' '),\n      ref,\n    });\n  }\n\n  // Render as anchor\n  if (props.as === 'a') {\n    const { as: _as, ...anchorProps } = rest as ButtonAsAnchorProps & { as?: 'a' };\n    return (\n      <a\n        ref={ref as React.Ref<HTMLAnchorElement>}\n        className={classNames}\n        {...anchorProps}\n      >\n        {children}\n      </a>\n    );\n  }\n\n  // Render as button (default)\n  const { as: _as, ...buttonProps } = rest as ButtonAsButtonProps;\n  return (\n    <BaseButton\n      ref={ref as React.Ref<HTMLButtonElement>}\n      type={(buttonProps as ButtonAsButtonProps).type || 'button'}\n      disabled={(buttonProps as ButtonAsButtonProps).disabled || false}\n      className={classNames}\n      {...buttonProps}\n    >\n      {children}\n    </BaseButton>\n  );\n});\n\nexport const Button = Object.assign(ButtonRoot, {\n  Root: ButtonRoot,\n});\n"],"names":["React","Button","styles","_as","jsx","BaseButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAM,aAAaA,iBAAM,WAGvB,SAASC,QAAO,OAAO,KAAK;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA,SAAS,cAAc;AAAA,IACvB,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAGJ,QAAM,UAAU,gBAAgB,YAAY,aAAa;AAEzD,QAAM,aAAa;AAAA,IACjBC,cAAAA,QAAO;AAAA,IACPA,cAAAA,QAAO,IAAI;AAAA,IACXA,cAAAA,QAAO,OAAO;AAAA,IACd,QAAQA,cAAAA,QAAO;AAAA,IACf,aAAaA,cAAAA,QAAO;AAAA,IACpB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAGX,MAAI,WAAWF,iBAAM,eAAe,QAAQ,GAAG;AAC7C,WAAOA,iBAAM,aAAa,UAAyD;AAAA,MACjF,WAAW,CAAC,YAAa,SAAS,MAAkC,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MACvG;AAAA,IAAA,CACD;AAAA,EACH;AAGA,MAAI,MAAM,OAAO,KAAK;AACpB,UAAM,EAAE,IAAIG,MAAK,GAAG,gBAAgB;AACpC,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,QACV,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AAGA,QAAM,EAAE,IAAI,KAAK,GAAG,gBAAgB;AACpC,SACEA,2BAAAA;AAAAA,IAACC,OAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAO,YAAoC,QAAQ;AAAA,MACnD,UAAW,YAAoC,YAAY;AAAA,MAC3D,WAAW;AAAA,MACV,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAEM,MAAM,SAAS,OAAO,OAAO,YAAY;AAAA,EAC9C,MAAM;AACR,CAAC;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Button/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Button as BaseButton } from '@base-ui/react/button';\nimport styles from './Button.module.scss';\n\n/**\n * Button props.\n * @see https://usefragments.com/components/button\n */\ntype ButtonBaseProps = {\n  children: React.ReactNode;\n  /** Visual style variant. `\"outline\"` is an alias for `\"outlined\"`. `\"icon\"` is a convenience alias for a ghost icon-only button.\n   * @default \"primary\"\n   * @see https://usefragments.com/components/button#variants */\n  variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'outlined' | 'outline' | 'icon';\n  /** Button size.\n   * @default \"md\"\n   * @see https://usefragments.com/components/button#sizes */\n  size?: 'sm' | 'md' | 'lg';\n  /** Render as icon-only button (square aspect ratio). Prefer `variant=\"icon\"` for the default ghost icon button. */\n  icon?: boolean;\n  /** Make button full width of container */\n  fullWidth?: boolean;\n  /** Merge props onto child element instead of rendering a button. Useful for composition with Link components.\n   * @see https://usefragments.com/components/button#aschild */\n  asChild?: boolean;\n};\n\n// Button as native button element\nexport interface ButtonAsButtonProps\n  extends ButtonBaseProps,\n    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  as?: 'button';\n}\n\n// Button as anchor element\nexport interface ButtonAsAnchorProps\n  extends ButtonBaseProps,\n    Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> {\n  as: 'a';\n}\n\nexport type ButtonProps = ButtonAsButtonProps | ButtonAsAnchorProps;\n\nconst ButtonRoot = React.forwardRef<\n  HTMLButtonElement | HTMLAnchorElement,\n  ButtonProps\n>(function Button(props, ref) {\n  const {\n    children,\n    variant: variantProp = 'primary',\n    size = 'md',\n    icon = false,\n    fullWidth = false,\n    asChild = false,\n    className,\n    ...rest\n  } = props;\n\n  const iconOnly = icon || variantProp === 'icon';\n\n  // Resolve aliases:\n  // \"outline\" → \"outlined\"\n  // \"icon\" → visual \"ghost\" + icon-only sizing\n  const variant = variantProp === 'outline'\n    ? 'outlined'\n    : variantProp === 'icon'\n      ? 'ghost'\n      : variantProp;\n\n  const classNames = [\n    styles.button,\n    styles[size],\n    styles[variant],\n    iconOnly && styles.icon,\n    fullWidth && styles.fullWidth,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  // asChild: merge button styling onto child element (e.g. Next.js Link)\n  if (asChild && React.isValidElement(children)) {\n    const { as: _as, ...childProps } = rest as ButtonProps & { as?: 'a' | 'button' };\n    return React.cloneElement(children as React.ReactElement<Record<string, unknown>>, {\n      ...childProps,\n      className: [classNames, (children.props as Record<string, unknown>).className].filter(Boolean).join(' '),\n      ref,\n    });\n  }\n\n  // Render as anchor\n  if (props.as === 'a') {\n    const { as: _as, ...anchorProps } = rest as ButtonAsAnchorProps & { as?: 'a' };\n    return (\n      <a\n        ref={ref as React.Ref<HTMLAnchorElement>}\n        className={classNames}\n        {...anchorProps}\n      >\n        {children}\n      </a>\n    );\n  }\n\n  // Render as button (default)\n  const { as: _as, ...buttonProps } = rest as ButtonAsButtonProps;\n  return (\n    <BaseButton\n      ref={ref as React.Ref<HTMLButtonElement>}\n      type={(buttonProps as ButtonAsButtonProps).type || 'button'}\n      disabled={(buttonProps as ButtonAsButtonProps).disabled || false}\n      className={classNames}\n      {...buttonProps}\n    >\n      {children}\n    </BaseButton>\n  );\n});\n\nexport const Button = Object.assign(ButtonRoot, {\n  Root: ButtonRoot,\n});\n"],"names":["React","Button","styles","_as","jsx","BaseButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAM,aAAaA,iBAAM,WAGvB,SAASC,QAAO,OAAO,KAAK;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA,SAAS,cAAc;AAAA,IACvB,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAEJ,QAAM,WAAW,QAAQ,gBAAgB;AAKzC,QAAM,UAAU,gBAAgB,YAC5B,aACA,gBAAgB,SACd,UACA;AAEN,QAAM,aAAa;AAAA,IACjBC,cAAAA,QAAO;AAAA,IACPA,cAAAA,QAAO,IAAI;AAAA,IACXA,cAAAA,QAAO,OAAO;AAAA,IACd,YAAYA,cAAAA,QAAO;AAAA,IACnB,aAAaA,cAAAA,QAAO;AAAA,IACpB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAGX,MAAI,WAAWF,iBAAM,eAAe,QAAQ,GAAG;AAC7C,UAAM,EAAE,IAAIG,MAAK,GAAG,eAAe;AACnC,WAAOH,iBAAM,aAAa,UAAyD;AAAA,MACjF,GAAG;AAAA,MACH,WAAW,CAAC,YAAa,SAAS,MAAkC,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MACvG;AAAA,IAAA,CACD;AAAA,EACH;AAGA,MAAI,MAAM,OAAO,KAAK;AACpB,UAAM,EAAE,IAAIG,MAAK,GAAG,gBAAgB;AACpC,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,QACV,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AAGA,QAAM,EAAE,IAAI,KAAK,GAAG,gBAAgB;AACpC,SACEA,2BAAAA;AAAAA,IAACC,OAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAO,YAAoC,QAAQ;AAAA,MACnD,UAAW,YAAoC,YAAY;AAAA,MAC3D,WAAW;AAAA,MACV,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAEM,MAAM,SAAS,OAAO,OAAO,YAAY;AAAA,EAC9C,MAAM;AACR,CAAC;;"}

package/dist/components/Button/index.d.ts

@@ -5,15 +5,15 @@ import * as React from 'react';
  */
 type ButtonBaseProps = {
     children: React.ReactNode;
-    /** Visual style variant. `"outline"` is an alias for `"outlined"`.
+    /** Visual style variant. `"outline"` is an alias for `"outlined"`. `"icon"` is a convenience alias for a ghost icon-only button.
      * @default "primary"
      * @see https://usefragments.com/components/button#variants */
-    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'outlined' | 'outline';
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'outlined' | 'outline' | 'icon';
     /** Button size.
      * @default "md"
      * @see https://usefragments.com/components/button#sizes */
     size?: 'sm' | 'md' | 'lg';
-    /** Render as icon-only button (square aspect ratio) */
+    /** Render as icon-only button (square aspect ratio). Prefer `variant="icon"` for the default ghost icon button. */
     icon?: boolean;
     /** Make button full width of container */
     fullWidth?: boolean;

package/dist/components/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;GAGG;AACH,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;kEAE8D;IAC9D,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;IAChF;;+DAE2D;IAC3D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,uDAAuD;IACvD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;iEAC6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAGF,MAAM,WAAW,mBACf,SAAQ,eAAe,EACrB,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACjE,EAAE,CAAC,EAAE,QAAQ,CAAC;CACf;AAGD,MAAM,WAAW,mBACf,SAAQ,eAAe,EACrB,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACjE,EAAE,EAAE,GAAG,CAAC;CACT;AAED,MAAM,MAAM,WAAW,GAAG,mBAAmB,GAAG,mBAAmB,CAAC;AAoEpE,eAAO,MAAM,MAAM;;CAEjB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;GAGG;AACH,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;kEAE8D;IAC9D,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;IACzF;;+DAE2D;IAC3D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,mHAAmH;IACnH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;iEAC6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAGF,MAAM,WAAW,mBACf,SAAQ,eAAe,EACrB,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACjE,EAAE,CAAC,EAAE,QAAQ,CAAC;CACf;AAGD,MAAM,WAAW,mBACf,SAAQ,eAAe,EACrB,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACjE,EAAE,EAAE,GAAG,CAAC;CACT;AAED,MAAM,MAAM,WAAW,GAAG,mBAAmB,GAAG,mBAAmB,CAAC;AA8EpE,eAAO,MAAM,MAAM;;CAEjB,CAAC"}

package/dist/components/Button/index.js

@@ -13,17 +13,20 @@ const ButtonRoot = React.forwardRef(function Button2(props, ref) {
     className,
     ...rest
   } = props;
-  const variant = variantProp === "outline" ? "outlined" : variantProp;
+  const iconOnly = icon || variantProp === "icon";
+  const variant = variantProp === "outline" ? "outlined" : variantProp === "icon" ? "ghost" : variantProp;
   const classNames = [
     styles.button,
     styles[size],
     styles[variant],
-    icon && styles.icon,
+    iconOnly && styles.icon,
     fullWidth && styles.fullWidth,
     className
   ].filter(Boolean).join(" ");
   if (asChild && React.isValidElement(children)) {
+    const { as: _as2, ...childProps } = rest;
     return React.cloneElement(children, {
+      ...childProps,
       className: [classNames, children.props.className].filter(Boolean).join(" "),
       ref
     });

package/dist/components/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Button/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Button as BaseButton } from '@base-ui/react/button';\nimport styles from './Button.module.scss';\n\n/**\n * Button props.\n * @see https://usefragments.com/components/button\n */\ntype ButtonBaseProps = {\n  children: React.ReactNode;\n  /** Visual style variant. `\"outline\"` is an alias for `\"outlined\"`.\n   * @default \"primary\"\n   * @see https://usefragments.com/components/button#variants */\n  variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'outlined' | 'outline';\n  /** Button size.\n   * @default \"md\"\n   * @see https://usefragments.com/components/button#sizes */\n  size?: 'sm' | 'md' | 'lg';\n  /** Render as icon-only button (square aspect ratio) */\n  icon?: boolean;\n  /** Make button full width of container */\n  fullWidth?: boolean;\n  /** Merge props onto child element instead of rendering a button. Useful for composition with Link components.\n   * @see https://usefragments.com/components/button#aschild */\n  asChild?: boolean;\n};\n\n// Button as native button element\nexport interface ButtonAsButtonProps\n  extends ButtonBaseProps,\n    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  as?: 'button';\n}\n\n// Button as anchor element\nexport interface ButtonAsAnchorProps\n  extends ButtonBaseProps,\n    Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> {\n  as: 'a';\n}\n\nexport type ButtonProps = ButtonAsButtonProps | ButtonAsAnchorProps;\n\nconst ButtonRoot = React.forwardRef<\n  HTMLButtonElement | HTMLAnchorElement,\n  ButtonProps\n>(function Button(props, ref) {\n  const {\n    children,\n    variant: variantProp = 'primary',\n    size = 'md',\n    icon = false,\n    fullWidth = false,\n    asChild = false,\n    className,\n    ...rest\n  } = props;\n\n  // Resolve alias: \"outline\" → \"outlined\"\n  const variant = variantProp === 'outline' ? 'outlined' : variantProp;\n\n  const classNames = [\n    styles.button,\n    styles[size],\n    styles[variant],\n    icon && styles.icon,\n    fullWidth && styles.fullWidth,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  // asChild: merge button styling onto child element (e.g. Next.js Link)\n  if (asChild && React.isValidElement(children)) {\n    return React.cloneElement(children as React.ReactElement<Record<string, unknown>>, {\n      className: [classNames, (children.props as Record<string, unknown>).className].filter(Boolean).join(' '),\n      ref,\n    });\n  }\n\n  // Render as anchor\n  if (props.as === 'a') {\n    const { as: _as, ...anchorProps } = rest as ButtonAsAnchorProps & { as?: 'a' };\n    return (\n      <a\n        ref={ref as React.Ref<HTMLAnchorElement>}\n        className={classNames}\n        {...anchorProps}\n      >\n        {children}\n      </a>\n    );\n  }\n\n  // Render as button (default)\n  const { as: _as, ...buttonProps } = rest as ButtonAsButtonProps;\n  return (\n    <BaseButton\n      ref={ref as React.Ref<HTMLButtonElement>}\n      type={(buttonProps as ButtonAsButtonProps).type || 'button'}\n      disabled={(buttonProps as ButtonAsButtonProps).disabled || false}\n      className={classNames}\n      {...buttonProps}\n    >\n      {children}\n    </BaseButton>\n  );\n});\n\nexport const Button = Object.assign(ButtonRoot, {\n  Root: ButtonRoot,\n});\n"],"names":["Button","_as","BaseButton"],"mappings":";;;;AA6CA,MAAM,aAAa,MAAM,WAGvB,SAASA,QAAO,OAAO,KAAK;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA,SAAS,cAAc;AAAA,IACvB,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAGJ,QAAM,UAAU,gBAAgB,YAAY,aAAa;AAEzD,QAAM,aAAa;AAAA,IACjB,OAAO;AAAA,IACP,OAAO,IAAI;AAAA,IACX,OAAO,OAAO;AAAA,IACd,QAAQ,OAAO;AAAA,IACf,aAAa,OAAO;AAAA,IACpB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAGX,MAAI,WAAW,MAAM,eAAe,QAAQ,GAAG;AAC7C,WAAO,MAAM,aAAa,UAAyD;AAAA,MACjF,WAAW,CAAC,YAAa,SAAS,MAAkC,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MACvG;AAAA,IAAA,CACD;AAAA,EACH;AAGA,MAAI,MAAM,OAAO,KAAK;AACpB,UAAM,EAAE,IAAIC,MAAK,GAAG,gBAAgB;AACpC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,QACV,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AAGA,QAAM,EAAE,IAAI,KAAK,GAAG,gBAAgB;AACpC,SACE;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAO,YAAoC,QAAQ;AAAA,MACnD,UAAW,YAAoC,YAAY;AAAA,MAC3D,WAAW;AAAA,MACV,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAEM,MAAM,SAAS,OAAO,OAAO,YAAY;AAAA,EAC9C,MAAM;AACR,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Button/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Button as BaseButton } from '@base-ui/react/button';\nimport styles from './Button.module.scss';\n\n/**\n * Button props.\n * @see https://usefragments.com/components/button\n */\ntype ButtonBaseProps = {\n  children: React.ReactNode;\n  /** Visual style variant. `\"outline\"` is an alias for `\"outlined\"`. `\"icon\"` is a convenience alias for a ghost icon-only button.\n   * @default \"primary\"\n   * @see https://usefragments.com/components/button#variants */\n  variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'outlined' | 'outline' | 'icon';\n  /** Button size.\n   * @default \"md\"\n   * @see https://usefragments.com/components/button#sizes */\n  size?: 'sm' | 'md' | 'lg';\n  /** Render as icon-only button (square aspect ratio). Prefer `variant=\"icon\"` for the default ghost icon button. */\n  icon?: boolean;\n  /** Make button full width of container */\n  fullWidth?: boolean;\n  /** Merge props onto child element instead of rendering a button. Useful for composition with Link components.\n   * @see https://usefragments.com/components/button#aschild */\n  asChild?: boolean;\n};\n\n// Button as native button element\nexport interface ButtonAsButtonProps\n  extends ButtonBaseProps,\n    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  as?: 'button';\n}\n\n// Button as anchor element\nexport interface ButtonAsAnchorProps\n  extends ButtonBaseProps,\n    Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> {\n  as: 'a';\n}\n\nexport type ButtonProps = ButtonAsButtonProps | ButtonAsAnchorProps;\n\nconst ButtonRoot = React.forwardRef<\n  HTMLButtonElement | HTMLAnchorElement,\n  ButtonProps\n>(function Button(props, ref) {\n  const {\n    children,\n    variant: variantProp = 'primary',\n    size = 'md',\n    icon = false,\n    fullWidth = false,\n    asChild = false,\n    className,\n    ...rest\n  } = props;\n\n  const iconOnly = icon || variantProp === 'icon';\n\n  // Resolve aliases:\n  // \"outline\" → \"outlined\"\n  // \"icon\" → visual \"ghost\" + icon-only sizing\n  const variant = variantProp === 'outline'\n    ? 'outlined'\n    : variantProp === 'icon'\n      ? 'ghost'\n      : variantProp;\n\n  const classNames = [\n    styles.button,\n    styles[size],\n    styles[variant],\n    iconOnly && styles.icon,\n    fullWidth && styles.fullWidth,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  // asChild: merge button styling onto child element (e.g. Next.js Link)\n  if (asChild && React.isValidElement(children)) {\n    const { as: _as, ...childProps } = rest as ButtonProps & { as?: 'a' | 'button' };\n    return React.cloneElement(children as React.ReactElement<Record<string, unknown>>, {\n      ...childProps,\n      className: [classNames, (children.props as Record<string, unknown>).className].filter(Boolean).join(' '),\n      ref,\n    });\n  }\n\n  // Render as anchor\n  if (props.as === 'a') {\n    const { as: _as, ...anchorProps } = rest as ButtonAsAnchorProps & { as?: 'a' };\n    return (\n      <a\n        ref={ref as React.Ref<HTMLAnchorElement>}\n        className={classNames}\n        {...anchorProps}\n      >\n        {children}\n      </a>\n    );\n  }\n\n  // Render as button (default)\n  const { as: _as, ...buttonProps } = rest as ButtonAsButtonProps;\n  return (\n    <BaseButton\n      ref={ref as React.Ref<HTMLButtonElement>}\n      type={(buttonProps as ButtonAsButtonProps).type || 'button'}\n      disabled={(buttonProps as ButtonAsButtonProps).disabled || false}\n      className={classNames}\n      {...buttonProps}\n    >\n      {children}\n    </BaseButton>\n  );\n});\n\nexport const Button = Object.assign(ButtonRoot, {\n  Root: ButtonRoot,\n});\n"],"names":["Button","_as","BaseButton"],"mappings":";;;;AA6CA,MAAM,aAAa,MAAM,WAGvB,SAASA,QAAO,OAAO,KAAK;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA,SAAS,cAAc;AAAA,IACvB,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAEJ,QAAM,WAAW,QAAQ,gBAAgB;AAKzC,QAAM,UAAU,gBAAgB,YAC5B,aACA,gBAAgB,SACd,UACA;AAEN,QAAM,aAAa;AAAA,IACjB,OAAO;AAAA,IACP,OAAO,IAAI;AAAA,IACX,OAAO,OAAO;AAAA,IACd,YAAY,OAAO;AAAA,IACnB,aAAa,OAAO;AAAA,IACpB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAGX,MAAI,WAAW,MAAM,eAAe,QAAQ,GAAG;AAC7C,UAAM,EAAE,IAAIC,MAAK,GAAG,eAAe;AACnC,WAAO,MAAM,aAAa,UAAyD;AAAA,MACjF,GAAG;AAAA,MACH,WAAW,CAAC,YAAa,SAAS,MAAkC,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MACvG;AAAA,IAAA,CACD;AAAA,EACH;AAGA,MAAI,MAAM,OAAO,KAAK;AACpB,UAAM,EAAE,IAAIA,MAAK,GAAG,gBAAgB;AACpC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,QACV,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AAGA,QAAM,EAAE,IAAI,KAAK,GAAG,gBAAgB;AACpC,SACE;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAO,YAAoC,QAAQ;AAAA,MACnD,UAAW,YAAoC,YAAY;AAAA,MAC3D,WAAW;AAAA,MACV,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAEM,MAAM,SAAS,OAAO,OAAO,YAAY;AAAA,EAC9C,MAAM;AACR,CAAC;"}

package/dist/components/ButtonGroup/index.cjs

@@ -26,7 +26,8 @@ const ButtonGroupRoot = React__namespace.forwardRef(
     gap = "sm",
     wrap = false,
     align,
-    className
+    className,
+    ...htmlProps
   }, ref) {
     const classes = [
       ButtonGroup_module.default.group,
@@ -35,7 +36,7 @@ const ButtonGroupRoot = React__namespace.forwardRef(
       align && ButtonGroup_module.default[`align-${align}`],
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: classes, children });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, ...htmlProps, className: classes, children });
   }
 );
 const ButtonGroup = Object.assign(ButtonGroupRoot, {