@cytario/design 9.3.1 → 9.5.0

package/dist/index.js

@@ -168,6 +168,7 @@ import {
   Columns3,
   Copy,
   CreditCard,
+  Crosshair,
   Database,
   Download,
   Edit,
@@ -328,6 +329,7 @@ var iconRegistry = {
   Columns3,
   Copy,
   CreditCard,
+  Crosshair,
   Database,
   Download,
   Edit,
@@ -489,7 +491,7 @@ var buttonBaseClass = `
   inline-flex items-center justify-center gap-2 shrink-0 cursor-pointer
   rounded-full
   font-medium
-  leading-tight
+  leading-none
   outline-none transition-colors no-underline
   focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
   disabled:opacity-50 disabled:pointer-events-none
@@ -1070,6 +1072,12 @@ var alignClasses = {
   center: "text-center",
   right: "text-right"
 };
+var sizeStyles2 = {
+  xs: "text-xs h-6",
+  sm: "text-sm h-7",
+  md: "text-base h-8",
+  lg: "text-lg h-10"
+};
 function Input({
   as: FieldProp = TextField,
   label,
@@ -1079,6 +1087,7 @@ function Input({
   type = "text",
   size = "md",
   prefix,
+  suffix,
   align = "left",
   isDisabled,
   isRequired,
@@ -1089,6 +1098,29 @@ function Input({
   const isInvalid = !!errorMessage;
   const borderColor = isInvalid ? "border-destructive-border" : "border-border hover:border-border";
   const radiusClass = "rounded-md";
+  const inputCx = twMerge8(
+    `
+      w-full
+      bg-transparent text-foreground
+      placeholder:text-muted-foreground
+      outline-none border-none
+    `,
+    sizeStyles2[size],
+    alignClasses[align]
+  );
+  const containerCx = twMerge8(
+    `
+      flex items-center gap-1 px-2
+      border bg-background
+      outline-none transition-colors
+      focus-within:ring-2 
+      focus-within:ring-ring 
+      focus-within:border-ring
+      `,
+    radiusClass,
+    borderColor,
+    isDisabled && "opacity-50 pointer-events-none"
+  );
   return /* @__PURE__ */ jsxs6(
     Field,
     {
@@ -1100,69 +1132,11 @@ function Input({
       className: twMerge8("flex w-full flex-col gap-1", className),
       children: [
         label && /* @__PURE__ */ jsx14(Label, { isRequired, children: label }),
-        prefix ? /* @__PURE__ */ jsxs6(
-          "div",
-          {
-            className: twMerge8(
-              "flex items-center overflow-hidden",
-              radiusClass,
-              "border",
-              "bg-background",
-              "outline-none transition-colors",
-              borderColor,
-              "focus-within:ring-2 focus-within:ring-ring focus-within:border-ring",
-              isDisabled && "opacity-50 pointer-events-none"
-            ),
-            children: [
-              /* @__PURE__ */ jsx14(
-                "span",
-                {
-                  className: twMerge8(
-                    "self-stretch flex items-center shrink-0 select-none",
-                    "bg-card",
-                    "border-r border-r-border",
-                    "text-muted-foreground",
-                    sizeStyles[size]
-                  ),
-                  children: prefix
-                }
-              ),
-              /* @__PURE__ */ jsx14(
-                AriaInput,
-                {
-                  placeholder,
-                  className: twMerge8(
-                    "w-full bg-transparent",
-                    sizeStyles[size],
-                    alignClasses[align],
-                    "text-foreground",
-                    "placeholder:text-muted-foreground",
-                    "outline-none border-none"
-                  )
-                }
-              )
-            ]
-          }
-        ) : /* @__PURE__ */ jsx14(
-          AriaInput,
-          {
-            placeholder,
-            className: twMerge8(
-              "w-full",
-              sizeStyles[size],
-              alignClasses[align],
-              radiusClass,
-              "border",
-              "text-foreground",
-              "bg-background",
-              "placeholder:text-muted-foreground",
-              "outline-none transition-colors",
-              borderColor,
-              "focus:ring-2 focus:ring-ring focus:border-ring",
-              "disabled:opacity-50 disabled:pointer-events-none"
-            )
-          }
-        ),
+        /* @__PURE__ */ jsxs6("div", { className: containerCx, children: [
+          prefix,
+          /* @__PURE__ */ jsx14(AriaInput, { placeholder, className: inputCx }),
+          suffix
+        ] }),
         description && /* @__PURE__ */ jsx14(Text, { slot: "description", className: "text-sm text-muted-foreground", children: description }),
         isInvalid && /* @__PURE__ */ jsx14(
           Text,
@@ -1515,7 +1489,7 @@ import {
 } from "react-aria-components";
 import { X as X2 } from "lucide-react";
 import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
-var sizeStyles2 = {
+var sizeStyles3 = {
   sm: "max-w-md",
   md: "max-w-lg",
   lg: "max-w-2xl",
@@ -1547,7 +1521,7 @@ function Dialog({
         {
           className: [
             "w-full mx-4",
-            sizeStyles2[size],
+            sizeStyles3[size],
             "bg-background rounded-lg shadow-xl max-h-[85vh] flex flex-col",
             "entering:animate-in entering:zoom-in-95 entering:fade-in",
             "exiting:animate-out exiting:zoom-out-95 exiting:fade-out",
@@ -1815,59 +1789,50 @@ function Checkbox({ children, className, ...props }) {
 
 // src/components/Form/Switch/Switch.tsx
 import {
-  Switch as AriaSwitch
+  SwitchField,
+  SwitchButton
 } from "react-aria-components";
+import { twMerge as twMerge12 } from "tailwind-merge";
 import { Fragment as Fragment4, jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
-var trackColorMap = {
-  primary: "bg-primary",
-  success: "bg-success",
-  destructive: "bg-destructive"
-};
-var presetColors = new Set(Object.keys(trackColorMap));
-function isPresetColor(color) {
-  return presetColors.has(color);
-}
 function Switch({
   children,
-  color = "primary",
+  color = "var(--color-primary)",
   className,
   ...props
 }) {
-  const isPreset = isPresetColor(color);
-  return /* @__PURE__ */ jsx23(
-    AriaSwitch,
-    {
-      ...props,
-      className: [
-        "group flex items-center gap-2 text-sm text-foreground cursor-pointer",
-        "disabled:opacity-50 disabled:cursor-default",
-        className
-      ].filter(Boolean).join(" "),
-      children: ({ isSelected }) => /* @__PURE__ */ jsxs14(Fragment4, { children: [
-        /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx23(SwitchField, { ...props, children: /* @__PURE__ */ jsx23(SwitchButton, { className: "relative cursor-pointer", children: ({ isSelected, isFocusVisible }) => /* @__PURE__ */ jsxs14(Fragment4, { children: [
+    /* @__PURE__ */ jsx23(
+      "div",
+      {
+        className: twMerge12(
+          `
+                  flex items-center
+                  border-2 border-border
+                  w-9 h-5 rounded-full transition-colors shrink-0
+                `,
+          isFocusVisible && "ring-2 ring-ring ring-offset-2",
+          !isSelected && "bg-border"
+        ),
+        style: isSelected ? { backgroundColor: color } : void 0,
+        children: /* @__PURE__ */ jsx23(
           "div",
           {
-            className: [
-              "w-9 h-5 rounded-full transition-colors shrink-0 p-0.5",
-              "group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2",
-              isSelected && isPreset ? trackColorMap[color] : !isSelected ? "bg-border" : ""
-            ].join(" "),
-            style: isSelected && !isPreset ? { backgroundColor: color } : void 0,
-            children: /* @__PURE__ */ jsx23(
-              "div",
-              {
-                className: [
-                  "w-4 h-4 rounded-full bg-background transition-transform shadow-sm",
-                  isSelected ? "translate-x-4" : "translate-x-0"
-                ].join(" ")
-              }
+            className: twMerge12(
+              `
+                    absolute top-0 left-0 w-5 h-5
+                    rounded-full
+                    transition-transform
+                    border-2 border-border
+                    
+                  `,
+              isSelected ? "translate-x-4 bg-card" : "translate-x-0 bg-background"
             )
           }
-        ),
-        children && /* @__PURE__ */ jsx23("span", { children })
-      ] })
-    }
-  );
+        )
+      }
+    ),
+    children && /* @__PURE__ */ jsx23("span", { children })
+  ] }) }) });
 }
 
 // src/components/Form/Radio/Radio.tsx
@@ -2068,7 +2033,7 @@ function Breadcrumbs({ items, className }) {
 import {
   ToggleButton as AriaToggleButton2
 } from "react-aria-components";
-import { twMerge as twMerge12 } from "tailwind-merge";
+import { twMerge as twMerge13 } from "tailwind-merge";
 import { jsx as jsx28 } from "react/jsx-runtime";
 var squareSizeStyles2 = {
   xs: "h-6 w-6 text-xs",
@@ -2118,7 +2083,7 @@ function ToggleButton({
     AriaToggleButton2,
     {
       ...props,
-      className: ({ isSelected }) => twMerge12(
+      className: ({ isSelected }) => twMerge13(
         "inline-flex items-center justify-center gap-2 cursor-pointer",
         isSquare ? "rounded-none" : "rounded-md",
         "font-medium",
@@ -2141,7 +2106,7 @@ import {
   MenuItem as AriaMenuItem,
   Popover as Popover2
 } from "react-aria-components";
-import { twMerge as twMerge13 } from "tailwind-merge";
+import { twMerge as twMerge14 } from "tailwind-merge";
 
 // src/components/Menu/menuStyles.ts
 var popoverStyles = `
@@ -2168,7 +2133,7 @@ function Menu2({
   const selectionProps = selectionMode && selectionMode !== "none" ? { selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange } : {};
   return /* @__PURE__ */ jsxs18(MenuTrigger, { children: [
     children,
-    /* @__PURE__ */ jsx29(Popover2, { className: twMerge13(popoverStyles, className), children: items ? /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx29(Popover2, { className: twMerge14(popoverStyles, className), children: items ? /* @__PURE__ */ jsx29(
       AriaMenu,
       {
         items,
@@ -2227,7 +2192,7 @@ import {
   Popover as Popover3,
   Pressable
 } from "react-aria-components";
-import { twMerge as twMerge14 } from "tailwind-merge";
+import { twMerge as twMerge15 } from "tailwind-merge";
 import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
 function useContextMenu({
   content,
@@ -2293,7 +2258,7 @@ function useContextMenu({
             isNonModal: true,
             placement: "bottom start",
             ref: popoverRef,
-            className: twMerge14(popoverStyles, className),
+            className: twMerge15(popoverStyles, className),
             children: /* @__PURE__ */ jsx30(
               AriaMenu2,
               {
@@ -2456,7 +2421,7 @@ import {
   Popover as AriaPopover,
   Button as AriaButton3
 } from "react-aria-components";
-import { twMerge as twMerge15 } from "tailwind-merge";
+import { twMerge as twMerge16 } from "tailwind-merge";
 import { jsx as jsx36 } from "react/jsx-runtime";
 function Popover4({ children, isOpen, onOpenChange }) {
   return /* @__PURE__ */ jsx36(DialogTrigger, { isOpen, onOpenChange, children });
@@ -2466,7 +2431,7 @@ function PopoverTrigger({ children, className }) {
     inline-flex items-center bg-transparent border-none p-0 outline-none cursor-pointer
     focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm
   `;
-  return /* @__PURE__ */ jsx36(AriaButton3, { className: twMerge15(cx, className), children });
+  return /* @__PURE__ */ jsx36(AriaButton3, { className: twMerge16(cx, className), children });
 }
 function PopoverContent({
   placement = "bottom",
@@ -2493,7 +2458,7 @@ function PopoverContent({
       ...rest,
       placement,
       offset: offsetPx,
-      className: twMerge15(cx, className),
+      className: twMerge16(cx, className),
       children
     }
   );
@@ -2501,7 +2466,7 @@ function PopoverContent({
 
 // src/components/Tabs/Tabs.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
-import { twMerge as twMerge16 } from "tailwind-merge";
+import { twMerge as twMerge17 } from "tailwind-merge";
 import {
   Tabs as AriaTabs,
   TabList as AriaTabList,
@@ -2513,7 +2478,7 @@ var TabsContext = createContext2({
   variant: "underline",
   size: "md"
 });
-var sizeStyles3 = {
+var sizeStyles4 = {
   sm: "px-3 py-1.5 text-sm",
   md: "px-4 py-2 text-base",
   lg: "px-6 py-3 text-lg"
@@ -2531,7 +2496,7 @@ function Tabs({
     {
       ...props,
       orientation,
-      className: twMerge16(
+      className: twMerge17(
         orientation === "vertical" ? "flex" : "",
         className
       ),
@@ -2550,7 +2515,7 @@ function TabList({
     AriaTabList,
     {
       ...props,
-      className: ({ orientation }) => twMerge16(
+      className: ({ orientation }) => twMerge17(
         baseStyles,
         orientation === "vertical" ? verticalStyles : "",
         className
@@ -2566,14 +2531,14 @@ function Tab({ className, ...props }) {
       ...props,
       className: ({ isSelected, isDisabled, isHovered, isPressed }) => {
         if (variant === "unstyled") {
-          return twMerge16(
+          return twMerge17(
             "cursor-pointer outline-none",
             "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
             isDisabled ? "opacity-50 pointer-events-none" : "",
             className
           );
         }
-        return twMerge16(
+        return twMerge17(
           // Base
           "cursor-pointer outline-none transition-colors",
           "font-medium",
@@ -2582,7 +2547,7 @@ function Tab({ className, ...props }) {
           // Disabled
           isDisabled ? "opacity-50 pointer-events-none" : "",
           // Size
-          sizeStyles3[size],
+          sizeStyles4[size],
           ...getTabVariantStyles(variant, {
             isSelected,
             isHovered,
@@ -2621,7 +2586,7 @@ function TabPanel({ className, ...props }) {
     AriaTabPanel,
     {
       ...props,
-      className: twMerge16(
+      className: twMerge17(
         variant === "unstyled" ? "outline-none" : "mt-4 outline-none",
         className
       )
@@ -2639,7 +2604,7 @@ import {
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { createContext as createContext3, useContext as useContext3 } from "react";
-import { twMerge as twMerge17 } from "tailwind-merge";
+import { twMerge as twMerge18 } from "tailwind-merge";
 import {
   ToggleButtonGroup as AriaToggleButtonGroup,
   ToggleButton as AriaToggleButton3
@@ -2648,7 +2613,7 @@ import { jsx as jsx38 } from "react/jsx-runtime";
 var SegmentedControlContext = createContext3({
   size: "md"
 });
-var sizeStyles4 = {
+var sizeStyles5 = {
   sm: "px-2.5 py-1 text-xs",
   md: "px-3 py-1.5 text-sm",
   lg: "px-4 py-2 text-base"
@@ -2672,7 +2637,7 @@ function SegmentedControl({
       selectedKeys: isNoneMode ? /* @__PURE__ */ new Set() : selectedKeys,
       defaultSelectedKeys: isNoneMode ? void 0 : defaultSelectedKeys,
       onSelectionChange: isNoneMode ? void 0 : onSelectionChange,
-      className: twMerge17(
+      className: twMerge18(
         "inline-flex items-center rounded-lg border border-border bg-muted p-0.5 gap-0.5",
         className
       ),
@@ -2689,7 +2654,7 @@ function SegmentedControlItem({
     AriaToggleButton3,
     {
       ...props,
-      className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge17(
+      className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge18(
         // Base layout
         "inline-flex items-center justify-center",
         "rounded-md",
@@ -2700,7 +2665,7 @@ function SegmentedControlItem({
         // Disabled
         isDisabled && "opacity-50 pointer-events-none",
         // Size
-        sizeStyles4[size],
+        sizeStyles5[size],
         // Selected state
         isSelected ? "bg-background text-foreground shadow-sm font-semibold" : isPressed ? "bg-card text-foreground" : isHovered ? "bg-card text-foreground" : "bg-transparent text-muted-foreground",
         className
@@ -2710,8 +2675,21 @@ function SegmentedControlItem({
 }
 
 // src/components/Badge/Badge.tsx
-import { twMerge as twMerge18 } from "tailwind-merge";
-import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
+import { twMerge as twMerge20 } from "tailwind-merge";
+
+// src/components/MetricText/MetricText.tsx
+import { twMerge as twMerge19 } from "tailwind-merge";
+import { jsx as jsx39 } from "react/jsx-runtime";
+function MetricText({ className, ...rest }) {
+  const cx = twMerge19(
+    "text-xs font-medium leading-none tracking-wider tabular-nums",
+    className
+  );
+  return /* @__PURE__ */ jsx39("span", { className: cx, ...rest });
+}
+
+// src/components/Badge/Badge.tsx
+import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
 var colorStyles = {
   purple: "bg-badge-purple-bg text-badge-purple-text border-badge-purple-text/20",
   teal: "bg-badge-teal-bg text-badge-teal-text border-badge-teal-text/20",
@@ -2720,7 +2698,7 @@ var colorStyles = {
   green: "bg-badge-green-bg text-badge-green-text border-badge-green-text/20",
   amber: "bg-badge-amber-bg text-badge-amber-text border-badge-amber-text/20"
 };
-var sizeStyles5 = {
+var sizeStyles6 = {
   xs: "px-1 py-0 text-[10px]",
   sm: "px-1.5 py-0.5 text-xs",
   md: "px-2 py-0.5 text-xs",
@@ -2735,18 +2713,17 @@ function Badge({
   ...rest
 }) {
   return /* @__PURE__ */ jsxs23(
-    "span",
+    MetricText,
     {
-      className: twMerge18(
+      className: twMerge20(
         "inline-flex items-center gap-1 rounded-full border",
-        "font-medium leading-tight tracking-wider tabular-nums",
         colorStyles[color],
-        sizeStyles5[size],
+        sizeStyles6[size],
         className
       ),
       ...rest,
       children: [
-        icon && /* @__PURE__ */ jsx39(Icon, { icon, size: "xs" }),
+        icon && /* @__PURE__ */ jsx40(Icon, { icon, size: "xs" }),
         children
       ]
     }
@@ -2754,10 +2731,10 @@ function Badge({
 }
 
 // src/components/Card/Card.tsx
-import { twMerge as twMerge19 } from "tailwind-merge";
-import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
+import { twMerge as twMerge21 } from "tailwind-merge";
+import { jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
 function Card({ children, header, footer, className }) {
-  const cx = twMerge19(
+  const cx = twMerge21(
     `
       bg-card p-8
       border border-border
@@ -2767,16 +2744,16 @@ function Card({ children, header, footer, className }) {
     className
   );
   return /* @__PURE__ */ jsxs24("div", { className: cx, children: [
-    header && /* @__PURE__ */ jsx40("div", { className: "border-b border-border", children: header }),
+    header && /* @__PURE__ */ jsx41("div", { className: "border-b border-border", children: header }),
     children,
-    footer && /* @__PURE__ */ jsx40("div", { className: "border-t border-border", children: footer })
+    footer && /* @__PURE__ */ jsx41("div", { className: "border-t border-border", children: footer })
   ] });
 }
 
 // src/components/DeltaIndicator/DeltaIndicator.tsx
 import { ArrowUp as ArrowUp2, ArrowDown as ArrowDown2, Minus as Minus2 } from "lucide-react";
-import { twMerge as twMerge20 } from "tailwind-merge";
-import { jsx as jsx41, jsxs as jsxs25 } from "react/jsx-runtime";
+import { twMerge as twMerge22 } from "tailwind-merge";
+import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
 function getDirection(current, previous) {
   const diff = current - previous;
   if (diff > 0) return "increase";
@@ -2832,13 +2809,13 @@ function DeltaIndicator({
     return /* @__PURE__ */ jsxs25(
       "span",
       {
-        className: twMerge20(
+        className: twMerge22(
           "inline-flex items-center gap-1 font-medium",
           "text-muted-foreground",
           className
         ),
         children: [
-          label && /* @__PURE__ */ jsx41("span", { className: "text-sm text-muted-foreground mr-1", children: label }),
+          label && /* @__PURE__ */ jsx42("span", { className: "text-sm text-muted-foreground mr-1", children: label }),
           unavailableText
         ]
       }
@@ -2871,7 +2848,7 @@ function DeltaIndicator({
   return /* @__PURE__ */ jsxs25(
     "span",
     {
-      className: twMerge20(
+      className: twMerge22(
         "inline-flex items-center gap-1 font-medium",
         colorStyles2,
         isPill && [
@@ -2882,8 +2859,8 @@ function DeltaIndicator({
         className
       ),
       children: [
-        label && /* @__PURE__ */ jsx41("span", { className: "text-sm text-muted-foreground mr-1", children: label }),
-        /* @__PURE__ */ jsx41(IconComponent, { size: 14, "aria-hidden": true }),
+        label && /* @__PURE__ */ jsx42("span", { className: "text-sm text-muted-foreground mr-1", children: label }),
+        /* @__PURE__ */ jsx42(IconComponent, { size: 14, "aria-hidden": true }),
         valueText
       ]
     }
@@ -2891,8 +2868,8 @@ function DeltaIndicator({
 }
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { twMerge as twMerge21 } from "tailwind-merge";
-import { jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
+import { twMerge as twMerge23 } from "tailwind-merge";
+import { jsx as jsx43, jsxs as jsxs26 } from "react/jsx-runtime";
 var fillStyles = {
   brand: "bg-progress-fill",
   success: "bg-progress-fill-success",
@@ -2900,7 +2877,7 @@ var fillStyles = {
   danger: "bg-progress-fill-danger",
   neutral: "bg-muted-foreground"
 };
-var sizeStyles6 = {
+var sizeStyles7 = {
   sm: "h-1.5",
   md: "h-3",
   lg: "h-4"
@@ -2915,12 +2892,12 @@ function ProgressBar({
   className
 }) {
   const clampedValue = Math.min(100, Math.max(0, value));
-  return /* @__PURE__ */ jsxs26("div", { className: twMerge21("w-full", className), children: [
+  return /* @__PURE__ */ jsxs26("div", { className: twMerge23("w-full", className), children: [
     (label || description || showValue) && /* @__PURE__ */ jsxs26("div", { className: "flex items-center justify-between mb-2", children: [
-      /* @__PURE__ */ jsx42("span", { className: "text-sm font-medium text-foreground", children: label }),
-      /* @__PURE__ */ jsx42("span", { className: "text-sm text-muted-foreground", children: description ?? (showValue ? `${clampedValue}%` : null) })
+      /* @__PURE__ */ jsx43("span", { className: "text-sm font-medium text-foreground", children: label }),
+      /* @__PURE__ */ jsx43("span", { className: "text-sm text-muted-foreground", children: description ?? (showValue ? `${clampedValue}%` : null) })
     ] }),
-    /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx43(
       "div",
       {
         role: "progressbar",
@@ -2928,14 +2905,14 @@ function ProgressBar({
         "aria-valuemin": 0,
         "aria-valuemax": 100,
         "aria-label": label ?? "Progress",
-        className: twMerge21(
+        className: twMerge23(
           "w-full rounded-full bg-progress-track",
-          sizeStyles6[size]
+          sizeStyles7[size]
         ),
-        children: /* @__PURE__ */ jsx42(
+        children: /* @__PURE__ */ jsx43(
           "div",
           {
-            className: twMerge21(
+            className: twMerge23(
               "h-full rounded-full transition-all duration-300",
               fillStyles[variant]
             ),
@@ -2955,8 +2932,8 @@ import {
   AlertCircle as AlertCircle2,
   CheckCircle2 as CheckCircle22
 } from "lucide-react";
-import { twMerge as twMerge22 } from "tailwind-merge";
-import { jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
+import { twMerge as twMerge24 } from "tailwind-merge";
+import { jsx as jsx44, jsxs as jsxs27 } from "react/jsx-runtime";
 var variantConfig2 = {
   info: {
     icon: Info3,
@@ -3004,19 +2981,19 @@ function Banner({
     "div",
     {
       role: config.role,
-      className: twMerge22(
+      className: twMerge24(
         "flex items-start gap-3 rounded-lg border px-4 py-3",
         "text-sm",
         config.containerClass,
         className
       ),
       children: [
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44(
           Icon,
           {
             icon: resolvedIcon,
             size: "md",
-            className: twMerge22("mt-0.5", config.iconClass)
+            className: twMerge24("mt-0.5", config.iconClass)
           }
         ),
         /* @__PURE__ */ jsxs27("div", { className: "flex-1", children: [
@@ -3026,14 +3003,14 @@ function Banner({
           ] }),
           children
         ] }),
-        dismissible && /* @__PURE__ */ jsx43(
+        dismissible && /* @__PURE__ */ jsx44(
           "button",
           {
             type: "button",
             onClick: handleDismiss,
             className: "shrink-0 rounded-sm p-0.5 opacity-70 hover:opacity-100 transition-opacity outline-none focus-visible:ring-2 focus-visible:ring-current",
             "aria-label": "Dismiss",
-            children: /* @__PURE__ */ jsx43(Icon, { icon: "X", size: "sm" })
+            children: /* @__PURE__ */ jsx44(Icon, { icon: "X", size: "sm" })
           }
         )
       ]
@@ -3042,8 +3019,8 @@ function Banner({
 }
 
 // src/components/MetricCard/MetricCard.tsx
-import { twMerge as twMerge23 } from "tailwind-merge";
-import { Fragment as Fragment8, jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
+import { twMerge as twMerge25 } from "tailwind-merge";
+import { Fragment as Fragment8, jsx as jsx45, jsxs as jsxs28 } from "react/jsx-runtime";
 var sizeConfig = {
   sm: {
     padding: "p-3",
@@ -3065,50 +3042,50 @@ function MetricCard({
   className
 }) {
   const config = sizeConfig[size];
-  const containerClass = twMerge23(
+  const containerClass = twMerge25(
     "bg-background border border-border rounded-lg shadow-sm",
     config.padding,
     href && "block transition-shadow hover:shadow-md hover:border-ring focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 outline-none",
     className
   );
   const content = /* @__PURE__ */ jsxs28(Fragment8, { children: [
-    /* @__PURE__ */ jsx44("div", { className: twMerge23(config.labelClass, "text-muted-foreground"), children: label }),
-    /* @__PURE__ */ jsx44(
+    /* @__PURE__ */ jsx45("div", { className: twMerge25(config.labelClass, "text-muted-foreground"), children: label }),
+    /* @__PURE__ */ jsx45(
       "div",
       {
-        className: twMerge23(
+        className: twMerge25(
           config.valueClass,
           "font-semibold text-foreground mt-1 tabular-nums"
         ),
         children: value
       }
     ),
-    secondary && /* @__PURE__ */ jsx44("div", { className: "mt-1 text-sm", children: secondary })
+    secondary && /* @__PURE__ */ jsx45("div", { className: "mt-1 text-sm", children: secondary })
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx44("a", { href, className: containerClass, children: content });
+    return /* @__PURE__ */ jsx45("a", { href, className: containerClass, children: content });
   }
-  return /* @__PURE__ */ jsx44("div", { className: containerClass, children: content });
+  return /* @__PURE__ */ jsx45("div", { className: containerClass, children: content });
 }
 
 // src/components/SectionHeader/SectionHeader.tsx
 import { forwardRef as forwardRef7 } from "react";
-import { twMerge as twMerge24 } from "tailwind-merge";
-import { jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
+import { twMerge as twMerge26 } from "tailwind-merge";
+import { jsx as jsx46, jsxs as jsxs29 } from "react/jsx-runtime";
 var SectionHeader = forwardRef7(
   function SectionHeader2({ title, as = "h2", children, className, ...rest }, ref) {
     return /* @__PURE__ */ jsxs29(
       "div",
       {
         ref,
-        className: twMerge24(
+        className: twMerge26(
           "flex flex-wrap items-center gap-3 pt-0 pb-4",
           className
         ),
         ...rest,
         children: [
-          /* @__PURE__ */ jsx45(Heading, { as, children: title }),
-          children && /* @__PURE__ */ jsx45("div", { className: "ml-auto flex flex-wrap items-center gap-2", children })
+          /* @__PURE__ */ jsx46(Heading, { as, children: title }),
+          children && /* @__PURE__ */ jsx46("div", { className: "ml-auto flex flex-wrap items-center gap-2", children })
         ]
       }
     );
@@ -3118,7 +3095,7 @@ var SectionHeader = forwardRef7(
 // src/components/DescriptionList/DescriptionList.tsx
 import { createContext as createContext4, useContext as useContext4 } from "react";
 import { Button as AriaButton4 } from "react-aria-components";
-import { jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs30 } from "react/jsx-runtime";
 var LayoutContext = createContext4("stacked");
 var listGapStyles = {
   stacked: "gap-4",
@@ -3129,7 +3106,7 @@ function DescriptionList({
   layout = "stacked",
   className
 }) {
-  return /* @__PURE__ */ jsx46(LayoutContext.Provider, { value: layout, children: /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx47(LayoutContext.Provider, { value: layout, children: /* @__PURE__ */ jsx47(
     "dl",
     {
       className: ["flex flex-col", listGapStyles[layout], className].filter(Boolean).join(" "),
@@ -3153,17 +3130,17 @@ function DescriptionListItem({
     "text-sm m-0",
     muted ? "text-muted-foreground" : "text-foreground"
   ].join(" ");
-  const valueContent = /* @__PURE__ */ jsx46("dd", { className: valueClasses, children });
+  const valueContent = /* @__PURE__ */ jsx47("dd", { className: valueClasses, children });
   return /* @__PURE__ */ jsxs30("div", { className: itemLayoutStyles[layout], children: [
-    /* @__PURE__ */ jsx46("dt", { className: labelClasses, children: label }),
-    fullValue ? /* @__PURE__ */ jsx46(Tooltip, { content: fullValue, children: /* @__PURE__ */ jsx46(AriaButton4, { className: "text-left outline-none cursor-default", children: valueContent }) }) : valueContent
+    /* @__PURE__ */ jsx47("dt", { className: labelClasses, children: label }),
+    fullValue ? /* @__PURE__ */ jsx47(Tooltip, { content: fullValue, children: /* @__PURE__ */ jsx47(AriaButton4, { className: "text-left outline-none cursor-default", children: valueContent }) }) : valueContent
   ] });
 }
 DescriptionList.Item = DescriptionListItem;
 
 // src/components/PathPill/PathPill.tsx
-import { twMerge as twMerge25 } from "tailwind-merge";
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { twMerge as twMerge27 } from "tailwind-merge";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var hashColors = [
   "purple",
   "teal",
@@ -3189,17 +3166,17 @@ function PathPill({
   const effectiveVisible = visibleCount ?? segments.length;
   const dotCount = Math.max(0, segments.length - effectiveVisible);
   const fullPath = segments.join(" / ");
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     "div",
     {
-      className: twMerge25("relative flex", className),
+      className: twMerge27("relative flex", className),
       "aria-label": `Path: ${fullPath}`,
       children: segments.map((segment, i) => {
         const isCollapsed = i < dotCount;
         const isLast = i === segments.length - 1;
-        const cx = twMerge25(!isLast && "pr-5 -mr-4", isCollapsed && "pr-3");
+        const cx = twMerge27(!isLast && "pr-5 -mr-4", isCollapsed && "pr-3");
         const color = colorFn ? colorFn(segment, i) : pillColorFromName(segment);
-        return /* @__PURE__ */ jsx47(
+        return /* @__PURE__ */ jsx48(
           Badge,
           {
             className: cx,
@@ -3216,7 +3193,7 @@ function PathPill({
 
 // src/components/FormWizard/FormWizard.tsx
 import { createContext as createContext5, useContext as useContext5, useCallback as useCallback4, useMemo } from "react";
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var FormWizardContext = createContext5({
   currentStep: 0,
   totalSteps: 1,
@@ -3251,13 +3228,13 @@ function FormWizard({
     }),
     [currentStep, totalSteps, canGoBack, goBack, isLastStep]
   );
-  return /* @__PURE__ */ jsx48(FormWizardContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx49(FormWizardContext.Provider, { value, children });
 }
 
 // src/components/FormWizard/FormWizardProgress.tsx
-import { jsx as jsx49, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs31 } from "react/jsx-runtime";
 function CheckIcon() {
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx50(
     "svg",
     {
       "aria-hidden": "true",
@@ -3268,13 +3245,13 @@ function CheckIcon() {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx49("path", { d: "M3 8.5l3.5 3.5 6.5-7" })
+      children: /* @__PURE__ */ jsx50("path", { d: "M3 8.5l3.5 3.5 6.5-7" })
     }
   );
 }
 function FormWizardProgress({ labels }) {
   const { currentStep, totalSteps } = useFormWizard();
-  return /* @__PURE__ */ jsx49("nav", { "aria-label": "Form progress", children: /* @__PURE__ */ jsx49("ol", { className: "flex items-start", role: "list", children: labels.map((label, index) => {
+  return /* @__PURE__ */ jsx50("nav", { "aria-label": "Form progress", children: /* @__PURE__ */ jsx50("ol", { className: "flex items-start", role: "list", children: labels.map((label, index) => {
     const isCompleted = index < currentStep;
     const isCurrent = index === currentStep;
     const isFuture = index > currentStep;
@@ -3285,7 +3262,7 @@ function FormWizardProgress({ labels }) {
         "aria-current": isCurrent ? "step" : void 0,
         children: [
           /* @__PURE__ */ jsxs31("div", { className: "flex w-full items-center", children: [
-            index > 0 ? /* @__PURE__ */ jsx49(
+            index > 0 ? /* @__PURE__ */ jsx50(
               "div",
               {
                 "aria-hidden": "true",
@@ -3294,8 +3271,8 @@ function FormWizardProgress({ labels }) {
                   index <= currentStep ? "bg-primary" : "bg-border"
                 ].join(" ")
               }
-            ) : /* @__PURE__ */ jsx49("div", { className: "flex-1", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx49(
+            ) : /* @__PURE__ */ jsx50("div", { className: "flex-1", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx50(
               "div",
               {
                 className: [
@@ -3307,10 +3284,10 @@ function FormWizardProgress({ labels }) {
                   isFuture ? "border-2 border-border bg-background text-muted-foreground" : ""
                 ].join(" "),
                 "aria-hidden": "true",
-                children: isCompleted ? /* @__PURE__ */ jsx49(CheckIcon, {}) : index + 1
+                children: isCompleted ? /* @__PURE__ */ jsx50(CheckIcon, {}) : index + 1
               }
             ),
-            index < totalSteps - 1 ? /* @__PURE__ */ jsx49(
+            index < totalSteps - 1 ? /* @__PURE__ */ jsx50(
               "div",
               {
                 "aria-hidden": "true",
@@ -3319,9 +3296,9 @@ function FormWizardProgress({ labels }) {
                   index < currentStep ? "bg-primary" : "bg-border"
                 ].join(" ")
               }
-            ) : /* @__PURE__ */ jsx49("div", { className: "flex-1", "aria-hidden": "true" })
+            ) : /* @__PURE__ */ jsx50("div", { className: "flex-1", "aria-hidden": "true" })
           ] }),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx50(
             "span",
             {
               className: [
@@ -3339,7 +3316,7 @@ function FormWizardProgress({ labels }) {
 }
 
 // src/components/FormWizard/FormWizardNav.tsx
-import { jsx as jsx50, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs32 } from "react/jsx-runtime";
 function FormWizardNav({
   onNext,
   isSubmitting = false,
@@ -3347,7 +3324,7 @@ function FormWizardNav({
 }) {
   const { canGoBack, goBack, isLastStep } = useFormWizard();
   return /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-end gap-3", children: [
-    canGoBack && /* @__PURE__ */ jsx50(
+    canGoBack && /* @__PURE__ */ jsx51(
       Button,
       {
         variant: "secondary",
@@ -3357,7 +3334,7 @@ function FormWizardNav({
         children: "Back"
       }
     ),
-    /* @__PURE__ */ jsx50(
+    /* @__PURE__ */ jsx51(
       Button,
       {
         variant: "primary",
@@ -3411,6 +3388,7 @@ export {
   MenuSection,
   MenuSeparator,
   MetricCard,
+  MetricText,
   PathPill,
   Popover4 as Popover,
   PopoverContent,
@@ -3443,11 +3421,14 @@ export {
   TabList2 as UnstyledTabList,
   TabPanel2 as UnstyledTabPanel,
   Tabs2 as UnstyledTabs,
+  buttonBaseClass,
   createToastBridge,
   iconRegistry,
   pillColorFromName,
+  selectedStyles,
   useContextMenu,
   useFormWizard,
-  useToast
+  useToast,
+  variantStyles
 };
 //# sourceMappingURL=index.js.map