@brycks/core-front 0.3.1 → 0.3.2

package/dist/components/navigation/Stepper/Stepper.js

@@ -0,0 +1,187 @@
+import { jsx as i, jsxs as x } from "react/jsx-runtime";
+import { forwardRef as $, createContext as q, useContext as F } from "react";
+import { cx as I } from "../../../utils/styles.js";
+import { spacing as t } from "../../../design-system/tokens/spacing.js";
+import { fontSizes as s } from "../../../design-system/tokens/typography.js";
+import { durations as z, easings as C } from "../../../design-system/tokens/motion.js";
+const L = q(null);
+function G() {
+  const u = F(L);
+  if (!u)
+    throw new Error("Step components must be used within a Stepper");
+  return u;
+}
+const j = {
+  sm: { indicator: t[6], fontSize: s.sm, labelSize: s.xs, gap: t[2], lineWidth: 2 },
+  md: { indicator: t[8], fontSize: s.base, labelSize: s.sm, gap: t[3], lineWidth: 2 },
+  lg: { indicator: t[10], fontSize: s.md, labelSize: s.base, gap: t[4], lineWidth: 3 }
+};
+function J() {
+  return /* @__PURE__ */ i("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M3.5 8l3 3 6-6",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+const K = $(function({
+  currentStep: m,
+  onStepChange: h,
+  size: a = "md",
+  orientation: n = "horizontal",
+  clickable: c = !1,
+  className: l,
+  style: g,
+  children: d,
+  testId: y,
+  ...v
+}, b) {
+  const e = j[a], f = Array.isArray(d) ? d.length : 1, k = {
+    display: "flex",
+    flexDirection: n === "horizontal" ? "row" : "column",
+    gap: n === "horizontal" ? 0 : e.gap,
+    alignItems: n === "horizontal" ? "flex-start" : "stretch",
+    ...g
+  };
+  return /* @__PURE__ */ i(
+    L.Provider,
+    {
+      value: {
+        size: a,
+        orientation: n,
+        currentStep: m,
+        totalSteps: f,
+        onStepClick: h,
+        clickable: c
+      },
+      children: /* @__PURE__ */ i(
+        "div",
+        {
+          ref: b,
+          role: "navigation",
+          "aria-label": "Progress",
+          className: I(
+            "brycks-stepper",
+            `brycks-stepper--${a}`,
+            `brycks-stepper--${n}`,
+            l
+          ),
+          style: k,
+          "data-testid": y,
+          ...v,
+          children: d
+        }
+      )
+    }
+  );
+});
+K.displayName = "Stepper";
+const Q = $(function({
+  index: m,
+  title: h,
+  description: a,
+  icon: n,
+  disabled: c = !1,
+  hasError: l = !1,
+  className: g,
+  style: d,
+  ...y
+}, v) {
+  const { size: b, orientation: e, currentStep: f, totalSteps: k, onStepClick: w, clickable: D } = G(), o = j[b], p = m ?? 0, S = p === k - 1, r = p < f ? "completed" : p === f ? "current" : "upcoming", W = D && !c && r !== "current", N = () => {
+    W && w && w(p);
+  }, A = {
+    display: "flex",
+    flexDirection: e === "horizontal" ? "column" : "row",
+    alignItems: e === "horizontal" ? "center" : "flex-start",
+    gap: o.gap,
+    flex: e === "horizontal" && !S ? 1 : void 0,
+    cursor: W ? "pointer" : "default",
+    opacity: c ? 0.5 : 1,
+    ...d
+  }, O = {
+    display: "flex",
+    alignItems: "center",
+    flexDirection: e === "horizontal" ? "row" : "column",
+    gap: 0,
+    flex: e === "horizontal" && !S ? 1 : void 0
+  }, R = () => l ? "var(--brycks-error-default)" : r === "completed" ? "var(--brycks-success-default)" : r === "current" ? "var(--brycks-primary-default)" : "var(--brycks-border-default)", B = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: o.indicator,
+    height: o.indicator,
+    borderRadius: "50%",
+    backgroundColor: r === "upcoming" ? "var(--brycks-background-default)" : R(),
+    border: r === "upcoming" ? `${o.lineWidth}px solid ${l ? "var(--brycks-error-default)" : "var(--brycks-border-default)"}` : "none",
+    color: r === "upcoming" ? l ? "var(--brycks-error-default)" : "var(--brycks-foreground-muted)" : "white",
+    fontSize: o.labelSize,
+    fontWeight: 600,
+    flexShrink: 0,
+    transition: `all ${z.normal}ms ${C.easeOut}`
+  }, P = {
+    flex: 1,
+    height: e === "horizontal" ? o.lineWidth : t[6],
+    width: e === "horizontal" ? void 0 : o.lineWidth,
+    backgroundColor: r === "completed" ? "var(--brycks-success-default)" : "var(--brycks-border-muted)",
+    marginLeft: e === "horizontal" ? t[2] : (o.indicator - o.lineWidth) / 2,
+    marginRight: e === "horizontal" ? t[2] : void 0,
+    marginTop: e === "vertical" ? t[1] : void 0,
+    marginBottom: e === "vertical" ? t[1] : void 0,
+    transition: `background-color ${z.normal}ms ${C.easeOut}`
+  }, H = {
+    display: "flex",
+    flexDirection: "column",
+    gap: t[0.5],
+    textAlign: e === "horizontal" ? "center" : "left",
+    minWidth: e === "horizontal" ? 80 : void 0,
+    paddingLeft: e === "vertical" ? t[3] : void 0,
+    flex: e === "vertical" ? 1 : void 0
+  }, M = {
+    fontSize: o.fontSize,
+    fontWeight: r === "current" ? 600 : 500,
+    color: c ? "var(--brycks-foreground-disabled)" : l ? "var(--brycks-error-default)" : r === "upcoming" ? "var(--brycks-foreground-muted)" : "var(--brycks-foreground-default)",
+    transition: `color ${z.fast}ms ${C.easeOut}`
+  }, T = {
+    fontSize: o.labelSize,
+    color: "var(--brycks-foreground-muted)",
+    lineHeight: 1.4
+  };
+  return /* @__PURE__ */ x(
+    "div",
+    {
+      ref: v,
+      role: "listitem",
+      "aria-current": r === "current" ? "step" : void 0,
+      className: I(
+        "brycks-step",
+        `brycks-step--${r}`,
+        l && "brycks-step--error",
+        c && "brycks-step--disabled",
+        g
+      ),
+      style: A,
+      onClick: N,
+      ...y,
+      children: [
+        /* @__PURE__ */ x("div", { style: O, children: [
+          /* @__PURE__ */ i("div", { style: B, children: n || (r === "completed" ? /* @__PURE__ */ i(J, {}) : /* @__PURE__ */ i("span", { children: p + 1 })) }),
+          !S && /* @__PURE__ */ i("div", { style: P, "aria-hidden": "true" })
+        ] }),
+        /* @__PURE__ */ x("div", { style: H, children: [
+          /* @__PURE__ */ i("div", { style: M, children: h }),
+          a && /* @__PURE__ */ i("div", { style: T, children: a })
+        ] })
+      ]
+    }
+  );
+});
+Q.displayName = "Step";
+export {
+  Q as Step,
+  K as Stepper
+};
+//# sourceMappingURL=Stepper.js.map

package/dist/components/navigation/Stepper/Stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.js","sources":["../../../../src/components/navigation/Stepper/Stepper.tsx"],"sourcesContent":["/**\n * Stepper Component\n *\n * A step indicator for multi-step processes like wizards and forms.\n * Shows progress and allows navigation between steps.\n *\n * @module components/navigation/Stepper\n */\n\nimport {\n  forwardRef,\n  createContext,\n  useContext,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n} from 'react'\nimport { cx } from '../../../utils/styles'\nimport { spacing, fontSizes, durations, easings } from '../../../design-system'\n\nexport type StepperSize = 'sm' | 'md' | 'lg'\nexport type StepperOrientation = 'horizontal' | 'vertical'\nexport type StepStatus = 'completed' | 'current' | 'upcoming'\n\ninterface StepperContextValue {\n  size: StepperSize\n  orientation: StepperOrientation\n  currentStep: number\n  totalSteps: number\n  onStepClick?: (step: number) => void\n  clickable: boolean\n}\n\nconst StepperContext = createContext<StepperContextValue | null>(null)\n\nfunction useStepperContext() {\n  const context = useContext(StepperContext)\n  if (!context) {\n    throw new Error('Step components must be used within a Stepper')\n  }\n  return context\n}\n\nexport interface StepperProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Current active step (0-indexed) */\n  currentStep: number\n  /** Callback when step is clicked */\n  onStepChange?: (step: number) => void\n  /** Stepper size */\n  size?: StepperSize\n  /** Stepper orientation */\n  orientation?: StepperOrientation\n  /** Whether steps are clickable */\n  clickable?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<StepperSize, { indicator: number; fontSize: number; labelSize: number; gap: number; lineWidth: number }> = {\n  sm: { indicator: spacing[6], fontSize: fontSizes.sm, labelSize: fontSizes.xs, gap: spacing[2], lineWidth: 2 },\n  md: { indicator: spacing[8], fontSize: fontSizes.base, labelSize: fontSizes.sm, gap: spacing[3], lineWidth: 2 },\n  lg: { indicator: spacing[10], fontSize: fontSizes.md, labelSize: fontSizes.base, gap: spacing[4], lineWidth: 3 },\n}\n\nfunction CheckIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n      <path\n        d=\"M3.5 8l3 3 6-6\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport const Stepper = forwardRef<HTMLDivElement, StepperProps>(function Stepper(\n  {\n    currentStep,\n    onStepChange,\n    size = 'md',\n    orientation = 'horizontal',\n    clickable = false,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const config = sizeConfig[size]\n  const childCount = Array.isArray(children) ? children.length : 1\n\n  const containerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n    gap: orientation === 'horizontal' ? 0 : config.gap,\n    alignItems: orientation === 'horizontal' ? 'flex-start' : 'stretch',\n    ...style,\n  }\n\n  return (\n    <StepperContext.Provider\n      value={{\n        size,\n        orientation,\n        currentStep,\n        totalSteps: childCount,\n        onStepClick: onStepChange,\n        clickable,\n      }}\n    >\n      <div\n        ref={ref}\n        role=\"navigation\"\n        aria-label=\"Progress\"\n        className={cx(\n          'brycks-stepper',\n          `brycks-stepper--${size}`,\n          `brycks-stepper--${orientation}`,\n          className\n        )}\n        style={containerStyle}\n        data-testid={testId}\n        {...props}\n      >\n        {children}\n      </div>\n    </StepperContext.Provider>\n  )\n})\n\nStepper.displayName = 'Stepper'\n\n// Step Component\nexport interface StepProps extends HTMLAttributes<HTMLDivElement> {\n  /** Step index (auto-set by parent, or can be overridden) */\n  index?: number\n  /** Step title */\n  title: string\n  /** Step description */\n  description?: string\n  /** Custom icon (replaces number/check) */\n  icon?: ReactNode\n  /** Whether the step is disabled */\n  disabled?: boolean\n  /** Whether this step has an error */\n  hasError?: boolean\n  /** Custom class name */\n  className?: string\n}\n\nexport const Step = forwardRef<HTMLDivElement, StepProps>(function Step(\n  {\n    index: propIndex,\n    title,\n    description,\n    icon,\n    disabled = false,\n    hasError = false,\n    className,\n    style,\n    ...props\n  },\n  ref\n) {\n  const { size, orientation, currentStep, totalSteps, onStepClick, clickable } = useStepperContext()\n  const config = sizeConfig[size]\n\n  // Try to infer index from props or use 0\n  const index = propIndex ?? 0\n  const isLast = index === totalSteps - 1\n\n  const status: StepStatus =\n    index < currentStep ? 'completed' : index === currentStep ? 'current' : 'upcoming'\n\n  const isClickable = clickable && !disabled && status !== 'current'\n\n  const handleClick = () => {\n    if (isClickable && onStepClick) {\n      onStepClick(index)\n    }\n  }\n\n  const stepStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: orientation === 'horizontal' ? 'column' : 'row',\n    alignItems: orientation === 'horizontal' ? 'center' : 'flex-start',\n    gap: config.gap,\n    flex: orientation === 'horizontal' && !isLast ? 1 : undefined,\n    cursor: isClickable ? 'pointer' : 'default',\n    opacity: disabled ? 0.5 : 1,\n    ...style,\n  }\n\n  const indicatorWrapperStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n    gap: 0,\n    flex: orientation === 'horizontal' && !isLast ? 1 : undefined,\n  }\n\n  const getIndicatorColor = (): string => {\n    if (hasError) return 'var(--brycks-error-default)'\n    if (status === 'completed') return 'var(--brycks-success-default)'\n    if (status === 'current') return 'var(--brycks-primary-default)'\n    return 'var(--brycks-border-default)'\n  }\n\n  const indicatorStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: config.indicator,\n    height: config.indicator,\n    borderRadius: '50%',\n    backgroundColor:\n      status === 'upcoming' ? 'var(--brycks-background-default)' : getIndicatorColor(),\n    border:\n      status === 'upcoming'\n        ? `${config.lineWidth}px solid ${hasError ? 'var(--brycks-error-default)' : 'var(--brycks-border-default)'}`\n        : 'none',\n    color:\n      status === 'upcoming'\n        ? hasError\n          ? 'var(--brycks-error-default)'\n          : 'var(--brycks-foreground-muted)'\n        : 'white',\n    fontSize: config.labelSize,\n    fontWeight: 600,\n    flexShrink: 0,\n    transition: `all ${durations.normal}ms ${easings.easeOut}`,\n  }\n\n  const lineStyle: CSSProperties = {\n    flex: 1,\n    height: orientation === 'horizontal' ? config.lineWidth : spacing[6],\n    width: orientation === 'horizontal' ? undefined : config.lineWidth,\n    backgroundColor:\n      status === 'completed' ? 'var(--brycks-success-default)' : 'var(--brycks-border-muted)',\n    marginLeft: orientation === 'horizontal' ? spacing[2] : (config.indicator - config.lineWidth) / 2,\n    marginRight: orientation === 'horizontal' ? spacing[2] : undefined,\n    marginTop: orientation === 'vertical' ? spacing[1] : undefined,\n    marginBottom: orientation === 'vertical' ? spacing[1] : undefined,\n    transition: `background-color ${durations.normal}ms ${easings.easeOut}`,\n  }\n\n  const contentStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: spacing[0.5],\n    textAlign: orientation === 'horizontal' ? 'center' : 'left',\n    minWidth: orientation === 'horizontal' ? 80 : undefined,\n    paddingLeft: orientation === 'vertical' ? spacing[3] : undefined,\n    flex: orientation === 'vertical' ? 1 : undefined,\n  }\n\n  const titleStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    fontWeight: status === 'current' ? 600 : 500,\n    color:\n      disabled\n        ? 'var(--brycks-foreground-disabled)'\n        : hasError\n        ? 'var(--brycks-error-default)'\n        : status === 'upcoming'\n        ? 'var(--brycks-foreground-muted)'\n        : 'var(--brycks-foreground-default)',\n    transition: `color ${durations.fast}ms ${easings.easeOut}`,\n  }\n\n  const descriptionStyle: CSSProperties = {\n    fontSize: config.labelSize,\n    color: 'var(--brycks-foreground-muted)',\n    lineHeight: 1.4,\n  }\n\n  return (\n    <div\n      ref={ref}\n      role=\"listitem\"\n      aria-current={status === 'current' ? 'step' : undefined}\n      className={cx(\n        'brycks-step',\n        `brycks-step--${status}`,\n        hasError && 'brycks-step--error',\n        disabled && 'brycks-step--disabled',\n        className\n      )}\n      style={stepStyle}\n      onClick={handleClick}\n      {...props}\n    >\n      <div style={indicatorWrapperStyle}>\n        <div style={indicatorStyle}>\n          {icon ? (\n            icon\n          ) : status === 'completed' ? (\n            <CheckIcon />\n          ) : (\n            <span>{index + 1}</span>\n          )}\n        </div>\n        {!isLast && <div style={lineStyle} aria-hidden=\"true\" />}\n      </div>\n      <div style={contentStyle}>\n        <div style={titleStyle}>{title}</div>\n        {description && <div style={descriptionStyle}>{description}</div>}\n      </div>\n    </div>\n  )\n})\n\nStep.displayName = 'Step'\n"],"names":["StepperContext","createContext","useStepperContext","context","useContext","sizeConfig","spacing","fontSizes","CheckIcon","jsx","Stepper","forwardRef","currentStep","onStepChange","size","orientation","clickable","className","style","children","testId","props","ref","config","childCount","containerStyle","cx","Step","propIndex","title","description","icon","disabled","hasError","totalSteps","onStepClick","index","isLast","status","isClickable","handleClick","stepStyle","indicatorWrapperStyle","getIndicatorColor","indicatorStyle","durations","easings","lineStyle","contentStyle","titleStyle","descriptionStyle","jsxs"],"mappings":";;;;;;AAiCA,MAAMA,IAAiBC,EAA0C,IAAI;AAErE,SAASC,IAAoB;AAC3B,QAAMC,IAAUC,EAAWJ,CAAc;AACzC,MAAI,CAACG;AACH,UAAM,IAAI,MAAM,+CAA+C;AAEjE,SAAOA;AACT;AAmBA,MAAME,IAA8H;AAAA,EAClI,IAAI,EAAE,WAAWC,EAAQ,CAAC,GAAG,UAAUC,EAAU,IAAI,WAAWA,EAAU,IAAI,KAAKD,EAAQ,CAAC,GAAG,WAAW,EAAA;AAAA,EAC1G,IAAI,EAAE,WAAWA,EAAQ,CAAC,GAAG,UAAUC,EAAU,MAAM,WAAWA,EAAU,IAAI,KAAKD,EAAQ,CAAC,GAAG,WAAW,EAAA;AAAA,EAC5G,IAAI,EAAE,WAAWA,EAAQ,EAAE,GAAG,UAAUC,EAAU,IAAI,WAAWA,EAAU,MAAM,KAAKD,EAAQ,CAAC,GAAG,WAAW,EAAA;AAC/G;AAEA,SAASE,IAAY;AACnB,SACE,gBAAAC,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,eAAY,QACtE,UAAA,gBAAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,GAAE;AAAA,MACF,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,IAAA;AAAA,EAAA,GAEnB;AAEJ;AAEO,MAAMC,IAAUC,EAAyC,SAC9D;AAAA,EACE,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,aAAAC,IAAc;AAAA,EACd,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAASlB,EAAWS,CAAI,GACxBU,IAAa,MAAM,QAAQL,CAAQ,IAAIA,EAAS,SAAS,GAEzDM,IAAgC;AAAA,IACpC,SAAS;AAAA,IACT,eAAeV,MAAgB,eAAe,QAAQ;AAAA,IACtD,KAAKA,MAAgB,eAAe,IAAIQ,EAAO;AAAA,IAC/C,YAAYR,MAAgB,eAAe,eAAe;AAAA,IAC1D,GAAGG;AAAA,EAAA;AAGL,SACE,gBAAAT;AAAA,IAACT,EAAe;AAAA,IAAf;AAAA,MACC,OAAO;AAAA,QACL,MAAAc;AAAA,QACA,aAAAC;AAAA,QACA,aAAAH;AAAA,QACA,YAAYY;AAAA,QACZ,aAAaX;AAAA,QACb,WAAAG;AAAA,MAAA;AAAA,MAGF,UAAA,gBAAAP;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAAa;AAAA,UACA,MAAK;AAAA,UACL,cAAW;AAAA,UACX,WAAWI;AAAA,YACT;AAAA,YACA,mBAAmBZ,CAAI;AAAA,YACvB,mBAAmBC,CAAW;AAAA,YAC9BE;AAAA,UAAA;AAAA,UAEF,OAAOQ;AAAA,UACP,eAAaL;AAAA,UACZ,GAAGC;AAAA,UAEH,UAAAF;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,CAAC;AAEDT,EAAQ,cAAc;AAoBf,MAAMiB,IAAOhB,EAAsC,SACxD;AAAA,EACE,OAAOiB;AAAA,EACP,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,WAAAhB;AAAA,EACA,OAAAC;AAAA,EACA,GAAGG;AACL,GACAC,GACA;AACA,QAAM,EAAE,MAAAR,GAAM,aAAAC,GAAa,aAAAH,GAAa,YAAAsB,GAAY,aAAAC,GAAa,WAAAnB,EAAA,IAAcd,EAAA,GACzEqB,IAASlB,EAAWS,CAAI,GAGxBsB,IAAQR,KAAa,GACrBS,IAASD,MAAUF,IAAa,GAEhCI,IACJF,IAAQxB,IAAc,cAAcwB,MAAUxB,IAAc,YAAY,YAEpE2B,IAAcvB,KAAa,CAACgB,KAAYM,MAAW,WAEnDE,IAAc,MAAM;AACxB,IAAID,KAAeJ,KACjBA,EAAYC,CAAK;AAAA,EAErB,GAEMK,IAA2B;AAAA,IAC/B,SAAS;AAAA,IACT,eAAe1B,MAAgB,eAAe,WAAW;AAAA,IACzD,YAAYA,MAAgB,eAAe,WAAW;AAAA,IACtD,KAAKQ,EAAO;AAAA,IACZ,MAAMR,MAAgB,gBAAgB,CAACsB,IAAS,IAAI;AAAA,IACpD,QAAQE,IAAc,YAAY;AAAA,IAClC,SAASP,IAAW,MAAM;AAAA,IAC1B,GAAGd;AAAA,EAAA,GAGCwB,IAAuC;AAAA,IAC3C,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,eAAe3B,MAAgB,eAAe,QAAQ;AAAA,IACtD,KAAK;AAAA,IACL,MAAMA,MAAgB,gBAAgB,CAACsB,IAAS,IAAI;AAAA,EAAA,GAGhDM,IAAoB,MACpBV,IAAiB,gCACjBK,MAAW,cAAoB,kCAC/BA,MAAW,YAAkB,kCAC1B,gCAGHM,IAAgC;AAAA,IACpC,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,OAAOrB,EAAO;AAAA,IACd,QAAQA,EAAO;AAAA,IACf,cAAc;AAAA,IACd,iBACEe,MAAW,aAAa,qCAAqCK,EAAA;AAAA,IAC/D,QACEL,MAAW,aACP,GAAGf,EAAO,SAAS,YAAYU,IAAW,gCAAgC,8BAA8B,KACxG;AAAA,IACN,OACEK,MAAW,aACPL,IACE,gCACA,mCACF;AAAA,IACN,UAAUV,EAAO;AAAA,IACjB,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY,OAAOsB,EAAU,MAAM,MAAMC,EAAQ,OAAO;AAAA,EAAA,GAGpDC,IAA2B;AAAA,IAC/B,MAAM;AAAA,IACN,QAAQhC,MAAgB,eAAeQ,EAAO,YAAYjB,EAAQ,CAAC;AAAA,IACnE,OAAOS,MAAgB,eAAe,SAAYQ,EAAO;AAAA,IACzD,iBACEe,MAAW,cAAc,kCAAkC;AAAA,IAC7D,YAAYvB,MAAgB,eAAeT,EAAQ,CAAC,KAAKiB,EAAO,YAAYA,EAAO,aAAa;AAAA,IAChG,aAAaR,MAAgB,eAAeT,EAAQ,CAAC,IAAI;AAAA,IACzD,WAAWS,MAAgB,aAAaT,EAAQ,CAAC,IAAI;AAAA,IACrD,cAAcS,MAAgB,aAAaT,EAAQ,CAAC,IAAI;AAAA,IACxD,YAAY,oBAAoBuC,EAAU,MAAM,MAAMC,EAAQ,OAAO;AAAA,EAAA,GAGjEE,IAA8B;AAAA,IAClC,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK1C,EAAQ,GAAG;AAAA,IAChB,WAAWS,MAAgB,eAAe,WAAW;AAAA,IACrD,UAAUA,MAAgB,eAAe,KAAK;AAAA,IAC9C,aAAaA,MAAgB,aAAaT,EAAQ,CAAC,IAAI;AAAA,IACvD,MAAMS,MAAgB,aAAa,IAAI;AAAA,EAAA,GAGnCkC,IAA4B;AAAA,IAChC,UAAU1B,EAAO;AAAA,IACjB,YAAYe,MAAW,YAAY,MAAM;AAAA,IACzC,OACEN,IACI,sCACAC,IACA,gCACAK,MAAW,aACX,mCACA;AAAA,IACN,YAAY,SAASO,EAAU,IAAI,MAAMC,EAAQ,OAAO;AAAA,EAAA,GAGpDI,IAAkC;AAAA,IACtC,UAAU3B,EAAO;AAAA,IACjB,OAAO;AAAA,IACP,YAAY;AAAA,EAAA;AAGd,SACE,gBAAA4B;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAA7B;AAAA,MACA,MAAK;AAAA,MACL,gBAAcgB,MAAW,YAAY,SAAS;AAAA,MAC9C,WAAWZ;AAAA,QACT;AAAA,QACA,gBAAgBY,CAAM;AAAA,QACtBL,KAAY;AAAA,QACZD,KAAY;AAAA,QACZf;AAAA,MAAA;AAAA,MAEF,OAAOwB;AAAA,MACP,SAASD;AAAA,MACR,GAAGnB;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAA8B,EAAC,OAAA,EAAI,OAAOT,GACV,UAAA;AAAA,UAAA,gBAAAjC,EAAC,OAAA,EAAI,OAAOmC,GACT,UAAAb,MAEGO,MAAW,cACb,gBAAA7B,EAACD,GAAA,CAAA,CAAU,IAEX,gBAAAC,EAAC,QAAA,EAAM,UAAA2B,IAAQ,GAAE,IAErB;AAAA,UACC,CAACC,KAAU,gBAAA5B,EAAC,SAAI,OAAOsC,GAAW,eAAY,OAAA,CAAO;AAAA,QAAA,GACxD;AAAA,QACA,gBAAAI,EAAC,OAAA,EAAI,OAAOH,GACV,UAAA;AAAA,UAAA,gBAAAvC,EAAC,OAAA,EAAI,OAAOwC,GAAa,UAAApB,GAAM;AAAA,UAC9BC,KAAe,gBAAArB,EAAC,OAAA,EAAI,OAAOyC,GAAmB,UAAApB,EAAA,CAAY;AAAA,QAAA,EAAA,CAC7D;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AAEDH,EAAK,cAAc;"}

package/dist/components/navigation.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./navigation/Tabs/Tabs.cjs"),r=require("./navigation/Accordion/Accordion.cjs"),o=require("./navigation/Dropdown/Dropdown.cjs"),n=require("./navigation/Menu/Menu.cjs"),c=require("./navigation/Pagination/Pagination.cjs"),i=require("./navigation/Breadcrumb/Breadcrumb.cjs");exports.Tab=e.Tab;exports.TabList=e.TabList;exports.TabPanel=e.TabPanel;exports.TabPanels=e.TabPanels;exports.Tabs=e.Tabs;exports.Accordion=r.Accordion;exports.AccordionContent=r.AccordionContent;exports.AccordionItem=r.AccordionItem;exports.AccordionTrigger=r.AccordionTrigger;exports.Dropdown=o.Dropdown;exports.DropdownDivider=o.DropdownDivider;exports.DropdownItem=o.DropdownItem;exports.DropdownLabel=o.DropdownLabel;exports.Menu=n.Menu;exports.MenuDivider=n.MenuDivider;exports.MenuGroup=n.MenuGroup;exports.MenuItem=n.MenuItem;exports.Pagination=c.Pagination;exports.Breadcrumb=i.Breadcrumb;exports.BreadcrumbItem=i.BreadcrumbItem;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./navigation/Tabs/Tabs.cjs"),n=require("./navigation/Accordion/Accordion.cjs"),r=require("./navigation/Dropdown/Dropdown.cjs"),o=require("./navigation/Menu/Menu.cjs"),c=require("./navigation/Pagination/Pagination.cjs"),t=require("./navigation/Breadcrumb/Breadcrumb.cjs"),i=require("./navigation/Stepper/Stepper.cjs"),u=require("./navigation/ContextMenu/ContextMenu.cjs");exports.Tab=e.Tab;exports.TabList=e.TabList;exports.TabPanel=e.TabPanel;exports.TabPanels=e.TabPanels;exports.Tabs=e.Tabs;exports.Accordion=n.Accordion;exports.AccordionContent=n.AccordionContent;exports.AccordionItem=n.AccordionItem;exports.AccordionTrigger=n.AccordionTrigger;exports.Dropdown=r.Dropdown;exports.DropdownDivider=r.DropdownDivider;exports.DropdownItem=r.DropdownItem;exports.DropdownLabel=r.DropdownLabel;exports.Menu=o.Menu;exports.MenuDivider=o.MenuDivider;exports.MenuGroup=o.MenuGroup;exports.MenuItem=o.MenuItem;exports.Pagination=c.Pagination;exports.Breadcrumb=t.Breadcrumb;exports.BreadcrumbItem=t.BreadcrumbItem;exports.Step=i.Step;exports.Stepper=i.Stepper;exports.ContextMenu=u.ContextMenu;exports.useContextMenu=u.useContextMenu;
 //# sourceMappingURL=navigation.cjs.map

package/dist/components/navigation.js

@@ -1,29 +1,35 @@
-import { Tab as e, TabList as n, TabPanel as t, TabPanels as a, Tabs as d } from "./navigation/Tabs/Tabs.js";
-import { Accordion as m, AccordionContent as p, AccordionItem as c, AccordionTrigger as b } from "./navigation/Accordion/Accordion.js";
-import { Dropdown as f, DropdownDivider as x, DropdownItem as D, DropdownLabel as T } from "./navigation/Dropdown/Dropdown.js";
-import { Menu as A, MenuDivider as I, MenuGroup as M, MenuItem as g } from "./navigation/Menu/Menu.js";
-import { Pagination as s } from "./navigation/Pagination/Pagination.js";
-import { Breadcrumb as v, BreadcrumbItem as B } from "./navigation/Breadcrumb/Breadcrumb.js";
+import { Tab as e, TabList as n, TabPanel as t, TabPanels as p, Tabs as m } from "./navigation/Tabs/Tabs.js";
+import { Accordion as d, AccordionContent as i, AccordionItem as c, AccordionTrigger as u } from "./navigation/Accordion/Accordion.js";
+import { Dropdown as b, DropdownDivider as f, DropdownItem as D, DropdownLabel as M } from "./navigation/Dropdown/Dropdown.js";
+import { Menu as s, MenuDivider as w, MenuGroup as A, MenuItem as I } from "./navigation/Menu/Menu.js";
+import { Pagination as l } from "./navigation/Pagination/Pagination.js";
+import { Breadcrumb as P, BreadcrumbItem as v } from "./navigation/Breadcrumb/Breadcrumb.js";
+import { Step as L, Stepper as S } from "./navigation/Stepper/Stepper.js";
+import { ContextMenu as h, useContextMenu as j } from "./navigation/ContextMenu/ContextMenu.js";
 export {
-  m as Accordion,
-  p as AccordionContent,
+  d as Accordion,
+  i as AccordionContent,
   c as AccordionItem,
-  b as AccordionTrigger,
-  v as Breadcrumb,
-  B as BreadcrumbItem,
-  f as Dropdown,
-  x as DropdownDivider,
+  u as AccordionTrigger,
+  P as Breadcrumb,
+  v as BreadcrumbItem,
+  h as ContextMenu,
+  b as Dropdown,
+  f as DropdownDivider,
   D as DropdownItem,
-  T as DropdownLabel,
-  A as Menu,
-  I as MenuDivider,
-  M as MenuGroup,
-  g as MenuItem,
-  s as Pagination,
+  M as DropdownLabel,
+  s as Menu,
+  w as MenuDivider,
+  A as MenuGroup,
+  I as MenuItem,
+  l as Pagination,
+  L as Step,
+  S as Stepper,
   e as Tab,
   n as TabList,
   t as TabPanel,
-  a as TabPanels,
-  d as Tabs
+  p as TabPanels,
+  m as Tabs,
+  j as useContextMenu
 };
 //# sourceMappingURL=navigation.js.map

package/dist/components/navigation.js.map

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

package/dist/components/utility/Badge/Badge.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),y=require("react"),g=require("../../../utils/styles.cjs"),f={sm:{fontSize:10,padding:"2px 6px",height:18},md:{fontSize:11,padding:"3px 8px",height:22},lg:{fontSize:12,padding:"4px 10px",height:26}},v={neutral:{solid:{backgroundColor:"var(--brycks-foreground-default)",color:"var(--brycks-background-app)"},subtle:{backgroundColor:"var(--brycks-background-muted)",color:"var(--brycks-foreground-default)"},outline:{backgroundColor:"transparent",color:"var(--brycks-foreground-default)",borderColor:"var(--brycks-border-default)"}},primary:{solid:{backgroundColor:"var(--brycks-primary-default)",color:"var(--brycks-primary-foreground)"},subtle:{backgroundColor:"var(--brycks-primary-muted)",color:"var(--brycks-primary-hover)"},outline:{backgroundColor:"transparent",color:"var(--brycks-primary-default)",borderColor:"var(--brycks-primary-default)"}},accent:{solid:{backgroundColor:"var(--brycks-accent-default)",color:"var(--brycks-accent-foreground)"},subtle:{backgroundColor:"var(--brycks-accent-muted)",color:"var(--brycks-accent-hover)"},outline:{backgroundColor:"transparent",color:"var(--brycks-accent-default)",borderColor:"var(--brycks-accent-default)"}},success:{solid:{backgroundColor:"var(--brycks-success-default)",color:"var(--brycks-success-foreground)"},subtle:{backgroundColor:"var(--brycks-success-muted)",color:"var(--brycks-success-on-muted)"},outline:{backgroundColor:"transparent",color:"var(--brycks-success-default)",borderColor:"var(--brycks-success-default)"}},warning:{solid:{backgroundColor:"var(--brycks-warning-default)",color:"var(--brycks-warning-foreground)"},subtle:{backgroundColor:"var(--brycks-warning-muted)",color:"var(--brycks-warning-on-muted)"},outline:{backgroundColor:"transparent",color:"var(--brycks-warning-default)",borderColor:"var(--brycks-warning-default)"}},error:{solid:{backgroundColor:"var(--brycks-error-default)",color:"var(--brycks-error-foreground)"},subtle:{backgroundColor:"var(--brycks-error-muted)",color:"var(--brycks-error-on-muted)"},outline:{backgroundColor:"transparent",color:"var(--brycks-error-default)",borderColor:"var(--brycks-error-default)"}},info:{solid:{backgroundColor:"var(--brycks-info-default)",color:"var(--brycks-info-foreground)"},subtle:{backgroundColor:"var(--brycks-info-muted)",color:"var(--brycks-info-on-muted)"},outline:{backgroundColor:"transparent",color:"var(--brycks-info-default)",borderColor:"var(--brycks-info-default)"}}},e=y.forwardRef(function({variant:r="subtle",intent:o="neutral",size:a="md",className:c,style:s,testId:n,children:l,...t},d){const u=f[a],b=v[o][r],k={display:"inline-flex",alignItems:"center",justifyContent:"center",fontWeight:500,fontFamily:"var(--brycks-font-sans)",lineHeight:1,borderRadius:"var(--brycks-radius-full)",whiteSpace:"nowrap",border:r==="outline"?"1px solid":"none",...u,...b,...s};return i.jsx("span",{ref:d,className:g.cx("brycks-badge",`brycks-badge--${r}`,`brycks-badge--${o}`,`brycks-badge--${a}`,c),style:k,"data-testid":n,...t,children:l})});e.displayName="Badge";exports.Badge=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),p=require("react"),v=require("../../../utils/styles.cjs"),r=require("../../../design-system/tokens/spacing.cjs"),a=require("../../../design-system/primitives/sizing.cjs"),e=require("../../../design-system/tokens/typography.cjs"),m={sm:{fontSize:e.fontSizes.xs-1,padding:`${r.spacing[.5]}px ${a.componentPaddingY.sm}px`,height:r.spacing[4]+r.spacing[.5]},md:{fontSize:e.fontSizes.xs,padding:`${r.spacing[.5]+1}px ${a.componentPaddingX.xs}px`,height:r.spacing[5]+r.spacing[.5]},lg:{fontSize:e.fontSizes.sm,padding:`${r.spacing[1]}px ${a.componentPaddingY.lg}px`,height:r.spacing[6]+r.spacing[.5]}},C={neutral:{solid:{backgroundColor:"var(--brycks-foreground-default)",color:"var(--brycks-background-app)"},subtle:{backgroundColor:"var(--brycks-background-muted)",color:"var(--brycks-foreground-default)"},outline:{backgroundColor:"transparent",color:"var(--brycks-foreground-default)",borderColor:"var(--brycks-border-default)"}},primary:{solid:{backgroundColor:"var(--brycks-primary-default)",color:"var(--brycks-primary-foreground)"},subtle:{backgroundColor:"var(--brycks-primary-muted)",color:"var(--brycks-primary-hover)"},outline:{backgroundColor:"transparent",color:"var(--brycks-primary-default)",borderColor:"var(--brycks-primary-default)"}},accent:{solid:{backgroundColor:"var(--brycks-accent-default)",color:"var(--brycks-accent-foreground)"},subtle:{backgroundColor:"var(--brycks-accent-muted)",color:"var(--brycks-accent-hover)"},outline:{backgroundColor:"transparent",color:"var(--brycks-accent-default)",borderColor:"var(--brycks-accent-default)"}},success:{solid:{backgroundColor:"var(--brycks-success-default)",color:"var(--brycks-success-foreground)"},subtle:{backgroundColor:"var(--brycks-success-muted)",color:"var(--brycks-success-on-muted)"},outline:{backgroundColor:"transparent",color:"var(--brycks-success-default)",borderColor:"var(--brycks-success-default)"}},warning:{solid:{backgroundColor:"var(--brycks-warning-default)",color:"var(--brycks-warning-foreground)"},subtle:{backgroundColor:"var(--brycks-warning-muted)",color:"var(--brycks-warning-on-muted)"},outline:{backgroundColor:"transparent",color:"var(--brycks-warning-default)",borderColor:"var(--brycks-warning-default)"}},error:{solid:{backgroundColor:"var(--brycks-error-default)",color:"var(--brycks-error-foreground)"},subtle:{backgroundColor:"var(--brycks-error-muted)",color:"var(--brycks-error-on-muted)"},outline:{backgroundColor:"transparent",color:"var(--brycks-error-default)",borderColor:"var(--brycks-error-default)"}},info:{solid:{backgroundColor:"var(--brycks-info-default)",color:"var(--brycks-info-foreground)"},subtle:{backgroundColor:"var(--brycks-info-muted)",color:"var(--brycks-info-on-muted)"},outline:{backgroundColor:"transparent",color:"var(--brycks-info-default)",borderColor:"var(--brycks-info-default)"}}},s=p.forwardRef(function({variant:o="subtle",intent:c="neutral",size:n="md",className:t,style:l,testId:d,children:u,...b},i){const g=m[n],k=C[c][o],y={display:"inline-flex",alignItems:"center",justifyContent:"center",fontWeight:500,fontFamily:"var(--brycks-font-sans)",lineHeight:1,borderRadius:"var(--brycks-radius-full)",whiteSpace:"nowrap",border:o==="outline"?"1px solid":"none",...g,...k,...l};return f.jsx("span",{ref:i,className:v.cx("brycks-badge",`brycks-badge--${o}`,`brycks-badge--${c}`,`brycks-badge--${n}`,t),style:y,"data-testid":d,...b,children:u})});s.displayName="Badge";exports.Badge=s;
 //# sourceMappingURL=Badge.cjs.map

package/dist/components/utility/Badge/Badge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.cjs","sources":["../../../../src/components/utility/Badge/Badge.tsx"],"sourcesContent":["/**\r\n * Badge Component\r\n *\r\n * Small label for status, counts, or categorization.\r\n * Clean, minimal design with subtle color coding.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type HTMLAttributes,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type BadgeVariant = 'solid' | 'subtle' | 'outline'\r\nexport type BadgeIntent = 'neutral' | 'primary' | 'accent' | 'success' | 'warning' | 'error' | 'info'\r\nexport type BadgeSize = 'sm' | 'md' | 'lg'\r\n\r\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\r\n  /** Visual variant */\r\n  variant?: BadgeVariant\r\n  /** Color intent */\r\n  intent?: BadgeIntent\r\n  /** Size */\r\n  size?: BadgeSize\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n  /** Badge content */\r\n  children?: ReactNode\r\n}\r\n\r\nconst sizeStyles: Record<BadgeSize, CSSProperties> = {\r\n  sm: { fontSize: 10, padding: '2px 6px', height: 18 },\r\n  md: { fontSize: 11, padding: '3px 8px', height: 22 },\r\n  lg: { fontSize: 12, padding: '4px 10px', height: 26 },\r\n}\r\n\r\nconst intentColors: Record<BadgeIntent, Record<BadgeVariant, CSSProperties>> = {\r\n  neutral: {\r\n    solid: { backgroundColor: 'var(--brycks-foreground-default)', color: 'var(--brycks-background-app)' },\r\n    subtle: { backgroundColor: 'var(--brycks-background-muted)', color: 'var(--brycks-foreground-default)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-foreground-default)', borderColor: 'var(--brycks-border-default)' },\r\n  },\r\n  primary: {\r\n    solid: { backgroundColor: 'var(--brycks-primary-default)', color: 'var(--brycks-primary-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-primary-muted)', color: 'var(--brycks-primary-hover)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-primary-default)', borderColor: 'var(--brycks-primary-default)' },\r\n  },\r\n  accent: {\r\n    solid: { backgroundColor: 'var(--brycks-accent-default)', color: 'var(--brycks-accent-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-accent-muted)', color: 'var(--brycks-accent-hover)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-accent-default)', borderColor: 'var(--brycks-accent-default)' },\r\n  },\r\n  success: {\r\n    solid: { backgroundColor: 'var(--brycks-success-default)', color: 'var(--brycks-success-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-success-muted)', color: 'var(--brycks-success-on-muted)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-success-default)', borderColor: 'var(--brycks-success-default)' },\r\n  },\r\n  warning: {\r\n    solid: { backgroundColor: 'var(--brycks-warning-default)', color: 'var(--brycks-warning-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-warning-muted)', color: 'var(--brycks-warning-on-muted)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-warning-default)', borderColor: 'var(--brycks-warning-default)' },\r\n  },\r\n  error: {\r\n    solid: { backgroundColor: 'var(--brycks-error-default)', color: 'var(--brycks-error-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-error-muted)', color: 'var(--brycks-error-on-muted)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-error-default)', borderColor: 'var(--brycks-error-default)' },\r\n  },\r\n  info: {\r\n    solid: { backgroundColor: 'var(--brycks-info-default)', color: 'var(--brycks-info-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-info-muted)', color: 'var(--brycks-info-on-muted)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-info-default)', borderColor: 'var(--brycks-info-default)' },\r\n  },\r\n}\r\n\r\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\r\n  {\r\n    variant = 'subtle',\r\n    intent = 'neutral',\r\n    size = 'md',\r\n    className,\r\n    style,\r\n    testId,\r\n    children,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const sizeValue = sizeStyles[size]\r\n  const colorValue = intentColors[intent][variant]\r\n\r\n  const badgeStyle: CSSProperties = {\r\n    display: 'inline-flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    fontWeight: 500,\r\n    fontFamily: 'var(--brycks-font-sans)',\r\n    lineHeight: 1,\r\n    borderRadius: 'var(--brycks-radius-full)',\r\n    whiteSpace: 'nowrap',\r\n    border: variant === 'outline' ? '1px solid' : 'none',\r\n    ...sizeValue,\r\n    ...colorValue,\r\n    ...style,\r\n  }\r\n\r\n  return (\r\n    <span\r\n      ref={ref}\r\n      className={cx(\r\n        'brycks-badge',\r\n        `brycks-badge--${variant}`,\r\n        `brycks-badge--${intent}`,\r\n        `brycks-badge--${size}`,\r\n        className\r\n      )}\r\n      style={badgeStyle}\r\n      data-testid={testId}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </span>\r\n  )\r\n})\r\n\r\nBadge.displayName = 'Badge'\r\n"],"names":["sizeStyles","intentColors","Badge","forwardRef","variant","intent","size","className","style","testId","children","props","ref","sizeValue","colorValue","badgeStyle","jsx","cx"],"mappings":"+KAkCMA,EAA+C,CACnD,GAAI,CAAE,SAAU,GAAI,QAAS,UAAW,OAAQ,EAAA,EAChD,GAAI,CAAE,SAAU,GAAI,QAAS,UAAW,OAAQ,EAAA,EAChD,GAAI,CAAE,SAAU,GAAI,QAAS,WAAY,OAAQ,EAAA,CACnD,EAEMC,EAAyE,CAC7E,QAAS,CACP,MAAO,CAAE,gBAAiB,mCAAoC,MAAO,8BAAA,EACrE,OAAQ,CAAE,gBAAiB,iCAAkC,MAAO,kCAAA,EACpE,QAAS,CAAE,gBAAiB,cAAe,MAAO,mCAAoC,YAAa,8BAAA,CAA+B,EAEpI,QAAS,CACP,MAAO,CAAE,gBAAiB,gCAAiC,MAAO,kCAAA,EAClE,OAAQ,CAAE,gBAAiB,8BAA+B,MAAO,6BAAA,EACjE,QAAS,CAAE,gBAAiB,cAAe,MAAO,gCAAiC,YAAa,+BAAA,CAAgC,EAElI,OAAQ,CACN,MAAO,CAAE,gBAAiB,+BAAgC,MAAO,iCAAA,EACjE,OAAQ,CAAE,gBAAiB,6BAA8B,MAAO,4BAAA,EAChE,QAAS,CAAE,gBAAiB,cAAe,MAAO,+BAAgC,YAAa,8BAAA,CAA+B,EAEhI,QAAS,CACP,MAAO,CAAE,gBAAiB,gCAAiC,MAAO,kCAAA,EAClE,OAAQ,CAAE,gBAAiB,8BAA+B,MAAO,gCAAA,EACjE,QAAS,CAAE,gBAAiB,cAAe,MAAO,gCAAiC,YAAa,+BAAA,CAAgC,EAElI,QAAS,CACP,MAAO,CAAE,gBAAiB,gCAAiC,MAAO,kCAAA,EAClE,OAAQ,CAAE,gBAAiB,8BAA+B,MAAO,gCAAA,EACjE,QAAS,CAAE,gBAAiB,cAAe,MAAO,gCAAiC,YAAa,+BAAA,CAAgC,EAElI,MAAO,CACL,MAAO,CAAE,gBAAiB,8BAA+B,MAAO,gCAAA,EAChE,OAAQ,CAAE,gBAAiB,4BAA6B,MAAO,8BAAA,EAC/D,QAAS,CAAE,gBAAiB,cAAe,MAAO,8BAA+B,YAAa,6BAAA,CAA8B,EAE9H,KAAM,CACJ,MAAO,CAAE,gBAAiB,6BAA8B,MAAO,+BAAA,EAC/D,OAAQ,CAAE,gBAAiB,2BAA4B,MAAO,6BAAA,EAC9D,QAAS,CAAE,gBAAiB,cAAe,MAAO,6BAA8B,YAAa,4BAAA,CAA6B,CAE9H,EAEaC,EAAQC,EAAAA,WAAwC,SAC3D,CACE,QAAAC,EAAU,SACV,OAAAC,EAAS,UACT,KAAAC,EAAO,KACP,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAYb,EAAWM,CAAI,EAC3BQ,EAAab,EAAaI,CAAM,EAAED,CAAO,EAEzCW,EAA4B,CAChC,QAAS,cACT,WAAY,SACZ,eAAgB,SAChB,WAAY,IACZ,WAAY,0BACZ,WAAY,EACZ,aAAc,4BACd,WAAY,SACZ,OAAQX,IAAY,UAAY,YAAc,OAC9C,GAAGS,EACH,GAAGC,EACH,GAAGN,CAAA,EAGL,OACEQ,EAAAA,IAAC,OAAA,CACC,IAAAJ,EACA,UAAWK,EAAAA,GACT,eACA,iBAAiBb,CAAO,GACxB,iBAAiBC,CAAM,GACvB,iBAAiBC,CAAI,GACrBC,CAAA,EAEF,MAAOQ,EACP,cAAaN,EACZ,GAAGE,EAEH,SAAAD,CAAA,CAAA,CAGP,CAAC,EAEDR,EAAM,YAAc"}
+{"version":3,"file":"Badge.cjs","sources":["../../../../src/components/utility/Badge/Badge.tsx"],"sourcesContent":["/**\r\n * Badge Component\r\n *\r\n * Small label for status, counts, or categorization.\r\n * Clean, minimal design with subtle color coding.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type HTMLAttributes,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\nimport { spacing, fontSizes } from '../../../design-system'\r\nimport { componentPaddingX, componentPaddingY } from '../../../design-system/primitives'\r\n\r\nexport type BadgeVariant = 'solid' | 'subtle' | 'outline'\r\nexport type BadgeIntent = 'neutral' | 'primary' | 'accent' | 'success' | 'warning' | 'error' | 'info'\r\nexport type BadgeSize = 'sm' | 'md' | 'lg'\r\n\r\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\r\n  /** Visual variant */\r\n  variant?: BadgeVariant\r\n  /** Color intent */\r\n  intent?: BadgeIntent\r\n  /** Size */\r\n  size?: BadgeSize\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n  /** Badge content */\r\n  children?: ReactNode\r\n}\r\n\r\nconst sizeStyles: Record<BadgeSize, CSSProperties> = {\r\n  sm: { fontSize: fontSizes.xs - 1, padding: `${spacing[0.5]}px ${componentPaddingY.sm}px`, height: spacing[4] + spacing[0.5] },\r\n  md: { fontSize: fontSizes.xs, padding: `${spacing[0.5] + 1}px ${componentPaddingX.xs}px`, height: spacing[5] + spacing[0.5] },\r\n  lg: { fontSize: fontSizes.sm, padding: `${spacing[1]}px ${componentPaddingY.lg}px`, height: spacing[6] + spacing[0.5] },\r\n}\r\n\r\nconst intentColors: Record<BadgeIntent, Record<BadgeVariant, CSSProperties>> = {\r\n  neutral: {\r\n    solid: { backgroundColor: 'var(--brycks-foreground-default)', color: 'var(--brycks-background-app)' },\r\n    subtle: { backgroundColor: 'var(--brycks-background-muted)', color: 'var(--brycks-foreground-default)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-foreground-default)', borderColor: 'var(--brycks-border-default)' },\r\n  },\r\n  primary: {\r\n    solid: { backgroundColor: 'var(--brycks-primary-default)', color: 'var(--brycks-primary-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-primary-muted)', color: 'var(--brycks-primary-hover)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-primary-default)', borderColor: 'var(--brycks-primary-default)' },\r\n  },\r\n  accent: {\r\n    solid: { backgroundColor: 'var(--brycks-accent-default)', color: 'var(--brycks-accent-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-accent-muted)', color: 'var(--brycks-accent-hover)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-accent-default)', borderColor: 'var(--brycks-accent-default)' },\r\n  },\r\n  success: {\r\n    solid: { backgroundColor: 'var(--brycks-success-default)', color: 'var(--brycks-success-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-success-muted)', color: 'var(--brycks-success-on-muted)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-success-default)', borderColor: 'var(--brycks-success-default)' },\r\n  },\r\n  warning: {\r\n    solid: { backgroundColor: 'var(--brycks-warning-default)', color: 'var(--brycks-warning-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-warning-muted)', color: 'var(--brycks-warning-on-muted)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-warning-default)', borderColor: 'var(--brycks-warning-default)' },\r\n  },\r\n  error: {\r\n    solid: { backgroundColor: 'var(--brycks-error-default)', color: 'var(--brycks-error-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-error-muted)', color: 'var(--brycks-error-on-muted)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-error-default)', borderColor: 'var(--brycks-error-default)' },\r\n  },\r\n  info: {\r\n    solid: { backgroundColor: 'var(--brycks-info-default)', color: 'var(--brycks-info-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-info-muted)', color: 'var(--brycks-info-on-muted)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-info-default)', borderColor: 'var(--brycks-info-default)' },\r\n  },\r\n}\r\n\r\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\r\n  {\r\n    variant = 'subtle',\r\n    intent = 'neutral',\r\n    size = 'md',\r\n    className,\r\n    style,\r\n    testId,\r\n    children,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const sizeValue = sizeStyles[size]\r\n  const colorValue = intentColors[intent][variant]\r\n\r\n  const badgeStyle: CSSProperties = {\r\n    display: 'inline-flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    fontWeight: 500,\r\n    fontFamily: 'var(--brycks-font-sans)',\r\n    lineHeight: 1,\r\n    borderRadius: 'var(--brycks-radius-full)',\r\n    whiteSpace: 'nowrap',\r\n    border: variant === 'outline' ? '1px solid' : 'none',\r\n    ...sizeValue,\r\n    ...colorValue,\r\n    ...style,\r\n  }\r\n\r\n  return (\r\n    <span\r\n      ref={ref}\r\n      className={cx(\r\n        'brycks-badge',\r\n        `brycks-badge--${variant}`,\r\n        `brycks-badge--${intent}`,\r\n        `brycks-badge--${size}`,\r\n        className\r\n      )}\r\n      style={badgeStyle}\r\n      data-testid={testId}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </span>\r\n  )\r\n})\r\n\r\nBadge.displayName = 'Badge'\r\n"],"names":["sizeStyles","fontSizes","spacing","componentPaddingY","componentPaddingX","intentColors","Badge","forwardRef","variant","intent","size","className","style","testId","children","props","ref","sizeValue","colorValue","badgeStyle","jsx","cx"],"mappings":"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"}

package/dist/components/utility/Badge/Badge.js

@@ -1,11 +1,14 @@
-import { jsx as k } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import { cx as y } from "../../../utils/styles.js";
-const g = {
-  sm: { fontSize: 10, padding: "2px 6px", height: 18 },
-  md: { fontSize: 11, padding: "3px 8px", height: 22 },
-  lg: { fontSize: 12, padding: "4px 10px", height: 26 }
-}, f = {
+import { jsx as g } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { cx as v } from "../../../utils/styles.js";
+import { spacing as r } from "../../../design-system/tokens/spacing.js";
+import { componentPaddingY as n, componentPaddingX as m } from "../../../design-system/primitives/sizing.js";
+import { fontSizes as a } from "../../../design-system/tokens/typography.js";
+const p = {
+  sm: { fontSize: a.xs - 1, padding: `${r[0.5]}px ${n.sm}px`, height: r[4] + r[0.5] },
+  md: { fontSize: a.xs, padding: `${r[0.5] + 1}px ${m.xs}px`, height: r[5] + r[0.5] },
+  lg: { fontSize: a.sm, padding: `${r[1]}px ${n.lg}px`, height: r[6] + r[0.5] }
+}, C = {
   neutral: {
     solid: { backgroundColor: "var(--brycks-foreground-default)", color: "var(--brycks-background-app)" },
     subtle: { backgroundColor: "var(--brycks-background-muted)", color: "var(--brycks-foreground-default)" },
@@ -41,17 +44,17 @@ const g = {
     subtle: { backgroundColor: "var(--brycks-info-muted)", color: "var(--brycks-info-on-muted)" },
     outline: { backgroundColor: "transparent", color: "var(--brycks-info-default)", borderColor: "var(--brycks-info-default)" }
   }
-}, v = i(function({
-  variant: r = "subtle",
-  intent: o = "neutral",
-  size: a = "md",
-  className: e,
-  style: c,
-  testId: n,
-  children: s,
-  ...l
-}, d) {
-  const t = g[a], u = f[o][r], b = {
+}, x = f(function({
+  variant: o = "subtle",
+  intent: e = "neutral",
+  size: c = "md",
+  className: s,
+  style: l,
+  testId: t,
+  children: d,
+  ...u
+}, b) {
+  const k = p[c], i = C[e][o], y = {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
@@ -60,31 +63,31 @@ const g = {
     lineHeight: 1,
     borderRadius: "var(--brycks-radius-full)",
     whiteSpace: "nowrap",
-    border: r === "outline" ? "1px solid" : "none",
-    ...t,
-    ...u,
-    ...c
+    border: o === "outline" ? "1px solid" : "none",
+    ...k,
+    ...i,
+    ...l
   };
-  return /* @__PURE__ */ k(
+  return /* @__PURE__ */ g(
     "span",
     {
-      ref: d,
-      className: y(
+      ref: b,
+      className: v(
         "brycks-badge",
-        `brycks-badge--${r}`,
         `brycks-badge--${o}`,
-        `brycks-badge--${a}`,
-        e
+        `brycks-badge--${e}`,
+        `brycks-badge--${c}`,
+        s
       ),
-      style: b,
-      "data-testid": n,
-      ...l,
-      children: s
+      style: y,
+      "data-testid": t,
+      ...u,
+      children: d
     }
   );
 });
-v.displayName = "Badge";
+x.displayName = "Badge";
 export {
-  v as Badge
+  x as Badge
 };
 //# sourceMappingURL=Badge.js.map

package/dist/components/utility/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../../src/components/utility/Badge/Badge.tsx"],"sourcesContent":["/**\r\n * Badge Component\r\n *\r\n * Small label for status, counts, or categorization.\r\n * Clean, minimal design with subtle color coding.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type HTMLAttributes,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type BadgeVariant = 'solid' | 'subtle' | 'outline'\r\nexport type BadgeIntent = 'neutral' | 'primary' | 'accent' | 'success' | 'warning' | 'error' | 'info'\r\nexport type BadgeSize = 'sm' | 'md' | 'lg'\r\n\r\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\r\n  /** Visual variant */\r\n  variant?: BadgeVariant\r\n  /** Color intent */\r\n  intent?: BadgeIntent\r\n  /** Size */\r\n  size?: BadgeSize\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n  /** Badge content */\r\n  children?: ReactNode\r\n}\r\n\r\nconst sizeStyles: Record<BadgeSize, CSSProperties> = {\r\n  sm: { fontSize: 10, padding: '2px 6px', height: 18 },\r\n  md: { fontSize: 11, padding: '3px 8px', height: 22 },\r\n  lg: { fontSize: 12, padding: '4px 10px', height: 26 },\r\n}\r\n\r\nconst intentColors: Record<BadgeIntent, Record<BadgeVariant, CSSProperties>> = {\r\n  neutral: {\r\n    solid: { backgroundColor: 'var(--brycks-foreground-default)', color: 'var(--brycks-background-app)' },\r\n    subtle: { backgroundColor: 'var(--brycks-background-muted)', color: 'var(--brycks-foreground-default)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-foreground-default)', borderColor: 'var(--brycks-border-default)' },\r\n  },\r\n  primary: {\r\n    solid: { backgroundColor: 'var(--brycks-primary-default)', color: 'var(--brycks-primary-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-primary-muted)', color: 'var(--brycks-primary-hover)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-primary-default)', borderColor: 'var(--brycks-primary-default)' },\r\n  },\r\n  accent: {\r\n    solid: { backgroundColor: 'var(--brycks-accent-default)', color: 'var(--brycks-accent-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-accent-muted)', color: 'var(--brycks-accent-hover)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-accent-default)', borderColor: 'var(--brycks-accent-default)' },\r\n  },\r\n  success: {\r\n    solid: { backgroundColor: 'var(--brycks-success-default)', color: 'var(--brycks-success-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-success-muted)', color: 'var(--brycks-success-on-muted)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-success-default)', borderColor: 'var(--brycks-success-default)' },\r\n  },\r\n  warning: {\r\n    solid: { backgroundColor: 'var(--brycks-warning-default)', color: 'var(--brycks-warning-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-warning-muted)', color: 'var(--brycks-warning-on-muted)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-warning-default)', borderColor: 'var(--brycks-warning-default)' },\r\n  },\r\n  error: {\r\n    solid: { backgroundColor: 'var(--brycks-error-default)', color: 'var(--brycks-error-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-error-muted)', color: 'var(--brycks-error-on-muted)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-error-default)', borderColor: 'var(--brycks-error-default)' },\r\n  },\r\n  info: {\r\n    solid: { backgroundColor: 'var(--brycks-info-default)', color: 'var(--brycks-info-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-info-muted)', color: 'var(--brycks-info-on-muted)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-info-default)', borderColor: 'var(--brycks-info-default)' },\r\n  },\r\n}\r\n\r\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\r\n  {\r\n    variant = 'subtle',\r\n    intent = 'neutral',\r\n    size = 'md',\r\n    className,\r\n    style,\r\n    testId,\r\n    children,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const sizeValue = sizeStyles[size]\r\n  const colorValue = intentColors[intent][variant]\r\n\r\n  const badgeStyle: CSSProperties = {\r\n    display: 'inline-flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    fontWeight: 500,\r\n    fontFamily: 'var(--brycks-font-sans)',\r\n    lineHeight: 1,\r\n    borderRadius: 'var(--brycks-radius-full)',\r\n    whiteSpace: 'nowrap',\r\n    border: variant === 'outline' ? '1px solid' : 'none',\r\n    ...sizeValue,\r\n    ...colorValue,\r\n    ...style,\r\n  }\r\n\r\n  return (\r\n    <span\r\n      ref={ref}\r\n      className={cx(\r\n        'brycks-badge',\r\n        `brycks-badge--${variant}`,\r\n        `brycks-badge--${intent}`,\r\n        `brycks-badge--${size}`,\r\n        className\r\n      )}\r\n      style={badgeStyle}\r\n      data-testid={testId}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </span>\r\n  )\r\n})\r\n\r\nBadge.displayName = 'Badge'\r\n"],"names":["sizeStyles","intentColors","Badge","forwardRef","variant","intent","size","className","style","testId","children","props","ref","sizeValue","colorValue","badgeStyle","jsx","cx"],"mappings":"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"}
+{"version":3,"file":"Badge.js","sources":["../../../../src/components/utility/Badge/Badge.tsx"],"sourcesContent":["/**\r\n * Badge Component\r\n *\r\n * Small label for status, counts, or categorization.\r\n * Clean, minimal design with subtle color coding.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type HTMLAttributes,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\nimport { spacing, fontSizes } from '../../../design-system'\r\nimport { componentPaddingX, componentPaddingY } from '../../../design-system/primitives'\r\n\r\nexport type BadgeVariant = 'solid' | 'subtle' | 'outline'\r\nexport type BadgeIntent = 'neutral' | 'primary' | 'accent' | 'success' | 'warning' | 'error' | 'info'\r\nexport type BadgeSize = 'sm' | 'md' | 'lg'\r\n\r\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\r\n  /** Visual variant */\r\n  variant?: BadgeVariant\r\n  /** Color intent */\r\n  intent?: BadgeIntent\r\n  /** Size */\r\n  size?: BadgeSize\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n  /** Badge content */\r\n  children?: ReactNode\r\n}\r\n\r\nconst sizeStyles: Record<BadgeSize, CSSProperties> = {\r\n  sm: { fontSize: fontSizes.xs - 1, padding: `${spacing[0.5]}px ${componentPaddingY.sm}px`, height: spacing[4] + spacing[0.5] },\r\n  md: { fontSize: fontSizes.xs, padding: `${spacing[0.5] + 1}px ${componentPaddingX.xs}px`, height: spacing[5] + spacing[0.5] },\r\n  lg: { fontSize: fontSizes.sm, padding: `${spacing[1]}px ${componentPaddingY.lg}px`, height: spacing[6] + spacing[0.5] },\r\n}\r\n\r\nconst intentColors: Record<BadgeIntent, Record<BadgeVariant, CSSProperties>> = {\r\n  neutral: {\r\n    solid: { backgroundColor: 'var(--brycks-foreground-default)', color: 'var(--brycks-background-app)' },\r\n    subtle: { backgroundColor: 'var(--brycks-background-muted)', color: 'var(--brycks-foreground-default)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-foreground-default)', borderColor: 'var(--brycks-border-default)' },\r\n  },\r\n  primary: {\r\n    solid: { backgroundColor: 'var(--brycks-primary-default)', color: 'var(--brycks-primary-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-primary-muted)', color: 'var(--brycks-primary-hover)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-primary-default)', borderColor: 'var(--brycks-primary-default)' },\r\n  },\r\n  accent: {\r\n    solid: { backgroundColor: 'var(--brycks-accent-default)', color: 'var(--brycks-accent-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-accent-muted)', color: 'var(--brycks-accent-hover)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-accent-default)', borderColor: 'var(--brycks-accent-default)' },\r\n  },\r\n  success: {\r\n    solid: { backgroundColor: 'var(--brycks-success-default)', color: 'var(--brycks-success-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-success-muted)', color: 'var(--brycks-success-on-muted)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-success-default)', borderColor: 'var(--brycks-success-default)' },\r\n  },\r\n  warning: {\r\n    solid: { backgroundColor: 'var(--brycks-warning-default)', color: 'var(--brycks-warning-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-warning-muted)', color: 'var(--brycks-warning-on-muted)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-warning-default)', borderColor: 'var(--brycks-warning-default)' },\r\n  },\r\n  error: {\r\n    solid: { backgroundColor: 'var(--brycks-error-default)', color: 'var(--brycks-error-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-error-muted)', color: 'var(--brycks-error-on-muted)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-error-default)', borderColor: 'var(--brycks-error-default)' },\r\n  },\r\n  info: {\r\n    solid: { backgroundColor: 'var(--brycks-info-default)', color: 'var(--brycks-info-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-info-muted)', color: 'var(--brycks-info-on-muted)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-info-default)', borderColor: 'var(--brycks-info-default)' },\r\n  },\r\n}\r\n\r\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\r\n  {\r\n    variant = 'subtle',\r\n    intent = 'neutral',\r\n    size = 'md',\r\n    className,\r\n    style,\r\n    testId,\r\n    children,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const sizeValue = sizeStyles[size]\r\n  const colorValue = intentColors[intent][variant]\r\n\r\n  const badgeStyle: CSSProperties = {\r\n    display: 'inline-flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    fontWeight: 500,\r\n    fontFamily: 'var(--brycks-font-sans)',\r\n    lineHeight: 1,\r\n    borderRadius: 'var(--brycks-radius-full)',\r\n    whiteSpace: 'nowrap',\r\n    border: variant === 'outline' ? '1px solid' : 'none',\r\n    ...sizeValue,\r\n    ...colorValue,\r\n    ...style,\r\n  }\r\n\r\n  return (\r\n    <span\r\n      ref={ref}\r\n      className={cx(\r\n        'brycks-badge',\r\n        `brycks-badge--${variant}`,\r\n        `brycks-badge--${intent}`,\r\n        `brycks-badge--${size}`,\r\n        className\r\n      )}\r\n      style={badgeStyle}\r\n      data-testid={testId}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </span>\r\n  )\r\n})\r\n\r\nBadge.displayName = 'Badge'\r\n"],"names":["sizeStyles","fontSizes","spacing","componentPaddingY","componentPaddingX","intentColors","Badge","forwardRef","variant","intent","size","className","style","testId","children","props","ref","sizeValue","colorValue","badgeStyle","jsx","cx"],"mappings":"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"}

package/dist/data.d.ts

@@ -1,3 +1,4 @@
+import { CSSProperties } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { HTMLAttributes } from 'react';
 import { ReactNode } from 'react';
@@ -195,4 +196,119 @@ export declare type TableSize = 'sm' | 'md' | 'lg';
 
 export declare type TableVariant = 'default' | 'striped' | 'bordered';
 
+export declare interface TreeNode {
+    /** Unique identifier */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Optional icon */
+    icon?: ReactNode;
+    /** Child nodes */
+    children?: TreeNode[];
+    /** Whether the node is disabled */
+    disabled?: boolean;
+    /** Additional data */
+    data?: unknown;
+}
+
+export declare const TreeView: ForwardRefExoticComponent<TreeViewProps & RefAttributes<HTMLUListElement>>;
+
+export declare interface TreeViewProps {
+    /** Tree data */
+    data: TreeNode[];
+    /** Selected node IDs (controlled) */
+    selectedIds?: string[];
+    /** Default selected node IDs (uncontrolled) */
+    defaultSelectedIds?: string[];
+    /** Expanded node IDs (controlled) */
+    expandedIds?: string[];
+    /** Default expanded node IDs (uncontrolled) */
+    defaultExpandedIds?: string[];
+    /** Callback when selection changes */
+    onSelectionChange?: (selectedIds: string[]) => void;
+    /** Callback when expansion changes */
+    onExpansionChange?: (expandedIds: string[]) => void;
+    /** Callback when a node is clicked */
+    onNodeClick?: (node: TreeNode) => void;
+    /** Whether to allow multi-selection */
+    multiSelect?: boolean;
+    /** Component size */
+    size?: TreeViewSize;
+    /** Whether to show connecting lines */
+    showLines?: boolean;
+    /** Custom node renderer */
+    renderNode?: (node: TreeNode, isSelected: boolean, isExpanded: boolean) => ReactNode;
+    /** Label for accessibility */
+    'aria-label'?: string;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type TreeViewSize = 'sm' | 'md' | 'lg';
+
+export declare const VariableHeightVirtualList: <T>(props: VariableHeightVirtualListProps<T> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => React.ReactElement;
+
+export declare interface VariableHeightVirtualListProps<T> {
+    /** Array of items to render */
+    items: T[];
+    /** Function to estimate item height (used for initial layout) */
+    estimateItemHeight: (index: number) => number;
+    /** Visible height of the container */
+    height: number;
+    /** Optional width of the container */
+    width?: number | string;
+    /** Number of extra items to render above/below viewport */
+    overscan?: number;
+    /** Render function for each item */
+    renderItem: (item: T, index: number, measureRef: (el: HTMLElement | null) => void) => ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare const VirtualList: <T>(props: VirtualListProps<T> & {
+    ref?: React.ForwardedRef<VirtualListHandle>;
+}) => React.ReactElement;
+
+export declare interface VirtualListHandle {
+    /** Scroll to a specific index */
+    scrollToIndex: (index: number, align?: 'start' | 'center' | 'end') => void;
+    /** Scroll to a specific offset */
+    scrollToOffset: (offset: number) => void;
+    /** Get current scroll position */
+    getScrollTop: () => number;
+}
+
+export declare interface VirtualListProps<T> {
+    /** Array of items to render */
+    items: T[];
+    /** Height of each item in pixels */
+    itemHeight: number;
+    /** Visible height of the container */
+    height: number;
+    /** Optional width of the container */
+    width?: number | string;
+    /** Number of extra items to render above/below viewport for smoother scrolling */
+    overscan?: number;
+    /** Render function for each item */
+    renderItem: (item: T, index: number, style: CSSProperties) => ReactNode;
+    /** Callback when scroll position changes */
+    onScroll?: (scrollTop: number) => void;
+    /** Callback when reaching the end of the list */
+    onEndReached?: () => void;
+    /** Threshold in pixels before end to trigger onEndReached */
+    endReachedThreshold?: number;
+    /** Initial scroll position */
+    initialScrollTop?: number;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
 export { }