@kinetixui/ui 0.6.5 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kinetixui/ui",
-  "version": "0.6.5",
+  "version": "0.8.0",
   "private": false,
   "description": "KinetixUI React components — CVA + Radix + Tailwind on the KinetixUI token contract. Also distributed via the kinetixui CLI as a component registry.",
   "keywords": [
@@ -90,7 +90,7 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@kinetixui/tokens": "0.6.5",
+    "@kinetixui/tokens": "0.8.0",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.7",

package/src/components/accordion.tsx

@@ -29,7 +29,7 @@ const AccordionTrigger = React.forwardRef<
       {...props}
     >
       {children}
-      <ChevronDown className="size-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+      <ChevronDown className="size-4 shrink-0 text-muted-foreground transition-transform duration-fast" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ));

package/src/components/alert-dialog.tsx

@@ -16,7 +16,7 @@ const AlertDialogOverlay = React.forwardRef<
   <AlertDialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-foreground/40 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",
+      "fixed inset-0 z-overlay bg-foreground/40 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",
       className,
     )}
     {...props}
@@ -33,7 +33,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg sm:rounded-xl font-sans",
+        "fixed left-1/2 top-1/2 z-overlay grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg sm:rounded-xl font-sans",
         "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",
         className,
       )}

package/src/components/app-bar.tsx

@@ -48,7 +48,7 @@ const AppBar = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
         <header
           ref={ref}
           className={cn(
-            "sticky top-0 z-40 w-full border-b border-border bg-background/95 font-sans",
+            "sticky top-0 z-sticky w-full border-b border-border bg-background/95 font-sans",
             "backdrop-blur supports-[backdrop-filter]:bg-background/75",
             className,
           )}

package/src/components/audio-player.tsx

@@ -73,6 +73,9 @@ const AudioPlayer = React.forwardRef<HTMLDivElement, AudioPlayerProps>(
       </button>
     );
 
+    // disabled:opacity-40 (not --opacity-disabled's 0.5) is a real, pre-existing
+    // inconsistency — left as a literal rather than silently changing the
+    // rendered value; a design call, not a rename.
     const iconBtn =
       "grid size-8 shrink-0 place-items-center rounded-full text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:text-foreground disabled:opacity-40 [&>svg]:size-4";
 

package/src/components/badge.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
 
@@ -31,10 +32,18 @@ const badgeVariants = cva(
 
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+    VariantProps<typeof badgeVariants> {
+  /** render as the single child element (Radix Slot) instead of <div> —
+   * e.g. `<Badge asChild><a href="/new">New</a></Badge>` for a linked badge */
+  asChild?: boolean;
 }
 
+const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
+  ({ className, variant, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return <Comp ref={ref} className={cn(badgeVariants({ variant }), className)} {...props} />;
+  },
+);
+Badge.displayName = "Badge";
+
 export { Badge, badgeVariants };

package/src/components/button.tsx

@@ -28,7 +28,7 @@ const buttonVariants = cva(
     "font-sans font-medium whitespace-nowrap select-none",
     "rounded-md transition-colors outline-none",
     "focus-visible:shadow-focus",
-    "disabled:pointer-events-none disabled:opacity-50",
+    "disabled:pointer-events-none disabled:opacity-disabled",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-[18px]",
   ],
   {
@@ -72,7 +72,7 @@ const buttonVariants = cva(
         Hover: "",
         Focus: "shadow-focus",
         Active: "",
-        Disabled: "pointer-events-none opacity-50",
+        Disabled: "pointer-events-none opacity-disabled",
       },
       /** corner style — matches the design source's Corners property */
       corners: {

package/src/components/calendar.tsx

@@ -19,13 +19,17 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         month_caption: "flex justify-center pt-1 relative items-center w-full",
         caption_label: "text-sm font-medium",
         nav: "flex items-center gap-1",
+        // Resting-dim/hover-brighten nav icons — numerically the disabled
+        // value (0.5) but not a disabled state, so left as a literal rather
+        // than forced into --opacity-disabled or --opacity-muted (0.7, which
+        // would change the rendered value).
         button_previous: cn(
           buttonVariants({ variant: "Outline", size: "icon" }),
-          "absolute left-1 size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+          "absolute left-1 size-7 bg-transparent p-0 opacity-50 hover:opacity-visible",
         ),
         button_next: cn(
           buttonVariants({ variant: "Outline", size: "icon" }),
-          "absolute right-1 size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+          "absolute right-1 size-7 bg-transparent p-0 opacity-50 hover:opacity-visible",
         ),
         month_grid: "w-full border-collapse space-x-1",
         weekdays: "flex",
@@ -36,19 +40,19 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         // accent background + corner rounding and hands the primary-colored
         // "selected" circle down to `day_button` via a `group` class.
         day: cn(
-          "group relative p-0 text-center text-sm focus-within:relative focus-within:z-20 aria-selected:bg-accent",
+          "group relative p-0 text-center text-sm focus-within:relative focus-within:z-focus aria-selected:bg-accent",
           props.mode === "range" ? "" : "aria-selected:rounded-md",
         ),
         day_button: cn(
           buttonVariants({ variant: "Ghost", size: "icon" }),
-          "size-8 p-0 font-normal group-aria-selected:opacity-100 group-data-[selected=true]:bg-primary group-data-[selected=true]:text-primary-foreground group-data-[selected=true]:hover:bg-primary group-data-[selected=true]:hover:text-primary-foreground group-data-[selected=true]:focus:bg-primary group-data-[selected=true]:focus:text-primary-foreground",
+          "size-8 p-0 font-normal group-aria-selected:opacity-visible group-data-[selected=true]:bg-primary group-data-[selected=true]:text-primary-foreground group-data-[selected=true]:hover:bg-primary group-data-[selected=true]:hover:text-primary-foreground group-data-[selected=true]:focus:bg-primary group-data-[selected=true]:focus:text-primary-foreground",
         ),
         range_start: "day-range-start rounded-l-md",
         range_end: "day-range-end rounded-r-md",
         range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
         today: "bg-accent text-accent-foreground",
         outside: "day-outside text-muted-foreground aria-selected:text-muted-foreground",
-        disabled: "text-muted-foreground opacity-50",
+        disabled: "text-muted-foreground opacity-disabled",
         hidden: "invisible",
         ...classNames,
       }}

package/src/components/checkbox.tsx

@@ -20,7 +20,7 @@ const Checkbox = React.forwardRef<
     className={cn(
       "peer size-[18px] shrink-0 rounded-sm border-2 border-input outline-none transition-colors",
       "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",
+      "disabled:cursor-not-allowed disabled:opacity-disabled",
       "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
       "data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground",
       "aria-invalid:border-destructive aria-invalid:data-[state=checked]:border-destructive aria-invalid:data-[state=checked]:bg-destructive",

package/src/components/circular-progress.tsx

@@ -52,7 +52,7 @@ const CircularProgress = React.forwardRef<HTMLDivElement, CircularProgressProps>
             strokeLinecap="round"
             strokeDasharray={c}
             strokeDashoffset={c - (v / 100) * c}
-            className="stroke-primary transition-[stroke-dashoffset] duration-300"
+            className="stroke-primary transition-[stroke-dashoffset] duration-base"
           />
         </svg>
         {(showValue || label != null) && (

package/src/components/command.tsx

@@ -36,11 +36,13 @@ const CommandInput = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    {/* Resting-dim icon, no hover/disabled state — numerically the disabled
+        value (0.5) but not that role; left as a literal, see calendar.tsx */}
     <Search className="mr-2 size-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-disabled",
         className,
       )}
       {...props}
@@ -97,7 +99,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-disabled [&_svg]:size-4 [&_svg]:shrink-0",
       className,
     )}
     {...props}

package/src/components/context-menu.tsx

@@ -13,9 +13,9 @@ const ContextMenuSub = ContextMenuPrimitive.Sub;
 const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 
 const itemCls =
-  "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground focus:ring-1 focus:ring-inset focus:ring-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+  "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground focus:ring-1 focus:ring-inset focus:ring-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-disabled";
 const contentCls =
-  "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md font-sans 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";
+  "z-overlay min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md font-sans 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";
 
 const ContextMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,

package/src/components/dialog.tsx

@@ -17,7 +17,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-foreground/40 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",
+      "fixed inset-0 z-overlay bg-foreground/40 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",
       className,
     )}
     {...props}
@@ -34,14 +34,14 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg sm:rounded-xl font-sans",
+        "fixed left-1/2 top-1/2 z-overlay grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg sm:rounded-xl font-sans",
         "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",
         className,
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring disabled:pointer-events-none">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-muted transition-opacity hover:opacity-visible focus:outline-none focus:ring-2 focus:ring-ring disabled:pointer-events-none">
         <X className="size-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>

package/src/components/drawer.tsx

@@ -17,7 +17,7 @@ const DrawerOverlay = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Overlay ref={ref} className={cn("fixed inset-0 z-50 bg-foreground/40", className)} {...props} />
+  <DrawerPrimitive.Overlay ref={ref} className={cn("fixed inset-0 z-overlay bg-foreground/40", className)} {...props} />
 ));
 DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 
@@ -30,7 +30,7 @@ const DrawerContent = React.forwardRef<
     <DrawerPrimitive.Content
       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 font-sans",
+        "fixed inset-x-0 bottom-0 z-overlay mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background font-sans",
         className,
       )}
       {...props}

package/src/components/dropdown-menu.tsx

@@ -13,9 +13,9 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const contentCls =
-  "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md font-sans 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";
+  "z-overlay min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md font-sans 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";
 const itemCls =
-  "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground focus:ring-1 focus:ring-inset focus:ring-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+  "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground focus:ring-1 focus:ring-inset focus:ring-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-disabled";
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -85,6 +85,8 @@ const DropdownMenuSeparator = React.forwardRef<
 ));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
+// opacity-60 (not --opacity-muted's 0.7) is a pre-existing inconsistency —
+// left as a literal rather than silently changing the rendered value.
 const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (
   <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
 );

package/src/components/empty.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+/**
+ * Empty — a placeholder for a zero-results state (an empty table, an empty
+ * search, a fresh workspace with nothing in it yet). Composition-based, like
+ * Card: `Empty` is an unstyled-beyond-layout root so it composes cleanly
+ * inside whatever already has a border (a Table cell, a Card, a bare page
+ * section) instead of forcing its own. Gap-fill addition (not in the
+ * original Figma source) — matches the shadcn/ui Empty API shape.
+ */
+const Empty = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("flex min-w-0 flex-1 flex-col items-center justify-center gap-6 p-10 text-center font-sans", className)}
+      {...props}
+    />
+  ),
+);
+Empty.displayName = "Empty";
+
+const EmptyHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex max-w-sm flex-col items-center gap-2", className)} {...props} />
+  ),
+);
+EmptyHeader.displayName = "EmptyHeader";
+
+const emptyMediaVariants = cva("flex shrink-0 items-center justify-center", {
+  variants: {
+    /** `icon` gives a muted circular badge behind the icon; `default` renders the child as-is (an illustration, an avatar, …) */
+    variant: {
+      default: "",
+      icon: "size-10 rounded-full bg-muted text-muted-foreground [&_svg]:size-5",
+    },
+  },
+  defaultVariants: { variant: "default" },
+});
+
+export interface EmptyMediaProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof emptyMediaVariants> {}
+
+const EmptyMedia = React.forwardRef<HTMLDivElement, EmptyMediaProps>(
+  ({ className, variant, ...props }, ref) => (
+    <div ref={ref} className={cn(emptyMediaVariants({ variant }), className)} {...props} />
+  ),
+);
+EmptyMedia.displayName = "EmptyMedia";
+
+const EmptyTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-title-sm font-medium text-foreground", className)} {...props} />
+  ),
+);
+EmptyTitle.displayName = "EmptyTitle";
+
+const EmptyDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-body-sm text-muted-foreground", className)} {...props} />
+  ),
+);
+EmptyDescription.displayName = "EmptyDescription";
+
+const EmptyContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col items-center gap-3", className)} {...props} />
+  ),
+);
+EmptyContent.displayName = "EmptyContent";
+
+export { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent, emptyMediaVariants };

package/src/components/fab.tsx

@@ -13,7 +13,7 @@ const fabVariants = cva(
   [
     "inline-flex shrink-0 items-center justify-center gap-2 rounded-full font-sans font-medium",
     "shadow-lg outline-none transition-colors",
-    "focus-visible:shadow-focus disabled:pointer-events-none disabled:opacity-50",
+    "focus-visible:shadow-focus disabled:pointer-events-none disabled:opacity-disabled",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0",
   ],
   {

package/src/components/file-upload.tsx

@@ -84,7 +84,7 @@ const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
             "flex flex-col items-center gap-2 rounded-md border border-dashed border-input p-6 text-center outline-none transition-colors",
             !disabled && "cursor-pointer hover:bg-accent/50 focus-visible:shadow-focus",
             dragging && "border-primary bg-accent",
-            disabled && "pointer-events-none opacity-50",
+            disabled && "pointer-events-none opacity-disabled",
           )}
         >
           <Upload className="size-6 text-muted-foreground" aria-hidden />

package/src/components/hover-card.tsx

@@ -16,7 +16,7 @@ const HoverCardContent = React.forwardRef<
     align={align}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none font-sans",
+      "z-overlay w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none font-sans",
       "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",
       className,
     )}

package/src/components/image.tsx

@@ -64,8 +64,8 @@ const Image = React.forwardRef<HTMLImageElement, ImageProps>(
             ref={setRef}
             alt={alt}
             className={cn(
-              "size-full object-cover transition-opacity duration-300",
-              status === "loaded" ? "opacity-100" : "opacity-0",
+              "size-full object-cover transition-opacity duration-base",
+              status === "loaded" ? "opacity-visible" : "opacity-hidden",
             )}
             onLoad={(e) => {
               setStatus("loaded");

package/src/components/inform.tsx

@@ -68,7 +68,7 @@ const Inform = React.forwardRef<HTMLDivElement, InformProps>(
             type="button"
             onClick={onDismiss}
             aria-label="Dismiss"
-            className="-m-0.5 shrink-0 rounded-[2px] p-0.5 opacity-70 outline-none transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-1 focus-visible:ring-current"
+            className="-m-0.5 shrink-0 rounded-[2px] p-0.5 opacity-muted outline-none transition-opacity hover:opacity-visible focus-visible:opacity-visible focus-visible:ring-1 focus-visible:ring-current"
           >
             <X className="size-3.5" />
           </button>

package/src/components/input-group.tsx

@@ -24,7 +24,7 @@ const InputGroup = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDiv
         "flex w-full items-center overflow-hidden rounded-sm border border-input bg-background font-sans transition-colors",
         "focus-within:border-primary focus-within:shadow-focus",
         "has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:focus-within:shadow-focus-destructive",
-        "has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50",
+        "has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-disabled",
         className,
       )}
       {...props}
@@ -85,7 +85,7 @@ const InputGroupButton = React.forwardRef<
     className={cn(
       "flex h-full shrink-0 items-center gap-1.5 self-stretch border-l border-input bg-muted px-3 text-label-md text-foreground",
       // base is bg-muted and muted==accent on dark, so the fill is a no-op there — the ring carries it
-      "outline-none transition-colors hover:bg-accent hover:ring-1 hover:ring-inset hover:ring-ring focus-visible:bg-accent focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+      "outline-none transition-colors hover:bg-accent hover:ring-1 hover:ring-inset hover:ring-ring focus-visible:bg-accent focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-disabled",
       "[&_svg]:size-4 [&_svg]:shrink-0",
       className,
     )}

package/src/components/input-otp.tsx

@@ -11,7 +11,7 @@ const InputOTP = React.forwardRef<
 >(({ className, containerClassName, ...props }, ref) => (
   <OTPInput
     ref={ref}
-    containerClassName={cn("flex items-center gap-2 has-[:disabled]:opacity-50", containerClassName)}
+    containerClassName={cn("flex items-center gap-2 has-[:disabled]:opacity-disabled", containerClassName)}
     className={cn("disabled:cursor-not-allowed", className)}
     {...props}
   />
@@ -35,7 +35,7 @@ const InputOTPSlot = React.forwardRef<
       ref={ref}
       className={cn(
         "relative flex size-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-        isActive && "z-10 ring-1 ring-ring",
+        isActive && "z-docked ring-1 ring-ring",
         className,
       )}
       {...props}
@@ -43,7 +43,7 @@ const InputOTPSlot = React.forwardRef<
       {char}
       {hasFakeCaret && (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-slower" />
         </div>
       )}
     </div>

package/src/components/input.tsx

@@ -26,7 +26,7 @@ const inputVariants = cva(
     "placeholder:text-muted-foreground",
     "outline-none transition-colors",
     "focus-visible:border-primary focus-visible:shadow-focus",
-    "disabled:cursor-not-allowed disabled:opacity-50",
+    "disabled:cursor-not-allowed disabled:opacity-disabled",
     "aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:border-destructive aria-[invalid=true]:focus-visible:shadow-focus-destructive",
   ],
   {
@@ -35,7 +35,7 @@ const inputVariants = cva(
         Default: "",
         Focus: "border-primary shadow-focus",
         Error: "border-destructive",
-        Disabled: "opacity-50 pointer-events-none",
+        Disabled: "opacity-disabled pointer-events-none",
       },
       /** corner style — matches the design source's Corners property */
       corners: {

package/src/components/kbd.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../lib/utils";
+
+/**
+ * Kbd — a single keyboard key glyph, e.g. `<Kbd>⌘</Kbd>`. Wrap several in
+ * `KbdGroup` for a shortcut combo (`⌘` `K`). Gap-fill addition (not in the
+ * original Figma source) — matches the shadcn/ui Kbd/KbdGroup API shape.
+ */
+export interface KbdProps extends React.HTMLAttributes<HTMLElement> {
+  /** render as the single child element (Radix Slot) instead of <kbd> */
+  asChild?: boolean;
+}
+
+const Kbd = React.forwardRef<HTMLElement, KbdProps>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "kbd";
+  return (
+    <Comp
+      ref={ref}
+      className={cn(
+        "inline-flex h-5 min-w-5 items-center justify-center rounded-sm border border-input bg-muted px-1.5 font-sans text-[11px] font-medium text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+Kbd.displayName = "Kbd";
+
+export interface KbdGroupProps extends React.HTMLAttributes<HTMLElement> {}
+
+/** Lays out multiple `Kbd` for a shortcut combo — `<KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup>` */
+const KbdGroup = React.forwardRef<HTMLElement, KbdGroupProps>(({ className, ...props }, ref) => (
+  <kbd ref={ref} className={cn("inline-flex items-center gap-1", className)} {...props} />
+));
+KbdGroup.displayName = "KbdGroup";
+
+export { Kbd, KbdGroup };

package/src/components/label.tsx

@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none font-sans peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  "text-sm font-medium leading-none font-sans peer-disabled:cursor-not-allowed peer-disabled:opacity-muted",
 );
 
 const Label = React.forwardRef<

package/src/components/list.tsx

@@ -51,7 +51,7 @@ const ListItem = React.forwardRef<HTMLDivElement, ListItemProps>(
           // ring keeps the highlighted row perceptible where the accent fill is <3:1 (dark)
           interactive &&
             "cursor-pointer hover:bg-accent hover:ring-1 hover:ring-inset hover:ring-ring focus-visible:bg-accent focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
-          disabled && "pointer-events-none opacity-50",
+          disabled && "pointer-events-none opacity-disabled",
           className,
         )}
         {...props}

package/src/components/menubar.tsx

@@ -22,9 +22,9 @@ const MenubarRadioGroup = (props: React.ComponentProps<typeof MenubarPrimitive.R
 );
 
 const itemCls =
-  "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground focus:ring-1 focus:ring-inset focus:ring-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+  "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground focus:ring-1 focus:ring-inset focus:ring-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-disabled";
 const contentCls =
-  "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md font-sans data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95";
+  "z-overlay min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md font-sans data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95";
 
 const Menubar = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Root>,

package/src/components/modal.tsx

@@ -68,7 +68,7 @@ function Modal({
         <DialogOverlay />
         <DialogPrimitive.Content
           className={cn(
-            "fixed left-1/2 top-1/2 z-50 flex w-full max-w-[480px] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-xl bg-background font-sans",
+            "fixed left-1/2 top-1/2 z-overlay flex w-full max-w-[480px] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-xl bg-background font-sans",
             "shadow-[0_4px_24px_rgba(0,0,0,0.12)]",
             "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",
             className,
@@ -79,7 +79,7 @@ function Modal({
               {title}
             </DialogPrimitive.Title>
             <DialogPrimitive.Close
-              className="rounded-sm opacity-70 outline-none transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring"
+              className="rounded-sm opacity-muted outline-none transition-opacity hover:opacity-visible focus-visible:ring-2 focus-visible:ring-ring"
               aria-label="Close"
             >
               <X className="size-5" />

package/src/components/navigation-menu.tsx

@@ -12,7 +12,7 @@ const NavigationMenu = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <NavigationMenuPrimitive.Root
     ref={ref}
-    className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center font-sans", className)}
+    className={cn("relative z-docked flex max-w-max flex-1 items-center justify-center font-sans", className)}
     {...props}
   >
     {children}
@@ -36,7 +36,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50",
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-disabled data-[state=open]:bg-accent/50",
 );
 
 const NavigationMenuTrigger = React.forwardRef<
@@ -46,7 +46,7 @@ const NavigationMenuTrigger = React.forwardRef<
   <NavigationMenuPrimitive.Trigger ref={ref} className={cn(navigationMenuTriggerStyle(), "group", className)} {...props}>
     {children}
     <ChevronDown
-      className="relative top-px ml-1 size-3 transition-transform duration-200 group-data-[state=open]:rotate-180"
+      className="relative top-px ml-1 size-3 transition-transform duration-fast group-data-[state=open]:rotate-180"
       aria-hidden
     />
   </NavigationMenuPrimitive.Trigger>
@@ -94,7 +94,7 @@ const NavigationMenuIndicator = React.forwardRef<
   <NavigationMenuPrimitive.Indicator
     ref={ref}
     className={cn(
-      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      "top-full z-raised flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
       className,
     )}
     {...props}