@nextlyhq/ui 0.0.2-alpha.42 → 0.0.2-alpha.44

package/dist/index.mjs

@@ -16,7 +16,7 @@ function cn(...inputs) {
 // src/components/button.tsx
 import { jsx } from "react/jsx-runtime";
 var buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-none text-sm font-medium cursor-pointer transition-all duration-150 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed active:scale-[0.98] [&_svg]:text-current",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-all duration-150 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed active:scale-[0.98] [&_svg]:text-current",
   {
     variants: {
       variant: {
@@ -27,8 +27,12 @@ var buttonVariants = cva(
         // Hover darkens to a deeper shade instead of opacity-90, which would
         // composite the fill toward the page and drop white text under 4.5:1.
         destructive: "bg-destructive-solid text-destructive-foreground border border-transparent hover:bg-destructive-700",
-        // border-border (not a faint primary alpha) so the outline is a visible
-        // boundary at the 3:1 UI minimum.
+        // 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
+        // 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",
         secondary: "bg-background border border-border text-foreground hover:bg-primary/5",
         ghost: "text-foreground border border-transparent hover-unified",
@@ -36,7 +40,7 @@ var buttonVariants = cva(
       },
       size: {
         default: "h-[var(--nx-control-height)] px-6 py-2",
-        sm: "h-[var(--nx-control-height-md)] px-4 text-[13px]",
+        sm: "h-[var(--nx-control-height-md)] px-4 text-sm",
         md: "h-[var(--nx-control-height)] px-6 text-sm",
         lg: "h-[var(--nx-control-height-lg)] px-8 text-base",
         icon: "h-[var(--nx-control-height)] w-[var(--nx-control-height)] p-0",
@@ -83,7 +87,7 @@ import { cva as cva2 } from "class-variance-authority";
 import { forwardRef as forwardRef2 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var inputVariants = cva2(
-  "file:text-foreground placeholder:text-muted-foreground placeholder:opacity-50 selection:bg-primary selection:text-primary-foreground w-full min-w-0 rounded-none 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!",
+  "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!",
   {
     variants: {
       size: {
@@ -124,7 +128,7 @@ var Textarea = forwardRef3(({ className, ...props }, ref) => {
       className: cn(
         // hover:border-primary (full strength) keeps the hover boundary more
         // visible than the resting border-input, not a fainter alpha of it.
-        "flex min-h-[80px] w-full rounded-none border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground placeholder:opacity-50 transition-all duration-200 focus:border-primary! focus-visible:border-primary! focus:outline-none hover:border-primary disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-primary/5 resize-y",
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground placeholder:opacity-50 transition-all duration-200 focus:border-primary! focus-visible:border-primary! focus:outline-none hover:border-primary disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-primary/5 resize-y",
         "aria-invalid:border-destructive aria-invalid:focus:border-destructive!",
         className
       ),
@@ -199,7 +203,7 @@ var TooltipContent = forwardRef4(({ className, sideOffset = 4, ...props }, ref)
         sideOffset,
         "data-slot": "tooltip-content",
         className: cn(
-          "z-50 overflow-hidden rounded-none px-3 py-1.5 text-xs shadow-lg  border border-border bg-popover text-popover-foreground 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 overflow-hidden rounded-lg px-3 py-1.5 text-xs shadow-lg  border border-border bg-popover text-popover-foreground 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",
           className
         ),
         ...props
@@ -244,7 +248,7 @@ var FormLabelWithTooltip = React2.forwardRef(
           {
             side: "right",
             className: cn(
-              "max-w-[250px] text-[12px] break-words relative z-[100] shadow-md  border border-border bg-primary text-primary-foreground px-3 py-2 rounded-none",
+              "max-w-[250px] text-xs break-words relative z-[100] shadow-md  border border-border bg-primary text-primary-foreground px-3 py-2 rounded-lg",
               tooltipClassName
             ),
             children: description
@@ -260,7 +264,7 @@ FormLabelWithTooltip.displayName = "FormLabelWithTooltip";
 import { cva as cva3 } from "class-variance-authority";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var badgeVariants = cva3(
-  "inline-flex items-center rounded-none px-2.5 py-0.5 h-[22px] text-xs font-medium transition-colors",
+  "inline-flex items-center rounded-sm px-2.5 py-0.5 h-[22px] text-xs font-medium transition-colors",
   {
     variants: {
       variant: {
@@ -295,7 +299,7 @@ import { cva as cva4 } from "class-variance-authority";
 import { forwardRef as forwardRef6 } from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var cardVariants = cva4(
-  "bg-card text-foreground rounded-none  border border-border   transition-all duration-200",
+  "bg-card text-foreground rounded-lg  border border-border   transition-all duration-200",
   {
     variants: {
       variant: {
@@ -331,7 +335,14 @@ var CardHeader = forwardRef6(
         ref,
         "data-slot": "card-header",
         className: cn(
-          "flex flex-col p-4",
+          // Mirrors CardFooter: a header that carries its own tint runs the full
+          // width of the card, so at a nonzero --radius it would paint square
+          // across the card's curved top corners. `inherit` takes the parent's
+          // computed radius rather than restating a step. It only helps when the
+          // header is a direct child of the card; a header nested inside another
+          // wrapper inherits that wrapper's radius instead, and such a card needs
+          // `overflow-hidden` to clip the fill.
+          "flex flex-col rounded-t-[inherit] p-4",
           !noBorder && "border-b border-border",
           className
         ),
@@ -405,7 +416,13 @@ var CardFooter = forwardRef6(
         ref,
         "data-slot": "card-footer",
         className: cn(
-          "flex items-center px-6 py-4  border-t border-border bg-primary/5",
+          // The footer's tint runs the full width of the card, so at a nonzero
+          // --radius it would paint square across the card's curved bottom
+          // corners. `inherit` takes the card's own computed radius rather than
+          // restating a step, so a card whose radius is overridden stays
+          // matched, and it can never disagree with the card at any --radius,
+          // including the shipped 0 where `rounded-lg` is 0.
+          "flex items-center px-6 py-4  border-t border-border bg-primary/5 rounded-b-[inherit]",
           className
         ),
         ...props
@@ -474,7 +491,7 @@ import { cva as cva5 } from "class-variance-authority";
 import { forwardRef as forwardRef8 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var alertVariants = cva5(
-  "relative flex items-start gap-3 rounded-none  border border-border p-4 text-sm   transition-colors duration-150",
+  "relative flex items-start gap-3 rounded-md  border border-border p-4 text-sm   transition-colors duration-150",
   {
     variants: {
       variant: {
@@ -578,7 +595,7 @@ var Skeleton = React3.forwardRef(
         "data-slot": "skeleton",
         "aria-hidden": "true",
         className: cn(
-          "bg-primary/5 animate-pulse rounded-none motion-reduce:animate-none",
+          "bg-primary/5 animate-pulse rounded-md motion-reduce:animate-none",
           className
         ),
         ...props
@@ -625,7 +642,7 @@ var Progress = React4.forwardRef(
         "aria-valuemax": max,
         "aria-label": ariaLabel || `Progress: ${Math.round(percentage)}%`,
         className: cn(
-          "relative h-2 w-full overflow-hidden rounded-none bg-accent",
+          "relative h-2 w-full overflow-hidden rounded-full bg-accent",
           className
         ),
         ...props,
@@ -658,7 +675,7 @@ var Checkbox = forwardRef11(({ className, indeterminate, ...props }, ref) => /*
     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-none 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",
+      "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",
       className
     ),
     ...props,
@@ -700,11 +717,15 @@ var RadioGroupItem = forwardRef12(({ className, ...props }, ref) => {
         // (~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.
-        "peer h-4 w-4 shrink-0 rounded-none 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]",
+        // 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]",
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx16(RadioGroupPrimitive.Indicator, {})
+      children: /* @__PURE__ */ jsx16(RadioGroupPrimitive.Indicator, { className: "block size-full rounded-full" })
     }
   );
 });
@@ -722,7 +743,7 @@ function Switch({ className, ...props }) {
     {
       "data-slot": "switch",
       className: cn(
-        "peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-none  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",
+        "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",
         className
@@ -733,7 +754,7 @@ function Switch({ className, ...props }) {
         {
           "data-slot": "switch-thumb",
           className: cn(
-            "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-none ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+            "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
           )
         }
       )
@@ -808,7 +829,7 @@ import { cva as cva7 } from "class-variance-authority";
 import { createContext as createContext2, forwardRef as forwardRef14, useContext as useContext2 } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 var avatarVariants = cva7(
-  "relative inline-flex shrink-0 overflow-hidden rounded-none items-center justify-center bg-primary/5 text-muted-foreground",
+  "relative inline-flex shrink-0 overflow-hidden rounded-full items-center justify-center bg-primary/5 text-muted-foreground",
   {
     variants: {
       size: {
@@ -875,7 +896,7 @@ var AvatarFallback = forwardRef14(
         ref,
         "data-slot": "avatar-fallback",
         className: cn(
-          "bg-primary/5 text-muted-foreground flex size-full items-center justify-center rounded-none font-medium",
+          "bg-primary/5 text-muted-foreground flex size-full items-center justify-center rounded-full font-medium",
           textSize,
           className
         ),
@@ -899,6 +920,7 @@ var TabsList = forwardRef15(
       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
       ),
@@ -914,6 +936,8 @@ var TabsTrigger = forwardRef15(
       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
       ),
@@ -955,7 +979,7 @@ var PopoverContent = React5.forwardRef(({ className, align = "center", sideOffse
       sideOffset,
       "data-slot": "popover-content",
       className: cn(
-        "z-[100] w-72 rounded-none  border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 origin-[--radix-popover-content-transform-origin]",
+        "z-[100] w-72 rounded-lg  border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 origin-[--radix-popover-content-transform-origin]",
         className
       ),
       ...props
@@ -980,6 +1004,9 @@ var DialogOverlay = forwardRef17(({ className, ...props }, ref) => /* @__PURE__
     ref,
     "data-slot": "dialog-overlay",
     className: cn(
+      // A modal scrim: a black wash is the point, so it stays a literal
+      // rather than a surface token. Painting it from `background` would
+      // make it a white veil in light mode and near-invisible in dark.
       "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm transition-opacity duration-150 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     ),
@@ -1011,7 +1038,7 @@ var DialogContent = forwardRef17(({ className, children, size, ...props }, ref)
         ref,
         "data-slot": "dialog-content",
         className: cn(
-          "fixed left-[50%] top-[50%] z-[51] grid w-full translate-x-[-50%] translate-y-[-50%] gap-4  border border-border bg-background p-6 shadow-xl rounded-none duration-150 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+          "fixed left-[50%] top-[50%] z-[51] grid w-full translate-x-[-50%] translate-y-[-50%] gap-4  border border-border bg-background p-6 shadow-xl rounded-lg duration-150 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
           dialogContentVariants({ size }),
           className
         ),
@@ -1022,7 +1049,7 @@ var DialogContent = forwardRef17(({ className, children, size, ...props }, ref)
             DialogPrimitive.Close,
             {
               "data-slot": "dialog-close",
-              className: "absolute right-4 top-4 rounded-none p-1 text-muted-foreground cursor-pointer transition-colors duration-150 hover-unified focus:outline-none focus:ring-2 focus:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed",
+              className: "absolute right-4 top-4 rounded-md p-1 text-muted-foreground cursor-pointer transition-colors duration-150 hover-unified focus:outline-none focus:ring-2 focus:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed",
               children: [
                 /* @__PURE__ */ jsx22(X, { className: "h-4 w-4" }),
                 /* @__PURE__ */ jsx22("span", { className: "sr-only", children: "Close" })
@@ -1099,6 +1126,9 @@ var AlertDialogOverlay = forwardRef18(({ className, ...props }, ref) => /* @__PU
   {
     ref,
     className: cn(
+      // A modal scrim: a black wash is the point, so it stays a literal
+      // rather than a surface token. Painting it from `background` would
+      // make it a white veil in light mode and near-invisible in dark.
       "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm transition-opacity duration-150 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     ),
@@ -1115,7 +1145,7 @@ var AlertDialogContent = forwardRef18(({ className, ...props }, ref) => {
       {
         ref,
         className: cn(
-          "fixed left-[50%] top-[50%] z-[51] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4  border border-border bg-background p-6 shadow-xl rounded-none duration-150 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+          "fixed left-[50%] top-[50%] z-[51] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4  border border-border bg-background p-6 shadow-xl rounded-lg duration-150 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
           className
         ),
         ...props
@@ -1215,7 +1245,7 @@ var DropdownMenuSubTrigger = React6.forwardRef(({ className, inset, children, ..
   {
     ref,
     className: cn(
-      "flex select-none items-center gap-2 rounded-none px-2 py-1.5 text-sm outline-none data-[state=open]:bg-muted data-[state=open]:text-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "flex select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-muted data-[state=open]:text-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       menuItemBase,
       inset && "pl-8",
       className
@@ -1233,7 +1263,7 @@ var DropdownMenuSubContent = React6.forwardRef(({ className, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-none  border border-border bg-popover p-1 text-popover-foreground shadow-lg 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 origin-[--radix-dropdown-menu-content-transform-origin]",
+      "z-50 min-w-[8rem] overflow-hidden rounded-lg  border border-border bg-popover p-1 text-popover-foreground shadow-lg 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 origin-[--radix-dropdown-menu-content-transform-origin]",
       className
     ),
     ...props
@@ -1248,7 +1278,7 @@ var DropdownMenuContent = React6.forwardRef(({ className, sideOffset = 4, ...pro
       ref,
       sideOffset,
       className: cn(
-        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-none  border border-border bg-popover p-1 text-popover-foreground shadow-md 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 origin-[--radix-dropdown-menu-content-transform-origin]",
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-lg  border border-border bg-popover p-1 text-popover-foreground shadow-md 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 origin-[--radix-dropdown-menu-content-transform-origin]",
         className
       ),
       ...props
@@ -1261,7 +1291,7 @@ var DropdownMenuItem = React6.forwardRef(({ className, inset, ...props }, ref) =
   {
     ref,
     className: cn(
-      "relative flex select-none items-center gap-2 rounded-none px-2 py-1.5 text-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "relative flex select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       menuItemBase,
       inset && "pl-8",
       className
@@ -1275,7 +1305,7 @@ var DropdownMenuCheckboxItem = React6.forwardRef(({ className, children, checked
   {
     ref,
     className: cn(
-      "relative flex select-none items-center rounded-none py-1.5 pl-8 pr-2 text-sm outline-none",
+      "relative flex select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
       menuItemBase,
       className
     ),
@@ -1293,7 +1323,7 @@ var DropdownMenuRadioItem = React6.forwardRef(({ className, children, ...props }
   {
     ref,
     className: cn(
-      "relative flex select-none items-center rounded-none py-1.5 pl-8 pr-2 text-sm outline-none",
+      "relative flex select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
       menuItemBase,
       className
     ),
@@ -1361,7 +1391,7 @@ function SelectValue({
 var selectTriggerVariants = cva9(
   // 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-none 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",
+  "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: {
@@ -1403,7 +1433,7 @@ function SelectContent({
     {
       "data-slot": "select-content",
       className: cn(
-        "bg-popover text-popover-foreground  border border-border shadow-none rounded-none z-9999 max-h-(--radix-select-content-available-height) min-w-32 overflow-hidden data-[state=open]:animate-zoom-in-95 data-[state=closed]:animate-zoom-out-95 data-[side=bottom]:animate-slide-in-from-top-2 data-[side=left]:animate-slide-in-from-right-2 data-[side=right]:animate-slide-in-from-left-2 data-[side=top]:animate-slide-in-from-bottom-2",
+        "bg-popover text-popover-foreground  border border-border shadow-none rounded-lg z-9999 max-h-(--radix-select-content-available-height) min-w-32 overflow-hidden data-[state=open]:animate-zoom-in-95 data-[state=closed]:animate-zoom-out-95 data-[side=bottom]:animate-slide-in-from-top-2 data-[side=left]:animate-slide-in-from-right-2 data-[side=right]:animate-slide-in-from-left-2 data-[side=top]:animate-slide-in-from-bottom-2",
         position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
       ),
@@ -1449,7 +1479,7 @@ function SelectItem({
     {
       "data-slot": "select-item",
       className: cn(
-        "relative flex w-full cursor-pointer items-center gap-2 rounded-none py-2 pr-8 pl-2 text-sm text-foreground outline-none select-none transition-colors hover-unified focus:bg-primary/5 focus:text-primary data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4",
+        "relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-2 pr-8 pl-2 text-sm text-foreground outline-none select-none transition-colors hover-unified focus:bg-primary/5 focus:text-primary data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4",
         className
       ),
       ...props,
@@ -1521,6 +1551,9 @@ var SheetOverlay = React7.forwardRef(({ className, ...props }, ref) => /* @__PUR
   DialogPrimitive2.Overlay,
   {
     className: cn(
+      // A modal scrim: a black wash is the point, so it stays a literal
+      // rather than a surface token. Painting it from `background` would
+      // make it a white veil in light mode and near-invisible in dark.
       "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -1623,7 +1656,7 @@ var Command = forwardRef22(
     {
       ref,
       className: cn(
-        "flex h-full w-full flex-col overflow-hidden rounded-none bg-background text-foreground",
+        "flex h-full w-full flex-col overflow-hidden rounded-lg bg-background text-foreground",
         className
       ),
       ...props
@@ -1636,6 +1669,9 @@ var CommandDialogOverlay = forwardRef22(({ className, ...props }, ref) => /* @__
   {
     ref,
     className: cn(
+      // A modal scrim: a black wash is the point, so it stays a literal
+      // rather than a surface token. Painting it from `background` would
+      // make it a white veil in light mode and near-invisible in dark.
       "fixed inset-0 z-[99] bg-black/80 backdrop-blur-sm",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -1670,7 +1706,7 @@ var CommandDialog = ({ children, ...props }) => {
           "m-4 sm:m-0",
           // 16px margin on mobile, no margin on desktop
           // Visual
-          "overflow-hidden rounded-none  border border-border bg-background shadow-xl",
+          "overflow-hidden rounded-lg  border border-border bg-background shadow-xl",
           // Animation
           "duration-200",
           "data-[state=open]:animate-in data-[state=closed]:animate-out",
@@ -1776,7 +1812,7 @@ var CommandItem = forwardRef22(({ className, ...props }, ref) => /* @__PURE__ */
       // Spacing
       "px-3 py-2.5",
       // Visual
-      "rounded-none text-base sm:text-sm outline-none",
+      "rounded-sm text-base sm:text-sm outline-none",
       // Transitions
       "transition-all duration-200 ease-(--ease-premium)",
       // Hover state - shared dashboard hover treatment
@@ -1805,7 +1841,7 @@ var CommandShortcut = forwardRef22(
           "text-xs font-mono",
           // Visual
           "text-muted-foreground bg-primary/5",
-          "border border-border rounded-none",
+          "border border-border rounded-md",
           // Spacing
           "px-1.5 py-0.5",
           className
@@ -2000,7 +2036,7 @@ function TableSearch({
         value,
         onChange: (e) => onChange(e.target.value),
         "aria-busy": isLoading,
-        className: "h-10 w-full rounded-none  border border-border bg-background pl-10 pr-10 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 transition-all"
+        className: "h-10 w-full rounded-md  border border-input bg-background pl-10 pr-10 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 transition-all"
       }
     ),
     (value || isLoading) && /* @__PURE__ */ jsxs10("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2", children: [
@@ -2010,7 +2046,7 @@ function TableSearch({
         {
           type: "button",
           onClick: onClear,
-          className: "text-muted-foreground hover:text-foreground transition-colors p-0.5 rounded-none hover:bg-primary/5",
+          className: "text-muted-foreground hover:text-foreground transition-colors p-0.5 rounded-md hover:bg-primary/5",
           "aria-label": "Clear search",
           children: /* @__PURE__ */ jsx31(X2, { className: "w-3.5 h-3.5" })
         }
@@ -2038,7 +2074,7 @@ function TableLoading() {
 }
 function TableEmpty({ message = "No records found" }) {
   return /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-center justify-center gap-4 p-16 text-center text-muted-foreground", children: [
-    /* @__PURE__ */ jsx32("div", { className: "flex h-12 w-12 items-center justify-center rounded-none bg-primary/5", children: /* @__PURE__ */ jsx32(FileQuestion, { className: "h-6 w-6" }) }),
+    /* @__PURE__ */ jsx32("div", { className: "flex h-12 w-12 items-center justify-center rounded-md bg-primary/5", children: /* @__PURE__ */ jsx32(FileQuestion, { className: "h-6 w-6" }) }),
     /* @__PURE__ */ jsx32("span", { className: "text-sm font-medium", children: message })
   ] });
 }
@@ -2054,9 +2090,9 @@ var TableSkeleton = ({
 }) => {
   const content = /* @__PURE__ */ jsxs12(Fragment, { children: [
     /* @__PURE__ */ jsx33("div", { className: "border-0 rounded-none shadow-none", children: /* @__PURE__ */ jsxs12(Table, { children: [
-      /* @__PURE__ */ jsx33(TableHeader, { children: /* @__PURE__ */ jsx33(TableRow, { children: Array.from({ length: columns }).map((_, colIdx) => /* @__PURE__ */ jsx33(TableHead, { className: "py-3", children: colIdx === 0 ? /* @__PURE__ */ jsx33(GrayBar, { className: "h-4 w-4" }) : colIdx === columns - 1 ? /* @__PURE__ */ jsx33("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx33(Skeleton, { className: "h-4 w-4 rounded-none" }) }) : colIdx === 1 ? /* @__PURE__ */ jsx33(GrayBar, { className: "h-4 w-[70%] max-w-[180px]" }) : /* @__PURE__ */ jsx33(GrayBar, { className: "h-4 w-[60%] max-w-[120px]" }) }, `skeleton-header-${colIdx}`)) }) }),
-      /* @__PURE__ */ jsx33(TableBody, { children: Array.from({ length: rowCount }).map((_, rowIdx) => /* @__PURE__ */ jsx33(TableRow, { className: "border-b border-border", children: Array.from({ length: columns }).map((_2, colIdx) => /* @__PURE__ */ jsx33(TableCell, { className: "py-3", children: colIdx === 0 ? /* @__PURE__ */ jsx33(GrayBar, { className: "h-4 w-4" }) : colIdx === columns - 1 ? /* @__PURE__ */ jsx33("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx33(Skeleton, { className: "h-8 w-8 rounded-none" }) }) : colIdx === 1 ? /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx33(Skeleton, { className: "w-9 rounded-none shrink-0" }),
+      /* @__PURE__ */ jsx33(TableHeader, { children: /* @__PURE__ */ jsx33(TableRow, { children: Array.from({ length: columns }).map((_, colIdx) => /* @__PURE__ */ jsx33(TableHead, { className: "py-3", children: colIdx === 0 ? /* @__PURE__ */ jsx33(GrayBar, { className: "h-4 w-4" }) : colIdx === columns - 1 ? /* @__PURE__ */ jsx33("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx33(Skeleton, { className: "h-4 w-4 rounded-sm" }) }) : colIdx === 1 ? /* @__PURE__ */ jsx33(GrayBar, { className: "h-4 w-[70%] max-w-[180px]" }) : /* @__PURE__ */ jsx33(GrayBar, { className: "h-4 w-[60%] max-w-[120px]" }) }, `skeleton-header-${colIdx}`)) }) }),
+      /* @__PURE__ */ jsx33(TableBody, { children: Array.from({ length: rowCount }).map((_, rowIdx) => /* @__PURE__ */ jsx33(TableRow, { className: "border-b border-border", children: Array.from({ length: columns }).map((_2, colIdx) => /* @__PURE__ */ jsx33(TableCell, { className: "py-3", children: colIdx === 0 ? /* @__PURE__ */ jsx33(GrayBar, { className: "h-4 w-4" }) : colIdx === columns - 1 ? /* @__PURE__ */ jsx33("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx33(Skeleton, { className: "h-8 w-8 rounded-md" }) }) : colIdx === 1 ? /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx33(Skeleton, { className: "w-9 rounded-md shrink-0" }),
         /* @__PURE__ */ jsxs12("div", { className: "space-y-1.5 flex-1", children: [
           /* @__PURE__ */ jsx33(Skeleton, { className: "h-4 w-[120px]" }),
           /* @__PURE__ */ jsx33(Skeleton, { className: "h-3 w-[80px]" })
@@ -2084,7 +2120,7 @@ var TableSkeleton = ({
   if (hideWrapper) {
     return content;
   }
-  return /* @__PURE__ */ jsx33("div", { className: "table-wrapper rounded-none  border border-border bg-card overflow-hidden", children: content });
+  return /* @__PURE__ */ jsx33("div", { className: "table-wrapper rounded-md  border border-border bg-card overflow-hidden", children: content });
 };
 TableSkeleton.displayName = "TableSkeleton";
 export {