@hex-core/components 1.1.1 → 1.2.0

package/dist/index.js

@@ -39,14 +39,17 @@ var buttonVariants = cva(
           "hover:bg-destructive/90 hover:shadow-md hover:shadow-destructive/25"
         ].join(" "),
         outline: [
+          // Self-borne shape: token border (border-input) + an inset-ring tinted with
+          // foreground so the boundary is visible on flat-white surfaces too, not only
+          // inside elevated Card/Popover/Dialog containers.
           "border border-input bg-background",
-          "shadow-sm",
-          "hover:bg-accent hover:text-accent-foreground hover:shadow-md"
+          "shadow-sm inset-ring-1 inset-ring-foreground/[0.06]",
+          "hover:bg-accent hover:text-accent-foreground hover:shadow-md hover:inset-ring-foreground/12"
         ].join(" "),
         secondary: [
           "bg-secondary text-secondary-foreground",
-          "shadow-sm",
-          "hover:bg-secondary/80 hover:shadow-md"
+          "shadow-sm inset-ring-1 inset-ring-foreground/[0.08]",
+          "hover:bg-secondary/80 hover:shadow-md hover:inset-ring-foreground/15"
         ].join(" "),
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline"
@@ -127,7 +130,9 @@ var Input = React2.forwardRef(
         className: cn(
           "flex h-[var(--control-height-md,2.5rem)] w-full rounded-md border border-input bg-background px-[var(--space-3,0.75rem)] py-[var(--space-2,0.5rem)] text-sm",
           "transition-all duration-[var(--duration-normal,200ms)] ease-out",
-          "shadow-sm",
+          // inset-ring gives a self-borne edge so the input field is visible on flat
+          // surfaces (token border alone is too low-contrast on bg-background=white).
+          "shadow-sm inset-ring-1 inset-ring-foreground/[0.06]",
           "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
           "placeholder:text-muted-foreground",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
@@ -168,7 +173,7 @@ var Textarea = React4.forwardRef(
         className: cn(
           "flex min-h-[80px] w-full rounded-md border border-input bg-background px-[var(--space-3,0.75rem)] py-[var(--space-2,0.5rem)] text-sm",
           "transition-all duration-[var(--duration-normal,200ms)] ease-out",
-          "shadow-sm",
+          "shadow-sm inset-ring-1 inset-ring-foreground/[0.06]",
           "placeholder:text-muted-foreground",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "focus-visible:shadow-md focus-visible:border-ring/50",
@@ -195,7 +200,7 @@ var Checkbox = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__
     className: cn(
       "group h-4 w-4 shrink-0 rounded-sm border border-input",
       "transition-all duration-[var(--duration-normal,200ms)] ease-out",
-      "shadow-sm",
+      "shadow-sm inset-ring-1 inset-ring-foreground/[0.06]",
       "hover:border-ring/50 hover:shadow-md",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       "disabled:cursor-not-allowed disabled:opacity-50",
@@ -255,6 +260,9 @@ var Switch = React6.forwardRef(
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
         "disabled:cursor-not-allowed disabled:opacity-50",
         "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+        // Unchecked track shares --color-input with form borders (~1.27:1 vs white) so
+        // add an inset ring to make the track visible on flat surfaces.
+        "data-[state=unchecked]:inset-ring-1 data-[state=unchecked]:inset-ring-foreground/[0.08]",
         "hover:shadow-md",
         className
       ),
@@ -288,9 +296,9 @@ var badgeVariants = cva3(
     variants: {
       variant: {
         default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        secondary: "border-foreground/15 bg-secondary text-secondary-foreground hover:bg-secondary/80 hover:border-foreground/20",
         destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground"
+        outline: "border-foreground/20 text-foreground hover:border-foreground/30"
       }
     },
     defaultVariants: {
@@ -313,7 +321,7 @@ var Separator = React7.forwardRef(({ className, orientation = "horizontal", deco
     decorative,
     orientation,
     className: cn(
-      "shrink-0 bg-border",
+      "shrink-0 bg-foreground/[0.12]",
       orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
       className
     ),
@@ -335,7 +343,7 @@ var SelectTrigger = React8.forwardRef(({ className, children, ...props }, ref) =
     ref,
     className: cn(
       "flex h-[var(--control-height-md,2.5rem)] w-full items-center justify-between rounded-md border border-input bg-background px-[var(--space-3,0.75rem)] py-[var(--space-2,0.5rem)] text-sm",
-      "transition-all duration-[var(--duration-normal,200ms)] ease-out shadow-sm",
+      "transition-all duration-[var(--duration-normal,200ms)] ease-out shadow-sm inset-ring-1 inset-ring-foreground/[0.06]",
       "placeholder:text-muted-foreground",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       "focus-visible:shadow-md focus-visible:border-ring/50",
@@ -375,7 +383,7 @@ var SelectContent = React8.forwardRef(({ className, children, position = "popper
     ref,
     position,
     className: cn(
-      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-foreground/[0.08] bg-popover 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",
@@ -443,7 +451,7 @@ var SelectSeparator = React8.forwardRef(({ className, ...props }, ref) => /* @__
   SelectPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-[var(--space-1,0.25rem)] my-[var(--space-1,0.25rem)] h-px bg-muted", className),
+    className: cn("-mx-[var(--space-1,0.25rem)] my-[var(--space-1,0.25rem)] h-px bg-foreground/[0.12]", className),
     ...props
   }
 ));
@@ -471,7 +479,7 @@ var RadioGroupItem = React9.forwardRef(({ className, ...props }, ref) => /* @__P
     ref,
     className: cn(
       "aspect-square h-4 w-4 rounded-full border border-input",
-      "transition-all duration-[var(--duration-normal,200ms)] ease-out shadow-sm",
+      "transition-all duration-[var(--duration-normal,200ms)] ease-out shadow-sm inset-ring-1 inset-ring-foreground/[0.06]",
       "hover:border-ring/50 hover:shadow-md",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       "disabled:cursor-not-allowed disabled:opacity-50",
@@ -504,7 +512,7 @@ var Slider = React10.forwardRef(({ className, thumbLabels, ...props }, ref) => {
       className: cn("relative flex w-full touch-none select-none items-center", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx11(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ jsx11(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
+        /* @__PURE__ */ jsx11(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full border border-foreground/[0.08] bg-secondary", children: /* @__PURE__ */ jsx11(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
         values.map((_, i) => {
           const explicit = thumbLabels?.[i];
           const fallback = values.length === 1 ? rootLabel : rootLabel ? `${rootLabel} (${i + 1} of ${values.length})` : void 0;
@@ -549,7 +557,7 @@ var toggleVariants = cva4(
     variants: {
       variant: {
         default: "bg-transparent",
-        outline: "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground"
+        outline: "border border-input bg-transparent shadow-sm inset-ring-1 inset-ring-foreground/[0.06] hover:bg-accent hover:text-accent-foreground"
       },
       size: {
         default: "h-[var(--control-height-md,2.5rem)] px-[var(--space-3,0.75rem)] min-w-[var(--control-height-md,2.5rem)]",
@@ -646,7 +654,13 @@ AvatarFallback.displayName = "AvatarFallback";
 // src/primitives/skeleton/skeleton.tsx
 import { jsx as jsx15 } from "react/jsx-runtime";
 function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx15("div", { className: cn("animate-pulse rounded-md bg-muted", className), ...props });
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      className: cn("animate-pulse rounded-md border border-foreground/[0.06] bg-muted", className),
+      ...props
+    }
+  );
 }
 
 // src/primitives/progress/progress.tsx
@@ -662,7 +676,7 @@ var Progress = React14.forwardRef(({ className, value, max = 100, ...props }, re
       value: value ?? 0,
       max,
       className: cn(
-        "relative h-2 w-full overflow-hidden rounded-full bg-secondary",
+        "relative h-2 w-full overflow-hidden rounded-full border border-foreground/[0.08] bg-secondary",
         className
       ),
       ...props,
@@ -719,7 +733,7 @@ var ScrollBar = React15.forwardRef(({ className, orientation = "vertical", ...pr
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx17(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+    children: /* @__PURE__ */ jsx17(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-foreground/[0.18]" })
   }
 ));
 ScrollBar.displayName = "ScrollBar";
@@ -903,7 +917,7 @@ var Card = React16.forwardRef(
     {
       ref,
       className: cn(
-        "rounded-lg border bg-card text-card-foreground",
+        "rounded-lg border border-foreground/[0.08] bg-card text-card-foreground",
         "shadow-sm transition-all duration-[var(--duration-normal,200ms)] ease-out",
         "hover:shadow-md",
         className
@@ -963,7 +977,7 @@ var TabsList = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "inline-flex h-[var(--control-height-md,2.5rem)] items-center justify-center rounded-md bg-muted p-[var(--space-1,0.25rem)] text-muted-foreground",
+      "inline-flex h-[var(--control-height-md,2.5rem)] items-center justify-center rounded-md border border-foreground/[0.06] bg-muted p-[var(--space-1,0.25rem)] text-muted-foreground",
       className
     ),
     ...props
@@ -1006,7 +1020,7 @@ import * as React18 from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { jsx as jsx25, jsxs as jsxs6 } from "react/jsx-runtime";
 var Accordion = AccordionPrimitive.Root;
-var AccordionItem = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(AccordionPrimitive.Item, { ref, className: cn("border-b", className), ...props }));
+var AccordionItem = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(AccordionPrimitive.Item, { ref, className: cn("border-b border-b-foreground/[0.08]", className), ...props }));
 AccordionItem.displayName = "AccordionItem";
 var AccordionTrigger = React18.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx25(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs6(
   AccordionPrimitive.Trigger,
@@ -1084,7 +1098,7 @@ var DialogContent = React19.forwardRef(({ className, children, scrollable = true
       ref,
       className: cn(
         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]",
-        scrollable ? "max-h-[calc(100vh-2rem)] border bg-background shadow-lg rounded-lg" : "gap-[var(--gap-md,1rem)] border bg-background p-[var(--space-6,1.5rem)] shadow-lg rounded-lg",
+        scrollable ? "max-h-[calc(100vh-2rem)] border border-foreground/[0.08] bg-background shadow-lg rounded-lg" : "gap-[var(--gap-md,1rem)] border border-foreground/[0.08] bg-background p-[var(--space-6,1.5rem)] shadow-lg rounded-lg",
         "duration-[var(--duration-normal,200ms)] 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",
@@ -1199,7 +1213,7 @@ var AlertDialogContent = React20.forwardRef(({ className, ...props }, ref) => /*
       ref,
       className: cn(
         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-[var(--gap-md,1rem)]",
-        "border bg-background p-[var(--space-6,1.5rem)] shadow-lg rounded-lg",
+        "border border-foreground/[0.08] bg-background p-[var(--space-6,1.5rem)] shadow-lg rounded-lg",
         "duration-[var(--duration-normal,200ms)] 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",
@@ -1273,9 +1287,9 @@ var AlertDialogCancel = React20.forwardRef(({ className, ...props }, ref) => /*
     ref,
     className: cn(
       "inline-flex h-[var(--control-height-md,2.5rem)] items-center justify-center rounded-md px-[var(--space-4,1rem)] py-[var(--space-2,0.5rem)] text-sm font-medium",
-      "border border-input bg-background shadow-sm",
+      "border border-input bg-background shadow-sm inset-ring-1 inset-ring-foreground/[0.06]",
       "transition-all duration-[var(--duration-normal,200ms)] ease-out",
-      "hover:bg-accent hover:text-accent-foreground hover:shadow-md",
+      "hover:bg-accent hover:text-accent-foreground hover:shadow-md hover:inset-ring-foreground/12",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       "mt-[var(--space-2,0.5rem)] sm:mt-0",
       "active:scale-[0.98]",
@@ -1302,7 +1316,7 @@ var DropdownMenuContent = React21.forwardRef(({ className, sideOffset = 4, ...pr
     ref,
     sideOffset,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-[var(--space-1,0.25rem)] text-popover-foreground shadow-md",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-foreground/[0.08] bg-popover p-[var(--space-1,0.25rem)] 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",
@@ -1395,7 +1409,7 @@ var DropdownMenuSeparator = React21.forwardRef(({ className, ...props }, ref) =>
   DropdownMenuPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-[var(--space-1,0.25rem)] my-[var(--space-1,0.25rem)] h-px bg-muted", className),
+    className: cn("-mx-[var(--space-1,0.25rem)] my-[var(--space-1,0.25rem)] h-px bg-foreground/[0.12]", className),
     ...props
   }
 ));
@@ -1424,7 +1438,7 @@ var PopoverContent = React22.forwardRef(({ className, align = "center", sideOffs
     align,
     sideOffset,
     className: cn(
-      "z-50 w-72 rounded-md border bg-popover p-[var(--space-4,1rem)] text-popover-foreground shadow-md outline-none",
+      "z-50 w-72 rounded-md border border-foreground/[0.08] bg-popover p-[var(--space-4,1rem)] 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",
@@ -1575,7 +1589,7 @@ var alertVariants = cva10(
   {
     variants: {
       variant: {
-        default: "bg-background text-foreground",
+        default: "border-foreground/[0.08] bg-background text-foreground",
         destructive: "border-destructive/50 text-destructive [&>svg]:text-destructive bg-destructive/5"
       }
     },
@@ -1647,7 +1661,7 @@ var HoverCardContent = React26.forwardRef(({ className, align = "center", sideOf
     align,
     sideOffset,
     className: cn(
-      "z-50 w-64 rounded-md border bg-popover p-[var(--space-4,1rem)] text-popover-foreground shadow-md outline-none",
+      "z-50 w-64 rounded-md border border-foreground/[0.08] bg-popover p-[var(--space-4,1rem)] 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",
@@ -1673,7 +1687,7 @@ var ContextMenuContent = React27.forwardRef(({ className, ...props }, ref) => /*
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-[var(--space-1,0.25rem)] text-popover-foreground shadow-md",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-foreground/[0.08] bg-popover p-[var(--space-1,0.25rem)] 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",
@@ -1765,7 +1779,7 @@ var ContextMenuSeparator = React27.forwardRef(({ className, ...props }, ref) =>
   ContextMenuPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-[var(--space-1,0.25rem)] my-[var(--space-1,0.25rem)] h-px bg-border", className),
+    className: cn("-mx-[var(--space-1,0.25rem)] my-[var(--space-1,0.25rem)] h-px bg-foreground/[0.12]", className),
     ...props
   }
 ));
@@ -1789,7 +1803,7 @@ var Menubar = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "flex h-[var(--control-height-md,2.5rem)] items-center space-x-1 rounded-md border bg-background p-[var(--space-1,0.25rem)]",
+      "flex h-[var(--control-height-md,2.5rem)] items-center space-x-1 rounded-md border border-foreground/[0.08] bg-background p-[var(--space-1,0.25rem)]",
       className
     ),
     ...props
@@ -1823,7 +1837,7 @@ var MenubarContent = React28.forwardRef(({ className, align = "start", alignOffs
     alignOffset,
     sideOffset,
     className: cn(
-      "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-[var(--space-1,0.25rem)] text-popover-foreground shadow-md",
+      "z-50 min-w-[12rem] overflow-hidden rounded-md border border-foreground/[0.08] bg-popover p-[var(--space-1,0.25rem)] 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",
@@ -1862,7 +1876,7 @@ var MenubarSeparator = React28.forwardRef(({ className, ...props }, ref) => /* @
   MenubarPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-[var(--space-1,0.25rem)] my-[var(--space-1,0.25rem)] h-px bg-muted", className),
+    className: cn("-mx-[var(--space-1,0.25rem)] my-[var(--space-1,0.25rem)] h-px bg-foreground/[0.12]", className),
     ...props
   }
 ));
@@ -1952,7 +1966,7 @@ var NavigationMenuViewport = React29.forwardRef(({ className, ...props }, ref) =
   NavigationMenuPrimitive.Viewport,
   {
     className: cn(
-      "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg",
+      "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border border-foreground/[0.08] bg-popover text-popover-foreground shadow-lg",
       "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90",
       "md:w-[var(--radix-navigation-menu-viewport-width)]",
       className
@@ -1971,7 +1985,7 @@ var NavigationMenuIndicator = React29.forwardRef(({ className, ...props }, ref)
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx37("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" })
+    children: /* @__PURE__ */ jsx37("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-foreground/[0.12] shadow-md" })
   }
 ));
 NavigationMenuIndicator.displayName = "NavigationMenuIndicator";
@@ -2101,7 +2115,7 @@ var Table = React31.forwardRef(
   ) })
 );
 Table.displayName = "Table";
-var TableHeader = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+var TableHeader = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39("thead", { ref, className: cn("[&_tr]:border-b [&_tr]:border-b-foreground/[0.08]", className), ...props }));
 TableHeader.displayName = "TableHeader";
 var TableBody = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
 TableBody.displayName = "TableBody";
@@ -2110,7 +2124,7 @@ var TableFooter = React31.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      "border-t border-t-foreground/[0.08] bg-muted/50 font-medium [&>tr]:last:border-b-0",
       className
     ),
     ...props
@@ -2122,7 +2136,7 @@ var TableRow = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "border-b transition-all duration-[var(--duration-normal,200ms)] ease-out hover:bg-muted/50 data-[state=selected]:bg-muted",
+      "border-b border-b-foreground/[0.08] transition-all duration-[var(--duration-normal,200ms)] ease-out hover:bg-muted/50 data-[state=selected]:bg-muted",
       className
     ),
     ...props
@@ -2181,7 +2195,7 @@ function DataTable({
     columns,
     getCoreRowModel: getCoreRowModel()
   });
-  return /* @__PURE__ */ jsx40("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs13(Table, { "aria-label": ariaLabel, children: [
+  return /* @__PURE__ */ jsx40("div", { className: "rounded-md border border-foreground/[0.08]", children: /* @__PURE__ */ jsxs13(Table, { "aria-label": ariaLabel, children: [
     caption ? /* @__PURE__ */ jsx40(TableCaption, { children: caption }) : null,
     /* @__PURE__ */ jsx40(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx40(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx40(TableHead, { children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }, headerGroup.id)) }),
     /* @__PURE__ */ jsx40(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx40(TableRow, { "data-state": row.getIsSelected() && "selected", children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx40(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) : /* @__PURE__ */ jsx40(TableRow, { children: /* @__PURE__ */ jsx40(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "No results." }) }) })
@@ -2346,10 +2360,10 @@ function Calendar({
         caption_label: "text-sm font-medium",
         nav: "absolute inset-x-3 top-3 z-10 flex items-center justify-between pointer-events-none [&>button]:pointer-events-auto",
         button_previous: cn(
-          "inline-flex h-7 w-7 items-center justify-center rounded-md border bg-transparent p-0 opacity-60 transition-all duration-[var(--duration-normal,200ms)] ease-out hover:opacity-100 disabled:pointer-events-none disabled:opacity-30"
+          "inline-flex h-7 w-7 items-center justify-center rounded-md border border-foreground/[0.08] bg-transparent p-0 opacity-60 transition-all duration-[var(--duration-normal,200ms)] ease-out hover:opacity-100 disabled:pointer-events-none disabled:opacity-30"
         ),
         button_next: cn(
-          "inline-flex h-7 w-7 items-center justify-center rounded-md border bg-transparent p-0 opacity-60 transition-all duration-[var(--duration-normal,200ms)] ease-out hover:opacity-100 disabled:pointer-events-none disabled:opacity-30"
+          "inline-flex h-7 w-7 items-center justify-center rounded-md border border-foreground/[0.08] bg-transparent p-0 opacity-60 transition-all duration-[var(--duration-normal,200ms)] ease-out hover:opacity-100 disabled:pointer-events-none disabled:opacity-30"
         ),
         month_grid: "w-full border-collapse space-y-1",
         weekdays: "flex",
@@ -2416,6 +2430,7 @@ function DatePicker({
         "aria-label": ariaLabel ?? placeholder,
         className: cn(
           "inline-flex h-[var(--control-height-md,2.5rem)] w-[240px] items-center justify-start gap-[var(--gap-sm,0.5rem)] rounded-md border border-input bg-background px-[var(--space-3,0.75rem)] py-[var(--space-2,0.5rem)] text-left text-sm font-normal transition-all duration-[var(--duration-normal,200ms)] ease-out",
+          "shadow-sm inset-ring-1 inset-ring-foreground/[0.06]",
           "hover:bg-accent hover:text-accent-foreground",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "disabled:pointer-events-none disabled:opacity-50",
@@ -2497,6 +2512,7 @@ var InputOTPSlot = React34.forwardRef(
         ref,
         className: cn(
           "relative flex h-[var(--control-height-md,2.5rem)] w-[var(--control-height-md,2.5rem)] items-center justify-center border-y border-r border-input text-sm transition-all duration-[var(--duration-normal,200ms)] ease-out",
+          "inset-ring-1 inset-ring-foreground/[0.06]",
           "first:rounded-l-md first:border-l last:rounded-r-md",
           isActive && "z-10 ring-2 ring-ring ring-offset-2 ring-offset-background",
           className
@@ -2554,7 +2570,7 @@ function CommandDialog({
     /* @__PURE__ */ jsx45(DialogContent, { className: "overflow-hidden p-0", scrollable: false, children: /* @__PURE__ */ jsx45(Command, { className: "[&_[cmdk-group-heading]]:px-[var(--space-2,0.5rem)] [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-[var(--space-2,0.5rem)] [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-[var(--space-2,0.5rem)] [&_[cmdk-item]]:py-[var(--space-3,0.75rem)] [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) })
   ] });
 }
-var CommandInput = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs17("div", { className: "flex items-center border-b px-[var(--space-3,0.75rem)]", "cmdk-input-wrapper": "", children: [
+var CommandInput = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs17("div", { className: "flex items-center border-b border-b-foreground/[0.08] px-[var(--space-3,0.75rem)]", "cmdk-input-wrapper": "", children: [
   /* @__PURE__ */ jsxs17(
     "svg",
     {
@@ -2615,7 +2631,7 @@ var CommandSeparator = React35.forwardRef(({ className, ...props }, ref) => /* @
     ref,
     role: "none",
     "data-cmdk-separator": "",
-    className: cn("-mx-[var(--space-1,0.25rem)] h-px bg-border", className),
+    className: cn("-mx-[var(--space-1,0.25rem)] h-px bg-foreground/[0.12]", className),
     ...props
   }
 ));
@@ -2681,6 +2697,7 @@ function Combobox({
         disabled,
         className: cn(
           "inline-flex h-[var(--control-height-md,2.5rem)] w-[240px] items-center justify-between gap-[var(--gap-sm,0.5rem)] rounded-md border border-input bg-background px-[var(--space-3,0.75rem)] py-[var(--space-2,0.5rem)] text-sm font-normal transition-all duration-[var(--duration-normal,200ms)] ease-out",
+          "shadow-sm inset-ring-1 inset-ring-foreground/[0.06]",
           "hover:bg-accent hover:text-accent-foreground",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "disabled:pointer-events-none disabled:opacity-50",
@@ -2776,6 +2793,7 @@ SheetOverlay.displayName = "SheetOverlay";
 var sheetVariants = cva12(
   cn(
     "fixed z-50 gap-[var(--gap-md,1rem)] bg-background p-[var(--space-6,1.5rem)] shadow-lg",
+    "border-foreground/[0.08]",
     "transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out",
     "data-[state=closed]:duration-[var(--duration-slow,300ms)] data-[state=open]:duration-500"
   ),
@@ -2910,7 +2928,7 @@ var DrawerContent = React38.forwardRef(({ className, children, ...props }, ref)
     {
       ref,
       className: cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border border-foreground/[0.08] bg-background",
         className
       ),
       ...props,
@@ -2982,7 +3000,7 @@ function ResizableHandle({ withHandle, className, ...props }) {
     ResizablePrimitiveSeparator,
     {
       className: cn(
-        "relative flex w-px items-center justify-center bg-border transition-all duration-[var(--duration-normal,200ms)] ease-out hover:bg-ring data-[separator=active]:bg-ring",
+        "relative flex w-px items-center justify-center bg-foreground/[0.12] transition-all duration-[var(--duration-normal,200ms)] ease-out hover:bg-ring data-[separator=active]:bg-ring",
         "after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         "aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full",
@@ -3059,7 +3077,7 @@ function SidebarProvider({
 SidebarProvider.displayName = "SidebarProvider";
 var sidebarVariants = cva13(
   cn(
-    "flex h-full shrink-0 flex-col border-r bg-background text-foreground",
+    "flex h-full shrink-0 flex-col border-foreground/[0.08] border-r bg-background text-foreground",
     "transition-[width] duration-[var(--duration-normal,200ms)] ease-out"
   ),
   {
@@ -3153,7 +3171,7 @@ var SidebarHeader = React39.forwardRef(
     "div",
     {
       ref,
-      className: cn("flex items-center gap-[var(--gap-sm,0.5rem)] border-b p-[var(--space-4,1rem)]", className),
+      className: cn("flex items-center gap-[var(--gap-sm,0.5rem)] border-b border-b-foreground/[0.08] p-[var(--space-4,1rem)]", className),
       ...props
     }
   )
@@ -3175,7 +3193,7 @@ var SidebarFooter = React39.forwardRef(
     "div",
     {
       ref,
-      className: cn("mt-auto border-t p-[var(--space-4,1rem)]", className),
+      className: cn("mt-auto border-t border-t-foreground/[0.08] p-[var(--space-4,1rem)]", className),
       ...props
     }
   )