larkup 0.1.14 → 0.1.21

package/components/ui/dropdown-menu.tsx

@@ -1,10 +1,10 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import * as React from 'react';
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
 
-import { cn } from "@/lib/utils";
-import { ChevronRightIcon, CheckIcon } from "lucide-react";
+import { cn } from '@/lib/utils';
+import { ChevronRightIcon, CheckIcon } from 'lucide-react';
 
 function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
   return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
@@ -19,23 +19,20 @@ function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
     <MenuPrimitive.Trigger
       data-slot="dropdown-menu-trigger"
       {...props}
-      className={cn("cursor-pointer", props.className)}
+      className={cn('cursor-pointer', props.className)}
     />
   );
 }
 
 function DropdownMenuContent({
-  align = "start",
+  align = 'start',
   alignOffset = 0,
-  side = "bottom",
+  side = 'bottom',
   sideOffset = 4,
   className,
   ...props
 }: MenuPrimitive.Popup.Props &
-  Pick<
-    MenuPrimitive.Positioner.Props,
-    "align" | "alignOffset" | "side" | "sideOffset"
-  >) {
+  Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {
   return (
     <MenuPrimitive.Portal>
       <MenuPrimitive.Positioner
@@ -48,7 +45,7 @@ function DropdownMenuContent({
         <MenuPrimitive.Popup
           data-slot="dropdown-menu-content"
           className={cn(
-            "z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
+            'z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground  ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95',
             className,
           )}
           {...props}
@@ -74,7 +71,7 @@ function DropdownMenuLabel({
       data-slot="dropdown-menu-label"
       data-inset={inset}
       className={cn(
-        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
+        'px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7',
         className,
       )}
       {...props}
@@ -85,11 +82,11 @@ function DropdownMenuLabel({
 function DropdownMenuItem({
   className,
   inset,
-  variant = "default",
+  variant = 'default',
   ...props
 }: MenuPrimitive.Item.Props & {
   inset?: boolean;
-  variant?: "default" | "destructive";
+  variant?: 'default' | 'destructive';
 }) {
   return (
     <MenuPrimitive.Item
@@ -98,7 +95,7 @@ function DropdownMenuItem({
       data-variant={variant}
       className={cn(
         "group/dropdown-menu-item relative flex cursor-pointer items-center gap-1.5 rounded-md px-1.5 py-1.5 text-sm outline-hidden select-none  not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 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",
-        " hover:bg-background ",
+        ' hover:bg-background ',
         className,
       )}
       {...props}
@@ -124,7 +121,7 @@ function DropdownMenuSubTrigger({
       data-inset={inset}
       className={cn(
         "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none  not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        "h-8",
+        'h-8',
         className,
       )}
       {...props}
@@ -136,9 +133,9 @@ function DropdownMenuSubTrigger({
 }
 
 function DropdownMenuSubContent({
-  align = "start",
+  align = 'start',
   alignOffset = -3,
-  side = "right",
+  side = 'right',
   sideOffset = 0,
   className,
   ...props
@@ -147,8 +144,8 @@ function DropdownMenuSubContent({
     <DropdownMenuContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        "w-auto min-w-[196px]! rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-        "",
+        'w-auto min-w-[196px]! rounded-md bg-popover p-1 text-popover-foreground  ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+        '',
         className,
       )}
       align={align}
@@ -194,12 +191,7 @@ function DropdownMenuCheckboxItem({
 }
 
 function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
-  return (
-    <MenuPrimitive.RadioGroup
-      data-slot="dropdown-menu-radio-group"
-      {...props}
-    />
-  );
+  return <MenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
 }
 
 function DropdownMenuRadioItem({
@@ -233,28 +225,22 @@ function DropdownMenuRadioItem({
   );
 }
 
-function DropdownMenuSeparator({
-  className,
-  ...props
-}: MenuPrimitive.Separator.Props) {
+function DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {
   return (
     <MenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      className={cn('-mx-1 my-1 h-px bg-border', className)}
       {...props}
     />
   );
 }
 
-function DropdownMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
+function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
   return (
     <span
       data-slot="dropdown-menu-shortcut"
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
+        'ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground',
         className,
       )}
       {...props}

package/components/ui/input.tsx

@@ -9,9 +9,9 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "h-9 w-full min-w-0 rounded-lg border border-input bg-white px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 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:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "h-10 w-full min-w-0 rounded-md border border-input bg-white! px-3 py-1 text-base shadow-none! transition-[color,box-shadow] outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground/60!   disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40   ",
 
-        "placeholder:text-black/35! placeholder:text-[13px]",
+        "placeholder:text-[12.5px]",
         className,
       )}
       {...props}

package/components/ui/popover.tsx

@@ -1,30 +1,27 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
+import * as React from 'react';
+import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 function Popover({ ...props }: PopoverPrimitive.Root.Props) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 }
 
 function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
 }
 
 function PopoverContent({
   className,
-  align = "center",
+  align = 'center',
   alignOffset = 0,
-  side = "bottom",
+  side = 'bottom',
   sideOffset = 4,
   ...props
 }: PopoverPrimitive.Popup.Props &
-  Pick<
-    PopoverPrimitive.Positioner.Props,
-    "align" | "alignOffset" | "side" | "sideOffset"
-  >) {
+  Pick<PopoverPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {
   return (
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Positioner
@@ -37,54 +34,44 @@ function PopoverContent({
         <PopoverPrimitive.Popup
           data-slot="popover-content"
           className={cn(
-            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-            className
+            'z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground  ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+            className,
           )}
           {...props}
         />
       </PopoverPrimitive.Positioner>
     </PopoverPrimitive.Portal>
-  )
+  );
 }
 
-function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="popover-header"
-      className={cn("flex flex-col gap-0.5 text-sm", className)}
+      className={cn('flex flex-col gap-0.5 text-sm', className)}
       {...props}
     />
-  )
+  );
 }
 
 function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
   return (
     <PopoverPrimitive.Title
       data-slot="popover-title"
-      className={cn("font-medium", className)}
+      className={cn('font-medium', className)}
       {...props}
     />
-  )
+  );
 }
 
-function PopoverDescription({
-  className,
-  ...props
-}: PopoverPrimitive.Description.Props) {
+function PopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props) {
   return (
     <PopoverPrimitive.Description
       data-slot="popover-description"
-      className={cn("text-muted-foreground", className)}
+      className={cn('text-muted-foreground', className)}
       {...props}
     />
-  )
+  );
 }
 
-export {
-  Popover,
-  PopoverContent,
-  PopoverDescription,
-  PopoverHeader,
-  PopoverTitle,
-  PopoverTrigger,
-}
+export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };

package/components/ui/provider-icon.tsx

@@ -1,5 +1,4 @@
 import { cn } from "@/lib/utils";
-import { EmbeddingProvider } from "@larkup/core/types";
 
 export type ProviderMeta = {
   label: string;
@@ -7,32 +6,93 @@ export type ProviderMeta = {
   pillBg: string;
 };
 
-export const PROVIDER_META: Record<EmbeddingProvider, ProviderMeta> = {
+/** Maps provider IDs → display metadata. Uses models.dev for providers we don't have local icons for. */
+export const PROVIDER_META: Record<string, ProviderMeta> = {
+  vercel_ai_gateway: {
+    label: "Vercel AI Gateway",
+    iconSrc: "/icons/vercel.svg",
+    pillBg: "bg-white dark:bg-white text-white dark:text-black",
+  },
   openai: {
     label: "OpenAI",
     iconSrc: "/icons/openai.svg",
     pillBg: "bg-neutral-100 dark:bg-neutral-800",
   },
+  anthropic: {
+    label: "Anthropic",
+    iconSrc: "https://models.dev/logos/anthropic.svg",
+    pillBg: "bg-amber-50 dark:bg-amber-950/40",
+  },
   google: {
     label: "Google",
     iconSrc: "/icons/gemini.svg",
     pillBg: "bg-blue-50 dark:bg-blue-950/40",
   },
+  meta: {
+    label: "Meta",
+    iconSrc: "https://models.dev/logos/meta.svg",
+    pillBg: "bg-blue-50 dark:bg-blue-950/40",
+  },
+  mistral: {
+    label: "Mistral",
+    iconSrc: "/icons/mistral.svg",
+    pillBg: "bg-amber-50 dark:bg-amber-950/40",
+  },
   cohere: {
     label: "Cohere",
     iconSrc: "/icons/cohere.svg",
     pillBg: "bg-orange-50 dark:bg-orange-950/40",
   },
+  deepseek: {
+    label: "DeepSeek",
+    iconSrc: "https://models.dev/logos/deepseek.svg",
+    pillBg: "bg-blue-50 dark:bg-blue-950/40",
+  },
+  amazon: {
+    label: "Amazon",
+    iconSrc: "/icons/aws.svg",
+    pillBg: "bg-orange-50 dark:bg-orange-950/40",
+  },
+  xai: {
+    label: "xAI",
+    iconSrc: "https://models.dev/logos/xai.svg",
+    pillBg: "bg-neutral-100 dark:bg-neutral-800",
+  },
+  perplexity: {
+    label: "Perplexity",
+    iconSrc: "https://models.dev/logos/perplexity.svg",
+    pillBg: "bg-teal-50 dark:bg-teal-950/40",
+  },
+  alibaba: {
+    label: "Alibaba",
+    iconSrc: "https://models.dev/logos/alibaba.svg",
+    pillBg: "bg-orange-50 dark:bg-orange-950/40",
+  },
+  groq: {
+    label: "Groq",
+    iconSrc: "https://models.dev/logos/groq.svg",
+    pillBg: "bg-orange-50 dark:bg-orange-950/40",
+  },
+  "together-ai": {
+    label: "Together AI",
+    iconSrc: "https://models.dev/logos/together-ai.svg",
+    pillBg: "bg-blue-50 dark:bg-blue-950/40",
+  },
+  fireworks: {
+    label: "Fireworks",
+    iconSrc: "https://models.dev/logos/fireworks.svg",
+    pillBg: "bg-purple-50 dark:bg-purple-950/40",
+  },
+  cerebras: {
+    label: "Cerebras",
+    iconSrc: "https://models.dev/logos/cerebras.svg",
+    pillBg: "bg-green-50 dark:bg-green-950/40",
+  },
   voyage: {
     label: "Voyage AI",
     iconSrc: "/icons/voyage-light.png",
     pillBg: "bg-slate-100 dark:bg-slate-800",
   },
-  mistral: {
-    label: "Mistral",
-    iconSrc: "/icons/mistral.svg",
-    pillBg: "bg-amber-50 dark:bg-amber-950/40",
-  },
   jina: {
     label: "Jina AI",
     iconSrc: "/icons/jina.svg",
@@ -43,23 +103,34 @@ export const PROVIDER_META: Record<EmbeddingProvider, ProviderMeta> = {
     iconSrc: "/icons/nomic.png",
     pillBg: "bg-teal-50 dark:bg-teal-950/40",
   },
+  minimax: {
+    label: "MiniMax",
+    iconSrc: "https://models.dev/logos/minimax.svg",
+    pillBg: "bg-blue-50 dark:bg-blue-950/40",
+  },
+  elevenlabs: {
+    label: "ElevenLabs",
+    iconSrc: "https://models.dev/logos/elevenlabs.svg",
+    pillBg: "bg-neutral-100 dark:bg-neutral-800",
+  },
   custom: {
     label: "Custom",
     iconSrc: "/logo.png",
     pillBg: "bg-slate-100 dark:bg-slate-800",
   },
-  vercel_ai_gateway: {
-    label: "Vercel AI Gateway",
-    iconSrc: "/icons/vercel.svg",
-    pillBg: "bg-white dark:bg-white text-white dark:text-black",
-  },
-  deepseek: {
-    label: "DeepSeek",
-    iconSrc: "/logo.png", // Replace with DeepSeek icon if available
-    pillBg: "bg-blue-50 dark:bg-blue-950/40",
-  },
 };
 
+/** Look up provider meta, with a sensible fallback for unknown providers. */
+export function getProviderMeta(providerId: string): ProviderMeta {
+  return (
+    PROVIDER_META[providerId] ?? {
+      label: providerId.charAt(0).toUpperCase() + providerId.slice(1),
+      iconSrc: `https://models.dev/logos/${providerId}.svg`,
+      pillBg: "bg-slate-100 dark:bg-slate-800",
+    }
+  );
+}
+
 export function ProviderIcon({
   src,
   alt,

package/components/ui/select.tsx

@@ -1,10 +1,10 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import { Select as SelectPrimitive } from "@base-ui/react/select";
+import * as React from 'react';
+import { Select as SelectPrimitive } from '@base-ui/react/select';
 
-import { cn } from "@/lib/utils";
-import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
+import { cn } from '@/lib/utils';
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from 'lucide-react';
 
 const Select = SelectPrimitive.Root;
 
@@ -12,7 +12,7 @@ function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
   return (
     <SelectPrimitive.Group
       data-slot="select-group"
-      className={cn("scroll-my-1 p-1", className)}
+      className={cn('scroll-my-1 p-1', className)}
       {...props}
     />
   );
@@ -22,7 +22,7 @@ function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
   return (
     <SelectPrimitive.Value
       data-slot="select-value"
-      className={cn("flex flex-1 text-left", className)}
+      className={cn('flex flex-1 text-left', className)}
       {...props}
     />
   );
@@ -30,11 +30,11 @@ function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
 
 function SelectTrigger({
   className,
-  size = "default",
+  size = 'default',
   children,
   ...props
 }: SelectPrimitive.Trigger.Props & {
-  size?: "sm" | "default";
+  size?: 'sm' | 'default';
 }) {
   return (
     <SelectPrimitive.Trigger
@@ -42,23 +42,21 @@ function SelectTrigger({
       data-size={size}
       className={cn(
         // layout
-        "flex w-fit items-center justify-between gap-2 rounded-lg border border-input bg-transparent",
-        "pr-3 pl-3 text-sm whitespace-nowrap select-none outline-none",
+        'flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent',
+        'pr-3 pl-3 text-sm whitespace-nowrap select-none outline-none',
         // transitions & hover
-        "transition-all duration-150",
-        "hover:border-foreground/15 hover:bg-accent/40",
-        // focus ring
-        "focus:border-primary/60 focus:ring-2 focus:ring-primary/15",
+        'transition-all duration-150',
+        'hover:border-foreground/15 hover:bg-accent/40',
         // data-open ring
-        "data-[state=open]:border-primary/60 data-[state=open]:ring-2 data-[state=open]:ring-primary/15",
+        'data-[state=open]:border-primary/60 data-[state=open]:ring-2 data-[state=open]:ring-primary/15',
         // sizes
-        "data-[size=default]:h-9 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)]",
+        'data-[size=default]:h-10 data-[size=sm]:h-7 data-[size=sm]:rounded-lg',
         // value placeholder
-        "*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5",
+        '*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5',
         // disabled / invalid
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        "aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20",
-        "dark:bg-input/30 dark:hover:bg-input/50",
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        'aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20',
+        'dark:bg-input/30 dark:hover:bg-input/50',
         // svg
         "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
@@ -78,16 +76,16 @@ function SelectTrigger({
 function SelectContent({
   className,
   children,
-  side = "bottom",
+  side = 'bottom',
   sideOffset = 6,
-  align = "center",
+  align = 'center',
   alignOffset = 0,
   alignItemWithTrigger = true,
   ...props
 }: SelectPrimitive.Popup.Props &
   Pick<
     SelectPrimitive.Positioner.Props,
-    "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
+    'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'
   >) {
   return (
     <SelectPrimitive.Portal>
@@ -103,18 +101,18 @@ function SelectContent({
           data-slot="select-content"
           data-align-trigger={alignItemWithTrigger}
           className={cn(
-            "relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-40",
-            "origin-(--transform-origin) overflow-x-hidden overflow-y-auto",
-            "rounded-xl bg-popover p-1 text-popover-foreground",
-            "shadow-lg ring-1 ring-foreground/8",
+            'relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-40',
+            'origin-(--transform-origin) overflow-x-hidden overflow-y-auto',
+            'rounded-xl bg-popover p-1 text-popover-foreground',
+            ' ring-1 ring-foreground/8',
             // animations
-            "duration-150",
-            "data-[align-trigger=true]:animate-none",
-            "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
-            "data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2",
-            "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
-            "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
-            "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            'duration-150',
+            'data-[align-trigger=true]:animate-none',
+            'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2',
+            'data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2',
+            'data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2',
+            'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95',
+            'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
             className,
           )}
           {...props}
@@ -128,43 +126,31 @@ function SelectContent({
   );
 }
 
-function SelectLabel({
-  className,
-  ...props
-}: SelectPrimitive.GroupLabel.Props) {
+function SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props) {
   return (
     <SelectPrimitive.GroupLabel
       data-slot="select-label"
-      className={cn(
-        "px-2 py-1.5 text-xs font-medium text-muted-foreground",
-        className,
-      )}
+      className={cn('px-2 py-1.5 text-xs font-medium text-muted-foreground', className)}
       {...props}
     />
   );
 }
 
-function SelectItem({
-  className,
-  children,
-  ...props
-}: SelectPrimitive.Item.Props) {
+function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props) {
   return (
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
         // base
-        "group relative flex w-full cursor-pointer items-center gap-2 rounded-md",
-        "py-2 pr-8 pl-2 text-sm outline-hidden select-none",
+        'group relative flex w-full cursor-pointer items-center gap-2 rounded-md',
+        'py-2 pr-8 pl-2 text-sm outline-hidden select-none',
         // transition — smooth bg + text colour shift
-        "transition-colors duration-150",
-        // hover / focus highlight
-        "hover:bg-accent hover:text-accent-foreground",
-        "focus:bg-accent focus:text-accent-foreground",
+        'transition-colors duration-150',
+        'hover:bg-accent hover:text-accent-foreground',
         // highlighted (selected) state driven by BaseUI
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground",
+        'data-highlighted:bg-accent data-highlighted:text-accent-foreground',
         // disabled
-        "data-disabled:pointer-events-none data-disabled:opacity-40",
+        'data-disabled:pointer-events-none data-disabled:opacity-40',
         // icon sizing
         "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
@@ -185,14 +171,11 @@ function SelectItem({
   );
 }
 
-function SelectSeparator({
-  className,
-  ...props
-}: SelectPrimitive.Separator.Props) {
+function SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props) {
   return (
     <SelectPrimitive.Separator
       data-slot="select-separator"
-      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      className={cn('pointer-events-none -mx-1 my-1 h-px bg-border', className)}
       {...props}
     />
   );