@cytario/design 9.6.2 → 9.7.0

package/dist/index.js

@@ -1930,10 +1930,78 @@ function RadioButton({ children, className, ...props }) {
   );
 }
 
+// src/components/Form/Slider/Slider.tsx
+import {
+  Slider as AriaSlider,
+  SliderTrack,
+  SliderFill,
+  SliderThumb
+} from "react-aria-components";
+import { twMerge as twMerge14 } from "tailwind-merge";
+import { Fragment as Fragment6, jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
+function Slider({
+  label,
+  output,
+  description,
+  errorMessage,
+  children,
+  className,
+  isDisabled,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx25(
+    AriaSlider,
+    {
+      ...props,
+      isDisabled,
+      className: twMerge14(
+        // data-disabled lands on the root (tailwindcss-react-aria-components
+        // maps the disabled: variant onto it).
+        "w-full flex flex-col gap-2 disabled:opacity-50 disabled:cursor-default",
+        className
+      ),
+      children: ({ state }) => /* @__PURE__ */ jsxs16(Fragment6, { children: [
+        /* @__PURE__ */ jsxs16("div", { className: "flex items-center justify-between", children: [
+          label && /* @__PURE__ */ jsx25(Label, { children: label }),
+          output && /* @__PURE__ */ jsx25("span", { className: "text-sm font-medium text-foreground tabular-nums", children: output(state.values[0]) })
+        ] }),
+        /* @__PURE__ */ jsxs16(SliderTrack, { className: "flex h-6 w-full cursor-pointer items-center", children: [
+          /* @__PURE__ */ jsx25("div", { className: "relative h-1.5 w-full overflow-hidden rounded-full bg-border", children: /* @__PURE__ */ jsx25(SliderFill, { className: "h-full rounded-full bg-primary" }) }),
+          /* @__PURE__ */ jsx25(
+            SliderThumb,
+            {
+              className: twMerge14(
+                "top-1/2 h-4 w-4 rounded-full bg-background",
+                "border-2 border-primary",
+                "shadow-sm",
+                "transition-[box-shadow,border-color]",
+                "hovered:border-primary-hover",
+                "dragging:cursor-grabbing",
+                "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+              )
+            }
+          )
+        ] }),
+        (description || errorMessage) && /* @__PURE__ */ jsx25(
+          "p",
+          {
+            className: twMerge14(
+              "text-xs text-muted-foreground",
+              errorMessage && "text-destructive"
+            ),
+            children: errorMessage ?? description
+          }
+        ),
+        children
+      ] })
+    }
+  );
+}
+
 // src/components/Form/Fieldset/Fieldset.tsx
-import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 function Fieldset({ legend, children, className }) {
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "fieldset",
     {
       className: [
@@ -1942,7 +2010,7 @@ function Fieldset({ legend, children, className }) {
         className
       ].filter(Boolean).join(" "),
       children: [
-        legend && /* @__PURE__ */ jsx25(
+        legend && /* @__PURE__ */ jsx26(
           "legend",
           {
             className: [
@@ -1964,7 +2032,7 @@ function Fieldset({ legend, children, className }) {
 import {
   Link as AriaLink3
 } from "react-aria-components";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var variantStyles2 = {
   default: [
     "text-teal-700 underline",
@@ -1980,7 +2048,7 @@ function Link({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     AriaLink3,
     {
       ...props,
@@ -2001,20 +2069,20 @@ import {
   Link as Link2
 } from "react-aria-components";
 import { ChevronRight as ChevronRight2 } from "lucide-react";
-import { Fragment as Fragment6, jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
 function Breadcrumbs({ items, className }) {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     "nav",
     {
       "aria-label": "Breadcrumb",
       className,
-      children: /* @__PURE__ */ jsx27(
+      children: /* @__PURE__ */ jsx28(
         AriaBreadcrumbs,
         {
           className: "flex items-center gap-1 text-sm min-w-0",
           children: items.map((item, index) => {
             const isLast = index === items.length - 1;
-            return /* @__PURE__ */ jsx27(
+            return /* @__PURE__ */ jsx28(
               AriaBreadcrumb,
               {
                 id: item.id,
@@ -2022,8 +2090,8 @@ function Breadcrumbs({ items, className }) {
                   "flex items-center gap-1",
                   isLast ? "min-w-0" : "shrink-0"
                 ].join(" "),
-                children: isLast ? /* @__PURE__ */ jsx27("span", { className: "font-medium text-foreground truncate", children: item.label }) : /* @__PURE__ */ jsxs17(Fragment6, { children: [
-                  /* @__PURE__ */ jsx27(
+                children: isLast ? /* @__PURE__ */ jsx28("span", { className: "font-medium text-foreground truncate", children: item.label }) : /* @__PURE__ */ jsxs18(Fragment7, { children: [
+                  /* @__PURE__ */ jsx28(
                     Link2,
                     {
                       href: item.href,
@@ -2031,7 +2099,7 @@ function Breadcrumbs({ items, className }) {
                       children: item.label
                     }
                   ),
-                  /* @__PURE__ */ jsx27(
+                  /* @__PURE__ */ jsx28(
                     ChevronRight2,
                     {
                       className: "shrink-0 text-slate-400",
@@ -2054,8 +2122,8 @@ function Breadcrumbs({ items, className }) {
 import {
   ToggleButton as AriaToggleButton2
 } from "react-aria-components";
-import { twMerge as twMerge14 } from "tailwind-merge";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { twMerge as twMerge15 } from "tailwind-merge";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var squareSizeStyles2 = {
   xs: "h-6 w-6 text-xs",
   sm: "h-7 w-7 text-sm",
@@ -2100,11 +2168,11 @@ function ToggleButton({
   ...props
 }) {
   const styles = variantStyles3[variant];
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     AriaToggleButton2,
     {
       ...props,
-      className: ({ isSelected }) => twMerge14(
+      className: ({ isSelected }) => twMerge15(
         "inline-flex items-center justify-center gap-2 cursor-pointer",
         isSquare ? "rounded-none" : "rounded-md",
         "font-medium",
@@ -2127,7 +2195,7 @@ import {
   MenuItem as AriaMenuItem,
   Popover as Popover2
 } from "react-aria-components";
-import { twMerge as twMerge15 } from "tailwind-merge";
+import { twMerge as twMerge16 } from "tailwind-merge";
 
 // src/components/Menu/menuStyles.ts
 var popoverStyles = `
@@ -2139,7 +2207,7 @@ var popoverStyles = `
 `;
 
 // src/components/Menu/Menu.tsx
-import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
 function Menu2({
   items,
   content,
@@ -2152,9 +2220,9 @@ function Menu2({
   className
 }) {
   const selectionProps = selectionMode && selectionMode !== "none" ? { selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange } : {};
-  return /* @__PURE__ */ jsxs18(MenuTrigger, { children: [
+  return /* @__PURE__ */ jsxs19(MenuTrigger, { children: [
     children,
-    /* @__PURE__ */ jsx29(Popover2, { className: twMerge15(popoverStyles, className), children: items ? /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx30(Popover2, { className: twMerge16(popoverStyles, className), children: items ? /* @__PURE__ */ jsx30(
       AriaMenu,
       {
         items,
@@ -2165,7 +2233,7 @@ function Menu2({
         },
         ...selectionProps,
         className: "outline-none",
-        children: (item) => /* @__PURE__ */ jsxs18(
+        children: (item) => /* @__PURE__ */ jsxs19(
           AriaMenuItem,
           {
             id: item.id,
@@ -2181,14 +2249,14 @@ function Menu2({
               item.isDanger ? "text-destructive" : "text-foreground"
             ].filter(Boolean).join(" "),
             children: [
-              item.icon && /* @__PURE__ */ jsx29(Icon, { icon: item.icon, size: "sm" }),
-              /* @__PURE__ */ jsx29("span", { className: "flex-1", children: item.label }),
-              item.endContent && /* @__PURE__ */ jsx29("span", { className: "ml-auto flex items-center", children: item.endContent })
+              item.icon && /* @__PURE__ */ jsx30(Icon, { icon: item.icon, size: "sm" }),
+              /* @__PURE__ */ jsx30("span", { className: "flex-1", children: item.label }),
+              item.endContent && /* @__PURE__ */ jsx30("span", { className: "ml-auto flex items-center", children: item.endContent })
             ]
           }
         )
       }
-    ) : /* @__PURE__ */ jsx29(
+    ) : /* @__PURE__ */ jsx30(
       AriaMenu,
       {
         onAction: (key) => onAction?.(key),
@@ -2213,8 +2281,8 @@ import {
   MenuTrigger as MenuTrigger2,
   Popover as Popover3
 } from "react-aria-components";
-import { twMerge as twMerge16 } from "tailwind-merge";
-import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
+import { twMerge as twMerge17 } from "tailwind-merge";
+import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
 function useContextMenu({
   content,
   label,
@@ -2258,7 +2326,7 @@ function useContextMenu({
       document.removeEventListener("keydown", onKeyDown, true);
     };
   }, [isOpen, close]);
-  const menu = /* @__PURE__ */ jsxs19(
+  const menu = /* @__PURE__ */ jsxs20(
     MenuTrigger2,
     {
       isOpen,
@@ -2266,7 +2334,7 @@ function useContextMenu({
         if (!open) close();
       },
       children: [
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx31(
           "span",
           {
             ref: anchorRef,
@@ -2276,15 +2344,15 @@ function useContextMenu({
             style: { left: anchor?.x ?? 0, top: anchor?.y ?? 0 }
           }
         ),
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx31(
           Popover3,
           {
             isNonModal: true,
             triggerRef: anchorRef,
             placement: "bottom start",
             ref: popoverRef,
-            className: twMerge16(popoverStyles, className),
-            children: /* @__PURE__ */ jsx30(
+            className: twMerge17(popoverStyles, className),
+            children: /* @__PURE__ */ jsx31(
               AriaMenu2,
               {
                 id: popoverId,
@@ -2322,7 +2390,7 @@ function useContextMenu({
 
 // src/components/Menu/MenuItem.tsx
 import { MenuItem as AriaMenuItem2 } from "react-aria-components";
-import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
 function MenuItem({
   id,
   children,
@@ -2336,7 +2404,7 @@ function MenuItem({
   textValue,
   className
 }) {
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     AriaMenuItem2,
     {
       id,
@@ -2355,9 +2423,9 @@ function MenuItem({
         className
       ].filter(Boolean).join(" "),
       children: [
-        icon && /* @__PURE__ */ jsx31(Icon, { icon, size: "sm" }),
-        /* @__PURE__ */ jsx31("span", { className: "flex-1", children }),
-        endContent && /* @__PURE__ */ jsx31("span", { className: "ml-auto flex items-center", children: endContent })
+        icon && /* @__PURE__ */ jsx32(Icon, { icon, size: "sm" }),
+        /* @__PURE__ */ jsx32("span", { className: "flex-1", children }),
+        endContent && /* @__PURE__ */ jsx32("span", { className: "ml-auto flex items-center", children: endContent })
       ]
     }
   );
@@ -2366,7 +2434,7 @@ function MenuItem({
 // src/components/Menu/MenuCheckboxItem.tsx
 import { MenuItem as AriaMenuItem3 } from "react-aria-components";
 import { Check as Check4 } from "lucide-react";
-import { Fragment as Fragment7, jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
 function MenuCheckboxItem({
   id,
   children,
@@ -2374,7 +2442,7 @@ function MenuCheckboxItem({
   isDisabled,
   className
 }) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     AriaMenuItem3,
     {
       id,
@@ -2390,9 +2458,9 @@ function MenuCheckboxItem({
         isSelected ? "font-medium" : "",
         className
       ].filter(Boolean).join(" "),
-      children: ({ isSelected }) => /* @__PURE__ */ jsxs21(Fragment7, { children: [
-        /* @__PURE__ */ jsx32("span", { className: "flex items-center justify-center w-4 h-4 shrink-0", children: isSelected && /* @__PURE__ */ jsx32(Check4, { size: 14, className: "text-primary", "aria-hidden": "true" }) }),
-        /* @__PURE__ */ jsx32("span", { className: "flex-1", children })
+      children: ({ isSelected }) => /* @__PURE__ */ jsxs22(Fragment8, { children: [
+        /* @__PURE__ */ jsx33("span", { className: "flex items-center justify-center w-4 h-4 shrink-0", children: isSelected && /* @__PURE__ */ jsx33(Check4, { size: 14, className: "text-primary", "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsx33("span", { className: "flex-1", children })
       ] })
     }
   );
@@ -2403,15 +2471,15 @@ import {
   MenuSection as AriaMenuSection,
   Header
 } from "react-aria-components";
-import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
 function MenuSection({
   header,
   children,
   "aria-label": ariaLabel,
   className
 }) {
-  return /* @__PURE__ */ jsxs22(AriaMenuSection, { className, "aria-label": ariaLabel, children: [
-    header && /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsxs23(AriaMenuSection, { className, "aria-label": ariaLabel, children: [
+    header && /* @__PURE__ */ jsx34(
       Header,
       {
         className: [
@@ -2430,16 +2498,16 @@ function MenuSection({
 
 // src/components/Menu/MenuHeader.tsx
 import { Header as Header2 } from "react-aria-components";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function MenuHeader({ children, className }) {
-  return /* @__PURE__ */ jsx34(Header2, { className, children });
+  return /* @__PURE__ */ jsx35(Header2, { className, children });
 }
 
 // src/components/Menu/MenuSeparator.tsx
 import { Separator } from "react-aria-components";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function MenuSeparator({ className }) {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     Separator,
     {
       className: [
@@ -2456,17 +2524,17 @@ import {
   Popover as AriaPopover,
   Button as AriaButton3
 } from "react-aria-components";
-import { twMerge as twMerge17 } from "tailwind-merge";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { twMerge as twMerge18 } from "tailwind-merge";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function Popover4({ children, isOpen, onOpenChange }) {
-  return /* @__PURE__ */ jsx36(DialogTrigger, { isOpen, onOpenChange, children });
+  return /* @__PURE__ */ jsx37(DialogTrigger, { isOpen, onOpenChange, children });
 }
 function PopoverTrigger({ children, className }) {
   const cx = `
     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: twMerge17(cx, className), children });
+  return /* @__PURE__ */ jsx37(AriaButton3, { className: twMerge18(cx, className), children });
 }
 function PopoverContent({
   placement = "bottom",
@@ -2487,13 +2555,13 @@ function PopoverContent({
     entering:placement-left:slide-in-from-right-1
     entering:placement-right:slide-in-from-left-1
   `;
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     AriaPopover,
     {
       ...rest,
       placement,
       offset: offsetPx,
-      className: twMerge17(cx, className),
+      className: twMerge18(cx, className),
       children
     }
   );
@@ -2501,14 +2569,14 @@ function PopoverContent({
 
 // src/components/Tabs/Tabs.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
-import { twMerge as twMerge18 } from "tailwind-merge";
+import { twMerge as twMerge19 } from "tailwind-merge";
 import {
   Tabs as AriaTabs,
   TabList as AriaTabList,
   Tab as AriaTab,
   TabPanel as AriaTabPanel
 } from "react-aria-components";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var TabsContext = createContext2({
   variant: "underline",
   size: "md"
@@ -2526,12 +2594,12 @@ function Tabs({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx37(TabsContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(TabsContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx38(
     AriaTabs,
     {
       ...props,
       orientation,
-      className: twMerge18(
+      className: twMerge19(
         orientation === "vertical" ? "flex" : "",
         className
       ),
@@ -2546,11 +2614,11 @@ function TabList({
   const { variant } = useContext2(TabsContext);
   const baseStyles = variant === "unstyled" ? "flex items-center" : variant === "underline" ? "flex items-center border-b border-border" : "inline-flex items-center bg-muted rounded-lg p-1 gap-1";
   const verticalStyles = variant === "unstyled" ? "flex-col" : variant === "underline" ? "flex-col border-b-0 border-r border-border" : "flex-col";
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     AriaTabList,
     {
       ...props,
-      className: ({ orientation }) => twMerge18(
+      className: ({ orientation }) => twMerge19(
         baseStyles,
         orientation === "vertical" ? verticalStyles : "",
         className
@@ -2560,20 +2628,20 @@ function TabList({
 }
 function Tab({ className, ...props }) {
   const { variant, size } = useContext2(TabsContext);
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     AriaTab,
     {
       ...props,
       className: ({ isSelected, isDisabled, isHovered, isPressed }) => {
         if (variant === "unstyled") {
-          return twMerge18(
+          return twMerge19(
             "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 twMerge18(
+        return twMerge19(
           // Base
           "cursor-pointer outline-none transition-colors",
           "font-medium",
@@ -2617,11 +2685,11 @@ function getTabVariantStyles(variant, state) {
 }
 function TabPanel({ className, ...props }) {
   const { variant } = useContext2(TabsContext);
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     AriaTabPanel,
     {
       ...props,
-      className: twMerge18(
+      className: twMerge19(
         variant === "unstyled" ? "outline-none" : "mt-4 outline-none",
         className
       )
@@ -2639,12 +2707,12 @@ import {
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { createContext as createContext3, useContext as useContext3 } from "react";
-import { twMerge as twMerge19 } from "tailwind-merge";
+import { twMerge as twMerge20 } from "tailwind-merge";
 import {
   ToggleButtonGroup as AriaToggleButtonGroup,
   ToggleButton as AriaToggleButton3
 } from "react-aria-components";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var SegmentedControlContext = createContext3({
   size: "md"
 });
@@ -2664,7 +2732,7 @@ function SegmentedControl({
   ...props
 }) {
   const isNoneMode = selectionMode === "none";
-  return /* @__PURE__ */ jsx38(SegmentedControlContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(SegmentedControlContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx39(
     AriaToggleButtonGroup,
     {
       ...props,
@@ -2672,7 +2740,7 @@ function SegmentedControl({
       selectedKeys: isNoneMode ? /* @__PURE__ */ new Set() : selectedKeys,
       defaultSelectedKeys: isNoneMode ? void 0 : defaultSelectedKeys,
       onSelectionChange: isNoneMode ? void 0 : onSelectionChange,
-      className: twMerge19(
+      className: twMerge20(
         "inline-flex items-center rounded-lg border border-border bg-muted p-0.5 gap-0.5",
         className
       ),
@@ -2685,11 +2753,11 @@ function SegmentedControlItem({
   ...props
 }) {
   const { size } = useContext3(SegmentedControlContext);
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     AriaToggleButton3,
     {
       ...props,
-      className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge19(
+      className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge20(
         // Base layout
         "inline-flex items-center justify-center",
         "rounded-md",
@@ -2710,21 +2778,21 @@ function SegmentedControlItem({
 }
 
 // src/components/Badge/Badge.tsx
-import { twMerge as twMerge21 } from "tailwind-merge";
+import { twMerge as twMerge22 } from "tailwind-merge";
 
 // src/components/MetricText/MetricText.tsx
-import { twMerge as twMerge20 } from "tailwind-merge";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { twMerge as twMerge21 } from "tailwind-merge";
+import { jsx as jsx40 } from "react/jsx-runtime";
 function MetricText({ className, ...rest }) {
-  const cx = twMerge20(
+  const cx = twMerge21(
     "text-xs font-medium leading-none tracking-wider tabular-nums",
     className
   );
-  return /* @__PURE__ */ jsx39("span", { className: cx, ...rest });
+  return /* @__PURE__ */ jsx40("span", { className: cx, ...rest });
 }
 
 // src/components/Badge/Badge.tsx
-import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs24 } 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",
@@ -2747,10 +2815,10 @@ function Badge({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     MetricText,
     {
-      className: twMerge21(
+      className: twMerge22(
         "inline-flex items-center gap-1 rounded-full border",
         colorStyles[color],
         sizeStyles6[size],
@@ -2758,7 +2826,7 @@ function Badge({
       ),
       ...rest,
       children: [
-        icon && /* @__PURE__ */ jsx40(Icon, { icon, size: "xs" }),
+        icon && /* @__PURE__ */ jsx41(Icon, { icon, size: "xs" }),
         children
       ]
     }
@@ -2766,10 +2834,10 @@ function Badge({
 }
 
 // src/components/Card/Card.tsx
-import { twMerge as twMerge22 } from "tailwind-merge";
-import { jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
+import { twMerge as twMerge23 } from "tailwind-merge";
+import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
 function Card({ children, header, footer, className }) {
-  const cx = twMerge22(
+  const cx = twMerge23(
     `
       bg-card p-8
       border border-border
@@ -2778,17 +2846,17 @@ function Card({ children, header, footer, className }) {
     `,
     className
   );
-  return /* @__PURE__ */ jsxs24("div", { className: cx, children: [
-    header && /* @__PURE__ */ jsx41("div", { className: "border-b border-border", children: header }),
+  return /* @__PURE__ */ jsxs25("div", { className: cx, children: [
+    header && /* @__PURE__ */ jsx42("div", { className: "border-b border-border", children: header }),
     children,
-    footer && /* @__PURE__ */ jsx41("div", { className: "border-t border-border", children: footer })
+    footer && /* @__PURE__ */ jsx42("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 twMerge23 } from "tailwind-merge";
-import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
+import { twMerge as twMerge24 } from "tailwind-merge";
+import { jsx as jsx43, jsxs as jsxs26 } from "react/jsx-runtime";
 function getDirection(current, previous) {
   const diff = current - previous;
   if (diff > 0) return "increase";
@@ -2841,16 +2909,16 @@ function DeltaIndicator({
   className
 }) {
   if (unavailable) {
-    return /* @__PURE__ */ jsxs25(
+    return /* @__PURE__ */ jsxs26(
       "span",
       {
-        className: twMerge23(
+        className: twMerge24(
           "inline-flex items-center gap-1 font-medium",
           "text-muted-foreground",
           className
         ),
         children: [
-          label && /* @__PURE__ */ jsx42("span", { className: "text-sm text-muted-foreground mr-1", children: label }),
+          label && /* @__PURE__ */ jsx43("span", { className: "text-sm text-muted-foreground mr-1", children: label }),
           unavailableText
         ]
       }
@@ -2880,10 +2948,10 @@ function DeltaIndicator({
     }
   }
   const isPill = mode === "pill";
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     "span",
     {
-      className: twMerge23(
+      className: twMerge24(
         "inline-flex items-center gap-1 font-medium",
         colorStyles2,
         isPill && [
@@ -2894,8 +2962,8 @@ function DeltaIndicator({
         className
       ),
       children: [
-        label && /* @__PURE__ */ jsx42("span", { className: "text-sm text-muted-foreground mr-1", children: label }),
-        /* @__PURE__ */ jsx42(IconComponent, { size: 14, "aria-hidden": true }),
+        label && /* @__PURE__ */ jsx43("span", { className: "text-sm text-muted-foreground mr-1", children: label }),
+        /* @__PURE__ */ jsx43(IconComponent, { size: 14, "aria-hidden": true }),
         valueText
       ]
     }
@@ -2903,8 +2971,8 @@ function DeltaIndicator({
 }
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { twMerge as twMerge24 } from "tailwind-merge";
-import { jsx as jsx43, jsxs as jsxs26 } from "react/jsx-runtime";
+import { twMerge as twMerge25 } from "tailwind-merge";
+import { jsx as jsx44, jsxs as jsxs27 } from "react/jsx-runtime";
 var fillStyles = {
   brand: "bg-progress-fill",
   success: "bg-progress-fill-success",
@@ -2927,12 +2995,12 @@ function ProgressBar({
   className
 }) {
   const clampedValue = Math.min(100, Math.max(0, value));
-  return /* @__PURE__ */ jsxs26("div", { className: twMerge24("w-full", className), children: [
-    (label || description || showValue) && /* @__PURE__ */ jsxs26("div", { className: "flex items-center justify-between mb-2", children: [
-      /* @__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) })
+  return /* @__PURE__ */ jsxs27("div", { className: twMerge25("w-full", className), children: [
+    (label || description || showValue) && /* @__PURE__ */ jsxs27("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ jsx44("span", { className: "text-sm font-medium text-foreground", children: label }),
+      /* @__PURE__ */ jsx44("span", { className: "text-sm text-muted-foreground", children: description ?? (showValue ? `${clampedValue}%` : null) })
     ] }),
-    /* @__PURE__ */ jsx43(
+    /* @__PURE__ */ jsx44(
       "div",
       {
         role: "progressbar",
@@ -2940,14 +3008,14 @@ function ProgressBar({
         "aria-valuemin": 0,
         "aria-valuemax": 100,
         "aria-label": label ?? "Progress",
-        className: twMerge24(
+        className: twMerge25(
           "w-full rounded-full bg-progress-track",
           sizeStyles7[size]
         ),
-        children: /* @__PURE__ */ jsx43(
+        children: /* @__PURE__ */ jsx44(
           "div",
           {
-            className: twMerge24(
+            className: twMerge25(
               "h-full rounded-full transition-all duration-300",
               fillStyles[variant]
             ),
@@ -2967,8 +3035,8 @@ import {
   AlertCircle as AlertCircle2,
   CheckCircle2 as CheckCircle22
 } from "lucide-react";
-import { twMerge as twMerge25 } from "tailwind-merge";
-import { jsx as jsx44, jsxs as jsxs27 } from "react/jsx-runtime";
+import { twMerge as twMerge26 } from "tailwind-merge";
+import { jsx as jsx45, jsxs as jsxs28 } from "react/jsx-runtime";
 var variantConfig2 = {
   info: {
     icon: Info3,
@@ -3012,40 +3080,40 @@ function Banner({
     setDismissed(true);
     onDismiss?.();
   };
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     "div",
     {
       role: config.role,
-      className: twMerge25(
+      className: twMerge26(
         "flex items-start gap-3 rounded-lg border px-4 py-3",
         "text-sm",
         config.containerClass,
         className
       ),
       children: [
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx45(
           Icon,
           {
             icon: resolvedIcon,
             size: "md",
-            className: twMerge25("mt-0.5", config.iconClass)
+            className: twMerge26("mt-0.5", config.iconClass)
           }
         ),
-        /* @__PURE__ */ jsxs27("div", { className: "flex-1", children: [
-          title && /* @__PURE__ */ jsxs27("span", { className: "font-medium", children: [
+        /* @__PURE__ */ jsxs28("div", { className: "flex-1", children: [
+          title && /* @__PURE__ */ jsxs28("span", { className: "font-medium", children: [
             title,
             " \u2014 "
           ] }),
           children
         ] }),
-        dismissible && /* @__PURE__ */ jsx44(
+        dismissible && /* @__PURE__ */ jsx45(
           "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__ */ jsx44(Icon, { icon: "X", size: "sm" })
+            children: /* @__PURE__ */ jsx45(Icon, { icon: "X", size: "sm" })
           }
         )
       ]
@@ -3054,8 +3122,8 @@ function Banner({
 }
 
 // src/components/MetricCard/MetricCard.tsx
-import { twMerge as twMerge26 } from "tailwind-merge";
-import { Fragment as Fragment8, jsx as jsx45, jsxs as jsxs28 } from "react/jsx-runtime";
+import { twMerge as twMerge27 } from "tailwind-merge";
+import { Fragment as Fragment9, jsx as jsx46, jsxs as jsxs29 } from "react/jsx-runtime";
 var sizeConfig = {
   sm: {
     padding: "p-3",
@@ -3077,50 +3145,50 @@ function MetricCard({
   className
 }) {
   const config = sizeConfig[size];
-  const containerClass = twMerge26(
+  const containerClass = twMerge27(
     "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__ */ jsx45("div", { className: twMerge26(config.labelClass, "text-muted-foreground"), children: label }),
-    /* @__PURE__ */ jsx45(
+  const content = /* @__PURE__ */ jsxs29(Fragment9, { children: [
+    /* @__PURE__ */ jsx46("div", { className: twMerge27(config.labelClass, "text-muted-foreground"), children: label }),
+    /* @__PURE__ */ jsx46(
       "div",
       {
-        className: twMerge26(
+        className: twMerge27(
           config.valueClass,
           "font-semibold text-foreground mt-1 tabular-nums"
         ),
         children: value
       }
     ),
-    secondary && /* @__PURE__ */ jsx45("div", { className: "mt-1 text-sm", children: secondary })
+    secondary && /* @__PURE__ */ jsx46("div", { className: "mt-1 text-sm", children: secondary })
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx45("a", { href, className: containerClass, children: content });
+    return /* @__PURE__ */ jsx46("a", { href, className: containerClass, children: content });
   }
-  return /* @__PURE__ */ jsx45("div", { className: containerClass, children: content });
+  return /* @__PURE__ */ jsx46("div", { className: containerClass, children: content });
 }
 
 // src/components/SectionHeader/SectionHeader.tsx
 import { forwardRef as forwardRef7 } from "react";
-import { twMerge as twMerge27 } from "tailwind-merge";
-import { jsx as jsx46, jsxs as jsxs29 } from "react/jsx-runtime";
+import { twMerge as twMerge28 } from "tailwind-merge";
+import { jsx as jsx47, jsxs as jsxs30 } from "react/jsx-runtime";
 var SectionHeader = forwardRef7(
   function SectionHeader2({ title, as = "h2", children, className, ...rest }, ref) {
-    return /* @__PURE__ */ jsxs29(
+    return /* @__PURE__ */ jsxs30(
       "div",
       {
         ref,
-        className: twMerge27(
+        className: twMerge28(
           "flex flex-wrap items-center gap-3 pt-0 pb-4",
           className
         ),
         ...rest,
         children: [
-          /* @__PURE__ */ jsx46(Heading, { as, children: title }),
-          children && /* @__PURE__ */ jsx46("div", { className: "ml-auto flex flex-wrap items-center gap-2", children })
+          /* @__PURE__ */ jsx47(Heading, { as, children: title }),
+          children && /* @__PURE__ */ jsx47("div", { className: "ml-auto flex flex-wrap items-center gap-2", children })
         ]
       }
     );
@@ -3130,7 +3198,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 jsx47, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs31 } from "react/jsx-runtime";
 var LayoutContext = createContext4("stacked");
 var listGapStyles = {
   stacked: "gap-4",
@@ -3141,7 +3209,7 @@ function DescriptionList({
   layout = "stacked",
   className
 }) {
-  return /* @__PURE__ */ jsx47(LayoutContext.Provider, { value: layout, children: /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(LayoutContext.Provider, { value: layout, children: /* @__PURE__ */ jsx48(
     "dl",
     {
       className: ["flex flex-col", listGapStyles[layout], className].filter(Boolean).join(" "),
@@ -3165,17 +3233,17 @@ function DescriptionListItem({
     "text-sm m-0",
     muted ? "text-muted-foreground" : "text-foreground"
   ].join(" ");
-  const valueContent = /* @__PURE__ */ jsx47("dd", { className: valueClasses, children });
-  return /* @__PURE__ */ jsxs30("div", { className: itemLayoutStyles[layout], children: [
-    /* @__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
+  const valueContent = /* @__PURE__ */ jsx48("dd", { className: valueClasses, children });
+  return /* @__PURE__ */ jsxs31("div", { className: itemLayoutStyles[layout], children: [
+    /* @__PURE__ */ jsx48("dt", { className: labelClasses, children: label }),
+    fullValue ? /* @__PURE__ */ jsx48(Tooltip, { content: fullValue, children: /* @__PURE__ */ jsx48(AriaButton4, { className: "text-left outline-none cursor-default", children: valueContent }) }) : valueContent
   ] });
 }
 DescriptionList.Item = DescriptionListItem;
 
 // src/components/PathPill/PathPill.tsx
-import { twMerge as twMerge28 } from "tailwind-merge";
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { twMerge as twMerge29 } from "tailwind-merge";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var hashColors = [
   "purple",
   "teal",
@@ -3201,17 +3269,17 @@ function PathPill({
   const effectiveVisible = visibleCount ?? segments.length;
   const dotCount = Math.max(0, segments.length - effectiveVisible);
   const fullPath = segments.join(" / ");
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     "div",
     {
-      className: twMerge28("relative flex", className),
+      className: twMerge29("relative flex", className),
       "aria-label": `Path: ${fullPath}`,
       children: segments.map((segment, i) => {
         const isCollapsed = i < dotCount;
         const isLast = i === segments.length - 1;
-        const cx = twMerge28(!isLast && "pr-5 -mr-4", isCollapsed && "pr-3");
+        const cx = twMerge29(!isLast && "pr-5 -mr-4", isCollapsed && "pr-3");
         const color = colorFn ? colorFn(segment, i) : pillColorFromName(segment);
-        return /* @__PURE__ */ jsx48(
+        return /* @__PURE__ */ jsx49(
           Badge,
           {
             className: cx,
@@ -3228,7 +3296,7 @@ function PathPill({
 
 // src/components/FormWizard/FormWizard.tsx
 import { createContext as createContext5, useContext as useContext5, useCallback as useCallback4, useMemo } from "react";
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 var FormWizardContext = createContext5({
   currentStep: 0,
   totalSteps: 1,
@@ -3263,13 +3331,13 @@ function FormWizard({
     }),
     [currentStep, totalSteps, canGoBack, goBack, isLastStep]
   );
-  return /* @__PURE__ */ jsx49(FormWizardContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx50(FormWizardContext.Provider, { value, children });
 }
 
 // src/components/FormWizard/FormWizardProgress.tsx
-import { jsx as jsx50, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs32 } from "react/jsx-runtime";
 function CheckIcon() {
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(
     "svg",
     {
       "aria-hidden": "true",
@@ -3280,24 +3348,24 @@ function CheckIcon() {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx50("path", { d: "M3 8.5l3.5 3.5 6.5-7" })
+      children: /* @__PURE__ */ jsx51("path", { d: "M3 8.5l3.5 3.5 6.5-7" })
     }
   );
 }
 function FormWizardProgress({ labels }) {
   const { currentStep, totalSteps } = useFormWizard();
-  return /* @__PURE__ */ jsx50("nav", { "aria-label": "Form progress", children: /* @__PURE__ */ jsx50("ol", { className: "flex items-start", role: "list", children: labels.map((label, index) => {
+  return /* @__PURE__ */ jsx51("nav", { "aria-label": "Form progress", children: /* @__PURE__ */ jsx51("ol", { className: "flex items-start", role: "list", children: labels.map((label, index) => {
     const isCompleted = index < currentStep;
     const isCurrent = index === currentStep;
     const isFuture = index > currentStep;
-    return /* @__PURE__ */ jsxs31(
+    return /* @__PURE__ */ jsxs32(
       "li",
       {
         className: "flex flex-1 flex-col items-center",
         "aria-current": isCurrent ? "step" : void 0,
         children: [
-          /* @__PURE__ */ jsxs31("div", { className: "flex w-full items-center", children: [
-            index > 0 ? /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsxs32("div", { className: "flex w-full items-center", children: [
+            index > 0 ? /* @__PURE__ */ jsx51(
               "div",
               {
                 "aria-hidden": "true",
@@ -3306,8 +3374,8 @@ function FormWizardProgress({ labels }) {
                   index <= currentStep ? "bg-primary" : "bg-border"
                 ].join(" ")
               }
-            ) : /* @__PURE__ */ jsx50("div", { className: "flex-1", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx50(
+            ) : /* @__PURE__ */ jsx51("div", { className: "flex-1", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx51(
               "div",
               {
                 className: [
@@ -3319,10 +3387,10 @@ function FormWizardProgress({ labels }) {
                   isFuture ? "border-2 border-border bg-background text-muted-foreground" : ""
                 ].join(" "),
                 "aria-hidden": "true",
-                children: isCompleted ? /* @__PURE__ */ jsx50(CheckIcon, {}) : index + 1
+                children: isCompleted ? /* @__PURE__ */ jsx51(CheckIcon, {}) : index + 1
               }
             ),
-            index < totalSteps - 1 ? /* @__PURE__ */ jsx50(
+            index < totalSteps - 1 ? /* @__PURE__ */ jsx51(
               "div",
               {
                 "aria-hidden": "true",
@@ -3331,9 +3399,9 @@ function FormWizardProgress({ labels }) {
                   index < currentStep ? "bg-primary" : "bg-border"
                 ].join(" ")
               }
-            ) : /* @__PURE__ */ jsx50("div", { className: "flex-1", "aria-hidden": "true" })
+            ) : /* @__PURE__ */ jsx51("div", { className: "flex-1", "aria-hidden": "true" })
           ] }),
-          /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsx51(
             "span",
             {
               className: [
@@ -3351,15 +3419,15 @@ function FormWizardProgress({ labels }) {
 }
 
 // src/components/FormWizard/FormWizardNav.tsx
-import { jsx as jsx51, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs33 } from "react/jsx-runtime";
 function FormWizardNav({
   onNext,
   isSubmitting = false,
   submitLabel = "Submit"
 }) {
   const { canGoBack, goBack, isLastStep } = useFormWizard();
-  return /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-end gap-3", children: [
-    canGoBack && /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-end gap-3", children: [
+    canGoBack && /* @__PURE__ */ jsx52(
       Button,
       {
         variant: "secondary",
@@ -3369,7 +3437,7 @@ function FormWizardNav({
         children: "Back"
       }
     ),
-    /* @__PURE__ */ jsx51(
+    /* @__PURE__ */ jsx52(
       Button,
       {
         variant: "primary",
@@ -3439,6 +3507,7 @@ export {
   SegmentedControl,
   SegmentedControlItem,
   Select,
+  Slider,
   Spinner,
   Switch,
   Tab,