@hilum/ui 2.0.0 → 2.0.2

package/src/components/description-list.tsx

@@ -28,12 +28,12 @@ function DescriptionList({
     <div className={className}>
       {(title || description) && (
         <div className="mb-4">
-          {title && <p className="body font-semibold text-ground-900">{title}</p>}
-          {description && <p className="mt-1 caption text-ground-400">{description}</p>}
+          {title && <p className="body font-semibold text-foreground">{title}</p>}
+          {description && <p className="mt-1 caption text-muted-foreground">{description}</p>}
         </div>
       )}
 
-      <dl className={cn("border-t border-ground-100", columns === 2 && "sm:grid sm:grid-cols-2")}>
+      <dl className={cn("border-t border-border", columns === 2 && "sm:grid sm:grid-cols-2")}>
         {items.map((item, i) => (
           <div
             key={i}
@@ -41,15 +41,15 @@ function DescriptionList({
               "py-3.5",
               columns === 1
                 ? "grid grid-cols-3 gap-4 items-baseline"
-                : "flex flex-col gap-1 border-b border-ground-100",
-              columns === 1 && i !== items.length - 1 && "border-b border-ground-100",
-              striped && i % 2 === 0 && "bg-ground-50 -mx-4 px-4 rounded",
+                : "flex flex-col gap-1 border-b border-border",
+              columns === 1 && i !== items.length - 1 && "border-b border-border",
+              striped && i % 2 === 0 && "bg-muted -mx-4 px-4 rounded",
             )}
           >
-            <dt className="caption font-semibold text-ground-500 uppercase tracking-wide">
+            <dt className="caption font-semibold text-muted-foreground uppercase tracking-wide">
               {item.term}
             </dt>
-            <dd className={cn("body text-ground-900", columns === 1 ? "col-span-2" : "")}>
+            <dd className={cn("body text-foreground", columns === 1 ? "col-span-2" : "")}>
               {item.action ? (
                 <div className="flex items-center justify-between gap-4">
                   <span>{item.details}</span>
@@ -66,5 +66,7 @@ function DescriptionList({
   );
 }
 
+DescriptionList.displayName = "DescriptionList";
+
 export { DescriptionList };
 export type { DescriptionItem };

package/src/components/dialog.tsx

@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         "fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]",
-        "w-full max-w-lg bg-white rounded-2xl shadow-elevated p-6",
+        "w-full max-w-lg bg-card rounded-2xl shadow-elevated p-6",
         "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",
@@ -45,7 +45,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <Dialog.Close className="absolute right-4 top-4 rounded-md p-1 text-ground-400 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ground-900/20">
+      <Dialog.Close className="absolute right-4 top-4 rounded-md p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring/20">
         <X size={16} />
         <span className="sr-only">Close</span>
       </Dialog.Close>
@@ -70,7 +70,7 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <Dialog.Title
     ref={ref}
-    className={cn("body-lg font-semibold text-ground-900", className)}
+    className={cn("body-lg font-semibold text-foreground", className)}
     {...props}
   />
 ));
@@ -80,7 +80,7 @@ const DialogDescription = React.forwardRef<
   React.ComponentRef<typeof Dialog.Description>,
   React.ComponentPropsWithoutRef<typeof Dialog.Description>
 >(({ className, ...props }, ref) => (
-  <Dialog.Description ref={ref} className={cn("body text-ground-500", className)} {...props} />
+  <Dialog.Description ref={ref} className={cn("body text-muted-foreground", className)} {...props} />
 ));
 DialogDescription.displayName = "DialogDescription";
 

package/src/components/drawer.tsx

@@ -15,7 +15,7 @@ const DrawerOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Overlay
     ref={ref}
-    className={cn("fixed inset-0 z-50 bg-ground-950/40 backdrop-blur-[1px]", className)}
+    className={cn("fixed inset-0 z-50 bg-foreground/40 backdrop-blur-[1px]", className)}
     {...props}
   />
 ));
@@ -30,12 +30,12 @@ const DrawerContent = React.forwardRef<
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed inset-x-0 bottom-0 z-50 flex flex-col rounded-t-2xl border border-ground-100 bg-white",
+        "fixed inset-x-0 bottom-0 z-50 flex flex-col rounded-t-2xl border border-border bg-card",
         className,
       )}
       {...props}
     >
-      <div className="mx-auto mt-4 h-1 w-12 rounded-full bg-ground-200" />
+      <div className="mx-auto mt-4 h-1 w-12 rounded-full bg-muted" />
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>
@@ -58,7 +58,7 @@ const DrawerTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Title
     ref={ref}
-    className={cn("subheading text-ground-900", className)}
+    className={cn("subheading text-foreground", className)}
     {...props}
   />
 ));
@@ -70,7 +70,7 @@ const DrawerDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Description
     ref={ref}
-    className={cn("body text-ground-500", className)}
+    className={cn("body text-muted-foreground", className)}
     {...props}
   />
 ));

package/src/components/dropdown-menu.tsx

@@ -21,7 +21,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] bg-white rounded-xl shadow-natural p-1",
+        "z-50 min-w-[8rem] 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",
@@ -48,8 +48,8 @@ const DropdownMenuItem = React.forwardRef<
       "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
       "body outline-none transition-colors",
       destructive
-        ? "text-red-600 focus:bg-red-50 focus:text-red-700"
-        : "text-ground-700 focus:bg-ground-50 focus:text-ground-900",
+        ? "text-destructive focus:bg-destructive/10 focus:text-destructive"
+        : "text-muted-foreground focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className,
@@ -67,8 +67,8 @@ const DropdownMenuCheckboxItem = 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,
     )}
@@ -76,7 +76,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenu.ItemIndicator>
-        <Check size={13} className="text-ground-900" />
+        <Check size={13} className="text-foreground" />
       </DropdownMenu.ItemIndicator>
     </span>
     {children}
@@ -92,8 +92,8 @@ const DropdownMenuRadioItem = 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,
     )}
@@ -101,7 +101,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenu.ItemIndicator>
-        <Circle size={8} className="fill-ground-900 text-ground-900" />
+        <Circle size={8} className="fill-foreground text-foreground" />
       </DropdownMenu.ItemIndicator>
     </span>
     {children}
@@ -117,7 +117,7 @@ const DropdownMenuLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenu.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}
   />
 ));
@@ -129,7 +129,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenu.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}
   />
 ));
@@ -145,15 +145,15 @@ const DropdownMenuSubTrigger = 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" />
   </DropdownMenu.SubTrigger>
 ));
 DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
@@ -165,7 +165,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenu.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",
@@ -178,7 +178,7 @@ const DropdownMenuSubContent = React.forwardRef<
 DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
 
 function DropdownMenuShortcut({ 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} />;
 }
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 

package/src/components/empty-state.tsx

@@ -18,13 +18,13 @@ function EmptyState({ icon, title, description, action, className }: EmptyStateP
   return (
     <div className={cn("flex flex-col items-center gap-4 px-6 py-14 text-center", className)}>
       {icon && (
-        <div className="flex size-12 items-center justify-center rounded-xl bg-brand-secondary/20 text-ground-700">
+        <div className="flex size-12 items-center justify-center rounded-xl bg-brand-secondary/20 text-muted-foreground">
           {icon}
         </div>
       )}
       <div className="flex flex-col gap-1.5">
-        <p className="body font-semibold text-ground-900">{title}</p>
-        {description && <p className="body max-w-xs text-ground-400">{description}</p>}
+        <p className="body font-semibold text-foreground">{title}</p>
+        {description && <p className="body max-w-xs text-muted-foreground">{description}</p>}
       </div>
       {action &&
         (action.href ? (
@@ -40,4 +40,6 @@ function EmptyState({ icon, title, description, action, className }: EmptyStateP
   );
 }
 
+EmptyState.displayName = "EmptyState";
+
 export { EmptyState };

package/src/components/field.tsx

@@ -34,15 +34,15 @@ function Field({
       <div className="flex items-center justify-between gap-2">
         <Label htmlFor={htmlFor} aria-required={required}>
           {label}
-          {required && <span className="ml-0.5 text-red-600" aria-hidden="true">*</span>}
+          {required && <span className="ml-0.5 text-destructive" aria-hidden="true">*</span>}
         </Label>
-        {cornerHint && <span className="caption text-ground-400">{cornerHint}</span>}
+        {cornerHint && <span className="caption text-muted-foreground">{cornerHint}</span>}
       </div>
       {children}
       {error ? (
-        <p id={descriptionId} role="alert" className="caption text-red-600">{error}</p>
+        <p id={descriptionId} role="alert" className="caption text-destructive">{error}</p>
       ) : hint ? (
-        <p id={descriptionId} className="caption text-ground-400">{hint}</p>
+        <p id={descriptionId} className="caption text-muted-foreground">{hint}</p>
       ) : null}
     </div>
   );

package/src/components/grid-list.tsx

@@ -58,18 +58,18 @@ function GridListCard({
   const inner = (
     <div
       className={cn(
-        "flex h-full flex-col gap-1 rounded-xl border border-ground-100 bg-white p-4 shadow-natural transition-shadow",
+        "flex h-full flex-col gap-1 rounded-xl border border-border bg-card p-4 shadow-natural transition-shadow",
         href && "hover:shadow-elevated",
         className,
       )}
     >
       {accent && <div className="mb-2">{accent}</div>}
-      <p className="body font-semibold text-ground-900">{title}</p>
-      {description && <p className="caption text-ground-400">{description}</p>}
+      <p className="body font-semibold text-foreground">{title}</p>
+      {description && <p className="caption text-muted-foreground">{description}</p>}
       {(meta || trailing) && (
         <div className="mt-auto flex items-center justify-between pt-3">
-          {meta && <span className="caption text-ground-400">{meta}</span>}
-          {trailing && <span className="caption text-ground-400">{trailing}</span>}
+          {meta && <span className="caption text-muted-foreground">{meta}</span>}
+          {trailing && <span className="caption text-muted-foreground">{trailing}</span>}
         </div>
       )}
     </div>
@@ -80,7 +80,7 @@ function GridListCard({
       {href ? (
         <a
           href={href}
-          className="block h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-400/40 rounded-xl"
+          className="block h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 rounded-xl"
         >
           {inner}
         </a>
@@ -109,7 +109,7 @@ function GridListAccentCard({
   title,
   meta,
   href,
-  accentClass = "bg-ground-900",
+  accentClass = "bg-foreground",
   initials,
   trailing,
   className,
@@ -117,23 +117,23 @@ function GridListAccentCard({
   const inner = (
     <div
       className={cn(
-        "flex overflow-hidden rounded-xl border border-ground-100 bg-white shadow-natural transition-shadow",
+        "flex overflow-hidden rounded-xl border border-border bg-card shadow-natural transition-shadow",
         href && "hover:shadow-elevated",
         className,
       )}
     >
       <div
         className={cn(
-          "flex w-14 shrink-0 items-center justify-center body font-semibold text-white",
+          "flex w-14 shrink-0 items-center justify-center body font-semibold text-background",
           accentClass,
         )}
       >
         {initials}
       </div>
-      <div className="flex flex-1 items-center justify-between truncate border-l border-ground-100 px-4 py-3">
+      <div className="flex flex-1 items-center justify-between truncate border-l border-border px-4 py-3">
         <div className="min-w-0">
-          <p className="body font-semibold text-ground-900 truncate">{title}</p>
-          {meta && <p className="caption text-ground-400">{meta}</p>}
+          <p className="body font-semibold text-foreground truncate">{title}</p>
+          {meta && <p className="caption text-muted-foreground">{meta}</p>}
         </div>
         {trailing && <div className="shrink-0 pl-2">{trailing}</div>}
       </div>
@@ -145,7 +145,7 @@ function GridListAccentCard({
       {href ? (
         <a
           href={href}
-          className="block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-400/40 rounded-xl"
+          className="block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 rounded-xl"
         >
           {inner}
         </a>
@@ -156,4 +156,8 @@ function GridListAccentCard({
   );
 }
 
+GridList.displayName = "GridList";
+GridListCard.displayName = "GridListCard";
+GridListAccentCard.displayName = "GridListAccentCard";
+
 export { GridList, GridListCard, GridListAccentCard };

package/src/components/hover-card.tsx

@@ -17,7 +17,7 @@ const HoverCardContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-64 rounded-xl border border-ground-100 bg-white p-4 shadow-elevated outline-none",
+        "z-50 w-64 rounded-xl border border-border bg-card p-4 shadow-elevated 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/input-group.tsx

@@ -34,11 +34,11 @@ const InputGroup = React.forwardRef<HTMLInputElement, InputGroupProps>(
     const hasTrailing = trailingAddon || trailingIcon || trailingButton || error;
 
     const baseInput = cn(
-      "flex h-9 w-full border bg-white body text-ground-900 placeholder:text-ground-400",
+      "flex h-9 w-full border bg-card body text-foreground placeholder:text-muted-foreground",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:disabled:cursor-not-allowed disabled:opacity-50",
       error
-        ? "border-red-400 focus-visible:ring-red-200 focus-visible:border-red-500"
-        : "border-ground-200 focus-visible:ring-brand-primary/20 focus-visible:border-brand-primary",
+        ? "border-destructive focus-visible:ring-destructive/20 focus-visible:border-destructive"
+        : "border-border focus-visible:ring-brand-primary/20 focus-visible:border-brand-primary",
     );
 
     if (!hasLeading && !hasTrailing) {
@@ -51,8 +51,8 @@ const InputGroup = React.forwardRef<HTMLInputElement, InputGroupProps>(
         {leadingAddon && (
           <span
             className={cn(
-              "inline-flex items-center border border-r-0 bg-ground-50 px-3 body text-ground-500 select-none",
-              error ? "border-red-400" : "border-ground-200",
+              "inline-flex items-center border border-r-0 bg-muted px-3 body text-muted-foreground select-none",
+              error ? "border-destructive" : "border-border",
               pill ? "rounded-l-full" : "rounded-l-lg",
             )}
           >
@@ -63,7 +63,7 @@ const InputGroup = React.forwardRef<HTMLInputElement, InputGroupProps>(
         {/* Relative wrapper for icon-only inputs */}
         <div className="relative flex-1">
           {leadingIcon && (
-            <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-ground-400">
+            <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground">
               {leadingIcon}
             </div>
           )}
@@ -102,9 +102,9 @@ const InputGroup = React.forwardRef<HTMLInputElement, InputGroupProps>(
           {(trailingIcon || error) && (
             <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
               {error ? (
-                <AlertCircle size={15} className="text-red-500" />
+                <AlertCircle size={15} className="text-destructive" />
               ) : (
-                <span className="text-ground-400">{trailingIcon}</span>
+                <span className="text-muted-foreground">{trailingIcon}</span>
               )}
             </div>
           )}
@@ -114,8 +114,8 @@ const InputGroup = React.forwardRef<HTMLInputElement, InputGroupProps>(
         {trailingAddon && (
           <span
             className={cn(
-              "inline-flex items-center border border-l-0 bg-ground-50 px-3 body text-ground-500 select-none",
-              error ? "border-red-400" : "border-ground-200",
+              "inline-flex items-center border border-l-0 bg-muted px-3 body text-muted-foreground select-none",
+              error ? "border-destructive" : "border-border",
               pill ? "rounded-r-full" : "rounded-r-lg",
             )}
           >

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 };