@brycks/core-front 0.3.1 → 0.3.2

package/dist/components/layout/Card/Card.js

@@ -1,28 +1,31 @@
-import { jsx as c } from "react/jsx-runtime";
-import { forwardRef as y } from "react";
-import { cx as b } from "../../../utils/styles.js";
-const k = {
+import { jsx as y } from "react/jsx-runtime";
+import { forwardRef as b, useCallback as g } from "react";
+import { cx as i } from "../../../utils/styles.js";
+import { componentGap as x } from "../../../design-system/primitives/sizing.js";
+import { durations as m, easings as f } from "../../../design-system/tokens/motion.js";
+import { spacing as s } from "../../../design-system/tokens/spacing.js";
+const S = {
   none: 0,
-  sm: 12,
-  md: 16,
-  lg: 24,
-  xl: 32
-}, g = y(function({
+  sm: s[3],
+  md: s[4],
+  lg: s[6],
+  xl: s[8]
+}, N = b(function({
   variant: r = "elevated",
-  padding: s = "md",
+  padding: t = "md",
   interactive: e = !1,
   selected: a = !1,
-  className: t,
-  style: d,
-  children: n,
-  testId: u,
+  className: d,
+  style: n,
+  children: l,
+  testId: k,
   ...p
-}, m) {
-  const f = {
+}, v) {
+  const C = {
     ...(() => {
       const o = {
         borderRadius: "var(--brycks-radius-lg)",
-        transition: "transform 150ms ease-out, box-shadow 150ms ease-out, border-color 150ms ease-out"
+        transition: `transform ${m.quick}ms ${f.easeOut}, box-shadow ${m.quick}ms ${f.easeOut}, border-color ${m.quick}ms ${f.easeOut}`
       };
       switch (r) {
         case "elevated":
@@ -52,62 +55,62 @@ const k = {
           };
       }
     })(),
-    padding: k[s],
+    padding: S[t],
     display: "flex",
     flexDirection: "column",
     cursor: e ? "pointer" : void 0,
-    ...d
-  };
-  return /* @__PURE__ */ c(
+    ...n
+  }, h = g((c) => {
+    const o = c.currentTarget;
+    r === "elevated" ? (o.style.boxShadow = a ? "0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-lg)" : "var(--brycks-shadow-lg)", o.style.transform = "translateY(-2px)") : r !== "ghost" && (o.style.borderColor = "var(--brycks-border-strong)");
+  }, [r, a]), w = g((c) => {
+    const o = c.currentTarget;
+    r === "elevated" ? (o.style.boxShadow = a ? "0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-md)" : "var(--brycks-shadow-md)", o.style.transform = "translateY(0)") : r !== "ghost" && (o.style.borderColor = a ? "var(--brycks-primary-default)" : "var(--brycks-border-default)");
+  }, [r, a]);
+  return /* @__PURE__ */ y(
     "div",
     {
-      ref: m,
-      className: b(
+      ref: v,
+      className: i(
         "brycks-card",
         `brycks-card--${r}`,
         e && "brycks-card--interactive",
         a && "brycks-card--selected",
-        t
+        d
       ),
-      style: f,
-      "data-testid": u,
-      onMouseEnter: e ? (o) => {
-        const l = o.currentTarget;
-        r === "elevated" ? (l.style.boxShadow = a ? "0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-lg)" : "var(--brycks-shadow-lg)", l.style.transform = "translateY(-2px)") : r !== "ghost" && (l.style.borderColor = "var(--brycks-border-strong)");
-      } : void 0,
-      onMouseLeave: e ? (o) => {
-        const l = o.currentTarget;
-        r === "elevated" ? (l.style.boxShadow = a ? "0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-md)" : "var(--brycks-shadow-md)", l.style.transform = "translateY(0)") : r !== "ghost" && (l.style.borderColor = a ? "var(--brycks-primary-default)" : "var(--brycks-border-default)");
-      } : void 0,
+      style: C,
+      "data-testid": k,
+      onMouseEnter: e ? h : void 0,
+      onMouseLeave: e ? w : void 0,
       ...p,
-      children: n
+      children: l
     }
   );
 });
-g.displayName = "Card";
-const x = y(function({ divider: r = !1, className: s, style: e, children: a, ...t }, d) {
-  const n = {
+N.displayName = "Card";
+const M = b(function({ divider: r = !1, className: t, style: e, children: a, ...d }, n) {
+  const l = {
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
-    gap: 12,
-    paddingBottom: r ? 16 : 0,
-    marginBottom: r ? 16 : 12,
+    gap: x.xl,
+    paddingBottom: r ? s[4] : 0,
+    marginBottom: r ? s[4] : s[3],
     borderBottom: r ? "1px solid var(--brycks-border-muted)" : void 0,
     ...e
   };
-  return /* @__PURE__ */ c("div", { ref: d, className: b("brycks-card-header", s), style: n, ...t, children: a });
+  return /* @__PURE__ */ y("div", { ref: n, className: i("brycks-card-header", t), style: l, ...d, children: a });
 });
-x.displayName = "CardHeader";
-const v = y(function({ className: r, style: s, children: e, ...a }, t) {
-  const d = {
+M.displayName = "CardHeader";
+const $ = b(function({ className: r, style: t, children: e, ...a }, d) {
+  const n = {
     flex: 1,
-    ...s
+    ...t
   };
-  return /* @__PURE__ */ c("div", { ref: t, className: b("brycks-card-body", r), style: d, ...a, children: e });
+  return /* @__PURE__ */ y("div", { ref: d, className: i("brycks-card-body", r), style: n, ...a, children: e });
 });
-v.displayName = "CardBody";
-const C = y(function({ divider: r = !1, align: s = "right", className: e, style: a, children: t, ...d }, n) {
+$.displayName = "CardBody";
+const B = b(function({ divider: r = !1, align: t = "right", className: e, style: a, children: d, ...n }, l) {
   const p = {
     display: "flex",
     alignItems: "center",
@@ -116,20 +119,20 @@ const C = y(function({ divider: r = !1, align: s = "right", className: e, style:
       center: "center",
       right: "flex-end",
       between: "space-between"
-    }[s],
-    gap: 12,
-    paddingTop: r ? 16 : 0,
-    marginTop: r ? 16 : 12,
+    }[t],
+    gap: x.xl,
+    paddingTop: r ? s[4] : 0,
+    marginTop: r ? s[4] : s[3],
     borderTop: r ? "1px solid var(--brycks-border-muted)" : void 0,
     ...a
   };
-  return /* @__PURE__ */ c("div", { ref: n, className: b("brycks-card-footer", e), style: p, ...d, children: t });
+  return /* @__PURE__ */ y("div", { ref: l, className: i("brycks-card-footer", e), style: p, ...n, children: d });
 });
-C.displayName = "CardFooter";
+B.displayName = "CardFooter";
 export {
-  g as Card,
-  v as CardBody,
-  C as CardFooter,
-  x as CardHeader
+  N as Card,
+  $ as CardBody,
+  B as CardFooter,
+  M as CardHeader
 };
 //# sourceMappingURL=Card.js.map

package/dist/components/layout/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../src/components/layout/Card/Card.tsx"],"sourcesContent":["/**\n * Card Component\n *\n * A flexible card container with optional header, footer, and body sections.\n * Supports different variants and padding sizes.\n */\n\nimport { forwardRef, type CSSProperties, type HTMLAttributes } from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type CardVariant = 'elevated' | 'outline' | 'filled' | 'ghost'\nexport type CardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl'\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  /** Card variant */\n  variant?: CardVariant\n  /** Card padding */\n  padding?: CardPadding\n  /** Whether the card is interactive (adds hover effect) */\n  interactive?: boolean\n  /** Whether the card is selected */\n  selected?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether to show a divider below the header */\n  divider?: boolean\n  /** Custom class name */\n  className?: string\n}\n\nexport interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether to show a divider above the footer */\n  divider?: boolean\n  /** Footer alignment */\n  align?: 'left' | 'center' | 'right' | 'between'\n  /** Custom class name */\n  className?: string\n}\n\nconst paddingMap: Record<CardPadding, number> = {\n  none: 0,\n  sm: 12,\n  md: 16,\n  lg: 24,\n  xl: 32,\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  {\n    variant = 'elevated',\n    padding = 'md',\n    interactive = false,\n    selected = false,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const getVariantStyles = (): CSSProperties => {\n    const base: CSSProperties = {\n      borderRadius: 'var(--brycks-radius-lg)',\n      transition: 'transform 150ms ease-out, box-shadow 150ms ease-out, border-color 150ms ease-out',\n    }\n\n    switch (variant) {\n      case 'elevated':\n        return {\n          ...base,\n          backgroundColor: 'var(--brycks-background-elevated)',\n          boxShadow: selected\n            ? '0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-md)'\n            : 'var(--brycks-shadow-md)',\n          border: '1px solid var(--brycks-border-subtle)',\n        }\n      case 'outline':\n        return {\n          ...base,\n          backgroundColor: 'var(--brycks-background-default)',\n          border: selected\n            ? '2px solid var(--brycks-primary-default)'\n            : '1px solid var(--brycks-border-default)',\n        }\n      case 'filled':\n        return {\n          ...base,\n          backgroundColor: 'var(--brycks-background-muted)',\n          border: selected\n            ? '2px solid var(--brycks-primary-default)'\n            : '1px solid transparent',\n        }\n      case 'ghost':\n        return {\n          ...base,\n          backgroundColor: 'transparent',\n          border: selected\n            ? '2px solid var(--brycks-primary-default)'\n            : '1px solid transparent',\n        }\n    }\n  }\n\n  const cardStyle: CSSProperties = {\n    ...getVariantStyles(),\n    padding: paddingMap[padding],\n    display: 'flex',\n    flexDirection: 'column',\n    cursor: interactive ? 'pointer' : undefined,\n    ...style,\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        'brycks-card',\n        `brycks-card--${variant}`,\n        interactive && 'brycks-card--interactive',\n        selected && 'brycks-card--selected',\n        className\n      )}\n      style={cardStyle}\n      data-testid={testId}\n      onMouseEnter={\n        interactive\n          ? (e) => {\n              const target = e.currentTarget\n              if (variant === 'elevated') {\n                target.style.boxShadow = selected\n                  ? '0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-lg)'\n                  : 'var(--brycks-shadow-lg)'\n                target.style.transform = 'translateY(-2px)'\n              } else if (variant !== 'ghost') {\n                target.style.borderColor = 'var(--brycks-border-strong)'\n              }\n            }\n          : undefined\n      }\n      onMouseLeave={\n        interactive\n          ? (e) => {\n              const target = e.currentTarget\n              if (variant === 'elevated') {\n                target.style.boxShadow = selected\n                  ? '0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-md)'\n                  : 'var(--brycks-shadow-md)'\n                target.style.transform = 'translateY(0)'\n              } else if (variant !== 'ghost') {\n                target.style.borderColor = selected\n                  ? 'var(--brycks-primary-default)'\n                  : 'var(--brycks-border-default)'\n              }\n            }\n          : undefined\n      }\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nCard.displayName = 'Card'\n\nexport const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(function CardHeader(\n  { divider = false, className, style, children, ...props },\n  ref\n) {\n  const headerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: 12,\n    paddingBottom: divider ? 16 : 0,\n    marginBottom: divider ? 16 : 12,\n    borderBottom: divider ? '1px solid var(--brycks-border-muted)' : undefined,\n    ...style,\n  }\n\n  return (\n    <div ref={ref} className={cx('brycks-card-header', className)} style={headerStyle} {...props}>\n      {children}\n    </div>\n  )\n})\n\nCardHeader.displayName = 'CardHeader'\n\nexport const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(function CardBody(\n  { className, style, children, ...props },\n  ref\n) {\n  const bodyStyle: CSSProperties = {\n    flex: 1,\n    ...style,\n  }\n\n  return (\n    <div ref={ref} className={cx('brycks-card-body', className)} style={bodyStyle} {...props}>\n      {children}\n    </div>\n  )\n})\n\nCardBody.displayName = 'CardBody'\n\nexport const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(function CardFooter(\n  { divider = false, align = 'right', className, style, children, ...props },\n  ref\n) {\n  const alignMap: Record<string, CSSProperties['justifyContent']> = {\n    left: 'flex-start',\n    center: 'center',\n    right: 'flex-end',\n    between: 'space-between',\n  }\n\n  const footerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: alignMap[align],\n    gap: 12,\n    paddingTop: divider ? 16 : 0,\n    marginTop: divider ? 16 : 12,\n    borderTop: divider ? '1px solid var(--brycks-border-muted)' : undefined,\n    ...style,\n  }\n\n  return (\n    <div ref={ref} className={cx('brycks-card-footer', className)} style={footerStyle} {...props}>\n      {children}\n    </div>\n  )\n})\n\nCardFooter.displayName = 'CardFooter'\n"],"names":["paddingMap","Card","forwardRef","variant","padding","interactive","selected","className","style","children","testId","props","ref","cardStyle","base","jsx","cx","e","target","CardHeader","divider","headerStyle","CardBody","bodyStyle","CardFooter","align","footerStyle"],"mappings":"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"}
+{"version":3,"file":"Card.js","sources":["../../../../src/components/layout/Card/Card.tsx"],"sourcesContent":["/**\n * Card Component\n *\n * A flexible card container with optional header, footer, and body sections.\n * Supports different variants and padding sizes.\n */\n\nimport { forwardRef, useCallback, type CSSProperties, type HTMLAttributes } from 'react'\nimport { cx } from '../../../utils/styles'\nimport { spacing, durations, easings } from '../../../design-system'\nimport { componentGap } from '../../../design-system/primitives'\n\nexport type CardVariant = 'elevated' | 'outline' | 'filled' | 'ghost'\nexport type CardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl'\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  /** Card variant */\n  variant?: CardVariant\n  /** Card padding */\n  padding?: CardPadding\n  /** Whether the card is interactive (adds hover effect) */\n  interactive?: boolean\n  /** Whether the card is selected */\n  selected?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether to show a divider below the header */\n  divider?: boolean\n  /** Custom class name */\n  className?: string\n}\n\nexport interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether to show a divider above the footer */\n  divider?: boolean\n  /** Footer alignment */\n  align?: 'left' | 'center' | 'right' | 'between'\n  /** Custom class name */\n  className?: string\n}\n\nconst paddingMap: Record<CardPadding, number> = {\n  none: 0,\n  sm: spacing[3],\n  md: spacing[4],\n  lg: spacing[6],\n  xl: spacing[8],\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  {\n    variant = 'elevated',\n    padding = 'md',\n    interactive = false,\n    selected = false,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const getVariantStyles = (): CSSProperties => {\n    const transitionValue = `transform ${durations.quick}ms ${easings.easeOut}, box-shadow ${durations.quick}ms ${easings.easeOut}, border-color ${durations.quick}ms ${easings.easeOut}`\n    const base: CSSProperties = {\n      borderRadius: 'var(--brycks-radius-lg)',\n      transition: transitionValue,\n    }\n\n    switch (variant) {\n      case 'elevated':\n        return {\n          ...base,\n          backgroundColor: 'var(--brycks-background-elevated)',\n          boxShadow: selected\n            ? '0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-md)'\n            : 'var(--brycks-shadow-md)',\n          border: '1px solid var(--brycks-border-subtle)',\n        }\n      case 'outline':\n        return {\n          ...base,\n          backgroundColor: 'var(--brycks-background-default)',\n          border: selected\n            ? '2px solid var(--brycks-primary-default)'\n            : '1px solid var(--brycks-border-default)',\n        }\n      case 'filled':\n        return {\n          ...base,\n          backgroundColor: 'var(--brycks-background-muted)',\n          border: selected\n            ? '2px solid var(--brycks-primary-default)'\n            : '1px solid transparent',\n        }\n      case 'ghost':\n        return {\n          ...base,\n          backgroundColor: 'transparent',\n          border: selected\n            ? '2px solid var(--brycks-primary-default)'\n            : '1px solid transparent',\n        }\n    }\n  }\n\n  const cardStyle: CSSProperties = {\n    ...getVariantStyles(),\n    padding: paddingMap[padding],\n    display: 'flex',\n    flexDirection: 'column',\n    cursor: interactive ? 'pointer' : undefined,\n    ...style,\n  }\n\n  const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n    const target = e.currentTarget\n    if (variant === 'elevated') {\n      target.style.boxShadow = selected\n        ? '0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-lg)'\n        : 'var(--brycks-shadow-lg)'\n      target.style.transform = 'translateY(-2px)'\n    } else if (variant !== 'ghost') {\n      target.style.borderColor = 'var(--brycks-border-strong)'\n    }\n  }, [variant, selected])\n\n  const handleMouseLeave = useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n    const target = e.currentTarget\n    if (variant === 'elevated') {\n      target.style.boxShadow = selected\n        ? '0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-md)'\n        : 'var(--brycks-shadow-md)'\n      target.style.transform = 'translateY(0)'\n    } else if (variant !== 'ghost') {\n      target.style.borderColor = selected\n        ? 'var(--brycks-primary-default)'\n        : 'var(--brycks-border-default)'\n    }\n  }, [variant, selected])\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        'brycks-card',\n        `brycks-card--${variant}`,\n        interactive && 'brycks-card--interactive',\n        selected && 'brycks-card--selected',\n        className\n      )}\n      style={cardStyle}\n      data-testid={testId}\n      onMouseEnter={\n        interactive\n          ? handleMouseEnter\n          : undefined\n      }\n      onMouseLeave={\n        interactive\n          ? handleMouseLeave\n          : undefined\n      }\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nCard.displayName = 'Card'\n\nexport const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(function CardHeader(\n  { divider = false, className, style, children, ...props },\n  ref\n) {\n  const headerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: componentGap.xl,\n    paddingBottom: divider ? spacing[4] : 0,\n    marginBottom: divider ? spacing[4] : spacing[3],\n    borderBottom: divider ? '1px solid var(--brycks-border-muted)' : undefined,\n    ...style,\n  }\n\n  return (\n    <div ref={ref} className={cx('brycks-card-header', className)} style={headerStyle} {...props}>\n      {children}\n    </div>\n  )\n})\n\nCardHeader.displayName = 'CardHeader'\n\nexport const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(function CardBody(\n  { className, style, children, ...props },\n  ref\n) {\n  const bodyStyle: CSSProperties = {\n    flex: 1,\n    ...style,\n  }\n\n  return (\n    <div ref={ref} className={cx('brycks-card-body', className)} style={bodyStyle} {...props}>\n      {children}\n    </div>\n  )\n})\n\nCardBody.displayName = 'CardBody'\n\nexport const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(function CardFooter(\n  { divider = false, align = 'right', className, style, children, ...props },\n  ref\n) {\n  const alignMap: Record<string, CSSProperties['justifyContent']> = {\n    left: 'flex-start',\n    center: 'center',\n    right: 'flex-end',\n    between: 'space-between',\n  }\n\n  const footerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: alignMap[align],\n    gap: componentGap.xl,\n    paddingTop: divider ? spacing[4] : 0,\n    marginTop: divider ? spacing[4] : spacing[3],\n    borderTop: divider ? '1px solid var(--brycks-border-muted)' : undefined,\n    ...style,\n  }\n\n  return (\n    <div ref={ref} className={cx('brycks-card-footer', className)} style={footerStyle} {...props}>\n      {children}\n    </div>\n  )\n})\n\nCardFooter.displayName = 'CardFooter'\n"],"names":["paddingMap","spacing","Card","forwardRef","variant","padding","interactive","selected","className","style","children","testId","props","ref","cardStyle","base","durations","easings","handleMouseEnter","useCallback","e","target","handleMouseLeave","jsx","cx","CardHeader","divider","headerStyle","componentGap","CardBody","bodyStyle","CardFooter","align","footerStyle"],"mappings":"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"}

package/dist/components/layout/Collapse/Collapse.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),e=require("react"),H=require("../../../utils/styles.cjs"),q=require("../../../design-system/tokens/motion.cjs"),R=e.forwardRef(function({isOpen:s,defaultIsOpen:f=!1,children:l,duration:o=q.durations.normal,easing:m=q.easings.easeOut,animateOnMount:t=!1,unmountOnCollapse:a=!1,className:g,testId:b},v){const[y,r]=e.useState(f),[h,i]=e.useState(f?"auto":0),[d,c]=e.useState(!1),[n,S]=e.useState(f||!a),C=e.useRef(null),j=e.useRef(!0),u=s!==void 0?s:y;e.useEffect(()=>{s!==void 0&&s!==y&&r(s)},[s,y]),e.useEffect(()=>{if(j.current&&(j.current=!1,!t)){i(u?"auto":0),S(u||!a);return}const k=C.current;if(k)if(u){S(!0),c(!0);const w=k.scrollHeight;i(0),requestAnimationFrame(()=>{i(w)});const x=setTimeout(()=>{i("auto"),c(!1)},o);return()=>clearTimeout(x)}else{c(!0);const w=k.scrollHeight;i(w),requestAnimationFrame(()=>{i(0)});const x=setTimeout(()=>{c(!1),a&&S(!1)},o);return()=>clearTimeout(x)}},[u,o,t,a]);const N={overflow:"hidden",height:h,transition:d?`height ${o}ms ${m}`:void 0,willChange:d?"height":void 0},D={display:"flow-root"};return!n&&a?null:p.jsx("div",{ref:v,className:H.cx("brycks-collapse",u&&"brycks-collapse--open",d&&"brycks-collapse--animating",g),style:N,"data-testid":b,"aria-hidden":!u,children:p.jsx("div",{ref:C,style:D,children:l})})});R.displayName="Collapse";const T=e.forwardRef(function({header:s,children:f,isOpen:l,defaultIsOpen:o=!1,onToggle:m,disabled:t=!1,className:a,testId:g},b){const[v,y]=e.useState(o),r=l!==void 0?l:v,h=e.useCallback(()=>{if(t)return;const n=!r;l===void 0&&y(n),m?.(n)},[t,r,l,m]),i=e.useCallback(n=>{(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),h())},[h]),d={width:"100%"},c={display:"flex",alignItems:"center",width:"100%",cursor:t?"not-allowed":"pointer",opacity:t?.5:1,userSelect:"none"};return p.jsxs("div",{ref:b,className:H.cx("brycks-collapsible",r&&"brycks-collapsible--open",t&&"brycks-collapsible--disabled",a),style:d,"data-testid":g,children:[p.jsx("div",{role:"button",tabIndex:t?-1:0,"aria-expanded":r,"aria-disabled":t,style:c,onClick:h,onKeyDown:i,children:s}),p.jsx(R,{isOpen:r,children:f})]})});T.displayName="Collapsible";exports.Collapse=R;exports.Collapsible=T;
+//# sourceMappingURL=Collapse.cjs.map

package/dist/components/layout/Collapse/Collapse.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapse.cjs","sources":["../../../../src/components/layout/Collapse/Collapse.tsx"],"sourcesContent":["/**\n * Collapse Component\n *\n * A component for expandable/collapsible content with smooth animations.\n * Supports controlled and uncontrolled modes.\n *\n * @module components/layout/Collapse\n */\n\nimport {\n  forwardRef,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  type CSSProperties,\n  type ReactNode,\n} from 'react'\nimport { cx } from '../../../utils/styles'\nimport { durations, easings } from '../../../design-system'\n\nexport interface CollapseProps {\n  /** Whether the content is expanded (controlled) */\n  isOpen?: boolean\n  /** Default expanded state (uncontrolled) */\n  defaultIsOpen?: boolean\n  /** Content to show when collapsed */\n  children: ReactNode\n  /** Animation duration in milliseconds */\n  duration?: number\n  /** Easing function */\n  easing?: string\n  /** Whether to animate on initial render */\n  animateOnMount?: boolean\n  /** Whether to unmount content when collapsed */\n  unmountOnCollapse?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport const Collapse = forwardRef<HTMLDivElement, CollapseProps>(function Collapse(\n  {\n    isOpen: controlledIsOpen,\n    defaultIsOpen = false,\n    children,\n    duration = durations.normal,\n    easing = easings.easeOut,\n    animateOnMount = false,\n    unmountOnCollapse = false,\n    className,\n    testId,\n  },\n  ref\n) {\n  const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen)\n  const [height, setHeight] = useState<number | 'auto'>(defaultIsOpen ? 'auto' : 0)\n  const [isAnimating, setIsAnimating] = useState(false)\n  const [shouldRender, setShouldRender] = useState(defaultIsOpen || !unmountOnCollapse)\n\n  const contentRef = useRef<HTMLDivElement>(null)\n  const isInitialRender = useRef(true)\n\n  const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen\n\n  // Sync internal state with controlled value changes\n  useEffect(() => {\n    if (controlledIsOpen !== undefined && controlledIsOpen !== internalIsOpen) {\n      setInternalIsOpen(controlledIsOpen)\n    }\n  }, [controlledIsOpen, internalIsOpen])\n\n  // Handle animation\n  useEffect(() => {\n    if (isInitialRender.current) {\n      isInitialRender.current = false\n      if (!animateOnMount) {\n        setHeight(isOpen ? 'auto' : 0)\n        setShouldRender(isOpen || !unmountOnCollapse)\n        return\n      }\n    }\n\n    const content = contentRef.current\n    if (!content) return\n\n    if (isOpen) {\n      // Expanding\n      setShouldRender(true)\n      setIsAnimating(true)\n\n      // Get the natural height\n      const naturalHeight = content.scrollHeight\n\n      // Start from 0\n      setHeight(0)\n\n      // Force reflow\n      content.offsetHeight\n\n      // Animate to natural height\n      requestAnimationFrame(() => {\n        setHeight(naturalHeight)\n      })\n\n      // After animation, set to auto\n      const timer = setTimeout(() => {\n        setHeight('auto')\n        setIsAnimating(false)\n      }, duration)\n\n      return () => clearTimeout(timer)\n    } else {\n      // Collapsing\n      setIsAnimating(true)\n\n      // Get current height\n      const currentHeight = content.scrollHeight\n      setHeight(currentHeight)\n\n      // Force reflow\n      content.offsetHeight\n\n      // Animate to 0\n      requestAnimationFrame(() => {\n        setHeight(0)\n      })\n\n      // After animation, optionally unmount\n      const timer = setTimeout(() => {\n        setIsAnimating(false)\n        if (unmountOnCollapse) {\n          setShouldRender(false)\n        }\n      }, duration)\n\n      return () => clearTimeout(timer)\n    }\n  }, [isOpen, duration, animateOnMount, unmountOnCollapse])\n\n  const containerStyle: CSSProperties = {\n    overflow: 'hidden',\n    height: height,\n    transition: isAnimating ? `height ${duration}ms ${easing}` : undefined,\n    willChange: isAnimating ? 'height' : undefined,\n  }\n\n  const contentStyle: CSSProperties = {\n    // Prevent margin collapse\n    display: 'flow-root',\n  }\n\n  if (!shouldRender && unmountOnCollapse) {\n    return null\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        'brycks-collapse',\n        isOpen && 'brycks-collapse--open',\n        isAnimating && 'brycks-collapse--animating',\n        className\n      )}\n      style={containerStyle}\n      data-testid={testId}\n      aria-hidden={!isOpen}\n    >\n      <div ref={contentRef} style={contentStyle}>\n        {children}\n      </div>\n    </div>\n  )\n})\n\nCollapse.displayName = 'Collapse'\n\n// Helper component for creating collapsible sections with header\nexport interface CollapsibleProps {\n  /** Header content (always visible) */\n  header: ReactNode\n  /** Collapsible content */\n  children: ReactNode\n  /** Whether expanded (controlled) */\n  isOpen?: boolean\n  /** Default expanded state (uncontrolled) */\n  defaultIsOpen?: boolean\n  /** Callback when expanded state changes */\n  onToggle?: (isOpen: boolean) => void\n  /** Whether the collapsible is disabled */\n  disabled?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport const Collapsible = forwardRef<HTMLDivElement, CollapsibleProps>(function Collapsible(\n  {\n    header,\n    children,\n    isOpen: controlledIsOpen,\n    defaultIsOpen = false,\n    onToggle,\n    disabled = false,\n    className,\n    testId,\n  },\n  ref\n) {\n  const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen)\n\n  const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen\n\n  const handleToggle = useCallback(() => {\n    if (disabled) return\n\n    const newIsOpen = !isOpen\n    if (controlledIsOpen === undefined) {\n      setInternalIsOpen(newIsOpen)\n    }\n    onToggle?.(newIsOpen)\n  }, [disabled, isOpen, controlledIsOpen, onToggle])\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        handleToggle()\n      }\n    },\n    [handleToggle]\n  )\n\n  const containerStyle: CSSProperties = {\n    width: '100%',\n  }\n\n  const headerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    width: '100%',\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    opacity: disabled ? 0.5 : 1,\n    userSelect: 'none',\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        'brycks-collapsible',\n        isOpen && 'brycks-collapsible--open',\n        disabled && 'brycks-collapsible--disabled',\n        className\n      )}\n      style={containerStyle}\n      data-testid={testId}\n    >\n      <div\n        role=\"button\"\n        tabIndex={disabled ? -1 : 0}\n        aria-expanded={isOpen}\n        aria-disabled={disabled}\n        style={headerStyle}\n        onClick={handleToggle}\n        onKeyDown={handleKeyDown}\n      >\n        {header}\n      </div>\n      <Collapse isOpen={isOpen}>\n        {children}\n      </Collapse>\n    </div>\n  )\n})\n\nCollapsible.displayName = 'Collapsible'\n"],"names":["Collapse","forwardRef","controlledIsOpen","defaultIsOpen","children","duration","durations","easing","easings","animateOnMount","unmountOnCollapse","className","testId","ref","internalIsOpen","setInternalIsOpen","useState","height","setHeight","isAnimating","setIsAnimating","shouldRender","setShouldRender","contentRef","useRef","isInitialRender","isOpen","useEffect","content","naturalHeight","timer","currentHeight","containerStyle","contentStyle","jsx","cx","Collapsible","header","onToggle","disabled","handleToggle","useCallback","newIsOpen","handleKeyDown","e","headerStyle","jsxs"],"mappings":"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"}

package/dist/components/layout/Collapse/Collapse.js

@@ -0,0 +1,140 @@
+import { jsx as d, jsxs as K } from "react/jsx-runtime";
+import { forwardRef as T, useState as y, useRef as H, useEffect as A, useCallback as N } from "react";
+import { cx as D } from "../../../utils/styles.js";
+import { durations as $, easings as I } from "../../../design-system/tokens/motion.js";
+const j = T(function({
+  isOpen: t,
+  defaultIsOpen: f = !1,
+  children: a,
+  duration: o = $.normal,
+  easing: p = I.easeOut,
+  animateOnMount: e = !1,
+  unmountOnCollapse: n = !1,
+  className: g,
+  testId: v
+}, b) {
+  const [u, r] = y(f), [h, s] = y(f ? "auto" : 0), [m, l] = y(!1), [i, k] = y(f || !n), R = H(null), C = H(!0), c = t !== void 0 ? t : u;
+  A(() => {
+    t !== void 0 && t !== u && r(t);
+  }, [t, u]), A(() => {
+    if (C.current && (C.current = !1, !e)) {
+      s(c ? "auto" : 0), k(c || !n);
+      return;
+    }
+    const w = R.current;
+    if (w)
+      if (c) {
+        k(!0), l(!0);
+        const x = w.scrollHeight;
+        s(0), requestAnimationFrame(() => {
+          s(x);
+        });
+        const S = setTimeout(() => {
+          s("auto"), l(!1);
+        }, o);
+        return () => clearTimeout(S);
+      } else {
+        l(!0);
+        const x = w.scrollHeight;
+        s(x), requestAnimationFrame(() => {
+          s(0);
+        });
+        const S = setTimeout(() => {
+          l(!1), n && k(!1);
+        }, o);
+        return () => clearTimeout(S);
+      }
+  }, [c, o, e, n]);
+  const E = {
+    overflow: "hidden",
+    height: h,
+    transition: m ? `height ${o}ms ${p}` : void 0,
+    willChange: m ? "height" : void 0
+  }, F = {
+    // Prevent margin collapse
+    display: "flow-root"
+  };
+  return !i && n ? null : /* @__PURE__ */ d(
+    "div",
+    {
+      ref: b,
+      className: D(
+        "brycks-collapse",
+        c && "brycks-collapse--open",
+        m && "brycks-collapse--animating",
+        g
+      ),
+      style: E,
+      "data-testid": v,
+      "aria-hidden": !c,
+      children: /* @__PURE__ */ d("div", { ref: R, style: F, children: a })
+    }
+  );
+});
+j.displayName = "Collapse";
+const z = T(function({
+  header: t,
+  children: f,
+  isOpen: a,
+  defaultIsOpen: o = !1,
+  onToggle: p,
+  disabled: e = !1,
+  className: n,
+  testId: g
+}, v) {
+  const [b, u] = y(o), r = a !== void 0 ? a : b, h = N(() => {
+    if (e) return;
+    const i = !r;
+    a === void 0 && u(i), p?.(i);
+  }, [e, r, a, p]), s = N(
+    (i) => {
+      (i.key === "Enter" || i.key === " ") && (i.preventDefault(), h());
+    },
+    [h]
+  ), m = {
+    width: "100%"
+  }, l = {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    cursor: e ? "not-allowed" : "pointer",
+    opacity: e ? 0.5 : 1,
+    userSelect: "none"
+  };
+  return /* @__PURE__ */ K(
+    "div",
+    {
+      ref: v,
+      className: D(
+        "brycks-collapsible",
+        r && "brycks-collapsible--open",
+        e && "brycks-collapsible--disabled",
+        n
+      ),
+      style: m,
+      "data-testid": g,
+      children: [
+        /* @__PURE__ */ d(
+          "div",
+          {
+            role: "button",
+            tabIndex: e ? -1 : 0,
+            "aria-expanded": r,
+            "aria-disabled": e,
+            style: l,
+            onClick: h,
+            onKeyDown: s,
+            children: t
+          }
+        ),
+        /* @__PURE__ */ d(j, { isOpen: r, children: f })
+      ]
+    }
+  );
+});
+z.displayName = "Collapsible";
+export {
+  j as Collapse,
+  z as Collapsible
+};
+//# sourceMappingURL=Collapse.js.map

package/dist/components/layout/Collapse/Collapse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapse.js","sources":["../../../../src/components/layout/Collapse/Collapse.tsx"],"sourcesContent":["/**\n * Collapse Component\n *\n * A component for expandable/collapsible content with smooth animations.\n * Supports controlled and uncontrolled modes.\n *\n * @module components/layout/Collapse\n */\n\nimport {\n  forwardRef,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  type CSSProperties,\n  type ReactNode,\n} from 'react'\nimport { cx } from '../../../utils/styles'\nimport { durations, easings } from '../../../design-system'\n\nexport interface CollapseProps {\n  /** Whether the content is expanded (controlled) */\n  isOpen?: boolean\n  /** Default expanded state (uncontrolled) */\n  defaultIsOpen?: boolean\n  /** Content to show when collapsed */\n  children: ReactNode\n  /** Animation duration in milliseconds */\n  duration?: number\n  /** Easing function */\n  easing?: string\n  /** Whether to animate on initial render */\n  animateOnMount?: boolean\n  /** Whether to unmount content when collapsed */\n  unmountOnCollapse?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport const Collapse = forwardRef<HTMLDivElement, CollapseProps>(function Collapse(\n  {\n    isOpen: controlledIsOpen,\n    defaultIsOpen = false,\n    children,\n    duration = durations.normal,\n    easing = easings.easeOut,\n    animateOnMount = false,\n    unmountOnCollapse = false,\n    className,\n    testId,\n  },\n  ref\n) {\n  const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen)\n  const [height, setHeight] = useState<number | 'auto'>(defaultIsOpen ? 'auto' : 0)\n  const [isAnimating, setIsAnimating] = useState(false)\n  const [shouldRender, setShouldRender] = useState(defaultIsOpen || !unmountOnCollapse)\n\n  const contentRef = useRef<HTMLDivElement>(null)\n  const isInitialRender = useRef(true)\n\n  const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen\n\n  // Sync internal state with controlled value changes\n  useEffect(() => {\n    if (controlledIsOpen !== undefined && controlledIsOpen !== internalIsOpen) {\n      setInternalIsOpen(controlledIsOpen)\n    }\n  }, [controlledIsOpen, internalIsOpen])\n\n  // Handle animation\n  useEffect(() => {\n    if (isInitialRender.current) {\n      isInitialRender.current = false\n      if (!animateOnMount) {\n        setHeight(isOpen ? 'auto' : 0)\n        setShouldRender(isOpen || !unmountOnCollapse)\n        return\n      }\n    }\n\n    const content = contentRef.current\n    if (!content) return\n\n    if (isOpen) {\n      // Expanding\n      setShouldRender(true)\n      setIsAnimating(true)\n\n      // Get the natural height\n      const naturalHeight = content.scrollHeight\n\n      // Start from 0\n      setHeight(0)\n\n      // Force reflow\n      content.offsetHeight\n\n      // Animate to natural height\n      requestAnimationFrame(() => {\n        setHeight(naturalHeight)\n      })\n\n      // After animation, set to auto\n      const timer = setTimeout(() => {\n        setHeight('auto')\n        setIsAnimating(false)\n      }, duration)\n\n      return () => clearTimeout(timer)\n    } else {\n      // Collapsing\n      setIsAnimating(true)\n\n      // Get current height\n      const currentHeight = content.scrollHeight\n      setHeight(currentHeight)\n\n      // Force reflow\n      content.offsetHeight\n\n      // Animate to 0\n      requestAnimationFrame(() => {\n        setHeight(0)\n      })\n\n      // After animation, optionally unmount\n      const timer = setTimeout(() => {\n        setIsAnimating(false)\n        if (unmountOnCollapse) {\n          setShouldRender(false)\n        }\n      }, duration)\n\n      return () => clearTimeout(timer)\n    }\n  }, [isOpen, duration, animateOnMount, unmountOnCollapse])\n\n  const containerStyle: CSSProperties = {\n    overflow: 'hidden',\n    height: height,\n    transition: isAnimating ? `height ${duration}ms ${easing}` : undefined,\n    willChange: isAnimating ? 'height' : undefined,\n  }\n\n  const contentStyle: CSSProperties = {\n    // Prevent margin collapse\n    display: 'flow-root',\n  }\n\n  if (!shouldRender && unmountOnCollapse) {\n    return null\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        'brycks-collapse',\n        isOpen && 'brycks-collapse--open',\n        isAnimating && 'brycks-collapse--animating',\n        className\n      )}\n      style={containerStyle}\n      data-testid={testId}\n      aria-hidden={!isOpen}\n    >\n      <div ref={contentRef} style={contentStyle}>\n        {children}\n      </div>\n    </div>\n  )\n})\n\nCollapse.displayName = 'Collapse'\n\n// Helper component for creating collapsible sections with header\nexport interface CollapsibleProps {\n  /** Header content (always visible) */\n  header: ReactNode\n  /** Collapsible content */\n  children: ReactNode\n  /** Whether expanded (controlled) */\n  isOpen?: boolean\n  /** Default expanded state (uncontrolled) */\n  defaultIsOpen?: boolean\n  /** Callback when expanded state changes */\n  onToggle?: (isOpen: boolean) => void\n  /** Whether the collapsible is disabled */\n  disabled?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport const Collapsible = forwardRef<HTMLDivElement, CollapsibleProps>(function Collapsible(\n  {\n    header,\n    children,\n    isOpen: controlledIsOpen,\n    defaultIsOpen = false,\n    onToggle,\n    disabled = false,\n    className,\n    testId,\n  },\n  ref\n) {\n  const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen)\n\n  const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen\n\n  const handleToggle = useCallback(() => {\n    if (disabled) return\n\n    const newIsOpen = !isOpen\n    if (controlledIsOpen === undefined) {\n      setInternalIsOpen(newIsOpen)\n    }\n    onToggle?.(newIsOpen)\n  }, [disabled, isOpen, controlledIsOpen, onToggle])\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        handleToggle()\n      }\n    },\n    [handleToggle]\n  )\n\n  const containerStyle: CSSProperties = {\n    width: '100%',\n  }\n\n  const headerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    width: '100%',\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    opacity: disabled ? 0.5 : 1,\n    userSelect: 'none',\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        'brycks-collapsible',\n        isOpen && 'brycks-collapsible--open',\n        disabled && 'brycks-collapsible--disabled',\n        className\n      )}\n      style={containerStyle}\n      data-testid={testId}\n    >\n      <div\n        role=\"button\"\n        tabIndex={disabled ? -1 : 0}\n        aria-expanded={isOpen}\n        aria-disabled={disabled}\n        style={headerStyle}\n        onClick={handleToggle}\n        onKeyDown={handleKeyDown}\n      >\n        {header}\n      </div>\n      <Collapse isOpen={isOpen}>\n        {children}\n      </Collapse>\n    </div>\n  )\n})\n\nCollapsible.displayName = 'Collapsible'\n"],"names":["Collapse","forwardRef","controlledIsOpen","defaultIsOpen","children","duration","durations","easing","easings","animateOnMount","unmountOnCollapse","className","testId","ref","internalIsOpen","setInternalIsOpen","useState","height","setHeight","isAnimating","setIsAnimating","shouldRender","setShouldRender","contentRef","useRef","isInitialRender","isOpen","useEffect","content","naturalHeight","timer","currentHeight","containerStyle","contentStyle","jsx","cx","Collapsible","header","onToggle","disabled","handleToggle","useCallback","newIsOpen","handleKeyDown","e","headerStyle","jsxs"],"mappings":"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"}

package/dist/components/layout.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./layout/Box/Box.cjs"),t=require("./layout/Stack/Stack.cjs"),a=require("./layout/Grid/Grid.cjs"),c=require("./layout/Container/Container.cjs"),r=require("./layout/Card/Card.cjs"),d=require("./layout/Section/Section.cjs"),n=require("./layout/Spacer/Spacer.cjs"),o=require("./layout/Flex/Flex.cjs"),e=require("./layout/Semantic/Semantic.cjs"),s=require("./layout/AspectRatio/AspectRatio.cjs");exports.Box=i.Box;exports.HStack=t.HStack;exports.Stack=t.Stack;exports.VStack=t.VStack;exports.Grid=a.Grid;exports.GridItem=a.GridItem;exports.Container=c.Container;exports.Card=r.Card;exports.CardBody=r.CardBody;exports.CardFooter=r.CardFooter;exports.CardHeader=r.CardHeader;exports.Section=d.Section;exports.Spacer=n.Spacer;exports.Flex=o.Flex;exports.FlexItem=o.FlexItem;exports.Article=e.Article;exports.Aside=e.Aside;exports.Footer=e.Footer;exports.Header=e.Header;exports.Main=e.Main;exports.Nav=e.Nav;exports.AspectRatio=s.AspectRatio;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./layout/Box/Box.cjs"),t=require("./layout/Stack/Stack.cjs"),o=require("./layout/Grid/Grid.cjs"),n=require("./layout/Container/Container.cjs"),r=require("./layout/Card/Card.cjs"),d=require("./layout/Section/Section.cjs"),s=require("./layout/Spacer/Spacer.cjs"),a=require("./layout/Flex/Flex.cjs"),e=require("./layout/Semantic/Semantic.cjs"),l=require("./layout/AspectRatio/AspectRatio.cjs"),i=require("./layout/Collapse/Collapse.cjs");exports.Box=c.Box;exports.HStack=t.HStack;exports.Stack=t.Stack;exports.VStack=t.VStack;exports.Grid=o.Grid;exports.GridItem=o.GridItem;exports.Container=n.Container;exports.Card=r.Card;exports.CardBody=r.CardBody;exports.CardFooter=r.CardFooter;exports.CardHeader=r.CardHeader;exports.Section=d.Section;exports.Spacer=s.Spacer;exports.Flex=a.Flex;exports.FlexItem=a.FlexItem;exports.Article=e.Article;exports.Aside=e.Aside;exports.Footer=e.Footer;exports.Header=e.Header;exports.Main=e.Main;exports.Nav=e.Nav;exports.AspectRatio=l.AspectRatio;exports.Collapse=i.Collapse;exports.Collapsible=i.Collapsible;
 //# sourceMappingURL=layout.cjs.map

package/dist/components/layout.js

@@ -1,35 +1,38 @@
 import { Box as e } from "./layout/Box/Box.js";
-import { HStack as a, Stack as x, VStack as m } from "./layout/Stack/Stack.js";
-import { Grid as d, GridItem as f } from "./layout/Grid/Grid.js";
-import { Container as c } from "./layout/Container/Container.js";
-import { Card as S, CardBody as n, CardFooter as F, CardHeader as k } from "./layout/Card/Card.js";
-import { Section as A } from "./layout/Section/Section.js";
-import { Spacer as s } from "./layout/Spacer/Spacer.js";
+import { HStack as a, Stack as p, VStack as x } from "./layout/Stack/Stack.js";
+import { Grid as f, GridItem as d } from "./layout/Grid/Grid.js";
+import { Container as l } from "./layout/Container/Container.js";
+import { Card as C, CardBody as S, CardFooter as n, CardHeader as s } from "./layout/Card/Card.js";
+import { Section as k } from "./layout/Section/Section.js";
+import { Spacer as H } from "./layout/Spacer/Spacer.js";
 import { Flex as G, FlexItem as I } from "./layout/Flex/Flex.js";
-import { Article as y, Aside as M, Footer as N, Header as R, Main as V, Nav as b } from "./layout/Semantic/Semantic.js";
+import { Article as v, Aside as y, Footer as M, Header as N, Main as R, Nav as V } from "./layout/Semantic/Semantic.js";
 import { AspectRatio as h } from "./layout/AspectRatio/AspectRatio.js";
+import { Collapse as q, Collapsible as u } from "./layout/Collapse/Collapse.js";
 export {
-  y as Article,
-  M as Aside,
+  v as Article,
+  y as Aside,
   h as AspectRatio,
   e as Box,
-  S as Card,
-  n as CardBody,
-  F as CardFooter,
-  k as CardHeader,
-  c as Container,
+  C as Card,
+  S as CardBody,
+  n as CardFooter,
+  s as CardHeader,
+  q as Collapse,
+  u as Collapsible,
+  l as Container,
   G as Flex,
   I as FlexItem,
-  N as Footer,
-  d as Grid,
-  f as GridItem,
+  M as Footer,
+  f as Grid,
+  d as GridItem,
   a as HStack,
-  R as Header,
-  V as Main,
-  b as Nav,
-  A as Section,
-  s as Spacer,
-  x as Stack,
-  m as VStack
+  N as Header,
+  R as Main,
+  V as Nav,
+  k as Section,
+  H as Spacer,
+  p as Stack,
+  x as VStack
 };
 //# sourceMappingURL=layout.js.map

package/dist/components/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"layout.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/components/navigation/Breadcrumb/Breadcrumb.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),k=require("../../../utils/styles.cjs"),v={sm:{fontSize:12,gap:6,iconSize:12},md:{fontSize:14,gap:8,iconSize:14},lg:{fontSize:16,gap:10,iconSize:16}};function L({size:u}){return e.jsx("svg",{width:u,height:u,viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e.jsx("path",{d:"M6 4l4 4-4 4",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}const z=d.forwardRef(function({separator:i,size:o="md",maxItems:n,className:r,style:y,children:p,testId:g,...b},h){const s=v[o],t=d.Children.toArray(p).filter(d.isValidElement);let l=t,f=!1;if(n&&t.length>n){const m=Math.floor((n-1)/2);l=[...t.slice(0,m),...t.slice(t.length-(n-m-1))],f=!0}const c={display:"flex",alignItems:"center",...y},a={display:"flex",alignItems:"center",gap:s.gap,listStyle:"none",margin:0,padding:0},I={display:"flex",alignItems:"center",color:"var(--brycks-foreground-muted)"},w={display:"flex",alignItems:"center",color:"var(--brycks-foreground-muted)",fontSize:s.fontSize},x=()=>e.jsx("span",{style:I,"aria-hidden":"true",children:i??e.jsx(L,{size:s.iconSize})});return e.jsx("nav",{ref:h,"aria-label":"Breadcrumb",className:k.cx("brycks-breadcrumb",`brycks-breadcrumb--${o}`,r),style:c,"data-testid":g,...b,children:e.jsx("ol",{style:a,children:l.map((m,S)=>{const j=S===l.length-1,M=!j,E=f&&S===Math.floor((n-1)/2)-1;return e.jsxs("li",{style:{display:"flex",alignItems:"center",gap:s.gap},children:[d.cloneElement(m,{isCurrentPage:j,size:o}),E&&e.jsxs(e.Fragment,{children:[x(),e.jsx("span",{style:w,children:"..."})]}),M&&x()]},S)})})})});z.displayName="Breadcrumb";const B=d.forwardRef(function({as:i="a",href:o,icon:n,isCurrentPage:r=!1,size:y="md",className:p,style:g,children:b,...h},s){const t=v[y],l={display:"inline-flex",alignItems:"center",gap:6,fontSize:t.fontSize,fontWeight:r?500:400,color:r?"var(--brycks-foreground-default)":"var(--brycks-foreground-muted)",textDecoration:"none",transition:"color 150ms ease-out",cursor:r?"default":"pointer",...g},f={width:t.iconSize,height:t.iconSize,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},c={ref:s,className:k.cx("brycks-breadcrumb-item",r&&"brycks-breadcrumb-item--current",p),style:l,"aria-current":r?"page":void 0,...h};return i==="a"&&o&&!r&&(c.href=o),r&&i==="a"&&(c.tabIndex=-1),e.jsxs(i,{...c,onMouseEnter:a=>{r||(a.currentTarget.style.color="var(--brycks-foreground-default)")},onMouseLeave:a=>{r||(a.currentTarget.style.color="var(--brycks-foreground-muted)")},children:[n&&e.jsx("span",{style:f,children:n}),b]})});B.displayName="BreadcrumbItem";exports.Breadcrumb=z;exports.BreadcrumbItem=B;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),B=require("../../../utils/styles.cjs"),i=require("../../../design-system/tokens/typography.cjs"),z=require("../../../design-system/primitives/sizing.cjs"),R=require("../../../design-system/tokens/spacing.cjs"),v=require("../../../design-system/tokens/motion.cjs"),I={sm:{fontSize:i.fontSizes.sm,gap:z.componentGap.sm,iconSize:i.fontSizes.sm},md:{fontSize:i.fontSizes.base,gap:R.spacing[2],iconSize:i.fontSizes.base},lg:{fontSize:i.fontSizes.md,gap:z.componentGap.lg,iconSize:i.fontSizes.md}};function G({size:f}){return e.jsx("svg",{width:f,height:f,viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e.jsx("path",{d:"M6 4l4 4-4 4",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}const q=u.forwardRef(function({separator:c,size:s="md",maxItems:n,className:t,style:y,children:g,testId:b,...S},h){const o=I[s],r=u.Children.toArray(g).filter(u.isValidElement);let a=r,m=!1;if(n&&r.length>n){const p=Math.floor((n-1)/2);a=[...r.slice(0,p),...r.slice(r.length-(n-p-1))],m=!0}const l={display:"flex",alignItems:"center",...y},d={display:"flex",alignItems:"center",gap:o.gap,listStyle:"none",margin:0,padding:0},M={display:"flex",alignItems:"center",color:"var(--brycks-foreground-muted)"},E={display:"flex",alignItems:"center",color:"var(--brycks-foreground-muted)",fontSize:o.fontSize},k=()=>e.jsx("span",{style:M,"aria-hidden":"true",children:c??e.jsx(G,{size:o.iconSize})});return e.jsx("nav",{ref:h,"aria-label":"Breadcrumb",className:B.cx("brycks-breadcrumb",`brycks-breadcrumb--${s}`,t),style:l,"data-testid":b,...S,children:e.jsx("ol",{style:d,children:a.map((p,x)=>{const j=x===a.length-1,L=!j,N=m&&x===Math.floor((n-1)/2)-1;return e.jsxs("li",{style:{display:"flex",alignItems:"center",gap:o.gap},children:[u.cloneElement(p,{isCurrentPage:j,size:s}),N&&e.jsxs(e.Fragment,{children:[k(),e.jsx("span",{style:E,children:"..."})]}),L&&k()]},x)})})})});q.displayName="Breadcrumb";const w=u.forwardRef(function({as:c="a",href:s,icon:n,isCurrentPage:t=!1,size:y="md",className:g,style:b,children:S,...h},o){const r=I[y],a={display:"inline-flex",alignItems:"center",gap:z.componentGap.sm,fontSize:r.fontSize,fontWeight:t?500:400,color:t?"var(--brycks-foreground-default)":"var(--brycks-foreground-muted)",textDecoration:"none",transition:`color ${v.durations.quick}ms ${v.easings.easeOut}`,cursor:t?"default":"pointer",...b},m={width:r.iconSize,height:r.iconSize,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},l={ref:o,className:B.cx("brycks-breadcrumb-item",t&&"brycks-breadcrumb-item--current",g),style:a,"aria-current":t?"page":void 0,...h};return c==="a"&&s&&!t&&(l.href=s),t&&c==="a"&&(l.tabIndex=-1),e.jsxs(c,{...l,onMouseEnter:d=>{t||(d.currentTarget.style.color="var(--brycks-foreground-default)")},onMouseLeave:d=>{t||(d.currentTarget.style.color="var(--brycks-foreground-muted)")},children:[n&&e.jsx("span",{style:m,children:n}),S]})});w.displayName="BreadcrumbItem";exports.Breadcrumb=q;exports.BreadcrumbItem=w;
 //# sourceMappingURL=Breadcrumb.cjs.map

package/dist/components/navigation/Breadcrumb/Breadcrumb.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.cjs","sources":["../../../../src/components/navigation/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["/**\n * Breadcrumb Component\n *\n * A navigation breadcrumb trail showing the current location.\n * Supports custom separators and link rendering.\n */\n\nimport {\n  forwardRef,\n  Children,\n  cloneElement,\n  isValidElement,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n  type ElementType,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type BreadcrumbSize = 'sm' | 'md' | 'lg'\n\nexport interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {\n  /** Custom separator between items */\n  separator?: ReactNode\n  /** Breadcrumb size */\n  size?: BreadcrumbSize\n  /** Maximum items to show (rest collapsed) */\n  maxItems?: number\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<BreadcrumbSize, { fontSize: number; gap: number; iconSize: number }> = {\n  sm: { fontSize: 12, gap: 6, iconSize: 12 },\n  md: { fontSize: 14, gap: 8, iconSize: 14 },\n  lg: { fontSize: 16, gap: 10, iconSize: 16 },\n}\n\nfunction DefaultSeparator({ size }: { size: number }) {\n  return (\n    <svg width={size} height={size} viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M6 4l4 4-4 4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\nexport const Breadcrumb = forwardRef<HTMLElement, BreadcrumbProps>(function Breadcrumb(\n  {\n    separator,\n    size = 'md',\n    maxItems,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const config = sizeConfig[size]\n  const items = Children.toArray(children).filter(isValidElement)\n\n  // Handle maxItems truncation\n  let visibleItems = items\n  let showEllipsis = false\n\n  if (maxItems && items.length > maxItems) {\n    const sideCount = Math.floor((maxItems - 1) / 2)\n    visibleItems = [\n      ...items.slice(0, sideCount),\n      ...items.slice(items.length - (maxItems - sideCount - 1)),\n    ]\n    showEllipsis = true\n  }\n\n  const navStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    ...style,\n  }\n\n  const listStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    gap: config.gap,\n    listStyle: 'none',\n    margin: 0,\n    padding: 0,\n  }\n\n  const separatorStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    color: 'var(--brycks-foreground-muted)',\n  }\n\n  const ellipsisStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    color: 'var(--brycks-foreground-muted)',\n    fontSize: config.fontSize,\n  }\n\n  const renderSeparator = () => (\n    <span style={separatorStyle} aria-hidden=\"true\">\n      {separator ?? <DefaultSeparator size={config.iconSize} />}\n    </span>\n  )\n\n  return (\n    <nav\n      ref={ref}\n      aria-label=\"Breadcrumb\"\n      className={cx('brycks-breadcrumb', `brycks-breadcrumb--${size}`, className)}\n      style={navStyle}\n      data-testid={testId}\n      {...props}\n    >\n      <ol style={listStyle}>\n        {visibleItems.map((child, index) => {\n          const isLast = index === visibleItems.length - 1\n          const showSeparator = !isLast\n\n          // Insert ellipsis after first item if truncating\n          const showEllipsisHere = showEllipsis && index === Math.floor((maxItems! - 1) / 2) - 1\n\n          return (\n            <li key={index} style={{ display: 'flex', alignItems: 'center', gap: config.gap }}>\n              {cloneElement(child as React.ReactElement<BreadcrumbItemProps>, {\n                isCurrentPage: isLast,\n                size,\n              })}\n              {showEllipsisHere && (\n                <>\n                  {renderSeparator()}\n                  <span style={ellipsisStyle}>...</span>\n                </>\n              )}\n              {showSeparator && renderSeparator()}\n            </li>\n          )\n        })}\n      </ol>\n    </nav>\n  )\n})\n\nBreadcrumb.displayName = 'Breadcrumb'\n\n// BreadcrumbItem\nexport interface BreadcrumbItemProps extends HTMLAttributes<HTMLElement> {\n  /** Render as link or custom element */\n  as?: ElementType\n  /** Link href (when as=\"a\") */\n  href?: string\n  /** Icon before the label */\n  icon?: ReactNode\n  /** Whether this is the current page (auto-set by parent) */\n  isCurrentPage?: boolean\n  /** Size (auto-set by parent) */\n  size?: BreadcrumbSize\n  /** Custom class name */\n  className?: string\n}\n\nexport const BreadcrumbItem = forwardRef<HTMLElement, BreadcrumbItemProps>(function BreadcrumbItem(\n  {\n    as: Component = 'a',\n    href,\n    icon,\n    isCurrentPage = false,\n    size = 'md',\n    className,\n    style,\n    children,\n    ...props\n  },\n  ref\n) {\n  const config = sizeConfig[size]\n\n  const itemStyle: CSSProperties = {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: 6,\n    fontSize: config.fontSize,\n    fontWeight: isCurrentPage ? 500 : 400,\n    color: isCurrentPage ? 'var(--brycks-foreground-default)' : 'var(--brycks-foreground-muted)',\n    textDecoration: 'none',\n    transition: 'color 150ms ease-out',\n    cursor: isCurrentPage ? 'default' : 'pointer',\n    ...style,\n  }\n\n  const iconStyle: CSSProperties = {\n    width: config.iconSize,\n    height: config.iconSize,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n  }\n\n  const componentProps: Record<string, unknown> = {\n    ref,\n    className: cx('brycks-breadcrumb-item', isCurrentPage && 'brycks-breadcrumb-item--current', className),\n    style: itemStyle,\n    'aria-current': isCurrentPage ? 'page' : undefined,\n    ...props,\n  }\n\n  if (Component === 'a' && href && !isCurrentPage) {\n    componentProps.href = href\n  }\n\n  // Remove href for current page or non-link elements\n  if (isCurrentPage && Component === 'a') {\n    componentProps.tabIndex = -1\n  }\n\n  return (\n    <Component\n      {...componentProps}\n      onMouseEnter={(e: React.MouseEvent<HTMLElement>) => {\n        if (!isCurrentPage) {\n          e.currentTarget.style.color = 'var(--brycks-foreground-default)'\n        }\n      }}\n      onMouseLeave={(e: React.MouseEvent<HTMLElement>) => {\n        if (!isCurrentPage) {\n          e.currentTarget.style.color = 'var(--brycks-foreground-muted)'\n        }\n      }}\n    >\n      {icon && <span style={iconStyle}>{icon}</span>}\n      {children}\n    </Component>\n  )\n})\n\nBreadcrumbItem.displayName = 'BreadcrumbItem'\n"],"names":["sizeConfig","DefaultSeparator","size","jsx","Breadcrumb","forwardRef","separator","maxItems","className","style","children","testId","props","ref","config","items","Children","isValidElement","visibleItems","showEllipsis","sideCount","navStyle","listStyle","separatorStyle","ellipsisStyle","renderSeparator","cx","child","index","isLast","showSeparator","showEllipsisHere","jsxs","cloneElement","Fragment","BreadcrumbItem","Component","href","icon","isCurrentPage","itemStyle","iconStyle","componentProps","e"],"mappings":"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"}
+{"version":3,"file":"Breadcrumb.cjs","sources":["../../../../src/components/navigation/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["/**\n * Breadcrumb Component\n *\n * A navigation breadcrumb trail showing the current location.\n * Supports custom separators and link rendering.\n */\n\nimport {\n  forwardRef,\n  Children,\n  cloneElement,\n  isValidElement,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n  type ElementType,\n} from 'react'\nimport { cx } from '../../../utils/styles'\nimport { spacing, fontSizes, durations, easings } from '../../../design-system'\nimport { componentGap } from '../../../design-system/primitives'\n\nexport type BreadcrumbSize = 'sm' | 'md' | 'lg'\n\nexport interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {\n  /** Custom separator between items */\n  separator?: ReactNode\n  /** Breadcrumb size */\n  size?: BreadcrumbSize\n  /** Maximum items to show (rest collapsed) */\n  maxItems?: number\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<BreadcrumbSize, { fontSize: number; gap: number; iconSize: number }> = {\n  sm: { fontSize: fontSizes.sm, gap: componentGap.sm, iconSize: fontSizes.sm },\n  md: { fontSize: fontSizes.base, gap: spacing[2], iconSize: fontSizes.base },\n  lg: { fontSize: fontSizes.md, gap: componentGap.lg, iconSize: fontSizes.md },\n}\n\nfunction DefaultSeparator({ size }: { size: number }) {\n  return (\n    <svg width={size} height={size} viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M6 4l4 4-4 4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\nexport const Breadcrumb = forwardRef<HTMLElement, BreadcrumbProps>(function Breadcrumb(\n  {\n    separator,\n    size = 'md',\n    maxItems,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const config = sizeConfig[size]\n  const items = Children.toArray(children).filter(isValidElement)\n\n  // Handle maxItems truncation\n  let visibleItems = items\n  let showEllipsis = false\n\n  if (maxItems && items.length > maxItems) {\n    const sideCount = Math.floor((maxItems - 1) / 2)\n    visibleItems = [\n      ...items.slice(0, sideCount),\n      ...items.slice(items.length - (maxItems - sideCount - 1)),\n    ]\n    showEllipsis = true\n  }\n\n  const navStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    ...style,\n  }\n\n  const listStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    gap: config.gap,\n    listStyle: 'none',\n    margin: 0,\n    padding: 0,\n  }\n\n  const separatorStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    color: 'var(--brycks-foreground-muted)',\n  }\n\n  const ellipsisStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    color: 'var(--brycks-foreground-muted)',\n    fontSize: config.fontSize,\n  }\n\n  const renderSeparator = () => (\n    <span style={separatorStyle} aria-hidden=\"true\">\n      {separator ?? <DefaultSeparator size={config.iconSize} />}\n    </span>\n  )\n\n  return (\n    <nav\n      ref={ref}\n      aria-label=\"Breadcrumb\"\n      className={cx('brycks-breadcrumb', `brycks-breadcrumb--${size}`, className)}\n      style={navStyle}\n      data-testid={testId}\n      {...props}\n    >\n      <ol style={listStyle}>\n        {visibleItems.map((child, index) => {\n          const isLast = index === visibleItems.length - 1\n          const showSeparator = !isLast\n\n          // Insert ellipsis after first item if truncating\n          const showEllipsisHere = showEllipsis && index === Math.floor((maxItems! - 1) / 2) - 1\n\n          return (\n            <li key={index} style={{ display: 'flex', alignItems: 'center', gap: config.gap }}>\n              {cloneElement(child as React.ReactElement<BreadcrumbItemProps>, {\n                isCurrentPage: isLast,\n                size,\n              })}\n              {showEllipsisHere && (\n                <>\n                  {renderSeparator()}\n                  <span style={ellipsisStyle}>...</span>\n                </>\n              )}\n              {showSeparator && renderSeparator()}\n            </li>\n          )\n        })}\n      </ol>\n    </nav>\n  )\n})\n\nBreadcrumb.displayName = 'Breadcrumb'\n\n// BreadcrumbItem\nexport interface BreadcrumbItemProps extends HTMLAttributes<HTMLElement> {\n  /** Render as link or custom element */\n  as?: ElementType\n  /** Link href (when as=\"a\") */\n  href?: string\n  /** Icon before the label */\n  icon?: ReactNode\n  /** Whether this is the current page (auto-set by parent) */\n  isCurrentPage?: boolean\n  /** Size (auto-set by parent) */\n  size?: BreadcrumbSize\n  /** Custom class name */\n  className?: string\n}\n\nexport const BreadcrumbItem = forwardRef<HTMLElement, BreadcrumbItemProps>(function BreadcrumbItem(\n  {\n    as: Component = 'a',\n    href,\n    icon,\n    isCurrentPage = false,\n    size = 'md',\n    className,\n    style,\n    children,\n    ...props\n  },\n  ref\n) {\n  const config = sizeConfig[size]\n\n  const itemStyle: CSSProperties = {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: componentGap.sm,\n    fontSize: config.fontSize,\n    fontWeight: isCurrentPage ? 500 : 400,\n    color: isCurrentPage ? 'var(--brycks-foreground-default)' : 'var(--brycks-foreground-muted)',\n    textDecoration: 'none',\n    transition: `color ${durations.quick}ms ${easings.easeOut}`,\n    cursor: isCurrentPage ? 'default' : 'pointer',\n    ...style,\n  }\n\n  const iconStyle: CSSProperties = {\n    width: config.iconSize,\n    height: config.iconSize,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n  }\n\n  const componentProps: Record<string, unknown> = {\n    ref,\n    className: cx('brycks-breadcrumb-item', isCurrentPage && 'brycks-breadcrumb-item--current', className),\n    style: itemStyle,\n    'aria-current': isCurrentPage ? 'page' : undefined,\n    ...props,\n  }\n\n  if (Component === 'a' && href && !isCurrentPage) {\n    componentProps.href = href\n  }\n\n  // Remove href for current page or non-link elements\n  if (isCurrentPage && Component === 'a') {\n    componentProps.tabIndex = -1\n  }\n\n  return (\n    <Component\n      {...componentProps}\n      onMouseEnter={(e: React.MouseEvent<HTMLElement>) => {\n        if (!isCurrentPage) {\n          e.currentTarget.style.color = 'var(--brycks-foreground-default)'\n        }\n      }}\n      onMouseLeave={(e: React.MouseEvent<HTMLElement>) => {\n        if (!isCurrentPage) {\n          e.currentTarget.style.color = 'var(--brycks-foreground-muted)'\n        }\n      }}\n    >\n      {icon && <span style={iconStyle}>{icon}</span>}\n      {children}\n    </Component>\n  )\n})\n\nBreadcrumbItem.displayName = 'BreadcrumbItem'\n"],"names":["sizeConfig","fontSizes","componentGap","spacing","DefaultSeparator","size","jsx","Breadcrumb","forwardRef","separator","maxItems","className","style","children","testId","props","ref","config","items","Children","isValidElement","visibleItems","showEllipsis","sideCount","navStyle","listStyle","separatorStyle","ellipsisStyle","renderSeparator","cx","child","index","isLast","showSeparator","showEllipsisHere","jsxs","cloneElement","Fragment","BreadcrumbItem","Component","href","icon","isCurrentPage","itemStyle","durations","easings","iconStyle","componentProps","e"],"mappings":"gZAoCMA,EAA0F,CAC9F,GAAI,CAAE,SAAUC,EAAAA,UAAU,GAAI,IAAKC,EAAAA,aAAa,GAAI,SAAUD,EAAAA,UAAU,EAAA,EACxE,GAAI,CAAE,SAAUA,EAAAA,UAAU,KAAM,IAAKE,EAAAA,QAAQ,CAAC,EAAG,SAAUF,EAAAA,UAAU,IAAA,EACrE,GAAI,CAAE,SAAUA,EAAAA,UAAU,GAAI,IAAKC,EAAAA,aAAa,GAAI,SAAUD,EAAAA,UAAU,EAAA,CAC1E,EAEA,SAASG,EAAiB,CAAE,KAAAC,GAA0B,CACpD,OACEC,EAAAA,IAAC,MAAA,CAAI,MAAOD,EAAM,OAAQA,EAAM,QAAQ,YAAY,KAAK,OAAO,cAAY,OAC1E,eAAC,OAAA,CAAK,EAAE,eAAe,OAAO,eAAe,YAAY,MAAM,cAAc,QAAQ,eAAe,OAAA,CAAQ,CAAA,CAC9G,CAEJ,CAEO,MAAME,EAAaC,EAAAA,WAAyC,SACjE,CACE,UAAAC,EACA,KAAAJ,EAAO,KACP,SAAAK,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,OAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAASjB,EAAWK,CAAI,EACxBa,EAAQC,EAAAA,SAAS,QAAQN,CAAQ,EAAE,OAAOO,gBAAc,EAG9D,IAAIC,EAAeH,EACfI,EAAe,GAEnB,GAAIZ,GAAYQ,EAAM,OAASR,EAAU,CACvC,MAAMa,EAAY,KAAK,OAAOb,EAAW,GAAK,CAAC,EAC/CW,EAAe,CACb,GAAGH,EAAM,MAAM,EAAGK,CAAS,EAC3B,GAAGL,EAAM,MAAMA,EAAM,QAAUR,EAAWa,EAAY,EAAE,CAAA,EAE1DD,EAAe,EACjB,CAEA,MAAME,EAA0B,CAC9B,QAAS,OACT,WAAY,SACZ,GAAGZ,CAAA,EAGCa,EAA2B,CAC/B,QAAS,OACT,WAAY,SACZ,IAAKR,EAAO,IACZ,UAAW,OACX,OAAQ,EACR,QAAS,CAAA,EAGLS,EAAgC,CACpC,QAAS,OACT,WAAY,SACZ,MAAO,gCAAA,EAGHC,EAA+B,CACnC,QAAS,OACT,WAAY,SACZ,MAAO,iCACP,SAAUV,EAAO,QAAA,EAGbW,EAAkB,IACtBtB,MAAC,OAAA,CAAK,MAAOoB,EAAgB,cAAY,OACtC,SAAAjB,GAAaH,EAAAA,IAACF,EAAA,CAAiB,KAAMa,EAAO,SAAU,EACzD,EAGF,OACEX,EAAAA,IAAC,MAAA,CACC,IAAAU,EACA,aAAW,aACX,UAAWa,EAAAA,GAAG,oBAAqB,sBAAsBxB,CAAI,GAAIM,CAAS,EAC1E,MAAOa,EACP,cAAaV,EACZ,GAAGC,EAEJ,SAAAT,EAAAA,IAAC,MAAG,MAAOmB,EACR,WAAa,IAAI,CAACK,EAAOC,IAAU,CAClC,MAAMC,EAASD,IAAUV,EAAa,OAAS,EACzCY,EAAgB,CAACD,EAGjBE,EAAmBZ,GAAgBS,IAAU,KAAK,OAAOrB,EAAY,GAAK,CAAC,EAAI,EAErF,OACEyB,EAAAA,KAAC,KAAA,CAAe,MAAO,CAAE,QAAS,OAAQ,WAAY,SAAU,IAAKlB,EAAO,GAAA,EACzE,SAAA,CAAAmB,EAAAA,aAAaN,EAAkD,CAC9D,cAAeE,EACf,KAAA3B,CAAA,CACD,EACA6B,GACCC,EAAAA,KAAAE,WAAA,CACG,SAAA,CAAAT,EAAA,EACDtB,EAAAA,IAAC,OAAA,CAAK,MAAOqB,EAAe,SAAA,KAAA,CAAG,CAAA,EACjC,EAEDM,GAAiBL,EAAA,CAAgB,CAAA,EAX3BG,CAYT,CAEJ,CAAC,CAAA,CACH,CAAA,CAAA,CAGN,CAAC,EAEDxB,EAAW,YAAc,aAkBlB,MAAM+B,EAAiB9B,EAAAA,WAA6C,SACzE,CACE,GAAI+B,EAAY,IAChB,KAAAC,EACA,KAAAC,EACA,cAAAC,EAAgB,GAChB,KAAArC,EAAO,KACP,UAAAM,EACA,MAAAC,EACA,SAAAC,EACA,GAAGE,CACL,EACAC,EACA,CACA,MAAMC,EAASjB,EAAWK,CAAI,EAExBsC,EAA2B,CAC/B,QAAS,cACT,WAAY,SACZ,IAAKzC,EAAAA,aAAa,GAClB,SAAUe,EAAO,SACjB,WAAYyB,EAAgB,IAAM,IAClC,MAAOA,EAAgB,mCAAqC,iCAC5D,eAAgB,OAChB,WAAY,SAASE,EAAAA,UAAU,KAAK,MAAMC,EAAAA,QAAQ,OAAO,GACzD,OAAQH,EAAgB,UAAY,UACpC,GAAG9B,CAAA,EAGCkC,EAA2B,CAC/B,MAAO7B,EAAO,SACd,OAAQA,EAAO,SACf,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,WAAY,CAAA,EAGR8B,EAA0C,CAC9C,IAAA/B,EACA,UAAWa,EAAAA,GAAG,yBAA0Ba,GAAiB,kCAAmC/B,CAAS,EACrG,MAAOgC,EACP,eAAgBD,EAAgB,OAAS,OACzC,GAAG3B,CAAA,EAGL,OAAIwB,IAAc,KAAOC,GAAQ,CAACE,IAChCK,EAAe,KAAOP,GAIpBE,GAAiBH,IAAc,MACjCQ,EAAe,SAAW,IAI1BZ,EAAAA,KAACI,EAAA,CACE,GAAGQ,EACJ,aAAeC,GAAqC,CAC7CN,IACHM,EAAE,cAAc,MAAM,MAAQ,mCAElC,EACA,aAAeA,GAAqC,CAC7CN,IACHM,EAAE,cAAc,MAAM,MAAQ,iCAElC,EAEC,SAAA,CAAAP,GAAQnC,EAAAA,IAAC,OAAA,CAAK,MAAOwC,EAAY,SAAAL,EAAK,EACtC5B,CAAA,CAAA,CAAA,CAGP,CAAC,EAEDyB,EAAe,YAAc"}