@mieweb/ui 0.1.0

package/dist/chunk-JFAXLE2J.js

@@ -0,0 +1,217 @@
+import { cn } from './chunk-F3SOEIN2.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var TabsContext = React.createContext(
+  void 0
+);
+function useTabsContext() {
+  const context = React.useContext(TabsContext);
+  if (!context) {
+    throw new Error("Tabs components must be used within a Tabs provider");
+  }
+  return context;
+}
+function Tabs({
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  variant = "underline",
+  children,
+  className
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(
+    defaultValue || ""
+  );
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+  const handleValueChange = React.useCallback(
+    (newValue) => {
+      if (!isControlled) {
+        setUncontrolledValue(newValue);
+      }
+      onValueChange?.(newValue);
+    },
+    [isControlled, onValueChange]
+  );
+  return /* @__PURE__ */ jsx(
+    TabsContext.Provider,
+    {
+      value: { value, onValueChange: handleValueChange, variant },
+      children: /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children })
+    }
+  );
+}
+Tabs.displayName = "Tabs";
+var tabsListVariants = cva(["flex items-center"], {
+  variants: {
+    variant: {
+      underline: "border-b border-border gap-0",
+      pills: "gap-1 p-1 rounded-lg bg-muted",
+      enclosed: "gap-0 border-b border-border"
+    }
+  },
+  defaultVariants: {
+    variant: "underline"
+  }
+});
+var TabsList = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { variant } = useTabsContext();
+    const listRef = React.useRef(null);
+    const handleKeyDown = React.useCallback(
+      (e) => {
+        const list = listRef.current;
+        if (!list) return;
+        const triggers = Array.from(
+          list.querySelectorAll(
+            '[role="tab"]:not([disabled])'
+          )
+        );
+        const currentIndex = triggers.findIndex(
+          (trigger) => trigger === document.activeElement
+        );
+        let nextIndex;
+        switch (e.key) {
+          case "ArrowRight":
+          case "ArrowDown":
+            e.preventDefault();
+            nextIndex = currentIndex === triggers.length - 1 ? 0 : currentIndex + 1;
+            triggers[nextIndex]?.focus();
+            break;
+          case "ArrowLeft":
+          case "ArrowUp":
+            e.preventDefault();
+            nextIndex = currentIndex === 0 ? triggers.length - 1 : currentIndex - 1;
+            triggers[nextIndex]?.focus();
+            break;
+          case "Home":
+            e.preventDefault();
+            triggers[0]?.focus();
+            break;
+          case "End":
+            e.preventDefault();
+            triggers[triggers.length - 1]?.focus();
+            break;
+        }
+      },
+      []
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: (node) => {
+          listRef.current = node;
+          if (typeof ref === "function") {
+            ref(node);
+          } else if (ref) {
+            ref.current = node;
+          }
+        },
+        role: "tablist",
+        tabIndex: 0,
+        onKeyDown: handleKeyDown,
+        className: cn(tabsListVariants({ variant }), className),
+        ...props
+      }
+    );
+  }
+);
+TabsList.displayName = "TabsList";
+var tabsTriggerVariants = cva(
+  [
+    "inline-flex items-center justify-center gap-2",
+    "font-medium transition-all duration-200",
+    "whitespace-nowrap",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "disabled:pointer-events-none disabled:opacity-50"
+  ],
+  {
+    variants: {
+      variant: {
+        underline: [
+          "px-4 py-2 -mb-px",
+          "border-b-2 border-transparent",
+          "text-muted-foreground hover:text-foreground",
+          "data-[state=active]:border-primary-700 data-[state=active]:text-primary-800"
+        ],
+        pills: [
+          "px-3 py-1.5 rounded-md text-sm",
+          "text-muted-foreground hover:text-foreground",
+          "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
+        ],
+        enclosed: [
+          "px-4 py-2 -mb-px",
+          "border border-transparent rounded-t-lg",
+          "text-muted-foreground hover:text-foreground",
+          "data-[state=active]:border-border data-[state=active]:border-b-background data-[state=active]:bg-background data-[state=active]:text-foreground"
+        ]
+      }
+    },
+    defaultVariants: {
+      variant: "underline"
+    }
+  }
+);
+var TabsTrigger = React.forwardRef(
+  ({ className, value, icon, children, disabled, ...props }, ref) => {
+    const { value: selectedValue, onValueChange, variant } = useTabsContext();
+    const isSelected = selectedValue === value;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        role: "tab",
+        "aria-selected": isSelected,
+        "aria-controls": `tabpanel-${value}`,
+        id: `tab-${value}`,
+        tabIndex: isSelected ? 0 : -1,
+        "data-state": isSelected ? "active" : "inactive",
+        disabled,
+        onClick: () => onValueChange(value),
+        className: cn(tabsTriggerVariants({ variant }), className),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: icon }),
+          children
+        ]
+      }
+    );
+  }
+);
+TabsTrigger.displayName = "TabsTrigger";
+var TabsContent = React.forwardRef(
+  ({ className, value, forceMount = false, children, ...props }, ref) => {
+    const { value: selectedValue } = useTabsContext();
+    const isSelected = selectedValue === value;
+    if (!isSelected && !forceMount) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "tabpanel",
+        id: `tabpanel-${value}`,
+        "aria-labelledby": `tab-${value}`,
+        tabIndex: 0,
+        hidden: !isSelected,
+        "data-state": isSelected ? "active" : "inactive",
+        className: cn(
+          "focus-visible:ring-ring mt-4 rounded-lg focus-visible:ring-2 focus-visible:outline-none",
+          !isSelected && "hidden",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+TabsContent.displayName = "TabsContent";
+
+export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants, tabsTriggerVariants };
+//# sourceMappingURL=chunk-JFAXLE2J.js.map
+//# sourceMappingURL=chunk-JFAXLE2J.js.map

package/dist/chunk-JFAXLE2J.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":";;;;;AAcA,IAAM,WAAA,GAAoB,KAAA,CAAA,aAAA;AAAA,EACxB;AACF,CAAA;AAEA,SAAS,cAAA,GAAiB;AACxB,EAAA,MAAM,OAAA,GAAgB,iBAAW,WAAW,CAAA;AAC5C,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,MAAM,qDAAqD,CAAA;AAAA,EACvE;AACA,EAAA,OAAO,OAAA;AACT;AAoCA,SAAS,IAAA,CAAK;AAAA,EACZ,KAAA,EAAO,eAAA;AAAA,EACP,YAAA;AAAA,EACA,aAAA;AAAA,EACA,OAAA,GAAU,WAAA;AAAA,EACV,QAAA;AAAA,EACA;AACF,CAAA,EAAc;AACZ,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAU,KAAA,CAAA,QAAA;AAAA,IACtD,YAAA,IAAgB;AAAA,GAClB;AAEA,EAAA,MAAM,eAAe,eAAA,KAAoB,MAAA;AACzC,EAAA,MAAM,KAAA,GAAQ,eAAe,eAAA,GAAkB,iBAAA;AAE/C,EAAA,MAAM,iBAAA,GAA0B,KAAA,CAAA,WAAA;AAAA,IAC9B,CAAC,QAAA,KAAqB;AACpB,MAAA,IAAI,CAAC,YAAA,EAAc;AACjB,QAAA,oBAAA,CAAqB,QAAQ,CAAA;AAAA,MAC/B;AACA,MAAA,aAAA,GAAgB,QAAQ,CAAA;AAAA,IAC1B,CAAA;AAAA,IACA,CAAC,cAAc,aAAa;AAAA,GAC9B;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,WAAA,CAAY,QAAA;AAAA,IAAZ;AAAA,MACC,KAAA,EAAO,EAAE,KAAA,EAAO,aAAA,EAAe,mBAAmB,OAAA,EAAQ;AAAA,MAE1D,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,QAAA,EAAU,SAAS,GAAI,QAAA,EAAS;AAAA;AAAA,GACrD;AAEJ;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA;AAMnB,IAAM,gBAAA,GAAmB,GAAA,CAAI,CAAC,mBAAmB,CAAA,EAAG;AAAA,EAClD,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,SAAA,EAAW,8BAAA;AAAA,MACX,KAAA,EAAO,+BAAA;AAAA,MACP,QAAA,EAAU;AAAA;AACZ,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;AAOD,IAAM,QAAA,GAAiB,KAAA,CAAA,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AAChC,IAAA,MAAM,EAAE,OAAA,EAAQ,GAAI,cAAA,EAAe;AACnC,IAAA,MAAM,OAAA,GAAgB,aAAuB,IAAI,CAAA;AAGjD,IAAA,MAAM,aAAA,GAAsB,KAAA,CAAA,WAAA;AAAA,MAC1B,CAAC,CAAA,KAA2C;AAC1C,QAAA,MAAM,OAAO,OAAA,CAAQ,OAAA;AACrB,QAAA,IAAI,CAAC,IAAA,EAAM;AAEX,QAAA,MAAM,WAAW,KAAA,CAAM,IAAA;AAAA,UACrB,IAAA,CAAK,gBAAA;AAAA,YACH;AAAA;AACF,SACF;AACA,QAAA,MAAM,eAAe,QAAA,CAAS,SAAA;AAAA,UAC5B,CAAC,OAAA,KAAY,OAAA,KAAY,QAAA,CAAS;AAAA,SACpC;AAEA,QAAA,IAAI,SAAA;AAEJ,QAAA,QAAQ,EAAE,GAAA;AAAK,UACb,KAAK,YAAA;AAAA,UACL,KAAK,WAAA;AACH,YAAA,CAAA,CAAE,cAAA,EAAe;AACjB,YAAA,SAAA,GACE,YAAA,KAAiB,QAAA,CAAS,MAAA,GAAS,CAAA,GAAI,IAAI,YAAA,GAAe,CAAA;AAC5D,YAAA,QAAA,CAAS,SAAS,GAAG,KAAA,EAAM;AAC3B,YAAA;AAAA,UACF,KAAK,WAAA;AAAA,UACL,KAAK,SAAA;AACH,YAAA,CAAA,CAAE,cAAA,EAAe;AACjB,YAAA,SAAA,GACE,YAAA,KAAiB,CAAA,GAAI,QAAA,CAAS,MAAA,GAAS,IAAI,YAAA,GAAe,CAAA;AAC5D,YAAA,QAAA,CAAS,SAAS,GAAG,KAAA,EAAM;AAC3B,YAAA;AAAA,UACF,KAAK,MAAA;AACH,YAAA,CAAA,CAAE,cAAA,EAAe;AACjB,YAAA,QAAA,CAAS,CAAC,GAAG,KAAA,EAAM;AACnB,YAAA;AAAA,UACF,KAAK,KAAA;AACH,YAAA,CAAA,CAAE,cAAA,EAAe;AACjB,YAAA,QAAA,CAAS,QAAA,CAAS,MAAA,GAAS,CAAC,CAAA,EAAG,KAAA,EAAM;AACrC,YAAA;AAAA;AACJ,MACF,CAAA;AAAA,MACA;AAAC,KACH;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,CAAC,IAAA,KAAS;AAEb,UAAC,QAA0D,OAAA,GACzD,IAAA;AACF,UAAA,IAAI,OAAO,QAAQ,UAAA,EAAY;AAC7B,YAAA,GAAA,CAAI,IAAI,CAAA;AAAA,UACV,WAAW,GAAA,EAAK;AACd,YAAA,GAAA,CAAI,OAAA,GAAU,IAAA;AAAA,UAChB;AAAA,QACF,CAAA;AAAA,QACA,IAAA,EAAK,SAAA;AAAA,QACL,QAAA,EAAU,CAAA;AAAA,QACV,SAAA,EAAW,aAAA;AAAA,QACX,WAAW,EAAA,CAAG,gBAAA,CAAiB,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,QACrD,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA;AAMvB,IAAM,mBAAA,GAAsB,GAAA;AAAA,EAC1B;AAAA,IACE,+CAAA;AAAA,IACA,yCAAA;AAAA,IACA,mBAAA;AAAA,IACA,qGAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,SAAA,EAAW;AAAA,UACT,kBAAA;AAAA,UACA,+BAAA;AAAA,UACA,6CAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA,EAAO;AAAA,UACL,gCAAA;AAAA,UACA,6CAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,QAAA,EAAU;AAAA,UACR,kBAAA;AAAA,UACA,wCAAA;AAAA,UACA,6CAAA;AAAA,UACA;AAAA;AACF;AACF,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ;AAYA,IAAM,WAAA,GAAoB,KAAA,CAAA,UAAA;AAAA,EACxB,CAAC,EAAE,SAAA,EAAW,KAAA,EAAO,IAAA,EAAM,UAAU,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACjE,IAAA,MAAM,EAAE,KAAA,EAAO,aAAA,EAAe,aAAA,EAAe,OAAA,KAAY,cAAA,EAAe;AACxE,IAAA,MAAM,aAAa,aAAA,KAAkB,KAAA;AAErC,IAAA,uBACE,IAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACL,IAAA,EAAK,KAAA;AAAA,QACL,eAAA,EAAe,UAAA;AAAA,QACf,eAAA,EAAe,YAAY,KAAK,CAAA,CAAA;AAAA,QAChC,EAAA,EAAI,OAAO,KAAK,CAAA,CAAA;AAAA,QAChB,QAAA,EAAU,aAAa,CAAA,GAAI,EAAA;AAAA,QAC3B,YAAA,EAAY,aAAa,QAAA,GAAW,UAAA;AAAA,QACpC,QAAA;AAAA,QACA,OAAA,EAAS,MAAM,aAAA,CAAc,KAAK,CAAA;AAAA,QAClC,WAAW,EAAA,CAAG,mBAAA,CAAoB,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,QACxD,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,UAAA,EAAY,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,UACzC;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA;AAgB1B,IAAM,WAAA,GAAoB,KAAA,CAAA,UAAA;AAAA,EACxB,CAAC,EAAE,SAAA,EAAW,KAAA,EAAO,UAAA,GAAa,OAAO,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACrE,IAAA,MAAM,EAAE,KAAA,EAAO,aAAA,EAAc,GAAI,cAAA,EAAe;AAChD,IAAA,MAAM,aAAa,aAAA,KAAkB,KAAA;AAErC,IAAA,IAAI,CAAC,UAAA,IAAc,CAAC,UAAA,EAAY;AAC9B,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,UAAA;AAAA,QACL,EAAA,EAAI,YAAY,KAAK,CAAA,CAAA;AAAA,QACrB,iBAAA,EAAiB,OAAO,KAAK,CAAA,CAAA;AAAA,QAC7B,QAAA,EAAU,CAAA;AAAA,QACV,QAAQ,CAAC,UAAA;AAAA,QACT,YAAA,EAAY,aAAa,QAAA,GAAW,UAAA;AAAA,QACpC,SAAA,EAAW,EAAA;AAAA,UACT,yFAAA;AAAA,UACA,CAAC,UAAA,IAAc,QAAA;AAAA,UACf;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-JFAXLE2J.js","sourcesContent":["import * as React from 'react';\nimport { cva } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n// ============================================================================\n// Tabs Context\n// ============================================================================\n\ninterface TabsContextValue {\n  value: string;\n  onValueChange: (value: string) => void;\n  variant: 'underline' | 'pills' | 'enclosed';\n}\n\nconst TabsContext = React.createContext<TabsContextValue | undefined>(\n  undefined\n);\n\nfunction useTabsContext() {\n  const context = React.useContext(TabsContext);\n  if (!context) {\n    throw new Error('Tabs components must be used within a Tabs provider');\n  }\n  return context;\n}\n\n// ============================================================================\n// Tabs Root\n// ============================================================================\n\nexport interface TabsProps {\n  /** The controlled value of the selected tab */\n  value?: string;\n  /** The default value of the selected tab (uncontrolled) */\n  defaultValue?: string;\n  /** Callback when the selected tab changes */\n  onValueChange?: (value: string) => void;\n  /** Visual variant of the tabs */\n  variant?: 'underline' | 'pills' | 'enclosed';\n  /** Tab content */\n  children: React.ReactNode;\n  /** Additional class name */\n  className?: string;\n}\n\n/**\n * Accessible tabs component with keyboard navigation.\n *\n * @example\n * ```tsx\n * <Tabs defaultValue=\"tab1\">\n *   <TabsList>\n *     <TabsTrigger value=\"tab1\">Tab 1</TabsTrigger>\n *     <TabsTrigger value=\"tab2\">Tab 2</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"tab1\">Content 1</TabsContent>\n *   <TabsContent value=\"tab2\">Content 2</TabsContent>\n * </Tabs>\n * ```\n */\nfunction Tabs({\n  value: controlledValue,\n  defaultValue,\n  onValueChange,\n  variant = 'underline',\n  children,\n  className,\n}: TabsProps) {\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(\n    defaultValue || ''\n  );\n\n  const isControlled = controlledValue !== undefined;\n  const value = isControlled ? controlledValue : uncontrolledValue;\n\n  const handleValueChange = React.useCallback(\n    (newValue: string) => {\n      if (!isControlled) {\n        setUncontrolledValue(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [isControlled, onValueChange]\n  );\n\n  return (\n    <TabsContext.Provider\n      value={{ value, onValueChange: handleValueChange, variant }}\n    >\n      <div className={cn('w-full', className)}>{children}</div>\n    </TabsContext.Provider>\n  );\n}\n\nTabs.displayName = 'Tabs';\n\n// ============================================================================\n// Tabs List\n// ============================================================================\n\nconst tabsListVariants = cva(['flex items-center'], {\n  variants: {\n    variant: {\n      underline: 'border-b border-border gap-0',\n      pills: 'gap-1 p-1 rounded-lg bg-muted',\n      enclosed: 'gap-0 border-b border-border',\n    },\n  },\n  defaultVariants: {\n    variant: 'underline',\n  },\n});\n\nexport type TabsListProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Container for tab triggers.\n */\nconst TabsList = React.forwardRef<HTMLDivElement, TabsListProps>(\n  ({ className, ...props }, ref) => {\n    const { variant } = useTabsContext();\n    const listRef = React.useRef<HTMLDivElement>(null);\n\n    // Keyboard navigation\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent<HTMLDivElement>) => {\n        const list = listRef.current;\n        if (!list) return;\n\n        const triggers = Array.from(\n          list.querySelectorAll<HTMLButtonElement>(\n            '[role=\"tab\"]:not([disabled])'\n          )\n        );\n        const currentIndex = triggers.findIndex(\n          (trigger) => trigger === document.activeElement\n        );\n\n        let nextIndex: number;\n\n        switch (e.key) {\n          case 'ArrowRight':\n          case 'ArrowDown':\n            e.preventDefault();\n            nextIndex =\n              currentIndex === triggers.length - 1 ? 0 : currentIndex + 1;\n            triggers[nextIndex]?.focus();\n            break;\n          case 'ArrowLeft':\n          case 'ArrowUp':\n            e.preventDefault();\n            nextIndex =\n              currentIndex === 0 ? triggers.length - 1 : currentIndex - 1;\n            triggers[nextIndex]?.focus();\n            break;\n          case 'Home':\n            e.preventDefault();\n            triggers[0]?.focus();\n            break;\n          case 'End':\n            e.preventDefault();\n            triggers[triggers.length - 1]?.focus();\n            break;\n        }\n      },\n      []\n    );\n\n    return (\n      <div\n        ref={(node) => {\n          // Combine refs\n          (listRef as React.MutableRefObject<HTMLDivElement | null>).current =\n            node;\n          if (typeof ref === 'function') {\n            ref(node);\n          } else if (ref) {\n            ref.current = node;\n          }\n        }}\n        role=\"tablist\"\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        className={cn(tabsListVariants({ variant }), className)}\n        {...props}\n      />\n    );\n  }\n);\n\nTabsList.displayName = 'TabsList';\n\n// ============================================================================\n// Tabs Trigger\n// ============================================================================\n\nconst tabsTriggerVariants = cva(\n  [\n    'inline-flex items-center justify-center gap-2',\n    'font-medium transition-all duration-200',\n    'whitespace-nowrap',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n    'disabled:pointer-events-none disabled:opacity-50',\n  ],\n  {\n    variants: {\n      variant: {\n        underline: [\n          'px-4 py-2 -mb-px',\n          'border-b-2 border-transparent',\n          'text-muted-foreground hover:text-foreground',\n          'data-[state=active]:border-primary-700 data-[state=active]:text-primary-800',\n        ],\n        pills: [\n          'px-3 py-1.5 rounded-md text-sm',\n          'text-muted-foreground hover:text-foreground',\n          'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',\n        ],\n        enclosed: [\n          'px-4 py-2 -mb-px',\n          'border border-transparent rounded-t-lg',\n          'text-muted-foreground hover:text-foreground',\n          'data-[state=active]:border-border data-[state=active]:border-b-background data-[state=active]:bg-background data-[state=active]:text-foreground',\n        ],\n      },\n    },\n    defaultVariants: {\n      variant: 'underline',\n    },\n  }\n);\n\nexport interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** The value that identifies this tab */\n  value: string;\n  /** Icon to show before the label */\n  icon?: React.ReactNode;\n}\n\n/**\n * A tab trigger button.\n */\nconst TabsTrigger = React.forwardRef<HTMLButtonElement, TabsTriggerProps>(\n  ({ className, value, icon, children, disabled, ...props }, ref) => {\n    const { value: selectedValue, onValueChange, variant } = useTabsContext();\n    const isSelected = selectedValue === value;\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        role=\"tab\"\n        aria-selected={isSelected}\n        aria-controls={`tabpanel-${value}`}\n        id={`tab-${value}`}\n        tabIndex={isSelected ? 0 : -1}\n        data-state={isSelected ? 'active' : 'inactive'}\n        disabled={disabled}\n        onClick={() => onValueChange(value)}\n        className={cn(tabsTriggerVariants({ variant }), className)}\n        {...props}\n      >\n        {icon && <span className=\"shrink-0\">{icon}</span>}\n        {children}\n      </button>\n    );\n  }\n);\n\nTabsTrigger.displayName = 'TabsTrigger';\n\n// ============================================================================\n// Tabs Content\n// ============================================================================\n\nexport interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** The value that identifies this content panel */\n  value: string;\n  /** Force mount the content (useful for animations) */\n  forceMount?: boolean;\n}\n\n/**\n * Content panel for a tab.\n */\nconst TabsContent = React.forwardRef<HTMLDivElement, TabsContentProps>(\n  ({ className, value, forceMount = false, children, ...props }, ref) => {\n    const { value: selectedValue } = useTabsContext();\n    const isSelected = selectedValue === value;\n\n    if (!isSelected && !forceMount) {\n      return null;\n    }\n\n    return (\n      <div\n        ref={ref}\n        role=\"tabpanel\"\n        id={`tabpanel-${value}`}\n        aria-labelledby={`tab-${value}`}\n        tabIndex={0}\n        hidden={!isSelected}\n        data-state={isSelected ? 'active' : 'inactive'}\n        className={cn(\n          'focus-visible:ring-ring mt-4 rounded-lg focus-visible:ring-2 focus-visible:outline-none',\n          !isSelected && 'hidden',\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nTabsContent.displayName = 'TabsContent';\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  tabsListVariants,\n  tabsTriggerVariants,\n};\n"]}

package/dist/chunk-JYMQJ32S.cjs

@@ -0,0 +1,115 @@
+'use strict';
+
+var chunkOR5DRJCW_cjs = require('./chunk-OR5DRJCW.cjs');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+var spinnerVariants = classVarianceAuthority.cva(
+  ["animate-spin rounded-full border-2 border-current border-t-transparent"],
+  {
+    variants: {
+      size: {
+        xs: "h-3 w-3",
+        sm: "h-4 w-4",
+        md: "h-6 w-6",
+        lg: "h-8 w-8",
+        xl: "h-12 w-12"
+      },
+      variant: {
+        default: "text-primary-500",
+        muted: "text-muted-foreground",
+        white: "text-white"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "default"
+    }
+  }
+);
+function Spinner({
+  className,
+  size,
+  variant,
+  label = "Loading",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "status",
+      "aria-label": label,
+      className: chunkOR5DRJCW_cjs.cn(spinnerVariants({ size, variant }), className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: label })
+    }
+  );
+}
+Spinner.displayName = "Spinner";
+function SpinnerWithLabel({
+  label,
+  labelPosition = "bottom",
+  size,
+  variant,
+  className,
+  ...props
+}) {
+  const positionClasses = {
+    top: "flex-col-reverse",
+    bottom: "flex-col",
+    left: "flex-row-reverse",
+    right: "flex-row"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-label": label,
+      className: chunkOR5DRJCW_cjs.cn(
+        "inline-flex items-center justify-center gap-2",
+        positionClasses[labelPosition],
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: chunkOR5DRJCW_cjs.cn(spinnerVariants({ size, variant })),
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-sm", children: label })
+      ]
+    }
+  );
+}
+SpinnerWithLabel.displayName = "SpinnerWithLabel";
+function FullPageSpinner({
+  backdrop = true,
+  text,
+  size = "xl",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunkOR5DRJCW_cjs.cn(
+        "fixed inset-0 z-50 flex flex-col items-center justify-center gap-4",
+        backdrop && "bg-background/80 backdrop-blur-sm"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size, ...props }),
+        text && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: text })
+      ]
+    }
+  );
+}
+FullPageSpinner.displayName = "FullPageSpinner";
+
+exports.FullPageSpinner = FullPageSpinner;
+exports.Spinner = Spinner;
+exports.SpinnerWithLabel = SpinnerWithLabel;
+exports.spinnerVariants = spinnerVariants;
+//# sourceMappingURL=chunk-JYMQJ32S.cjs.map
+//# sourceMappingURL=chunk-JYMQJ32S.cjs.map

package/dist/chunk-JYMQJ32S.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Spinner/Spinner.tsx"],"names":["cva","jsx","cn","jsxs"],"mappings":"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","file":"chunk-JYMQJ32S.cjs","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\nconst spinnerVariants = cva(\n  ['animate-spin rounded-full border-2 border-current border-t-transparent'],\n  {\n    variants: {\n      size: {\n        xs: 'h-3 w-3',\n        sm: 'h-4 w-4',\n        md: 'h-6 w-6',\n        lg: 'h-8 w-8',\n        xl: 'h-12 w-12',\n      },\n      variant: {\n        default: 'text-primary-500',\n        muted: 'text-muted-foreground',\n        white: 'text-white',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      variant: 'default',\n    },\n  }\n);\n\nexport interface SpinnerProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof spinnerVariants> {\n  /** Accessible label for the spinner */\n  label?: string;\n}\n\n/**\n * A loading spinner component.\n *\n * @example\n * ```tsx\n * <Spinner />\n * <Spinner size=\"lg\" label=\"Loading data...\" />\n * <Spinner variant=\"white\" /> // For use on dark backgrounds\n * ```\n */\nfunction Spinner({\n  className,\n  size,\n  variant,\n  label = 'Loading',\n  ...props\n}: SpinnerProps) {\n  return (\n    <div\n      role=\"status\"\n      aria-label={label}\n      className={cn(spinnerVariants({ size, variant }), className)}\n      {...props}\n    >\n      <span className=\"sr-only\">{label}</span>\n    </div>\n  );\n}\n\nSpinner.displayName = 'Spinner';\n\n// ============================================================================\n// Spinner with Label\n// ============================================================================\n\nexport interface SpinnerWithLabelProps extends SpinnerProps {\n  /** Label text to display */\n  label: string;\n  /** Position of the label */\n  labelPosition?: 'top' | 'bottom' | 'left' | 'right';\n}\n\n/**\n * A spinner with a visible label.\n *\n * @example\n * ```tsx\n * <SpinnerWithLabel label=\"Loading...\" />\n * <SpinnerWithLabel label=\"Processing\" labelPosition=\"right\" />\n * ```\n */\nfunction SpinnerWithLabel({\n  label,\n  labelPosition = 'bottom',\n  size,\n  variant,\n  className,\n  ...props\n}: SpinnerWithLabelProps) {\n  const positionClasses = {\n    top: 'flex-col-reverse',\n    bottom: 'flex-col',\n    left: 'flex-row-reverse',\n    right: 'flex-row',\n  };\n\n  return (\n    <div\n      role=\"status\"\n      aria-label={label}\n      className={cn(\n        'inline-flex items-center justify-center gap-2',\n        positionClasses[labelPosition],\n        className\n      )}\n      {...props}\n    >\n      <div\n        className={cn(spinnerVariants({ size, variant }))}\n        aria-hidden=\"true\"\n      />\n      <span className=\"text-muted-foreground text-sm\">{label}</span>\n    </div>\n  );\n}\n\nSpinnerWithLabel.displayName = 'SpinnerWithLabel';\n\n// ============================================================================\n// Full Page Spinner\n// ============================================================================\n\nexport interface FullPageSpinnerProps extends SpinnerProps {\n  /** Whether to show a backdrop */\n  backdrop?: boolean;\n  /** Text to display below the spinner */\n  text?: string;\n}\n\n/**\n * A full-page loading spinner with optional backdrop.\n *\n * @example\n * ```tsx\n * <FullPageSpinner />\n * <FullPageSpinner backdrop text=\"Loading your data...\" />\n * ```\n */\nfunction FullPageSpinner({\n  backdrop = true,\n  text,\n  size = 'xl',\n  ...props\n}: FullPageSpinnerProps) {\n  return (\n    <div\n      className={cn(\n        'fixed inset-0 z-50 flex flex-col items-center justify-center gap-4',\n        backdrop && 'bg-background/80 backdrop-blur-sm'\n      )}\n    >\n      <Spinner size={size} {...props} />\n      {text && <p className=\"text-muted-foreground text-sm\">{text}</p>}\n    </div>\n  );\n}\n\nFullPageSpinner.displayName = 'FullPageSpinner';\n\nexport { Spinner, SpinnerWithLabel, FullPageSpinner, spinnerVariants };\n"]}