@softize/opus 22.2.0 → 24.0.0

package/src/ui/components/primitives/input-group.tsx

@@ -1,20 +1,24 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from '../../lib/cn.ts'
-import type { ControlShape } from './control.ts'
-import { Button, type ButtonProps } from './button.tsx'
-import { Input } from './input.tsx'
-import { Textarea } from './textarea.tsx'
+import { cn } from "../../lib/cn.ts";
+import type { ControlShape } from "./control.ts";
+import { Button, type ButtonProps } from "./button.tsx";
+import { Input } from "./input.tsx";
+import { Textarea } from "./textarea.tsx";
 
-function InputGroup({ className, shape = 'default', ...props }: React.ComponentProps<"div"> & { shape?: ControlShape }) {
+function InputGroup({
+  className,
+  shape = "default",
+  ...props
+}: React.ComponentProps<"div"> & { shape?: ControlShape }) {
   return (
     <div
       data-slot="input-group"
       data-shape={shape}
       role="group"
       className={cn(
-        "group/input-group relative flex w-full items-center rounded-md border border-input bg-muted/30 transition-[color,box-shadow] outline-none data-[shape=pill]:rounded-full dark:bg-input/30",
+        "group/input-group relative flex w-full items-center rounded-md border border-input bg-control transition-[color,box-shadow] outline-none data-[shape=pill]:rounded-full",
         "h-9 min-w-0 has-[>textarea]:h-auto",
 
         // Variants based on alignment.
@@ -29,11 +33,11 @@ function InputGroup({ className, shape = 'default', ...props }: React.ComponentP
         // Error state.
         "has-[[data-slot][aria-invalid=true]]:border-context-danger has-[[data-slot][aria-invalid=true]]:ring-context-danger/20 dark:has-[[data-slot][aria-invalid=true]]:ring-context-danger/40",
 
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 const inputGroupAddonVariants = cva(
@@ -59,8 +63,8 @@ const inputGroupAddonVariants = cva(
     defaultVariants: {
       align: "inline-start",
     },
-  }
-)
+  },
+);
 
 function InputGroupAddon({
   className,
@@ -75,15 +79,15 @@ function InputGroupAddon({
       className={cn(inputGroupAddonVariants({ align }), className)}
       onClick={(e) => {
         if ((e.target as HTMLElement).closest("button")) {
-          return
+          return;
         }
         e.currentTarget.parentElement
           ?.querySelector<HTMLElement>("input, textarea")
-          ?.focus()
+          ?.focus();
       }}
       {...props}
     />
-  )
+  );
 }
 
 /** Só o acabamento por tamanho: altura, quadrado e glifo vêm da escala de control.ts via Button. */
@@ -101,11 +105,14 @@ const inputGroupButtonVariants = cva(
     defaultVariants: {
       size: "xs",
     },
-  }
-)
+  },
+);
 
 /** Subconjunto da escala que cabe dentro de um campo: `xs`, `sm`, `icon-xs` e `icon-sm`. */
-type InputGroupButtonSize = Extract<NonNullable<ButtonProps['size']>, 'xs' | 'sm' | 'icon-xs' | 'icon-sm'>
+type InputGroupButtonSize = Extract<
+  NonNullable<ButtonProps["size"]>,
+  "xs" | "sm" | "icon-xs" | "icon-sm"
+>;
 
 function InputGroupButton({
   className,
@@ -113,7 +120,7 @@ function InputGroupButton({
   variant = "ghost",
   size = "xs",
   ...props
-}: Omit<ButtonProps, 'size'> & { size?: InputGroupButtonSize }) {
+}: Omit<ButtonProps, "size"> & { size?: InputGroupButtonSize }) {
   return (
     <Button
       type={type}
@@ -123,7 +130,7 @@ function InputGroupButton({
       className={cn(inputGroupButtonVariants({ size }), className)}
       {...props}
     />
-  )
+  );
 }
 
 function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
@@ -131,11 +138,11 @@ function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
     <span
       className={cn(
         "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function InputGroupInput({
@@ -147,11 +154,11 @@ function InputGroupInput({
       data-slot="input-group-control"
       className={cn(
         "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function InputGroupTextarea({
@@ -163,11 +170,11 @@ function InputGroupTextarea({
       data-slot="input-group-control"
       className={cn(
         "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -177,4 +184,4 @@ export {
   InputGroupText,
   InputGroupInput,
   InputGroupTextarea,
-}
+};

package/src/ui/components/primitives/input-otp.tsx

@@ -1,27 +1,27 @@
-import * as React from "react"
-import { OTPInput, OTPInputContext } from "input-otp"
-import { MinusIcon } from "lucide-react"
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { MinusIcon } from "lucide-react";
 
-import { cn } from '../../lib/cn.ts'
+import { cn } from "../../lib/cn.ts";
 
 function InputOTP({
   className,
   containerClassName,
   ...props
 }: React.ComponentProps<typeof OTPInput> & {
-  containerClassName?: string
+  containerClassName?: string;
 }) {
   return (
     <OTPInput
       data-slot="input-otp"
       containerClassName={cn(
         "flex items-center gap-2 has-disabled:opacity-50",
-        containerClassName
+        containerClassName,
       )}
       className={cn("disabled:cursor-not-allowed", className)}
       {...props}
     />
-  )
+  );
 }
 
 function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
@@ -31,7 +31,7 @@ function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex items-center", className)}
       {...props}
     />
-  )
+  );
 }
 
 function InputOTPSlot({
@@ -39,18 +39,18 @@ function InputOTPSlot({
   className,
   ...props
 }: React.ComponentProps<"div"> & {
-  index: number
+  index: number;
 }) {
-  const inputOTPContext = React.useContext(OTPInputContext)
-  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
 
   return (
     <div
       data-slot="input-otp-slot"
       data-active={isActive}
       className={cn(
-        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input bg-muted/30 text-sm transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-context-danger data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[0.1875rem] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-context-danger data-[active=true]:aria-invalid:ring-context-danger/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-context-danger/40",
-        className
+        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input bg-control text-sm transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-context-danger data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[0.1875rem] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-context-danger data-[active=true]:aria-invalid:ring-context-danger/20 dark:data-[active=true]:aria-invalid:ring-context-danger/40",
+        className,
       )}
       {...props}
     >
@@ -61,7 +61,7 @@ function InputOTPSlot({
         </div>
       )}
     </div>
-  )
+  );
 }
 
 function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
@@ -69,7 +69,7 @@ function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
     <div data-slot="input-otp-separator" role="separator" {...props}>
       <MinusIcon />
     </div>
-  )
+  );
 }
 
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

package/src/ui/components/primitives/input.tsx

@@ -1,25 +1,32 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from '../../lib/cn.ts'
+import { cn } from "../../lib/cn.ts";
 
 export interface InputProps extends React.ComponentProps<"input"> {
   /** Ícone LEADING dentro do campo (identidade — calendário na data, prédio na filial).
    *  É a MESMA prop do Select e do Alert: adorno de campo é prop, não composição à mão. */
-  icon?: React.ReactNode
+  icon?: React.ReactNode;
   /** Ação TRAILING dentro do campo, no fim — um botão que age sobre o valor (limpar,
    *  mostrar senha). Par do `icon`, igual ao Select. Pra addon rico (prefixo de texto,
    *  adorno em bloco, múltiplos), use `InputGroup`. */
-  trailing?: React.ReactNode
+  trailing?: React.ReactNode;
 }
 
 // O <input> CRU (sem adorno): ELE é o campo — borda, foco, ref e className moram nele.
 const bareInput =
-  "h-9 w-full min-w-0 rounded-md border border-input bg-muted/30 px-3 py-1 text-sm transition-[color,box-shadow] outline-none 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 dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 dark:aria-invalid:ring-context-danger/40"
+  "h-9 w-full min-w-0 rounded-md border border-input bg-control px-3 py-1 text-sm transition-[color,box-shadow] outline-none 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 focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 dark:aria-invalid:ring-context-danger/40";
 
 function Input({ className, type, icon, trailing, ...props }: InputProps) {
   // Sem adorno: o <input> cru de sempre — retrocompatível (refs, forms, InputGroupInput).
   if (icon === undefined && trailing === undefined) {
-    return <input type={type} data-slot="input" className={cn(bareInput, className)} {...props} />
+    return (
+      <input
+        type={type}
+        data-slot="input"
+        className={cn(bareInput, className)}
+        {...props}
+      />
+    );
   }
   // Adornado: o MESMO modelo flex do InputGroup/Select. A borda e o anel moram no WRAPPER
   // (disparados pelo `:focus-visible` do input interno — foco de teclado); o <input> fica
@@ -31,7 +38,7 @@ function Input({ className, type, icon, trailing, ...props }: InputProps) {
     <div
       data-slot="input-wrapper"
       className={cn(
-        "flex h-9 w-full min-w-0 items-center gap-1.5 rounded-md border border-input bg-muted/30 px-3 text-sm transition-[color,box-shadow] outline-none dark:bg-input/30",
+        "flex h-9 w-full min-w-0 items-center gap-1.5 rounded-md border border-input bg-control px-3 text-sm transition-[color,box-shadow] outline-none",
         "has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-[0.1875rem] has-[input:focus-visible]:ring-ring/50",
         "has-[input[aria-invalid=true]]:border-context-danger has-[input[aria-invalid=true]]:ring-context-danger/20 dark:has-[input[aria-invalid=true]]:ring-context-danger/40",
         "has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50",
@@ -60,12 +67,15 @@ function Input({ className, type, icon, trailing, ...props }: InputProps) {
         // Interativo (AÇÃO, não decoração): sem pointer-events-none. O tom muted (ação
         // secundária) mora no slot — o botão ghost herda, sem sprinklar no call site. Se o
         // trailing é botão: aproxima 0.375rem para casar o inset horizontal com o vertical.
-        <span data-slot="input-trailing" className="flex shrink-0 items-center text-muted-foreground has-[button]:-mr-1.5">
+        <span
+          data-slot="input-trailing"
+          className="flex shrink-0 items-center text-muted-foreground has-[button]:-mr-1.5"
+        >
           {trailing}
         </span>
       )}
     </div>
-  )
+  );
 }
 
-export { Input }
+export { Input };

package/src/ui/components/primitives/item.tsx

@@ -7,19 +7,16 @@ import type { ControlSize } from "./control.ts";
 import { iconTileVariants } from "./icon-tile.tsx";
 import { Separator } from "./separator.tsx";
 
-const itemGroupVariants = cva(
-  "group/item-group flex flex-col",
-  {
-    variants: {
-      variant: {
-        plain: "",
-        framed:
-          "overflow-hidden rounded-xl border border-border bg-card text-card-foreground [&>[data-slot=item]]:rounded-none [&>[data-slot=item-container]>[data-slot=item]]:rounded-none",
-      },
+const itemGroupVariants = cva("group/item-group flex flex-col", {
+  variants: {
+    variant: {
+      plain: "",
+      framed:
+        "overflow-hidden rounded-xl border border-border bg-card text-card-foreground [&>[data-slot=item]]:rounded-none [&>[data-slot=item-container]>[data-slot=item]]:rounded-none",
     },
-    defaultVariants: { variant: "plain" },
   },
-);
+  defaultVariants: { variant: "plain" },
+});
 
 const ItemGroupContext = React.createContext(false);
 const ItemContext = React.createContext(false);
@@ -66,7 +63,7 @@ function ItemSeparator({
 }
 
 const itemVariants = cva(
-  "group/item flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-accent/50",
+  "group/item flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-interaction-hover",
   {
     variants: {
       variant: {

package/src/ui/components/primitives/menu.tsx

@@ -1,15 +1,13 @@
-import * as React from "react"
-import type { UiContext } from '../../../core/ui-context.ts'
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
-import { DropdownMenu as MenuPrimitive } from "radix-ui"
+import * as React from "react";
+import type { UiContext } from "../../../core/ui-context.ts";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { DropdownMenu as MenuPrimitive } from "radix-ui";
 
-import { useDismissOnIframeFocus } from "../../lib/dismiss-on-iframe.ts"
-import { cn } from '../../lib/cn.ts'
+import { useDismissOnIframeFocus } from "../../lib/dismiss-on-iframe.ts";
+import { cn } from "../../lib/cn.ts";
 
-function Menu({
-  ...props
-}: React.ComponentProps<typeof MenuPrimitive.Root>) {
-  return <MenuPrimitive.Root data-slot="menu" {...props} />
+function Menu({ ...props }: React.ComponentProps<typeof MenuPrimitive.Root>) {
+  return <MenuPrimitive.Root data-slot="menu" {...props} />;
 }
 
 /**
@@ -20,20 +18,13 @@ function Menu({
 function MenuPortal({
   ...props
 }: React.ComponentProps<typeof MenuPrimitive.Portal>) {
-  return (
-    <MenuPrimitive.Portal data-slot="menu-portal" {...props} />
-  )
+  return <MenuPrimitive.Portal data-slot="menu-portal" {...props} />;
 }
 
 function MenuTrigger({
   ...props
 }: React.ComponentProps<typeof MenuPrimitive.Trigger>) {
-  return (
-    <MenuPrimitive.Trigger
-      data-slot="menu-trigger"
-      {...props}
-    />
-  )
+  return <MenuPrimitive.Trigger data-slot="menu-trigger" {...props} />;
 }
 
 function MenuContent({
@@ -42,8 +33,8 @@ function MenuContent({
   ...props
 }: React.ComponentProps<typeof MenuPrimitive.Content>) {
   // Mesma razão do Popover: clique dentro de iframe não chega aqui fora.
-  const ref = React.useRef<HTMLDivElement>(null)
-  useDismissOnIframeFocus(ref)
+  const ref = React.useRef<HTMLDivElement>(null);
+  useDismissOnIframeFocus(ref);
   return (
     <MenuPrimitive.Portal>
       <MenuPrimitive.Content
@@ -52,20 +43,18 @@ function MenuContent({
         sideOffset={sideOffset}
         className={cn(
           "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[10rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md will-change-[transform,opacity] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-          className
+          className,
         )}
         {...props}
       />
     </MenuPrimitive.Portal>
-  )
+  );
 }
 
 function MenuGroup({
   ...props
 }: React.ComponentProps<typeof MenuPrimitive.Group>) {
-  return (
-    <MenuPrimitive.Group data-slot="menu-group" {...props} />
-  )
+  return <MenuPrimitive.Group data-slot="menu-group" {...props} />;
 }
 
 function MenuItem({
@@ -74,22 +63,22 @@ function MenuItem({
   context,
   ...props
 }: React.ComponentProps<typeof MenuPrimitive.Item> & {
-  inset?: boolean
-  context?: Extract<UiContext, 'neutral' | 'danger'>
+  inset?: boolean;
+  context?: Extract<UiContext, "neutral" | "danger">;
 }) {
-  const resolvedContext = context ?? 'neutral'
+  const resolvedContext = context ?? "neutral";
   return (
     <MenuPrimitive.Item
       data-slot="menu-item"
       data-inset={inset}
       data-context={resolvedContext}
       className={cn(
-        "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 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[context=danger]:focus:bg-context-danger-subtle data-[context=danger]:focus:text-context-danger-emphasis [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[context=danger]:focus:*:[svg]:text-context-danger-emphasis!",
-        className
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-interaction-hover focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[context=danger]:focus:bg-context-danger-subtle data-[context=danger]:focus:text-context-danger-emphasis [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[context=danger]:focus:*:[svg]:text-context-danger-emphasis!",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function MenuCheckboxItem({
@@ -102,8 +91,8 @@ function MenuCheckboxItem({
     <MenuPrimitive.CheckboxItem
       data-slot="menu-checkbox-item"
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-interaction-hover focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
       )}
       checked={checked}
       {...props}
@@ -115,18 +104,13 @@ function MenuCheckboxItem({
       </span>
       {children}
     </MenuPrimitive.CheckboxItem>
-  )
+  );
 }
 
 function MenuRadioGroup({
   ...props
 }: React.ComponentProps<typeof MenuPrimitive.RadioGroup>) {
-  return (
-    <MenuPrimitive.RadioGroup
-      data-slot="menu-radio-group"
-      {...props}
-    />
-  )
+  return <MenuPrimitive.RadioGroup data-slot="menu-radio-group" {...props} />;
 }
 
 function MenuRadioItem({
@@ -138,8 +122,8 @@ function MenuRadioItem({
     <MenuPrimitive.RadioItem
       data-slot="menu-radio-item"
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-interaction-hover focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
       )}
       {...props}
     >
@@ -150,7 +134,7 @@ function MenuRadioItem({
       </span>
       {children}
     </MenuPrimitive.RadioItem>
-  )
+  );
 }
 
 function MenuLabel({
@@ -158,7 +142,7 @@ function MenuLabel({
   inset,
   ...props
 }: React.ComponentProps<typeof MenuPrimitive.Label> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <MenuPrimitive.Label
@@ -166,11 +150,11 @@ function MenuLabel({
       data-inset={inset}
       className={cn(
         "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function MenuSeparator({
@@ -183,29 +167,24 @@ function MenuSeparator({
       className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
-  )
+  );
 }
 
-function MenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
+function MenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="menu-shortcut"
       className={cn(
         "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function MenuSub({
-  ...props
-}: React.ComponentProps<typeof MenuPrimitive.Sub>) {
-  return <MenuPrimitive.Sub data-slot="menu-sub" {...props} />
+function MenuSub({ ...props }: React.ComponentProps<typeof MenuPrimitive.Sub>) {
+  return <MenuPrimitive.Sub data-slot="menu-sub" {...props} />;
 }
 
 function MenuSubTrigger({
@@ -214,22 +193,22 @@ function MenuSubTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof MenuPrimitive.SubTrigger> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <MenuPrimitive.SubTrigger
       data-slot="menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "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 data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
-        className
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-interaction-hover focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-interaction-selected data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className,
       )}
       {...props}
     >
       {children}
       <ChevronRightIcon className="ml-auto size-4" />
     </MenuPrimitive.SubTrigger>
-  )
+  );
 }
 
 function MenuSubContent({
@@ -241,11 +220,11 @@ function MenuSubContent({
       data-slot="menu-sub-content"
       className={cn(
         "z-50 min-w-[10rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md will-change-[transform,opacity] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -264,4 +243,4 @@ export {
   MenuSub,
   MenuSubTrigger,
   MenuSubContent,
-}
+};