@hilum/ui 3.1.1 → 3.2.0

package/src/components/context-menu.tsx

@@ -44,7 +44,7 @@ const ContextMenuItem = React.forwardRef<
   <ContextMenu.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2",
       "body outline-none transition-colors",
       destructive
         ? "text-destructive focus:bg-destructive/10 focus:text-destructive"
@@ -65,7 +65,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
   <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",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md py-2 pl-8 pr-2.5",
       "body text-muted-foreground outline-none transition-colors",
       "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -90,7 +90,7 @@ const ContextMenuRadioItem = React.forwardRef<
   <ContextMenu.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md py-2 pl-8 pr-2.5",
       "body text-muted-foreground outline-none transition-colors",
       "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -143,7 +143,7 @@ const ContextMenuSubTrigger = React.forwardRef<
   <ContextMenu.SubTrigger
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2",
       "body text-muted-foreground outline-none transition-colors",
       "focus:bg-muted focus:text-foreground data-[state=open]:bg-muted",
       inset && "pl-8",

package/src/components/data-table.tsx

@@ -82,7 +82,7 @@ function DataTable<TData>({
                   {header.isPlaceholder ? null : header.column.getCanSort() ? (
                     <button
                       className={cn(
-                        "flex items-center gap-1 transition-colors hover:text-muted-foreground",
+                        "flex min-h-10 items-center gap-1 transition-colors hover:text-muted-foreground",
                         header.column.getIsSorted() && "text-foreground",
                       )}
                       onClick={header.column.getToggleSortingHandler()}
@@ -117,7 +117,10 @@ function DataTable<TData>({
             ))
           ) : (
             <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center text-muted-foreground">
+              <TableCell
+                colSpan={columns.length}
+                className="h-24 text-center text-muted-foreground"
+              >
                 No results.
               </TableCell>
             </TableRow>
@@ -126,12 +129,12 @@ function DataTable<TData>({
       </Table>
       {showPagination && (
         <div className="flex items-center justify-between">
-          <p className="caption text-muted-foreground">
+          <p className="caption tabular-nums 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-muted-foreground">
+            <span className="caption tabular-nums text-muted-foreground">
               Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
             </span>
             <Button

package/src/components/description-list.tsx

@@ -28,8 +28,10 @@ function DescriptionList({
     <div className={className}>
       {(title || description) && (
         <div className="mb-4">
-          {title && <p className="body font-semibold text-foreground">{title}</p>}
-          {description && <p className="mt-1 caption text-muted-foreground">{description}</p>}
+          {title && <p className="body font-semibold text-balance text-foreground">{title}</p>}
+          {description && (
+            <p className="mt-1 caption text-pretty text-muted-foreground">{description}</p>
+          )}
         </div>
       )}
 

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-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring/20">
+      <Dialog.Close className="absolute right-3 top-3 flex size-10 items-center justify-center rounded-md text-muted-foreground opacity-70 transition-[opacity,scale] hover:opacity-100 active:scale-[0.96] 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-foreground", className)}
+    className={cn("body-lg font-semibold text-balance text-foreground", className)}
     {...props}
   />
 ));
@@ -80,7 +80,11 @@ 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-muted-foreground", className)} {...props} />
+  <Dialog.Description
+    ref={ref}
+    className={cn("body text-pretty text-muted-foreground", className)}
+    {...props}
+  />
 ));
 DialogDescription.displayName = "DialogDescription";
 

package/src/components/dropdown-menu.tsx

@@ -45,7 +45,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenu.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2",
       "body outline-none transition-colors",
       destructive
         ? "text-destructive focus:bg-destructive/10 focus:text-destructive"
@@ -66,7 +66,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <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",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md py-2 pl-8 pr-2.5",
       "body text-muted-foreground outline-none transition-colors",
       "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -91,7 +91,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenu.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md py-2 pl-8 pr-2.5",
       "body text-muted-foreground outline-none transition-colors",
       "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -144,7 +144,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenu.SubTrigger
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2",
       "body text-muted-foreground outline-none transition-colors",
       "focus:bg-muted focus:text-foreground data-[state=open]:bg-muted",
       inset && "pl-8",

package/src/components/empty-state.tsx

@@ -23,8 +23,10 @@ function EmptyState({ icon, title, description, action, className }: EmptyStateP
         </div>
       )}
       <div className="flex flex-col gap-1.5">
-        <p className="body font-semibold text-foreground">{title}</p>
-        {description && <p className="body max-w-xs text-muted-foreground">{description}</p>}
+        <p className="body text-balance font-semibold text-foreground">{title}</p>
+        {description && (
+          <p className="body max-w-xs text-pretty text-muted-foreground">{description}</p>
+        )}
       </div>
       {action &&
         (action.href ? (

package/src/components/field.tsx

@@ -34,15 +34,23 @@ 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-destructive" aria-hidden="true">*</span>}
+          {required && (
+            <span className="ml-0.5 text-destructive" aria-hidden="true">
+              *
+            </span>
+          )}
         </Label>
         {cornerHint && <span className="caption text-muted-foreground">{cornerHint}</span>}
       </div>
       {children}
       {error ? (
-        <p id={descriptionId} role="alert" className="caption text-destructive">{error}</p>
+        <p id={descriptionId} role="alert" className="caption text-destructive">
+          {error}
+        </p>
       ) : hint ? (
-        <p id={descriptionId} className="caption text-muted-foreground">{hint}</p>
+        <p id={descriptionId} className="caption text-muted-foreground">
+          {hint}
+        </p>
       ) : null}
     </div>
   );

package/src/components/grid-list.tsx

@@ -64,8 +64,8 @@ function GridListCard({
       )}
     >
       {accent && <div className="mb-2">{accent}</div>}
-      <p className="body font-semibold text-foreground">{title}</p>
-      {description && <p className="caption text-muted-foreground">{description}</p>}
+      <p className="body font-semibold text-foreground text-balance">{title}</p>
+      {description && <p className="caption text-muted-foreground text-pretty">{description}</p>}
       {(meta || trailing) && (
         <div className="mt-auto flex items-center justify-between pt-3">
           {meta && <span className="caption text-muted-foreground">{meta}</span>}
@@ -132,7 +132,7 @@ function GridListAccentCard({
       </div>
       <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-foreground truncate">{title}</p>
+          <p className="body font-semibold text-foreground truncate text-balance">{title}</p>
           {meta && <p className="caption text-muted-foreground">{meta}</p>}
         </div>
         {trailing && <div className="shrink-0 pl-2">{trailing}</div>}

package/src/components/input-group.tsx

@@ -39,7 +39,7 @@ const InputGroup = React.forwardRef<HTMLInputElement, InputGroupProps>(
     const hasTrailing = trailingAddon || hasInsetTrailing || trailingButton;
 
     const baseInput = cn(
-      "flex h-9 w-full border bg-card body text-foreground placeholder:text-muted-foreground",
+      "flex h-10 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-destructive focus-visible:ring-destructive/20 focus-visible:border-destructive"
@@ -99,7 +99,7 @@ const InputGroup = React.forwardRef<HTMLInputElement, InputGroupProps>(
                     : hasInsetTrailing
                       ? cn(radius, "pl-3 pr-9")
                       : cn(radius, "px-3"),
-              trailingAction && "pr-14",
+              trailingAction && "pr-16",
               className,
             )}
             {...props}
@@ -118,7 +118,7 @@ const InputGroup = React.forwardRef<HTMLInputElement, InputGroupProps>(
           {trailingAction && (
             <div
               className={cn(
-                "absolute inset-y-0 right-2 flex items-center",
+                "absolute right-2 top-1/2 flex -translate-y-1/2 items-center",
                 trailingActionClassName,
               )}
             >

package/src/components/input-number.tsx

@@ -101,7 +101,10 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
           {...rest}
         />
         {unit && (
-          <span aria-hidden className="caption-xs text-muted-foreground 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>
         )}

package/src/components/input-otp.tsx

@@ -39,7 +39,7 @@ const InputOTPSlot = React.forwardRef<
         "relative flex h-12 w-11 items-center justify-center",
         "border-y border-r border-border body font-medium text-foreground",
         "first:rounded-l-xl first:border-l last:rounded-r-xl",
-        "transition-all",
+        "transition-[border-color,box-shadow]",
         isActive && "z-10 ring-2 ring-brand-primary/40 border-brand-primary",
         className,
       )}

package/src/components/input.tsx

@@ -7,7 +7,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "flex h-9 w-full rounded-md border border-border bg-card px-3 py-1",
+        "flex h-10 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",

package/src/components/menubar.tsx

@@ -12,7 +12,7 @@ const MenubarRoot = React.forwardRef<
   <Menubar.Root
     ref={ref}
     className={cn(
-      "flex h-9 items-center gap-0.5 rounded-lg border border-border bg-card px-1",
+      "flex min-h-10 items-center gap-0.5 rounded-lg border border-border bg-card px-1",
       className,
     )}
     {...props}
@@ -35,7 +35,7 @@ const MenubarTrigger = React.forwardRef<
   <Menubar.Trigger
     ref={ref}
     className={cn(
-      "flex cursor-default items-center rounded-md px-3 py-1 body font-medium text-muted-foreground select-none outline-none",
+      "flex min-h-8 cursor-default items-center rounded-md px-3 py-1 body font-medium text-muted-foreground select-none outline-none",
       "hover:bg-muted",
       "data-[state=open]:bg-muted data-[state=open]:text-foreground",
       "focus:bg-muted",
@@ -80,7 +80,7 @@ const MenubarItem = React.forwardRef<
   <Menubar.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2",
       "body text-muted-foreground outline-none transition-colors",
       "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -99,7 +99,7 @@ const MenubarCheckboxItem = React.forwardRef<
   <Menubar.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",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md py-2 pl-8 pr-2.5",
       "body text-muted-foreground outline-none transition-colors",
       "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -124,7 +124,7 @@ const MenubarRadioItem = React.forwardRef<
   <Menubar.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md py-2 pl-8 pr-2.5",
       "body text-muted-foreground outline-none transition-colors",
       "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -160,11 +160,7 @@ const MenubarSeparator = React.forwardRef<
   React.ComponentRef<typeof Menubar.Separator>,
   React.ComponentPropsWithoutRef<typeof Menubar.Separator>
 >(({ className, ...props }, ref) => (
-  <Menubar.Separator
-    ref={ref}
-    className={cn("mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
+  <Menubar.Separator ref={ref} className={cn("mx-1 my-1 h-px bg-muted", className)} {...props} />
 ));
 MenubarSeparator.displayName = "MenubarSeparator";
 
@@ -177,7 +173,7 @@ const MenubarSubTrigger = React.forwardRef<
   <Menubar.SubTrigger
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2",
       "body text-muted-foreground outline-none transition-colors",
       "focus:bg-muted focus:text-foreground data-[state=open]:bg-muted",
       inset && "pl-8",

package/src/components/native-select.tsx

@@ -10,7 +10,7 @@ const NativeSelect = React.forwardRef<
     <select
       ref={ref}
       className={cn(
-        "peer h-9 w-full appearance-none rounded-lg border border-border bg-card pl-3 pr-8",
+        "peer h-10 w-full appearance-none rounded-lg border border-border bg-card pl-3 pr-8",
         "body text-foreground",
         "focus:outline-none focus:ring-2 focus:ring-ring/30 focus:border-border",
         "disabled:cursor-not-allowed disabled:opacity-50",

package/src/components/navigation-menu.tsx

@@ -40,7 +40,7 @@ const NavigationMenuTrigger = React.forwardRef<
   <NavigationMenu.Trigger
     ref={ref}
     className={cn(
-      "group inline-flex h-9 w-max items-center justify-center gap-1 rounded-md px-3 py-2",
+      "group inline-flex h-10 w-max items-center justify-center gap-1 rounded-md px-3 py-2",
       "body font-medium text-muted-foreground",
       "hover:bg-muted hover:text-foreground",
       "data-[active]:bg-muted data-[state=open]:bg-muted",
@@ -86,7 +86,7 @@ const NavigationMenuLink = React.forwardRef<
   <NavigationMenu.Link
     ref={ref}
     className={cn(
-      "block select-none rounded-md px-3 py-2 body text-muted-foreground",
+      "block min-h-10 select-none rounded-md px-3 py-2 body text-muted-foreground",
       "hover:bg-muted hover:text-foreground",
       "outline-none transition-colors",
       className,
@@ -137,7 +137,7 @@ NavigationMenuIndicator.displayName = "NavigationMenuIndicator";
 
 function navigationMenuTriggerStyle() {
   return cn(
-    "group inline-flex h-9 w-max items-center justify-center gap-1 rounded-md px-3 py-2",
+    "group inline-flex h-10 w-max items-center justify-center gap-1 rounded-md px-3 py-2",
     "body font-medium text-muted-foreground",
     "hover:bg-muted hover:text-foreground",
     "data-[active]:bg-muted data-[state=open]:bg-muted",

package/src/components/notification.tsx

@@ -62,8 +62,10 @@ function Notification({
 
           {/* Body */}
           <div className="min-w-0 flex-1">
-            <p className="body font-semibold text-foreground">{title}</p>
-            {description && <p className="mt-0.5 body text-muted-foreground">{description}</p>}
+            <p className="body font-semibold text-foreground text-balance">{title}</p>
+            {description && (
+              <p className="mt-0.5 body text-muted-foreground text-pretty">{description}</p>
+            )}
 
             {/* Actions */}
             {actions && actions.length > 0 && (
@@ -74,7 +76,7 @@ function Notification({
                     type="button"
                     onClick={action.onClick}
                     className={cn(
-                      "body font-semibold transition-colors",
+                      "min-h-10 body font-semibold transition-colors",
                       action.variant === "ghost"
                         ? "text-muted-foreground hover:text-muted-foreground"
                         : "text-foreground hover:text-muted-foreground",
@@ -93,7 +95,7 @@ function Notification({
               <button
                 type="button"
                 onClick={onClose}
-                className="rounded-md text-muted-foreground hover:text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
+                className="flex size-10 items-center justify-center rounded-md text-muted-foreground transition-[color,scale] hover:text-muted-foreground active:scale-[0.96] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
               >
                 <span className="sr-only">Close</span>
                 <X size={16} />

package/src/components/page-heading.tsx

@@ -68,7 +68,7 @@ function PageHeading({
       <div className="flex flex-wrap items-start justify-between gap-4">
         <div className="min-w-0 flex-1">
           <div className="flex items-center gap-3">
-            <h1 className="display text-foreground truncate">{title}</h1>
+            <h1 className="display text-balance text-foreground truncate">{title}</h1>
             {badge &&
               (typeof badge === "string" ? (
                 <Badge variant="secondary">{badge}</Badge>
@@ -76,7 +76,9 @@ function PageHeading({
                 <Badge variant={badge.variant ?? "secondary"}>{badge.label}</Badge>
               ))}
           </div>
-          {description && <p className="mt-1.5 body text-muted-foreground max-w-2xl">{description}</p>}
+          {description && (
+            <p className="mt-1.5 body max-w-2xl text-pretty text-muted-foreground">{description}</p>
+          )}
 
           {/* Meta */}
           {meta && meta.length > 0 && (

package/src/components/pagination.tsx

@@ -32,7 +32,7 @@ const PaginationLink = ({ className, isActive, ...props }: PaginationLinkProps)
     aria-current={isActive ? "page" : undefined}
     className={cn(
       buttonVariants({ variant: isActive ? "default" : "ghost", size: "icon" }),
-      "size-8 rounded-md body",
+      "size-10 rounded-md body",
       className,
     )}
     {...props}
@@ -70,7 +70,7 @@ PaginationNext.displayName = "PaginationNext";
 const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
   <span
     aria-hidden
-    className={cn("flex size-8 items-center justify-center text-muted-foreground", className)}
+    className={cn("flex size-10 items-center justify-center text-muted-foreground", className)}
     {...props}
   >
     <MoreHorizontal size={14} />

package/src/components/progress.tsx

@@ -13,7 +13,7 @@ const ProgressRoot = React.forwardRef<
     {...props}
   >
     <Progress.Indicator
-      className="h-full w-full flex-1 bg-brand-primary transition-all"
+      className="h-full w-full flex-1 bg-brand-primary transition-transform"
       style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
     />
   </Progress.Root>

package/src/components/radio-card.tsx

@@ -42,7 +42,8 @@ function RadioCards({ options, value, onValueChange, columns = 3, className }: R
             disabled={option.disabled}
             onClick={() => !option.disabled && onValueChange?.(option.value)}
             className={cn(
-              "relative flex cursor-pointer flex-col gap-1 rounded-xl border p-4 text-left transition-all",
+              "relative flex cursor-pointer flex-col gap-1 rounded-xl border p-4 text-left transition-[background-color,border-color,box-shadow,opacity,scale]",
+              "active:scale-[0.96]",
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
               "disabled:cursor-not-allowed disabled:opacity-50",
               isSelected
@@ -63,22 +64,22 @@ function RadioCards({ options, value, onValueChange, columns = 3, className }: R
                 {option.icon && <div className="mb-2 text-muted-foreground">{option.icon}</div>}
                 <p
                   className={cn(
-                    "body font-semibold",
+                    "body font-semibold text-pretty",
                     isSelected ? "text-foreground" : "text-muted-foreground",
                   )}
                 >
                   {option.label}
                 </p>
                 {option.description && (
-                  <p className="mt-0.5 caption text-muted-foreground">{option.description}</p>
+                  <p className="mt-0.5 caption text-pretty text-muted-foreground">
+                    {option.description}
+                  </p>
                 )}
               </div>
               <div
                 className={cn(
                   "flex size-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
-                  isSelected
-                    ? "border-brand-primary bg-brand-primary"
-                    : "border-border bg-card",
+                  isSelected ? "border-brand-primary bg-brand-primary" : "border-border bg-card",
                 )}
               >
                 {isSelected && <Check size={10} className="text-background" strokeWidth={3} />}

package/src/components/radio-group.tsx

@@ -19,7 +19,8 @@ const RadioGroupItem = React.forwardRef<
   <RadioGroup.Item
     ref={ref}
     className={cn(
-      "aspect-square size-4 rounded-full border border-border text-foreground",
+      "relative aspect-square size-4 rounded-full border border-border text-foreground",
+      "after:absolute after:left-1/2 after:top-1/2 after:size-10 after:-translate-x-1/2 after:-translate-y-1/2",
       "shadow-none transition-colors",
       "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/20",
       "disabled:cursor-not-allowed disabled:opacity-50",

package/src/components/section-heading.tsx

@@ -33,8 +33,10 @@ function SectionHeading({
       )}
     >
       <div className="min-w-0 flex-1">
-        <h2 className="heading text-foreground truncate">{title}</h2>
-        {description && <p className="mt-1 body text-muted-foreground">{description}</p>}
+        <h2 className="heading text-balance text-foreground truncate">{title}</h2>
+        {description && (
+          <p className="mt-1 body text-pretty text-muted-foreground">{description}</p>
+        )}
       </div>
 
       {actions && actions.length > 0 && (

package/src/components/select.tsx

@@ -16,7 +16,7 @@ const SelectTrigger = React.forwardRef<
   <Select.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between rounded-xl bg-card px-3 py-2",
+      "flex h-10 w-full items-center justify-between rounded-xl bg-card px-3 py-2",
       "body text-foreground shadow-natural",
       "focus:outline-none focus:ring-2 focus:ring-ring/20",
       "disabled:opacity-50 disabled:cursor-not-allowed",
@@ -80,7 +80,7 @@ const SelectItem = React.forwardRef<
   <Select.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-md px-2.5 py-1.5",
+      "relative flex min-h-10 w-full cursor-default select-none items-center rounded-md px-2.5 py-2",
       "body text-muted-foreground outline-none",
       "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",

package/src/components/sheet.tsx

@@ -31,7 +31,7 @@ const sheetContentVariants = cva(
   [
     "fixed z-50 bg-card shadow-elevated p-6",
     "data-[state=open]:animate-in data-[state=closed]:animate-out",
-    "transition ease-in-out duration-300",
+    "transition-transform ease-in-out duration-300",
   ],
   {
     variants: {
@@ -65,7 +65,7 @@ const SheetContent = React.forwardRef<React.ComponentRef<typeof Dialog.Content>,
         {...props}
       >
         {children}
-        <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">
+        <Dialog.Close className="absolute right-3 top-3 flex size-10 items-center justify-center rounded-md text-muted-foreground opacity-70 transition-[opacity,scale] hover:opacity-100 active:scale-[0.96] focus:outline-none focus:ring-2 focus:ring-ground-900/20">
           <X size={16} />
           <span className="sr-only">Close</span>
         </Dialog.Close>
@@ -91,7 +91,7 @@ const SheetTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <Dialog.Title
     ref={ref}
-    className={cn("body-lg font-semibold text-foreground", className)}
+    className={cn("body-lg font-semibold text-balance text-foreground", className)}
     {...props}
   />
 ));
@@ -101,7 +101,11 @@ const SheetDescription = React.forwardRef<
   React.ComponentRef<typeof Dialog.Description>,
   React.ComponentPropsWithoutRef<typeof Dialog.Description>
 >(({ className, ...props }, ref) => (
-  <Dialog.Description ref={ref} className={cn("body text-muted-foreground", className)} {...props} />
+  <Dialog.Description
+    ref={ref}
+    className={cn("body text-pretty text-muted-foreground", className)}
+    {...props}
+  />
 ));
 SheetDescription.displayName = "SheetDescription";