@nextlyhq/ui 0.0.2-alpha.57 → 0.0.2-alpha.58

package/dist/index.cjs

@@ -187,6 +187,7 @@ __export(src_exports, {
   badgeVariants: () => badgeVariants,
   buttonVariants: () => buttonVariants,
   cardVariants: () => cardVariants,
+  commandDefaultFilter: () => commandDefaultFilter,
   createShortcutManager: () => createShortcutManager,
   dialogContentVariants: () => dialogContentVariants,
   inputVariants: () => inputVariants,
@@ -236,8 +237,9 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
         destructive: "bg-destructive-solid text-destructive-foreground border border-transparent hover:bg-destructive-600",
         // border-border is the decorative separator token, and it is the right
         // one here: a button is identified by its label and fill, so its edge
-        // carries no meaning on its own and is not held to the 3:1 minimum that
-        // border-input meets for controls identified by their boundary. It is
+        // carries no meaning on its own, unlike border-input, which is the
+        // token for controls identified by their boundary (that token is now
+        // below 1.4.11's 3:1 in light mode; see contrast/accepted.ts). It is
         // still used in preference to a faint primary alpha, which reads as a
         // tint of the brand colour rather than as an edge.
         outline: "border border-border text-foreground hover-unified bg-background",
@@ -294,11 +296,22 @@ var import_class_variance_authority2 = require("class-variance-authority");
 var import_react2 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var inputVariants = (0, import_class_variance_authority2.cva)(
-  "file:text-foreground placeholder:text-muted-foreground placeholder:opacity-50 selection:bg-primary selection:text-primary-foreground w-full min-w-0 rounded-md border border-input bg-background text-sm transition-all duration-150 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 focus:ring-0 focus:ring-offset-0 focus:outline-none focus:border-primary! focus-visible:border-primary! aria-invalid:border-destructive aria-invalid:focus:border-destructive! data-[invalid=true]:border-destructive data-[invalid=true]:focus:border-destructive!",
+  // `text-foreground` is explicit rather than inherited. Tailwind's preflight
+  // sets `color: inherit` on form controls, so without it the typed value takes
+  // whatever colour an ancestor happens to carry -- muted inside a
+  // `text-muted-foreground` block, red inside a `text-destructive` one. Select
+  // and Textarea have always pinned it; Input was the one control that did not,
+  // and callers were compensating by putting the token on a wrapper.
+  "file:text-foreground text-foreground placeholder:text-muted-foreground placeholder:opacity-50 selection:bg-primary selection:text-primary-foreground w-full min-w-0 rounded-md border border-input bg-background text-sm transition-all duration-150 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 focus:ring-0 focus:ring-offset-0 focus:outline-none focus:border-primary! focus-visible:border-primary! aria-invalid:border-destructive aria-invalid:focus:border-destructive! data-[invalid=true]:border-destructive data-[invalid=true]:focus:border-destructive!",
   {
     variants: {
       size: {
-        sm: "h-[var(--nx-control-height-sm)] px-2.5 py-2 text-sm",
+        // `-md` rather than `-sm`, so that a small input is the same height as
+        // a small button standing beside it in a toolbar or a filter row.
+        // Button's `sm` has always used this step; an input reading `-sm` made
+        // `size="sm"` mean 36px on one control and 32px on another, and a form
+        // row mixing them sat 4px out of line.
+        sm: "h-[var(--nx-control-height-md)] px-2.5 py-2 text-sm",
         default: "h-[var(--nx-control-height)] px-3 py-2.5 text-sm",
         lg: "h-[var(--nx-control-height-lg)] px-4 py-3 text-base"
       }
@@ -874,9 +887,12 @@ var Checkbox = (0, import_react9.forwardRef)(({ className, indeterminate, ...pro
     ref,
     "data-slot": "checkbox",
     className: cn(
-      // Resting border uses border-input (a visible 3:1 boundary); the checked
-      // state switches to border-primary below, keeping the two states distinct.
-      "peer relative h-4 w-4 shrink-0 rounded-sm border border-input ring-offset-background before:absolute before:left-1/2 before:top-1/2 before:h-6 before:w-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] focus:border-primary! focus-visible:border-primary! focus:outline-none focus-visible:outline-none aria-invalid:border-destructive aria-invalid:focus:border-destructive! aria-invalid:focus-visible:border-destructive! disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary transition-all duration-200",
+      // Resting border uses border-control-border, NOT border-input. An
+      // unchecked box has no label, value or focus ring to identify it -- the
+      // border is the whole control -- so it is held to 1.4.11's 3:1, which
+      // border-input deliberately no longer meets. The checked state switches
+      // to border-primary below, keeping the two states distinct.
+      "peer relative h-4 w-4 shrink-0 rounded-sm border border-control-border ring-offset-background before:absolute before:left-1/2 before:top-1/2 before:h-6 before:w-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] focus:border-primary! focus-visible:border-primary! focus:outline-none focus-visible:outline-none aria-invalid:border-destructive aria-invalid:focus:border-destructive! aria-invalid:focus-visible:border-destructive! disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary transition-all duration-200",
       className
     ),
     ...props,
@@ -916,13 +932,15 @@ var RadioGroupItem = (0, import_react10.forwardRef)(({ className, ...props }, re
       className: cn(
         // Unchecked outline uses primary/40 (clearly visible) instead of primary/5
         // (~5% opacity, effectively invisible); hover strengthens above the resting state.
-        // Resting border uses border-input (a visible 3:1 boundary); the checked
-        // state switches to border-primary below, keeping the two states distinct.
+        // Resting border uses border-control-border, NOT border-input. An
+        // unchecked radio is only its ring, with nothing else to identify it,
+        // so it is held to 1.4.11's 3:1 -- which border-input deliberately no
+        // longer meets. The checked state switches to border-primary below.
         // rounded-full is fixed rather than derived from --radius: the circle is
         // what tells the user only one option can be chosen. The thick checked
         // border leaves a background-coloured core, and because the border's
         // inner edge is curved too that core reads as a round dot.
-        "peer h-4 w-4 shrink-0 rounded-full border border-input bg-background cursor-pointer transition-all duration-150 focus:border-primary! focus-visible:border-primary! focus:outline-none focus-visible:outline-none aria-invalid:border-destructive aria-invalid:focus:border-destructive! aria-invalid:focus-visible:border-destructive! disabled:cursor-not-allowed disabled:opacity-50 hover:border-primary/70 data-[state=checked]:border-primary data-[state=checked]:border-[5px]",
+        "peer h-4 w-4 shrink-0 rounded-full border border-control-border bg-background cursor-pointer transition-all duration-150 focus:border-primary! focus-visible:border-primary! focus:outline-none focus-visible:outline-none aria-invalid:border-destructive aria-invalid:focus:border-destructive! aria-invalid:focus-visible:border-destructive! disabled:cursor-not-allowed disabled:opacity-50 hover:border-primary/70 data-[state=checked]:border-primary data-[state=checked]:border-[5px]",
         className
       ),
       ...props,
@@ -943,7 +961,21 @@ function Switch({ className, ...props }) {
       className: cn(
         "peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full  border border-border transition-all outline-none focus-visible:border-primary aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive! disabled:cursor-not-allowed disabled:opacity-50",
         "data-[state=checked]:bg-primary data-[state=checked]:border-primary!",
-        "data-[state=unchecked]:bg-input data-[state=unchecked]:border-border dark:data-[state=unchecked]:bg-input/80",
+        // An unchecked switch is a track and a thumb and nothing else -- no
+        // label inside it, no value, no glyph -- so 1.4.11 applies to both the
+        // track against the page and the thumb against the track. `bg-input`
+        // cannot serve here: it is the FIELD border weight, deliberately below
+        // the minimum, and at that value the pill and its thumb both vanish
+        // into a light page. The control token is the same answer used for the
+        // checkbox and radio boundary, for the same reason.
+        // At full strength in both modes. A `/80` here read as a softening of
+        // the dark track and was in fact a removal of the guarantee the token
+        // carries: composited over the surfaces the switch renders on it
+        // measures 3.02 on the page, 2.94 on a card, 2.85 on a popover or the
+        // sidebar and 2.65 on muted, so three of the four fall under the 3:1
+        // this token exists to hold. Opaque, the same four are 4.23, 4.01,
+        // 3.79 and 3.40.
+        "data-[state=unchecked]:bg-control-border data-[state=unchecked]:border-control-border",
         className
       ),
       ...props,
@@ -1104,41 +1136,57 @@ AvatarFallback.displayName = "AvatarFallback";
 
 // src/components/tabs.tsx
 var import_react_tabs = require("@radix-ui/react-tabs");
+var import_class_variance_authority8 = require("class-variance-authority");
 var import_react13 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var Tabs = import_react_tabs.Root;
-var TabsList = (0, import_react13.forwardRef)(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_react_tabs.List,
-    {
-      ref,
-      "data-slot": "tabs-list",
-      className: cn(
-        // Square corners: underline tabs, so the list never draws a rounded surface.
-        "inline-flex h-10 items-center justify-center gap-1 rounded-none p-0 text-muted-foreground",
-        className
-      ),
-      ...props
-    }
-  )
+var TABS_LIST_VARIANTS = {
+  default: "h-10",
+  ghost: "h-8 bg-transparent"
+};
+var tabsListVariants = (0, import_class_variance_authority8.cva)(
+  // Square corners: underline tabs, so the list never draws a rounded surface.
+  // `gap-1` and `p-0` are invariant across the variants, so they belong here —
+  // repeating them in each arm gives any future adjustment two sites to change
+  // and one to forget.
+  "inline-flex items-center justify-center gap-1 rounded-none p-0 text-muted-foreground",
+  {
+    variants: { variant: TABS_LIST_VARIANTS },
+    defaultVariants: { variant: "default" }
+  }
 );
+var TabsList = (0, import_react13.forwardRef)(({ className, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  import_react_tabs.List,
+  {
+    ref,
+    "data-slot": "tabs-list",
+    className: cn(tabsListVariants({ variant }), className),
+    ...props
+  }
+));
 TabsList.displayName = import_react_tabs.List.displayName;
-var TabsTrigger = (0, import_react13.forwardRef)(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_react_tabs.Trigger,
-    {
-      ref,
-      "data-slot": "tabs-trigger",
-      className: cn(
-        // Square corners: the active state is a 2px bottom border that has to
-        // run the full width of the trigger.
-        "inline-flex items-center justify-center whitespace-nowrap rounded-none bg-transparent px-4 py-2 text-sm font-medium cursor-pointer transition-all duration-200 border-b-2 relative -mb-0.5 data-[state=active]:border-b-primary! data-[state=active]:text-primary data-[state=inactive]:border-transparent data-[state=inactive]:text-muted-foreground hover:text-primary hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
-        className
-      ),
-      ...props
-    }
-  )
+var TABS_TRIGGER_SIZES = {
+  default: "text-sm",
+  sm: "text-xs"
+};
+var tabsTriggerVariants = (0, import_class_variance_authority8.cva)(
+  // Square corners: the active state is a 2px bottom border that has to run the
+  // full width of the trigger.
+  "inline-flex items-center justify-center whitespace-nowrap rounded-none bg-transparent px-4 py-2 font-medium cursor-pointer transition-all duration-200 border-b-2 relative -mb-0.5 data-[state=active]:border-b-primary! data-[state=active]:text-primary data-[state=inactive]:border-transparent data-[state=inactive]:text-muted-foreground hover:text-primary hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
+  {
+    variants: { size: TABS_TRIGGER_SIZES },
+    defaultVariants: { size: "default" }
+  }
 );
+var TabsTrigger = (0, import_react13.forwardRef)(({ className, size, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  import_react_tabs.Trigger,
+  {
+    ref,
+    "data-slot": "tabs-trigger",
+    className: cn(tabsTriggerVariants({ size }), className),
+    ...props
+  }
+));
 TabsTrigger.displayName = import_react_tabs.Trigger.displayName;
 var TabsContent = (0, import_react13.forwardRef)(
   ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -1184,7 +1232,7 @@ PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 // src/components/dialog.tsx
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
-var import_class_variance_authority8 = require("class-variance-authority");
+var import_class_variance_authority9 = require("class-variance-authority");
 var import_lucide_react4 = require("lucide-react");
 var import_react14 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
@@ -1210,7 +1258,7 @@ var DialogOverlay = (0, import_react14.forwardRef)(({ className, ...props }, ref
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var dialogContentVariants = (0, import_class_variance_authority8.cva)("", {
+var dialogContentVariants = (0, import_class_variance_authority9.cva)("", {
   variants: {
     size: {
       sm: "max-w-sm",
@@ -1567,7 +1615,7 @@ DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 // src/components/select.tsx
 var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
-var import_class_variance_authority9 = require("class-variance-authority");
+var import_class_variance_authority10 = require("class-variance-authority");
 var import_lucide_react6 = require("lucide-react");
 var import_react16 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
@@ -1584,14 +1632,17 @@ function SelectValue({
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
-var selectTriggerVariants = (0, import_class_variance_authority9.cva)(
+var selectTriggerVariants = (0, import_class_variance_authority10.cva)(
   // hover:border-primary (full strength) keeps the hover boundary more visible
   // than the resting border-input, not a fainter alpha of it.
   "flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-3 text-sm text-foreground cursor-pointer transition-all duration-150 focus:border-primary! focus-visible:border-primary! focus:outline-none hover:border-primary disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-primary/5 data-[placeholder]:text-muted-foreground aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:border-destructive! [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4",
   {
     variants: {
       size: {
-        sm: "h-[var(--nx-control-height-sm)] text-sm",
+        // `-md`, matching Button and Input: one height for one size name. A
+        // select sitting beside a small button in a filter row is the case that
+        // makes a 4px difference visible.
+        sm: "h-[var(--nx-control-height-md)] text-sm",
         default: "h-[var(--nx-control-height)] text-sm",
         lg: "h-[var(--nx-control-height-lg)] text-base"
       }
@@ -1736,7 +1787,7 @@ function SelectScrollDownButton({
 
 // src/components/sheet.tsx
 var DialogPrimitive2 = __toESM(require("@radix-ui/react-dialog"), 1);
-var import_class_variance_authority10 = require("class-variance-authority");
+var import_class_variance_authority11 = require("class-variance-authority");
 var React7 = __toESM(require("react"), 1);
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var Sheet = DialogPrimitive2.Root;
@@ -1762,7 +1813,7 @@ var SheetOverlay = React7.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SheetOverlay.displayName = DialogPrimitive2.Overlay.displayName;
-var sheetVariants = (0, import_class_variance_authority10.cva)(
+var sheetVariants = (0, import_class_variance_authority11.cva)(
   "fixed z-50 gap-4 bg-background p-6 shadow-lg will-change-transform transition ease-in-out data-[state=closed]:duration-150 data-[state=open]:duration-150 data-[state=open]:animate-in data-[state=closed]:animate-out",
   {
     variants: {
@@ -1882,13 +1933,19 @@ var CommandDialogOverlay = (0, import_react17.forwardRef)(({ className, ...props
   }
 ));
 CommandDialogOverlay.displayName = "CommandDialogOverlay";
-var CommandDialog = ({ children, ...props }) => {
+var CommandDialog = ({
+  children,
+  commandProps,
+  contentProps,
+  ...props
+}) => {
   const portalContainer = usePortalContainer();
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DialogPrimitive3.Root, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(DialogPrimitive3.Portal, { container: portalContainer, children: [
     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CommandDialogOverlay, {}),
     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       DialogPrimitive3.Content,
       {
+        ...contentProps,
         "data-slot": "command-content",
         className: cn(
           // Position
@@ -1914,7 +1971,19 @@ var CommandDialog = ({ children, ...props }) => {
           "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
           "data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]"
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Command, { className: "[&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wide [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:mb-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-3 [&_[cmdk-item]]:py-2 [&_[cmdk-item]_svg]:h-4 [&_[cmdk-item]_svg]:w-4", children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          Command,
+          {
+            ...commandProps,
+            className: cn(
+              "[&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wide [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:mb-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-3 [&_[cmdk-item]]:py-2 [&_[cmdk-item]_svg]:h-4 [&_[cmdk-item]_svg]:w-4",
+              // Merged rather than overridden: a caller passing `className` for its own reason
+              // would otherwise silently drop every layout rule this dialog depends on.
+              commandProps?.className
+            ),
+            children
+          }
+        )
       }
     )
   ] }) });
@@ -2052,13 +2121,14 @@ var CommandShortcut = (0, import_react17.forwardRef)(
   }
 );
 CommandShortcut.displayName = "CommandShortcut";
+var commandDefaultFilter = import_cmdk.defaultFilter;
 
 // src/components/spinner.tsx
-var import_class_variance_authority11 = require("class-variance-authority");
+var import_class_variance_authority12 = require("class-variance-authority");
 var import_lucide_react8 = require("lucide-react");
 var import_react18 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var spinnerVariants = (0, import_class_variance_authority11.cva)("animate-spin motion-reduce:animate-none", {
+var spinnerVariants = (0, import_class_variance_authority12.cva)("animate-spin motion-reduce:animate-none", {
   variants: {
     size: {
       sm: "h-4 w-4",
@@ -3504,7 +3574,7 @@ function createShortcutManager(options = {}) {
   let pendingKey = null;
   function layerShape(bindings, options2) {
     const keys = bindings.map((b) => b.binding.keys).join("\0");
-    return `${keys}
${options2.depth}
${options2.blocking === true}
${options2.enabled !== false}`;
+    return `${keys}
${options2.depth}
${options2.priority ?? 0}
${options2.blocking === true}
${options2.enabled !== false}`;
   }
   function blocking() {
     return ordered().some((layer) => layer.options.blocking === true);
@@ -3523,7 +3593,7 @@ function createShortcutManager(options = {}) {
   }
   function ordered() {
     return [...layers].filter((layer) => layer.options.enabled !== false).sort(
-      (a, b) => b.options.depth - a.options.depth || b.sequence - a.sequence
+      (a, b) => (b.options.priority ?? 0) - (a.options.priority ?? 0) || b.options.depth - a.options.depth || b.sequence - a.sequence
     );
   }
   function matchDepth(prepared, pressed) {
@@ -3974,7 +4044,8 @@ function useShortcuts(bindings, options) {
       name: options.name,
       depth,
       enabled: options.enabled,
-      blocking: options.blocking
+      blocking: options.blocking,
+      priority: options.priority
     });
   });
 }
@@ -4153,6 +4224,7 @@ function useActiveShortcuts() {
   badgeVariants,
   buttonVariants,
   cardVariants,
+  commandDefaultFilter,
   createShortcutManager,
   dialogContentVariants,
   inputVariants,