@adea-ai/ui 0.12.0 → 0.12.1

package/src/components/on-screen-controls.tsx

@@ -1,68 +1,68 @@
-"use client";
+'use client'
 
-import { useCallback, useEffect, useRef } from "react";
-import type { PointerEvent, ReactNode } from "react";
-import { ZoomIn, ZoomOut } from "lucide-react";
-import { Button } from "#components/ui/button";
-import { cn } from "#lib/utils";
+import { useCallback, useEffect, useRef } from 'react'
+import type { PointerEvent, ReactNode } from 'react'
+import { ZoomIn, ZoomOut } from 'lucide-react'
+import { Button } from '#components/ui/button'
+import { cn } from '#lib/utils'
 type ControlButtonProps = {
-  code: string;
-  label: string;
-  children: ReactNode;
-  className?: string;
-};
+  code: string
+  label: string
+  children: ReactNode
+  className?: string
+}
 
-function sendKeyEvent(type: "keydown" | "keyup", code: string): void {
+function sendKeyEvent(type: 'keydown' | 'keyup', code: string): void {
   window.dispatchEvent(
     new KeyboardEvent(type, { bubbles: true, cancelable: true, code, key: code })
-  );
+  )
 }
 
 function ControlButton({ code, label, children, className }: ControlButtonProps) {
-  const pressed = useRef(false);
-  const pressedPointer = useRef<number | null>(null);
+  const pressed = useRef(false)
+  const pressedPointer = useRef<number | null>(null)
 
   const release = useCallback(() => {
-    if (!pressed.current) return;
-    pressed.current = false;
-    pressedPointer.current = null;
-    sendKeyEvent("keyup", code);
-  }, [code]);
+    if (!pressed.current) return
+    pressed.current = false
+    pressedPointer.current = null
+    sendKeyEvent('keyup', code)
+  }, [code])
 
   // Self-heal: release the key if the pointerup lands elsewhere (e.g. the
   // scene DOM changes mid-teleport) or the window loses focus. PointerId
   // matching preserves multi-touch.
   useEffect(() => {
     const onWindowPointerUp = (event: globalThis.PointerEvent) => {
-      if (pressedPointer.current === event.pointerId) release();
-    };
-    const onBlur = () => release();
-    window.addEventListener("pointerup", onWindowPointerUp);
-    window.addEventListener("blur", onBlur);
+      if (pressedPointer.current === event.pointerId) release()
+    }
+    const onBlur = () => release()
+    window.addEventListener('pointerup', onWindowPointerUp)
+    window.addEventListener('blur', onBlur)
     return () => {
-      window.removeEventListener("pointerup", onWindowPointerUp);
-      window.removeEventListener("blur", onBlur);
-    };
-  }, [release]);
+      window.removeEventListener('pointerup', onWindowPointerUp)
+      window.removeEventListener('blur', onBlur)
+    }
+  }, [release])
 
   const press = useCallback(
     (event: PointerEvent<HTMLButtonElement>) => {
-      event.preventDefault();
-      if (pressed.current) return;
-      pressed.current = true;
-      pressedPointer.current = event.pointerId;
-      event.currentTarget.setPointerCapture(event.pointerId);
-      sendKeyEvent("keydown", code);
+      event.preventDefault()
+      if (pressed.current) return
+      pressed.current = true
+      pressedPointer.current = event.pointerId
+      event.currentTarget.setPointerCapture(event.pointerId)
+      sendKeyEvent('keydown', code)
     },
     [code]
-  );
+  )
 
   return (
     <button
       type="button"
       aria-label={label}
       className={cn(
-        "flex size-14 touch-none select-none items-center justify-center rounded-2xl border border-white/25 bg-slate-950/65 p-2 text-white shadow-lg backdrop-blur-sm transition active:scale-95 [-webkit-touch-callout:none] [-webkit-user-select:none]",
+        'flex size-14 touch-none select-none items-center justify-center rounded-2xl border border-white/25 bg-slate-950/65 p-2 text-white shadow-lg backdrop-blur-sm transition active:scale-95 [-webkit-touch-callout:none] [-webkit-user-select:none]',
         className
       )}
       onContextMenu={(event) => event.preventDefault()}
@@ -73,15 +73,15 @@ function ControlButton({ code, label, children, className }: ControlButtonProps)
     >
       {children}
     </button>
-  );
+  )
 }
 
 export type OnScreenControlsProps = {
-  onZoomIn?: () => void;
-  onZoomOut?: () => void;
-  showMovementControls?: boolean;
-  showJumpControl?: boolean;
-};
+  onZoomIn?: () => void
+  onZoomOut?: () => void
+  showMovementControls?: boolean
+  showJumpControl?: boolean
+}
 
 export function OnScreenControls({
   onZoomIn,
@@ -89,7 +89,7 @@ export function OnScreenControls({
   showMovementControls = true,
   showJumpControl = true,
 }: OnScreenControlsProps = {}) {
-  const showZoomControls = Boolean(onZoomIn && onZoomOut);
+  const showZoomControls = Boolean(onZoomIn && onZoomOut)
 
   return (
     <div
@@ -152,5 +152,5 @@ export function OnScreenControls({
         ) : null}
       </div>
     </div>
-  );
+  )
 }

package/src/components/scene-settings.tsx

@@ -1,54 +1,54 @@
-"use client";
+'use client'
 
-import { createPortal } from "react-dom";
-import { useEffect, useState, type ReactNode } from "react";
-import { Box, Camera, Focus, Grid3X3, UserRoundPen } from "lucide-react";
-import { AccountDrawer } from "./account-drawer";
-import { Button } from "#components/ui/button";
+import { createPortal } from 'react-dom'
+import { useEffect, useState, type ReactNode } from 'react'
+import { Box, Camera, Focus, Grid3X3, UserRoundPen } from 'lucide-react'
+import { AccountDrawer } from './account-drawer'
+import { Button } from '#components/ui/button'
 
 export type SceneSettingsProps = {
-  cameraViewMode: "perspective" | "orthographic";
-  onCameraViewModeChange: (value: "perspective" | "orthographic") => void;
-  allowCameraViewModeChange?: boolean;
+  cameraViewMode: 'perspective' | 'orthographic'
+  onCameraViewModeChange: (value: 'perspective' | 'orthographic') => void
+  allowCameraViewModeChange?: boolean
   /** Standalone character selection and customization menu toggle. */
-  characterDesignerEnabled?: boolean;
-  onCharacterDesignerChange?: (value: boolean) => void;
+  characterDesignerEnabled?: boolean
+  onCharacterDesignerChange?: (value: boolean) => void
   /** DOM target for the character designer control in an app shell toolbar. */
-  characterDesignerTargetId?: string;
+  characterDesignerTargetId?: string
   /** Open the scene-specific room layout and interior prop designer. */
-  onOpenRoomDesigner?: () => void;
+  onOpenRoomDesigner?: () => void
   /** DOM target for the account drawer trigger in an app shell toolbar. */
-  accountTargetId?: string;
-  accountLabel?: string;
-  accountAuthenticated?: boolean;
-  accountBusy?: boolean;
-  accountMusicControl?: ReactNode;
-  onAccountSignIn?: () => void;
-  onAccountSignOut?: () => void;
-  showAccountDrawer?: boolean;
+  accountTargetId?: string
+  accountLabel?: string
+  accountAuthenticated?: boolean
+  accountBusy?: boolean
+  accountMusicControl?: ReactNode
+  onAccountSignIn?: () => void
+  onAccountSignOut?: () => void
+  showAccountDrawer?: boolean
   /** DOM target for the compact camera controls in an app shell toolbar. */
-  cameraTargetId?: string;
+  cameraTargetId?: string
   /** DOM target for the room designer control in an app shell toolbar. */
-  roomDesignerTargetId?: string;
+  roomDesignerTargetId?: string
   /** DOM target for the development scene editor control in an app shell toolbar. */
-  sceneEditorTargetId?: string;
+  sceneEditorTargetId?: string
   /** Development-only scene editor toggle, available in perspective view. */
-  sceneEditorEnabled?: boolean;
-  onSceneEditorChange?: (value: boolean) => void;
-};
+  sceneEditorEnabled?: boolean
+  onSceneEditorChange?: (value: boolean) => void
+}
 
 function usePortalTarget(targetId?: string) {
-  const [target, setTarget] = useState<HTMLElement | null>(null);
+  const [target, setTarget] = useState<HTMLElement | null>(null)
 
   useEffect(() => {
-    setTarget(targetId ? document.getElementById(targetId) : null);
-  }, [targetId]);
+    setTarget(targetId ? document.getElementById(targetId) : null)
+  }, [targetId])
 
-  return target;
+  return target
 }
 
 function renderInTarget(content: ReactNode, target: HTMLElement | null) {
-  return target ? createPortal(content, target) : content;
+  return target ? createPortal(content, target) : content
 }
 
 /** Compact scene controls shared by the HQ shell and other scene hosts. */
@@ -74,22 +74,22 @@ export function SceneSettings({
   sceneEditorEnabled,
   onSceneEditorChange,
 }: SceneSettingsProps) {
-  const cameraTarget = usePortalTarget(cameraTargetId);
-  const characterDesignerTarget = usePortalTarget(characterDesignerTargetId);
-  const roomDesignerTarget = usePortalTarget(roomDesignerTargetId);
-  const sceneEditorTarget = usePortalTarget(sceneEditorTargetId);
+  const cameraTarget = usePortalTarget(cameraTargetId)
+  const characterDesignerTarget = usePortalTarget(characterDesignerTargetId)
+  const roomDesignerTarget = usePortalTarget(roomDesignerTargetId)
+  const sceneEditorTarget = usePortalTarget(sceneEditorTargetId)
 
   const cameraControl = (
     <div className="workspace-camera-control" role="group" aria-label="Camera view">
       <Button
         type="button"
         size="sm"
-        variant={cameraViewMode === "perspective" ? "default" : "outline"}
+        variant={cameraViewMode === 'perspective' ? 'default' : 'outline'}
         className="workspace-camera-button"
         aria-label="Perspective camera"
         title="Perspective camera"
-        aria-pressed={cameraViewMode === "perspective"}
-        onClick={() => onCameraViewModeChange("perspective")}
+        aria-pressed={cameraViewMode === 'perspective'}
+        onClick={() => onCameraViewModeChange('perspective')}
       >
         <Camera aria-hidden="true" />
         Perspective
@@ -97,34 +97,34 @@ export function SceneSettings({
       <Button
         type="button"
         size="sm"
-        variant={cameraViewMode === "orthographic" ? "default" : "outline"}
+        variant={cameraViewMode === 'orthographic' ? 'default' : 'outline'}
         className="workspace-camera-button"
         aria-label="Top-down camera"
         title="Top-down camera"
-        aria-pressed={cameraViewMode === "orthographic"}
-        onClick={() => onCameraViewModeChange("orthographic")}
+        aria-pressed={cameraViewMode === 'orthographic'}
+        onClick={() => onCameraViewModeChange('orthographic')}
       >
         <Focus aria-hidden="true" />
         Top-down
       </Button>
     </div>
-  );
+  )
 
   const characterDesignerControl = (
     <Button
       type="button"
-      variant={characterDesignerEnabled ? "default" : "outline"}
+      variant={characterDesignerEnabled ? 'default' : 'outline'}
       size="sm"
       aria-haspopup="dialog"
-      aria-label={characterDesignerEnabled ? "Close character designer" : "Open character designer"}
-      title={characterDesignerEnabled ? "Close character designer" : "Open character designer"}
+      aria-label={characterDesignerEnabled ? 'Close character designer' : 'Open character designer'}
+      title={characterDesignerEnabled ? 'Close character designer' : 'Open character designer'}
       aria-pressed={characterDesignerEnabled}
       onClick={() => onCharacterDesignerChange?.(!characterDesignerEnabled)}
     >
       <UserRoundPen className="size-4" aria-hidden="true" />
       <span className="workspace-character-designer-label">Character</span>
     </Button>
-  );
+  )
 
   const roomDesignerControl = (
     <Button
@@ -139,23 +139,23 @@ export function SceneSettings({
       <Grid3X3 className="size-4" aria-hidden="true" />
       <span className="workspace-room-designer-label">Room designer</span>
     </Button>
-  );
+  )
 
   const sceneEditorControl = (
     <Button
       type="button"
-      variant={sceneEditorEnabled ? "default" : "outline"}
+      variant={sceneEditorEnabled ? 'default' : 'outline'}
       size="sm"
       aria-haspopup="dialog"
-      aria-label={sceneEditorEnabled ? "Close scene editor" : "Open scene editor"}
-      title={sceneEditorEnabled ? "Close scene editor" : "Open scene editor"}
+      aria-label={sceneEditorEnabled ? 'Close scene editor' : 'Open scene editor'}
+      title={sceneEditorEnabled ? 'Close scene editor' : 'Open scene editor'}
       aria-pressed={sceneEditorEnabled}
       onClick={() => onSceneEditorChange?.(!sceneEditorEnabled)}
     >
       <Box className="size-4" aria-hidden="true" />
       <span className="workspace-scene-editor-label">Scene editor</span>
     </Button>
-  );
+  )
 
   return (
     <>
@@ -180,7 +180,7 @@ export function SceneSettings({
           <div className="fixed right-4 top-16 z-40">{characterDesignerControl}</div>
         )
       ) : null}
-      {onOpenRoomDesigner && cameraViewMode === "orthographic" ? (
+      {onOpenRoomDesigner && cameraViewMode === 'orthographic' ? (
         roomDesignerTarget ? (
           createPortal(roomDesignerControl, roomDesignerTarget)
         ) : (
@@ -190,7 +190,7 @@ export function SceneSettings({
       {sceneEditorEnabled != null &&
       !sceneEditorEnabled &&
       onSceneEditorChange &&
-      cameraViewMode === "perspective" ? (
+      cameraViewMode === 'perspective' ? (
         sceneEditorTarget ? (
           createPortal(sceneEditorControl, sceneEditorTarget)
         ) : (
@@ -198,5 +198,5 @@ export function SceneSettings({
         )
       ) : null}
     </>
-  );
+  )
 }

package/src/components/theme-provider.tsx

@@ -1,19 +1,19 @@
-"use client";
+'use client'
 
-import { ThemeProvider as NextThemesProvider } from "next-themes";
-import type { ComponentProps, ReactElement, ReactNode } from "react";
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+import type { ComponentProps, ReactElement, ReactNode } from 'react'
 
 // Bun 1.4 can resolve next-themes against a separate React type instance. The
 // runtime component is compatible, but TypeScript then drops `children` from
 // its JSX props. Keep the shared provider's public contract stable by
 // normalizing the third-party component's props at this boundary.
 type CompatibleNextThemesProviderProps = ComponentProps<typeof NextThemesProvider> & {
-  children?: ReactNode;
-};
+  children?: ReactNode
+}
 
 const CompatibleNextThemesProvider = NextThemesProvider as unknown as (
   props: CompatibleNextThemesProviderProps
-) => ReactElement;
+) => ReactElement
 
 /** Shared theme provider used by each Next app in the workspace. */
 export function ThemeProvider({ children }: { children: ReactNode }) {
@@ -26,5 +26,5 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     >
       {children}
     </CompatibleNextThemesProvider>
-  );
+  )
 }

package/src/components/theme-toggle.tsx

@@ -1,32 +1,32 @@
-"use client";
+'use client'
 
-import { useSyncExternalStore } from "react";
-import { Monitor, Moon, Sun } from "lucide-react";
-import { useTheme } from "next-themes";
-import { Button } from "#components/ui/button";
-import { cn } from "#lib/utils";
+import { useSyncExternalStore } from 'react'
+import { Monitor, Moon, Sun } from 'lucide-react'
+import { useTheme } from 'next-themes'
+import { Button } from '#components/ui/button'
+import { cn } from '#lib/utils'
 
 /**
  * Compact sun/moon theme selector. Wired to the next-themes provider so the
  * choice persists across the app (localStorage) and applies to every scene.
  */
 export function ThemeToggle({ className }: { className?: string }) {
-  const { theme, setTheme } = useTheme();
+  const { theme, setTheme } = useTheme()
   const mounted = useSyncExternalStore(
     () => () => undefined,
     () => true,
     () => false
-  );
+  )
 
   // next-themes resolves the saved/system theme after mount. Use the stable
   // light presentation for both SSR and the first client render so the
   // aria/class attributes cannot mismatch during hydration.
-  const selectedTheme = mounted ? theme : "system";
+  const selectedTheme = mounted ? theme : 'system'
 
   return (
     <div
       className={cn(
-        "inline-flex items-center gap-1.5 rounded-full border border-input bg-background p-1.5",
+        'inline-flex items-center gap-1.5 rounded-full border border-input bg-background p-1.5',
         className
       )}
       role="radiogroup"
@@ -35,11 +35,11 @@ export function ThemeToggle({ className }: { className?: string }) {
       <Button
         type="button"
         role="radio"
-        aria-checked={selectedTheme === "system"}
+        aria-checked={selectedTheme === 'system'}
         aria-label="System theme"
-        variant={selectedTheme === "system" ? "default" : "ghost"}
+        variant={selectedTheme === 'system' ? 'default' : 'ghost'}
         size="icon-sm"
-        onClick={() => setTheme("system")}
+        onClick={() => setTheme('system')}
         className="rounded-full"
       >
         <Monitor className="size-4" aria-hidden="true" />
@@ -47,11 +47,11 @@ export function ThemeToggle({ className }: { className?: string }) {
       <Button
         type="button"
         role="radio"
-        aria-checked={selectedTheme === "light"}
+        aria-checked={selectedTheme === 'light'}
         aria-label="Light theme"
-        variant={selectedTheme === "light" ? "default" : "ghost"}
+        variant={selectedTheme === 'light' ? 'default' : 'ghost'}
         size="icon-sm"
-        onClick={() => setTheme("light")}
+        onClick={() => setTheme('light')}
         className="rounded-full"
       >
         <Sun className="size-4" aria-hidden="true" />
@@ -59,15 +59,15 @@ export function ThemeToggle({ className }: { className?: string }) {
       <Button
         type="button"
         role="radio"
-        aria-checked={selectedTheme === "dark"}
+        aria-checked={selectedTheme === 'dark'}
         aria-label="Dark theme"
-        variant={selectedTheme === "dark" ? "default" : "ghost"}
+        variant={selectedTheme === 'dark' ? 'default' : 'ghost'}
         size="icon-sm"
-        onClick={() => setTheme("dark")}
+        onClick={() => setTheme('dark')}
         className="rounded-full"
       >
         <Moon className="size-4" aria-hidden="true" />
       </Button>
     </div>
-  );
+  )
 }

package/src/components/ui/badge.tsx

@@ -1,38 +1,38 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-import { cva, type VariantProps } from "class-variance-authority";
+import { mergeProps } from '@base-ui/react/merge-props'
+import { useRender } from '@base-ui/react/use-render'
+import { cva, type VariantProps } from 'class-variance-authority'
 
-import { cn } from "#lib/utils";
+import { cn } from '#lib/utils'
 
 const badgeVariants = cva(
-  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
         destructive:
-          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
-        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
-        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-        link: "text-primary underline-offset-4 hover:underline",
+          'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
+        outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
+        ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
+        link: 'text-primary underline-offset-4 hover:underline',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
     },
   }
-);
+)
 
 function Badge({
   className,
-  variant = "default",
+  variant = 'default',
   render,
   ...props
-}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+}: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {
   return useRender({
-    defaultTagName: "span",
-    props: mergeProps<"span">(
+    defaultTagName: 'span',
+    props: mergeProps<'span'>(
       {
         className: cn(badgeVariants({ variant }), className),
       },
@@ -40,10 +40,10 @@ function Badge({
     ),
     render,
     state: {
-      slot: "badge",
+      slot: 'badge',
       variant,
     },
-  });
+  })
 }
 
-export { Badge, badgeVariants };
+export { Badge, badgeVariants }

package/src/components/ui/button.tsx

@@ -1,51 +1,51 @@
-import { Button as ButtonPrimitive } from "@base-ui/react/button";
-import { cva, type VariantProps } from "class-variance-authority";
+import { Button as ButtonPrimitive } from '@base-ui/react/button'
+import { cva, type VariantProps } from 'class-variance-authority'
 
-import { cn } from "#lib/utils";
+import { cn } from '#lib/utils'
 
 const buttonVariants = cva(
   "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        default: 'bg-primary text-primary-foreground hover:bg-primary/80',
         outline:
-          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+          'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+          'bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
         ghost:
-          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+          'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
         destructive:
-          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+          'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
         success:
-          "bg-[#1a7f37]/10 text-[#1a7f37] hover:bg-[#1a7f37]/20 focus-visible:border-[#1a7f37]/40 focus-visible:ring-[#1a7f37]/20 dark:bg-[#3fb950]/20 dark:text-[#7ee787] dark:hover:bg-[#3fb950]/30 dark:focus-visible:ring-[#3fb950]/40",
-        link: "text-primary underline-offset-4 hover:underline",
+          'bg-[#1a7f37]/10 text-[#1a7f37] hover:bg-[#1a7f37]/20 focus-visible:border-[#1a7f37]/40 focus-visible:ring-[#1a7f37]/20 dark:bg-[#3fb950]/20 dark:text-[#7ee787] dark:hover:bg-[#3fb950]/30 dark:focus-visible:ring-[#3fb950]/40',
+        link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
         default:
-          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+          'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
         xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
         sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        icon: "size-8",
-        "icon-xs":
+        lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        icon: 'size-8',
+        'icon-xs':
           "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm":
-          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
-        "icon-lg": "size-9",
+        'icon-sm':
+          'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+        'icon-lg': 'size-9',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
   }
-);
+)
 
 function Button({
   className,
-  variant = "default",
-  size = "default",
+  variant = 'default',
+  size = 'default',
   ...props
 }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
   return (
@@ -54,7 +54,7 @@ function Button({
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     />
-  );
+  )
 }
 
-export { Button, buttonVariants };
+export { Button, buttonVariants }