@hilum/ui 2.0.0 → 2.0.1

package/src/components/color-input.tsx

@@ -42,7 +42,7 @@ function ColorInput({
   return (
     <div
       className={cn(
-        "inline-flex h-8 items-stretch gap-0 rounded-md border border-ground-200 bg-white overflow-hidden",
+        "inline-flex h-8 items-stretch gap-0 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,
@@ -65,19 +65,19 @@ function ColorInput({
             commitHex("#" + (e.target as HTMLInputElement).value.replace(/^#/, ""));
         }}
         spellCheck={false}
-        className="w-[5.5rem] caption text-ground-900 px-2 bg-transparent border-l border-ground-100 focus:outline-none uppercase"
+        className="w-[5.5rem] caption text-foreground px-2 bg-transparent border-l border-border focus:outline-none uppercase"
       />
       {typeof opacity === "number" && onOpacityChange && (
-        <div className="relative flex items-center border-l border-ground-100">
+        <div className="relative flex items-center border-l border-border">
           <input
             type="number"
             min={0}
             max={100}
             value={Math.round(opacity)}
             onChange={(e) => onOpacityChange(Number(e.target.value))}
-            className="w-12 caption text-ground-900 px-2 bg-transparent focus:outline-none text-right [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+            className="w-12 caption text-foreground px-2 bg-transparent focus:outline-none text-right [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
           />
-          <span aria-hidden className="caption-xs text-ground-400 pr-2">
+          <span aria-hidden className="caption-xs text-muted-foreground pr-2">
             %
           </span>
         </div>
@@ -86,5 +86,7 @@ function ColorInput({
   );
 }
 
+ColorInput.displayName = "ColorInput";
+
 export { ColorInput };
 export type { ColorInputProps };

package/src/components/color-picker.tsx

@@ -45,8 +45,8 @@ function ColorPicker({
           disabled={disabled}
           aria-label={ariaLabel}
           className={cn(
-            "inline-flex h-8 w-8 items-center justify-center rounded-md border border-ground-200 bg-white",
-            "transition-colors hover:border-ground-300",
+            "inline-flex h-8 w-8 items-center justify-center rounded-md border border-border bg-card",
+            "transition-colors hover:border-border",
             "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",
             className,
@@ -63,7 +63,7 @@ function ColorPicker({
         <Popover.Content
           align="start"
           sideOffset={6}
-          className="z-50 w-56 rounded-xl bg-white p-3 shadow-natural outline-none"
+          className="z-50 w-56 rounded-xl bg-card p-3 shadow-natural outline-none"
         >
           <input
             type="color"
@@ -72,10 +72,10 @@ function ColorPicker({
               setHex(e.target.value);
               onChange(e.target.value);
             }}
-            className="h-10 w-full cursor-pointer rounded-md border border-ground-200 bg-white p-0.5"
+            className="h-10 w-full cursor-pointer rounded-md border border-border bg-card p-0.5"
           />
           <div className="mt-2 flex items-center gap-2">
-            <span className="caption text-ground-500">Hex</span>
+            <span className="caption text-muted-foreground">Hex</span>
             <input
               type="text"
               value={hex}
@@ -84,7 +84,7 @@ function ColorPicker({
               onKeyDown={(e) => {
                 if (e.key === "Enter") commit((e.target as HTMLInputElement).value);
               }}
-              className="flex-1 h-7 rounded-md border border-ground-200 bg-white px-2 caption text-ground-900 focus:outline-none focus:border-brand-primary"
+              className="flex-1 h-7 rounded-md border border-border bg-card px-2 caption text-foreground focus:outline-none focus:border-brand-primary"
             />
           </div>
           {presets && presets.length > 0 && (
@@ -107,5 +107,7 @@ function ColorPicker({
   );
 }
 
+ColorPicker.displayName = "ColorPicker";
+
 export { ColorPicker };
 export type { ColorPickerProps };

package/src/components/combobox.tsx

@@ -33,8 +33,10 @@ function Combobox({
 }: ComboboxProps) {
   const [open, setOpen] = React.useState(false);
   const [query, setQuery] = React.useState("");
+  const [activeIndex, setActiveIndex] = React.useState(-1);
   const containerRef = React.useRef<HTMLDivElement>(null);
   const inputRef = React.useRef<HTMLInputElement>(null);
+  const listboxId = React.useId();
 
   const selectedOption = options.find((o) => o.value === value);
 
@@ -47,6 +49,11 @@ function Combobox({
             o.description?.toLowerCase().includes(query.toLowerCase()),
         );
 
+  // Reset active index when the filtered list changes
+  React.useEffect(() => {
+    setActiveIndex(-1);
+  }, [filtered.length, open]);
+
   // Close on outside click
   React.useEffect(() => {
     function onMouseDown(e: MouseEvent) {
@@ -59,25 +66,45 @@ function Combobox({
     return () => document.removeEventListener("mousedown", onMouseDown);
   }, []);
 
-  // Close on Escape
-  React.useEffect(() => {
-    if (!open) return;
-    function onKey(e: KeyboardEvent) {
-      if (e.key === "Escape") {
-        setOpen(false);
-        setQuery("");
-      }
+  function closeDropdown() {
+    setOpen(false);
+    setQuery("");
+    setActiveIndex(-1);
+  }
+
+  function selectOption(opt: ComboboxOption) {
+    onValueChange?.(opt.value);
+    closeDropdown();
+  }
+
+  function handleInputKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === "Escape") {
+      closeDropdown();
+      return;
     }
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [open]);
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (!open) { setOpen(true); return; }
+      setActiveIndex((i) => Math.min(i + 1, filtered.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (!open) { setOpen(true); return; }
+      const target = activeIndex >= 0 ? filtered[activeIndex] : filtered[0];
+      if (target) selectOption(target);
+    } else if (e.key === "Tab") {
+      closeDropdown();
+    }
+  }
 
   return (
     <div ref={containerRef} className={cn("relative", className)}>
       {/* Trigger */}
       <div className="relative flex items-center">
         {selectedOption?.avatar && !open && (
-          <div className="pointer-events-none absolute left-2.5 flex size-5 items-center justify-center rounded-full bg-ground-200 caption-xs font-semibold text-ground-700 shrink-0">
+          <div className="pointer-events-none absolute left-2.5 flex size-5 items-center justify-center rounded-full bg-muted caption-xs font-semibold text-muted-foreground shrink-0">
             {selectedOption.avatar}
           </div>
         )}
@@ -92,10 +119,14 @@ function Combobox({
           type="text"
           role="combobox"
           aria-expanded={open}
+          aria-haspopup="listbox"
+          aria-controls={open ? listboxId : undefined}
+          aria-activedescendant={open && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined}
+          aria-autocomplete="list"
           className={cn(
-            "flex h-9 w-full rounded-lg border border-ground-200 bg-white pr-8 body text-ground-900",
-            "placeholder:text-ground-400",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-400/30 focus-visible:border-ground-400",
+            "flex h-9 w-full rounded-lg border border-border bg-card pr-8 body text-foreground",
+            "placeholder:text-muted-foreground",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:border-border",
             "disabled:cursor-not-allowed disabled:opacity-50",
             selectedOption?.avatar && !open
               ? "pl-8"
@@ -113,15 +144,16 @@ function Combobox({
             setOpen(true);
             setQuery("");
           }}
+          onKeyDown={handleInputKeyDown}
         />
         <button
           type="button"
           tabIndex={-1}
-          className="absolute inset-y-0 right-0 flex items-center px-2 text-ground-400 hover:text-ground-700 transition-colors"
+          aria-label={open ? "Close" : "Open"}
+          className="absolute inset-y-0 right-0 flex items-center px-2 text-muted-foreground hover:text-muted-foreground transition-colors"
           onClick={() => {
             if (open) {
-              setOpen(false);
-              setQuery("");
+              closeDropdown();
             } else {
               setOpen(true);
               inputRef.current?.focus();
@@ -134,37 +166,38 @@ function Combobox({
 
       {/* Dropdown */}
       {open && (
-        <div className="absolute z-50 mt-1 w-full overflow-hidden rounded-lg border border-ground-200 bg-white shadow-elevated">
-          <ul role="listbox" className="max-h-60 overflow-auto py-1">
+        <div className="absolute z-50 mt-1 w-full overflow-hidden rounded-lg border border-border bg-card shadow-elevated">
+          <ul id={listboxId} role="listbox" className="max-h-60 overflow-auto py-1">
             {filtered.length === 0 ? (
-              <li className="px-3 py-2 body text-ground-400">{emptyText}</li>
+              <li className="px-3 py-2 body text-muted-foreground">{emptyText}</li>
             ) : (
-              filtered.map((option) => {
+              filtered.map((option, idx) => {
                 const isSelected = option.value === value;
+                const isActive = idx === activeIndex;
                 return (
                   <li
                     key={option.value}
+                    id={`${listboxId}-option-${idx}`}
                     role="option"
                     aria-selected={isSelected}
                     className={cn(
                       "flex cursor-pointer select-none items-center gap-2.5 px-3 py-2 body transition-colors",
                       isSelected
-                        ? "bg-brand-primary text-white"
-                        : "text-ground-900 hover:bg-ground-50",
+                        ? "bg-brand-primary text-background"
+                        : isActive
+                          ? "bg-muted text-foreground"
+                          : "text-foreground hover:bg-muted",
                     )}
                     onMouseDown={(e) => e.preventDefault()}
-                    onClick={() => {
-                      onValueChange?.(option.value);
-                      setQuery("");
-                      setOpen(false);
-                    }}
+                    onMouseEnter={() => setActiveIndex(idx)}
+                    onClick={() => selectOption(option)}
                   >
                     {/* Avatar */}
                     {option.avatar && (
                       <div
                         className={cn(
                           "flex size-6 shrink-0 items-center justify-center rounded-full caption-xs font-semibold",
-                          isSelected ? "bg-white/20 text-white" : "bg-ground-200 text-ground-700",
+                          isSelected ? "bg-card/20 text-background" : "bg-muted text-muted-foreground",
                         )}
                       >
                         {option.avatar}
@@ -185,7 +218,7 @@ function Combobox({
                         <p
                           className={cn(
                             "caption truncate",
-                            isSelected ? "text-white/70" : "text-ground-400",
+                            isSelected ? "text-background/70" : "text-muted-foreground",
                           )}
                         >
                           {option.description}
@@ -204,4 +237,6 @@ function Combobox({
   );
 }
 
+Combobox.displayName = "Combobox";
+
 export { Combobox };

package/src/components/command-palette.tsx

@@ -73,12 +73,12 @@ function CommandPalette({
     <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
       <DialogContent className="gap-0 overflow-hidden p-0 sm:max-w-xl">
         {/* Search input */}
-        <div className="flex items-center gap-3 border-b border-ground-100 px-4">
-          <Search size={16} className="shrink-0 text-ground-400" />
+        <div className="flex items-center gap-3 border-b border-border px-4">
+          <Search size={16} className="shrink-0 text-muted-foreground" />
           <input
             ref={inputRef}
             type="text"
-            className="h-12 flex-1 bg-transparent body text-ground-900 placeholder:text-ground-400 focus:outline-none"
+            className="h-12 flex-1 bg-transparent body text-foreground placeholder:text-muted-foreground focus:outline-none"
             placeholder={placeholder}
             value={query}
             onChange={(e) => setQuery(e.target.value)}
@@ -88,7 +88,7 @@ function CommandPalette({
             }}
           />
           <kbd className="hidden items-center gap-0.5 sm:flex">
-            <span className="caption-xs font-medium text-ground-400 rounded border border-ground-200 px-1.5 py-0.5">
+            <span className="caption-xs font-medium text-muted-foreground rounded border border-border px-1.5 py-0.5">
               esc
             </span>
           </kbd>
@@ -97,31 +97,31 @@ function CommandPalette({
         {/* Results */}
         <div className="max-h-80 overflow-y-auto">
           {filtered.length === 0 ? (
-            <p className="px-4 py-8 text-center body text-ground-400">{emptyText}</p>
+            <p className="px-4 py-8 text-center body text-muted-foreground">{emptyText}</p>
           ) : (
             <ul role="list" className="py-2">
               {categories.map((cat) => (
                 <li key={cat}>
-                  {cat && <p className="label px-4 py-2 text-ground-400">{cat}</p>}
+                  {cat && <p className="label px-4 py-2 text-muted-foreground">{cat}</p>}
                   {grouped[cat].map((item, i) => (
                     <button
                       key={item.id ?? i}
                       type="button"
-                      className="flex w-full items-center gap-3 px-4 py-2.5 body text-left transition-colors hover:bg-ground-50 focus-visible:bg-ground-50 focus-visible:outline-none"
+                      className="flex w-full items-center gap-3 px-4 py-2.5 body text-left transition-colors hover:bg-muted focus-visible:bg-muted focus-visible:outline-none"
                       onClick={() => handleSelect(item)}
                     >
                       {item.icon && (
-                        <span className="flex size-8 shrink-0 items-center justify-center rounded-lg border border-ground-200 bg-white text-ground-500">
+                        <span className="flex size-8 shrink-0 items-center justify-center rounded-lg border border-border bg-card text-muted-foreground">
                           {item.icon}
                         </span>
                       )}
                       <div className="min-w-0 flex-1">
-                        <p className="font-medium text-ground-900 truncate">{item.label}</p>
+                        <p className="font-medium text-foreground truncate">{item.label}</p>
                         {item.description && (
-                          <p className="caption text-ground-400 truncate">{item.description}</p>
+                          <p className="caption text-muted-foreground truncate">{item.description}</p>
                         )}
                       </div>
-                      <ArrowRight size={13} className="shrink-0 text-ground-300" />
+                      <ArrowRight size={13} className="shrink-0 text-muted-foreground" />
                     </button>
                   ))}
                 </li>
@@ -134,4 +134,6 @@ function CommandPalette({
   );
 }
 
+CommandPalette.displayName = "CommandPalette";
+
 export { CommandPalette };

package/src/components/command.tsx

@@ -44,7 +44,7 @@ function Command({ className, children, onSelect, ...props }: CommandProps) {
       <CommandVisibleCtx.Provider value={visibleCount}>
         <div
           className={cn(
-            "flex flex-col overflow-hidden rounded-xl border border-ground-200 bg-white",
+            "flex flex-col overflow-hidden rounded-xl border border-border bg-card",
             className,
           )}
           {...props}
@@ -62,8 +62,8 @@ const CommandInput = React.forwardRef<
 >(({ className, ...props }, ref) => {
   const { query, setQuery } = React.useContext(CommandCtx);
   return (
-    <div className="flex items-center gap-2 border-b border-ground-100 px-3">
-      <Search size={14} className="shrink-0 text-ground-400" />
+    <div className="flex items-center gap-2 border-b border-border px-3">
+      <Search size={14} className="shrink-0 text-muted-foreground" />
       <input
         ref={ref}
         type="text"
@@ -71,8 +71,8 @@ const CommandInput = React.forwardRef<
         autoCorrect="off"
         spellCheck={false}
         className={cn(
-          "flex h-10 w-full bg-transparent body text-ground-900",
-          "placeholder:text-ground-400 focus:outline-none",
+          "flex h-10 w-full bg-transparent body text-foreground",
+          "placeholder:text-muted-foreground focus:outline-none",
           className,
         )}
         value={query}
@@ -135,7 +135,7 @@ const CommandEmpty = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLD
     return (
       <div
         ref={ref}
-        className={cn("py-6 text-center caption text-ground-400", className)}
+        className={cn("py-6 text-center caption text-muted-foreground", className)}
         {...props}
       >
         {children}
@@ -152,7 +152,7 @@ interface CommandGroupProps extends React.HTMLAttributes<HTMLDivElement> {
 const CommandGroup = React.forwardRef<HTMLDivElement, CommandGroupProps>(
   ({ className, heading, children, ...props }, ref) => (
     <div ref={ref} role="group" className={cn("py-1", className)} {...props}>
-      {heading && <p className="px-3 pb-1 pt-0.5 label text-ground-400">{heading}</p>}
+      {heading && <p className="px-3 pb-1 pt-0.5 label text-muted-foreground">{heading}</p>}
       {children}
     </div>
   ),
@@ -197,9 +197,9 @@ const CommandItem = React.forwardRef<HTMLDivElement, CommandItemProps>(
         tabIndex={disabled ? undefined : 0}
         className={cn(
           "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5 mx-1",
-          "body text-ground-700 outline-none transition-colors",
-          "hover:bg-ground-50 hover:text-ground-900",
-          "focus:bg-ground-50 focus:text-ground-900",
+          "body text-muted-foreground outline-none transition-colors",
+          "hover:bg-muted hover:text-foreground",
+          "focus:bg-muted focus:text-foreground",
           disabled && "pointer-events-none opacity-40",
           className,
         )}
@@ -221,7 +221,7 @@ CommandItem.displayName = "CommandItem";
 
 const CommandSeparator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("my-1 h-px bg-ground-100", className)} {...props} />
+    <div ref={ref} className={cn("my-1 h-px bg-muted", className)} {...props} />
   ),
 );
 CommandSeparator.displayName = "CommandSeparator";
@@ -229,13 +229,15 @@ CommandSeparator.displayName = "CommandSeparator";
 function CommandShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
   return (
     <span
-      className={cn("ml-auto caption text-ground-300 tracking-widest font-medium", className)}
+      className={cn("ml-auto caption text-muted-foreground tracking-widest font-medium", className)}
       {...props}
     />
   );
 }
 CommandShortcut.displayName = "CommandShortcut";
 
+Command.displayName = "Command";
+
 export {
   Command,
   CommandInput,

package/src/components/context-menu.tsx

@@ -20,7 +20,7 @@ const ContextMenuContent = React.forwardRef<
     <ContextMenu.Content
       ref={ref}
       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",
@@ -47,8 +47,8 @@ const ContextMenuItem = 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,
@@ -66,8 +66,8 @@ const ContextMenuCheckboxItem = 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,
     )}
@@ -75,7 +75,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <ContextMenu.ItemIndicator>
-        <Check size={13} className="text-ground-900" />
+        <Check size={13} className="text-foreground" />
       </ContextMenu.ItemIndicator>
     </span>
     {children}
@@ -91,8 +91,8 @@ const ContextMenuRadioItem = 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,
     )}
@@ -100,7 +100,7 @@ const ContextMenuRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <ContextMenu.ItemIndicator>
-        <Circle size={8} className="fill-ground-900 text-ground-900" />
+        <Circle size={8} className="fill-foreground text-foreground" />
       </ContextMenu.ItemIndicator>
     </span>
     {children}
@@ -116,7 +116,7 @@ const ContextMenuLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <ContextMenu.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}
   />
 ));
@@ -128,7 +128,7 @@ const ContextMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ContextMenu.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}
   />
 ));
@@ -144,15 +144,15 @@ const ContextMenuSubTrigger = 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" />
   </ContextMenu.SubTrigger>
 ));
 ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
@@ -164,7 +164,7 @@ const ContextMenuSubContent = React.forwardRef<
   <ContextMenu.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",
@@ -177,7 +177,7 @@ const ContextMenuSubContent = React.forwardRef<
 ContextMenuSubContent.displayName = "ContextMenuSubContent";
 
 function ContextMenuShortcut({ 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} />;
 }
 ContextMenuShortcut.displayName = "ContextMenuShortcut";
 

package/src/components/data-table.tsx

@@ -67,12 +67,23 @@ function DataTable<TData>({
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow key={headerGroup.id}>
               {headerGroup.headers.map((header) => (
-                <TableHead key={header.id}>
+                <TableHead
+                  key={header.id}
+                  aria-sort={
+                    header.column.getCanSort()
+                      ? header.column.getIsSorted() === "asc"
+                        ? "ascending"
+                        : header.column.getIsSorted() === "desc"
+                          ? "descending"
+                          : "none"
+                      : undefined
+                  }
+                >
                   {header.isPlaceholder ? null : header.column.getCanSort() ? (
                     <button
                       className={cn(
-                        "flex items-center gap-1 transition-colors hover:text-ground-700",
-                        header.column.getIsSorted() && "text-ground-900",
+                        "flex items-center gap-1 transition-colors hover:text-muted-foreground",
+                        header.column.getIsSorted() && "text-foreground",
                       )}
                       onClick={header.column.getToggleSortingHandler()}
                     >
@@ -82,7 +93,7 @@ function DataTable<TData>({
                       ) : header.column.getIsSorted() === "desc" ? (
                         <ChevronDown size={12} className="text-brand-primary" />
                       ) : (
-                        <ChevronsUpDown size={12} className="text-ground-300" />
+                        <ChevronsUpDown size={12} className="text-muted-foreground" />
                       )}
                     </button>
                   ) : (
@@ -106,7 +117,7 @@ function DataTable<TData>({
             ))
           ) : (
             <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center text-ground-400">
+              <TableCell colSpan={columns.length} className="h-24 text-center text-muted-foreground">
                 No results.
               </TableCell>
             </TableRow>
@@ -115,12 +126,12 @@ function DataTable<TData>({
       </Table>
       {showPagination && (
         <div className="flex items-center justify-between">
-          <p className="caption text-ground-400">
+          <p className="caption text-muted-foreground">
             {table.getFilteredRowModel().rows.length} result
             {table.getFilteredRowModel().rows.length !== 1 ? "s" : ""}
           </p>
           <div className="flex items-center gap-2">
-            <span className="caption text-ground-400">
+            <span className="caption text-muted-foreground">
               Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
             </span>
             <Button

package/src/components/date-picker.tsx

@@ -36,12 +36,12 @@ function DatePicker({
           variant="outline"
           className={cn(
             "w-[240px] justify-start gap-2 text-left font-normal",
-            !value && "text-ground-400",
+            !value && "text-muted-foreground",
             className,
           )}
           disabled={disabled}
         >
-          <CalendarIcon size={14} className="text-ground-400 shrink-0" />
+          <CalendarIcon size={14} className="text-muted-foreground shrink-0" />
           {value ? formatDate(value) : <span>{placeholder}</span>}
         </Button>
       </PopoverTrigger>