@hilum/ui 0.1.1 → 0.1.3

package/src/components/combobox.tsx

@@ -77,7 +77,7 @@ function Combobox({
       {/* 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-taupe-200 caption-xs font-semibold text-taupe-700 shrink-0">
+          <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">
             {selectedOption.avatar}
           </div>
         )}
@@ -93,9 +93,9 @@ function Combobox({
           role="combobox"
           aria-expanded={open}
           className={cn(
-            "flex h-9 w-full rounded-lg border border-taupe-200 bg-white pr-8 body text-taupe-900",
-            "placeholder:text-taupe-400",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-taupe-400/30 focus-visible:border-taupe-400",
+            "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",
             "disabled:cursor-not-allowed disabled:opacity-50",
             selectedOption?.avatar && !open
               ? "pl-8"
@@ -117,7 +117,7 @@ function Combobox({
         <button
           type="button"
           tabIndex={-1}
-          className="absolute inset-y-0 right-0 flex items-center px-2 text-taupe-400 hover:text-taupe-700 transition-colors"
+          className="absolute inset-y-0 right-0 flex items-center px-2 text-ground-400 hover:text-ground-700 transition-colors"
           onClick={() => {
             if (open) {
               setOpen(false);
@@ -134,10 +134,10 @@ function Combobox({
 
       {/* Dropdown */}
       {open && (
-        <div className="absolute z-50 mt-1 w-full overflow-hidden rounded-lg border border-taupe-200 bg-white shadow-elevated">
+        <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">
             {filtered.length === 0 ? (
-              <li className="px-3 py-2 body text-taupe-400">{emptyText}</li>
+              <li className="px-3 py-2 body text-ground-400">{emptyText}</li>
             ) : (
               filtered.map((option) => {
                 const isSelected = option.value === value;
@@ -150,7 +150,7 @@ function Combobox({
                       "flex cursor-pointer select-none items-center gap-2.5 px-3 py-2 body transition-colors",
                       isSelected
                         ? "bg-brand-primary text-white"
-                        : "text-taupe-900 hover:bg-taupe-50",
+                        : "text-ground-900 hover:bg-ground-50",
                     )}
                     onMouseDown={(e) => e.preventDefault()}
                     onClick={() => {
@@ -164,7 +164,7 @@ function Combobox({
                       <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-taupe-200 text-taupe-700",
+                          isSelected ? "bg-white/20 text-white" : "bg-ground-200 text-ground-700",
                         )}
                       >
                         {option.avatar}
@@ -185,7 +185,7 @@ function Combobox({
                         <p
                           className={cn(
                             "caption truncate",
-                            isSelected ? "text-white/70" : "text-taupe-400",
+                            isSelected ? "text-white/70" : "text-ground-400",
                           )}
                         >
                           {option.description}

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-taupe-100 px-4">
-          <Search size={16} className="shrink-0 text-taupe-400" />
+        <div className="flex items-center gap-3 border-b border-ground-100 px-4">
+          <Search size={16} className="shrink-0 text-ground-400" />
           <input
             ref={inputRef}
             type="text"
-            className="h-12 flex-1 bg-transparent body text-taupe-900 placeholder:text-taupe-400 focus:outline-none"
+            className="h-12 flex-1 bg-transparent body text-ground-900 placeholder:text-ground-400 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-taupe-400 rounded border border-taupe-200 px-1.5 py-0.5">
+            <span className="caption-xs font-medium text-ground-400 rounded border border-ground-200 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-taupe-400">{emptyText}</p>
+            <p className="px-4 py-8 text-center body text-ground-400">{emptyText}</p>
           ) : (
             <ul role="list" className="py-2">
               {categories.map((cat) => (
                 <li key={cat}>
-                  {cat && <p className="label px-4 py-2 text-taupe-400">{cat}</p>}
+                  {cat && <p className="label px-4 py-2 text-ground-400">{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-taupe-50 focus-visible:bg-taupe-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-ground-50 focus-visible:bg-ground-50 focus-visible:outline-none"
                       onClick={() => handleSelect(item)}
                     >
                       {item.icon && (
-                        <span className="flex size-8 shrink-0 items-center justify-center rounded-lg border border-taupe-200 bg-white text-taupe-500">
+                        <span className="flex size-8 shrink-0 items-center justify-center rounded-lg border border-ground-200 bg-white text-ground-500">
                           {item.icon}
                         </span>
                       )}
                       <div className="min-w-0 flex-1">
-                        <p className="font-medium text-taupe-900 truncate">{item.label}</p>
+                        <p className="font-medium text-ground-900 truncate">{item.label}</p>
                         {item.description && (
-                          <p className="caption text-taupe-400 truncate">{item.description}</p>
+                          <p className="caption text-ground-400 truncate">{item.description}</p>
                         )}
                       </div>
-                      <ArrowRight size={13} className="shrink-0 text-taupe-300" />
+                      <ArrowRight size={13} className="shrink-0 text-ground-300" />
                     </button>
                   ))}
                 </li>

package/src/components/command.tsx

@@ -40,11 +40,11 @@ function Command({ className, children, onSelect, ...props }: CommandProps) {
   }, []);
 
   return (
-    <CommandCtx.Provider value={{ query, setQuery, onSelect, reportVisible }}>
+    <CommandCtx.Provider value={{ query, setQuery, ...(onSelect !== undefined && { onSelect }), reportVisible }}>
       <CommandVisibleCtx.Provider value={visibleCount}>
         <div
           className={cn(
-            "flex flex-col overflow-hidden rounded-xl border border-taupe-200 bg-white",
+            "flex flex-col overflow-hidden rounded-xl border border-ground-200 bg-white",
             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-taupe-100 px-3">
-      <Search size={14} className="shrink-0 text-taupe-400" />
+    <div className="flex items-center gap-2 border-b border-ground-100 px-3">
+      <Search size={14} className="shrink-0 text-ground-400" />
       <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-taupe-900",
-          "placeholder:text-taupe-400 focus:outline-none",
+          "flex h-10 w-full bg-transparent body text-ground-900",
+          "placeholder:text-ground-400 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-taupe-400", className)}
+        className={cn("py-6 text-center caption text-ground-400", 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-taupe-400">{heading}</p>}
+      {heading && <p className="px-3 pb-1 pt-0.5 label text-ground-400">{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-taupe-700 outline-none transition-colors",
-          "hover:bg-taupe-50 hover:text-taupe-900",
-          "focus:bg-taupe-50 focus:text-taupe-900",
+          "body text-ground-700 outline-none transition-colors",
+          "hover:bg-ground-50 hover:text-ground-900",
+          "focus:bg-ground-50 focus:text-ground-900",
           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-taupe-100", className)} {...props} />
+    <div ref={ref} className={cn("my-1 h-px bg-ground-100", className)} {...props} />
   ),
 );
 CommandSeparator.displayName = "CommandSeparator";
@@ -229,7 +229,7 @@ CommandSeparator.displayName = "CommandSeparator";
 function CommandShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
   return (
     <span
-      className={cn("ml-auto caption text-taupe-300 tracking-widest font-medium", className)}
+      className={cn("ml-auto caption text-ground-300 tracking-widest font-medium", className)}
       {...props}
     />
   );

package/src/components/context-menu.tsx

@@ -48,7 +48,7 @@ const ContextMenuItem = React.forwardRef<
       "body outline-none transition-colors",
       destructive
         ? "text-red-600 focus:bg-red-50 focus:text-red-700"
-        : "text-taupe-700 focus:bg-taupe-50 focus:text-taupe-900",
+        : "text-ground-700 focus:bg-ground-50 focus:text-ground-900",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className,
@@ -61,22 +61,21 @@ ContextMenuItem.displayName = "ContextMenuItem";
 const ContextMenuCheckboxItem = React.forwardRef<
   React.ComponentRef<typeof ContextMenu.CheckboxItem>,
   React.ComponentPropsWithoutRef<typeof ContextMenu.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
+>(({ className, children, ...props }, ref) => (
   <ContextMenu.CheckboxItem
     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-taupe-700 outline-none transition-colors",
-      "focus:bg-taupe-50 focus:text-taupe-900",
+      "body text-ground-700 outline-none transition-colors",
+      "focus:bg-ground-50 focus:text-ground-900",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
-    checked={checked}
     {...props}
   >
     <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <ContextMenu.ItemIndicator>
-        <Check size={13} className="text-taupe-900" />
+        <Check size={13} className="text-ground-900" />
       </ContextMenu.ItemIndicator>
     </span>
     {children}
@@ -92,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-taupe-700 outline-none transition-colors",
-      "focus:bg-taupe-50 focus:text-taupe-900",
+      "body text-ground-700 outline-none transition-colors",
+      "focus:bg-ground-50 focus:text-ground-900",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
@@ -101,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-taupe-900 text-taupe-900" />
+        <Circle size={8} className="fill-ground-900 text-ground-900" />
       </ContextMenu.ItemIndicator>
     </span>
     {children}
@@ -117,7 +116,7 @@ const ContextMenuLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <ContextMenu.Label
     ref={ref}
-    className={cn("px-2.5 py-1 label text-taupe-400", inset && "pl-8", className)}
+    className={cn("px-2.5 py-1 label text-ground-400", inset && "pl-8", className)}
     {...props}
   />
 ));
@@ -129,7 +128,7 @@ const ContextMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ContextMenu.Separator
     ref={ref}
-    className={cn("mx-1 my-1 h-px bg-taupe-100", className)}
+    className={cn("mx-1 my-1 h-px bg-ground-100", className)}
     {...props}
   />
 ));
@@ -145,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-taupe-700 outline-none transition-colors",
-      "focus:bg-taupe-50 focus:text-taupe-900 data-[state=open]:bg-taupe-50",
+      "body text-ground-700 outline-none transition-colors",
+      "focus:bg-ground-50 focus:text-ground-900 data-[state=open]:bg-ground-50",
       inset && "pl-8",
       className,
     )}
     {...props}
   >
     {children}
-    <ChevronRight size={14} className="ml-auto text-taupe-400" />
+    <ChevronRight size={14} className="ml-auto text-ground-400" />
   </ContextMenu.SubTrigger>
 ));
 ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
@@ -165,7 +164,7 @@ const ContextMenuSubContent = React.forwardRef<
   <ContextMenu.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] bg-white rounded-xl border border-taupe-100 shadow-natural p-1",
+      "z-50 min-w-[8rem] bg-white rounded-xl border border-ground-100 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 +177,7 @@ const ContextMenuSubContent = React.forwardRef<
 ContextMenuSubContent.displayName = "ContextMenuSubContent";
 
 function ContextMenuShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
-  return <span className={cn("ml-auto caption text-taupe-400", className)} {...props} />;
+  return <span className={cn("ml-auto caption text-ground-400", className)} {...props} />;
 }
 ContextMenuShortcut.displayName = "ContextMenuShortcut";
 

package/src/components/data-table.tsx

@@ -71,8 +71,8 @@ function DataTable<TData>({
                   {header.isPlaceholder ? null : header.column.getCanSort() ? (
                     <button
                       className={cn(
-                        "flex items-center gap-1 transition-colors hover:text-taupe-700",
-                        header.column.getIsSorted() && "text-taupe-900",
+                        "flex items-center gap-1 transition-colors hover:text-ground-700",
+                        header.column.getIsSorted() && "text-ground-900",
                       )}
                       onClick={header.column.getToggleSortingHandler()}
                     >
@@ -82,7 +82,7 @@ function DataTable<TData>({
                       ) : header.column.getIsSorted() === "desc" ? (
                         <ChevronDown size={12} className="text-brand-primary" />
                       ) : (
-                        <ChevronsUpDown size={12} className="text-taupe-300" />
+                        <ChevronsUpDown size={12} className="text-ground-300" />
                       )}
                     </button>
                   ) : (
@@ -106,7 +106,7 @@ function DataTable<TData>({
             ))
           ) : (
             <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center text-taupe-400">
+              <TableCell colSpan={columns.length} className="h-24 text-center text-ground-400">
                 No results.
               </TableCell>
             </TableRow>
@@ -115,12 +115,12 @@ function DataTable<TData>({
       </Table>
       {showPagination && (
         <div className="flex items-center justify-between">
-          <p className="caption text-taupe-400">
+          <p className="caption text-ground-400">
             {table.getFilteredRowModel().rows.length} result
             {table.getFilteredRowModel().rows.length !== 1 ? "s" : ""}
           </p>
           <div className="flex items-center gap-2">
-            <span className="caption text-taupe-400">
+            <span className="caption text-ground-400">
               Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
             </span>
             <Button

package/src/components/date-picker.tsx

@@ -15,7 +15,7 @@ const formatDate = (date: Date) =>
   });
 
 interface DatePickerProps {
-  value?: Date;
+  value?: Date | undefined;
   onChange?: (date: Date | undefined) => void;
   placeholder?: string;
   disabled?: boolean;
@@ -36,17 +36,22 @@ function DatePicker({
           variant="outline"
           className={cn(
             "w-[240px] justify-start gap-2 text-left font-normal",
-            !value && "text-taupe-400",
+            !value && "text-ground-400",
             className,
           )}
           disabled={disabled}
         >
-          <CalendarIcon size={14} className="text-taupe-400 shrink-0" />
+          <CalendarIcon size={14} className="text-ground-400 shrink-0" />
           {value ? formatDate(value) : <span>{placeholder}</span>}
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-auto p-0 shadow-elevated" align="start">
-        <Calendar mode="single" selected={value} onSelect={onChange} autoFocus />
+        <Calendar
+          mode="single"
+          {...(value !== undefined && { selected: value })}
+          {...(onChange !== undefined && { onSelect: onChange })}
+          autoFocus
+        />
       </PopoverContent>
     </Popover>
   );

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-taupe-900">{title}</p>}
-          {description && <p className="mt-1 caption text-taupe-400">{description}</p>}
+          {title && <p className="body font-semibold text-ground-900">{title}</p>}
+          {description && <p className="mt-1 caption text-ground-400">{description}</p>}
         </div>
       )}
 
-      <dl className={cn("border-t border-taupe-100", columns === 2 && "sm:grid sm:grid-cols-2")}>
+      <dl className={cn("border-t border-ground-100", 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-taupe-100",
-              columns === 1 && i !== items.length - 1 && "border-b border-taupe-100",
-              striped && i % 2 === 0 && "bg-taupe-50 -mx-4 px-4 rounded",
+                : "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",
             )}
           >
-            <dt className="caption font-semibold text-taupe-500 uppercase tracking-wide">
+            <dt className="caption font-semibold text-ground-500 uppercase tracking-wide">
               {item.term}
             </dt>
-            <dd className={cn("body text-taupe-900", columns === 1 ? "col-span-2" : "")}>
+            <dd className={cn("body text-ground-900", columns === 1 ? "col-span-2" : "")}>
               {item.action ? (
                 <div className="flex items-center justify-between gap-4">
                   <span>{item.details}</span>

package/src/components/dialog.tsx

@@ -45,7 +45,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <Dialog.Close className="absolute right-4 top-4 rounded-md p-1 text-taupe-400 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-taupe-900/20">
+      <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">
         <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-taupe-900", className)}
+    className={cn("body-lg font-semibold text-ground-900", 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-taupe-500", className)} {...props} />
+  <Dialog.Description ref={ref} className={cn("body text-ground-500", 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-taupe-950/40 backdrop-blur-[1px]", className)}
+    className={cn("fixed inset-0 z-50 bg-ground-950/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-taupe-100 bg-white",
+        "fixed inset-x-0 bottom-0 z-50 flex flex-col rounded-t-2xl border border-ground-100 bg-white",
         className,
       )}
       {...props}
     >
-      <div className="mx-auto mt-4 h-1 w-12 rounded-full bg-taupe-200" />
+      <div className="mx-auto mt-4 h-1 w-12 rounded-full bg-ground-200" />
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>
@@ -58,7 +58,7 @@ const DrawerTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Title
     ref={ref}
-    className={cn("subheading text-taupe-900", className)}
+    className={cn("subheading text-ground-900", className)}
     {...props}
   />
 ));
@@ -70,7 +70,7 @@ const DrawerDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Description
     ref={ref}
-    className={cn("body text-taupe-500", className)}
+    className={cn("body text-ground-500", className)}
     {...props}
   />
 ));

package/src/components/dropdown-menu.tsx

@@ -49,7 +49,7 @@ const DropdownMenuItem = React.forwardRef<
       "body outline-none transition-colors",
       destructive
         ? "text-red-600 focus:bg-red-50 focus:text-red-700"
-        : "text-taupe-700 focus:bg-taupe-50 focus:text-taupe-900",
+        : "text-ground-700 focus:bg-ground-50 focus:text-ground-900",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className,
@@ -62,22 +62,21 @@ DropdownMenuItem.displayName = "DropdownMenuItem";
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ComponentRef<typeof DropdownMenu.CheckboxItem>,
   React.ComponentPropsWithoutRef<typeof DropdownMenu.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
+>(({ className, children, ...props }, ref) => (
   <DropdownMenu.CheckboxItem
     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-taupe-700 outline-none transition-colors",
-      "focus:bg-taupe-50 focus:text-taupe-900",
+      "body text-ground-700 outline-none transition-colors",
+      "focus:bg-ground-50 focus:text-ground-900",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
-    checked={checked}
     {...props}
   >
     <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenu.ItemIndicator>
-        <Check size={13} className="text-taupe-900" />
+        <Check size={13} className="text-ground-900" />
       </DropdownMenu.ItemIndicator>
     </span>
     {children}
@@ -93,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-taupe-700 outline-none transition-colors",
-      "focus:bg-taupe-50 focus:text-taupe-900",
+      "body text-ground-700 outline-none transition-colors",
+      "focus:bg-ground-50 focus:text-ground-900",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
@@ -102,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-taupe-900 text-taupe-900" />
+        <Circle size={8} className="fill-ground-900 text-ground-900" />
       </DropdownMenu.ItemIndicator>
     </span>
     {children}
@@ -118,7 +117,7 @@ const DropdownMenuLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenu.Label
     ref={ref}
-    className={cn("px-2.5 py-1 label text-taupe-400", inset && "pl-8", className)}
+    className={cn("px-2.5 py-1 label text-ground-400", inset && "pl-8", className)}
     {...props}
   />
 ));
@@ -130,7 +129,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenu.Separator
     ref={ref}
-    className={cn("mx-1 my-1 h-px bg-taupe-100", className)}
+    className={cn("mx-1 my-1 h-px bg-ground-100", className)}
     {...props}
   />
 ));
@@ -146,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-taupe-700 outline-none transition-colors",
-      "focus:bg-taupe-50 focus:text-taupe-900 data-[state=open]:bg-taupe-50",
+      "body text-ground-700 outline-none transition-colors",
+      "focus:bg-ground-50 focus:text-ground-900 data-[state=open]:bg-ground-50",
       inset && "pl-8",
       className,
     )}
     {...props}
   >
     {children}
-    <ChevronRight size={14} className="ml-auto text-taupe-400" />
+    <ChevronRight size={14} className="ml-auto text-ground-400" />
   </DropdownMenu.SubTrigger>
 ));
 DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
@@ -166,7 +165,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenu.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] bg-white rounded-xl border border-taupe-100 shadow-natural p-1",
+      "z-50 min-w-[8rem] bg-white rounded-xl border border-ground-100 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",
@@ -179,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-taupe-400", className)} {...props} />;
+  return <span className={cn("ml-auto caption text-ground-400", 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-taupe-700">
+        <div className="flex size-12 items-center justify-center rounded-xl bg-brand-secondary/20 text-ground-700">
           {icon}
         </div>
       )}
       <div className="flex flex-col gap-1.5">
-        <p className="body font-semibold text-taupe-900">{title}</p>
-        {description && <p className="body max-w-xs text-taupe-400">{description}</p>}
+        <p className="body font-semibold text-ground-900">{title}</p>
+        {description && <p className="body max-w-xs text-ground-400">{description}</p>}
       </div>
       {action &&
         (action.href ? (