@brycks/core-front 0.2.7 → 0.2.9

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.cjs","sources":["../../../../src/components/navigation/Accordion/Accordion.tsx"],"sourcesContent":["/**\n * Accordion Component\n *\n * Collapsible content panels for organizing information.\n * Supports single or multiple expanded panels.\n */\n\nimport {\n  forwardRef,\n  useState,\n  useCallback,\n  createContext,\n  useContext,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type AccordionVariant = 'default' | 'bordered' | 'separated'\n\ninterface AccordionContextValue {\n  expandedItems: string[]\n  toggleItem: (value: string) => void\n  allowMultiple: boolean\n  variant: AccordionVariant\n}\n\nconst AccordionContext = createContext<AccordionContextValue | null>(null)\n\nfunction useAccordionContext() {\n  const context = useContext(AccordionContext)\n  if (!context) {\n    throw new Error('AccordionItem must be used within an Accordion')\n  }\n  return context\n}\n\nexport interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Expanded items (controlled) */\n  value?: string[]\n  /** Default expanded items (uncontrolled) */\n  defaultValue?: string[]\n  /** Callback when items change */\n  onChange?: (value: string[]) => void\n  /** Allow multiple items to be expanded */\n  allowMultiple?: boolean\n  /** Accordion variant */\n  variant?: AccordionVariant\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(\n  {\n    value: controlledValue,\n    defaultValue = [],\n    onChange,\n    allowMultiple = false,\n    variant = 'default',\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const [internalValue, setInternalValue] = useState(defaultValue)\n  const expandedItems = controlledValue ?? internalValue\n\n  const toggleItem = useCallback(\n    (itemValue: string) => {\n      const isExpanded = expandedItems.includes(itemValue)\n      let newValue: string[]\n\n      if (isExpanded) {\n        newValue = expandedItems.filter((v) => v !== itemValue)\n      } else if (allowMultiple) {\n        newValue = [...expandedItems, itemValue]\n      } else {\n        newValue = [itemValue]\n      }\n\n      if (controlledValue === undefined) {\n        setInternalValue(newValue)\n      }\n      onChange?.(newValue)\n    },\n    [expandedItems, allowMultiple, controlledValue, onChange]\n  )\n\n  const containerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: variant === 'separated' ? 8 : 0,\n    ...style,\n  }\n\n  return (\n    <AccordionContext.Provider value={{ expandedItems, toggleItem, allowMultiple, variant }}>\n      <div\n        ref={ref}\n        className={cx('brycks-accordion', `brycks-accordion--${variant}`, className)}\n        style={containerStyle}\n        data-testid={testId}\n        {...props}\n      >\n        {children}\n      </div>\n    </AccordionContext.Provider>\n  )\n})\n\nAccordion.displayName = 'Accordion'\n\n// AccordionItem\nexport interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {\n  /** Item value (unique identifier) */\n  value: string\n  /** Whether the item is disabled */\n  disabled?: boolean\n  /** Custom class name */\n  className?: string\n}\n\ninterface AccordionItemContextValue {\n  value: string\n  isExpanded: boolean\n  disabled: boolean\n}\n\nconst AccordionItemContext = createContext<AccordionItemContextValue | null>(null)\n\nfunction useAccordionItemContext() {\n  const context = useContext(AccordionItemContext)\n  if (!context) {\n    throw new Error('AccordionTrigger/AccordionContent must be used within an AccordionItem')\n  }\n  return context\n}\n\nexport const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(function AccordionItem(\n  { value, disabled = false, className, style, children, ...props },\n  ref\n) {\n  const { expandedItems, variant } = useAccordionContext()\n  const isExpanded = expandedItems.includes(value)\n\n  const itemStyle: CSSProperties = {\n    borderBottom: variant === 'default' ? '1px solid var(--brycks-border-muted)' : undefined,\n    border: variant === 'bordered' || variant === 'separated' ? '1px solid var(--brycks-border-default)' : undefined,\n    borderRadius: variant === 'separated' ? 'var(--brycks-radius-lg)' : undefined,\n    overflow: 'hidden',\n    ...style,\n  }\n\n  // Remove bottom border for separated variant (each item has full border)\n  if (variant === 'bordered' && !isExpanded) {\n    itemStyle.borderBottom = '1px solid var(--brycks-border-default)'\n  }\n\n  return (\n    <AccordionItemContext.Provider value={{ value, isExpanded, disabled }}>\n      <div\n        ref={ref}\n        className={cx('brycks-accordion-item', isExpanded && 'brycks-accordion-item--expanded', className)}\n        style={itemStyle}\n        {...props}\n      >\n        {children}\n      </div>\n    </AccordionItemContext.Provider>\n  )\n})\n\nAccordionItem.displayName = 'AccordionItem'\n\n// AccordionTrigger\nexport interface AccordionTriggerProps extends HTMLAttributes<HTMLButtonElement> {\n  /** Icon to show (replaces default chevron) */\n  icon?: ReactNode\n  /** Custom class name */\n  className?: string\n}\n\nfunction ChevronIcon({ isExpanded }: { isExpanded: boolean }) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      style={{\n        transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',\n        transition: 'transform 200ms ease-out',\n      }}\n    >\n      <path\n        d=\"M4 6l4 4 4-4\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport const AccordionTrigger = forwardRef<HTMLButtonElement, AccordionTriggerProps>(function AccordionTrigger(\n  { icon, className, style, children, ...props },\n  ref\n) {\n  const { toggleItem } = useAccordionContext()\n  const { value, isExpanded, disabled } = useAccordionItemContext()\n\n  const handleClick = () => {\n    if (!disabled) {\n      toggleItem(value)\n    }\n  }\n\n  const triggerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    width: '100%',\n    padding: '16px',\n    fontSize: 15,\n    fontWeight: 500,\n    color: disabled ? 'var(--brycks-foreground-muted)' : 'var(--brycks-foreground-default)',\n    backgroundColor: 'transparent',\n    border: 'none',\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    textAlign: 'left',\n    transition: 'background-color 150ms ease-out',\n    outline: 'none',\n    ...style,\n  }\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      aria-expanded={isExpanded}\n      aria-disabled={disabled}\n      disabled={disabled}\n      className={cx('brycks-accordion-trigger', className)}\n      style={triggerStyle}\n      onClick={handleClick}\n      onMouseEnter={(e) => {\n        if (!disabled) {\n          e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n        }\n      }}\n      onMouseLeave={(e) => {\n        e.currentTarget.style.backgroundColor = 'transparent'\n      }}\n      {...props}\n    >\n      {children}\n      <span style={{ color: 'var(--brycks-foreground-muted)', flexShrink: 0, marginLeft: 12 }}>\n        {icon ?? <ChevronIcon isExpanded={isExpanded} />}\n      </span>\n    </button>\n  )\n})\n\nAccordionTrigger.displayName = 'AccordionTrigger'\n\n// AccordionContent\nexport interface AccordionContentProps extends HTMLAttributes<HTMLDivElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(function AccordionContent(\n  { className, style, children, ...props },\n  ref\n) {\n  const { isExpanded } = useAccordionItemContext()\n\n  const contentStyle: CSSProperties = {\n    overflow: 'hidden',\n    transition: 'max-height 200ms ease-out, opacity 200ms ease-out',\n    maxHeight: isExpanded ? '1000px' : '0',\n    opacity: isExpanded ? 1 : 0,\n  }\n\n  const innerStyle: CSSProperties = {\n    padding: '0 16px 16px 16px',\n    color: 'var(--brycks-foreground-muted)',\n    fontSize: 14,\n    lineHeight: 1.6,\n    ...style,\n  }\n\n  return (\n    <div\n      ref={ref}\n      role=\"region\"\n      aria-hidden={!isExpanded}\n      className={cx('brycks-accordion-content', className)}\n      style={contentStyle}\n      {...props}\n    >\n      <div style={innerStyle}>{children}</div>\n    </div>\n  )\n})\n\nAccordionContent.displayName = 'AccordionContent'\n"],"names":["AccordionContext","createContext","useAccordionContext","context","useContext","Accordion","forwardRef","controlledValue","defaultValue","onChange","allowMultiple","variant","className","style","children","testId","props","ref","internalValue","setInternalValue","useState","expandedItems","toggleItem","useCallback","itemValue","isExpanded","newValue","v","containerStyle","jsx","cx","AccordionItemContext","useAccordionItemContext","AccordionItem","value","disabled","itemStyle","ChevronIcon","AccordionTrigger","icon","handleClick","triggerStyle","jsxs","e","AccordionContent","contentStyle","innerStyle"],"mappings":"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"}

package/dist/components/navigation/Accordion/Accordion.js

@@ -0,0 +1,180 @@
+import { jsx as n, jsxs as j } from "react/jsx-runtime";
+import { forwardRef as b, useState as L, useCallback as B, createContext as v, useContext as h } from "react";
+import { cx as x } from "../../../utils/styles.js";
+const A = v(null);
+function C() {
+  const o = h(A);
+  if (!o)
+    throw new Error("AccordionItem must be used within an Accordion");
+  return o;
+}
+const z = b(function({
+  value: r,
+  defaultValue: a = [],
+  onChange: s,
+  allowMultiple: c = !1,
+  variant: i = "default",
+  className: d,
+  style: l,
+  children: u,
+  testId: t,
+  ...e
+}, f) {
+  const [k, m] = L(a), g = r ?? k, S = B(
+    (y) => {
+      const E = g.includes(y);
+      let p;
+      E ? p = g.filter((T) => T !== y) : c ? p = [...g, y] : p = [y], r === void 0 && m(p), s?.(p);
+    },
+    [g, c, r, s]
+  ), N = {
+    display: "flex",
+    flexDirection: "column",
+    gap: i === "separated" ? 8 : 0,
+    ...l
+  };
+  return /* @__PURE__ */ n(A.Provider, { value: { expandedItems: g, toggleItem: S, allowMultiple: c, variant: i }, children: /* @__PURE__ */ n(
+    "div",
+    {
+      ref: f,
+      className: x("brycks-accordion", `brycks-accordion--${i}`, d),
+      style: N,
+      "data-testid": t,
+      ...e,
+      children: u
+    }
+  ) });
+});
+z.displayName = "Accordion";
+const I = v(null);
+function w() {
+  const o = h(I);
+  if (!o)
+    throw new Error("AccordionTrigger/AccordionContent must be used within an AccordionItem");
+  return o;
+}
+const H = b(function({ value: r, disabled: a = !1, className: s, style: c, children: i, ...d }, l) {
+  const { expandedItems: u, variant: t } = C(), e = u.includes(r), f = {
+    borderBottom: t === "default" ? "1px solid var(--brycks-border-muted)" : void 0,
+    border: t === "bordered" || t === "separated" ? "1px solid var(--brycks-border-default)" : void 0,
+    borderRadius: t === "separated" ? "var(--brycks-radius-lg)" : void 0,
+    overflow: "hidden",
+    ...c
+  };
+  return t === "bordered" && !e && (f.borderBottom = "1px solid var(--brycks-border-default)"), /* @__PURE__ */ n(I.Provider, { value: { value: r, isExpanded: e, disabled: a }, children: /* @__PURE__ */ n(
+    "div",
+    {
+      ref: l,
+      className: x("brycks-accordion-item", e && "brycks-accordion-item--expanded", s),
+      style: f,
+      ...d,
+      children: i
+    }
+  ) });
+});
+H.displayName = "AccordionItem";
+function P({ isExpanded: o }) {
+  return /* @__PURE__ */ n(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      style: {
+        transform: o ? "rotate(180deg)" : "rotate(0deg)",
+        transition: "transform 200ms ease-out"
+      },
+      children: /* @__PURE__ */ n(
+        "path",
+        {
+          d: "M4 6l4 4 4-4",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+const R = b(function({ icon: r, className: a, style: s, children: c, ...i }, d) {
+  const { toggleItem: l } = C(), { value: u, isExpanded: t, disabled: e } = w(), f = () => {
+    e || l(u);
+  }, k = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%",
+    padding: "16px",
+    fontSize: 15,
+    fontWeight: 500,
+    color: e ? "var(--brycks-foreground-muted)" : "var(--brycks-foreground-default)",
+    backgroundColor: "transparent",
+    border: "none",
+    cursor: e ? "not-allowed" : "pointer",
+    textAlign: "left",
+    transition: "background-color 150ms ease-out",
+    outline: "none",
+    ...s
+  };
+  return /* @__PURE__ */ j(
+    "button",
+    {
+      ref: d,
+      type: "button",
+      "aria-expanded": t,
+      "aria-disabled": e,
+      disabled: e,
+      className: x("brycks-accordion-trigger", a),
+      style: k,
+      onClick: f,
+      onMouseEnter: (m) => {
+        e || (m.currentTarget.style.backgroundColor = "var(--brycks-background-muted)");
+      },
+      onMouseLeave: (m) => {
+        m.currentTarget.style.backgroundColor = "transparent";
+      },
+      ...i,
+      children: [
+        c,
+        /* @__PURE__ */ n("span", { style: { color: "var(--brycks-foreground-muted)", flexShrink: 0, marginLeft: 12 }, children: r ?? /* @__PURE__ */ n(P, { isExpanded: t }) })
+      ]
+    }
+  );
+});
+R.displayName = "AccordionTrigger";
+const W = b(function({ className: r, style: a, children: s, ...c }, i) {
+  const { isExpanded: d } = w(), l = {
+    overflow: "hidden",
+    transition: "max-height 200ms ease-out, opacity 200ms ease-out",
+    maxHeight: d ? "1000px" : "0",
+    opacity: d ? 1 : 0
+  }, u = {
+    padding: "0 16px 16px 16px",
+    color: "var(--brycks-foreground-muted)",
+    fontSize: 14,
+    lineHeight: 1.6,
+    ...a
+  };
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      ref: i,
+      role: "region",
+      "aria-hidden": !d,
+      className: x("brycks-accordion-content", r),
+      style: l,
+      ...c,
+      children: /* @__PURE__ */ n("div", { style: u, children: s })
+    }
+  );
+});
+W.displayName = "AccordionContent";
+export {
+  z as Accordion,
+  W as AccordionContent,
+  H as AccordionItem,
+  R as AccordionTrigger
+};
+//# sourceMappingURL=Accordion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sources":["../../../../src/components/navigation/Accordion/Accordion.tsx"],"sourcesContent":["/**\n * Accordion Component\n *\n * Collapsible content panels for organizing information.\n * Supports single or multiple expanded panels.\n */\n\nimport {\n  forwardRef,\n  useState,\n  useCallback,\n  createContext,\n  useContext,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type AccordionVariant = 'default' | 'bordered' | 'separated'\n\ninterface AccordionContextValue {\n  expandedItems: string[]\n  toggleItem: (value: string) => void\n  allowMultiple: boolean\n  variant: AccordionVariant\n}\n\nconst AccordionContext = createContext<AccordionContextValue | null>(null)\n\nfunction useAccordionContext() {\n  const context = useContext(AccordionContext)\n  if (!context) {\n    throw new Error('AccordionItem must be used within an Accordion')\n  }\n  return context\n}\n\nexport interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Expanded items (controlled) */\n  value?: string[]\n  /** Default expanded items (uncontrolled) */\n  defaultValue?: string[]\n  /** Callback when items change */\n  onChange?: (value: string[]) => void\n  /** Allow multiple items to be expanded */\n  allowMultiple?: boolean\n  /** Accordion variant */\n  variant?: AccordionVariant\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(\n  {\n    value: controlledValue,\n    defaultValue = [],\n    onChange,\n    allowMultiple = false,\n    variant = 'default',\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const [internalValue, setInternalValue] = useState(defaultValue)\n  const expandedItems = controlledValue ?? internalValue\n\n  const toggleItem = useCallback(\n    (itemValue: string) => {\n      const isExpanded = expandedItems.includes(itemValue)\n      let newValue: string[]\n\n      if (isExpanded) {\n        newValue = expandedItems.filter((v) => v !== itemValue)\n      } else if (allowMultiple) {\n        newValue = [...expandedItems, itemValue]\n      } else {\n        newValue = [itemValue]\n      }\n\n      if (controlledValue === undefined) {\n        setInternalValue(newValue)\n      }\n      onChange?.(newValue)\n    },\n    [expandedItems, allowMultiple, controlledValue, onChange]\n  )\n\n  const containerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: variant === 'separated' ? 8 : 0,\n    ...style,\n  }\n\n  return (\n    <AccordionContext.Provider value={{ expandedItems, toggleItem, allowMultiple, variant }}>\n      <div\n        ref={ref}\n        className={cx('brycks-accordion', `brycks-accordion--${variant}`, className)}\n        style={containerStyle}\n        data-testid={testId}\n        {...props}\n      >\n        {children}\n      </div>\n    </AccordionContext.Provider>\n  )\n})\n\nAccordion.displayName = 'Accordion'\n\n// AccordionItem\nexport interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {\n  /** Item value (unique identifier) */\n  value: string\n  /** Whether the item is disabled */\n  disabled?: boolean\n  /** Custom class name */\n  className?: string\n}\n\ninterface AccordionItemContextValue {\n  value: string\n  isExpanded: boolean\n  disabled: boolean\n}\n\nconst AccordionItemContext = createContext<AccordionItemContextValue | null>(null)\n\nfunction useAccordionItemContext() {\n  const context = useContext(AccordionItemContext)\n  if (!context) {\n    throw new Error('AccordionTrigger/AccordionContent must be used within an AccordionItem')\n  }\n  return context\n}\n\nexport const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(function AccordionItem(\n  { value, disabled = false, className, style, children, ...props },\n  ref\n) {\n  const { expandedItems, variant } = useAccordionContext()\n  const isExpanded = expandedItems.includes(value)\n\n  const itemStyle: CSSProperties = {\n    borderBottom: variant === 'default' ? '1px solid var(--brycks-border-muted)' : undefined,\n    border: variant === 'bordered' || variant === 'separated' ? '1px solid var(--brycks-border-default)' : undefined,\n    borderRadius: variant === 'separated' ? 'var(--brycks-radius-lg)' : undefined,\n    overflow: 'hidden',\n    ...style,\n  }\n\n  // Remove bottom border for separated variant (each item has full border)\n  if (variant === 'bordered' && !isExpanded) {\n    itemStyle.borderBottom = '1px solid var(--brycks-border-default)'\n  }\n\n  return (\n    <AccordionItemContext.Provider value={{ value, isExpanded, disabled }}>\n      <div\n        ref={ref}\n        className={cx('brycks-accordion-item', isExpanded && 'brycks-accordion-item--expanded', className)}\n        style={itemStyle}\n        {...props}\n      >\n        {children}\n      </div>\n    </AccordionItemContext.Provider>\n  )\n})\n\nAccordionItem.displayName = 'AccordionItem'\n\n// AccordionTrigger\nexport interface AccordionTriggerProps extends HTMLAttributes<HTMLButtonElement> {\n  /** Icon to show (replaces default chevron) */\n  icon?: ReactNode\n  /** Custom class name */\n  className?: string\n}\n\nfunction ChevronIcon({ isExpanded }: { isExpanded: boolean }) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      style={{\n        transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',\n        transition: 'transform 200ms ease-out',\n      }}\n    >\n      <path\n        d=\"M4 6l4 4 4-4\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport const AccordionTrigger = forwardRef<HTMLButtonElement, AccordionTriggerProps>(function AccordionTrigger(\n  { icon, className, style, children, ...props },\n  ref\n) {\n  const { toggleItem } = useAccordionContext()\n  const { value, isExpanded, disabled } = useAccordionItemContext()\n\n  const handleClick = () => {\n    if (!disabled) {\n      toggleItem(value)\n    }\n  }\n\n  const triggerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    width: '100%',\n    padding: '16px',\n    fontSize: 15,\n    fontWeight: 500,\n    color: disabled ? 'var(--brycks-foreground-muted)' : 'var(--brycks-foreground-default)',\n    backgroundColor: 'transparent',\n    border: 'none',\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    textAlign: 'left',\n    transition: 'background-color 150ms ease-out',\n    outline: 'none',\n    ...style,\n  }\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      aria-expanded={isExpanded}\n      aria-disabled={disabled}\n      disabled={disabled}\n      className={cx('brycks-accordion-trigger', className)}\n      style={triggerStyle}\n      onClick={handleClick}\n      onMouseEnter={(e) => {\n        if (!disabled) {\n          e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n        }\n      }}\n      onMouseLeave={(e) => {\n        e.currentTarget.style.backgroundColor = 'transparent'\n      }}\n      {...props}\n    >\n      {children}\n      <span style={{ color: 'var(--brycks-foreground-muted)', flexShrink: 0, marginLeft: 12 }}>\n        {icon ?? <ChevronIcon isExpanded={isExpanded} />}\n      </span>\n    </button>\n  )\n})\n\nAccordionTrigger.displayName = 'AccordionTrigger'\n\n// AccordionContent\nexport interface AccordionContentProps extends HTMLAttributes<HTMLDivElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(function AccordionContent(\n  { className, style, children, ...props },\n  ref\n) {\n  const { isExpanded } = useAccordionItemContext()\n\n  const contentStyle: CSSProperties = {\n    overflow: 'hidden',\n    transition: 'max-height 200ms ease-out, opacity 200ms ease-out',\n    maxHeight: isExpanded ? '1000px' : '0',\n    opacity: isExpanded ? 1 : 0,\n  }\n\n  const innerStyle: CSSProperties = {\n    padding: '0 16px 16px 16px',\n    color: 'var(--brycks-foreground-muted)',\n    fontSize: 14,\n    lineHeight: 1.6,\n    ...style,\n  }\n\n  return (\n    <div\n      ref={ref}\n      role=\"region\"\n      aria-hidden={!isExpanded}\n      className={cx('brycks-accordion-content', className)}\n      style={contentStyle}\n      {...props}\n    >\n      <div style={innerStyle}>{children}</div>\n    </div>\n  )\n})\n\nAccordionContent.displayName = 'AccordionContent'\n"],"names":["AccordionContext","createContext","useAccordionContext","context","useContext","Accordion","forwardRef","controlledValue","defaultValue","onChange","allowMultiple","variant","className","style","children","testId","props","ref","internalValue","setInternalValue","useState","expandedItems","toggleItem","useCallback","itemValue","isExpanded","newValue","v","containerStyle","jsx","cx","AccordionItemContext","useAccordionItemContext","AccordionItem","value","disabled","itemStyle","ChevronIcon","AccordionTrigger","icon","handleClick","triggerStyle","jsxs","e","AccordionContent","contentStyle","innerStyle"],"mappings":"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"}

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

@@ -0,0 +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;
+//# sourceMappingURL=Breadcrumb.cjs.map

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

@@ -0,0 +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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"}

package/dist/components/navigation/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,137 @@
+import { jsx as n, jsxs as S, Fragment as j } from "react/jsx-runtime";
+import { forwardRef as z, Children as L, isValidElement as N, cloneElement as D } from "react";
+import { cx as x } from "../../../utils/styles.js";
+const B = {
+  sm: { fontSize: 12, gap: 6, iconSize: 12 },
+  md: { fontSize: 14, gap: 8, iconSize: 14 },
+  lg: { fontSize: 16, gap: 10, iconSize: 16 }
+};
+function T({ size: d }) {
+  return /* @__PURE__ */ n("svg", { width: d, height: d, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ n("path", { d: "M6 4l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+const W = z(function({
+  separator: l,
+  size: o = "md",
+  maxItems: t,
+  className: e,
+  style: u,
+  children: p,
+  testId: y,
+  ...g
+}, h) {
+  const i = B[o], r = L.toArray(p).filter(N);
+  let a = r, f = !1;
+  if (t && r.length > t) {
+    const m = Math.floor((t - 1) / 2);
+    a = [
+      ...r.slice(0, m),
+      ...r.slice(r.length - (t - m - 1))
+    ], f = !0;
+  }
+  const s = {
+    display: "flex",
+    alignItems: "center",
+    ...u
+  }, c = {
+    display: "flex",
+    alignItems: "center",
+    gap: i.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: i.fontSize
+  }, k = () => /* @__PURE__ */ n("span", { style: I, "aria-hidden": "true", children: l ?? /* @__PURE__ */ n(T, { size: i.iconSize }) });
+  return /* @__PURE__ */ n(
+    "nav",
+    {
+      ref: h,
+      "aria-label": "Breadcrumb",
+      className: x("brycks-breadcrumb", `brycks-breadcrumb--${o}`, e),
+      style: s,
+      "data-testid": y,
+      ...g,
+      children: /* @__PURE__ */ n("ol", { style: c, children: a.map((m, b) => {
+        const v = b === a.length - 1, E = !v, M = f && b === Math.floor((t - 1) / 2) - 1;
+        return /* @__PURE__ */ S("li", { style: { display: "flex", alignItems: "center", gap: i.gap }, children: [
+          D(m, {
+            isCurrentPage: v,
+            size: o
+          }),
+          M && /* @__PURE__ */ S(j, { children: [
+            k(),
+            /* @__PURE__ */ n("span", { style: w, children: "..." })
+          ] }),
+          E && k()
+        ] }, b);
+      }) })
+    }
+  );
+});
+W.displayName = "Breadcrumb";
+const A = z(function({
+  as: l = "a",
+  href: o,
+  icon: t,
+  isCurrentPage: e = !1,
+  size: u = "md",
+  className: p,
+  style: y,
+  children: g,
+  ...h
+}, i) {
+  const r = B[u], a = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 6,
+    fontSize: r.fontSize,
+    fontWeight: e ? 500 : 400,
+    color: e ? "var(--brycks-foreground-default)" : "var(--brycks-foreground-muted)",
+    textDecoration: "none",
+    transition: "color 150ms ease-out",
+    cursor: e ? "default" : "pointer",
+    ...y
+  }, f = {
+    width: r.iconSize,
+    height: r.iconSize,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  }, s = {
+    ref: i,
+    className: x("brycks-breadcrumb-item", e && "brycks-breadcrumb-item--current", p),
+    style: a,
+    "aria-current": e ? "page" : void 0,
+    ...h
+  };
+  return l === "a" && o && !e && (s.href = o), e && l === "a" && (s.tabIndex = -1), /* @__PURE__ */ S(
+    l,
+    {
+      ...s,
+      onMouseEnter: (c) => {
+        e || (c.currentTarget.style.color = "var(--brycks-foreground-default)");
+      },
+      onMouseLeave: (c) => {
+        e || (c.currentTarget.style.color = "var(--brycks-foreground-muted)");
+      },
+      children: [
+        t && /* @__PURE__ */ n("span", { style: f, children: t }),
+        g
+      ]
+    }
+  );
+});
+A.displayName = "BreadcrumbItem";
+export {
+  W as Breadcrumb,
+  A as BreadcrumbItem
+};
+//# sourceMappingURL=Breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.js","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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"}

package/dist/components/navigation/Dropdown/Dropdown.cjs

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),r=require("react"),U=require("react-dom"),g=require("../../../utils/styles.cjs"),T=r.createContext(null);function G(){const b=r.useContext(T);if(!b)throw new Error("Dropdown components must be used within a Dropdown");return b}const K=r.forwardRef(function({trigger:t,isOpen:i,defaultOpen:d=!1,onOpenChange:l,placement:c="bottom-start",offset:p=4,closeOnSelect:v=!0,className:x,style:D,children:h,testId:S,...C},E){const[j,R]=r.useState(d),[o,O]=r.useState({top:0,left:0}),[y,m]=r.useState(-1),[I,W]=r.useState(!1),w=r.useRef(null),k=r.useRef(null),n=i??j;r.useEffect(()=>(W(!0),()=>W(!1)),[]);const u=r.useCallback(e=>{i===void 0&&R(e),l?.(e),e||m(-1)},[i,l]),B=r.useCallback(()=>u(!1),[u]);r.useEffect(()=>{if(!n||!w.current||!I)return;const e=()=>{const s=w.current;if(!s)return;const f=s.getBoundingClientRect(),A=window.scrollX,P=window.scrollY;let L=0,N=0;c.startsWith("bottom")?L=f.bottom+P+p:L=f.top+P-p,c.endsWith("start")?N=f.left+A:N=f.right+A,O({top:L,left:N})};return e(),window.addEventListener("resize",e),window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e,!0)}},[n,c,p,I]),r.useEffect(()=>{if(!n)return;const e=s=>{w.current?.contains(s.target)||k.current?.contains(s.target)||u(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[n,u]);const z=r.useCallback(e=>{if(!n){(e.key==="ArrowDown"||e.key==="Enter"||e.key===" ")&&(e.preventDefault(),u(!0));return}const s=k.current?.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])');if(s?.length)switch(e.key){case"ArrowDown":e.preventDefault(),m(f=>(f+1)%s.length);break;case"ArrowUp":e.preventDefault(),m(f=>(f-1+s.length)%s.length);break;case"Home":e.preventDefault(),m(0);break;case"End":e.preventDefault(),m(s.length-1);break;case"Escape":e.preventDefault(),u(!1),w.current?.focus();break;case"Enter":case" ":e.preventDefault(),y>=0&&s[y]?.click();break}},[n,y,u]);r.useEffect(()=>{if(!n||y<0)return;k.current?.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')?.[y]?.focus()},[n,y]);const q=t.props,X=r.cloneElement(t,{ref:w,"aria-haspopup":"menu","aria-expanded":n,onClick:e=>{q.onClick?.(e),u(!n)},onKeyDown:e=>{q.onKeyDown?.(e),z(e)}}),H={position:"absolute",top:o.top,left:c.endsWith("end")?"auto":o.left,right:c.endsWith("end")?window.innerWidth-o.left:"auto",zIndex:"var(--brycks-z-dropdown)",minWidth:w.current?.offsetWidth??160,backgroundColor:"var(--brycks-background-elevated)",border:"1px solid var(--brycks-border-default)",borderRadius:"var(--brycks-radius-lg)",boxShadow:"var(--brycks-shadow-lg)",padding:4,animation:"brycks-dropdown-in 150ms ease-out",outline:"none",...D};return a.jsx(T.Provider,{value:{isOpen:n,close:v?B:()=>{},activeIndex:y,setActiveIndex:m},children:a.jsxs("div",{ref:E,className:g.cx("brycks-dropdown",x),style:{display:"inline-block"},"data-testid":S,...C,children:[X,n&&I&&U.createPortal(a.jsxs(a.Fragment,{children:[a.jsx("style",{children:`
+                @keyframes brycks-dropdown-in {
+                  from { opacity: 0; transform: translateY(-4px); }
+                  to { opacity: 1; transform: translateY(0); }
+                }
+              `}),a.jsx("div",{ref:k,role:"menu",style:H,onKeyDown:z,tabIndex:-1,children:h})]}),document.body)]})})});K.displayName="Dropdown";const M=r.forwardRef(function({disabled:t=!1,icon:i,shortcut:d,destructive:l=!1,className:c,style:p,children:v,onClick:x,...D},h){const{close:S}=G(),C=o=>{t||(x?.(o),S())},E={display:"flex",alignItems:"center",gap:10,padding:"8px 12px",fontSize:14,color:t?"var(--brycks-foreground-disabled)":l?"var(--brycks-error-default)":"var(--brycks-foreground-default)",backgroundColor:"transparent",borderRadius:"var(--brycks-radius-md)",cursor:t?"not-allowed":"pointer",transition:"background-color 100ms ease-out",outline:"none",...p},j={width:16,height:16,color:t?"var(--brycks-foreground-disabled)":l?"var(--brycks-error-default)":"var(--brycks-foreground-muted)",flexShrink:0},R={marginLeft:"auto",fontSize:12,color:"var(--brycks-foreground-muted)",fontFamily:"var(--brycks-font-mono)"};return a.jsxs("div",{ref:h,role:"menuitem","aria-disabled":t,tabIndex:t?-1:0,className:g.cx("brycks-dropdown-item",t&&"brycks-dropdown-item--disabled",c),style:E,onClick:C,onMouseEnter:o=>{t||(o.currentTarget.style.backgroundColor="var(--brycks-background-muted)")},onMouseLeave:o=>{o.currentTarget.style.backgroundColor="transparent"},onFocus:o=>{o.currentTarget.style.backgroundColor="var(--brycks-background-muted)"},onBlur:o=>{o.currentTarget.style.backgroundColor="transparent"},...D,children:[i&&a.jsx("span",{style:j,children:i}),a.jsx("span",{style:{flex:1},children:v}),d&&a.jsx("span",{style:R,children:d})]})});M.displayName="DropdownItem";const Y=r.forwardRef(function({className:t,style:i,...d},l){const c={height:1,backgroundColor:"var(--brycks-border-muted)",margin:"4px 0",...i};return a.jsx("div",{ref:l,role:"separator",className:g.cx("brycks-dropdown-divider",t),style:c,...d})});Y.displayName="DropdownDivider";const F=r.forwardRef(function({className:t,style:i,children:d,...l},c){const p={padding:"8px 12px 4px 12px",fontSize:11,fontWeight:600,color:"var(--brycks-foreground-muted)",textTransform:"uppercase",letterSpacing:"0.05em",...i};return a.jsx("div",{ref:c,className:g.cx("brycks-dropdown-label",t),style:p,...l,children:d})});F.displayName="DropdownLabel";exports.Dropdown=K;exports.DropdownDivider=Y;exports.DropdownItem=M;exports.DropdownLabel=F;
+//# sourceMappingURL=Dropdown.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.cjs","sources":["../../../../src/components/navigation/Dropdown/Dropdown.tsx"],"sourcesContent":["/**\n * Dropdown Component\n *\n * A dropdown menu with keyboard navigation support.\n * Can be used for actions, navigation, or selection.\n */\n\nimport {\n  forwardRef,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  cloneElement,\n  createContext,\n  useContext,\n  type CSSProperties,\n  type ReactNode,\n  type ReactElement,\n  type HTMLAttributes,\n  type KeyboardEvent,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { cx } from '../../../utils/styles'\n\nexport type DropdownPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'\n\ninterface DropdownContextValue {\n  isOpen: boolean\n  close: () => void\n  activeIndex: number\n  setActiveIndex: (index: number) => void\n}\n\nconst DropdownContext = createContext<DropdownContextValue | null>(null)\n\nfunction useDropdownContext() {\n  const context = useContext(DropdownContext)\n  if (!context) {\n    throw new Error('Dropdown components must be used within a Dropdown')\n  }\n  return context\n}\n\nexport interface DropdownProps extends HTMLAttributes<HTMLDivElement> {\n  /** Trigger element */\n  trigger: ReactElement\n  /** Whether the dropdown is open (controlled) */\n  isOpen?: boolean\n  /** Default open state (uncontrolled) */\n  defaultOpen?: boolean\n  /** Callback when open state changes */\n  onOpenChange?: (isOpen: boolean) => void\n  /** Dropdown placement */\n  placement?: DropdownPlacement\n  /** Offset from trigger */\n  offset?: number\n  /** Whether to close on item select */\n  closeOnSelect?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(function Dropdown(\n  {\n    trigger,\n    isOpen: controlledIsOpen,\n    defaultOpen = false,\n    onOpenChange,\n    placement = 'bottom-start',\n    offset = 4,\n    closeOnSelect = true,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const [internalIsOpen, setInternalIsOpen] = useState(defaultOpen)\n  const [position, setPosition] = useState({ top: 0, left: 0 })\n  const [activeIndex, setActiveIndex] = useState(-1)\n  const [mounted, setMounted] = useState(false)\n  const triggerRef = useRef<HTMLElement>(null)\n  const menuRef = useRef<HTMLDivElement>(null)\n\n  const isOpen = controlledIsOpen ?? internalIsOpen\n\n  useEffect(() => {\n    setMounted(true)\n    return () => setMounted(false)\n  }, [])\n\n  const setIsOpen = useCallback(\n    (open: boolean) => {\n      if (controlledIsOpen === undefined) {\n        setInternalIsOpen(open)\n      }\n      onOpenChange?.(open)\n      if (!open) {\n        setActiveIndex(-1)\n      }\n    },\n    [controlledIsOpen, onOpenChange]\n  )\n\n  const close = useCallback(() => setIsOpen(false), [setIsOpen])\n\n  // Calculate position\n  useEffect(() => {\n    if (!isOpen || !triggerRef.current || !mounted) return\n\n    const updatePosition = () => {\n      const trigger = triggerRef.current\n      if (!trigger) return\n\n      const rect = trigger.getBoundingClientRect()\n      const scrollX = window.scrollX\n      const scrollY = window.scrollY\n\n      let top = 0\n      let left = 0\n\n      if (placement.startsWith('bottom')) {\n        top = rect.bottom + scrollY + offset\n      } else {\n        top = rect.top + scrollY - offset\n      }\n\n      if (placement.endsWith('start')) {\n        left = rect.left + scrollX\n      } else {\n        left = rect.right + scrollX\n      }\n\n      setPosition({ top, left })\n    }\n\n    updatePosition()\n    window.addEventListener('resize', updatePosition)\n    window.addEventListener('scroll', updatePosition, true)\n\n    return () => {\n      window.removeEventListener('resize', updatePosition)\n      window.removeEventListener('scroll', updatePosition, true)\n    }\n  }, [isOpen, placement, offset, mounted])\n\n  // Close on outside click\n  useEffect(() => {\n    if (!isOpen) return\n\n    const handleClick = (e: MouseEvent) => {\n      if (\n        triggerRef.current?.contains(e.target as Node) ||\n        menuRef.current?.contains(e.target as Node)\n      ) {\n        return\n      }\n      setIsOpen(false)\n    }\n\n    document.addEventListener('mousedown', handleClick)\n    return () => document.removeEventListener('mousedown', handleClick)\n  }, [isOpen, setIsOpen])\n\n  // Keyboard navigation\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (!isOpen) {\n        if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault()\n          setIsOpen(true)\n        }\n        return\n      }\n\n      const items = menuRef.current?.querySelectorAll<HTMLElement>('[role=\"menuitem\"]:not([aria-disabled=\"true\"])')\n      if (!items?.length) return\n\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault()\n          setActiveIndex((prev) => (prev + 1) % items.length)\n          break\n        case 'ArrowUp':\n          e.preventDefault()\n          setActiveIndex((prev) => (prev - 1 + items.length) % items.length)\n          break\n        case 'Home':\n          e.preventDefault()\n          setActiveIndex(0)\n          break\n        case 'End':\n          e.preventDefault()\n          setActiveIndex(items.length - 1)\n          break\n        case 'Escape':\n          e.preventDefault()\n          setIsOpen(false)\n          triggerRef.current?.focus()\n          break\n        case 'Enter':\n        case ' ':\n          e.preventDefault()\n          if (activeIndex >= 0) {\n            items[activeIndex]?.click()\n          }\n          break\n      }\n    },\n    [isOpen, activeIndex, setIsOpen]\n  )\n\n  // Focus active item\n  useEffect(() => {\n    if (!isOpen || activeIndex < 0) return\n    const items = menuRef.current?.querySelectorAll<HTMLElement>('[role=\"menuitem\"]:not([aria-disabled=\"true\"])')\n    items?.[activeIndex]?.focus()\n  }, [isOpen, activeIndex])\n\n  const triggerProps = trigger.props as Record<string, unknown>\n  const triggerElement = cloneElement(trigger as ReactElement<Record<string, unknown>>, {\n    ref: triggerRef,\n    'aria-haspopup': 'menu',\n    'aria-expanded': isOpen,\n    onClick: (e: React.MouseEvent) => {\n      (triggerProps.onClick as ((e: React.MouseEvent) => void) | undefined)?.(e)\n      setIsOpen(!isOpen)\n    },\n    onKeyDown: (e: KeyboardEvent) => {\n      (triggerProps.onKeyDown as ((e: KeyboardEvent) => void) | undefined)?.(e)\n      handleKeyDown(e)\n    },\n  })\n\n  const menuStyle: CSSProperties = {\n    position: 'absolute',\n    top: position.top,\n    left: placement.endsWith('end') ? 'auto' : position.left,\n    right: placement.endsWith('end') ? window.innerWidth - position.left : 'auto',\n    zIndex: 'var(--brycks-z-dropdown)' as unknown as number,\n    minWidth: triggerRef.current?.offsetWidth ?? 160,\n    backgroundColor: 'var(--brycks-background-elevated)',\n    border: '1px solid var(--brycks-border-default)',\n    borderRadius: 'var(--brycks-radius-lg)',\n    boxShadow: 'var(--brycks-shadow-lg)',\n    padding: 4,\n    animation: 'brycks-dropdown-in 150ms ease-out',\n    outline: 'none',\n    ...style,\n  }\n\n  return (\n    <DropdownContext.Provider value={{ isOpen, close: closeOnSelect ? close : () => {}, activeIndex, setActiveIndex }}>\n      <div\n        ref={ref}\n        className={cx('brycks-dropdown', className)}\n        style={{ display: 'inline-block' }}\n        data-testid={testId}\n        {...props}\n      >\n        {triggerElement}\n        {isOpen && mounted && createPortal(\n          <>\n            <style>\n              {`\n                @keyframes brycks-dropdown-in {\n                  from { opacity: 0; transform: translateY(-4px); }\n                  to { opacity: 1; transform: translateY(0); }\n                }\n              `}\n            </style>\n            <div\n              ref={menuRef}\n              role=\"menu\"\n              style={menuStyle}\n              onKeyDown={handleKeyDown}\n              tabIndex={-1}\n            >\n              {children}\n            </div>\n          </>,\n          document.body\n        )}\n      </div>\n    </DropdownContext.Provider>\n  )\n})\n\nDropdown.displayName = 'Dropdown'\n\n// DropdownItem\nexport interface DropdownItemProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether the item is disabled */\n  disabled?: boolean\n  /** Icon before the label */\n  icon?: ReactNode\n  /** Shortcut text */\n  shortcut?: string\n  /** Whether the item is destructive */\n  destructive?: boolean\n  /** Custom class name */\n  className?: string\n}\n\nexport const DropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(function DropdownItem(\n  { disabled = false, icon, shortcut, destructive = false, className, style, children, onClick, ...props },\n  ref\n) {\n  const { close } = useDropdownContext()\n\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (disabled) return\n    onClick?.(e)\n    close()\n  }\n\n  const itemStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    gap: 10,\n    padding: '8px 12px',\n    fontSize: 14,\n    color: disabled\n      ? 'var(--brycks-foreground-disabled)'\n      : destructive\n      ? 'var(--brycks-error-default)'\n      : 'var(--brycks-foreground-default)',\n    backgroundColor: 'transparent',\n    borderRadius: 'var(--brycks-radius-md)',\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    transition: 'background-color 100ms ease-out',\n    outline: 'none',\n    ...style,\n  }\n\n  const iconStyle: CSSProperties = {\n    width: 16,\n    height: 16,\n    color: disabled\n      ? 'var(--brycks-foreground-disabled)'\n      : destructive\n      ? 'var(--brycks-error-default)'\n      : 'var(--brycks-foreground-muted)',\n    flexShrink: 0,\n  }\n\n  const shortcutStyle: CSSProperties = {\n    marginLeft: 'auto',\n    fontSize: 12,\n    color: 'var(--brycks-foreground-muted)',\n    fontFamily: 'var(--brycks-font-mono)',\n  }\n\n  return (\n    <div\n      ref={ref}\n      role=\"menuitem\"\n      aria-disabled={disabled}\n      tabIndex={disabled ? -1 : 0}\n      className={cx('brycks-dropdown-item', disabled && 'brycks-dropdown-item--disabled', className)}\n      style={itemStyle}\n      onClick={handleClick}\n      onMouseEnter={(e) => {\n        if (!disabled) {\n          e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n        }\n      }}\n      onMouseLeave={(e) => {\n        e.currentTarget.style.backgroundColor = 'transparent'\n      }}\n      onFocus={(e) => {\n        e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n      }}\n      onBlur={(e) => {\n        e.currentTarget.style.backgroundColor = 'transparent'\n      }}\n      {...props}\n    >\n      {icon && <span style={iconStyle}>{icon}</span>}\n      <span style={{ flex: 1 }}>{children}</span>\n      {shortcut && <span style={shortcutStyle}>{shortcut}</span>}\n    </div>\n  )\n})\n\nDropdownItem.displayName = 'DropdownItem'\n\n// DropdownDivider\nexport interface DropdownDividerProps extends HTMLAttributes<HTMLDivElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const DropdownDivider = forwardRef<HTMLDivElement, DropdownDividerProps>(function DropdownDivider(\n  { className, style, ...props },\n  ref\n) {\n  const dividerStyle: CSSProperties = {\n    height: 1,\n    backgroundColor: 'var(--brycks-border-muted)',\n    margin: '4px 0',\n    ...style,\n  }\n\n  return (\n    <div\n      ref={ref}\n      role=\"separator\"\n      className={cx('brycks-dropdown-divider', className)}\n      style={dividerStyle}\n      {...props}\n    />\n  )\n})\n\nDropdownDivider.displayName = 'DropdownDivider'\n\n// DropdownLabel\nexport interface DropdownLabelProps extends HTMLAttributes<HTMLDivElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const DropdownLabel = forwardRef<HTMLDivElement, DropdownLabelProps>(function DropdownLabel(\n  { className, style, children, ...props },\n  ref\n) {\n  const labelStyle: CSSProperties = {\n    padding: '8px 12px 4px 12px',\n    fontSize: 11,\n    fontWeight: 600,\n    color: 'var(--brycks-foreground-muted)',\n    textTransform: 'uppercase',\n    letterSpacing: '0.05em',\n    ...style,\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx('brycks-dropdown-label', className)}\n      style={labelStyle}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nDropdownLabel.displayName = 'DropdownLabel'\n"],"names":["DropdownContext","createContext","useDropdownContext","context","useContext","Dropdown","forwardRef","trigger","controlledIsOpen","defaultOpen","onOpenChange","placement","offset","closeOnSelect","className","style","children","testId","props","ref","internalIsOpen","setInternalIsOpen","useState","position","setPosition","activeIndex","setActiveIndex","mounted","setMounted","triggerRef","useRef","menuRef","isOpen","useEffect","setIsOpen","useCallback","open","close","updatePosition","rect","scrollX","scrollY","top","left","handleClick","e","handleKeyDown","items","prev","triggerProps","triggerElement","cloneElement","menuStyle","jsx","jsxs","cx","createPortal","Fragment","DropdownItem","disabled","icon","shortcut","destructive","onClick","itemStyle","iconStyle","shortcutStyle","DropdownDivider","dividerStyle","DropdownLabel","labelStyle"],"mappings":"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"}