@brycks/core-front 0.3.2 → 0.3.4

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.cjs","sources":["../../../../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":["/**\n * Tabs Component\n *\n * Accessible tab navigation with keyboard support.\n * Supports horizontal and vertical orientations.\n */\n\nimport {\n  forwardRef,\n  useState,\n  useCallback,\n  createContext,\n  useContext,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n  type KeyboardEvent,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type TabsSize = 'sm' | 'md' | 'lg'\nexport type TabsVariant = 'line' | 'enclosed' | 'soft'\nexport type TabsOrientation = 'horizontal' | 'vertical'\n\ninterface TabsContextValue {\n  value: string\n  onChange: (value: string) => void\n  size: TabsSize\n  variant: TabsVariant\n  orientation: TabsOrientation\n}\n\nconst TabsContext = createContext<TabsContextValue | null>(null)\n\nfunction useTabsContext() {\n  const context = useContext(TabsContext)\n  if (!context) {\n    throw new Error('Tabs components must be used within a Tabs')\n  }\n  return context\n}\n\nexport interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Currently selected tab value */\n  value?: string\n  /** Default value (uncontrolled) */\n  defaultValue?: string\n  /** Callback when tab changes */\n  onChange?: (value: string) => void\n  /** Tab size */\n  size?: TabsSize\n  /** Tab variant */\n  variant?: TabsVariant\n  /** Tab orientation */\n  orientation?: TabsOrientation\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n  {\n    value: controlledValue,\n    defaultValue = '',\n    onChange,\n    size = 'md',\n    variant = 'line',\n    orientation = 'horizontal',\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const [internalValue, setInternalValue] = useState(defaultValue)\n  const value = controlledValue ?? internalValue\n\n  const handleChange = useCallback(\n    (newValue: string) => {\n      if (controlledValue === undefined) {\n        setInternalValue(newValue)\n      }\n      onChange?.(newValue)\n    },\n    [controlledValue, onChange]\n  )\n\n  const containerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: orientation === 'vertical' ? 'row' : 'column',\n    gap: orientation === 'vertical' ? 24 : 0,\n    ...style,\n  }\n\n  return (\n    <TabsContext.Provider value={{ value, onChange: handleChange, size, variant, orientation }}>\n      <div\n        ref={ref}\n        className={cx('brycks-tabs', `brycks-tabs--${variant}`, `brycks-tabs--${orientation}`, className)}\n        style={containerStyle}\n        data-testid={testId}\n        {...props}\n      >\n        {children}\n      </div>\n    </TabsContext.Provider>\n  )\n})\n\nTabs.displayName = 'Tabs'\n\n// TabList\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(function TabList(\n  { className, style, children, ...props },\n  ref\n) {\n  const { orientation, variant } = useTabsContext()\n\n  const listStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: orientation === 'vertical' ? 'column' : 'row',\n    gap: variant === 'enclosed' ? 4 : orientation === 'vertical' ? 4 : 0,\n    borderBottom: variant === 'line' && orientation === 'horizontal' ? '1px solid var(--brycks-border-muted)' : undefined,\n    borderRight: variant === 'line' && orientation === 'vertical' ? '1px solid var(--brycks-border-muted)' : undefined,\n    paddingRight: orientation === 'vertical' ? 16 : undefined,\n    backgroundColor: variant === 'enclosed' ? 'var(--brycks-background-muted)' : undefined,\n    padding: variant === 'enclosed' ? 4 : undefined,\n    borderRadius: variant === 'enclosed' ? 'var(--brycks-radius-lg)' : undefined,\n    flexShrink: 0,\n    ...style,\n  }\n\n  return (\n    <div\n      ref={ref}\n      role=\"tablist\"\n      aria-orientation={orientation}\n      className={cx('brycks-tab-list', className)}\n      style={listStyle}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nTabList.displayName = 'TabList'\n\n// Tab\nexport interface TabProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onClick'> {\n  /** Tab value */\n  value: string\n  /** Whether the tab is disabled */\n  disabled?: boolean\n  /** Icon before the label */\n  icon?: ReactNode\n  /** Custom class name */\n  className?: string\n}\n\nconst sizeConfig: Record<TabsSize, { fontSize: number; padding: string; height: number }> = {\n  sm: { fontSize: 13, padding: '6px 12px', height: 32 },\n  md: { fontSize: 14, padding: '8px 16px', height: 40 },\n  lg: { fontSize: 16, padding: '10px 20px', height: 48 },\n}\n\nexport const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab(\n  { value: tabValue, disabled = false, icon, className, style, children, ...props },\n  ref\n) {\n  const { value, onChange, size, variant, orientation } = useTabsContext()\n  const isSelected = value === tabValue\n  const config = sizeConfig[size]\n\n  const handleClick = () => {\n    if (!disabled) {\n      onChange(tabValue)\n    }\n  }\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    if (disabled) return\n\n    const tabs = Array.from(\n      e.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]:not([disabled])') ?? []\n    )\n    const currentIndex = tabs.indexOf(e.currentTarget)\n\n    let newIndex: number | null = null\n\n    if (orientation === 'horizontal') {\n      if (e.key === 'ArrowRight') newIndex = (currentIndex + 1) % tabs.length\n      if (e.key === 'ArrowLeft') newIndex = (currentIndex - 1 + tabs.length) % tabs.length\n    } else {\n      if (e.key === 'ArrowDown') newIndex = (currentIndex + 1) % tabs.length\n      if (e.key === 'ArrowUp') newIndex = (currentIndex - 1 + tabs.length) % tabs.length\n    }\n\n    if (e.key === 'Home') newIndex = 0\n    if (e.key === 'End') newIndex = tabs.length - 1\n\n    if (newIndex !== null) {\n      e.preventDefault()\n      tabs[newIndex]?.focus()\n      tabs[newIndex]?.click()\n    }\n  }\n\n  const getTabStyle = (): CSSProperties => {\n    const base: CSSProperties = {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 8,\n      fontSize: config.fontSize,\n      fontWeight: 500,\n      padding: config.padding,\n      minHeight: config.height,\n      cursor: disabled ? 'not-allowed' : 'pointer',\n      opacity: disabled ? 0.5 : 1,\n      transition: 'all 150ms ease-out',\n      outline: 'none',\n      border: 'none',\n      backgroundColor: 'transparent',\n      whiteSpace: 'nowrap',\n    }\n\n    if (variant === 'line') {\n      return {\n        ...base,\n        color: isSelected ? 'var(--brycks-primary-default)' : 'var(--brycks-foreground-muted)',\n        borderBottom: orientation === 'horizontal' ? `2px solid ${isSelected ? 'var(--brycks-primary-default)' : 'transparent'}` : undefined,\n        borderRight: orientation === 'vertical' ? `2px solid ${isSelected ? 'var(--brycks-primary-default)' : 'transparent'}` : undefined,\n        marginBottom: orientation === 'horizontal' ? -1 : undefined,\n        marginRight: orientation === 'vertical' ? -1 : undefined,\n      }\n    }\n\n    if (variant === 'enclosed') {\n      return {\n        ...base,\n        color: isSelected ? 'var(--brycks-foreground-default)' : 'var(--brycks-foreground-muted)',\n        backgroundColor: isSelected ? 'var(--brycks-background-elevated)' : 'transparent',\n        borderRadius: 'var(--brycks-radius-md)',\n        boxShadow: isSelected ? 'var(--brycks-shadow-sm)' : undefined,\n      }\n    }\n\n    // soft variant\n    return {\n      ...base,\n      color: isSelected ? 'var(--brycks-primary-default)' : 'var(--brycks-foreground-muted)',\n      backgroundColor: isSelected ? 'var(--brycks-primary-50)' : 'transparent',\n      borderRadius: 'var(--brycks-radius-md)',\n    }\n  }\n\n  return (\n    <button\n      ref={ref}\n      role=\"tab\"\n      type=\"button\"\n      aria-selected={isSelected}\n      aria-disabled={disabled}\n      disabled={disabled}\n      tabIndex={isSelected ? 0 : -1}\n      className={cx('brycks-tab', isSelected && 'brycks-tab--selected', className)}\n      style={{ ...getTabStyle(), ...style }}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {icon && <span className=\"brycks-tab-icon\">{icon}</span>}\n      {children}\n    </button>\n  )\n})\n\nTab.displayName = 'Tab'\n\n// TabPanels\nexport interface TabPanelsProps extends HTMLAttributes<HTMLDivElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const TabPanels = forwardRef<HTMLDivElement, TabPanelsProps>(function TabPanels(\n  { className, style, children, ...props },\n  ref\n) {\n  const panelsStyle: CSSProperties = {\n    flex: 1,\n    ...style,\n  }\n\n  return (\n    <div ref={ref} className={cx('brycks-tab-panels', className)} style={panelsStyle} {...props}>\n      {children}\n    </div>\n  )\n})\n\nTabPanels.displayName = 'TabPanels'\n\n// TabPanel\nexport interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {\n  /** Panel value (must match a Tab value) */\n  value: string\n  /** Custom class name */\n  className?: string\n}\n\nexport const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel(\n  { value: panelValue, className, style, children, ...props },\n  ref\n) {\n  const { value } = useTabsContext()\n  const isSelected = value === panelValue\n\n  if (!isSelected) return null\n\n  const panelStyle: CSSProperties = {\n    padding: '16px 0',\n    animation: 'brycks-tab-panel-in 200ms ease-out',\n    ...style,\n  }\n\n  return (\n    <>\n      <style>\n        {`\n          @keyframes brycks-tab-panel-in {\n            from { opacity: 0; }\n            to { opacity: 1; }\n          }\n        `}\n      </style>\n      <div\n        ref={ref}\n        role=\"tabpanel\"\n        tabIndex={0}\n        className={cx('brycks-tab-panel', className)}\n        style={panelStyle}\n        {...props}\n      >\n        {children}\n      </div>\n    </>\n  )\n})\n\nTabPanel.displayName = 'TabPanel'\n"],"names":["TabsContext","createContext","useTabsContext","context","useContext","Tabs","forwardRef","controlledValue","defaultValue","onChange","size","variant","orientation","className","style","children","testId","props","ref","internalValue","setInternalValue","useState","value","handleChange","useCallback","newValue","containerStyle","jsx","cx","TabList","listStyle","sizeConfig","Tab","tabValue","disabled","icon","isSelected","config","handleClick","handleKeyDown","e","tabs","currentIndex","newIndex","getTabStyle","base","jsxs","TabPanels","panelsStyle","TabPanel","panelValue","panelStyle","Fragment"],"mappings":"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"}
+{"version":3,"file":"Tabs.cjs","sources":["../../../../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":["/**\n * Tabs Component\n *\n * Accessible tab navigation with keyboard support.\n * Supports horizontal and vertical orientations.\n */\n\nimport {\n  forwardRef,\n  useState,\n  useCallback,\n  createContext,\n  useContext,\n  type ReactNode,\n  type HTMLAttributes,\n  type KeyboardEvent,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type TabsSize = 'sm' | 'md' | 'lg'\nexport type TabsVariant = 'line' | 'enclosed' | 'soft'\nexport type TabsOrientation = 'horizontal' | 'vertical'\n\ninterface TabsContextValue {\n  value: string\n  onChange: (value: string) => void\n  size: TabsSize\n  variant: TabsVariant\n  orientation: TabsOrientation\n}\n\nconst TabsContext = createContext<TabsContextValue | null>(null)\n\nfunction useTabsContext() {\n  const context = useContext(TabsContext)\n  if (!context) {\n    throw new Error('Tabs components must be used within a Tabs')\n  }\n  return context\n}\n\nexport interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Currently selected tab value */\n  value?: string\n  /** Default value (uncontrolled) */\n  defaultValue?: string\n  /** Callback when tab changes */\n  onChange?: (value: string) => void\n  /** Tab size */\n  size?: TabsSize\n  /** Tab variant */\n  variant?: TabsVariant\n  /** Tab orientation */\n  orientation?: TabsOrientation\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n  {\n    value: controlledValue,\n    defaultValue = '',\n    onChange,\n    size = 'md',\n    variant = 'line',\n    orientation = 'horizontal',\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const [internalValue, setInternalValue] = useState(defaultValue)\n  const value = controlledValue ?? internalValue\n\n  const handleChange = useCallback(\n    (newValue: string) => {\n      if (controlledValue === undefined) {\n        setInternalValue(newValue)\n      }\n      onChange?.(newValue)\n    },\n    [controlledValue, onChange]\n  )\n\n  return (\n    <TabsContext.Provider value={{ value, onChange: handleChange, size, variant, orientation }}>\n      <div\n        ref={ref}\n        className={cx(\n          'brycks-tabs',\n          `brycks-tabs--${variant}`,\n          `brycks-tabs--${orientation}`,\n          `brycks-tabs--${size}`,\n          className\n        )}\n        style={style}\n        data-testid={testId}\n        {...props}\n      >\n        {children}\n      </div>\n    </TabsContext.Provider>\n  )\n})\n\nTabs.displayName = 'Tabs'\n\n// TabList\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(function TabList(\n  { className, style, children, ...props },\n  ref\n) {\n  const { orientation } = useTabsContext()\n\n  return (\n    <div\n      ref={ref}\n      role=\"tablist\"\n      aria-orientation={orientation}\n      className={cx('brycks-tab-list', className)}\n      style={style}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nTabList.displayName = 'TabList'\n\n// Tab\nexport interface TabProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onClick'> {\n  /** Tab value */\n  value: string\n  /** Whether the tab is disabled */\n  disabled?: boolean\n  /** Icon before the label */\n  icon?: ReactNode\n  /** Custom class name */\n  className?: string\n}\n\nexport const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab(\n  { value: tabValue, disabled = false, icon, className, style, children, ...props },\n  ref\n) {\n  const { value, onChange, orientation } = useTabsContext()\n  const isSelected = value === tabValue\n\n  const handleClick = () => {\n    if (!disabled) {\n      onChange(tabValue)\n    }\n  }\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    if (disabled) return\n\n    const tabs = Array.from(\n      e.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]:not([disabled])') ?? []\n    )\n    const currentIndex = tabs.indexOf(e.currentTarget)\n\n    let newIndex: number | null = null\n\n    if (orientation === 'horizontal') {\n      if (e.key === 'ArrowRight') newIndex = (currentIndex + 1) % tabs.length\n      if (e.key === 'ArrowLeft') newIndex = (currentIndex - 1 + tabs.length) % tabs.length\n    } else {\n      if (e.key === 'ArrowDown') newIndex = (currentIndex + 1) % tabs.length\n      if (e.key === 'ArrowUp') newIndex = (currentIndex - 1 + tabs.length) % tabs.length\n    }\n\n    if (e.key === 'Home') newIndex = 0\n    if (e.key === 'End') newIndex = tabs.length - 1\n\n    if (newIndex !== null) {\n      e.preventDefault()\n      tabs[newIndex]?.focus()\n      tabs[newIndex]?.click()\n    }\n  }\n\n  return (\n    <button\n      ref={ref}\n      role=\"tab\"\n      type=\"button\"\n      aria-selected={isSelected}\n      aria-disabled={disabled}\n      disabled={disabled}\n      tabIndex={isSelected ? 0 : -1}\n      className={cx('brycks-tab', isSelected && 'brycks-tab--selected', className)}\n      style={style}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {icon && <span className=\"brycks-tab__icon\">{icon}</span>}\n      {children}\n    </button>\n  )\n})\n\nTab.displayName = 'Tab'\n\n// TabPanels\nexport interface TabPanelsProps extends HTMLAttributes<HTMLDivElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const TabPanels = forwardRef<HTMLDivElement, TabPanelsProps>(function TabPanels(\n  { className, style, children, ...props },\n  ref\n) {\n  return (\n    <div ref={ref} className={cx('brycks-tab-panels', className)} style={style} {...props}>\n      {children}\n    </div>\n  )\n})\n\nTabPanels.displayName = 'TabPanels'\n\n// TabPanel\nexport interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {\n  /** Panel value (must match a Tab value) */\n  value: string\n  /** Custom class name */\n  className?: string\n}\n\nexport const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel(\n  { value: panelValue, className, style, children, ...props },\n  ref\n) {\n  const { value } = useTabsContext()\n  const isSelected = value === panelValue\n\n  if (!isSelected) return null\n\n  return (\n    <div\n      ref={ref}\n      role=\"tabpanel\"\n      tabIndex={0}\n      className={cx('brycks-tab-panel', className)}\n      style={style}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nTabPanel.displayName = 'TabPanel'\n"],"names":["TabsContext","createContext","useTabsContext","context","useContext","Tabs","forwardRef","controlledValue","defaultValue","onChange","size","variant","orientation","className","style","children","testId","props","ref","internalValue","setInternalValue","useState","value","handleChange","useCallback","newValue","jsx","cx","TabList","Tab","tabValue","disabled","icon","isSelected","handleClick","handleKeyDown","e","tabs","currentIndex","newIndex","jsxs","TabPanels","TabPanel","panelValue"],"mappings":"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"}

package/dist/components/navigation/Tabs/Tabs.js

@@ -1,196 +1,126 @@
-import { jsx as y, jsxs as N, Fragment as P } from "react/jsx-runtime";
-import { forwardRef as g, useState as A, useCallback as D, createContext as I, useContext as L } from "react";
-import { cx as v } from "../../../utils/styles.js";
-const R = I(null);
-function z() {
-  const b = L(R);
-  if (!b)
+import { jsx as u, jsxs as N } from "react/jsx-runtime";
+import { forwardRef as y, useState as C, useCallback as P, createContext as A, useContext as I } from "react";
+import { cx as m } from "../../../utils/styles.js";
+const w = A(null);
+function g() {
+  const i = I(w);
+  if (!i)
     throw new Error("Tabs components must be used within a Tabs");
-  return b;
+  return i;
 }
-const $ = g(function({
-  value: n,
+const S = y(function({
+  value: e,
   defaultValue: t = "",
-  onChange: i,
-  size: c = "md",
-  variant: s = "line",
-  orientation: e = "horizontal",
-  className: o,
-  style: p,
-  children: f,
-  testId: T,
-  ...w
-}, k) {
-  const [u, r] = A(t), m = n ?? u, S = D(
-    (h) => {
-      n === void 0 && r(h), i?.(h);
+  onChange: a,
+  size: r = "md",
+  variant: l = "line",
+  orientation: c = "horizontal",
+  className: f,
+  style: T,
+  children: h,
+  testId: k,
+  ...p
+}, d) {
+  const [x, v] = C(t), s = e ?? x, n = P(
+    (b) => {
+      e === void 0 && v(b), a?.(b);
     },
-    [n, i]
-  ), C = {
-    display: "flex",
-    flexDirection: e === "vertical" ? "row" : "column",
-    gap: e === "vertical" ? 24 : 0,
-    ...p
-  };
-  return /* @__PURE__ */ y(R.Provider, { value: { value: m, onChange: S, size: c, variant: s, orientation: e }, children: /* @__PURE__ */ y(
+    [e, a]
+  );
+  return /* @__PURE__ */ u(w.Provider, { value: { value: s, onChange: n, size: r, variant: l, orientation: c }, children: /* @__PURE__ */ u(
     "div",
     {
-      ref: k,
-      className: v("brycks-tabs", `brycks-tabs--${s}`, `brycks-tabs--${e}`, o),
-      style: C,
-      "data-testid": T,
-      ...w,
-      children: f
+      ref: d,
+      className: m(
+        "brycks-tabs",
+        `brycks-tabs--${l}`,
+        `brycks-tabs--${c}`,
+        `brycks-tabs--${r}`,
+        f
+      ),
+      style: T,
+      "data-testid": k,
+      ...p,
+      children: h
     }
   ) });
 });
-$.displayName = "Tabs";
-const j = g(function({ className: n, style: t, children: i, ...c }, s) {
-  const { orientation: e, variant: o } = z(), p = {
-    display: "flex",
-    flexDirection: e === "vertical" ? "column" : "row",
-    gap: o === "enclosed" || e === "vertical" ? 4 : 0,
-    borderBottom: o === "line" && e === "horizontal" ? "1px solid var(--brycks-border-muted)" : void 0,
-    borderRight: o === "line" && e === "vertical" ? "1px solid var(--brycks-border-muted)" : void 0,
-    paddingRight: e === "vertical" ? 16 : void 0,
-    backgroundColor: o === "enclosed" ? "var(--brycks-background-muted)" : void 0,
-    padding: o === "enclosed" ? 4 : void 0,
-    borderRadius: o === "enclosed" ? "var(--brycks-radius-lg)" : void 0,
-    flexShrink: 0,
-    ...t
-  };
-  return /* @__PURE__ */ y(
+S.displayName = "Tabs";
+const D = y(function({ className: e, style: t, children: a, ...r }, l) {
+  const { orientation: c } = g();
+  return /* @__PURE__ */ u(
     "div",
     {
-      ref: s,
+      ref: l,
       role: "tablist",
-      "aria-orientation": e,
-      className: v("brycks-tab-list", n),
-      style: p,
-      ...c,
-      children: i
+      "aria-orientation": c,
+      className: m("brycks-tab-list", e),
+      style: t,
+      ...r,
+      children: a
     }
   );
 });
-j.displayName = "TabList";
-const B = {
-  sm: { fontSize: 13, padding: "6px 12px", height: 32 },
-  md: { fontSize: 14, padding: "8px 16px", height: 40 },
-  lg: { fontSize: 16, padding: "10px 20px", height: 48 }
-}, E = g(function({ value: n, disabled: t = !1, icon: i, className: c, style: s, children: e, ...o }, p) {
-  const { value: f, onChange: T, size: w, variant: k, orientation: u } = z(), r = f === n, m = B[w], S = () => {
-    t || T(n);
-  }, C = (a) => {
+D.displayName = "TabList";
+const L = y(function({ value: e, disabled: t = !1, icon: a, className: r, style: l, children: c, ...f }, T) {
+  const { value: h, onChange: k, orientation: p } = g(), d = h === e, x = () => {
+    t || k(e);
+  }, v = (s) => {
     if (t) return;
-    const l = Array.from(
-      a.currentTarget.parentElement?.querySelectorAll('[role="tab"]:not([disabled])') ?? []
-    ), x = l.indexOf(a.currentTarget);
-    let d = null;
-    u === "horizontal" ? (a.key === "ArrowRight" && (d = (x + 1) % l.length), a.key === "ArrowLeft" && (d = (x - 1 + l.length) % l.length)) : (a.key === "ArrowDown" && (d = (x + 1) % l.length), a.key === "ArrowUp" && (d = (x - 1 + l.length) % l.length)), a.key === "Home" && (d = 0), a.key === "End" && (d = l.length - 1), d !== null && (a.preventDefault(), l[d]?.focus(), l[d]?.click());
-  }, h = () => {
-    const a = {
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      gap: 8,
-      fontSize: m.fontSize,
-      fontWeight: 500,
-      padding: m.padding,
-      minHeight: m.height,
-      cursor: t ? "not-allowed" : "pointer",
-      opacity: t ? 0.5 : 1,
-      transition: "all 150ms ease-out",
-      outline: "none",
-      border: "none",
-      backgroundColor: "transparent",
-      whiteSpace: "nowrap"
-    };
-    return k === "line" ? {
-      ...a,
-      color: r ? "var(--brycks-primary-default)" : "var(--brycks-foreground-muted)",
-      borderBottom: u === "horizontal" ? `2px solid ${r ? "var(--brycks-primary-default)" : "transparent"}` : void 0,
-      borderRight: u === "vertical" ? `2px solid ${r ? "var(--brycks-primary-default)" : "transparent"}` : void 0,
-      marginBottom: u === "horizontal" ? -1 : void 0,
-      marginRight: u === "vertical" ? -1 : void 0
-    } : k === "enclosed" ? {
-      ...a,
-      color: r ? "var(--brycks-foreground-default)" : "var(--brycks-foreground-muted)",
-      backgroundColor: r ? "var(--brycks-background-elevated)" : "transparent",
-      borderRadius: "var(--brycks-radius-md)",
-      boxShadow: r ? "var(--brycks-shadow-sm)" : void 0
-    } : {
-      ...a,
-      color: r ? "var(--brycks-primary-default)" : "var(--brycks-foreground-muted)",
-      backgroundColor: r ? "var(--brycks-primary-50)" : "transparent",
-      borderRadius: "var(--brycks-radius-md)"
-    };
+    const n = Array.from(
+      s.currentTarget.parentElement?.querySelectorAll('[role="tab"]:not([disabled])') ?? []
+    ), b = n.indexOf(s.currentTarget);
+    let o = null;
+    p === "horizontal" ? (s.key === "ArrowRight" && (o = (b + 1) % n.length), s.key === "ArrowLeft" && (o = (b - 1 + n.length) % n.length)) : (s.key === "ArrowDown" && (o = (b + 1) % n.length), s.key === "ArrowUp" && (o = (b - 1 + n.length) % n.length)), s.key === "Home" && (o = 0), s.key === "End" && (o = n.length - 1), o !== null && (s.preventDefault(), n[o]?.focus(), n[o]?.click());
   };
   return /* @__PURE__ */ N(
     "button",
     {
-      ref: p,
+      ref: T,
       role: "tab",
       type: "button",
-      "aria-selected": r,
+      "aria-selected": d,
       "aria-disabled": t,
       disabled: t,
-      tabIndex: r ? 0 : -1,
-      className: v("brycks-tab", r && "brycks-tab--selected", c),
-      style: { ...h(), ...s },
-      onClick: S,
-      onKeyDown: C,
-      ...o,
+      tabIndex: d ? 0 : -1,
+      className: m("brycks-tab", d && "brycks-tab--selected", r),
+      style: l,
+      onClick: x,
+      onKeyDown: v,
+      ...f,
       children: [
-        i && /* @__PURE__ */ y("span", { className: "brycks-tab-icon", children: i }),
-        e
+        a && /* @__PURE__ */ u("span", { className: "brycks-tab__icon", children: a }),
+        c
       ]
     }
   );
 });
-E.displayName = "Tab";
-const H = g(function({ className: n, style: t, children: i, ...c }, s) {
-  const e = {
-    flex: 1,
-    ...t
-  };
-  return /* @__PURE__ */ y("div", { ref: s, className: v("brycks-tab-panels", n), style: e, ...c, children: i });
+L.displayName = "Tab";
+const E = y(function({ className: e, style: t, children: a, ...r }, l) {
+  return /* @__PURE__ */ u("div", { ref: l, className: m("brycks-tab-panels", e), style: t, ...r, children: a });
 });
-H.displayName = "TabPanels";
-const K = g(function({ value: n, className: t, style: i, children: c, ...s }, e) {
-  const { value: o } = z();
-  if (!(o === n)) return null;
-  const f = {
-    padding: "16px 0",
-    animation: "brycks-tab-panel-in 200ms ease-out",
-    ...i
-  };
-  return /* @__PURE__ */ N(P, { children: [
-    /* @__PURE__ */ y("style", { children: `
-          @keyframes brycks-tab-panel-in {
-            from { opacity: 0; }
-            to { opacity: 1; }
-          }
-        ` }),
-    /* @__PURE__ */ y(
-      "div",
-      {
-        ref: e,
-        role: "tabpanel",
-        tabIndex: 0,
-        className: v("brycks-tab-panel", t),
-        style: f,
-        ...s,
-        children: c
-      }
-    )
-  ] });
+E.displayName = "TabPanels";
+const $ = y(function({ value: e, className: t, style: a, children: r, ...l }, c) {
+  const { value: f } = g();
+  return f === e ? /* @__PURE__ */ u(
+    "div",
+    {
+      ref: c,
+      role: "tabpanel",
+      tabIndex: 0,
+      className: m("brycks-tab-panel", t),
+      style: a,
+      ...l,
+      children: r
+    }
+  ) : null;
 });
-K.displayName = "TabPanel";
+$.displayName = "TabPanel";
 export {
-  E as Tab,
-  j as TabList,
-  K as TabPanel,
-  H as TabPanels,
-  $ as Tabs
+  L as Tab,
+  D as TabList,
+  $ as TabPanel,
+  E as TabPanels,
+  S as Tabs
 };
 //# sourceMappingURL=Tabs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":["/**\n * Tabs Component\n *\n * Accessible tab navigation with keyboard support.\n * Supports horizontal and vertical orientations.\n */\n\nimport {\n  forwardRef,\n  useState,\n  useCallback,\n  createContext,\n  useContext,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n  type KeyboardEvent,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type TabsSize = 'sm' | 'md' | 'lg'\nexport type TabsVariant = 'line' | 'enclosed' | 'soft'\nexport type TabsOrientation = 'horizontal' | 'vertical'\n\ninterface TabsContextValue {\n  value: string\n  onChange: (value: string) => void\n  size: TabsSize\n  variant: TabsVariant\n  orientation: TabsOrientation\n}\n\nconst TabsContext = createContext<TabsContextValue | null>(null)\n\nfunction useTabsContext() {\n  const context = useContext(TabsContext)\n  if (!context) {\n    throw new Error('Tabs components must be used within a Tabs')\n  }\n  return context\n}\n\nexport interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Currently selected tab value */\n  value?: string\n  /** Default value (uncontrolled) */\n  defaultValue?: string\n  /** Callback when tab changes */\n  onChange?: (value: string) => void\n  /** Tab size */\n  size?: TabsSize\n  /** Tab variant */\n  variant?: TabsVariant\n  /** Tab orientation */\n  orientation?: TabsOrientation\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n  {\n    value: controlledValue,\n    defaultValue = '',\n    onChange,\n    size = 'md',\n    variant = 'line',\n    orientation = 'horizontal',\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const [internalValue, setInternalValue] = useState(defaultValue)\n  const value = controlledValue ?? internalValue\n\n  const handleChange = useCallback(\n    (newValue: string) => {\n      if (controlledValue === undefined) {\n        setInternalValue(newValue)\n      }\n      onChange?.(newValue)\n    },\n    [controlledValue, onChange]\n  )\n\n  const containerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: orientation === 'vertical' ? 'row' : 'column',\n    gap: orientation === 'vertical' ? 24 : 0,\n    ...style,\n  }\n\n  return (\n    <TabsContext.Provider value={{ value, onChange: handleChange, size, variant, orientation }}>\n      <div\n        ref={ref}\n        className={cx('brycks-tabs', `brycks-tabs--${variant}`, `brycks-tabs--${orientation}`, className)}\n        style={containerStyle}\n        data-testid={testId}\n        {...props}\n      >\n        {children}\n      </div>\n    </TabsContext.Provider>\n  )\n})\n\nTabs.displayName = 'Tabs'\n\n// TabList\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(function TabList(\n  { className, style, children, ...props },\n  ref\n) {\n  const { orientation, variant } = useTabsContext()\n\n  const listStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: orientation === 'vertical' ? 'column' : 'row',\n    gap: variant === 'enclosed' ? 4 : orientation === 'vertical' ? 4 : 0,\n    borderBottom: variant === 'line' && orientation === 'horizontal' ? '1px solid var(--brycks-border-muted)' : undefined,\n    borderRight: variant === 'line' && orientation === 'vertical' ? '1px solid var(--brycks-border-muted)' : undefined,\n    paddingRight: orientation === 'vertical' ? 16 : undefined,\n    backgroundColor: variant === 'enclosed' ? 'var(--brycks-background-muted)' : undefined,\n    padding: variant === 'enclosed' ? 4 : undefined,\n    borderRadius: variant === 'enclosed' ? 'var(--brycks-radius-lg)' : undefined,\n    flexShrink: 0,\n    ...style,\n  }\n\n  return (\n    <div\n      ref={ref}\n      role=\"tablist\"\n      aria-orientation={orientation}\n      className={cx('brycks-tab-list', className)}\n      style={listStyle}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nTabList.displayName = 'TabList'\n\n// Tab\nexport interface TabProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onClick'> {\n  /** Tab value */\n  value: string\n  /** Whether the tab is disabled */\n  disabled?: boolean\n  /** Icon before the label */\n  icon?: ReactNode\n  /** Custom class name */\n  className?: string\n}\n\nconst sizeConfig: Record<TabsSize, { fontSize: number; padding: string; height: number }> = {\n  sm: { fontSize: 13, padding: '6px 12px', height: 32 },\n  md: { fontSize: 14, padding: '8px 16px', height: 40 },\n  lg: { fontSize: 16, padding: '10px 20px', height: 48 },\n}\n\nexport const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab(\n  { value: tabValue, disabled = false, icon, className, style, children, ...props },\n  ref\n) {\n  const { value, onChange, size, variant, orientation } = useTabsContext()\n  const isSelected = value === tabValue\n  const config = sizeConfig[size]\n\n  const handleClick = () => {\n    if (!disabled) {\n      onChange(tabValue)\n    }\n  }\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    if (disabled) return\n\n    const tabs = Array.from(\n      e.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]:not([disabled])') ?? []\n    )\n    const currentIndex = tabs.indexOf(e.currentTarget)\n\n    let newIndex: number | null = null\n\n    if (orientation === 'horizontal') {\n      if (e.key === 'ArrowRight') newIndex = (currentIndex + 1) % tabs.length\n      if (e.key === 'ArrowLeft') newIndex = (currentIndex - 1 + tabs.length) % tabs.length\n    } else {\n      if (e.key === 'ArrowDown') newIndex = (currentIndex + 1) % tabs.length\n      if (e.key === 'ArrowUp') newIndex = (currentIndex - 1 + tabs.length) % tabs.length\n    }\n\n    if (e.key === 'Home') newIndex = 0\n    if (e.key === 'End') newIndex = tabs.length - 1\n\n    if (newIndex !== null) {\n      e.preventDefault()\n      tabs[newIndex]?.focus()\n      tabs[newIndex]?.click()\n    }\n  }\n\n  const getTabStyle = (): CSSProperties => {\n    const base: CSSProperties = {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 8,\n      fontSize: config.fontSize,\n      fontWeight: 500,\n      padding: config.padding,\n      minHeight: config.height,\n      cursor: disabled ? 'not-allowed' : 'pointer',\n      opacity: disabled ? 0.5 : 1,\n      transition: 'all 150ms ease-out',\n      outline: 'none',\n      border: 'none',\n      backgroundColor: 'transparent',\n      whiteSpace: 'nowrap',\n    }\n\n    if (variant === 'line') {\n      return {\n        ...base,\n        color: isSelected ? 'var(--brycks-primary-default)' : 'var(--brycks-foreground-muted)',\n        borderBottom: orientation === 'horizontal' ? `2px solid ${isSelected ? 'var(--brycks-primary-default)' : 'transparent'}` : undefined,\n        borderRight: orientation === 'vertical' ? `2px solid ${isSelected ? 'var(--brycks-primary-default)' : 'transparent'}` : undefined,\n        marginBottom: orientation === 'horizontal' ? -1 : undefined,\n        marginRight: orientation === 'vertical' ? -1 : undefined,\n      }\n    }\n\n    if (variant === 'enclosed') {\n      return {\n        ...base,\n        color: isSelected ? 'var(--brycks-foreground-default)' : 'var(--brycks-foreground-muted)',\n        backgroundColor: isSelected ? 'var(--brycks-background-elevated)' : 'transparent',\n        borderRadius: 'var(--brycks-radius-md)',\n        boxShadow: isSelected ? 'var(--brycks-shadow-sm)' : undefined,\n      }\n    }\n\n    // soft variant\n    return {\n      ...base,\n      color: isSelected ? 'var(--brycks-primary-default)' : 'var(--brycks-foreground-muted)',\n      backgroundColor: isSelected ? 'var(--brycks-primary-50)' : 'transparent',\n      borderRadius: 'var(--brycks-radius-md)',\n    }\n  }\n\n  return (\n    <button\n      ref={ref}\n      role=\"tab\"\n      type=\"button\"\n      aria-selected={isSelected}\n      aria-disabled={disabled}\n      disabled={disabled}\n      tabIndex={isSelected ? 0 : -1}\n      className={cx('brycks-tab', isSelected && 'brycks-tab--selected', className)}\n      style={{ ...getTabStyle(), ...style }}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {icon && <span className=\"brycks-tab-icon\">{icon}</span>}\n      {children}\n    </button>\n  )\n})\n\nTab.displayName = 'Tab'\n\n// TabPanels\nexport interface TabPanelsProps extends HTMLAttributes<HTMLDivElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const TabPanels = forwardRef<HTMLDivElement, TabPanelsProps>(function TabPanels(\n  { className, style, children, ...props },\n  ref\n) {\n  const panelsStyle: CSSProperties = {\n    flex: 1,\n    ...style,\n  }\n\n  return (\n    <div ref={ref} className={cx('brycks-tab-panels', className)} style={panelsStyle} {...props}>\n      {children}\n    </div>\n  )\n})\n\nTabPanels.displayName = 'TabPanels'\n\n// TabPanel\nexport interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {\n  /** Panel value (must match a Tab value) */\n  value: string\n  /** Custom class name */\n  className?: string\n}\n\nexport const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel(\n  { value: panelValue, className, style, children, ...props },\n  ref\n) {\n  const { value } = useTabsContext()\n  const isSelected = value === panelValue\n\n  if (!isSelected) return null\n\n  const panelStyle: CSSProperties = {\n    padding: '16px 0',\n    animation: 'brycks-tab-panel-in 200ms ease-out',\n    ...style,\n  }\n\n  return (\n    <>\n      <style>\n        {`\n          @keyframes brycks-tab-panel-in {\n            from { opacity: 0; }\n            to { opacity: 1; }\n          }\n        `}\n      </style>\n      <div\n        ref={ref}\n        role=\"tabpanel\"\n        tabIndex={0}\n        className={cx('brycks-tab-panel', className)}\n        style={panelStyle}\n        {...props}\n      >\n        {children}\n      </div>\n    </>\n  )\n})\n\nTabPanel.displayName = 'TabPanel'\n"],"names":["TabsContext","createContext","useTabsContext","context","useContext","Tabs","forwardRef","controlledValue","defaultValue","onChange","size","variant","orientation","className","style","children","testId","props","ref","internalValue","setInternalValue","useState","value","handleChange","useCallback","newValue","containerStyle","jsx","cx","TabList","listStyle","sizeConfig","Tab","tabValue","disabled","icon","isSelected","config","handleClick","handleKeyDown","e","tabs","currentIndex","newIndex","getTabStyle","base","jsxs","TabPanels","panelsStyle","TabPanel","panelValue","panelStyle","Fragment"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","sources":["../../../../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":["/**\n * Tabs Component\n *\n * Accessible tab navigation with keyboard support.\n * Supports horizontal and vertical orientations.\n */\n\nimport {\n  forwardRef,\n  useState,\n  useCallback,\n  createContext,\n  useContext,\n  type ReactNode,\n  type HTMLAttributes,\n  type KeyboardEvent,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type TabsSize = 'sm' | 'md' | 'lg'\nexport type TabsVariant = 'line' | 'enclosed' | 'soft'\nexport type TabsOrientation = 'horizontal' | 'vertical'\n\ninterface TabsContextValue {\n  value: string\n  onChange: (value: string) => void\n  size: TabsSize\n  variant: TabsVariant\n  orientation: TabsOrientation\n}\n\nconst TabsContext = createContext<TabsContextValue | null>(null)\n\nfunction useTabsContext() {\n  const context = useContext(TabsContext)\n  if (!context) {\n    throw new Error('Tabs components must be used within a Tabs')\n  }\n  return context\n}\n\nexport interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Currently selected tab value */\n  value?: string\n  /** Default value (uncontrolled) */\n  defaultValue?: string\n  /** Callback when tab changes */\n  onChange?: (value: string) => void\n  /** Tab size */\n  size?: TabsSize\n  /** Tab variant */\n  variant?: TabsVariant\n  /** Tab orientation */\n  orientation?: TabsOrientation\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n  {\n    value: controlledValue,\n    defaultValue = '',\n    onChange,\n    size = 'md',\n    variant = 'line',\n    orientation = 'horizontal',\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const [internalValue, setInternalValue] = useState(defaultValue)\n  const value = controlledValue ?? internalValue\n\n  const handleChange = useCallback(\n    (newValue: string) => {\n      if (controlledValue === undefined) {\n        setInternalValue(newValue)\n      }\n      onChange?.(newValue)\n    },\n    [controlledValue, onChange]\n  )\n\n  return (\n    <TabsContext.Provider value={{ value, onChange: handleChange, size, variant, orientation }}>\n      <div\n        ref={ref}\n        className={cx(\n          'brycks-tabs',\n          `brycks-tabs--${variant}`,\n          `brycks-tabs--${orientation}`,\n          `brycks-tabs--${size}`,\n          className\n        )}\n        style={style}\n        data-testid={testId}\n        {...props}\n      >\n        {children}\n      </div>\n    </TabsContext.Provider>\n  )\n})\n\nTabs.displayName = 'Tabs'\n\n// TabList\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(function TabList(\n  { className, style, children, ...props },\n  ref\n) {\n  const { orientation } = useTabsContext()\n\n  return (\n    <div\n      ref={ref}\n      role=\"tablist\"\n      aria-orientation={orientation}\n      className={cx('brycks-tab-list', className)}\n      style={style}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nTabList.displayName = 'TabList'\n\n// Tab\nexport interface TabProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onClick'> {\n  /** Tab value */\n  value: string\n  /** Whether the tab is disabled */\n  disabled?: boolean\n  /** Icon before the label */\n  icon?: ReactNode\n  /** Custom class name */\n  className?: string\n}\n\nexport const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab(\n  { value: tabValue, disabled = false, icon, className, style, children, ...props },\n  ref\n) {\n  const { value, onChange, orientation } = useTabsContext()\n  const isSelected = value === tabValue\n\n  const handleClick = () => {\n    if (!disabled) {\n      onChange(tabValue)\n    }\n  }\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    if (disabled) return\n\n    const tabs = Array.from(\n      e.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]:not([disabled])') ?? []\n    )\n    const currentIndex = tabs.indexOf(e.currentTarget)\n\n    let newIndex: number | null = null\n\n    if (orientation === 'horizontal') {\n      if (e.key === 'ArrowRight') newIndex = (currentIndex + 1) % tabs.length\n      if (e.key === 'ArrowLeft') newIndex = (currentIndex - 1 + tabs.length) % tabs.length\n    } else {\n      if (e.key === 'ArrowDown') newIndex = (currentIndex + 1) % tabs.length\n      if (e.key === 'ArrowUp') newIndex = (currentIndex - 1 + tabs.length) % tabs.length\n    }\n\n    if (e.key === 'Home') newIndex = 0\n    if (e.key === 'End') newIndex = tabs.length - 1\n\n    if (newIndex !== null) {\n      e.preventDefault()\n      tabs[newIndex]?.focus()\n      tabs[newIndex]?.click()\n    }\n  }\n\n  return (\n    <button\n      ref={ref}\n      role=\"tab\"\n      type=\"button\"\n      aria-selected={isSelected}\n      aria-disabled={disabled}\n      disabled={disabled}\n      tabIndex={isSelected ? 0 : -1}\n      className={cx('brycks-tab', isSelected && 'brycks-tab--selected', className)}\n      style={style}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {icon && <span className=\"brycks-tab__icon\">{icon}</span>}\n      {children}\n    </button>\n  )\n})\n\nTab.displayName = 'Tab'\n\n// TabPanels\nexport interface TabPanelsProps extends HTMLAttributes<HTMLDivElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const TabPanels = forwardRef<HTMLDivElement, TabPanelsProps>(function TabPanels(\n  { className, style, children, ...props },\n  ref\n) {\n  return (\n    <div ref={ref} className={cx('brycks-tab-panels', className)} style={style} {...props}>\n      {children}\n    </div>\n  )\n})\n\nTabPanels.displayName = 'TabPanels'\n\n// TabPanel\nexport interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {\n  /** Panel value (must match a Tab value) */\n  value: string\n  /** Custom class name */\n  className?: string\n}\n\nexport const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel(\n  { value: panelValue, className, style, children, ...props },\n  ref\n) {\n  const { value } = useTabsContext()\n  const isSelected = value === panelValue\n\n  if (!isSelected) return null\n\n  return (\n    <div\n      ref={ref}\n      role=\"tabpanel\"\n      tabIndex={0}\n      className={cx('brycks-tab-panel', className)}\n      style={style}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nTabPanel.displayName = 'TabPanel'\n"],"names":["TabsContext","createContext","useTabsContext","context","useContext","Tabs","forwardRef","controlledValue","defaultValue","onChange","size","variant","orientation","className","style","children","testId","props","ref","internalValue","setInternalValue","useState","value","handleChange","useCallback","newValue","jsx","cx","TabList","Tab","tabValue","disabled","icon","isSelected","handleClick","handleKeyDown","e","tabs","currentIndex","newIndex","jsxs","TabPanels","TabPanel","panelValue"],"mappings":"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"}

package/dist/components/primitives/Button/Button.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("react"),S=require("./Button.styles.cjs"),W=require("../../../utils/styles.cjs"),_=u.memo(function({size:s}){return t.jsxs("svg",{width:s,height:s,viewBox:"0 0 24 24",fill:"none",className:"brycks-animate-spin","aria-hidden":"true",children:[t.jsx("circle",{cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeDasharray:"31.4 31.4",opacity:"0.25"}),t.jsx("circle",{cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeDasharray:"31.4 31.4",strokeDashoffset:"62.8",style:{transform:"rotate(-90deg)",transformOrigin:"center"}})]})}),A=({as:c,variant:s="solid",intent:b="primary",size:l="md",fullWidth:p,isLoading:e,isDisabled:v,leftIcon:h,rightIcon:f,isIconOnly:r,className:w,style:M,children:x,testId:g,onMouseEnter:z,onMouseLeave:C,onMouseDown:D,onMouseUp:N,...k},q)=>{const m=c||"button",[P,B]=u.useState(!1),[R,d]=u.useState(!1),o=v||e,a=S.getButtonStyles({variant:s,intent:b,size:l,fullWidth:p,isIconOnly:r}),$={...a.base,...P&&!o?a.hover:{},...R&&!o?a.active:{},...o?a.disabled:{},...e?a.loading:{},...M},i=S.sizeConfig[l],I=n=>{B(!0),z?.(n)},E=n=>{B(!1),d(!1),C?.(n)},H=n=>{d(!0),D?.(n)},U=n=>{d(!1),N?.(n)},T=W.cx("brycks-button",`brycks-button--${s}`,`brycks-button--${b}`,`brycks-button--${l}`,p&&"brycks-button--full-width",r&&"brycks-button--icon-only",e&&"brycks-button--loading",o&&"brycks-button--disabled",w),V=m==="button"||c===void 0?{type:k.type??"button",disabled:o}:{"aria-disabled":o||void 0,role:"button",tabIndex:o?-1:0};return t.jsxs(m,{ref:q,className:T,style:$,"data-testid":g,onMouseEnter:I,onMouseLeave:E,onMouseDown:H,onMouseUp:U,...V,...k,children:[e&&t.jsx("span",{style:{display:"inline-flex",position:r?"absolute":"relative"},children:t.jsx(_,{size:i.iconSize})}),!e&&h&&t.jsx("span",{style:{display:"inline-flex",width:i.iconSize,height:i.iconSize},children:h}),!r&&t.jsx("span",{style:{opacity:e&&!r?.5:1},children:x}),!e&&f&&t.jsx("span",{style:{display:"inline-flex",width:i.iconSize,height:i.iconSize},children:f}),r&&!e&&x]})},y=u.forwardRef(A);y.displayName="Button";const F=(c,s)=>t.jsx(y,{ref:s,isIconOnly:!0,...c}),j=u.forwardRef(F);j.displayName="IconButton";exports.Button=y;exports.IconButton=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),c=require("react"),z=require("./Button.styles.cjs"),C=require("../../../utils/styles.cjs"),N=c.memo(function({size:n}){return t.jsxs("svg",{width:n,height:n,viewBox:"0 0 24 24",fill:"none",className:"brycks-animate-spin","aria-hidden":"true",children:[t.jsx("circle",{cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeDasharray:"31.4 31.4",opacity:"0.25"}),t.jsx("circle",{cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeDasharray:"31.4 31.4",strokeDashoffset:"62.8",style:{transform:"rotate(-90deg)",transformOrigin:"center"}})]})}),q=({as:o,variant:n="solid",intent:h="primary",size:l="md",fullWidth:k,isLoading:e,isDisabled:f,leftIcon:u,rightIcon:d,isIconOnly:s,className:m,style:j,children:y,testId:B,...b},S)=>{const p=o||"button",i=f||e,r=z.sizeConfig[l],w={display:"inline-flex",alignItems:"center",justifyContent:"center",...j},g=C.cx("brycks-button",`brycks-button--${n}`,`brycks-button--${h}`,`brycks-button--${l}`,k&&"brycks-button--full-width",s&&"brycks-button--icon-only",e&&"brycks-button--loading",i&&"brycks-button--disabled",m),v=p==="button"||o===void 0?{type:b.type??"button",disabled:i}:{"aria-disabled":i||void 0,role:"button",tabIndex:i?-1:0};return t.jsxs(p,{ref:S,className:g,style:w,"data-testid":B,...v,...b,children:[e&&t.jsx("span",{style:{display:"inline-flex",position:s?"absolute":"relative"},children:t.jsx(N,{size:r.iconSize})}),!e&&u&&t.jsx("span",{style:{display:"inline-flex",width:r.iconSize,height:r.iconSize},children:u}),!s&&t.jsx("span",{style:{opacity:e&&!s?.5:1},children:y}),!e&&d&&t.jsx("span",{style:{display:"inline-flex",width:r.iconSize,height:r.iconSize},children:d}),s&&!e&&y]})},a=c.forwardRef(q);a.displayName="Button";const R=(o,n)=>t.jsx(a,{ref:n,isIconOnly:!0,...o}),x=c.forwardRef(R);x.displayName="IconButton";exports.Button=a;exports.IconButton=x;
 //# sourceMappingURL=Button.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../../src/components/primitives/Button/Button.tsx"],"sourcesContent":["/**\r\n * Button Component\r\n *\r\n * A versatile, polymorphic button component with multiple variants,\r\n * sizes, and states. Designed with Apple-inspired aesthetics -\r\n * smooth transitions, tactile feedback, and refined visual details.\r\n */\r\n\r\nimport React, {\r\n  forwardRef,\r\n  useState,\r\n  type ElementType,\r\n  type ComponentPropsWithRef,\r\n  type CSSProperties,\r\n} from 'react'\r\nimport type { ButtonProps } from './Button.types'\r\nimport { getButtonStyles, sizeConfig } from './Button.styles'\r\nimport { cx } from '../../../utils/styles'\r\n\r\ninterface ButtonComponent {\r\n  <E extends ElementType = 'button'>(\r\n    props: ButtonProps<E> & { ref?: ComponentPropsWithRef<E>['ref'] }\r\n  ): React.JSX.Element | null\r\n  displayName?: string\r\n}\r\n\r\n/** Loading spinner component - uses global CSS keyframes */\r\nconst LoadingSpinner = React.memo(function LoadingSpinner({ size }: { size: number }) {\r\n  return (\r\n    <svg\r\n      width={size}\r\n      height={size}\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      className=\"brycks-animate-spin\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      <circle\r\n        cx=\"12\"\r\n        cy=\"12\"\r\n        r=\"10\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"2\"\r\n        strokeLinecap=\"round\"\r\n        strokeDasharray=\"31.4 31.4\"\r\n        opacity=\"0.25\"\r\n      />\r\n      <circle\r\n        cx=\"12\"\r\n        cy=\"12\"\r\n        r=\"10\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"2\"\r\n        strokeLinecap=\"round\"\r\n        strokeDasharray=\"31.4 31.4\"\r\n        strokeDashoffset=\"62.8\"\r\n        style={{ transform: 'rotate(-90deg)', transformOrigin: 'center' }}\r\n      />\r\n    </svg>\r\n  )\r\n})\r\n\r\nconst ButtonInner = <E extends ElementType = 'button'>(\r\n  {\r\n    as,\r\n    variant = 'solid',\r\n    intent = 'primary',\r\n    size = 'md',\r\n    fullWidth,\r\n    isLoading,\r\n    isDisabled,\r\n    leftIcon,\r\n    rightIcon,\r\n    isIconOnly,\r\n    className,\r\n    style,\r\n    children,\r\n    testId,\r\n    onMouseEnter,\r\n    onMouseLeave,\r\n    onMouseDown,\r\n    onMouseUp,\r\n    ...props\r\n  }: ButtonProps<E>,\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  const Component = (as || 'button') as ElementType\r\n  const [isHovered, setIsHovered] = useState(false)\r\n  const [isPressed, setIsPressed] = useState(false)\r\n\r\n  const disabled = isDisabled || isLoading\r\n\r\n  const styles = getButtonStyles({\r\n    variant,\r\n    intent,\r\n    size,\r\n    fullWidth,\r\n    isIconOnly,\r\n    isDisabled: disabled,\r\n    isLoading,\r\n  })\r\n\r\n  // Build final style object\r\n  const computedStyle: CSSProperties = {\r\n    ...styles.base,\r\n    ...(isHovered && !disabled ? styles.hover : {}),\r\n    ...(isPressed && !disabled ? styles.active : {}),\r\n    ...(disabled ? styles.disabled : {}),\r\n    ...(isLoading ? styles.loading : {}),\r\n    ...style,\r\n  }\r\n\r\n  const sizeValues = sizeConfig[size]\r\n\r\n  const handleMouseEnter = (e: React.MouseEvent) => {\r\n    setIsHovered(true)\r\n    onMouseEnter?.(e as never)\r\n  }\r\n\r\n  const handleMouseLeave = (e: React.MouseEvent) => {\r\n    setIsHovered(false)\r\n    setIsPressed(false)\r\n    onMouseLeave?.(e as never)\r\n  }\r\n\r\n  const handleMouseDown = (e: React.MouseEvent) => {\r\n    setIsPressed(true)\r\n    onMouseDown?.(e as never)\r\n  }\r\n\r\n  const handleMouseUp = (e: React.MouseEvent) => {\r\n    setIsPressed(false)\r\n    onMouseUp?.(e as never)\r\n  }\r\n\r\n  // Build class name\r\n  const buttonClassName = cx(\r\n    'brycks-button',\r\n    `brycks-button--${variant}`,\r\n    `brycks-button--${intent}`,\r\n    `brycks-button--${size}`,\r\n    fullWidth && 'brycks-button--full-width',\r\n    isIconOnly && 'brycks-button--icon-only',\r\n    isLoading && 'brycks-button--loading',\r\n    disabled && 'brycks-button--disabled',\r\n    className\r\n  )\r\n\r\n  const isButton = Component === 'button' || as === undefined\r\n  const buttonProps = isButton\r\n    ? {\r\n        type: (props as { type?: string }).type ?? 'button',\r\n        disabled,\r\n      }\r\n    : {\r\n        'aria-disabled': disabled || undefined,\r\n        role: 'button',\r\n        tabIndex: disabled ? -1 : 0,\r\n      }\r\n\r\n  return (\r\n    <Component\r\n      ref={ref}\r\n      className={buttonClassName}\r\n      style={computedStyle}\r\n      data-testid={testId}\r\n      onMouseEnter={handleMouseEnter}\r\n      onMouseLeave={handleMouseLeave}\r\n      onMouseDown={handleMouseDown}\r\n      onMouseUp={handleMouseUp}\r\n      {...buttonProps}\r\n      {...props}\r\n    >\r\n      {isLoading && (\r\n        <span\r\n          style={{\r\n            display: 'inline-flex',\r\n            position: isIconOnly ? 'absolute' : 'relative',\r\n          }}\r\n        >\r\n          <LoadingSpinner size={sizeValues.iconSize} />\r\n        </span>\r\n      )}\r\n\r\n      {!isLoading && leftIcon && (\r\n        <span\r\n          style={{\r\n            display: 'inline-flex',\r\n            width: sizeValues.iconSize,\r\n            height: sizeValues.iconSize,\r\n          }}\r\n        >\r\n          {leftIcon}\r\n        </span>\r\n      )}\r\n\r\n      {!isIconOnly && (\r\n        <span\r\n          style={{\r\n            opacity: isLoading && !isIconOnly ? 0.5 : 1,\r\n          }}\r\n        >\r\n          {children}\r\n        </span>\r\n      )}\r\n\r\n      {!isLoading && rightIcon && (\r\n        <span\r\n          style={{\r\n            display: 'inline-flex',\r\n            width: sizeValues.iconSize,\r\n            height: sizeValues.iconSize,\r\n          }}\r\n        >\r\n          {rightIcon}\r\n        </span>\r\n      )}\r\n\r\n      {isIconOnly && !isLoading && children}\r\n    </Component>\r\n  )\r\n}\r\n\r\nexport const Button = forwardRef(ButtonInner) as ButtonComponent\r\n\r\nButton.displayName = 'Button'\r\n\r\n/** Icon button shorthand */\r\nconst IconButtonInner = <E extends ElementType = 'button'>(\r\n  props: Omit<ButtonProps<E>, 'isIconOnly'>,\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  return <Button ref={ref as React.ForwardedRef<HTMLButtonElement>} isIconOnly {...(props as ButtonProps<'button'>)} />\r\n}\r\n\r\nexport const IconButton = forwardRef(IconButtonInner) as ButtonComponent\r\n\r\nIconButton.displayName = 'IconButton'\r\n"],"names":["LoadingSpinner","React","size","jsxs","jsx","ButtonInner","as","variant","intent","fullWidth","isLoading","isDisabled","leftIcon","rightIcon","isIconOnly","className","style","children","testId","onMouseEnter","onMouseLeave","onMouseDown","onMouseUp","props","ref","Component","isHovered","setIsHovered","useState","isPressed","setIsPressed","disabled","styles","getButtonStyles","computedStyle","sizeValues","sizeConfig","handleMouseEnter","e","handleMouseLeave","handleMouseDown","handleMouseUp","buttonClassName","cx","buttonProps","Button","forwardRef","IconButtonInner","IconButton"],"mappings":"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"}
+{"version":3,"file":"Button.cjs","sources":["../../../../src/components/primitives/Button/Button.tsx"],"sourcesContent":["/**\r\n * Button Component\r\n *\r\n * A versatile, polymorphic button component with multiple variants,\r\n * sizes, and states. Designed with Apple-inspired aesthetics -\r\n * smooth transitions, tactile feedback, and refined visual details.\r\n *\r\n * All color styles are handled via CSS classes for easy customization.\r\n * Layout styles (display, alignment) use inline styles for flexibility.\r\n */\r\n\r\nimport React, {\r\n  forwardRef,\r\n  type ElementType,\r\n  type ComponentPropsWithRef,\r\n  type CSSProperties,\r\n} from 'react'\r\nimport type { ButtonProps } from './Button.types'\r\nimport { sizeConfig } from './Button.styles'\r\nimport { cx } from '../../../utils/styles'\r\n\r\ninterface ButtonComponent {\r\n  <E extends ElementType = 'button'>(\r\n    props: ButtonProps<E> & { ref?: ComponentPropsWithRef<E>['ref'] }\r\n  ): React.JSX.Element | null\r\n  displayName?: string\r\n}\r\n\r\n/** Loading spinner component - uses global CSS keyframes */\r\nconst LoadingSpinner = React.memo(function LoadingSpinner({ size }: { size: number }) {\r\n  return (\r\n    <svg\r\n      width={size}\r\n      height={size}\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      className=\"brycks-animate-spin\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      <circle\r\n        cx=\"12\"\r\n        cy=\"12\"\r\n        r=\"10\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"2\"\r\n        strokeLinecap=\"round\"\r\n        strokeDasharray=\"31.4 31.4\"\r\n        opacity=\"0.25\"\r\n      />\r\n      <circle\r\n        cx=\"12\"\r\n        cy=\"12\"\r\n        r=\"10\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"2\"\r\n        strokeLinecap=\"round\"\r\n        strokeDasharray=\"31.4 31.4\"\r\n        strokeDashoffset=\"62.8\"\r\n        style={{ transform: 'rotate(-90deg)', transformOrigin: 'center' }}\r\n      />\r\n    </svg>\r\n  )\r\n})\r\n\r\nconst ButtonInner = <E extends ElementType = 'button'>(\r\n  {\r\n    as,\r\n    variant = 'solid',\r\n    intent = 'primary',\r\n    size = 'md',\r\n    fullWidth,\r\n    isLoading,\r\n    isDisabled,\r\n    leftIcon,\r\n    rightIcon,\r\n    isIconOnly,\r\n    className,\r\n    style,\r\n    children,\r\n    testId,\r\n    ...props\r\n  }: ButtonProps<E>,\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  const Component = (as || 'button') as ElementType\r\n\r\n  const disabled = isDisabled || isLoading\r\n\r\n  const sizeValues = sizeConfig[size]\r\n\r\n  // Layout-only inline styles (colors handled by CSS classes)\r\n  const layoutStyle: CSSProperties = {\r\n    display: 'inline-flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    ...style,\r\n  }\r\n\r\n  // Build class name - CSS handles all colors and states\r\n  const buttonClassName = cx(\r\n    'brycks-button',\r\n    `brycks-button--${variant}`,\r\n    `brycks-button--${intent}`,\r\n    `brycks-button--${size}`,\r\n    fullWidth && 'brycks-button--full-width',\r\n    isIconOnly && 'brycks-button--icon-only',\r\n    isLoading && 'brycks-button--loading',\r\n    disabled && 'brycks-button--disabled',\r\n    className\r\n  )\r\n\r\n  const isButton = Component === 'button' || as === undefined\r\n  const buttonProps = isButton\r\n    ? {\r\n        type: (props as { type?: string }).type ?? 'button',\r\n        disabled,\r\n      }\r\n    : {\r\n        'aria-disabled': disabled || undefined,\r\n        role: 'button',\r\n        tabIndex: disabled ? -1 : 0,\r\n      }\r\n\r\n  return (\r\n    <Component\r\n      ref={ref}\r\n      className={buttonClassName}\r\n      style={layoutStyle}\r\n      data-testid={testId}\r\n      {...buttonProps}\r\n      {...props}\r\n    >\r\n      {isLoading && (\r\n        <span\r\n          style={{\r\n            display: 'inline-flex',\r\n            position: isIconOnly ? 'absolute' : 'relative',\r\n          }}\r\n        >\r\n          <LoadingSpinner size={sizeValues.iconSize} />\r\n        </span>\r\n      )}\r\n\r\n      {!isLoading && leftIcon && (\r\n        <span\r\n          style={{\r\n            display: 'inline-flex',\r\n            width: sizeValues.iconSize,\r\n            height: sizeValues.iconSize,\r\n          }}\r\n        >\r\n          {leftIcon}\r\n        </span>\r\n      )}\r\n\r\n      {!isIconOnly && (\r\n        <span\r\n          style={{\r\n            opacity: isLoading && !isIconOnly ? 0.5 : 1,\r\n          }}\r\n        >\r\n          {children}\r\n        </span>\r\n      )}\r\n\r\n      {!isLoading && rightIcon && (\r\n        <span\r\n          style={{\r\n            display: 'inline-flex',\r\n            width: sizeValues.iconSize,\r\n            height: sizeValues.iconSize,\r\n          }}\r\n        >\r\n          {rightIcon}\r\n        </span>\r\n      )}\r\n\r\n      {isIconOnly && !isLoading && children}\r\n    </Component>\r\n  )\r\n}\r\n\r\nexport const Button = forwardRef(ButtonInner) as ButtonComponent\r\n\r\nButton.displayName = 'Button'\r\n\r\n/** Icon button shorthand */\r\nconst IconButtonInner = <E extends ElementType = 'button'>(\r\n  props: Omit<ButtonProps<E>, 'isIconOnly'>,\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  return <Button ref={ref as React.ForwardedRef<HTMLButtonElement>} isIconOnly {...(props as ButtonProps<'button'>)} />\r\n}\r\n\r\nexport const IconButton = forwardRef(IconButtonInner) as ButtonComponent\r\n\r\nIconButton.displayName = 'IconButton'\r\n"],"names":["LoadingSpinner","React","size","jsxs","jsx","ButtonInner","as","variant","intent","fullWidth","isLoading","isDisabled","leftIcon","rightIcon","isIconOnly","className","style","children","testId","props","ref","Component","disabled","sizeValues","sizeConfig","layoutStyle","buttonClassName","cx","buttonProps","Button","forwardRef","IconButtonInner","IconButton"],"mappings":"gNA6BMA,EAAiBC,EAAM,KAAK,SAAwB,CAAE,KAAAC,GAA0B,CACpF,OACEC,EAAAA,KAAC,MAAA,CACC,MAAOD,EACP,OAAQA,EACR,QAAQ,YACR,KAAK,OACL,UAAU,sBACV,cAAY,OAEZ,SAAA,CAAAE,EAAAA,IAAC,SAAA,CACC,GAAG,KACH,GAAG,KACH,EAAE,KACF,OAAO,eACP,YAAY,IACZ,cAAc,QACd,gBAAgB,YAChB,QAAQ,MAAA,CAAA,EAEVA,EAAAA,IAAC,SAAA,CACC,GAAG,KACH,GAAG,KACH,EAAE,KACF,OAAO,eACP,YAAY,IACZ,cAAc,QACd,gBAAgB,YAChB,iBAAiB,OACjB,MAAO,CAAE,UAAW,iBAAkB,gBAAiB,QAAA,CAAS,CAAA,CAClE,CAAA,CAAA,CAGN,CAAC,EAEKC,EAAc,CAClB,CACE,GAAAC,EACA,QAAAC,EAAU,QACV,OAAAC,EAAS,UACT,KAAAN,EAAO,KACP,UAAAO,EACA,UAAAC,EACA,WAAAC,EACA,SAAAC,EACA,UAAAC,EACA,WAAAC,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,OAAAC,EACA,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAAaf,GAAM,SAEnBgB,EAAWX,GAAcD,EAEzBa,EAAaC,EAAAA,WAAWtB,CAAI,EAG5BuB,EAA6B,CACjC,QAAS,cACT,WAAY,SACZ,eAAgB,SAChB,GAAGT,CAAA,EAICU,EAAkBC,EAAAA,GACtB,gBACA,kBAAkBpB,CAAO,GACzB,kBAAkBC,CAAM,GACxB,kBAAkBN,CAAI,GACtBO,GAAa,4BACbK,GAAc,2BACdJ,GAAa,yBACbY,GAAY,0BACZP,CAAA,EAIIa,EADWP,IAAc,UAAYf,IAAO,OAE9C,CACE,KAAOa,EAA4B,MAAQ,SAC3C,SAAAG,CAAA,EAEF,CACE,gBAAiBA,GAAY,OAC7B,KAAM,SACN,SAAUA,EAAW,GAAK,CAAA,EAGhC,OACEnB,EAAAA,KAACkB,EAAA,CACC,IAAAD,EACA,UAAWM,EACX,MAAOD,EACP,cAAaP,EACZ,GAAGU,EACH,GAAGT,EAEH,SAAA,CAAAT,GACCN,EAAAA,IAAC,OAAA,CACC,MAAO,CACL,QAAS,cACT,SAAUU,EAAa,WAAa,UAAA,EAGtC,SAAAV,EAAAA,IAACJ,EAAA,CAAe,KAAMuB,EAAW,QAAA,CAAU,CAAA,CAAA,EAI9C,CAACb,GAAaE,GACbR,EAAAA,IAAC,OAAA,CACC,MAAO,CACL,QAAS,cACT,MAAOmB,EAAW,SAClB,OAAQA,EAAW,QAAA,EAGpB,SAAAX,CAAA,CAAA,EAIJ,CAACE,GACAV,EAAAA,IAAC,OAAA,CACC,MAAO,CACL,QAASM,GAAa,CAACI,EAAa,GAAM,CAAA,EAG3C,SAAAG,CAAA,CAAA,EAIJ,CAACP,GAAaG,GACbT,EAAAA,IAAC,OAAA,CACC,MAAO,CACL,QAAS,cACT,MAAOmB,EAAW,SAClB,OAAQA,EAAW,QAAA,EAGpB,SAAAV,CAAA,CAAA,EAIJC,GAAc,CAACJ,GAAaO,CAAA,CAAA,CAAA,CAGnC,EAEaY,EAASC,EAAAA,WAAWzB,CAAW,EAE5CwB,EAAO,YAAc,SAGrB,MAAME,EAAkB,CACtBZ,EACAC,UAEQS,EAAA,CAAO,IAAAT,EAAmD,WAAU,GAAE,GAAID,EAAiC,EAGxGa,EAAaF,EAAAA,WAAWC,CAAe,EAEpDC,EAAW,YAAc"}