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

package/dist/index.cjs

@@ -192,7 +192,7 @@ function cn(...inputs) {
 // src/components/button.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority.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: {
@@ -203,8 +203,12 @@ var buttonVariants = (0, import_class_variance_authority.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",
@@ -212,7 +216,7 @@ var buttonVariants = (0, import_class_variance_authority.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",
@@ -259,7 +263,7 @@ 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-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: {
@@ -300,7 +304,7 @@ var Textarea = (0, import_react3.forwardRef)(({ 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
       ),
@@ -369,7 +373,7 @@ var TooltipContent = (0, import_react5.forwardRef)(({ className, sideOffset = 4,
         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
@@ -414,7 +418,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
@@ -430,7 +434,7 @@ FormLabelWithTooltip.displayName = "FormLabelWithTooltip";
 var import_class_variance_authority3 = require("class-variance-authority");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var badgeVariants = (0, import_class_variance_authority3.cva)(
-  "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: {
@@ -465,7 +469,7 @@ var import_class_variance_authority4 = require("class-variance-authority");
 var import_react6 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var cardVariants = (0, import_class_variance_authority4.cva)(
-  "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: {
@@ -501,7 +505,14 @@ var CardHeader = (0, import_react6.forwardRef)(
         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
         ),
@@ -575,7 +586,13 @@ var CardFooter = (0, import_react6.forwardRef)(
         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
@@ -644,7 +661,7 @@ var import_class_variance_authority5 = require("class-variance-authority");
 var import_react8 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var alertVariants = (0, import_class_variance_authority5.cva)(
-  "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: {
@@ -748,7 +765,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
@@ -795,7 +812,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,
@@ -828,7 +845,7 @@ var Checkbox = (0, import_react9.forwardRef)(({ className, indeterminate, ...pro
     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,
@@ -870,11 +887,15 @@ var RadioGroupItem = (0, import_react10.forwardRef)(({ className, ...props }, re
         // (~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__ */ (0, import_jsx_runtime16.jsx)(RadioGroupPrimitive.Indicator, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RadioGroupPrimitive.Indicator, { className: "block size-full rounded-full" })
     }
   );
 });
@@ -889,7 +910,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
@@ -900,7 +921,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"
           )
         }
       )
@@ -971,7 +992,7 @@ var import_class_variance_authority7 = require("class-variance-authority");
 var import_react12 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var avatarVariants = (0, import_class_variance_authority7.cva)(
-  "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: {
@@ -1038,7 +1059,7 @@ var AvatarFallback = (0, import_react12.forwardRef)(
         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
         ),
@@ -1062,6 +1083,7 @@ var TabsList = (0, import_react13.forwardRef)(
       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
       ),
@@ -1077,6 +1099,8 @@ var TabsTrigger = (0, import_react13.forwardRef)(
       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
       ),
@@ -1118,7 +1142,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
@@ -1143,6 +1167,9 @@ var DialogOverlay = (0, import_react14.forwardRef)(({ className, ...props }, ref
     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
     ),
@@ -1174,7 +1201,7 @@ var DialogContent = (0, import_react14.forwardRef)(({ className, children, size,
         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
         ),
@@ -1185,7 +1212,7 @@ var DialogContent = (0, import_react14.forwardRef)(({ className, children, size,
             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__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react4.X, { className: "h-4 w-4" }),
                 /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "sr-only", children: "Close" })
@@ -1260,6 +1287,9 @@ var AlertDialogOverlay = (0, import_react15.forwardRef)(({ className, ...props }
   {
     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
     ),
@@ -1276,7 +1306,7 @@ var AlertDialogContent = (0, import_react15.forwardRef)(({ className, ...props }
       {
         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
@@ -1376,7 +1406,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
@@ -1394,7 +1424,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
@@ -1409,7 +1439,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
@@ -1422,7 +1452,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
@@ -1436,7 +1466,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
     ),
@@ -1454,7 +1484,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
     ),
@@ -1522,7 +1552,7 @@ function SelectValue({
 var selectTriggerVariants = (0, import_class_variance_authority9.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-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: {
@@ -1564,7 +1594,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
       ),
@@ -1610,7 +1640,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,
@@ -1682,6 +1712,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",
@@ -1784,7 +1817,7 @@ var Command = (0, import_react17.forwardRef)(
     {
       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
@@ -1797,6 +1830,9 @@ var CommandDialogOverlay = (0, import_react17.forwardRef)(({ className, ...props
   {
     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",
@@ -1831,7 +1867,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",
@@ -1937,7 +1973,7 @@ var CommandItem = (0, import_react17.forwardRef)(({ className, ...props }, ref)
       // 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
@@ -1966,7 +2002,7 @@ var CommandShortcut = (0, import_react17.forwardRef)(
           "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
@@ -2155,7 +2191,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__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2", children: [
@@ -2165,7 +2201,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__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react10.X, { className: "w-3.5 h-3.5" })
         }
@@ -2193,7 +2229,7 @@ function TableLoading() {
 }
 function TableEmpty({ message = "No records found" }) {
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col items-center justify-center gap-4 p-16 text-center text-muted-foreground", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex h-12 w-12 items-center justify-center rounded-none bg-primary/5", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react11.FileQuestion, { className: "h-6 w-6" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex h-12 w-12 items-center justify-center rounded-md bg-primary/5", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react11.FileQuestion, { className: "h-6 w-6" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-sm font-medium", children: message })
   ] });
 }
@@ -2209,9 +2245,9 @@ var TableSkeleton = ({
 }) => {
   const content = /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "border-0 rounded-none shadow-none", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Table, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TableRow, { children: Array.from({ length: columns }).map((_, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TableHead, { className: "py-3", children: colIdx === 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(GrayBar, { className: "h-4 w-4" }) : colIdx === columns - 1 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Skeleton, { className: "h-4 w-4 rounded-none" }) }) : colIdx === 1 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(GrayBar, { className: "h-4 w-[70%] max-w-[180px]" }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(GrayBar, { className: "h-4 w-[60%] max-w-[120px]" }) }, `skeleton-header-${colIdx}`)) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TableBody, { children: Array.from({ length: rowCount }).map((_, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TableRow, { className: "border-b border-border", children: Array.from({ length: columns }).map((_2, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TableCell, { className: "py-3", children: colIdx === 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(GrayBar, { className: "h-4 w-4" }) : colIdx === columns - 1 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Skeleton, { className: "h-8 w-8 rounded-none" }) }) : colIdx === 1 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Skeleton, { className: "w-9 rounded-none shrink-0" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TableRow, { children: Array.from({ length: columns }).map((_, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TableHead, { className: "py-3", children: colIdx === 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(GrayBar, { className: "h-4 w-4" }) : colIdx === columns - 1 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Skeleton, { className: "h-4 w-4 rounded-sm" }) }) : colIdx === 1 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(GrayBar, { className: "h-4 w-[70%] max-w-[180px]" }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(GrayBar, { className: "h-4 w-[60%] max-w-[120px]" }) }, `skeleton-header-${colIdx}`)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TableBody, { children: Array.from({ length: rowCount }).map((_, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TableRow, { className: "border-b border-border", children: Array.from({ length: columns }).map((_2, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TableCell, { className: "py-3", children: colIdx === 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(GrayBar, { className: "h-4 w-4" }) : colIdx === columns - 1 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Skeleton, { className: "h-8 w-8 rounded-md" }) }) : colIdx === 1 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Skeleton, { className: "w-9 rounded-md shrink-0" }),
         /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "space-y-1.5 flex-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Skeleton, { className: "h-4 w-[120px]" }),
           /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Skeleton, { className: "h-3 w-[80px]" })
@@ -2239,7 +2275,7 @@ var TableSkeleton = ({
   if (hideWrapper) {
     return content;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "table-wrapper rounded-none  border border-border bg-card overflow-hidden", children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "table-wrapper rounded-md  border border-border bg-card overflow-hidden", children: content });
 };
 TableSkeleton.displayName = "TableSkeleton";
 // Annotate the CommonJS export names for ESM import in node: