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

package/dist/ui/tabs.js

@@ -2,8 +2,8 @@
 var __require = import.meta.require;
 
 // ui/tabs.tsx
-import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 function Tabs({
@@ -22,7 +22,7 @@ function TabsList({
 }) {
   return /* @__PURE__ */ jsxDEV(TabsPrimitive.List, {
     "data-slot": "tabs-list",
-    className: cn("bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]", className),
+    className: cn("inline-flex h-9 w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground", className),
     ...props
   }, undefined, false, undefined, this);
 }
@@ -32,7 +32,7 @@ function TabsTrigger({
 }) {
   return /* @__PURE__ */ jsxDEV(TabsPrimitive.Trigger, {
     "data-slot": "tabs-trigger",
-    className: cn("text-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-ring/50 data-[state=active]:bg-background dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-2xs [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+    className: cn("inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 font-medium text-foreground text-sm transition-[color,box-shadow] focus-visible:border-ring focus-visible:outline-1 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:shadow-2xs dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
     ...props
   }, undefined, false, undefined, this);
 }

package/dist/ui/text.js

@@ -2,13 +2,13 @@
 var __require = import.meta.require;
 
 // ui/text.tsx
-import { Slot } from "@radix-ui/react-slot";
 import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { Slot } from "@radix-ui/react-slot";
 import { jsxDEV } from "react/jsx-dev-runtime";
 function Text({ className, asChild = false, ...props }) {
   const Component = asChild ? Slot : "p";
   return /* @__PURE__ */ jsxDEV(Component, {
-    className: cn("text-foreground web:select-text text-base", className),
+    className: cn("web:select-text text-base text-foreground", className),
     ...props
   }, undefined, false, undefined, this);
 }

package/dist/ui/textarea.js

@@ -7,7 +7,7 @@ import { jsxDEV } from "react/jsx-dev-runtime";
 function Textarea({ className, ...props }) {
   return /* @__PURE__ */ jsxDEV("textarea", {
     "data-slot": "textarea",
-    className: cn("aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-2xs outline-hidden transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", className),
+    className: cn("field-sizing-content flex min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-2xs outline-hidden transition-[color,box-shadow] placeholder:text-muted-foreground 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 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40", className),
     ...props
   }, undefined, false, undefined, this);
 }

package/dist/ui/time-picker.js

@@ -2,23 +2,23 @@
 var __require = import.meta.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"
     }
@@ -51,8 +51,8 @@ function Button({
   }, undefined, false, undefined, this);
 }
 // ui/popover.tsx
-import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { cn as cn2 } from "@contractspec/lib.ui-kit-core/utils";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
 "use client";
 function Popover({
@@ -82,7 +82,7 @@ function PopoverContent({
       "data-slot": "popover-content",
       align,
       sideOffset,
-      className: cn2("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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden", className),
+      className: cn2("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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in", className),
       ...props
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
@@ -96,8 +96,8 @@ function PopoverAnchor({
   }, undefined, false, undefined, this);
 }
 // ui/time-picker.tsx
-import * as React from "react";
 import { cn as cn3 } from "@contractspec/lib.ui-kit-core/utils";
+import * as React from "react";
 import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
 "use client";
 function formatTime(d, is24Hour) {
@@ -156,7 +156,7 @@ function TimePicker({
               max: is24Hour ? 23 : 12,
               value: hours,
               onChange: (e) => setHours(e.target.value),
-              className: "border-input bg-background w-16 rounded-md border px-2 py-1 text-center"
+              className: "w-16 rounded-md border border-input bg-background px-2 py-1 text-center"
             }, undefined, false, undefined, this),
             /* @__PURE__ */ jsxDEV3("span", {
               children: ":"
@@ -167,7 +167,7 @@ function TimePicker({
               max: 59,
               value: minutes,
               onChange: (e) => setMinutes(e.target.value),
-              className: "border-input bg-background w-16 rounded-md border px-2 py-1 text-center"
+              className: "w-16 rounded-md border border-input bg-background px-2 py-1 text-center"
             }, undefined, false, undefined, this),
             /* @__PURE__ */ jsxDEV3(Button, {
               type: "button",

package/dist/ui/toast.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import * as ToastPrimitives from '@radix-ui/react-toast';
 import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 declare const ToastProvider: React.FC<ToastPrimitives.ToastProviderProps>;
 declare function ToastViewport({ className, ref, ...props }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> & {
     ref?: React.Ref<React.ElementRef<typeof ToastPrimitives.Viewport>>;
@@ -25,4 +25,4 @@ declare function ToastDescription({ className, ref, ...props }: React.ComponentP
 }): import("react/jsx-runtime").JSX.Element;
 type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
 type ToastActionElement = React.ReactElement<typeof ToastAction>;
-export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, };
+export { Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, };

package/dist/ui/toast.js

@@ -2,10 +2,10 @@
 var __require = import.meta.require;
 
 // ui/toast.tsx
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
 import * as ToastPrimitives from "@radix-ui/react-toast";
 import { cva } from "class-variance-authority";
 import { X } from "lucide-react";
-import { cn } from "@contractspec/lib.ui-kit-core/utils";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 var ToastProvider = ToastPrimitives.Provider;
@@ -20,7 +20,7 @@ function ToastViewport({
     ...props
   }, undefined, false, undefined, this);
 }
-var toastVariants = cva("group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full", {
+var toastVariants = cva("group data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none", {
   variants: {
     variant: {
       default: "border bg-background text-foreground",
@@ -50,7 +50,7 @@ function ToastAction({
 }) {
   return /* @__PURE__ */ jsxDEV(ToastPrimitives.Action, {
     ref,
-    className: cn("ring-offset-background hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-base font-medium transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none disabled:opacity-50", className),
+    className: cn("inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 font-medium text-base ring-offset-background transition-colors hover:bg-secondary focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:focus:ring-destructive group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground", className),
     ...props
   }, undefined, false, undefined, this);
 }
@@ -61,7 +61,7 @@ function ToastClose({
 }) {
   return /* @__PURE__ */ jsxDEV(ToastPrimitives.Close, {
     ref,
-    className: cn("text-foreground/50 hover:text-foreground absolute top-2 right-2 rounded-md p-1 opacity-0 transition-opacity group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 focus:opacity-100 focus:ring-2 focus:outline-hidden group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600", className),
+    className: cn("absolute top-2 right-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50", className),
     "toast-close": "",
     ...props,
     children: /* @__PURE__ */ jsxDEV(X, {
@@ -76,7 +76,7 @@ function ToastTitle({
 }) {
   return /* @__PURE__ */ jsxDEV(ToastPrimitives.Title, {
     ref,
-    className: cn("text-base font-semibold", className),
+    className: cn("font-semibold text-base", className),
     ...props
   }, undefined, false, undefined, this);
 }

package/dist/ui/toaster.js

@@ -2,10 +2,10 @@
 var __require = import.meta.require;
 
 // ui/toast.tsx
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
 import * as ToastPrimitives from "@radix-ui/react-toast";
 import { cva } from "class-variance-authority";
 import { X } from "lucide-react";
-import { cn } from "@contractspec/lib.ui-kit-core/utils";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 var ToastProvider = ToastPrimitives.Provider;
@@ -20,7 +20,7 @@ function ToastViewport({
     ...props
   }, undefined, false, undefined, this);
 }
-var toastVariants = cva("group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full", {
+var toastVariants = cva("group data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none", {
   variants: {
     variant: {
       default: "border bg-background text-foreground",
@@ -50,7 +50,7 @@ function ToastAction({
 }) {
   return /* @__PURE__ */ jsxDEV(ToastPrimitives.Action, {
     ref,
-    className: cn("ring-offset-background hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-base font-medium transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none disabled:opacity-50", className),
+    className: cn("inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 font-medium text-base ring-offset-background transition-colors hover:bg-secondary focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:focus:ring-destructive group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground", className),
     ...props
   }, undefined, false, undefined, this);
 }
@@ -61,7 +61,7 @@ function ToastClose({
 }) {
   return /* @__PURE__ */ jsxDEV(ToastPrimitives.Close, {
     ref,
-    className: cn("text-foreground/50 hover:text-foreground absolute top-2 right-2 rounded-md p-1 opacity-0 transition-opacity group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 focus:opacity-100 focus:ring-2 focus:outline-hidden group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600", className),
+    className: cn("absolute top-2 right-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50", className),
     "toast-close": "",
     ...props,
     children: /* @__PURE__ */ jsxDEV(X, {
@@ -76,7 +76,7 @@ function ToastTitle({
 }) {
   return /* @__PURE__ */ jsxDEV(ToastPrimitives.Title, {
     ref,
-    className: cn("text-base font-semibold", className),
+    className: cn("font-semibold text-base", className),
     ...props
   }, undefined, false, undefined, this);
 }

package/dist/ui/toggle-group.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 import { toggleVariants } from './toggle';
 declare function ToggleGroup({ className, variant, size, children, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>): import("react/jsx-runtime").JSX.Element;
 declare function ToggleGroupItem({ className, children, variant, size, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>): import("react/jsx-runtime").JSX.Element;

package/dist/ui/toggle-group.js

@@ -2,21 +2,21 @@
 var __require = import.meta.require;
 
 // ui/toggle.tsx
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva } from "class-variance-authority";
-import { cn } from "@contractspec/lib.ui-kit-core/utils";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
-var toggleVariants = cva("inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-hidden transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap", {
+var toggleVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-hidden transition-[color,box-shadow] hover:bg-muted hover:text-muted-foreground 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 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
   variants: {
     variant: {
       default: "bg-transparent",
       outline: "border border-input bg-transparent shadow-2xs hover:bg-accent hover:text-accent-foreground"
     },
     size: {
-      default: "h-9 px-2 min-w-9",
-      sm: "h-8 px-1.5 min-w-8",
-      lg: "h-10 px-2.5 min-w-10"
+      default: "h-9 min-w-9 px-2",
+      sm: "h-8 min-w-8 px-1.5",
+      lg: "h-10 min-w-10 px-2.5"
     }
   },
   defaultVariants: {
@@ -37,9 +37,9 @@ function Toggle({
   }, undefined, false, undefined, this);
 }
 // ui/toggle-group.tsx
-import * as React from "react";
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import { cn as cn2 } from "@contractspec/lib.ui-kit-core/utils";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import * as React from "react";
 import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
 "use client";
 var ToggleGroupContext = React.createContext({

package/dist/ui/toggle.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;

package/dist/ui/toggle.js

@@ -2,21 +2,21 @@
 var __require = import.meta.require;
 
 // ui/toggle.tsx
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva } from "class-variance-authority";
-import { cn } from "@contractspec/lib.ui-kit-core/utils";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
-var toggleVariants = cva("inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-hidden transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap", {
+var toggleVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-hidden transition-[color,box-shadow] hover:bg-muted hover:text-muted-foreground 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 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
   variants: {
     variant: {
       default: "bg-transparent",
       outline: "border border-input bg-transparent shadow-2xs hover:bg-accent hover:text-accent-foreground"
     },
     size: {
-      default: "h-9 px-2 min-w-9",
-      sm: "h-8 px-1.5 min-w-8",
-      lg: "h-10 px-2.5 min-w-10"
+      default: "h-9 min-w-9 px-2",
+      sm: "h-8 min-w-8 px-1.5",
+      lg: "h-10 min-w-10 px-2.5"
     }
   },
   defaultVariants: {

package/dist/ui/tooltip.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
 declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): import("react/jsx-runtime").JSX.Element;
 declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
 declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/ui/tooltip.js

@@ -2,8 +2,8 @@
 var __require = import.meta.require;
 
 // ui/tooltip.tsx
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 function TooltipProvider({
@@ -44,12 +44,12 @@ function TooltipContent({
     children: /* @__PURE__ */ jsxDEV(TooltipPrimitive.Content, {
       "data-slot": "tooltip-content",
       sideOffset,
-      className: cn("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: cn("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__ */ jsxDEV(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)

package/dist/ui/typography.js

@@ -2,26 +2,26 @@
 var __require = import.meta.require;
 
 // ui/text.tsx
-import { Slot } from "@radix-ui/react-slot";
 import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { Slot } from "@radix-ui/react-slot";
 import { jsxDEV } from "react/jsx-dev-runtime";
 function Text({ className, asChild = false, ...props }) {
   const Component = asChild ? Slot : "p";
   return /* @__PURE__ */ jsxDEV(Component, {
-    className: cn("text-foreground web:select-text text-base", className),
+    className: cn("web:select-text text-base text-foreground", className),
     ...props
   }, undefined, false, undefined, this);
 }
 // ui/typography.tsx
-import { Slot as Slot2 } from "@radix-ui/react-slot";
 import { cn as cn2 } from "@contractspec/lib.ui-kit-core/utils";
+import { Slot as Slot2 } from "@radix-ui/react-slot";
 import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
 function H1({ className, asChild = false, ...props }) {
   const Component = asChild ? Slot2 : "h1";
   return /* @__PURE__ */ jsxDEV2(Component, {
     role: "heading",
     "aria-level": 1,
-    className: cn2("text-foreground web:select-text web:scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl", className),
+    className: cn2("web:select-text web:scroll-m-20 font-extrabold text-4xl text-foreground tracking-tight lg:text-5xl", className),
     ...props
   }, undefined, false, undefined, this);
 }
@@ -30,7 +30,7 @@ function H2({ className, asChild = false, ...props }) {
   return /* @__PURE__ */ jsxDEV2(Component, {
     role: "heading",
     "aria-level": 2,
-    className: cn2("border-border text-foreground web:select-text web:scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0", className),
+    className: cn2("web:select-text web:scroll-m-20 border-border border-b pb-2 font-semibold text-3xl text-foreground tracking-tight first:mt-0", className),
     ...props
   }, undefined, false, undefined, this);
 }
@@ -39,7 +39,7 @@ function H3({ className, asChild = false, ...props }) {
   return /* @__PURE__ */ jsxDEV2(Component, {
     role: "heading",
     "aria-level": 3,
-    className: cn2("text-foreground web:select-text web:scroll-m-20 text-2xl font-semibold tracking-tight", className),
+    className: cn2("web:select-text web:scroll-m-20 font-semibold text-2xl text-foreground tracking-tight", className),
     ...props
   }, undefined, false, undefined, this);
 }
@@ -48,14 +48,14 @@ function H4({ className, asChild = false, ...props }) {
   return /* @__PURE__ */ jsxDEV2(Component, {
     role: "heading",
     "aria-level": 4,
-    className: cn2("text-foreground web:select-text web:scroll-m-20 text-xl font-semibold tracking-tight", className),
+    className: cn2("web:select-text web:scroll-m-20 font-semibold text-foreground text-xl tracking-tight", className),
     ...props
   }, undefined, false, undefined, this);
 }
 function P({ className, asChild = false, ...props }) {
   const Component = asChild ? Slot2 : Text;
   return /* @__PURE__ */ jsxDEV2(Component, {
-    className: cn2("text-foreground web:select-text text-base", className),
+    className: cn2("web:select-text text-base text-foreground", className),
     ...props
   }, undefined, false, undefined, this);
 }
@@ -63,7 +63,7 @@ function BlockQuote({ className, asChild = false, ...props }) {
   const Component = asChild ? Slot2 : Text;
   return /* @__PURE__ */ jsxDEV2(Component, {
     role: "blockquote",
-    className: cn2("native:mt-4 native:pl-3 border-border text-foreground web:select-text mt-6 border-l-2 pl-6 text-base italic", className),
+    className: cn2("mt-6 native:mt-4 web:select-text border-border border-l-2 native:pl-3 pl-6 text-base text-foreground italic", className),
     ...props
   }, undefined, false, undefined, this);
 }
@@ -71,35 +71,35 @@ function Code({ className, asChild = false, ...props }) {
   const Component = asChild ? Slot2 : Text;
   return /* @__PURE__ */ jsxDEV2(Component, {
     role: "code",
-    className: cn2("bg-muted text-foreground web:select-text relative rounded-md px-[0.3rem] py-[0.2rem] text-sm font-semibold", className),
+    className: cn2("relative web:select-text rounded-md bg-muted px-[0.3rem] py-[0.2rem] font-semibold text-foreground text-sm", className),
     ...props
   }, undefined, false, undefined, this);
 }
 function Lead({ className, asChild = false, ...props }) {
   const Component = asChild ? Slot2 : Text;
   return /* @__PURE__ */ jsxDEV2(Component, {
-    className: cn2("text-muted-foreground web:select-text text-xl", className),
+    className: cn2("web:select-text text-muted-foreground text-xl", className),
     ...props
   }, undefined, false, undefined, this);
 }
 function Large({ className, asChild = false, ...props }) {
   const Component = asChild ? Slot2 : Text;
   return /* @__PURE__ */ jsxDEV2(Component, {
-    className: cn2("text-foreground web:select-text text-xl font-semibold", className),
+    className: cn2("web:select-text font-semibold text-foreground text-xl", className),
     ...props
   }, undefined, false, undefined, this);
 }
 function Small({ className, asChild = false, ...props }) {
   const Component = asChild ? Slot2 : Text;
   return /* @__PURE__ */ jsxDEV2(Component, {
-    className: cn2("text-foreground web:select-text text-sm leading-none font-medium", className),
+    className: cn2("web:select-text font-medium text-foreground text-sm leading-none", className),
     ...props
   }, undefined, false, undefined, this);
 }
 function Muted({ className, asChild = false, ...props }) {
   const Component = asChild ? Slot2 : Text;
   return /* @__PURE__ */ jsxDEV2(Component, {
-    className: cn2("text-muted-foreground web:select-text text-sm", className),
+    className: cn2("web:select-text text-muted-foreground text-sm", className),
     ...props
   }, undefined, false, undefined, this);
 }

package/dist/ui/use-toast.d.ts

@@ -41,4 +41,4 @@ declare function useToast(): {
     dismiss: (toastId?: string) => void;
     toasts: ToasterToast[];
 };
-export { useToast, toast };
+export { toast, useToast };

package/dist/ui/usecases/UseCaseCard.js

@@ -2,23 +2,23 @@
 var __require = import.meta.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"
     }
@@ -51,8 +51,8 @@ function Button({
   }, undefined, false, undefined, this);
 }
 // ui/stack.tsx
-import { cva as cva2 } from "class-variance-authority";
 import { cn as cn2 } from "@contractspec/lib.ui-kit-core/utils";
+import { cva as cva2 } from "class-variance-authority";
 import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
 var vStackVariants = cva2("flex flex-col", {
   variants: {
@@ -228,11 +228,11 @@ function UseCaseCard({
     gap: "sm",
     children: [
       /* @__PURE__ */ jsxDEV3("div", {
-        className: "text-lg font-semibold",
+        className: "font-semibold text-lg",
         children: title
       }, undefined, false, undefined, this),
       summary && /* @__PURE__ */ jsxDEV3("div", {
-        className: "text-muted-foreground text-base",
+        className: "text-base text-muted-foreground",
         children: summary
       }, undefined, false, undefined, this),
       ctaHref && /* @__PURE__ */ jsxDEV3(HStack, {

package/dist/ui/usecases/UserStoryCard.js

@@ -2,8 +2,8 @@
 var __require = import.meta.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: {
@@ -177,11 +177,11 @@ function UserStoryCard({
     gap: "sm",
     children: [
       /* @__PURE__ */ jsxDEV2("div", {
-        className: "text-lg font-semibold",
+        className: "font-semibold text-lg",
         children: title
       }, undefined, false, undefined, this),
       body && /* @__PURE__ */ jsxDEV2("div", {
-        className: "text-muted-foreground text-base",
+        className: "text-base text-muted-foreground",
         children: body
       }, undefined, false, undefined, this),
       outcome && /* @__PURE__ */ jsxDEV2("div", {

package/dist/ui/visualization/Visualization.d.ts

@@ -0,0 +1,9 @@
+import { type ContractVisualizationRenderModel } from '@contractspec/lib.presentation-runtime-core';
+export type VisualizationInteractionHandler = (params: unknown) => void;
+export interface VisualizationProps {
+    model: ContractVisualizationRenderModel;
+    className?: string;
+    height?: number;
+    onDataPointPress?: VisualizationInteractionHandler;
+}
+export declare function Visualization({ model, className, height, onDataPointPress, }: VisualizationProps): import("react/jsx-runtime").JSX.Element;