@hilum/ui 1.0.1 → 2.0.1

package/src/components/input-number.tsx

@@ -81,7 +81,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
     return (
       <div
         className={cn(
-          "inline-flex h-8 items-stretch rounded-md border border-ground-200 bg-white overflow-hidden",
+          "inline-flex h-8 items-stretch rounded-md border border-border bg-card overflow-hidden",
           "focus-within:ring-2 focus-within:ring-brand-primary/20 focus-within:border-brand-primary",
           disabled && "opacity-50 pointer-events-none",
           className,
@@ -97,34 +97,34 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
           onBlur={(e) => commit(e.target.value)}
           onKeyDown={onKeyDown}
           disabled={disabled}
-          className="w-full caption text-ground-900 px-2 bg-transparent focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none text-right"
+          className="w-full caption text-foreground px-2 bg-transparent focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none text-right"
           {...rest}
         />
         {unit && (
-          <span aria-hidden className="caption-xs text-ground-400 self-center pr-1.5 select-none">
+          <span aria-hidden className="caption-xs text-muted-foreground self-center pr-1.5 select-none">
             {unit}
           </span>
         )}
         {!hideSteppers && (
-          <div className="flex flex-col border-l border-ground-100">
+          <div className="flex flex-col border-l border-border">
             <button
               type="button"
               tabIndex={-1}
               onClick={() => bump(step)}
               aria-label="Increment"
-              className="flex-1 px-1 hover:bg-ground-50 active:bg-ground-100 transition-colors text-ground-500"
+              className="flex-1 px-1 hover:bg-muted active:bg-muted transition-colors text-muted-foreground"
             >
               <svg viewBox="0 0 8 5" width="8" height="5" fill="currentColor">
                 <path d="M0 5 L4 0 L8 5 Z" />
               </svg>
             </button>
-            <div className="border-t border-ground-100" />
+            <div className="border-t border-border" />
             <button
               type="button"
               tabIndex={-1}
               onClick={() => bump(-step)}
               aria-label="Decrement"
-              className="flex-1 px-1 hover:bg-ground-50 active:bg-ground-100 transition-colors text-ground-500"
+              className="flex-1 px-1 hover:bg-muted active:bg-muted transition-colors text-muted-foreground"
             >
               <svg viewBox="0 0 8 5" width="8" height="5" fill="currentColor">
                 <path d="M0 0 L4 5 L8 0 Z" />

package/src/components/input-otp.tsx

@@ -37,7 +37,7 @@ const InputOTPSlot = React.forwardRef<
       ref={ref}
       className={cn(
         "relative flex h-12 w-11 items-center justify-center",
-        "border-y border-r border-ground-200 body font-medium text-ground-900",
+        "border-y border-r border-border body font-medium text-foreground",
         "first:rounded-l-xl first:border-l last:rounded-r-xl",
         "transition-all",
         isActive && "z-10 ring-2 ring-brand-primary/40 border-brand-primary",
@@ -48,7 +48,7 @@ const InputOTPSlot = React.forwardRef<
       {char}
       {hasFakeCaret && (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="h-5 w-px animate-caret-blink bg-ground-900 duration-1000" />
+          <div className="h-5 w-px animate-caret-blink bg-foreground duration-1000" />
         </div>
       )}
     </div>
@@ -59,7 +59,7 @@ InputOTPSlot.displayName = "InputOTPSlot";
 const InputOTPSeparator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ ...props }, ref) => (
     <div ref={ref} role="separator" {...props}>
-      <Minus size={14} className="text-ground-300" />
+      <Minus size={14} className="text-muted-foreground" />
     </div>
   ),
 );

package/src/components/input.tsx

@@ -7,12 +7,12 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "flex h-9 w-full rounded-md border border-ground-200 bg-white px-3 py-1",
-        "body text-ground-900 placeholder:text-ground-400",
+        "flex h-9 w-full rounded-md border border-border bg-card px-3 py-1",
+        "body text-foreground placeholder:text-muted-foreground",
         "transition-colors duration-150",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/20 focus-visible:border-brand-primary",
-        "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-ground-50",
-        "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-ground-900",
+        "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted",
+        "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
         className,
       )}
       {...props}

package/src/components/kbd.tsx

@@ -6,7 +6,7 @@ const Kbd = React.forwardRef<HTMLElement, React.ComponentProps<"kbd">>(
     <kbd
       ref={ref}
       className={cn(
-        "inline-flex h-5 min-w-5 items-center justify-center rounded border border-ground-200 bg-ground-50 px-1.5 font-mono caption-xs font-medium text-ground-500",
+        "inline-flex h-5 min-w-5 items-center justify-center rounded border border-border bg-muted px-1.5 font-mono caption-xs font-medium text-muted-foreground",
         className,
       )}
       {...props}

package/src/components/label.tsx

@@ -11,7 +11,7 @@ const Label = React.forwardRef<
   <LabelPrimitive.Root
     ref={ref}
     className={cn(
-      "body font-medium leading-none text-ground-700",
+      "body font-medium leading-none text-muted-foreground",
       "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
       className,
     )}

package/src/components/media-object.tsx

@@ -46,4 +46,6 @@ function MediaObject({
   );
 }
 
+MediaObject.displayName = "MediaObject";
+
 export { MediaObject };

package/src/components/menubar.tsx

@@ -12,7 +12,7 @@ const MenubarRoot = React.forwardRef<
   <Menubar.Root
     ref={ref}
     className={cn(
-      "flex h-9 items-center gap-0.5 rounded-lg border border-ground-100 bg-white px-1",
+      "flex h-9 items-center gap-0.5 rounded-lg border border-border bg-card px-1",
       className,
     )}
     {...props}
@@ -35,10 +35,10 @@ const MenubarTrigger = React.forwardRef<
   <Menubar.Trigger
     ref={ref}
     className={cn(
-      "flex cursor-default items-center rounded-md px-3 py-1 body font-medium text-ground-700 select-none outline-none",
-      "hover:bg-ground-50",
-      "data-[state=open]:bg-ground-100 data-[state=open]:text-ground-900",
-      "focus:bg-ground-50",
+      "flex cursor-default items-center rounded-md px-3 py-1 body font-medium text-muted-foreground select-none outline-none",
+      "hover:bg-muted",
+      "data-[state=open]:bg-muted data-[state=open]:text-foreground",
+      "focus:bg-muted",
       className,
     )}
     {...props}
@@ -57,7 +57,7 @@ const MenubarContent = React.forwardRef<
       alignOffset={alignOffset}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[12rem] bg-white rounded-xl shadow-natural p-1",
+        "z-50 min-w-[12rem] bg-card rounded-xl shadow-natural p-1",
         "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",
@@ -81,8 +81,8 @@ const MenubarItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
-      "body text-ground-700 outline-none transition-colors",
-      "focus:bg-ground-50 focus:text-ground-900",
+      "body text-muted-foreground outline-none transition-colors",
+      "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className,
@@ -100,8 +100,8 @@ const MenubarCheckboxItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
-      "body text-ground-700 outline-none transition-colors",
-      "focus:bg-ground-50 focus:text-ground-900",
+      "body text-muted-foreground outline-none transition-colors",
+      "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
@@ -109,7 +109,7 @@ const MenubarCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <Menubar.ItemIndicator>
-        <Check size={13} className="text-ground-900" />
+        <Check size={13} className="text-foreground" />
       </Menubar.ItemIndicator>
     </span>
     {children}
@@ -125,8 +125,8 @@ const MenubarRadioItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
-      "body text-ground-700 outline-none transition-colors",
-      "focus:bg-ground-50 focus:text-ground-900",
+      "body text-muted-foreground outline-none transition-colors",
+      "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
@@ -134,7 +134,7 @@ const MenubarRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <Menubar.ItemIndicator>
-        <Circle size={8} className="fill-ground-900 text-ground-900" />
+        <Circle size={8} className="fill-foreground text-foreground" />
       </Menubar.ItemIndicator>
     </span>
     {children}
@@ -150,7 +150,7 @@ const MenubarLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <Menubar.Label
     ref={ref}
-    className={cn("px-2.5 py-1 label text-ground-400", inset && "pl-8", className)}
+    className={cn("px-2.5 py-1 label text-muted-foreground", inset && "pl-8", className)}
     {...props}
   />
 ));
@@ -162,7 +162,7 @@ const MenubarSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <Menubar.Separator
     ref={ref}
-    className={cn("mx-1 my-1 h-px bg-ground-100", className)}
+    className={cn("mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
 ));
@@ -178,15 +178,15 @@ const MenubarSubTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
-      "body text-ground-700 outline-none transition-colors",
-      "focus:bg-ground-50 focus:text-ground-900 data-[state=open]:bg-ground-50",
+      "body text-muted-foreground outline-none transition-colors",
+      "focus:bg-muted focus:text-foreground data-[state=open]:bg-muted",
       inset && "pl-8",
       className,
     )}
     {...props}
   >
     {children}
-    <ChevronRight size={14} className="ml-auto text-ground-400" />
+    <ChevronRight size={14} className="ml-auto text-muted-foreground" />
   </Menubar.SubTrigger>
 ));
 MenubarSubTrigger.displayName = "MenubarSubTrigger";
@@ -198,7 +198,7 @@ const MenubarSubContent = React.forwardRef<
   <Menubar.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] bg-white rounded-xl border border-ground-100 shadow-natural p-1",
+      "z-50 min-w-[8rem] bg-card rounded-xl border border-border shadow-natural p-1",
       "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",
@@ -211,7 +211,7 @@ const MenubarSubContent = React.forwardRef<
 MenubarSubContent.displayName = "MenubarSubContent";
 
 function MenubarShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
-  return <span className={cn("ml-auto caption text-ground-400", className)} {...props} />;
+  return <span className={cn("ml-auto caption text-muted-foreground", className)} {...props} />;
 }
 MenubarShortcut.displayName = "MenubarShortcut";
 

package/src/components/native-select.tsx

@@ -10,11 +10,11 @@ const NativeSelect = React.forwardRef<
     <select
       ref={ref}
       className={cn(
-        "peer h-9 w-full appearance-none rounded-lg border border-ground-200 bg-white pl-3 pr-8",
-        "body text-ground-900",
-        "focus:outline-none focus:ring-2 focus:ring-ground-400/30 focus:border-ground-400",
+        "peer h-9 w-full appearance-none rounded-lg border border-border bg-card pl-3 pr-8",
+        "body text-foreground",
+        "focus:outline-none focus:ring-2 focus:ring-ring/30 focus:border-border",
         "disabled:cursor-not-allowed disabled:opacity-50",
-        "aria-[invalid=true]:border-red-500 aria-[invalid=true]:focus:ring-red-500/20",
+        "aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:ring-destructive/20",
         className,
       )}
       {...props}
@@ -23,7 +23,7 @@ const NativeSelect = React.forwardRef<
     </select>
     <ChevronDown
       size={14}
-      className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-ground-400 peer-disabled:opacity-50"
+      className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground peer-disabled:opacity-50"
     />
   </div>
 ));

package/src/components/navigation-menu.tsx

@@ -41,9 +41,9 @@ const NavigationMenuTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "group inline-flex h-9 w-max items-center justify-center gap-1 rounded-md px-3 py-2",
-      "body font-medium text-ground-700",
-      "hover:bg-ground-100 hover:text-ground-900",
-      "data-[active]:bg-ground-100 data-[state=open]:bg-ground-100",
+      "body font-medium text-muted-foreground",
+      "hover:bg-muted hover:text-foreground",
+      "data-[active]:bg-muted data-[state=open]:bg-muted",
       "outline-none transition-colors",
       className,
     )}
@@ -86,8 +86,8 @@ const NavigationMenuLink = React.forwardRef<
   <NavigationMenu.Link
     ref={ref}
     className={cn(
-      "block select-none rounded-md px-3 py-2 body text-ground-700",
-      "hover:bg-ground-50 hover:text-ground-900",
+      "block select-none rounded-md px-3 py-2 body text-muted-foreground",
+      "hover:bg-muted hover:text-foreground",
       "outline-none transition-colors",
       className,
     )}
@@ -104,7 +104,7 @@ const NavigationMenuViewport = React.forwardRef<
     <NavigationMenu.Viewport
       ref={ref}
       className={cn(
-        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-xl border border-ground-100 bg-white shadow-elevated",
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-xl border border-border bg-card shadow-elevated",
         "md:w-[var(--radix-navigation-menu-viewport-width)]",
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90",
@@ -130,7 +130,7 @@ const NavigationMenuIndicator = React.forwardRef<
     )}
     {...props}
   >
-    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-ground-100 shadow-elevated" />
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-muted shadow-elevated" />
   </NavigationMenu.Indicator>
 ));
 NavigationMenuIndicator.displayName = "NavigationMenuIndicator";
@@ -138,9 +138,9 @@ NavigationMenuIndicator.displayName = "NavigationMenuIndicator";
 function navigationMenuTriggerStyle() {
   return cn(
     "group inline-flex h-9 w-max items-center justify-center gap-1 rounded-md px-3 py-2",
-    "body font-medium text-ground-700",
-    "hover:bg-ground-100 hover:text-ground-900",
-    "data-[active]:bg-ground-100 data-[state=open]:bg-ground-100",
+    "body font-medium text-muted-foreground",
+    "hover:bg-muted hover:text-foreground",
+    "data-[active]:bg-muted data-[state=open]:bg-muted",
     "outline-none transition-colors",
   );
 }

package/src/components/notification.tsx

@@ -19,17 +19,17 @@ interface NotificationProps {
 }
 
 const variantConfig = {
-  default: { icon: null, iconClass: "text-ground-400" },
+  default: { icon: null, iconClass: "text-muted-foreground" },
   success: {
     icon: CheckCircle,
-    iconClass: "bg-brand-secondary/25 text-ground-700 rounded-full p-1",
+    iconClass: "bg-brand-secondary/25 text-muted-foreground rounded-full p-1",
   },
-  error: { icon: AlertCircle, iconClass: "text-red-500" },
+  error: { icon: AlertCircle, iconClass: "text-destructive" },
   warning: {
     icon: AlertTriangle,
-    iconClass: "bg-brand-secondary/80 text-ground-700 rounded-full p-1",
+    iconClass: "bg-brand-secondary/80 text-muted-foreground rounded-full p-1",
   },
-  info: { icon: Info, iconClass: "text-ground-400" },
+  info: { icon: Info, iconClass: "text-muted-foreground" },
 };
 
 function Notification({
@@ -49,7 +49,7 @@ function Notification({
   return (
     <div
       className={cn(
-        "pointer-events-auto w-full max-w-sm overflow-hidden rounded-xl border border-ground-100 bg-white shadow-elevated",
+        "pointer-events-auto w-full max-w-sm overflow-hidden rounded-xl border border-border bg-card shadow-elevated",
         className,
       )}
     >
@@ -62,8 +62,8 @@ function Notification({
 
           {/* Body */}
           <div className="min-w-0 flex-1">
-            <p className="body font-semibold text-ground-900">{title}</p>
-            {description && <p className="mt-0.5 body text-ground-500">{description}</p>}
+            <p className="body font-semibold text-foreground">{title}</p>
+            {description && <p className="mt-0.5 body text-muted-foreground">{description}</p>}
 
             {/* Actions */}
             {actions && actions.length > 0 && (
@@ -76,8 +76,8 @@ function Notification({
                     className={cn(
                       "body font-semibold transition-colors",
                       action.variant === "ghost"
-                        ? "text-ground-400 hover:text-ground-700"
-                        : "text-ground-900 hover:text-ground-600",
+                        ? "text-muted-foreground hover:text-muted-foreground"
+                        : "text-foreground hover:text-muted-foreground",
                     )}
                   >
                     {action.label}
@@ -93,7 +93,7 @@ function Notification({
               <button
                 type="button"
                 onClick={onClose}
-                className="rounded-md text-ground-400 hover:text-ground-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-400/40"
+                className="rounded-md text-muted-foreground hover:text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
               >
                 <span className="sr-only">Close</span>
                 <X size={16} />
@@ -106,4 +106,6 @@ function Notification({
   );
 }
 
+Notification.displayName = "Notification";
+
 export { Notification };

package/src/components/page-heading.tsx

@@ -42,22 +42,22 @@ function PageHeading({
   className,
 }: PageHeadingProps) {
   return (
-    <div className={cn("border-b border-ground-100 pb-6", className)}>
+    <div className={cn("border-b border-border pb-6", className)}>
       {/* Breadcrumbs */}
       {breadcrumbs && breadcrumbs.length > 0 && (
         <nav className="mb-3 flex items-center gap-1.5" aria-label="Breadcrumb">
           {breadcrumbs.map((crumb, i) => (
             <React.Fragment key={i}>
-              {i > 0 && <ChevronRight size={12} className="text-ground-300 shrink-0" />}
+              {i > 0 && <ChevronRight size={12} className="text-muted-foreground shrink-0" />}
               {crumb.href ? (
                 <a
                   href={crumb.href}
-                  className="caption text-ground-400 hover:text-ground-700 transition-colors"
+                  className="caption text-muted-foreground hover:text-muted-foreground transition-colors"
                 >
                   {crumb.label}
                 </a>
               ) : (
-                <span className="caption font-semibold text-ground-700">{crumb.label}</span>
+                <span className="caption font-semibold text-muted-foreground">{crumb.label}</span>
               )}
             </React.Fragment>
           ))}
@@ -68,7 +68,7 @@ function PageHeading({
       <div className="flex flex-wrap items-start justify-between gap-4">
         <div className="min-w-0 flex-1">
           <div className="flex items-center gap-3">
-            <h1 className="display text-ground-900 truncate">{title}</h1>
+            <h1 className="display text-foreground truncate">{title}</h1>
             {badge &&
               (typeof badge === "string" ? (
                 <Badge variant="secondary">{badge}</Badge>
@@ -76,14 +76,14 @@ function PageHeading({
                 <Badge variant={badge.variant ?? "secondary"}>{badge.label}</Badge>
               ))}
           </div>
-          {description && <p className="mt-1.5 body text-ground-400 max-w-2xl">{description}</p>}
+          {description && <p className="mt-1.5 body text-muted-foreground max-w-2xl">{description}</p>}
 
           {/* Meta */}
           {meta && meta.length > 0 && (
             <div className="mt-3 flex flex-wrap items-center gap-4">
               {meta.map((m, i) => (
-                <div key={i} className="flex items-center gap-1.5 caption text-ground-400">
-                  {m.icon && <span className="text-ground-400">{m.icon}</span>}
+                <div key={i} className="flex items-center gap-1.5 caption text-muted-foreground">
+                  {m.icon && <span className="text-muted-foreground">{m.icon}</span>}
                   <span>{m.text}</span>
                 </div>
               ))}

package/src/components/pagination.tsx

@@ -70,7 +70,7 @@ PaginationNext.displayName = "PaginationNext";
 const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
   <span
     aria-hidden
-    className={cn("flex size-8 items-center justify-center text-ground-400", className)}
+    className={cn("flex size-8 items-center justify-center text-muted-foreground", className)}
     {...props}
   >
     <MoreHorizontal size={14} />

package/src/components/popover.tsx

@@ -18,7 +18,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-xl bg-white p-4 shadow-natural outline-none",
+        "z-50 w-72 rounded-xl bg-card p-4 shadow-natural 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",

package/src/components/progress.tsx

@@ -8,7 +8,7 @@ const ProgressRoot = React.forwardRef<
 >(({ className, value, ...props }, ref) => (
   <Progress.Root
     ref={ref}
-    className={cn("relative h-2 w-full overflow-hidden rounded-full bg-ground-100", className)}
+    className={cn("relative h-2 w-full overflow-hidden rounded-full bg-muted", className)}
     value={value}
     {...props}
   >

package/src/components/property-row.tsx

@@ -41,7 +41,7 @@ function PropertyRow({
     >
       {label !== undefined && (
         <div
-          className="caption text-ground-500 shrink-0 select-none"
+          className="caption text-muted-foreground shrink-0 select-none"
           style={{ width: typeof labelWidth === "number" ? `${labelWidth}px` : labelWidth }}
         >
           {label}
@@ -52,5 +52,7 @@ function PropertyRow({
   );
 }
 
+PropertyRow.displayName = "PropertyRow";
+
 export { PropertyRow };
 export type { PropertyRowProps };

package/src/components/radio-card.tsx

@@ -46,8 +46,8 @@ function RadioCards({ options, value, onValueChange, columns = 3, className }: R
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
               "disabled:cursor-not-allowed disabled:opacity-50",
               isSelected
-                ? "border-brand-primary bg-white shadow-natural"
-                : "border-ground-200 bg-white hover:border-ground-400",
+                ? "border-brand-primary bg-card shadow-natural"
+                : "border-border bg-card hover:border-border",
             )}
           >
             {/* Selected ring overlay */}
@@ -60,17 +60,17 @@ function RadioCards({ options, value, onValueChange, columns = 3, className }: R
 
             <div className="flex items-start justify-between gap-2">
               <div className="min-w-0 flex-1">
-                {option.icon && <div className="mb-2 text-ground-500">{option.icon}</div>}
+                {option.icon && <div className="mb-2 text-muted-foreground">{option.icon}</div>}
                 <p
                   className={cn(
                     "body font-semibold",
-                    isSelected ? "text-ground-900" : "text-ground-800",
+                    isSelected ? "text-foreground" : "text-muted-foreground",
                   )}
                 >
                   {option.label}
                 </p>
                 {option.description && (
-                  <p className="mt-0.5 caption text-ground-400">{option.description}</p>
+                  <p className="mt-0.5 caption text-muted-foreground">{option.description}</p>
                 )}
               </div>
               <div
@@ -78,10 +78,10 @@ function RadioCards({ options, value, onValueChange, columns = 3, className }: R
                   "flex size-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
                   isSelected
                     ? "border-brand-primary bg-brand-primary"
-                    : "border-ground-300 bg-white",
+                    : "border-border bg-card",
                 )}
               >
-                {isSelected && <Check size={10} className="text-white" strokeWidth={3} />}
+                {isSelected && <Check size={10} className="text-background" strokeWidth={3} />}
               </div>
             </div>
 
@@ -89,7 +89,7 @@ function RadioCards({ options, value, onValueChange, columns = 3, className }: R
               <p
                 className={cn(
                   "caption font-semibold mt-2",
-                  isSelected ? "text-ground-900" : "text-ground-400",
+                  isSelected ? "text-foreground" : "text-muted-foreground",
                 )}
               >
                 {option.meta}
@@ -102,4 +102,6 @@ function RadioCards({ options, value, onValueChange, columns = 3, className }: R
   );
 }
 
+RadioCards.displayName = "RadioCards";
+
 export { RadioCards };

package/src/components/radio-group.tsx

@@ -19,17 +19,17 @@ const RadioGroupItem = React.forwardRef<
   <RadioGroup.Item
     ref={ref}
     className={cn(
-      "aspect-square size-4 rounded-full border border-ground-300 text-ground-900",
+      "aspect-square size-4 rounded-full border border-border text-foreground",
       "shadow-none transition-colors",
-      "focus:outline-none focus-visible:ring-2 focus-visible:ring-ground-900/20",
+      "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/20",
       "disabled:cursor-not-allowed disabled:opacity-50",
-      "data-[state=checked]:bg-ground-900 data-[state=checked]:border-ground-900",
+      "data-[state=checked]:bg-foreground data-[state=checked]:border-foreground",
       className,
     )}
     {...props}
   >
     <RadioGroup.Indicator className="flex items-center justify-center">
-      <div className="size-2 rounded-full bg-white" />
+      <div className="size-2 rounded-full bg-card" />
     </RadioGroup.Indicator>
   </RadioGroup.Item>
 ));

package/src/components/resizable.tsx

@@ -46,7 +46,7 @@ function ResizableHandle({ className, withHandle = true, ...props }: ResizableHa
   return (
     <Separator
       className={cn(
-        "relative flex shrink-0 items-center justify-center bg-ground-100",
+        "relative flex shrink-0 items-center justify-center bg-muted",
         "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-brand-primary/50",
         // Horizontal (default): vertical bar
         "[&:not([aria-orientation=vertical])]:h-full [&:not([aria-orientation=vertical])]:w-px",
@@ -62,8 +62,8 @@ function ResizableHandle({ className, withHandle = true, ...props }: ResizableHa
       {...props}
     >
       {withHandle && (
-        <div className="z-10 flex h-5 w-3 items-center justify-center rounded-sm border border-ground-100 bg-white shadow-natural">
-          <GripVertical size={10} className="text-ground-400" />
+        <div className="z-10 flex h-5 w-3 items-center justify-center rounded-sm border border-border bg-card shadow-natural">
+          <GripVertical size={10} className="text-muted-foreground" />
         </div>
       )}
     </Separator>

package/src/components/scroll-area.tsx

@@ -34,7 +34,7 @@ const ScrollAreaScrollbar = React.forwardRef<
     )}
     {...props}
   >
-    <ScrollArea.Thumb className="relative flex-1 rounded-full bg-ground-200 hover:bg-ground-300 transition-colors" />
+    <ScrollArea.Thumb className="relative flex-1 rounded-full bg-muted hover:bg-muted transition-colors" />
   </ScrollArea.Scrollbar>
 ));
 ScrollAreaScrollbar.displayName = "ScrollAreaScrollbar";