@hilum/ui 3.1.2 → 3.2.1

package/dist/tokens.css

@@ -205,6 +205,7 @@
   font-size: 3rem;
   font-weight: 400;
   line-height: 1.15;
+  text-wrap: balance;
 }
 
 @utility display {
@@ -212,6 +213,7 @@
   font-size: 2.25rem;
   font-weight: 400;
   line-height: 1.15;
+  text-wrap: balance;
 }
 
 @utility heading-xl {
@@ -219,6 +221,7 @@
   font-size: 1.875rem;
   font-weight: 400;
   line-height: 1.2;
+  text-wrap: balance;
 }
 
 @utility heading {
@@ -226,6 +229,7 @@
   font-size: 1.5rem;
   font-weight: 400;
   line-height: 1.2;
+  text-wrap: balance;
 }
 
 @utility subheading {
@@ -233,6 +237,7 @@
   font-size: 1.25rem;
   font-weight: 400;
   line-height: 1.4;
+  text-wrap: balance;
 }
 
 @utility body-lg {
@@ -240,6 +245,7 @@
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.625;
+  text-wrap: pretty;
 }
 
 @utility body {
@@ -247,6 +253,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.625;
+  text-wrap: pretty;
 }
 
 @utility body-sm {
@@ -254,6 +261,7 @@
   font-size: 0.75rem;
   font-weight: 500;
   line-height: 1.625;
+  text-wrap: pretty;
 }
 
 @utility caption {
@@ -261,6 +269,7 @@
   font-size: 0.75rem;
   font-weight: 400;
   line-height: 1.625;
+  text-wrap: pretty;
 }
 
 @utility caption-xs {
@@ -335,6 +344,7 @@
   border-color: var(--border);
 }
 
+html,
 body {
   background-color: var(--background);
   color: var(--foreground);

package/dist/tokens.d.ts

@@ -132,54 +132,63 @@ declare const tokens: {
             readonly size: "3rem";
             readonly weight: 400;
             readonly lineHeight: "1.15";
+            readonly textWrap: "balance";
         };
         readonly display: {
             readonly family: "display";
             readonly size: "2.25rem";
             readonly weight: 400;
             readonly lineHeight: "1.15";
+            readonly textWrap: "balance";
         };
         readonly "heading-xl": {
             readonly family: "display";
             readonly size: "1.875rem";
             readonly weight: 400;
             readonly lineHeight: "1.2";
+            readonly textWrap: "balance";
         };
         readonly heading: {
             readonly family: "display";
             readonly size: "1.5rem";
             readonly weight: 400;
             readonly lineHeight: "1.2";
+            readonly textWrap: "balance";
         };
         readonly subheading: {
             readonly family: "display";
             readonly size: "1.25rem";
             readonly weight: 400;
             readonly lineHeight: "1.4";
+            readonly textWrap: "balance";
         };
         readonly "body-lg": {
             readonly family: "sans";
             readonly size: "1rem";
             readonly weight: 400;
             readonly lineHeight: "1.625";
+            readonly textWrap: "pretty";
         };
         readonly body: {
             readonly family: "sans";
             readonly size: "0.875rem";
             readonly weight: 400;
             readonly lineHeight: "1.625";
+            readonly textWrap: "pretty";
         };
         readonly "body-sm": {
             readonly family: "sans";
             readonly size: "0.75rem";
             readonly weight: 500;
             readonly lineHeight: "1.625";
+            readonly textWrap: "pretty";
         };
         readonly caption: {
             readonly family: "sans";
             readonly size: "0.75rem";
             readonly weight: 400;
             readonly lineHeight: "1.625";
+            readonly textWrap: "pretty";
         };
         readonly "caption-xs": {
             readonly family: "sans";

package/dist/tokens.js

@@ -1,3 +1,3 @@
-export { tokens } from './chunk-5JX2YKJM.js';
+export { tokens } from './chunk-MAHPAP65.js';
 //# sourceMappingURL=tokens.js.map
 //# sourceMappingURL=tokens.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hilum/ui",
-  "version": "3.1.2",
+  "version": "3.2.1",
   "private": false,
   "description": "Hilum UI — design system primitives (Button, Input, Dialog, Combobox, …) + tokens + fonts + icons",
   "license": "MIT",

package/src/components/account-menu.tsx

@@ -1,11 +1,7 @@
 "use client";
 
 import * as React from "react";
-import {
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-} from "./dropdown-menu";
+import { DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from "./dropdown-menu";
 import { Avatar, AvatarFallback, AvatarImage } from "./avatar";
 import { cn } from "../lib/utils";
 
@@ -54,14 +50,11 @@ const AccountMenuHeader = React.forwardRef<HTMLDivElement, AccountMenuHeaderProp
 AccountMenuHeader.displayName = "AccountMenuHeader";
 
 const AccountMenuSection = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("p-2", className)} {...props} />
-  ),
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-2", className)} {...props} />,
 );
 AccountMenuSection.displayName = "AccountMenuSection";
 
-interface AccountMenuItemProps
-  extends React.ComponentPropsWithoutRef<typeof DropdownMenuItem> {
+interface AccountMenuItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuItem> {
   icon?: React.ReactNode;
   trailing?: React.ReactNode;
   description?: React.ReactNode;

package/src/components/action-panel.tsx

@@ -48,7 +48,7 @@ function ActionPanel({
           (link.href ? (
             <a
               href={link.href}
-              className="body font-medium text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-1"
+              className="inline-flex min-h-10 items-center gap-1 body font-medium text-muted-foreground transition-colors hover:text-foreground"
             >
               {link.label} <span aria-hidden>→</span>
             </a>
@@ -56,7 +56,7 @@ function ActionPanel({
             <button
               type="button"
               onClick={link.onClick}
-              className="body font-medium text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-1"
+              className="inline-flex min-h-10 items-center gap-1 body font-medium text-muted-foreground transition-colors hover:text-foreground"
             >
               {link.label} <span aria-hidden>→</span>
             </button>
@@ -80,17 +80,20 @@ function ActionPanel({
     <div
       className={cn(
         "rounded-xl border px-5 py-5",
-        variant === "muted"
-          ? "border-border bg-muted"
-          : "border-border bg-card shadow-natural",
+        variant === "muted" ? "border-border bg-muted" : "border-border bg-card shadow-natural",
         layout === "inline" && "flex items-center justify-between gap-6",
         className,
       )}
     >
       <div className={cn("min-w-0", layout === "inline" ? "flex-1" : "")}>
-        <p className="body font-semibold text-foreground">{title}</p>
+        <p className="body font-semibold text-foreground text-balance">{title}</p>
         {description && (
-          <p className={cn("body text-muted-foreground", layout === "stacked" ? "mt-1" : "")}>
+          <p
+            className={cn(
+              "body text-muted-foreground text-pretty",
+              layout === "stacked" ? "mt-1" : "",
+            )}
+          >
             {description}
           </p>
         )}

package/src/components/alert-dialog.tsx

@@ -65,7 +65,7 @@ const AlertDialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialog.Title
     ref={ref}
-    className={cn("body-lg font-semibold text-foreground", className)}
+    className={cn("body-lg font-semibold text-balance text-foreground", className)}
     {...props}
   />
 ));
@@ -75,7 +75,11 @@ const AlertDialogDescription = React.forwardRef<
   React.ComponentRef<typeof AlertDialog.Description>,
   React.ComponentPropsWithoutRef<typeof AlertDialog.Description>
 >(({ className, ...props }, ref) => (
-  <AlertDialog.Description ref={ref} className={cn("body text-muted-foreground", className)} {...props} />
+  <AlertDialog.Description
+    ref={ref}
+    className={cn("body text-pretty text-muted-foreground", className)}
+    {...props}
+  />
 ));
 AlertDialogDescription.displayName = "AlertDialogDescription";
 
@@ -86,8 +90,8 @@ const AlertDialogAction = React.forwardRef<
   <AlertDialog.Action
     ref={ref}
     className={cn(
-      "inline-flex h-9 items-center justify-center rounded-md px-4",
-      "body font-medium whitespace-nowrap transition-all duration-150",
+      "inline-flex h-10 items-center justify-center rounded-md px-4",
+      "body font-medium whitespace-nowrap transition-[background-color,box-shadow,color,opacity,scale] duration-150 active:scale-[0.96]",
       "bg-brand-primary text-background hover:bg-brand-primary/90 active:bg-brand-primary/80",
       "focus-visible:ring-2 focus-visible:ring-brand-primary/30 focus-visible:ring-offset-1 outline-none",
       "disabled:pointer-events-none disabled:opacity-50",
@@ -105,8 +109,8 @@ const AlertDialogCancel = React.forwardRef<
   <AlertDialog.Cancel
     ref={ref}
     className={cn(
-      "inline-flex h-9 items-center justify-center rounded-md px-4",
-      "body font-medium whitespace-nowrap transition-all duration-150",
+      "inline-flex h-10 items-center justify-center rounded-md px-4",
+      "body font-medium whitespace-nowrap transition-[background-color,box-shadow,color,opacity,scale] duration-150 active:scale-[0.96]",
       "bg-card text-muted-foreground shadow-natural hover:bg-muted rounded-xl",
       "focus-visible:ring-2 focus-visible:ring-brand-primary/30 focus-visible:ring-offset-1 outline-none",
       "disabled:pointer-events-none disabled:opacity-50",

package/src/components/alert.tsx

@@ -29,14 +29,18 @@ Alert.displayName = "Alert";
 
 const AlertTitle = React.forwardRef<HTMLParagraphElement, React.ComponentProps<"p">>(
   ({ className, ...props }, ref) => (
-    <p ref={ref} className={cn("mb-0.5 body font-semibold leading-tight", className)} {...props} />
+    <p
+      ref={ref}
+      className={cn("mb-0.5 body font-semibold leading-tight text-balance", className)}
+      {...props}
+    />
   ),
 );
 AlertTitle.displayName = "AlertTitle";
 
 const AlertDescription = React.forwardRef<HTMLParagraphElement, React.ComponentProps<"p">>(
   ({ className, ...props }, ref) => (
-    <p ref={ref} className={cn("body opacity-90", className)} {...props} />
+    <p ref={ref} className={cn("body text-pretty opacity-90", className)} {...props} />
   ),
 );
 AlertDescription.displayName = "AlertDescription";

package/src/components/avatar-stack.tsx

@@ -38,7 +38,11 @@ function AvatarStack({ avatars, max, size = "md", className }: AvatarStackProps)
           )}
         >
           {avatar.src ? (
-            <img src={avatar.src} alt={avatar.name} className="size-full object-cover" />
+            <img
+              src={avatar.src}
+              alt={avatar.name}
+              className="size-full object-cover outline outline-1 -outline-offset-1 outline-black/10 dark:outline-white/10"
+            />
           ) : (
             <span
               className={cn(
@@ -58,6 +62,7 @@ function AvatarStack({ avatars, max, size = "md", className }: AvatarStackProps)
             "relative inline-flex shrink-0 items-center justify-center rounded-full ring-background bg-muted font-medium text-muted-foreground",
             s.wrapper,
             s.text,
+            "tabular-nums",
           )}
         >
           +{overflow}

package/src/components/avatar.tsx

@@ -39,7 +39,10 @@ const AvatarImage = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Image
     ref={ref}
-    className={cn("aspect-square h-full w-full object-cover", className)}
+    className={cn(
+      "aspect-square h-full w-full object-cover outline outline-1 -outline-offset-1 outline-black/10 dark:outline-white/10",
+      className,
+    )}
     {...props}
   />
 ));

package/src/components/breadcrumb.tsx

@@ -46,7 +46,12 @@ const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentProps<"s
 BreadcrumbPage.displayName = "BreadcrumbPage";
 
 const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
-  <li role="presentation" aria-hidden="true" className={cn("text-muted-foreground", className)} {...props}>
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("text-muted-foreground", className)}
+    {...props}
+  >
     {children ?? <ChevronRight size={14} />}
   </li>
 );

package/src/components/button-group.tsx

@@ -10,7 +10,7 @@ function ButtonGroup({ children, className }: ButtonGroupProps) {
   return (
     <div
       className={cn(
-        "inline-flex divide-x divide-border overflow-hidden rounded-lg border border-border bg-card shadow-natural",
+        "inline-flex items-center gap-0.5 rounded-2xl bg-muted p-1",
         className,
       )}
     >
@@ -28,11 +28,12 @@ function ButtonGroupItem({ active, className, children, ...props }: ButtonGroupI
     <button
       type="button"
       className={cn(
-        "relative inline-flex items-center gap-1.5 px-3.5 py-2 body font-medium transition-colors",
-        "focus:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-inset",
+        "relative inline-flex min-h-10 items-center justify-center gap-1.5 rounded-xl px-3.5 py-2 body font-medium",
+        "transition-[background-color,box-shadow,color,opacity,scale] active:scale-[0.96]",
+        "focus:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30",
         active
-          ? "bg-foreground text-background"
-          : "text-muted-foreground hover:bg-muted hover:text-foreground",
+          ? "bg-card text-foreground shadow-natural"
+          : "text-muted-foreground hover:text-foreground",
         className,
       )}
       {...props}

package/src/components/button.tsx

@@ -7,7 +7,7 @@ const buttonVariants = cva(
   [
     "inline-flex shrink-0 items-center justify-center gap-2",
     "body font-medium whitespace-nowrap",
-    "transition-all duration-150 outline-none",
+    "transition-[background-color,border-color,box-shadow,color,opacity,scale] duration-150 outline-none active:scale-[0.96]",
     "focus-visible:ring-2 focus-visible:ring-brand-primary/30 focus-visible:ring-offset-1",
     "disabled:pointer-events-none disabled:opacity-50",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
@@ -15,8 +15,10 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-brand-primary text-background hover:bg-brand-primary/90 active:bg-brand-primary/80",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80",
+        default:
+          "bg-brand-primary text-background hover:bg-brand-primary/90 active:bg-brand-primary/80",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80",
         outline: "bg-card text-muted-foreground shadow-natural hover:bg-muted rounded-xl",
         secondary: "bg-muted text-muted-foreground hover:bg-muted",
         brand:
@@ -25,14 +27,14 @@ const buttonVariants = cva(
         link: "text-foreground underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-9 px-4 py-2 rounded-md",
+        default: "h-10 px-4 py-2 rounded-md",
         xs: "h-6 gap-1 px-2 caption rounded-md",
         sm: "h-8 gap-1.5 px-3 rounded-md",
-        lg: "h-10 px-6 rounded-md",
-        icon: "size-9 rounded-md",
+        lg: "h-11 px-6 rounded-md",
+        icon: "size-10 rounded-md",
         "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
         "icon-sm": "size-8 rounded-md",
-        "icon-lg": "size-10 rounded-md",
+        "icon-lg": "size-11 rounded-md",
       },
     },
     defaultVariants: {

package/src/components/calendar.tsx

@@ -19,20 +19,20 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         caption_label: "body font-semibold text-foreground",
         nav: "flex items-center justify-between absolute inset-x-0 top-1",
         button_previous: cn(
-          "absolute left-0 h-7 w-7 flex items-center justify-center rounded-md",
+          "absolute left-0 flex size-10 items-center justify-center rounded-md",
           "text-muted-foreground hover:bg-muted hover:text-muted-foreground transition-colors",
         ),
         button_next: cn(
-          "absolute right-0 h-7 w-7 flex items-center justify-center rounded-md",
+          "absolute right-0 flex size-10 items-center justify-center rounded-md",
           "text-muted-foreground hover:bg-muted hover:text-muted-foreground transition-colors",
         ),
         month_grid: "w-full border-collapse mt-1",
         weekdays: "flex",
-        weekday: "w-9 h-9 flex items-center justify-center label text-muted-foreground font-normal",
+        weekday: "flex size-10 items-center justify-center label text-muted-foreground font-normal",
         week: "flex w-full mt-1",
         day: "relative p-0 text-center",
         day_button: cn(
-          "h-9 w-9 flex items-center justify-center rounded-full body font-normal",
+          "flex size-10 items-center justify-center rounded-full body font-normal",
           "text-foreground hover:bg-muted transition-colors",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
         ),
@@ -41,7 +41,8 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         today: "[&>button]:font-semibold [&>button]:text-brand-primary",
         outside: "opacity-40 [&>button]:text-muted-foreground",
         disabled: "opacity-30 [&>button]:cursor-not-allowed",
-        range_start: "[&>button]:bg-brand-primary [&>button]:text-background [&>button]:rounded-full",
+        range_start:
+          "[&>button]:bg-brand-primary [&>button]:text-background [&>button]:rounded-full",
         range_end: "[&>button]:bg-brand-primary [&>button]:text-background [&>button]:rounded-full",
         range_middle:
           "[&>button]:bg-brand-primary/15 [&>button]:text-foreground [&>button]:rounded-none",

package/src/components/card-heading.tsx

@@ -28,8 +28,10 @@ function CardHeading({ title, description, actions, children, className }: CardH
       <div className="flex min-w-0 items-center gap-3">
         {children}
         <div className="min-w-0">
-          <p className="body font-semibold text-foreground truncate">{title}</p>
-          {description && <p className="caption text-muted-foreground mt-0.5">{description}</p>}
+          <p className="body truncate font-semibold text-balance text-foreground">{title}</p>
+          {description && (
+            <p className="caption mt-0.5 text-pretty text-muted-foreground">{description}</p>
+          )}
         </div>
       </div>
 

package/src/components/card.tsx

@@ -54,7 +54,7 @@ const CardTitle = React.forwardRef<HTMLHeadingElement, React.ComponentProps<"h3"
     <h3
       ref={ref}
       data-slot="card-title"
-      className={cn("subheading text-foreground", className)}
+      className={cn("subheading text-balance text-foreground", className)}
       {...props}
     />
   ),
@@ -66,7 +66,7 @@ const CardDescription = React.forwardRef<HTMLParagraphElement, React.ComponentPr
     <p
       ref={ref}
       data-slot="card-description"
-      className={cn("caption text-muted-foreground", className)}
+      className={cn("caption text-pretty text-muted-foreground", className)}
       {...props}
     />
   ),

package/src/components/carousel.tsx

@@ -167,7 +167,7 @@ function CarouselPrevious({
       variant={variant}
       size={size}
       className={cn(
-        "absolute h-9 w-9 rounded-full",
+        "absolute size-10 rounded-full",
         orientation === "vertical"
           ? "-top-12 left-1/2 -translate-x-1/2 rotate-90"
           : "-left-12 top-1/2 -translate-y-1/2",
@@ -196,7 +196,7 @@ function CarouselNext({
       variant={variant}
       size={size}
       className={cn(
-        "absolute h-9 w-9 rounded-full",
+        "absolute size-10 rounded-full",
         orientation === "vertical"
           ? "-bottom-12 left-1/2 -translate-x-1/2 rotate-90"
           : "-right-12 top-1/2 -translate-y-1/2",

package/src/components/checkbox.tsx

@@ -12,7 +12,8 @@ const CheckboxRoot = React.forwardRef<
   <Checkbox.Root
     ref={ref}
     className={cn(
-      "peer size-4 shrink-0 rounded border border-border bg-card transition-colors",
+      "peer relative size-4 shrink-0 rounded border border-border bg-card transition-colors",
+      "after:absolute after:left-1/2 after:top-1/2 after:size-10 after:-translate-x-1/2 after:-translate-y-1/2",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
       "disabled:cursor-not-allowed disabled:opacity-50",
       "data-[state=checked]:bg-brand-primary data-[state=checked]:border-brand-primary",

package/src/components/color-picker.tsx

@@ -45,7 +45,7 @@ function ColorPicker({
           disabled={disabled}
           aria-label={ariaLabel}
           className={cn(
-            "inline-flex h-8 w-8 items-center justify-center rounded-md border border-border bg-card",
+            "inline-flex size-10 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",
@@ -84,18 +84,18 @@ function ColorPicker({
               onKeyDown={(e) => {
                 if (e.key === "Enter") commit((e.target as HTMLInputElement).value);
               }}
-              className="flex-1 h-7 rounded-md border border-border bg-card px-2 caption text-foreground focus:outline-none focus:border-brand-primary"
+              className="h-10 flex-1 rounded-md border border-border bg-card px-2 caption text-foreground focus:outline-none focus:border-brand-primary"
             />
           </div>
           {presets && presets.length > 0 && (
-            <div className="mt-3 grid grid-cols-8 gap-1.5">
+            <div className="mt-3 grid grid-cols-4 gap-2">
               {presets.map((p) => (
                 <button
                   key={p}
                   type="button"
                   onClick={() => onChange(p)}
                   aria-label={p}
-                  className="h-5 w-5 rounded-sm border border-black/10 transition-transform hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30"
+                  className="size-10 rounded-md border border-black/10 transition-transform hover:scale-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30"
                   style={{ backgroundColor: p }}
                 />
               ))}

package/src/components/combobox.tsx

@@ -84,14 +84,20 @@ function Combobox({
     }
     if (e.key === "ArrowDown") {
       e.preventDefault();
-      if (!open) { setOpen(true); return; }
+      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; }
+      if (!open) {
+        setOpen(true);
+        return;
+      }
       const target = activeIndex >= 0 ? filtered[activeIndex] : filtered[0];
       if (target) selectOption(target);
     } else if (e.key === "Tab") {
@@ -121,10 +127,12 @@ function Combobox({
           aria-expanded={open}
           aria-haspopup="listbox"
           aria-controls={open ? listboxId : undefined}
-          aria-activedescendant={open && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined}
+          aria-activedescendant={
+            open && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined
+          }
           aria-autocomplete="list"
           className={cn(
-            "flex h-9 w-full rounded-lg border border-border bg-card pr-8 body text-foreground",
+            "flex h-10 w-full rounded-lg border border-border bg-card pr-10 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",
@@ -150,7 +158,7 @@ function Combobox({
           type="button"
           tabIndex={-1}
           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"
+          className="absolute inset-y-0 right-0 flex w-10 items-center justify-center text-muted-foreground hover:text-muted-foreground transition-colors"
           onClick={() => {
             if (open) {
               closeDropdown();
@@ -181,7 +189,7 @@ function Combobox({
                     role="option"
                     aria-selected={isSelected}
                     className={cn(
-                      "flex cursor-pointer select-none items-center gap-2.5 px-3 py-2 body transition-colors",
+                      "flex min-h-10 cursor-pointer select-none items-center gap-2.5 px-3 py-2 body transition-colors",
                       isSelected
                         ? "bg-brand-primary text-background"
                         : isActive
@@ -197,7 +205,9 @@ function Combobox({
                       <div
                         className={cn(
                           "flex size-6 shrink-0 items-center justify-center rounded-full caption-xs font-semibold",
-                          isSelected ? "bg-card/20 text-background" : "bg-muted text-muted-foreground",
+                          isSelected
+                            ? "bg-card/20 text-background"
+                            : "bg-muted text-muted-foreground",
                         )}
                       >
                         {option.avatar}

package/src/components/command-palette.tsx

@@ -107,7 +107,7 @@ function CommandPalette({
                     <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-muted focus-visible:bg-muted focus-visible:outline-none"
+                      className="flex min-h-10 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 && (
@@ -118,7 +118,9 @@ function CommandPalette({
                       <div className="min-w-0 flex-1">
                         <p className="font-medium text-foreground truncate">{item.label}</p>
                         {item.description && (
-                          <p className="caption text-muted-foreground truncate">{item.description}</p>
+                          <p className="caption text-muted-foreground truncate">
+                            {item.description}
+                          </p>
                         )}
                       </div>
                       <ArrowRight size={13} className="shrink-0 text-muted-foreground" />