@ponti-studios/ui 0.3.0 → 0.4.0

package/src/components/navigation/app-navigation.tsx

@@ -72,10 +72,10 @@ export function AppNavigation({
         ...linkProps,
         ...(linkProp === "to" ? { to: href } : { href }),
         className: brand
-          ? "inline-flex min-h-11 shrink-0 items-center rounded-md px-3 py-2 text-sm font-medium"
+          ? "inline-flex min-h-9 shrink-0 items-center rounded-md px-3 py-2 text-sm font-medium"
           : variant
-            ? "inline-flex min-h-11 shrink-0 items-center justify-center rounded-md px-3 py-2 text-sm font-medium"
-            : "inline-flex min-h-11 shrink-0 items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground",
+            ? "inline-flex min-h-9 shrink-0 items-center justify-center rounded-md px-3 py-2 text-sm font-medium"
+            : "inline-flex min-h-9 shrink-0 items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-muted hover:text-muted-foreground",
         "aria-current": active ? "page" : undefined,
         "data-variant": variant,
       },
@@ -83,7 +83,7 @@ export function AppNavigation({
     );
 
   return (
-    <header className="sticky top-0 z-50 flex w-full justify-center border-b bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+    <header className="bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 flex w-full justify-center border-b px-4 backdrop-blur">
       <nav className="w-full max-w-7xl" aria-label={ariaLabel}>
         <div className="flex min-h-14 items-center justify-between gap-6">
           <div className="flex min-w-0 items-center">

package/src/components/navigation/pagination-controls.tsx

@@ -19,7 +19,7 @@ export function PaginationControls({
   }
 
   return (
-    <div className="text-sm text-muted-foreground flex items-center justify-end gap-2">
+    <div className="text-muted-foreground flex items-center justify-end gap-2 text-sm">
       <Button
         type="button"
         variant="outline"
@@ -31,7 +31,7 @@ export function PaginationControls({
         <ChevronLeft className="size-4" aria-hidden />
         Previous
       </Button>
-      <span className="text-xs text-foreground">
+      <span className="text-foreground text-xs">
         Page {currentPage + 1} of {totalPages}
       </span>
       <Button

package/src/components/navigation/tabs.tsx

@@ -38,7 +38,7 @@ function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPr
     <TabsPrimitive.Panel
       data-slot="tabs-content"
       className={cn(
-        "focus-visible:bg-accent/10 mt-2 rounded-md focus-visible:border focus-visible:outline-none",
+        "focus-visible:bg-muted/10 mt-2 rounded-md focus-visible:border focus-visible:outline-none",
         className,
       )}
       {...props}

package/src/components/overlays/alert-dialog.tsx

@@ -7,9 +7,14 @@ import { buttonVariants } from "../primitives/button";
 const AlertDialog = AlertDialogPrimitive.Root;
 const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
-const AlertDialogPortal = ({ children, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) => (
+const AlertDialogPortal = ({
+  children,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) => (
   <AlertDialogPrimitive.Portal {...props}>
-    <div className="fixed inset-0 z-50 flex items-end justify-center sm:items-center">{children}</div>
+    <div className="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
+      {children}
+    </div>
   </AlertDialogPrimitive.Portal>
 );
 
@@ -20,7 +25,7 @@ const AlertDialogOverlay = React.forwardRef<
   <AlertDialogPrimitive.Backdrop
     ref={ref}
     className={cn(
-      "bg-black/80 data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 transition-opacity",
+      "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/80 transition-opacity",
       className,
     )}
     {...props}
@@ -36,7 +41,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Popup
       ref={ref}
       className={cn(
-        "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 border sm:data-open:slide-in-from-bottom-0 fixed bottom-0 z-50 grid w-full max-w-lg gap-6 rounded-t-xl p-4 outline-none sm:top-[50%] sm:right-auto sm:bottom-auto sm:left-[50%] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:p-6",
+        "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 sm:data-open:slide-in-from-bottom-0 fixed bottom-0 z-50 grid w-full max-w-lg gap-6 rounded-t-xl border p-4 outline-none sm:top-[50%] sm:right-auto sm:bottom-auto sm:left-[50%] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:p-6",
         className,
       )}
       {...props}
@@ -49,21 +54,34 @@ function AlertDialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDiv
 }
 
 function AlertDialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("flex flex-col-reverse gap-3 sm:flex-row sm:justify-end", className)} {...props} />;
+  return (
+    <div
+      className={cn("flex flex-col-reverse gap-3 sm:flex-row sm:justify-end", className)}
+      {...props}
+    />
+  );
 }
 
 const AlertDialogTitle = React.forwardRef<
   React.ComponentRef<typeof AlertDialogPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold tracking-tight", className)} {...props} />
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold tracking-tight", className)}
+    {...props}
+  />
 ));
 
 const AlertDialogDescription = React.forwardRef<
   React.ComponentRef<typeof AlertDialogPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description ref={ref} className={cn("max-w-prose text-sm text-muted-foreground", className)} {...props} />
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-muted-foreground max-w-prose text-sm", className)}
+    {...props}
+  />
 ));
 
 const AlertDialogAction = React.forwardRef<
@@ -77,7 +95,11 @@ const AlertDialogCancel = React.forwardRef<
   React.ComponentRef<typeof AlertDialogPrimitive.Close>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Close>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Close ref={ref} className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)} {...props} />
+  <AlertDialogPrimitive.Close
+    ref={ref}
+    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+    {...props}
+  />
 ));
 
 export {

package/src/components/overlays/command.tsx

@@ -4,26 +4,59 @@ import * as React from "react";
 
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog";
 
-function Command({ className, children, ...props }: Omit<React.ComponentProps<typeof CommandPrimitive.Root<string>>, "className"> & { className?: string }) {
+function Command({
+  className,
+  children,
+  ...props
+}: Omit<React.ComponentProps<typeof CommandPrimitive.Root<string>>, "className"> & {
+  className?: string;
+}) {
   return (
-    <div data-slot="command" className={`bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md ${className ?? ""}`}>
+    <div
+      data-slot="command"
+      className={`bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md ${className ?? ""}`}
+    >
       <CommandPrimitive.Root {...props}>{children}</CommandPrimitive.Root>
     </div>
   );
 }
 
-function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, showCloseButton = true, ...props }: Omit<React.ComponentProps<typeof Dialog>, "children"> & { title?: string; description?: string; showCloseButton?: boolean; children?: React.ReactNode }) {
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  showCloseButton = true,
+  ...props
+}: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
+  title?: string;
+  description?: string;
+  showCloseButton?: boolean;
+  children?: React.ReactNode;
+}) {
   return (
     <Dialog {...props}>
-      <DialogHeader className="sr-only"><DialogTitle>{title}</DialogTitle><DialogDescription>{description}</DialogDescription></DialogHeader>
-      <DialogContent className="overflow-hidden p-0" showCloseButton={showCloseButton}><Command>{children}</Command></DialogContent>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent className="overflow-hidden p-0" showCloseButton={showCloseButton}>
+        <Command>{children}</Command>
+      </DialogContent>
     </Dialog>
   );
 }
 
-type CommandInputProps = React.ComponentProps<typeof CommandPrimitive.Input> & { onValueChange?: (value: string) => void };
-
-function CommandInput({ className, onValueChange, onChange, "aria-label": ariaLabel = "Search commands", ...props }: CommandInputProps) {
+type CommandInputProps = React.ComponentProps<typeof CommandPrimitive.Input> & {
+  onValueChange?: (value: string) => void;
+};
+
+function CommandInput({
+  className,
+  onValueChange,
+  onChange,
+  "aria-label": ariaLabel = "Search commands",
+  ...props
+}: CommandInputProps) {
   return (
     <div data-slot="command-input-wrapper" className="flex h-9 items-center gap-2 border-b px-3">
       <SearchIcon className="size-4 shrink-0 opacity-50" />
@@ -31,7 +64,10 @@ function CommandInput({ className, onValueChange, onChange, "aria-label": ariaLa
         data-slot="command-input"
         aria-label={ariaLabel}
         className={`placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50 ${className ?? ""}`}
-        onChange={(event) => { onChange?.(event); onValueChange?.(event.currentTarget.value); }}
+        onChange={(event) => {
+          onChange?.(event);
+          onValueChange?.(event.currentTarget.value);
+        }}
         {...props}
       />
     </div>
@@ -41,7 +77,13 @@ function CommandInput({ className, onValueChange, onChange, "aria-label": ariaLa
 function CommandList({ children, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
   if (typeof children === "function") {
     return (
-      <CommandPrimitive.List data-slot="command-list" aria-label="Command results" tabIndex={0} className="max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto" {...props}>
+      <CommandPrimitive.List
+        data-slot="command-list"
+        aria-label="Command results"
+        tabIndex={0}
+        className="max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto"
+        {...props}
+      >
         {children}
       </CommandPrimitive.List>
     );
@@ -57,7 +99,13 @@ function CommandList({ children, ...props }: React.ComponentProps<typeof Command
 
   return (
     <div data-slot="command-list-container" className="relative">
-      <CommandPrimitive.List data-slot="command-list" aria-label="Command results" tabIndex={0} className="max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto" {...props}>
+      <CommandPrimitive.List
+        data-slot="command-list"
+        aria-label="Command results"
+        tabIndex={0}
+        className="max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto"
+        {...props}
+      >
         {listChildren}
       </CommandPrimitive.List>
       {emptyChildren}
@@ -66,34 +114,89 @@ function CommandList({ children, ...props }: React.ComponentProps<typeof Command
 }
 
 function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
-  return <CommandPrimitive.Empty data-slot="command-empty" className="py-6 text-center text-sm" {...props} />;
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  );
 }
 
-function CommandGroup({ className, heading, children, ...props }: React.ComponentProps<typeof CommandPrimitive.Group> & { heading?: React.ReactNode }) {
+function CommandGroup({
+  className,
+  heading,
+  children,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group> & { heading?: React.ReactNode }) {
   return (
-    <CommandPrimitive.Group data-slot="command-group" className={`text-foreground overflow-hidden p-1 ${className ?? ""}`} {...props}>
-      {heading ? <CommandPrimitive.GroupLabel className="text-muted-foreground px-2 py-1.5 text-xs font-medium">{heading}</CommandPrimitive.GroupLabel> : null}
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={`text-foreground overflow-hidden p-1 ${className ?? ""}`}
+      {...props}
+    >
+      {heading ? (
+        <CommandPrimitive.GroupLabel className="text-muted-foreground px-2 py-1.5 text-xs font-medium">
+          {heading}
+        </CommandPrimitive.GroupLabel>
+      ) : null}
       {children}
     </CommandPrimitive.Group>
   );
 }
 
-type CommandItemProps = React.ComponentProps<typeof CommandPrimitive.Item> & { onSelect?: () => void };
+type CommandItemProps = React.ComponentProps<typeof CommandPrimitive.Item> & {
+  onSelect?: () => void;
+};
 
 function CommandItem({ className, onSelect, onClick, ...props }: CommandItemProps) {
-  return <CommandPrimitive.Item data-slot="command-item" className={`data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 ${className ?? ""}`} onClick={(event) => { onClick?.(event); onSelect?.(); }} {...props} />;
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={`data-highlighted:bg-muted data-highlighted:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 ${className ?? ""}`}
+      onClick={(event) => {
+        onClick?.(event);
+        onSelect?.();
+      }}
+      {...props}
+    />
+  );
 }
 
 function CommandSeparator({ className, ...props }: React.ComponentProps<"div">) {
-  return <div data-slot="command-separator" aria-hidden="true" className={`bg-border -mx-1 h-px ${className ?? ""}`} {...props} />;
+  return (
+    <div
+      data-slot="command-separator"
+      aria-hidden="true"
+      className={`bg-border -mx-1 h-px ${className ?? ""}`}
+      {...props}
+    />
+  );
 }
 
 function CommandShortcut(props: React.ComponentProps<"span">) {
-  return <span data-slot="command-shortcut" className="text-muted-foreground ml-auto text-xs tracking-widest" {...props} />;
+  return (
+    <span
+      data-slot="command-shortcut"
+      className="text-muted-foreground ml-auto text-xs tracking-widest"
+      {...props}
+    />
+  );
 }
 
 function CommandListLoading(props: React.ComponentProps<"div">) {
   return <div data-slot="command-list-loading" className="py-6 text-center text-sm" {...props} />;
 }
 
-export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandListLoading, CommandSeparator, CommandShortcut };
+export {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandListLoading,
+  CommandSeparator,
+  CommandShortcut,
+};

package/src/components/overlays/dialog.tsx

@@ -63,7 +63,7 @@ function DialogOverlay({ className, ...props }: React.ComponentProps<typeof Base
     <BaseDialog.Backdrop
       data-slot="dialog-overlay"
       className={cn(
-        "bg-black/80 data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 transition-opacity",
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/80 transition-opacity",
         className,
       )}
       {...props}
@@ -94,7 +94,7 @@ function DialogContent({
         {showCloseButton && (
           <BaseDialog.Close
             data-slot="dialog-close"
-            className="text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-ring absolute top-3 right-3 inline-flex size-11 items-center justify-center rounded-md border border-transparent opacity-100 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none sm:top-4 sm:right-4 [&_svg]:pointer-events-none [&_svg]:size-4.5 [&_svg]:shrink-0"
+            className="text-muted-foreground hover:bg-muted hover:text-muted-foreground focus-visible:outline-ring absolute top-3 right-3 inline-flex size-9 items-center justify-center rounded-md border border-transparent opacity-100 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none sm:top-4 sm:right-4 [&_svg]:pointer-events-none [&_svg]:size-4.5 [&_svg]:shrink-0"
           >
             <XIcon />
             <span className="sr-only">Close</span>
@@ -129,7 +129,7 @@ function DialogTitle({ className, ...props }: React.ComponentProps<typeof BaseDi
   return (
     <BaseDialog.Title
       data-slot="dialog-title"
-      className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+      className={cn("text-lg leading-none font-semibold tracking-tight", className)}
       {...props}
     />
   );
@@ -142,7 +142,7 @@ function DialogDescription({
   return (
     <BaseDialog.Description
       data-slot="dialog-description"
-      className={cn("max-w-prose text-sm text-muted-foreground", className)}
+      className={cn("text-muted-foreground max-w-prose text-sm", className)}
       {...props}
     />
   );

package/src/components/overlays/dropdown-menu.tsx

@@ -12,11 +12,17 @@ function DropdownMenuPortal(props: React.ComponentProps<typeof DropdownMenuPrimi
   return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
 }
 
-function DropdownMenuTrigger({ asChild, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger> & { asChild?: boolean }) {
+function DropdownMenuTrigger({
+  asChild,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger> & { asChild?: boolean }) {
   return (
     <DropdownMenuPrimitive.Trigger
       data-slot="dropdown-menu-trigger"
-      {...(asChild && React.isValidElement(children) ? { render: children as React.ReactElement } : {})}
+      {...(asChild && React.isValidElement(children)
+        ? { render: children as React.ReactElement }
+        : {})}
       {...props}
     >
       {!asChild && children}
@@ -24,7 +30,12 @@ function DropdownMenuTrigger({ asChild, children, ...props }: React.ComponentPro
   );
 }
 
-function DropdownMenuContent({ className, sideOffset = 4, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Popup> & { sideOffset?: number }) {
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Popup> & { sideOffset?: number }) {
   return (
     <DropdownMenuPrimitive.Portal>
       <DropdownMenuPrimitive.Positioner sideOffset={sideOffset}>
@@ -47,54 +58,159 @@ function DropdownMenuGroup(props: React.ComponentProps<typeof DropdownMenuPrimit
   return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
 }
 
-function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.GroupLabel> & { inset?: boolean }) {
-  return <DropdownMenuPrimitive.GroupLabel data-slot="dropdown-menu-label" data-inset={inset} className={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)} {...props} />;
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.GroupLabel> & { inset?: boolean }) {
+  return (
+    <DropdownMenuPrimitive.GroupLabel
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
+      {...props}
+    />
+  );
 }
 
-function DropdownMenuItem({ className, inset, variant = "default", ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & { inset?: boolean; variant?: "default" | "destructive" }) {
-  return <DropdownMenuPrimitive.Item data-slot="dropdown-menu-item" data-inset={inset} data-variant={variant} className={cn("data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", className)} {...props} />;
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "data-highlighted:bg-muted data-highlighted:text-muted-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
-function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
   return (
-    <DropdownMenuPrimitive.CheckboxItem data-slot="dropdown-menu-checkbox-item" className={cn("data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50", className)} checked={checked} {...props}>
-      <span className="absolute left-2 flex size-3.5 items-center justify-center"><DropdownMenuPrimitive.CheckboxItemIndicator><CheckIcon className="size-4" /></DropdownMenuPrimitive.CheckboxItemIndicator></span>
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "data-highlighted:bg-muted data-highlighted:text-muted-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.CheckboxItemIndicator>
+      </span>
       {children}
     </DropdownMenuPrimitive.CheckboxItem>
   );
 }
 
-function DropdownMenuRadioGroup(props: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+function DropdownMenuRadioGroup(
+  props: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>,
+) {
   return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
 }
 
-function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
   return (
-    <DropdownMenuPrimitive.RadioItem data-slot="dropdown-menu-radio-item" className={cn("data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50", className)} {...props}>
-      <span className="absolute left-2 flex size-3.5 items-center justify-center"><DropdownMenuPrimitive.RadioItemIndicator><CircleIcon className="size-2 fill-current" /></DropdownMenuPrimitive.RadioItemIndicator></span>
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "data-highlighted:bg-muted data-highlighted:text-muted-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.RadioItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.RadioItemIndicator>
+      </span>
       {children}
     </DropdownMenuPrimitive.RadioItem>
   );
 }
 
-function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
-  return <DropdownMenuPrimitive.Separator data-slot="dropdown-menu-separator" className={cn("bg-border -mx-1 my-1 h-px", className)} {...props} />;
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
 }
 
 function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
-  return <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />;
+  return (
+    <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
+  );
 }
 
 function DropdownMenuSub(props: React.ComponentProps<typeof DropdownMenuPrimitive.SubmenuRoot>) {
   return <DropdownMenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />;
 }
 
-function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubmenuTrigger> & { inset?: boolean }) {
-  return <DropdownMenuPrimitive.SubmenuTrigger data-slot="dropdown-menu-sub-trigger" data-inset={inset} className={cn("data-highlighted:bg-accent data-highlighted:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8", className)} {...props}>{children}<ChevronRightIcon className="ml-auto size-4" /></DropdownMenuPrimitive.SubmenuTrigger>;
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubmenuTrigger> & { inset?: boolean }) {
+  return (
+    <DropdownMenuPrimitive.SubmenuTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "data-highlighted:bg-muted data-highlighted:text-muted-foreground data-open:bg-muted data-open:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubmenuTrigger>
+  );
 }
 
-function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Popup>) {
-  return <DropdownMenuPrimitive.Popup data-slot="dropdown-menu-sub-content" className={cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg outline-none", className)} {...props} />;
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Popup>) {
+  return (
+    <DropdownMenuPrimitive.Popup
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg outline-none",
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
 export {

package/src/components/overlays/popover.tsx

@@ -7,11 +7,17 @@ function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root
   return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 }
 
-function PopoverTrigger({ asChild, children, ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger> & { asChild?: boolean }) {
+function PopoverTrigger({
+  asChild,
+  children,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger> & { asChild?: boolean }) {
   return (
     <PopoverPrimitive.Trigger
       data-slot="popover-trigger"
-      {...(asChild && React.isValidElement(children) ? { render: children as React.ReactElement } : {})}
+      {...(asChild && React.isValidElement(children)
+        ? { render: children as React.ReactElement }
+        : {})}
       {...props}
     >
       {!asChild && children}
@@ -35,7 +41,12 @@ function PopoverContent({
 }) {
   return (
     <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Positioner align={align} side={side} sideOffset={sideOffset} collisionAvoidance={avoidCollisions ? undefined : { side: "none", align: "none" }}>
+      <PopoverPrimitive.Positioner
+        align={align}
+        side={side}
+        sideOffset={sideOffset}
+        collisionAvoidance={avoidCollisions ? undefined : { side: "none", align: "none" }}
+      >
         <PopoverPrimitive.Popup
           data-slot="popover-content"
           className={cn(