@contractspec/lib.ui-kit-web 3.7.6 → 3.9.2

package/dist/ui/data-table.parts.d.ts

@@ -0,0 +1,14 @@
+import type { ContractTableColumnRenderModel, ContractTableController, ContractTableRowRenderModel } from '@contractspec/lib.presentation-runtime-core';
+import * as React from 'react';
+export declare function ColumnVisibilityMenu({ columns, }: {
+    columns: ContractTableController<unknown, React.ReactNode>['columns'];
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function PinMenu({ column, }: {
+    column: ContractTableColumnRenderModel<React.ReactNode>;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function ResizeHandle({ column, }: {
+    column: ContractTableColumnRenderModel<React.ReactNode>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function renderHeaderContent<TItem>(controller: ContractTableController<TItem, React.ReactNode>, column: ContractTableColumnRenderModel<React.ReactNode>): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function renderCellContent<TItem>(row: ContractTableRowRenderModel<TItem, React.ReactNode>, cell: ContractTableRowRenderModel<TItem, React.ReactNode>['cells'][number] | undefined): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function stickyStyle(column: ContractTableColumnRenderModel<React.ReactNode>, isHeader?: boolean): React.CSSProperties;

package/dist/ui/data-table.parts.js

@@ -0,0 +1,462 @@
+// @bun
+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 { jsxDEV } from "react/jsx-dev-runtime";
+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: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 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"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ref,
+  ...props
+}) {
+  if (asChild) {
+    return /* @__PURE__ */ jsxDEV(Slot, {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV("button", {
+    ref,
+    "data-slot": "button",
+    className: cn(buttonVariants({ variant, size, className })),
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/checkbox.tsx
+import { cn as cn2 } from "@contractspec/lib.ui-kit-core/utils";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+"use client";
+function Checkbox({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(CheckboxPrimitive.Root, {
+    "data-slot": "checkbox",
+    className: cn2("peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs outline-none transition-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-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:data-[state=checked]:bg-primary dark:aria-invalid:ring-destructive/40", className),
+    ...props,
+    children: /* @__PURE__ */ jsxDEV2(CheckboxPrimitive.Indicator, {
+      "data-slot": "checkbox-indicator",
+      className: "grid place-content-center text-current transition-none",
+      children: /* @__PURE__ */ jsxDEV2(CheckIcon, {
+        className: "size-3.5"
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+// ui/dropdown-menu.tsx
+import { cn as cn3 } from "@contractspec/lib.ui-kit-core/utils";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon as CheckIcon2, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+"use client";
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(DropdownMenuPrimitive.Root, {
+    "data-slot": "dropdown-menu",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DropdownMenuPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(DropdownMenuPrimitive.Portal, {
+    "data-slot": "dropdown-menu-portal",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(DropdownMenuPrimitive.Trigger, {
+    "data-slot": "dropdown-menu-trigger",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(DropdownMenuPrimitive.Portal, {
+    children: /* @__PURE__ */ jsxDEV3(DropdownMenuPrimitive.Content, {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn3("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 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in", className),
+      ...props
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function DropdownMenuGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(DropdownMenuPrimitive.Group, {
+    "data-slot": "dropdown-menu-group",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(DropdownMenuPrimitive.Item, {
+    "data-slot": "dropdown-menu-item",
+    "data-inset": inset,
+    "data-variant": variant,
+    className: cn3("relative flex cursor-default select-none items-center gap-2 rounded-xs px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-inset:pl-8 data-[variant=destructive]:text-destructive data-disabled:opacity-50 data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=destructive]:*:[svg]:text-destructive!", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(DropdownMenuPrimitive.CheckboxItem, {
+    "data-slot": "dropdown-menu-checkbox-item",
+    className: cn3("relative flex cursor-default select-none items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 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]:pointer-events-none [&_svg]:shrink-0", className),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxDEV3("span", {
+        className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
+        children: /* @__PURE__ */ jsxDEV3(DropdownMenuPrimitive.ItemIndicator, {
+          children: /* @__PURE__ */ jsxDEV3(CheckIcon2, {
+            className: "size-4"
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      children
+    ]
+  }, undefined, true, undefined, this);
+}
+function DropdownMenuRadioGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(DropdownMenuPrimitive.RadioGroup, {
+    "data-slot": "dropdown-menu-radio-group",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(DropdownMenuPrimitive.RadioItem, {
+    "data-slot": "dropdown-menu-radio-item",
+    className: cn3("relative flex cursor-default select-none items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 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]:pointer-events-none [&_svg]:shrink-0", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxDEV3("span", {
+        className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
+        children: /* @__PURE__ */ jsxDEV3(DropdownMenuPrimitive.ItemIndicator, {
+          children: /* @__PURE__ */ jsxDEV3(CircleIcon, {
+            className: "size-2 fill-current"
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      children
+    ]
+  }, undefined, true, undefined, this);
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(DropdownMenuPrimitive.Label, {
+    "data-slot": "dropdown-menu-label",
+    "data-inset": inset,
+    className: cn3("px-2 py-1.5 font-medium text-sm data-inset:pl-8", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(DropdownMenuPrimitive.Separator, {
+    "data-slot": "dropdown-menu-separator",
+    className: cn3("-mx-1 my-1 h-px bg-border", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DropdownMenuShortcut({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3("span", {
+    "data-slot": "dropdown-menu-shortcut",
+    className: cn3("ml-auto text-muted-foreground text-xs tracking-widest", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DropdownMenuSub({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(DropdownMenuPrimitive.Sub, {
+    "data-slot": "dropdown-menu-sub",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(DropdownMenuPrimitive.SubTrigger, {
+    "data-slot": "dropdown-menu-sub-trigger",
+    "data-inset": inset,
+    className: cn3("flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-inset:pl-8 data-[state=open]:text-accent-foreground", className),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsxDEV3(ChevronRightIcon, {
+        className: "ml-auto size-4"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function DropdownMenuSubContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(DropdownMenuPrimitive.SubContent, {
+    "data-slot": "dropdown-menu-sub-content",
+    className: cn3("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 min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/data-table.parts.tsx
+import {
+  ChevronDown,
+  ChevronRight,
+  Columns3,
+  GripVertical,
+  PanelLeft,
+  PanelRight,
+  PinOff
+} from "lucide-react";
+import * as React from "react";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+"use client";
+function ColumnVisibilityMenu({
+  columns
+}) {
+  const hideableColumns = columns.filter((column) => column.canHide);
+  if (!hideableColumns.length)
+    return null;
+  return /* @__PURE__ */ jsxDEV4(DropdownMenu, {
+    children: [
+      /* @__PURE__ */ jsxDEV4(DropdownMenuTrigger, {
+        asChild: true,
+        children: /* @__PURE__ */ jsxDEV4(Button, {
+          variant: "outline",
+          size: "sm",
+          children: [
+            /* @__PURE__ */ jsxDEV4(Columns3, {
+              className: "h-4 w-4"
+            }, undefined, false, undefined, this),
+            "Columns"
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4(DropdownMenuContent, {
+        align: "end",
+        children: [
+          /* @__PURE__ */ jsxDEV4(DropdownMenuLabel, {
+            children: "Visible Columns"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4(DropdownMenuSeparator, {}, undefined, false, undefined, this),
+          hideableColumns.map((column) => /* @__PURE__ */ jsxDEV4(DropdownMenuCheckboxItem, {
+            checked: column.visible,
+            onCheckedChange: (checked) => column.toggleVisibility?.(Boolean(checked)),
+            children: column.label
+          }, column.id, false, undefined, this))
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function PinMenu({
+  column
+}) {
+  if (!column.canPin)
+    return null;
+  return /* @__PURE__ */ jsxDEV4(DropdownMenu, {
+    children: [
+      /* @__PURE__ */ jsxDEV4(DropdownMenuTrigger, {
+        asChild: true,
+        children: /* @__PURE__ */ jsxDEV4(Button, {
+          variant: "ghost",
+          size: "icon",
+          className: "h-6 w-6",
+          onClick: (event) => event.stopPropagation(),
+          children: /* @__PURE__ */ jsxDEV4(Columns3, {
+            className: "h-3.5 w-3.5"
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4(DropdownMenuContent, {
+        align: "start",
+        children: [
+          /* @__PURE__ */ jsxDEV4(DropdownMenuItem, {
+            onClick: () => column.pin?.("left"),
+            children: [
+              /* @__PURE__ */ jsxDEV4(PanelLeft, {
+                className: "h-4 w-4"
+              }, undefined, false, undefined, this),
+              "Pin Left"
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV4(DropdownMenuItem, {
+            onClick: () => column.pin?.("right"),
+            children: [
+              /* @__PURE__ */ jsxDEV4(PanelRight, {
+                className: "h-4 w-4"
+              }, undefined, false, undefined, this),
+              "Pin Right"
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV4(DropdownMenuItem, {
+            onClick: () => column.pin?.(false),
+            children: [
+              /* @__PURE__ */ jsxDEV4(PinOff, {
+                className: "h-4 w-4"
+              }, undefined, false, undefined, this),
+              "Unpin"
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function ResizeHandle({
+  column
+}) {
+  const lastX = React.useRef(null);
+  const onMouseDown = React.useCallback((event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    lastX.current = event.clientX;
+    const onMouseMove = (moveEvent) => {
+      if (lastX.current == null)
+        return;
+      const delta = moveEvent.clientX - lastX.current;
+      lastX.current = moveEvent.clientX;
+      column.resizeBy?.(delta);
+    };
+    const onMouseUp = () => {
+      lastX.current = null;
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+    };
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+  }, [column]);
+  return /* @__PURE__ */ jsxDEV4("span", {
+    role: "separator",
+    "aria-label": `Resize ${column.label} column`,
+    "aria-orientation": "vertical",
+    tabIndex: -1,
+    className: "absolute inset-y-0 right-0 flex w-3 cursor-col-resize items-center justify-center",
+    onMouseDown,
+    children: /* @__PURE__ */ jsxDEV4(GripVertical, {
+      className: "h-3.5 w-3.5 text-muted-foreground"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function renderHeaderContent(controller, column) {
+  if (column.kind === "selection" && controller.selectionMode === "multiple") {
+    return /* @__PURE__ */ jsxDEV4(Checkbox, {
+      "aria-label": "Select all rows",
+      checked: controller.allRowsSelected || (controller.someRowsSelected ? "indeterminate" : false),
+      onCheckedChange: (checked) => controller.toggleAllRowsSelected?.(Boolean(checked)),
+      onClick: (event) => event.stopPropagation()
+    }, undefined, false, undefined, this);
+  }
+  if (column.kind === "expansion")
+    return null;
+  return column.header;
+}
+function renderCellContent(row, cell) {
+  if (!cell)
+    return null;
+  if (cell.kind === "selection") {
+    return /* @__PURE__ */ jsxDEV4(Checkbox, {
+      "aria-label": `Select row ${row.id}`,
+      checked: row.isSelected,
+      onCheckedChange: (checked) => row.toggleSelected?.(Boolean(checked))
+    }, undefined, false, undefined, this);
+  }
+  if (cell.kind === "expansion") {
+    return row.canExpand ? /* @__PURE__ */ jsxDEV4(Button, {
+      variant: "ghost",
+      size: "icon",
+      className: "h-7 w-7",
+      "aria-label": row.isExpanded ? `Collapse row ${row.id}` : `Expand row ${row.id}`,
+      onClick: () => row.toggleExpanded?.(),
+      children: row.isExpanded ? /* @__PURE__ */ jsxDEV4(ChevronDown, {
+        className: "h-4 w-4"
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV4(ChevronRight, {
+        className: "h-4 w-4"
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this) : null;
+  }
+  return cell.content;
+}
+function stickyStyle(column, isHeader = false) {
+  return {
+    width: column.size,
+    minWidth: column.size,
+    maxWidth: column.size,
+    left: column.pinState === "left" ? column.stickyOffset : undefined,
+    right: column.pinState === "right" ? column.stickyOffset : undefined,
+    position: column.pinState ? "sticky" : "relative",
+    zIndex: column.pinState ? isHeader ? 30 : 20 : undefined
+  };
+}
+export {
+  stickyStyle,
+  renderHeaderContent,
+  renderCellContent,
+  ResizeHandle,
+  PinMenu,
+  ColumnVisibilityMenu
+};

package/dist/ui/date-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"
     }
@@ -57,19 +57,19 @@ function Input({ className, type, ...props }) {
   return /* @__PURE__ */ jsxDEV2("input", {
     type,
     "data-slot": "input",
-    className: cn2("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: cn2("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/calendar.tsx
-import * as React from "react";
+import { cn as cn3 } from "@contractspec/lib.ui-kit-core/utils";
 import {
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon
 } from "lucide-react";
+import * as React from "react";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
-import { cn as cn3 } from "@contractspec/lib.ui-kit-core/utils";
 import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
 "use client";
 function Calendar({
@@ -85,7 +85,7 @@ function Calendar({
   const defaultClassNames = getDefaultClassNames();
   return /* @__PURE__ */ jsxDEV3(DayPicker, {
     showOutsideDays,
-    className: cn3("group/calendar bg-background p-3 [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent", String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className),
+    className: cn3("group/calendar bg-background in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent p-3 [--cell-size:--spacing(8)]", String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className),
     captionLayout,
     formatters: {
       formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
@@ -96,24 +96,24 @@ function Calendar({
       months: cn3("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
       month: cn3("flex w-full flex-col gap-4", defaultClassNames.month),
       nav: cn3("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
-      button_previous: cn3(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_previous),
-      button_next: cn3(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_next),
+      button_previous: cn3(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) select-none p-0 aria-disabled:opacity-50", defaultClassNames.button_previous),
+      button_next: cn3(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) select-none p-0 aria-disabled:opacity-50", defaultClassNames.button_next),
       month_caption: cn3("flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", defaultClassNames.month_caption),
-      dropdowns: cn3("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
-      dropdown_root: cn3("has-focus:border-ring has-focus:ring-ring/50 border-input relative rounded-md border shadow-2xs has-focus:ring-[3px]", defaultClassNames.dropdown_root),
-      dropdown: cn3("bg-popover absolute inset-0 opacity-0", defaultClassNames.dropdown),
-      caption_label: cn3("font-medium select-none", captionLayout === "label" ? "text-sm" : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5", defaultClassNames.caption_label),
+      dropdowns: cn3("flex h-(--cell-size) w-full items-center justify-center gap-1.5 font-medium text-sm", defaultClassNames.dropdowns),
+      dropdown_root: cn3("relative rounded-md border border-input shadow-2xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50", defaultClassNames.dropdown_root),
+      dropdown: cn3("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
+      caption_label: cn3("select-none font-medium", captionLayout === "label" ? "text-sm" : "flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", defaultClassNames.caption_label),
       table: "w-full border-collapse",
       weekdays: cn3("flex", defaultClassNames.weekdays),
-      weekday: cn3("text-muted-foreground flex-1 rounded-md text-[0.8rem] font-normal select-none", defaultClassNames.weekday),
+      weekday: cn3("flex-1 select-none rounded-md font-normal text-[0.8rem] text-muted-foreground", defaultClassNames.weekday),
       week: cn3("mt-2 flex w-full", defaultClassNames.week),
       week_number_header: cn3("w-(--cell-size) select-none", defaultClassNames.week_number_header),
-      week_number: cn3("text-muted-foreground text-[0.8rem] select-none", defaultClassNames.week_number),
-      day: cn3("group/day relative aspect-square h-full w-full p-0 text-center select-none [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md", defaultClassNames.day),
-      range_start: cn3("bg-accent rounded-l-md", defaultClassNames.range_start),
+      week_number: cn3("select-none text-[0.8rem] text-muted-foreground", defaultClassNames.week_number),
+      day: cn3("group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md", defaultClassNames.day),
+      range_start: cn3("rounded-l-md bg-accent", defaultClassNames.range_start),
       range_middle: cn3("rounded-none", defaultClassNames.range_middle),
-      range_end: cn3("bg-accent rounded-r-md", defaultClassNames.range_end),
-      today: cn3("bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none", defaultClassNames.today),
+      range_end: cn3("rounded-r-md bg-accent", defaultClassNames.range_end),
+      today: cn3("rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none", defaultClassNames.today),
       outside: cn3("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
       disabled: cn3("text-muted-foreground opacity-50", defaultClassNames.disabled),
       hidden: cn3("invisible", defaultClassNames.hidden),
@@ -182,13 +182,13 @@ function CalendarDayButton({
     "data-range-start": modifiers.range_start,
     "data-range-end": modifiers.range_end,
     "data-range-middle": modifiers.range_middle,
-    className: cn3("data-[range-end=true]:bg-primary data-[range-middle=true]:bg-accent data-[range-start=true]:bg-primary data-[selected-single=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:text-accent-foreground data-[range-start=true]:text-primary-foreground data-[selected-single=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className),
+    className: cn3("flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-start=true]:rounded-l-md data-[range-end=true]:bg-primary data-[range-middle=true]:bg-accent data-[range-start=true]:bg-primary data-[selected-single=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:text-accent-foreground data-[range-start=true]:text-primary-foreground data-[selected-single=true]:text-primary-foreground group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className),
     ...props
   }, undefined, false, undefined, this);
 }
 // ui/popover.tsx
-import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { cn as cn4 } from "@contractspec/lib.ui-kit-core/utils";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
 "use client";
 function Popover({
@@ -218,7 +218,7 @@ function PopoverContent({
       "data-slot": "popover-content",
       align,
       sideOffset,
-      className: cn4("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: cn4("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);
@@ -232,9 +232,9 @@ function PopoverAnchor({
   }, undefined, false, undefined, this);
 }
 // ui/date-picker.tsx
-import * as React2 from "react";
-import { CalendarIcon } from "lucide-react";
 import { cn as cn5 } from "@contractspec/lib.ui-kit-core/utils";
+import { CalendarIcon } from "lucide-react";
+import * as React2 from "react";
 import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
 "use client";
 function DatePicker({