@codefast/ui 0.3.16-canary.3 → 0.4.0-canary.4

package/src/components/input-search.tsx

@@ -1,17 +1,8 @@
-"use client";
-
-import { cn } from "#/lib/utils";
-import type { ComponentProps, JSX } from "react";
-
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { SearchIcon, XIcon } from "lucide-react";
+import { useControllableState } from "radix-ui/internal";
+import type { ComponentProps, JSX } from "react";
 
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-} from "#/components/input-group";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "#/components/input-group";
 
 /* -----------------------------------------------------------------------------
  * Component: InputSearch
@@ -48,16 +39,11 @@ function InputSearch({
   });
 
   return (
-    <InputGroup
-      className={className}
-      data-disabled={disabled ? "true" : undefined}
-      data-slot="input-search"
-    >
+    <InputGroup className={className} data-disabled={disabled ? "true" : undefined} data-slot="input-search">
       <InputGroupAddon align="inline-start">
         <SearchIcon />
       </InputGroupAddon>
       <InputGroupInput
-        data-slot="input-search-item"
         disabled={disabled}
         readOnly={readOnly}
         type="search"
@@ -70,14 +56,11 @@ function InputSearch({
       {value ? (
         <InputGroupButton
           aria-label="Clear search"
-          className={cn(
-            "rounded-full",
-            "focus-visible:ring-0",
-            "focus-visible:not-disabled:bg-input",
-          )}
+          className="rounded-full"
           data-slot="input-search-clear"
           disabled={disabled ?? readOnly}
           size="icon-sm"
+          type="button"
           variant="ghost"
           onClick={() => {
             setValue("");

package/src/components/input.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import type { ComponentProps, JSX } from "react";
 
 import { cn } from "#/lib/utils";
@@ -20,21 +18,7 @@ function Input({ className, type, ...props }: InputProps): JSX.Element {
   return (
     <input
       className={cn(
-        "h-9 w-full min-w-0 px-3 py-1",
-        "rounded-lg border border-input",
-        "bg-transparent shadow-xs outline-none",
-        "text-base",
-        "transition-[color,box-shadow] duration-150 ease-snappy",
-        "motion-reduce:transition-none motion-reduce:duration-0",
-        "selection:bg-primary selection:text-primary-foreground",
-        "file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
-        "placeholder:text-muted-foreground",
-        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-        "md:text-sm",
-        "dark:bg-input/30",
-        "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
-        "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
-        "dark:aria-invalid:ring-destructive/40",
+        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className,
       )}
       data-slot="input"

package/src/components/item.tsx

@@ -1,12 +1,10 @@
-import type { ItemMediaVariants, ItemVariants } from "#/variants/item";
+import { Slot } from "radix-ui";
 import type { ComponentProps, JSX } from "react";
 
+import { Separator } from "#/components/separator";
 import { cn } from "#/lib/utils";
-
+import type { ItemMediaVariants, ItemVariants } from "#/variants/item";
 import { itemMediaVariants, itemVariants } from "#/variants/item";
-import { Slot } from "@radix-ui/react-slot";
-
-import { Separator } from "#/components/separator";
 
 /* -----------------------------------------------------------------------------
  * Component: ItemGroup
@@ -23,7 +21,10 @@ type ItemGroupProps = ComponentProps<"div">;
 function ItemGroup({ className, ...props }: ItemGroupProps): JSX.Element {
   return (
     <div
-      className={cn("group/item-group flex flex-col", className)}
+      className={cn(
+        "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
+        className,
+      )}
       data-slot="item-group"
       role="list"
       {...props}
@@ -44,14 +45,7 @@ type ItemSeparatorProps = ComponentProps<typeof Separator>;
  * @since 0.3.16-canary.0
  */
 function ItemSeparator({ className, ...props }: ItemSeparatorProps): JSX.Element {
-  return (
-    <Separator
-      className={cn("my-0", className)}
-      data-slot="item-separator"
-      orientation="horizontal"
-      {...props}
-    />
-  );
+  return <Separator className={cn("my-2", className)} data-slot="item-separator" orientation="horizontal" {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -69,14 +63,8 @@ type ItemProps = ComponentProps<"div"> &
 /**
  * @since 0.3.16-canary.0
  */
-function Item({
-  asChild = false,
-  className,
-  size = "default",
-  variant = "default",
-  ...props
-}: ItemProps): JSX.Element {
-  const Component = asChild ? Slot : "div";
+function Item({ asChild = false, className, size = "default", variant = "default", ...props }: ItemProps): JSX.Element {
+  const Component = asChild ? Slot.Root : "div";
 
   return (
     <Component
@@ -128,8 +116,7 @@ function ItemContent({ className, ...props }: ItemContentProps): JSX.Element {
   return (
     <div
       className={cn(
-        "flex flex-1 flex-col gap-1",
-        "[&+[data-slot=item-content]]:flex-none",
+        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
         className,
       )}
       data-slot="item-content"
@@ -153,7 +140,10 @@ type ItemTitleProps = ComponentProps<"div">;
 function ItemTitle({ className, ...props }: ItemTitleProps): JSX.Element {
   return (
     <div
-      className={cn("flex w-fit items-center gap-2", "text-sm leading-snug font-medium", className)}
+      className={cn(
+        "line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
+        className,
+      )}
       data-slot="item-title"
       {...props}
     />
@@ -176,9 +166,7 @@ function ItemDescription({ className, ...props }: ItemDescriptionProps): JSX.Ele
   return (
     <p
       className={cn(
-        "line-clamp-2 text-sm leading-normal font-normal text-balance text-muted-foreground",
-        "[&>a]:underline [&>a]:underline-offset-4",
-        "[&>a:hover]:text-primary",
+        "line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className,
       )}
       data-slot="item-description"
@@ -200,9 +188,7 @@ type ItemActionsProps = ComponentProps<"div">;
  * @since 0.3.16-canary.0
  */
 function ItemActions({ className, ...props }: ItemActionsProps): JSX.Element {
-  return (
-    <div className={cn("flex items-center gap-2", className)} data-slot="item-actions" {...props} />
-  );
+  return <div className={cn("flex items-center gap-2", className)} data-slot="item-actions" {...props} />;
 }
 
 /* -----------------------------------------------------------------------------

package/src/components/kbd.tsx

@@ -18,13 +18,7 @@ function Kbd({ className, ...props }: KbdProps): JSX.Element {
   return (
     <kbd
       className={cn(
-        "inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 px-1",
-        "rounded-md",
-        "bg-muted font-sans text-xs font-medium text-muted-foreground",
-        "pointer-events-none select-none",
-        "in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background",
-        "dark:in-data-[slot=tooltip-content]:bg-background/10",
-        "[&_svg:not([class*='size-'])]:size-3",
+        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
         className,
       )}
       data-slot="kbd"
@@ -42,13 +36,7 @@ type KbdGroupProps = ComponentProps<"kbd">;
  * @since 0.3.16-canary.0
  */
 function KbdGroup({ className, ...props }: KbdGroupProps): JSX.Element {
-  return (
-    <kbd
-      className={cn("inline-flex items-center gap-1", className)}
-      data-slot="kbd-group"
-      {...props}
-    />
-  );
+  return <kbd className={cn("inline-flex items-center gap-1", className)} data-slot="kbd-group" {...props} />;
 }
 
 /* -----------------------------------------------------------------------------

package/src/components/label.tsx

@@ -1,9 +1,7 @@
-"use client";
-
+import { Label as LabelPrimitive } from "radix-ui";
 import type { ComponentProps, JSX } from "react";
 
 import { cn } from "#/lib/utils";
-import * as LabelPrimitive from "@radix-ui/react-label";
 
 /* -----------------------------------------------------------------------------
  * Component: Label
@@ -21,13 +19,7 @@ function Label({ className, ...props }: LabelProps): JSX.Element {
   return (
     <LabelPrimitive.Root
       className={cn(
-        "inline-block",
-        "text-sm leading-none font-medium",
-        "group-data-disabled:opacity-50",
-        "peer-disabled:opacity-50",
-        "peer-aria-invalid:text-destructive",
-        "peer-data-disabled:opacity-50",
-        "data-invalid:text-destructive",
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-disabled:pointer-events-none group-data-disabled:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-aria-invalid:text-destructive peer-data-disabled:opacity-50 data-invalid:text-destructive",
         className,
       )}
       data-slot="label"

package/src/components/menubar.tsx

@@ -1,10 +1,8 @@
-"use client";
-
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+import { Menubar as MenubarPrimitive } from "radix-ui";
 import type { ComponentProps, JSX } from "react";
 
 import { cn } from "#/lib/utils";
-import * as MenubarPrimitive from "@radix-ui/react-menubar";
-import { CheckIcon, ChevronRightIcon, DotIcon } from "lucide-react";
 
 /* -----------------------------------------------------------------------------
  * Component: Menubar
@@ -21,13 +19,7 @@ type MenubarProps = ComponentProps<typeof MenubarPrimitive.Root>;
 function Menubar({ className, ...props }: MenubarProps): JSX.Element {
   return (
     <MenubarPrimitive.Root
-      className={cn(
-        "flex items-center space-x-1",
-        "p-1",
-        "rounded-lg border",
-        "bg-background",
-        className,
-      )}
+      className={cn("flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs", className)}
       data-slot="menubar"
       {...props}
     />
@@ -114,13 +106,7 @@ function MenubarTrigger({ className, ...props }: MenubarTriggerProps): JSX.Eleme
   return (
     <MenubarPrimitive.Trigger
       className={cn(
-        "flex items-center gap-x-2",
-        "px-2 py-1.5",
-        "rounded-sm outline-hidden",
-        "text-sm font-medium",
-        "select-none",
-        "focus:bg-accent focus:text-accent-foreground",
-        "data-open:bg-accent data-open:text-accent-foreground",
+        "flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted",
         className,
       )}
       data-slot="menubar-trigger"
@@ -143,23 +129,11 @@ interface MenubarSubTriggerProps extends ComponentProps<typeof MenubarPrimitive.
 /**
  * @since 0.3.16-canary.0
  */
-function MenubarSubTrigger({
-  children,
-  className,
-  inset,
-  ...props
-}: MenubarSubTriggerProps): JSX.Element {
+function MenubarSubTrigger({ children, className, inset, ...props }: MenubarSubTriggerProps): JSX.Element {
   return (
     <MenubarPrimitive.SubTrigger
       className={cn(
-        "flex items-center gap-x-2",
-        "px-2 py-1.5",
-        "rounded-sm outline-hidden",
-        "text-sm",
-        "cursor-default select-none",
-        "focus:bg-accent focus:text-accent-foreground",
-        "data-inset:pl-8",
-        "data-open:bg-accent data-open:text-accent-foreground",
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       data-inset={inset}
@@ -167,7 +141,7 @@ function MenubarSubTrigger({
       {...props}
     >
       {children}
-      <ChevronRightIcon className={cn("size-4", "ml-auto")} />
+      <ChevronRightIcon className="ml-auto size-4 rtl:rotate-180" />
     </MenubarPrimitive.SubTrigger>
   );
 }
@@ -186,25 +160,10 @@ type MenubarSubContentProps = ComponentProps<typeof MenubarPrimitive.SubContent>
  */
 function MenubarSubContent({ className, ...props }: MenubarSubContentProps): JSX.Element {
   return (
-    <MenubarPrimitive.Portal>
+    <MenubarPrimitive.Portal data-slot="menubar-portal">
       <MenubarPrimitive.SubContent
         className={cn(
-          "z-50",
-          "min-w-32 overflow-hidden p-1",
-          "rounded-lg border",
-          "bg-popover text-popover-foreground shadow-lg",
-          "ease-snappy data-open:animate-in data-open:duration-200 data-open:fade-in-0 data-open:zoom-in-95",
-          "data-open:data-side-top:slide-in-from-bottom-2",
-          "data-open:data-side-right:slide-in-from-left-2",
-          "data-open:data-side-bottom:slide-in-from-top-2",
-          "data-open:data-side-left:slide-in-from-right-2",
-          "data-closed:animate-out data-closed:duration-150 data-closed:fade-out-0 data-closed:zoom-out-95",
-          "data-closed:data-side-top:slide-out-to-bottom-2",
-          "data-closed:data-side-right:slide-out-to-left-2",
-          "data-closed:data-side-bottom:slide-out-to-top-2",
-          "data-closed:data-side-left:slide-out-to-right-2",
-          "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0",
-          "origin-(--radix-menubar-content-transform-origin)",
+          "z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 ease-snappy data-open:animate-in data-open:animation-duration-menu-in data-open:fade-in-0 data-open:zoom-in-95 data-open:data-side-top:slide-in-from-bottom-2 data-open:data-side-right:slide-in-from-left-2 data-open:data-side-bottom:slide-in-from-top-2 data-open:data-side-left:slide-in-from-right-2 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-menu-out data-closed:fade-out-0 data-closed:zoom-out-95 data-closed:data-side-top:slide-out-to-bottom-2 data-closed:data-side-right:slide-out-to-left-2 data-closed:data-side-bottom:slide-out-to-top-2 data-closed:data-side-left:slide-out-to-right-2",
           className,
         )}
         data-slot="menubar-sub-content"
@@ -230,26 +189,16 @@ function MenubarContent({
   align = "start",
   alignOffset = -4,
   className,
-  sideOffset = 4,
+  sideOffset = 8,
   ...props
 }: MenubarContentProps): JSX.Element {
   return (
-    <MenubarPrimitive.Portal>
+    <MenubarPrimitive.Portal data-slot="menubar-portal">
       <MenubarPrimitive.Content
         align={align}
         alignOffset={alignOffset}
         className={cn(
-          "z-50",
-          "min-w-32 overflow-hidden p-1",
-          "rounded-lg border",
-          "bg-popover text-popover-foreground shadow-lg",
-          "ease-snappy data-open:animate-in data-open:duration-200 data-open:fade-in-0 data-open:zoom-in-95",
-          "data-open:data-side-top:slide-in-from-bottom-2",
-          "data-open:data-side-right:slide-in-from-left-2",
-          "data-open:data-side-bottom:slide-in-from-top-2",
-          "data-open:data-side-left:slide-in-from-right-2",
-          "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0",
-          "origin-(--radix-menubar-content-transform-origin)",
+          "z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 ease-snappy data-open:animate-in data-open:animation-duration-menu-in data-open:fade-in-0 data-open:zoom-in-95 data-open:data-side-top:slide-in-from-bottom-2 data-open:data-side-right:slide-in-from-left-2 data-open:data-side-bottom:slide-in-from-top-2 data-open:data-side-left:slide-in-from-right-2 data-closed:ease-exit",
           className,
         )}
         data-slot="menubar-content"
@@ -275,24 +224,11 @@ interface MenubarItemProps extends ComponentProps<typeof MenubarPrimitive.Item>
 /**
  * @since 0.3.16-canary.0
  */
-function MenubarItem({ className, inset, variant, ...props }: MenubarItemProps): JSX.Element {
+function MenubarItem({ className, inset, variant = "default", ...props }: MenubarItemProps): JSX.Element {
   return (
     <MenubarPrimitive.Item
       className={cn(
-        "group/menubar-item relative flex items-center gap-x-2",
-        "px-2 py-1.5",
-        "rounded-sm outline-hidden",
-        "text-sm",
-        "cursor-default select-none",
-        "focus:bg-accent focus:text-accent-foreground",
-        "aria-disabled:opacity-50",
-        "data-inset:pl-8",
-        "data-[variant=destructive]:text-destructive",
-        "data-[variant=destructive]:focus:bg-destructive/10",
-        "dark:data-[variant=destructive]:focus:bg-destructive/20",
-        "data-[variant=destructive]:[&_svg:not([class*='text-'])]:text-destructive/80",
-        "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        "[&_svg:not([class*='text-'])]:text-muted-foreground",
+        "group/menubar-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!",
         className,
       )}
       data-inset={inset}
@@ -310,37 +246,28 @@ function MenubarItem({ className, inset, variant, ...props }: MenubarItemProps):
 /**
  * @since 0.3.16-canary.0
  */
-type MenubarCheckboxItemProps = ComponentProps<typeof MenubarPrimitive.CheckboxItem>;
+interface MenubarCheckboxItemProps extends ComponentProps<typeof MenubarPrimitive.CheckboxItem> {
+  inset?: boolean;
+}
 
 /**
  * @since 0.3.16-canary.0
  */
-function MenubarCheckboxItem({
-  checked,
-  children,
-  className,
-  ...props
-}: MenubarCheckboxItemProps): JSX.Element {
+function MenubarCheckboxItem({ checked, children, className, inset, ...props }: MenubarCheckboxItemProps): JSX.Element {
   return (
     <MenubarPrimitive.CheckboxItem
       checked={checked}
       className={cn(
-        "group/menubar-item relative flex items-center gap-x-2",
-        "py-1.5 pr-2 pl-8",
-        "rounded-sm outline-hidden",
-        "text-sm",
-        "cursor-default select-none",
-        "focus:bg-accent focus:text-accent-foreground",
-        "aria-disabled:opacity-50",
-        "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
+      data-inset={inset}
       data-slot="menubar-checkbox-item"
       {...props}
     >
-      <span className={cn("absolute flex items-center justify-center", "left-2")}>
+      <span className="pointer-events-none absolute left-2 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
         <MenubarPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
+          <CheckIcon />
         </MenubarPrimitive.ItemIndicator>
       </span>
       {children}
@@ -355,31 +282,27 @@ function MenubarCheckboxItem({
 /**
  * @since 0.3.16-canary.0
  */
-type MenubarRadioItemProps = ComponentProps<typeof MenubarPrimitive.RadioItem>;
+interface MenubarRadioItemProps extends ComponentProps<typeof MenubarPrimitive.RadioItem> {
+  inset?: boolean;
+}
 
 /**
  * @since 0.3.16-canary.0
  */
-function MenubarRadioItem({ children, className, ...props }: MenubarRadioItemProps): JSX.Element {
+function MenubarRadioItem({ children, className, inset, ...props }: MenubarRadioItemProps): JSX.Element {
   return (
     <MenubarPrimitive.RadioItem
       className={cn(
-        "group/menubar-item relative flex items-center gap-x-2",
-        "py-1.5 pr-2 pl-8",
-        "rounded-sm outline-hidden",
-        "text-sm",
-        "cursor-default select-none",
-        "focus:bg-accent focus:text-accent-foreground",
-        "aria-disabled:opacity-50",
-        "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
+      data-inset={inset}
       data-slot="menubar-radio-item"
       {...props}
     >
-      <span className={cn("absolute flex items-center justify-center", "left-2")}>
+      <span className="pointer-events-none absolute left-2 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
         <MenubarPrimitive.ItemIndicator>
-          <DotIcon className={cn("size-4", "fill-current")} />
+          <CheckIcon />
         </MenubarPrimitive.ItemIndicator>
       </span>
       {children}
@@ -404,13 +327,7 @@ interface MenubarLabelProps extends ComponentProps<typeof MenubarPrimitive.Label
 function MenubarLabel({ className, inset, ...props }: MenubarLabelProps): JSX.Element {
   return (
     <MenubarPrimitive.Label
-      className={cn(
-        "flex items-center gap-x-2",
-        "px-2 py-1.5",
-        "text-sm font-semibold",
-        "data-inset:pl-8",
-        className,
-      )}
+      className={cn("px-2 py-1.5 text-sm font-medium data-inset:pl-8", className)}
       data-inset={inset}
       data-slot="menubar-label"
       {...props}
@@ -433,7 +350,7 @@ type MenubarSeparatorProps = ComponentProps<typeof MenubarPrimitive.Separator>;
 function MenubarSeparator({ className, ...props }: MenubarSeparatorProps): JSX.Element {
   return (
     <MenubarPrimitive.Separator
-      className={cn("mx-2 my-1 h-px", "bg-border", className)}
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
       data-slot="menubar-separator"
       {...props}
     />
@@ -456,9 +373,7 @@ function MenubarShortcut({ className, ...props }: MenubarShortcutProps): JSX.Ele
   return (
     <span
       className={cn(
-        "ml-auto",
-        "text-xs tracking-widest text-muted-foreground",
-        "group-data-[variant=destructive]/menubar-item:text-destructive/80",
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground",
         className,
       )}
       data-slot="menubar-shortcut"
@@ -480,13 +395,7 @@ type MenubarArrowProps = ComponentProps<typeof MenubarPrimitive.Arrow>;
  * @since 0.3.16-canary.0
  */
 function MenubarArrow({ className, ...props }: MenubarArrowProps): JSX.Element {
-  return (
-    <MenubarPrimitive.Arrow
-      className={cn("fill-popover", className)}
-      data-slot="menubar-arrow"
-      {...props}
-    />
-  );
+  return <MenubarPrimitive.Arrow className={cn("fill-popover", className)} data-slot="menubar-arrow" {...props} />;
 }
 
 /* -----------------------------------------------------------------------------

package/src/components/native-select.tsx

@@ -1,7 +1,7 @@
+import { ChevronDownIcon } from "lucide-react";
 import type { ComponentProps, JSX } from "react";
 
 import { cn } from "#/lib/utils";
-import { ChevronDownIcon } from "lucide-react";
 
 /* -----------------------------------------------------------------------------
  * Component: NativeSelect
@@ -10,46 +10,29 @@ import { ChevronDownIcon } from "lucide-react";
 /**
  * @since 0.3.16-canary.0
  */
-type NativeSelectProps = ComponentProps<"select">;
+type NativeSelectProps = Omit<ComponentProps<"select">, "size"> & {
+  size?: "default" | "sm";
+};
 
 /**
  * @since 0.3.16-canary.0
  */
-function NativeSelect({ className, ...props }: NativeSelectProps): JSX.Element {
+function NativeSelect({ className, size = "default", ...props }: NativeSelectProps): JSX.Element {
   return (
     <div
-      className={cn("group/native-select relative", "w-fit", "has-[select:disabled]:opacity-50")}
+      className={cn("group/native-select relative w-fit has-[select:disabled]:opacity-50", className)}
+      data-size={size}
       data-slot="native-select-wrapper"
     >
       <select
-        className={cn(
-          "h-9 w-full min-w-0 px-3 py-2 pr-9",
-          "rounded-lg border border-input",
-          "bg-transparent shadow-xs outline-none",
-          "text-sm",
-          "appearance-none transition-[color,box-shadow]",
-          "motion-reduce:transition-none",
-          "selection:bg-primary selection:text-primary-foreground",
-          "placeholder:text-muted-foreground",
-          "disabled:pointer-events-none disabled:cursor-not-allowed",
-          "dark:bg-input/30",
-          "dark:hover:bg-input/50",
-          "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
-          "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
-          "dark:aria-invalid:ring-destructive/40",
-          className,
-        )}
+        className="h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-8 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
+        data-size={size}
         data-slot="native-select"
         {...props}
       />
       <ChevronDownIcon
         aria-hidden="true"
-        className={cn(
-          "absolute top-1/2 right-3.5",
-          "size-4 text-muted-foreground",
-          "-translate-y-1/2 opacity-50",
-          "pointer-events-none select-none",
-        )}
+        className="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none"
         data-slot="native-select-icon"
       />
     </div>
@@ -68,8 +51,10 @@ type NativeSelectOptionProps = ComponentProps<"option">;
 /**
  * @since 0.3.16-canary.0
  */
-function NativeSelectOption({ ...props }: NativeSelectOptionProps): JSX.Element {
-  return <option data-slot="native-select-option" {...props} />;
+function NativeSelectOption({ className, ...props }: NativeSelectOptionProps): JSX.Element {
+  return (
+    <option className={cn("bg-[Canvas] text-[CanvasText]", className)} data-slot="native-select-option" {...props} />
+  );
 }
 
 /* -----------------------------------------------------------------------------
@@ -85,7 +70,13 @@ type NativeSelectOptGroupProps = ComponentProps<"optgroup">;
  * @since 0.3.16-canary.0
  */
 function NativeSelectOptGroup({ className, ...props }: NativeSelectOptGroupProps): JSX.Element {
-  return <optgroup className={cn(className)} data-slot="native-select-optgroup" {...props} />;
+  return (
+    <optgroup
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      data-slot="native-select-optgroup"
+      {...props}
+    />
+  );
 }
 
 /* -----------------------------------------------------------------------------