@brycks/core-front 0.2.7 → 0.2.9

package/dist/components/navigation/Pagination/Pagination.js

@@ -0,0 +1,201 @@
+import { jsxs as $, jsx as e } from "react/jsx-runtime";
+import { forwardRef as z, useMemo as j } from "react";
+import { cx as w } from "../../../utils/styles.js";
+const E = {
+  sm: { height: 28, fontSize: 12, gap: 4, minWidth: 28 },
+  md: { height: 36, fontSize: 14, gap: 6, minWidth: 36 },
+  lg: { height: 44, fontSize: 16, gap: 8, minWidth: 44 }
+};
+function I() {
+  return /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ e("path", { d: "M10 12L6 8l4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function B() {
+  return /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ e("path", { d: "M6 4l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function R() {
+  return /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ e("path", { d: "M11 12l-4-4 4-4M7 12l-4-4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function N() {
+  return /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ e("path", { d: "M5 4l4 4-4 4M9 4l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+const q = z(function({
+  page: r,
+  totalPages: t,
+  onChange: p,
+  size: f = "md",
+  variant: l = "default",
+  siblingCount: h = 1,
+  showFirstLast: k = !0,
+  showPrevNext: m = !0,
+  disabled: o = !1,
+  className: g,
+  style: b,
+  testId: C,
+  ...v
+}, M) {
+  const s = E[f], L = j(() => {
+    if (l === "minimal" || l === "simple")
+      return [];
+    const n = [], u = Math.max(r - h, 1), c = Math.min(r + h, t), T = u > 2, y = c < t - 1;
+    if (T)
+      if (y) {
+        n.push(1), n.push("ellipsis");
+        for (let i = u; i <= c; i++)
+          n.push(i);
+        n.push("ellipsis"), n.push(t);
+      } else {
+        n.push(1), n.push("ellipsis");
+        for (let i = Math.max(t - 2 - h, 1); i <= t; i++)
+          n.push(i);
+      }
+    else {
+      for (let i = 1; i <= Math.min(3 + h, t); i++)
+        n.push(i);
+      y && (n.push("ellipsis"), n.push(t));
+    }
+    return n;
+  }, [r, t, h, l]), x = {
+    display: "flex",
+    alignItems: "center",
+    gap: s.gap,
+    ...b
+  }, a = (n, u) => ({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: s.minWidth,
+    height: s.height,
+    padding: `0 ${s.gap + 4}px`,
+    fontSize: s.fontSize,
+    fontWeight: n ? 600 : 500,
+    color: u ? "var(--brycks-foreground-disabled)" : n ? "var(--brycks-primary-default)" : "var(--brycks-foreground-default)",
+    backgroundColor: n ? "var(--brycks-primary-50)" : "transparent",
+    border: "none",
+    borderRadius: "var(--brycks-radius-md)",
+    cursor: u ? "not-allowed" : "pointer",
+    transition: "all 150ms ease-out",
+    outline: "none"
+  }), S = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: s.minWidth,
+    height: s.height,
+    color: "var(--brycks-foreground-muted)",
+    fontSize: s.fontSize
+  }, W = {
+    fontSize: s.fontSize,
+    color: "var(--brycks-foreground-muted)",
+    padding: `0 ${s.gap}px`
+  }, d = (n) => {
+    n >= 1 && n <= t && n !== r && !o && p(n);
+  };
+  return /* @__PURE__ */ $(
+    "nav",
+    {
+      ref: M,
+      role: "navigation",
+      "aria-label": "Pagination",
+      className: w("brycks-pagination", `brycks-pagination--${f}`, `brycks-pagination--${l}`, g),
+      style: x,
+      "data-testid": C,
+      ...v,
+      children: [
+        k && l !== "minimal" && /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            "aria-label": "First page",
+            disabled: r === 1 || o,
+            style: a(!1, r === 1 || o),
+            onClick: () => d(1),
+            onMouseEnter: (n) => {
+              r !== 1 && !o && (n.currentTarget.style.backgroundColor = "var(--brycks-background-muted)");
+            },
+            onMouseLeave: (n) => {
+              n.currentTarget.style.backgroundColor = "transparent";
+            },
+            children: /* @__PURE__ */ e(R, {})
+          }
+        ),
+        m && /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Previous page",
+            disabled: r === 1 || o,
+            style: a(!1, r === 1 || o),
+            onClick: () => d(r - 1),
+            onMouseEnter: (n) => {
+              r !== 1 && !o && (n.currentTarget.style.backgroundColor = "var(--brycks-background-muted)");
+            },
+            onMouseLeave: (n) => {
+              n.currentTarget.style.backgroundColor = "transparent";
+            },
+            children: /* @__PURE__ */ e(I, {})
+          }
+        ),
+        l === "simple" || l === "minimal" ? /* @__PURE__ */ e("span", { style: W, children: l === "minimal" ? `${r} / ${t}` : `Page ${r} of ${t}` }) : L.map(
+          (n, u) => n === "ellipsis" ? /* @__PURE__ */ e("span", { style: S, children: "..." }, `ellipsis-${u}`) : /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Page ${n}`,
+              "aria-current": n === r ? "page" : void 0,
+              disabled: o,
+              style: a(n === r, o),
+              onClick: () => d(n),
+              onMouseEnter: (c) => {
+                n !== r && !o && (c.currentTarget.style.backgroundColor = "var(--brycks-background-muted)");
+              },
+              onMouseLeave: (c) => {
+                n !== r && (c.currentTarget.style.backgroundColor = "transparent");
+              },
+              children: n
+            },
+            n
+          )
+        ),
+        m && /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Next page",
+            disabled: r === t || o,
+            style: a(!1, r === t || o),
+            onClick: () => d(r + 1),
+            onMouseEnter: (n) => {
+              r !== t && !o && (n.currentTarget.style.backgroundColor = "var(--brycks-background-muted)");
+            },
+            onMouseLeave: (n) => {
+              n.currentTarget.style.backgroundColor = "transparent";
+            },
+            children: /* @__PURE__ */ e(B, {})
+          }
+        ),
+        k && l !== "minimal" && /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Last page",
+            disabled: r === t || o,
+            style: a(!1, r === t || o),
+            onClick: () => d(t),
+            onMouseEnter: (n) => {
+              r !== t && !o && (n.currentTarget.style.backgroundColor = "var(--brycks-background-muted)");
+            },
+            onMouseLeave: (n) => {
+              n.currentTarget.style.backgroundColor = "transparent";
+            },
+            children: /* @__PURE__ */ e(N, {})
+          }
+        )
+      ]
+    }
+  );
+});
+q.displayName = "Pagination";
+export {
+  q as Pagination
+};
+//# sourceMappingURL=Pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sources":["../../../../src/components/navigation/Pagination/Pagination.tsx"],"sourcesContent":["/**\n * Pagination Component\n *\n * A pagination control for navigating through pages.\n * Supports different sizes and display modes.\n */\n\nimport { forwardRef, useMemo, type CSSProperties, type HTMLAttributes } from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type PaginationSize = 'sm' | 'md' | 'lg'\nexport type PaginationVariant = 'default' | 'simple' | 'minimal'\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {\n  /** Current page (1-indexed) */\n  page: number\n  /** Total number of pages */\n  totalPages: number\n  /** Callback when page changes */\n  onChange: (page: number) => void\n  /** Pagination size */\n  size?: PaginationSize\n  /** Pagination variant */\n  variant?: PaginationVariant\n  /** Number of sibling pages to show on each side */\n  siblingCount?: number\n  /** Whether to show first/last buttons */\n  showFirstLast?: boolean\n  /** Whether to show prev/next buttons */\n  showPrevNext?: boolean\n  /** Whether the component is disabled */\n  disabled?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<PaginationSize, { height: number; fontSize: number; gap: number; minWidth: number }> = {\n  sm: { height: 28, fontSize: 12, gap: 4, minWidth: 28 },\n  md: { height: 36, fontSize: 14, gap: 6, minWidth: 36 },\n  lg: { height: 44, fontSize: 16, gap: 8, minWidth: 44 },\n}\n\nfunction ChevronLeftIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n      <path d=\"M10 12L6 8l4-4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\nfunction ChevronRightIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n      <path d=\"M6 4l4 4-4 4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\nfunction ChevronsLeftIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n      <path d=\"M11 12l-4-4 4-4M7 12l-4-4 4-4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\nfunction ChevronsRightIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n      <path d=\"M5 4l4 4-4 4M9 4l4 4-4 4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(function Pagination(\n  {\n    page,\n    totalPages,\n    onChange,\n    size = 'md',\n    variant = 'default',\n    siblingCount = 1,\n    showFirstLast = true,\n    showPrevNext = true,\n    disabled = false,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const config = sizeConfig[size]\n\n  // Generate page numbers to display\n  const pages = useMemo(() => {\n    if (variant === 'minimal' || variant === 'simple') {\n      return []\n    }\n\n    const range: (number | 'ellipsis')[] = []\n    const leftSibling = Math.max(page - siblingCount, 1)\n    const rightSibling = Math.min(page + siblingCount, totalPages)\n\n    const showLeftEllipsis = leftSibling > 2\n    const showRightEllipsis = rightSibling < totalPages - 1\n\n    if (!showLeftEllipsis) {\n      for (let i = 1; i <= Math.min(3 + siblingCount, totalPages); i++) {\n        range.push(i)\n      }\n      if (showRightEllipsis) {\n        range.push('ellipsis')\n        range.push(totalPages)\n      }\n    } else if (!showRightEllipsis) {\n      range.push(1)\n      range.push('ellipsis')\n      for (let i = Math.max(totalPages - 2 - siblingCount, 1); i <= totalPages; i++) {\n        range.push(i)\n      }\n    } else {\n      range.push(1)\n      range.push('ellipsis')\n      for (let i = leftSibling; i <= rightSibling; i++) {\n        range.push(i)\n      }\n      range.push('ellipsis')\n      range.push(totalPages)\n    }\n\n    return range\n  }, [page, totalPages, siblingCount, variant])\n\n  const containerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    gap: config.gap,\n    ...style,\n  }\n\n  const getButtonStyle = (isActive: boolean, isDisabled: boolean): CSSProperties => ({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minWidth: config.minWidth,\n    height: config.height,\n    padding: `0 ${config.gap + 4}px`,\n    fontSize: config.fontSize,\n    fontWeight: isActive ? 600 : 500,\n    color: isDisabled\n      ? 'var(--brycks-foreground-disabled)'\n      : isActive\n      ? 'var(--brycks-primary-default)'\n      : 'var(--brycks-foreground-default)',\n    backgroundColor: isActive ? 'var(--brycks-primary-50)' : 'transparent',\n    border: 'none',\n    borderRadius: 'var(--brycks-radius-md)',\n    cursor: isDisabled ? 'not-allowed' : 'pointer',\n    transition: 'all 150ms ease-out',\n    outline: 'none',\n  })\n\n  const ellipsisStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minWidth: config.minWidth,\n    height: config.height,\n    color: 'var(--brycks-foreground-muted)',\n    fontSize: config.fontSize,\n  }\n\n  const infoStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    color: 'var(--brycks-foreground-muted)',\n    padding: `0 ${config.gap}px`,\n  }\n\n  const handlePageChange = (newPage: number) => {\n    if (newPage >= 1 && newPage <= totalPages && newPage !== page && !disabled) {\n      onChange(newPage)\n    }\n  }\n\n  return (\n    <nav\n      ref={ref}\n      role=\"navigation\"\n      aria-label=\"Pagination\"\n      className={cx('brycks-pagination', `brycks-pagination--${size}`, `brycks-pagination--${variant}`, className)}\n      style={containerStyle}\n      data-testid={testId}\n      {...props}\n    >\n      {showFirstLast && variant !== 'minimal' && (\n        <button\n          type=\"button\"\n          aria-label=\"First page\"\n          disabled={page === 1 || disabled}\n          style={getButtonStyle(false, page === 1 || disabled)}\n          onClick={() => handlePageChange(1)}\n          onMouseEnter={(e) => {\n            if (page !== 1 && !disabled) {\n              e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n            }\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.backgroundColor = 'transparent'\n          }}\n        >\n          <ChevronsLeftIcon />\n        </button>\n      )}\n\n      {showPrevNext && (\n        <button\n          type=\"button\"\n          aria-label=\"Previous page\"\n          disabled={page === 1 || disabled}\n          style={getButtonStyle(false, page === 1 || disabled)}\n          onClick={() => handlePageChange(page - 1)}\n          onMouseEnter={(e) => {\n            if (page !== 1 && !disabled) {\n              e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n            }\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.backgroundColor = 'transparent'\n          }}\n        >\n          <ChevronLeftIcon />\n        </button>\n      )}\n\n      {variant === 'simple' || variant === 'minimal' ? (\n        <span style={infoStyle}>\n          {variant === 'minimal' ? `${page} / ${totalPages}` : `Page ${page} of ${totalPages}`}\n        </span>\n      ) : (\n        pages.map((p, index) =>\n          p === 'ellipsis' ? (\n            <span key={`ellipsis-${index}`} style={ellipsisStyle}>\n              ...\n            </span>\n          ) : (\n            <button\n              key={p}\n              type=\"button\"\n              aria-label={`Page ${p}`}\n              aria-current={p === page ? 'page' : undefined}\n              disabled={disabled}\n              style={getButtonStyle(p === page, disabled)}\n              onClick={() => handlePageChange(p)}\n              onMouseEnter={(e) => {\n                if (p !== page && !disabled) {\n                  e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n                }\n              }}\n              onMouseLeave={(e) => {\n                if (p !== page) {\n                  e.currentTarget.style.backgroundColor = 'transparent'\n                }\n              }}\n            >\n              {p}\n            </button>\n          )\n        )\n      )}\n\n      {showPrevNext && (\n        <button\n          type=\"button\"\n          aria-label=\"Next page\"\n          disabled={page === totalPages || disabled}\n          style={getButtonStyle(false, page === totalPages || disabled)}\n          onClick={() => handlePageChange(page + 1)}\n          onMouseEnter={(e) => {\n            if (page !== totalPages && !disabled) {\n              e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n            }\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.backgroundColor = 'transparent'\n          }}\n        >\n          <ChevronRightIcon />\n        </button>\n      )}\n\n      {showFirstLast && variant !== 'minimal' && (\n        <button\n          type=\"button\"\n          aria-label=\"Last page\"\n          disabled={page === totalPages || disabled}\n          style={getButtonStyle(false, page === totalPages || disabled)}\n          onClick={() => handlePageChange(totalPages)}\n          onMouseEnter={(e) => {\n            if (page !== totalPages && !disabled) {\n              e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n            }\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.backgroundColor = 'transparent'\n          }}\n        >\n          <ChevronsRightIcon />\n        </button>\n      )}\n    </nav>\n  )\n})\n\nPagination.displayName = 'Pagination'\n"],"names":["sizeConfig","ChevronLeftIcon","jsx","ChevronRightIcon","ChevronsLeftIcon","ChevronsRightIcon","Pagination","forwardRef","page","totalPages","onChange","size","variant","siblingCount","showFirstLast","showPrevNext","disabled","className","style","testId","props","ref","config","pages","useMemo","range","leftSibling","rightSibling","showLeftEllipsis","showRightEllipsis","containerStyle","getButtonStyle","isActive","isDisabled","ellipsisStyle","infoStyle","handlePageChange","newPage","jsxs","cx","e","p","index"],"mappings":"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"}

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

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

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

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

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

@@ -0,0 +1,196 @@
+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)
+    throw new Error("Tabs components must be used within a Tabs");
+  return b;
+}
+const $ = g(function({
+  value: n,
+  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);
+    },
+    [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(
+    "div",
+    {
+      ref: k,
+      className: v("brycks-tabs", `brycks-tabs--${s}`, `brycks-tabs--${e}`, o),
+      style: C,
+      "data-testid": T,
+      ...w,
+      children: f
+    }
+  ) });
+});
+$.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(
+    "div",
+    {
+      ref: s,
+      role: "tablist",
+      "aria-orientation": e,
+      className: v("brycks-tab-list", n),
+      style: p,
+      ...c,
+      children: i
+    }
+  );
+});
+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) => {
+    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)"
+    };
+  };
+  return /* @__PURE__ */ N(
+    "button",
+    {
+      ref: p,
+      role: "tab",
+      type: "button",
+      "aria-selected": r,
+      "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,
+      children: [
+        i && /* @__PURE__ */ y("span", { className: "brycks-tab-icon", children: i }),
+        e
+      ]
+    }
+  );
+});
+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 });
+});
+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
+      }
+    )
+  ] });
+});
+K.displayName = "TabPanel";
+export {
+  E as Tab,
+  j as TabList,
+  K as TabPanel,
+  H as TabPanels,
+  $ as Tabs
+};
+//# sourceMappingURL=Tabs.js.map

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

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

package/dist/components/navigation.cjs

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

package/dist/components/navigation.cjs.map

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

package/dist/components/navigation.d.ts

@@ -0,0 +1,2 @@
+export * from './navigation/index'
+export {}

package/dist/components/navigation.js

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

package/dist/components/navigation.js.map

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

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

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

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

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