@contractspec/lib.ui-kit-web 3.7.5 → 3.8.0

package/dist/browser/ui/resizable.js

@@ -7,9 +7,9 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // ui/resizable.tsx
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
 import { GripVertical } from "lucide-react";
 import { Group, Panel, Separator } from "react-resizable-panels";
-import { cn } from "@contractspec/lib.ui-kit-core/utils";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 var ResizablePanelGroup = ({ className, ...props }) => /* @__PURE__ */ jsxDEV(Group, {
@@ -22,10 +22,10 @@ var ResizableHandle = ({
   className,
   ...props
 }) => /* @__PURE__ */ jsxDEV(Separator, {
-  className: cn("bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden aria-[orientation=vertical]:h-px aria-[orientation=vertical]:w-full aria-[orientation=vertical]:after:left-0 aria-[orientation=vertical]:after:h-1 aria-[orientation=vertical]:after:w-full aria-[orientation=vertical]:after:translate-x-0 aria-[orientation=vertical]:after:-translate-y-1/2 [&[aria-orientation=vertical]>div]:rotate-90", className),
+  className: cn("relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 aria-[orientation=vertical]:h-px aria-[orientation=vertical]:w-full aria-[orientation=vertical]:after:left-0 aria-[orientation=vertical]:after:h-1 aria-[orientation=vertical]:after:w-full aria-[orientation=vertical]:after:translate-x-0 aria-[orientation=vertical]:after:-translate-y-1/2 [&[aria-orientation=vertical]>div]:rotate-90", className),
   ...props,
   children: withHandle && /* @__PURE__ */ jsxDEV("div", {
-    className: "bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border",
+    className: "z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border",
     children: /* @__PURE__ */ jsxDEV(GripVertical, {
       className: "h-2.5 w-2.5"
     }, undefined, false, undefined, this)

package/dist/browser/ui/scroll-area.js

@@ -7,8 +7,8 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // ui/scroll-area.tsx
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 function ScrollArea({
@@ -23,7 +23,7 @@ function ScrollArea({
     children: [
       /* @__PURE__ */ jsxDEV(ScrollAreaPrimitive.Viewport, {
         "data-slot": "scroll-area-viewport",
-        className: "focus-visible:ring-ring/50 size-full rounded-[inherit] outline-hidden transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
+        className: "size-full rounded-[inherit] outline-hidden transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50",
         children
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV(ScrollBar, {}, undefined, false, undefined, this),
@@ -39,11 +39,11 @@ function ScrollBar({
   return /* @__PURE__ */ jsxDEV(ScrollAreaPrimitive.ScrollAreaScrollbar, {
     "data-slot": "scroll-area-scrollbar",
     orientation,
-    className: cn("flex touch-none p-px transition-colors select-none", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent", className),
+    className: cn("flex touch-none select-none p-px transition-colors", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent", className),
     ...props,
     children: /* @__PURE__ */ jsxDEV(ScrollAreaPrimitive.ScrollAreaThumb, {
       "data-slot": "scroll-area-thumb",
-      className: "bg-border relative flex-1 rounded-full"
+      className: "relative flex-1 rounded-full bg-border"
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }

package/dist/browser/ui/section.js

@@ -7,8 +7,8 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // ui/section.tsx
-import { cva } from "class-variance-authority";
 import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { cva } from "class-variance-authority";
 import { jsxDEV } from "react/jsx-dev-runtime";
 var sectionVariants = cva("", {
   variants: {

package/dist/browser/ui/select.js

@@ -7,9 +7,9 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // ui/select.tsx
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-import { cn } from "@contractspec/lib.ui-kit-core/utils";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 function Select({
@@ -45,7 +45,7 @@ function SelectTrigger({
   return /* @__PURE__ */ jsxDEV(SelectPrimitive.Trigger, {
     "data-slot": "select-trigger",
     "data-size": size,
-    className: cn("aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border-input focus-visible:border-ring focus-visible:ring-ring/50 data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-2xs outline-hidden transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+    className: cn("flex w-fit items-center justify-between gap-2 whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-2xs outline-hidden transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[size=default]:h-9 data-[size=sm]:h-8 data-placeholder:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:hover:bg-input/50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
     ...props,
     children: [
       children,
@@ -67,7 +67,7 @@ function SelectContent({
   return /* @__PURE__ */ jsxDEV(SelectPrimitive.Portal, {
     children: /* @__PURE__ */ jsxDEV(SelectPrimitive.Content, {
       "data-slot": "select-content",
-      className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
+      className: cn("data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in", position === "popper" && "data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1", className),
       position,
       ...props,
       children: [
@@ -87,7 +87,7 @@ function SelectLabel({
 }) {
   return /* @__PURE__ */ jsxDEV(SelectPrimitive.Label, {
     "data-slot": "select-label",
-    className: cn("text-muted-foreground px-2 py-1.5 text-xs", className),
+    className: cn("px-2 py-1.5 text-muted-foreground text-xs", className),
     ...props
   }, undefined, false, undefined, this);
 }
@@ -98,7 +98,7 @@ function SelectItem({
 }) {
   return /* @__PURE__ */ jsxDEV(SelectPrimitive.Item, {
     "data-slot": "select-item",
-    className: cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-xs py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+    className: cn("relative flex w-full cursor-default select-none items-center gap-2 rounded-xs py-1.5 pr-8 pl-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
     ...props,
     children: [
       /* @__PURE__ */ jsxDEV("span", {
@@ -121,7 +121,7 @@ function SelectSeparator({
 }) {
   return /* @__PURE__ */ jsxDEV(SelectPrimitive.Separator, {
     "data-slot": "select-separator",
-    className: cn("bg-border pointer-events-none -mx-1 my-1 h-px", className),
+    className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className),
     ...props
   }, undefined, false, undefined, this);
 }

package/dist/browser/ui/separator.js

@@ -7,8 +7,8 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // ui/separator.tsx
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 function Separator({
@@ -21,7 +21,7 @@ function Separator({
     "data-slot": "separator",
     decorative,
     orientation,
-    className: cn("bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", className),
+    className: cn("shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px", className),
     ...props
   }, undefined, false, undefined, this);
 }

package/dist/browser/ui/sheet.js

@@ -7,9 +7,9 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // ui/sheet.tsx
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { XIcon } from "lucide-react";
-import { cn } from "@contractspec/lib.ui-kit-core/utils";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 function Sheet({ ...props }) {
@@ -48,7 +48,7 @@ function SheetOverlay({
 }) {
   return /* @__PURE__ */ jsxDEV(SheetPrimitive.Overlay, {
     "data-slot": "sheet-overlay",
-    className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className),
+    className: cn("data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=open]:animate-in", className),
     ...props
   }, undefined, false, undefined, this);
 }
@@ -63,12 +63,12 @@ function SheetContent({
       /* @__PURE__ */ jsxDEV(SheetOverlay, {}, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV(SheetPrimitive.Content, {
         "data-slot": "sheet-content",
-        className: cn("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500", side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm", side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm", side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b", side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t", className),
+        className: cn("fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:duration-300 data-[state=open]:duration-500", side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm", side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm", side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b", side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t", className),
         ...props,
         children: [
           children,
           /* @__PURE__ */ jsxDEV(SheetPrimitive.Close, {
-            className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",
+            className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary",
             children: [
               /* @__PURE__ */ jsxDEV(XIcon, {
                 className: "size-4"
@@ -110,7 +110,7 @@ function SheetTitle({
 }) {
   return /* @__PURE__ */ jsxDEV(SheetPrimitive.Title, {
     "data-slot": "sheet-title",
-    className: cn("text-foreground font-semibold", className),
+    className: cn("font-semibold text-foreground", className),
     ...props
   }, undefined, false, undefined, this);
 }

package/dist/browser/ui/sidebar.js

@@ -7,23 +7,23 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // ui/button.tsx
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { cn } from "@contractspec/lib.ui-kit-core/utils";
 import { jsxDEV } from "react/jsx-dev-runtime";
-var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-hidden focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+var buttonVariants = cva("inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-hidden transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
   variants: {
     variant: {
       default: "bg-primary text-primary-foreground hover:bg-primary/90",
-      destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-      outline: "border bg-background shadow-2xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+      destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+      outline: "border bg-background shadow-2xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
       secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
       ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
       link: "text-primary underline-offset-4 hover:underline"
     },
     size: {
       default: "h-9 px-4 py-2 has-[>svg]:px-3",
-      sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+      sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
       lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
       icon: "size-9"
     }
@@ -69,14 +69,26 @@ function Input({ className, type, ...props }) {
   return /* @__PURE__ */ jsxDEV2("input", {
     type,
     "data-slot": "input",
-    className: cn3("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", className),
+    className: cn3("h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs outline-none transition-[color,box-shadow] selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:font-medium file:text-foreground file:text-sm placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30", "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50", "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/skeleton.tsx
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+function Skeleton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3("div", {
+    "data-slot": "skeleton",
+    className: cn2("animate-pulse rounded-md bg-accent", className),
     ...props
   }, undefined, false, undefined, this);
 }
 // ui/separator.tsx
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import { cn as cn4 } from "@contractspec/lib.ui-kit-core/utils";
-import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
 "use client";
 function Separator({
   className,
@@ -84,30 +96,18 @@ function Separator({
   decorative = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsxDEV3(SeparatorPrimitive.Root, {
+  return /* @__PURE__ */ jsxDEV4(SeparatorPrimitive.Root, {
     "data-slot": "separator",
     decorative,
     orientation,
-    className: cn4("bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", className),
-    ...props
-  }, undefined, false, undefined, this);
-}
-// ui/skeleton.tsx
-import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
-function Skeleton({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxDEV4("div", {
-    "data-slot": "skeleton",
-    className: cn2("bg-accent animate-pulse rounded-md", className),
+    className: cn4("shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px", className),
     ...props
   }, undefined, false, undefined, this);
 }
 // ui/sheet.tsx
+import { cn as cn5 } from "@contractspec/lib.ui-kit-core/utils";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { XIcon } from "lucide-react";
-import { cn as cn5 } from "@contractspec/lib.ui-kit-core/utils";
 import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
 "use client";
 function Sheet({ ...props }) {
@@ -146,7 +146,7 @@ function SheetOverlay({
 }) {
   return /* @__PURE__ */ jsxDEV5(SheetPrimitive.Overlay, {
     "data-slot": "sheet-overlay",
-    className: cn5("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className),
+    className: cn5("data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=open]:animate-in", className),
     ...props
   }, undefined, false, undefined, this);
 }
@@ -161,12 +161,12 @@ function SheetContent({
       /* @__PURE__ */ jsxDEV5(SheetOverlay, {}, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV5(SheetPrimitive.Content, {
         "data-slot": "sheet-content",
-        className: cn5("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500", side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm", side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm", side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b", side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t", className),
+        className: cn5("fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:duration-300 data-[state=open]:duration-500", side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm", side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm", side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b", side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t", className),
         ...props,
         children: [
           children,
           /* @__PURE__ */ jsxDEV5(SheetPrimitive.Close, {
-            className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",
+            className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary",
             children: [
               /* @__PURE__ */ jsxDEV5(XIcon, {
                 className: "size-4"
@@ -208,7 +208,7 @@ function SheetTitle({
 }) {
   return /* @__PURE__ */ jsxDEV5(SheetPrimitive.Title, {
     "data-slot": "sheet-title",
-    className: cn5("text-foreground font-semibold", className),
+    className: cn5("font-semibold text-foreground", className),
     ...props
   }, undefined, false, undefined, this);
 }
@@ -222,26 +222,9 @@ function SheetDescription({
     ...props
   }, undefined, false, undefined, this);
 }
-// ui/use-mobile.tsx
-import * as React from "react";
-var MOBILE_BREAKPOINT = 640;
-function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState(undefined);
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
-    mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
-  }, []);
-  return !!isMobile;
-}
-
 // ui/tooltip.tsx
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { cn as cn6 } from "@contractspec/lib.ui-kit-core/utils";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
 "use client";
 function TooltipProvider({
@@ -282,23 +265,40 @@ function TooltipContent({
     children: /* @__PURE__ */ jsxDEV6(TooltipPrimitive.Content, {
       "data-slot": "tooltip-content",
       sideOffset,
-      className: cn6("bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance", className),
+      className: cn6("fade-in-0 zoom-in-95 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in text-balance rounded-md bg-foreground px-3 py-1.5 text-background text-xs data-[state=closed]:animate-out", className),
       ...props,
       children: [
         children,
         /* @__PURE__ */ jsxDEV6(TooltipPrimitive.Arrow, {
-          className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]"
+          className: "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground"
         }, undefined, false, undefined, this)
       ]
     }, undefined, true, undefined, this)
   }, undefined, false, undefined, this);
 }
+// ui/use-mobile.tsx
+import * as React from "react";
+var MOBILE_BREAKPOINT = 640;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(undefined);
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return !!isMobile;
+}
+
 // ui/sidebar.tsx
-import * as React2 from "react";
+import { cn as cn7 } from "@contractspec/lib.ui-kit-core/utils";
 import { Slot as Slot2 } from "@radix-ui/react-slot";
 import { cva as cva2 } from "class-variance-authority";
 import { PanelLeftIcon } from "lucide-react";
-import { cn as cn7 } from "@contractspec/lib.ui-kit-core/utils";
+import * as React2 from "react";
 import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
 "use client";
 var SIDEBAR_COOKIE_NAME = "sidebar_state";
@@ -371,7 +371,7 @@ function SidebarProvider({
           "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
           ...style
         },
-        className: cn7("group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full", className),
+        className: cn7("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", className),
         ...props,
         children
       }, undefined, false, undefined, this)
@@ -390,7 +390,7 @@ function Sidebar({
   if (collapsible === "none") {
     return /* @__PURE__ */ jsxDEV7("div", {
       "data-slot": "sidebar",
-      className: cn7("bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", className),
+      className: cn7("flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground", className),
       ...props,
       children
     }, undefined, false, undefined, this);
@@ -404,7 +404,7 @@ function Sidebar({
         "data-sidebar": "sidebar",
         "data-slot": "sidebar",
         "data-mobile": "true",
-        className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
+        className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
         style: {
           "--sidebar-width": SIDEBAR_WIDTH_MOBILE
         },
@@ -430,7 +430,7 @@ function Sidebar({
     }, undefined, false, undefined, this);
   }
   return /* @__PURE__ */ jsxDEV7("div", {
-    className: "group peer text-sidebar-foreground hidden md:block",
+    className: "group peer hidden text-sidebar-foreground md:block",
     "data-state": state,
     "data-collapsible": state === "collapsed" ? collapsible : "",
     "data-variant": variant,
@@ -448,7 +448,7 @@ function Sidebar({
         children: /* @__PURE__ */ jsxDEV7("div", {
           "data-sidebar": "sidebar",
           "data-slot": "sidebar-inner",
-          className: "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm",
+          className: "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm",
           children
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this)
@@ -493,7 +493,7 @@ function SidebarRail({
     tabIndex: -1,
     onClick: toggleSidebar,
     title: "Toggle Sidebar",
-    className: cn7("hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className),
+    className: cn7("absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className),
     ...props
   }, undefined, false, undefined, this);
 }
@@ -503,7 +503,7 @@ function SidebarInset({
 }) {
   return /* @__PURE__ */ jsxDEV7("main", {
     "data-slot": "sidebar-inset",
-    className: cn7("bg-background relative flex w-full flex-1 flex-col", "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", className),
+    className: cn7("relative flex w-full flex-1 flex-col bg-background", "md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm", className),
     ...props
   }, undefined, false, undefined, this);
 }
@@ -514,7 +514,7 @@ function SidebarInput({
   return /* @__PURE__ */ jsxDEV7(Input, {
     "data-slot": "sidebar-input",
     "data-sidebar": "input",
-    className: cn7("bg-background h-8 w-full shadow-none", className),
+    className: cn7("h-8 w-full bg-background shadow-none", className),
     ...props
   }, undefined, false, undefined, this);
 }
@@ -547,7 +547,7 @@ function SidebarSeparator({
   return /* @__PURE__ */ jsxDEV7(Separator, {
     "data-slot": "sidebar-separator",
     "data-sidebar": "separator",
-    className: cn7("bg-sidebar-border mx-2 w-auto", className),
+    className: cn7("mx-2 w-auto bg-sidebar-border", className),
     ...props
   }, undefined, false, undefined, this);
 }
@@ -582,7 +582,7 @@ function SidebarGroupLabel({
   return /* @__PURE__ */ jsxDEV7(Comp, {
     "data-slot": "sidebar-group-label",
     "data-sidebar": "group-label",
-    className: cn7("text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", className),
+    className: cn7("flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", className),
     ...props
   }, undefined, false, undefined, this);
 }
@@ -595,7 +595,7 @@ function SidebarGroupAction({
   return /* @__PURE__ */ jsxDEV7(Comp, {
     "data-slot": "sidebar-group-action",
     "data-sidebar": "group-action",
-    className: cn7("text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "after:absolute after:-inset-2 md:after:hidden", "group-data-[collapsible=icon]:hidden", className),
+    className: cn7("absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "after:absolute after:-inset-2 md:after:hidden", "group-data-[collapsible=icon]:hidden", className),
     ...props
   }, undefined, false, undefined, this);
 }
@@ -701,7 +701,7 @@ function SidebarMenuAction({
   return /* @__PURE__ */ jsxDEV7(Comp, {
     "data-slot": "sidebar-menu-action",
     "data-sidebar": "menu-action",
-    className: cn7("text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "after:absolute after:-inset-2 md:after:hidden", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", showOnHover && "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0", className),
+    className: cn7("absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0", "after:absolute after:-inset-2 md:after:hidden", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0", className),
     ...props
   }, undefined, false, undefined, this);
 }
@@ -712,7 +712,7 @@ function SidebarMenuBadge({
   return /* @__PURE__ */ jsxDEV7("div", {
     "data-slot": "sidebar-menu-badge",
     "data-sidebar": "menu-badge",
-    className: cn7("text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none", "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", className),
+    className: cn7("pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums", "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", className),
     ...props
   }, undefined, false, undefined, this);
 }
@@ -751,7 +751,7 @@ function SidebarMenuSub({
   return /* @__PURE__ */ jsxDEV7("ul", {
     "data-slot": "sidebar-menu-sub",
     "data-sidebar": "menu-sub",
-    className: cn7("border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5", "group-data-[collapsible=icon]:hidden", className),
+    className: cn7("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5", "group-data-[collapsible=icon]:hidden", className),
     ...props
   }, undefined, false, undefined, this);
 }
@@ -779,7 +779,7 @@ function SidebarMenuSubButton({
     "data-sidebar": "menu-sub-button",
     "data-size": size,
     "data-active": isActive,
-    className: cn7("text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground", size === "sm" && "text-xs", size === "md" && "text-sm", "group-data-[collapsible=icon]:hidden", className),
+    className: cn7("flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground", size === "sm" && "text-xs", size === "md" && "text-sm", "group-data-[collapsible=icon]:hidden", className),
     ...props
   }, undefined, false, undefined, this);
 }

package/dist/browser/ui/skeleton.js

@@ -21,7 +21,7 @@ function Skeleton({
 }) {
   return /* @__PURE__ */ jsxDEV("div", {
     "data-slot": "skeleton",
-    className: cn("bg-accent animate-pulse rounded-md", className),
+    className: cn("animate-pulse rounded-md bg-accent", className),
     ...props
   }, undefined, false, undefined, this);
 }

package/dist/browser/ui/slider.js

@@ -7,9 +7,9 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // ui/slider.tsx
-import * as React from "react";
-import * as SliderPrimitive from "@radix-ui/react-slider";
 import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as React from "react";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 function Slider({
@@ -27,20 +27,20 @@ function Slider({
     value,
     min,
     max,
-    className: cn("relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className),
+    className: cn("relative flex w-full touch-none select-none items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-disabled:opacity-50", className),
     ...props,
     children: [
       /* @__PURE__ */ jsxDEV(SliderPrimitive.Track, {
         "data-slot": "slider-track",
-        className: cn("bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"),
+        className: cn("relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-1.5"),
         children: /* @__PURE__ */ jsxDEV(SliderPrimitive.Range, {
           "data-slot": "slider-range",
-          className: cn("bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full")
+          className: cn("absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full")
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
       Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsxDEV(SliderPrimitive.Thumb, {
         "data-slot": "slider-thumb",
-        className: "border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-2xs transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        className: "block size-4 shrink-0 rounded-full border border-primary bg-background shadow-2xs ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:outline-hidden focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50"
       }, index, false, undefined, this))
     ]
   }, undefined, true, undefined, this);

package/dist/browser/ui/stack.js

@@ -7,8 +7,8 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // ui/stack.tsx
-import { cva } from "class-variance-authority";
 import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { cva } from "class-variance-authority";
 import { jsxDEV } from "react/jsx-dev-runtime";
 var vStackVariants = cva("flex flex-col", {
   variants: {