@arolariu/components 0.0.38 → 0.0.39

package/src/components/ui/fireworks-background.tsx

@@ -36,7 +36,7 @@ const createParticle = (
   direction: number,
   gravity: number,
   friction: number,
-  size: number
+  size: number,
 ): ParticleType => {
   const vx = Math.cos(direction) * speed;
   const vy = Math.sin(direction) * speed;
@@ -106,7 +106,7 @@ const createFirework = (
   size: number,
   particleSpeed: { min: number; max: number } | number,
   particleSize: { min: number; max: number } | number,
-  onExplode: (particles: ParticleType[]) => void
+  onExplode: (particles: ParticleType[]) => void,
 ): FireworkType => {
   const angle = -Math.PI / 2 + rand(-0.3, 0.3);
   const vx = Math.cos(angle) * speed;
@@ -157,8 +157,8 @@ const createFirework = (
             particleAngle,
             0.05,
             0.98,
-            localParticleSize
-          )
+            localParticleSize,
+          ),
         );
       }
       onExplode(particles);
@@ -185,7 +185,7 @@ const createFirework = (
 };
 
 const getValueByRange = (
-  range: { min: number; max: number } | number
+  range: { min: number; max: number } | number,
 ): number => {
   if (typeof range === "number") {
     return range;
@@ -227,13 +227,13 @@ const FireworksBackground = React.forwardRef<
       particleSize = { min: 1, max: 5 },
       ...props
     },
-    ref
+    ref,
   ) => {
     const canvasRef = React.useRef<HTMLCanvasElement>(null);
     const containerRef = React.useRef<HTMLDivElement>(null);
     React.useImperativeHandle(
       ref,
-      () => containerRef.current as HTMLDivElement
+      () => containerRef.current as HTMLDivElement,
     );
 
     React.useEffect(() => {
@@ -282,8 +282,8 @@ const FireworksBackground = React.forwardRef<
             size,
             particleSpeed,
             particleSize,
-            handleExplosion
-          )
+            handleExplosion,
+          ),
         );
         const timeout = rand(300, 800) / population;
         setTimeout(launchFirework, timeout);
@@ -336,8 +336,8 @@ const FireworksBackground = React.forwardRef<
             size,
             particleSpeed,
             particleSize,
-            handleExplosion
-          )
+            handleExplosion,
+          ),
         );
       };
 
@@ -370,7 +370,7 @@ const FireworksBackground = React.forwardRef<
         />
       </div>
     );
-  }
+  },
 );
 
 FireworksBackground.displayName = "FireworksBackground";

package/src/components/ui/flip-button.tsx

@@ -36,7 +36,7 @@ const FlipButton = React.forwardRef<HTMLButtonElement, FlipButtonProps>(
       from = "top",
       ...props
     },
-    ref
+    ref,
   ) => {
     const isVertical = from === "top" || from === "bottom";
     const rotateAxis = isVertical ? "rotateX" : "rotateY";
@@ -47,7 +47,7 @@ const FlipButton = React.forwardRef<HTMLButtonElement, FlipButtonProps>(
     const buildVariant = (
       opacity: number,
       rotation: number,
-      offset: string | null = null
+      offset: string | null = null,
     ): Variant => ({
       opacity,
       [rotateAxis]: rotation,
@@ -73,7 +73,7 @@ const FlipButton = React.forwardRef<HTMLButtonElement, FlipButtonProps>(
         whileTap={{ scale: 0.95 }}
         className={cn(
           "relative inline-block h-10 px-4 py-2 text-sm font-medium cursor-pointer perspective-[1000px] focus:outline-none",
-          className
+          className,
         )}
         {...props}
       >
@@ -83,7 +83,7 @@ const FlipButton = React.forwardRef<HTMLButtonElement, FlipButtonProps>(
           className={cn(
             defaultSpanClassName,
             "bg-muted text-black dark:text-white",
-            frontClassName
+            frontClassName,
           )}
         >
           {frontText}
@@ -94,7 +94,7 @@ const FlipButton = React.forwardRef<HTMLButtonElement, FlipButtonProps>(
           className={cn(
             defaultSpanClassName,
             "bg-primary text-primary-foreground",
-            backClassName
+            backClassName,
           )}
         >
           {backText}
@@ -102,7 +102,7 @@ const FlipButton = React.forwardRef<HTMLButtonElement, FlipButtonProps>(
         <span className="invisible">{frontText}</span>
       </motion.button>
     );
-  }
+  },
 );
 
 FlipButton.displayName = "FlipButton";

package/src/components/ui/form.tsx

@@ -20,18 +20,18 @@ const Form = FormProvider;
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
   name: TName;
 };
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
+  {} as FormFieldContextValue,
 );
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
   ...props
 }: ControllerProps<TFieldValues, TName>) => {
@@ -70,7 +70,7 @@ type FormItemContextValue = {
 };
 
 const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
+  {} as FormItemContextValue,
 );
 
 function FormItem({ className, ...props }: React.ComponentProps<"div">) {
@@ -99,7 +99,7 @@ function FormLabel({
       data-error={!!error}
       className={cn(
         "data-[error=true]:text-red-500 dark:data-[error=true]:text-red-900",
-        className
+        className,
       )}
       htmlFor={formItemId}
       {...props}
@@ -135,7 +135,7 @@ function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
       id={formDescriptionId}
       className={cn(
         "text-neutral-500 text-sm dark:text-neutral-400",
-        className
+        className,
       )}
       {...props}
     />

package/src/components/ui/gradient-background.tsx

@@ -19,14 +19,14 @@ const GradientBackground = React.forwardRef<
       transition = { duration: 15, ease: "easeInOut", repeat: Infinity },
       ...props
     },
-    ref
+    ref,
   ) => {
     return (
       <motion.div
         ref={ref}
         className={cn(
           "size-full bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 bg-[length:400%_400%]",
-          className
+          className,
         )}
         animate={{
           backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"],
@@ -35,7 +35,7 @@ const GradientBackground = React.forwardRef<
         {...props}
       />
     );
-  }
+  },
 );
 
 GradientBackground.displayName = "GradientBackground";

package/src/components/ui/gradient-text.tsx

@@ -22,7 +22,7 @@ const GradientText = React.forwardRef<HTMLSpanElement, GradientTextProps>(
       transition = { duration: 50, repeat: Infinity, ease: "linear" },
       ...props
     },
-    ref
+    ref,
   ) => {
     const baseStyle: React.CSSProperties = {
       backgroundImage: gradient,
@@ -57,7 +57,7 @@ const GradientText = React.forwardRef<HTMLSpanElement, GradientTextProps>(
         )}
       </span>
     );
-  }
+  },
 );
 
 GradientText.displayName = "GradientText";

package/src/components/ui/highlight-text.tsx

@@ -31,7 +31,7 @@ const HighlightText = React.forwardRef<HTMLSpanElement, HighlightTextProps>(
       transition = { duration: 2, ease: "easeInOut" },
       ...props
     },
-    ref
+    ref,
   ) => {
     const localRef = React.useRef<HTMLSpanElement>(null);
     React.useImperativeHandle(ref, () => localRef.current as HTMLSpanElement);
@@ -57,14 +57,14 @@ const HighlightText = React.forwardRef<HTMLSpanElement, HighlightTextProps>(
         }}
         className={cn(
           `relative inline-block px-2 py-1 rounded-lg bg-gradient-to-r from-blue-100 to-purple-100 dark:from-blue-500 dark:to-purple-500`,
-          className
+          className,
         )}
         {...props}
       >
         {text}
       </motion.span>
     );
-  }
+  },
 );
 HighlightText.displayName = "HighlightText";
 

package/src/components/ui/hole-background.tsx

@@ -23,12 +23,12 @@ const HoleBackground = React.forwardRef<HTMLCanvasElement, HoleBackgroundProps>(
       children,
       ...props
     },
-    ref
+    ref,
   ) => {
     const canvasRef = React.useRef<HTMLCanvasElement>(null);
     React.useImperativeHandle(
       ref,
-      () => canvasRef.current as HTMLCanvasElement
+      () => canvasRef.current as HTMLCanvasElement,
     );
 
     const animationFrameIdRef = React.useRef<number>(0);
@@ -54,7 +54,7 @@ const HoleBackground = React.forwardRef<HTMLCanvasElement, HoleBackgroundProps>(
         const easeFn = ease === "inExpo" ? easeInExpo : linear;
         return start + delta * easeFn(p);
       },
-      []
+      [],
     );
 
     const tweenDisc = React.useCallback(
@@ -65,7 +65,7 @@ const HoleBackground = React.forwardRef<HTMLCanvasElement, HoleBackgroundProps>(
         disc.w = tweenValue(startDisc.w, endDisc.w, disc.p);
         disc.h = tweenValue(startDisc.h, endDisc.h, disc.p);
       },
-      [tweenValue]
+      [tweenValue],
     );
 
     const setSize = React.useCallback(() => {
@@ -228,7 +228,7 @@ const HoleBackground = React.forwardRef<HTMLCanvasElement, HoleBackgroundProps>(
           outerDisc.h,
           0,
           0,
-          Math.PI * 2
+          Math.PI * 2,
         );
         ctx.stroke();
         ctx.closePath();
@@ -247,7 +247,7 @@ const HoleBackground = React.forwardRef<HTMLCanvasElement, HoleBackgroundProps>(
           }
         });
       },
-      [strokeColor]
+      [strokeColor],
     );
 
     const drawLines = React.useCallback((ctx: CanvasRenderingContext2D) => {
@@ -335,7 +335,7 @@ const HoleBackground = React.forwardRef<HTMLCanvasElement, HoleBackgroundProps>(
           "relative size-full overflow-hidden",
           'before:content-[""] before:absolute before:top-1/2 before:left-1/2 before:block before:size-[140%] dark:before:[background:radial-gradient(ellipse_at_50%_55%,transparent_10%,black_50%)] before:[background:radial-gradient(ellipse_at_50%_55%,transparent_10%,white_50%)] before:[transform:translate3d(-50%,-50%,0)]',
           'after:content-[""] after:absolute after:z-[5] after:top-1/2 after:left-1/2 after:block after:size-full after:[background:radial-gradient(ellipse_at_50%_75%,#a900ff_20%,transparent_75%)] after:[transform:translate3d(-50%,-50%,0)] after:mix-blend-overlay',
-          className
+          className,
         )}
       >
         {children}
@@ -347,7 +347,7 @@ const HoleBackground = React.forwardRef<HTMLCanvasElement, HoleBackgroundProps>(
         <motion.div
           className={cn(
             "absolute top-[-71.5%] left-1/2 z-[3] w-[30%] h-[140%] rounded-b-full blur-3xl opacity-75 dark:mix-blend-plus-lighter mix-blend-plus-darker [transform:translate3d(-50%,0,0)] [background-position:0%_100%] [background-size:100%_200%]",
-            "dark:[background:linear-gradient(20deg,#00f8f1,#ffbd1e20_16.5%,#fe848f_33%,#fe848f20_49.5%,#00f8f1_66%,#00f8f160_85.5%,#ffbd1e_100%)_0_100%_/_100%_200%] [background:linear-gradient(20deg,#00f8f1,#ffbd1e40_16.5%,#fe848f_33%,#fe848f40_49.5%,#00f8f1_66%,#00f8f180_85.5%,#ffbd1e_100%)_0_100%_/_100%_200%]"
+            "dark:[background:linear-gradient(20deg,#00f8f1,#ffbd1e20_16.5%,#fe848f_33%,#fe848f20_49.5%,#00f8f1_66%,#00f8f160_85.5%,#ffbd1e_100%)_0_100%_/_100%_200%] [background:linear-gradient(20deg,#00f8f1,#ffbd1e40_16.5%,#fe848f_33%,#fe848f40_49.5%,#00f8f1_66%,#00f8f180_85.5%,#ffbd1e_100%)_0_100%_/_100%_200%]",
           )}
           animate={{ backgroundPosition: "0% 300%" }}
           transition={{ duration: 5, ease: "linear", repeat: Infinity }}
@@ -355,7 +355,7 @@ const HoleBackground = React.forwardRef<HTMLCanvasElement, HoleBackgroundProps>(
         <div className="absolute top-0 left-0 z-[7] size-full dark:[background:repeating-linear-gradient(transparent,transparent_1px,white_1px,white_2px)] mix-blend-overlay opacity-50" />
       </div>
     );
-  }
+  },
 );
 
 export { HoleBackground, type HoleBackgroundProps };

package/src/components/ui/hover-card.tsx

@@ -33,7 +33,7 @@ function HoverCardContent({
         sideOffset={sideOffset}
         className={cn(
           "bg-white text-neutral-950 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border border-neutral-200 p-4 shadow-md outline-hidden dark:bg-neutral-950 dark:text-neutral-50 dark:border-neutral-800",
-          className
+          className,
         )}
         {...props}
       />

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

@@ -18,7 +18,7 @@ function InputOTP({
       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}
@@ -52,7 +52,7 @@ function InputOTPSlot({
       data-active={isActive}
       className={cn(
         "data-[active=true]:border-neutral-950 data-[active=true]:ring-neutral-950/50 data-[active=true]:aria-invalid:ring-red-500/20 dark:data-[active=true]:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 data-[active=true]:aria-invalid:border-red-500 dark:bg-neutral-200/30 border-neutral-200 relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px] dark:data-[active=true]:border-neutral-300 dark:data-[active=true]:ring-neutral-300/50 dark:data-[active=true]:aria-invalid:ring-red-900/20 dark:dark:data-[active=true]:aria-invalid:ring-red-900/40 dark:aria-invalid:border-red-900 dark:data-[active=true]:aria-invalid:border-red-900 dark:dark:bg-neutral-800/30 dark:border-neutral-800",
-        className
+        className,
       )}
       {...props}
     >

package/src/components/ui/input.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
+import * as React from "react";
+import { cn } from "@/lib/utils";
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
@@ -13,11 +12,11 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
         "file:text-neutral-950 placeholder:text-neutral-500 selection:bg-neutral-900 selection:text-neutral-50 dark:bg-neutral-200/30 border-neutral-200 flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:file:text-neutral-50 dark:placeholder:text-neutral-400 dark:selection:bg-neutral-50 dark:selection:text-neutral-900 dark:dark:bg-neutral-800/30 dark:border-neutral-800",
         "focus-visible:border-neutral-950 focus-visible:ring-neutral-950/50 focus-visible:ring-[3px] dark:focus-visible:border-neutral-300 dark:focus-visible:ring-neutral-300/50",
         "aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 dark:aria-invalid:ring-red-900/20 dark:dark:aria-invalid:ring-red-900/40 dark:aria-invalid:border-red-900",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Input }
+export { Input };

package/src/components/ui/label.tsx

@@ -14,7 +14,7 @@ function Label({
       data-slot="label"
       className={cn(
         "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     />

package/src/components/ui/menubar.tsx

@@ -15,7 +15,7 @@ function Menubar({
       data-slot="menubar"
       className={cn(
         "bg-white flex h-9 items-center gap-1 rounded-md border border-neutral-200 p-1 shadow-xs dark:bg-neutral-950 dark:border-neutral-800",
-        className
+        className,
       )}
       {...props}
     />
@@ -57,7 +57,7 @@ function MenubarTrigger({
       data-slot="menubar-trigger"
       className={cn(
         "focus:bg-neutral-100 focus:text-neutral-900 data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-900 flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none dark:focus:bg-neutral-800 dark:focus:text-neutral-50 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-50",
-        className
+        className,
       )}
       {...props}
     />
@@ -80,7 +80,7 @@ function MenubarContent({
         sideOffset={sideOffset}
         className={cn(
           "bg-white text-neutral-950 data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border border-neutral-200 p-1 shadow-md dark:bg-neutral-950 dark:text-neutral-50 dark:border-neutral-800",
-          className
+          className,
         )}
         {...props}
       />
@@ -104,7 +104,7 @@ function MenubarItem({
       data-variant={variant}
       className={cn(
         "focus:bg-neutral-100 focus:text-neutral-900 data-[variant=destructive]:text-red-500 data-[variant=destructive]:focus:bg-red-500/10 dark:data-[variant=destructive]:focus:bg-red-500/20 data-[variant=destructive]:focus:text-red-500 data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-neutral-500 relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:focus:bg-neutral-800 dark:focus:text-neutral-50 dark:data-[variant=destructive]:text-red-900 dark:data-[variant=destructive]:focus:bg-red-900/10 dark:dark:data-[variant=destructive]:focus:bg-red-900/20 dark:data-[variant=destructive]:focus:text-red-900 dark:[&_svg:not([class*='text-'])]:text-neutral-400",
-        className
+        className,
       )}
       {...props}
     />
@@ -122,7 +122,7 @@ function MenubarCheckboxItem({
       data-slot="menubar-checkbox-item"
       className={cn(
         "focus:bg-neutral-100 focus:text-neutral-900 relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
-        className
+        className,
       )}
       checked={checked}
       {...props}
@@ -147,7 +147,7 @@ function MenubarRadioItem({
       data-slot="menubar-radio-item"
       className={cn(
         "focus:bg-neutral-100 focus:text-neutral-900 relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
-        className
+        className,
       )}
       {...props}
     >
@@ -174,7 +174,7 @@ function MenubarLabel({
       data-inset={inset}
       className={cn(
         "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
+        className,
       )}
       {...props}
     />
@@ -190,7 +190,7 @@ function MenubarSeparator({
       data-slot="menubar-separator"
       className={cn(
         "bg-neutral-200 -mx-1 my-1 h-px dark:bg-neutral-800",
-        className
+        className,
       )}
       {...props}
     />
@@ -206,7 +206,7 @@ function MenubarShortcut({
       data-slot="menubar-shortcut"
       className={cn(
         "text-neutral-500 ml-auto text-xs tracking-widest dark:text-neutral-400",
-        className
+        className,
       )}
       {...props}
     />
@@ -233,7 +233,7 @@ function MenubarSubTrigger({
       data-inset={inset}
       className={cn(
         "focus:bg-neutral-100 focus:text-neutral-900 data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-900 flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8 dark:focus:bg-neutral-800 dark:focus:text-neutral-50 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-50",
-        className
+        className,
       )}
       {...props}
     >
@@ -252,7 +252,7 @@ function MenubarSubContent({
       data-slot="menubar-sub-content"
       className={cn(
         "bg-white text-neutral-950 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border border-neutral-200 p-1 shadow-lg dark:bg-neutral-950 dark:text-neutral-50 dark:border-neutral-800",
-        className
+        className,
       )}
       {...props}
     />

package/src/components/ui/navigation-menu.tsx

@@ -21,7 +21,7 @@ function NavigationMenu({
       data-viewport={viewport}
       className={cn(
         "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
-        className
+        className,
       )}
       {...props}
     >
@@ -40,7 +40,7 @@ function NavigationMenuList({
       data-slot="navigation-menu-list"
       className={cn(
         "group flex flex-1 list-none items-center justify-center gap-1",
-        className
+        className,
       )}
       {...props}
     />
@@ -61,7 +61,7 @@ function NavigationMenuItem({
 }
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-white px-4 py-2 text-sm font-medium hover:bg-neutral-100 hover:text-neutral-900 focus:bg-neutral-100 focus:text-neutral-900 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-neutral-100 data-[state=open]:text-neutral-900 data-[state=open]:focus:bg-neutral-100 data-[state=open]:bg-neutral-100/50 focus-visible:ring-neutral-950/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50 dark:data-[state=open]:hover:bg-neutral-800 dark:data-[state=open]:text-neutral-50 dark:data-[state=open]:focus:bg-neutral-800 dark:data-[state=open]:bg-neutral-800/50 dark:focus-visible:ring-neutral-300/50"
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-white px-4 py-2 text-sm font-medium hover:bg-neutral-100 hover:text-neutral-900 focus:bg-neutral-100 focus:text-neutral-900 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-neutral-100 data-[state=open]:text-neutral-900 data-[state=open]:focus:bg-neutral-100 data-[state=open]:bg-neutral-100/50 focus-visible:ring-neutral-950/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50 dark:data-[state=open]:hover:bg-neutral-800 dark:data-[state=open]:text-neutral-50 dark:data-[state=open]:focus:bg-neutral-800 dark:data-[state=open]:bg-neutral-800/50 dark:focus-visible:ring-neutral-300/50",
 );
 
 function NavigationMenuTrigger({
@@ -95,7 +95,7 @@ function NavigationMenuContent({
       className={cn(
         "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
         "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
-        className
+        className,
       )}
       {...props}
     />
@@ -109,14 +109,14 @@ function NavigationMenuViewport({
   return (
     <div
       className={cn(
-        "absolute top-full left-0 isolate z-50 flex justify-center"
+        "absolute top-full left-0 isolate z-50 flex justify-center",
       )}
     >
       <NavigationMenuPrimitive.Viewport
         data-slot="navigation-menu-viewport"
         className={cn(
           "origin-top-center bg-white text-neutral-950 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border border-neutral-200 shadow md:w-[var(--radix-navigation-menu-viewport-width)] dark:bg-neutral-950 dark:text-neutral-50 dark:border-neutral-800",
-          className
+          className,
         )}
         {...props}
       />
@@ -133,7 +133,7 @@ function NavigationMenuLink({
       data-slot="navigation-menu-link"
       className={cn(
         "data-[active=true]:focus:bg-neutral-100 data-[active=true]:hover:bg-neutral-100 data-[active=true]:bg-neutral-100/50 data-[active=true]:text-neutral-900 hover:bg-neutral-100 hover:text-neutral-900 focus:bg-neutral-100 focus:text-neutral-900 focus-visible:ring-neutral-950/50 [&_svg:not([class*='text-'])]:text-neutral-500 flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 dark:data-[active=true]:focus:bg-neutral-800 dark:data-[active=true]:hover:bg-neutral-800 dark:data-[active=true]:bg-neutral-800/50 dark:data-[active=true]:text-neutral-50 dark:hover:bg-neutral-800 dark:hover:text-neutral-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50 dark:focus-visible:ring-neutral-300/50 dark:[&_svg:not([class*='text-'])]:text-neutral-400",
-        className
+        className,
       )}
       {...props}
     />
@@ -149,7 +149,7 @@ function NavigationMenuIndicator({
       data-slot="navigation-menu-indicator"
       className={cn(
         "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
-        className
+        className,
       )}
       {...props}
     >

package/src/components/ui/pagination.tsx

@@ -60,7 +60,7 @@ function PaginationLink({
           variant: isActive ? "outline" : "ghost",
           size,
         }),
-        className
+        className,
       )}
       {...props}
     />

package/src/components/ui/popover.tsx

@@ -31,7 +31,7 @@ function PopoverContent({
         sideOffset={sideOffset}
         className={cn(
           "bg-white text-neutral-950 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border border-neutral-200 p-4 shadow-md outline-hidden dark:bg-neutral-950 dark:text-neutral-50 dark:border-neutral-800",
-          className
+          className,
         )}
         {...props}
       />

package/src/components/ui/progress.tsx

@@ -15,7 +15,7 @@ function Progress({
       data-slot="progress"
       className={cn(
         "bg-neutral-900/20 relative h-2 w-full overflow-hidden rounded-full dark:bg-neutral-50/20",
-        className
+        className,
       )}
       {...props}
     >

package/src/components/ui/radio-group.tsx

@@ -28,7 +28,7 @@ function RadioGroupItem({
       data-slot="radio-group-item"
       className={cn(
         "border-neutral-200 text-neutral-900 focus-visible:border-neutral-950 focus-visible:ring-neutral-950/50 aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 dark:bg-neutral-200/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-800 dark:text-neutral-50 dark:focus-visible:border-neutral-300 dark:focus-visible:ring-neutral-300/50 dark:aria-invalid:ring-red-900/20 dark:dark:aria-invalid:ring-red-900/40 dark:aria-invalid:border-red-900 dark:dark:bg-neutral-800/30",
-        className
+        className,
       )}
       {...props}
     >

package/src/components/ui/resizable.tsx

@@ -15,7 +15,7 @@ function ResizablePanelGroup({
       data-slot="resizable-panel-group"
       className={cn(
         "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-        className
+        className,
       )}
       {...props}
     />
@@ -39,8 +39,8 @@ function ResizableHandle({
     <ResizablePrimitive.PanelResizeHandle
       data-slot="resizable-handle"
       className={cn(
-        "bg-neutral-200 focus-visible:ring-neutral-950 relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90 dark:bg-neutral-800 dark:focus-visible:ring-neutral-300",
-        className
+        "bg-neutral-200 focus-visible:ring-neutral-950 relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90 dark:bg-neutral-800 dark:focus-visible:ring-neutral-300",
+        className,
       )}
       {...props}
     >