@turtleclub/ui 0.3.0 → 0.4.0-beta.0

package/src/components/ui/input.tsx

@@ -26,7 +26,7 @@ const inputVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
+  },
 );
 
 export interface InputProps
@@ -41,7 +41,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     if (prompt) {
       return (
         <div className="flex items-center gap-2">
-          <span className="text-primary shrink-0 text-sm font-medium">{prompt}</span>
+          <span className="text-primary shrink-0 text-sm font-medium">
+            {prompt}
+          </span>
           <input
             type={type}
             data-slot="input"
@@ -62,7 +64,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         {...props}
       />
     );
-  }
+  },
 );
 
 Input.displayName = "Input";

package/src/components/ui/label.tsx

@@ -5,13 +5,16 @@ import * as LabelPrimitive from "@radix-ui/react-label";
 
 import { cn } from "@/lib/utils";
 
-function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
   return (
     <LabelPrimitive.Root
       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/multi-select.tsx

@@ -4,7 +4,11 @@ import { cn } from "@/lib/utils";
 import { Separator } from "@/components/ui/separator";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import {
   Command,
   CommandEmpty,
@@ -44,7 +48,10 @@ interface MultiSelectGroup {
  * Props for MultiSelect component
  */
 interface MultiSelectProps
-  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "animationConfig"> {
+  extends Omit<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    "animationConfig"
+  > {
   /**
    * An array of option objects or groups to be displayed in the multi-select component.
    */
@@ -256,9 +263,10 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       closeOnSelect = false,
       ...props
     },
-    ref
+    ref,
   ) => {
-    const [selectedValues, setSelectedValues] = React.useState<string[]>(defaultValue);
+    const [selectedValues, setSelectedValues] =
+      React.useState<string[]>(defaultValue);
     const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
     const [isAnimating, setIsAnimating] = React.useState(false);
     const [searchValue, setSearchValue] = React.useState("");
@@ -279,7 +287,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
           setTimeout(() => setPoliteMessage(""), 100);
         }
       },
-      []
+      [],
     );
 
     const multiSelectId = React.useId();
@@ -290,18 +298,23 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
     const prevDefaultValueRef = React.useRef<string[]>(defaultValue);
 
     const isGroupedOptions = React.useCallback(
-      (opts: MultiSelectOption[] | MultiSelectGroup[]): opts is MultiSelectGroup[] => {
+      (
+        opts: MultiSelectOption[] | MultiSelectGroup[],
+      ): opts is MultiSelectGroup[] => {
         return opts.length > 0 && "heading" in opts[0];
       },
-      []
+      [],
     );
 
-    const arraysEqual = React.useCallback((a: string[], b: string[]): boolean => {
-      if (a.length !== b.length) return false;
-      const sortedA = [...a].sort();
-      const sortedB = [...b].sort();
-      return sortedA.every((val, index) => val === sortedB[index]);
-    }, []);
+    const arraysEqual = React.useCallback(
+      (a: string[], b: string[]): boolean => {
+        if (a.length !== b.length) return false;
+        const sortedA = [...a].sort();
+        const sortedB = [...b].sort();
+        return sortedA.every((val, index) => val === sortedB[index]);
+      },
+      [],
+    );
 
     const resetToDefault = React.useCallback(() => {
       setSelectedValues(defaultValue);
@@ -341,10 +354,12 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
           }
         },
       }),
-      [resetToDefault, selectedValues, onValueChange]
+      [resetToDefault, selectedValues, onValueChange],
     );
 
-    const [screenSize, setScreenSize] = React.useState<"mobile" | "tablet" | "desktop">("desktop");
+    const [screenSize, setScreenSize] = React.useState<
+      "mobile" | "tablet" | "desktop"
+    >("desktop");
 
     React.useEffect(() => {
       if (typeof window === "undefined") return;
@@ -421,14 +436,16 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
         }
       });
       if (process.env.NODE_ENV === "development" && duplicates.length > 0) {
-        const action = deduplicateOptions ? "automatically removed" : "detected";
+        const action = deduplicateOptions
+          ? "automatically removed"
+          : "detected";
         console.warn(
           `MultiSelect: Duplicate option values ${action}: ${duplicates.join(", ")}. ` +
             `${
               deduplicateOptions
                 ? "Duplicates have been removed automatically."
                 : "This may cause unexpected behavior. Consider setting 'deduplicateOptions={true}' or ensure all option values are unique."
-            }`
+            }`,
         );
       }
       return deduplicateOptions ? uniqueOptions : allOptions;
@@ -438,11 +455,13 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       (value: string): MultiSelectOption | undefined => {
         const option = getAllOptions().find((option) => option.value === value);
         if (!option && process.env.NODE_ENV === "development") {
-          console.warn(`MultiSelect: Option with value "${value}" not found in options list`);
+          console.warn(
+            `MultiSelect: Option with value "${value}" not found in options list`,
+          );
         }
         return option;
       },
-      [getAllOptions]
+      [getAllOptions],
     );
 
     const filteredOptions = React.useMemo(() => {
@@ -454,8 +473,10 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
             ...group,
             options: group.options.filter(
               (option) =>
-                option.label.toLowerCase().includes(searchValue.toLowerCase()) ||
-                option.value.toLowerCase().includes(searchValue.toLowerCase())
+                option.label
+                  .toLowerCase()
+                  .includes(searchValue.toLowerCase()) ||
+                option.value.toLowerCase().includes(searchValue.toLowerCase()),
             ),
           }))
           .filter((group) => group.options.length > 0);
@@ -463,11 +484,13 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       return options.filter(
         (option) =>
           option.label.toLowerCase().includes(searchValue.toLowerCase()) ||
-          option.value.toLowerCase().includes(searchValue.toLowerCase())
+          option.value.toLowerCase().includes(searchValue.toLowerCase()),
       );
     }, [options, searchValue, searchable, isGroupedOptions]);
 
-    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const handleInputKeyDown = (
+      event: React.KeyboardEvent<HTMLInputElement>,
+    ) => {
       if (event.key === "Enter") {
         setIsPopoverOpen(true);
       } else if (event.key === "Backspace" && !event.currentTarget.value) {
@@ -505,7 +528,10 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
 
     const clearExtraOptions = () => {
       if (disabled) return;
-      const newSelectedValues = selectedValues.slice(0, responsiveSettings.maxCount);
+      const newSelectedValues = selectedValues.slice(
+        0,
+        responsiveSettings.maxCount,
+      );
       setSelectedValues(newSelectedValues);
       onValueChange(newSelectedValues);
     };
@@ -565,20 +591,24 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
         if (diff > 0) {
           const addedItems = selectedValues.slice(-diff);
           const addedLabels = addedItems
-            .map((value) => allOptions.find((opt) => opt.value === value)?.label)
+            .map(
+              (value) => allOptions.find((opt) => opt.value === value)?.label,
+            )
             .filter(Boolean);
 
           if (addedLabels.length === 1) {
             announce(
-              `${addedLabels[0]} selected. ${selectedCount} of ${totalOptions} options selected.`
+              `${addedLabels[0]} selected. ${selectedCount} of ${totalOptions} options selected.`,
             );
           } else {
             announce(
-              `${addedLabels.length} options selected. ${selectedCount} of ${totalOptions} total selected.`
+              `${addedLabels.length} options selected. ${selectedCount} of ${totalOptions} total selected.`,
             );
           }
         } else if (diff < 0) {
-          announce(`Option removed. ${selectedCount} of ${totalOptions} options selected.`);
+          announce(
+            `Option removed. ${selectedCount} of ${totalOptions} options selected.`,
+          );
         }
         prevSelectedCount.current = selectedCount;
       }
@@ -586,7 +616,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       if (isPopoverOpen !== prevIsOpen.current) {
         if (isPopoverOpen) {
           announce(
-            `Dropdown opened. ${totalOptions} options available. Use arrow keys to navigate.`
+            `Dropdown opened. ${totalOptions} options available. Use arrow keys to navigate.`,
           );
         } else {
           announce("Dropdown closed.");
@@ -594,16 +624,19 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
         prevIsOpen.current = isPopoverOpen;
       }
 
-      if (searchValue !== prevSearchValue.current && searchValue !== undefined) {
+      if (
+        searchValue !== prevSearchValue.current &&
+        searchValue !== undefined
+      ) {
         if (searchValue && isPopoverOpen) {
           const filteredCount = allOptions.filter(
             (opt) =>
               opt.label.toLowerCase().includes(searchValue.toLowerCase()) ||
-              opt.value.toLowerCase().includes(searchValue.toLowerCase())
+              opt.value.toLowerCase().includes(searchValue.toLowerCase()),
           ).length;
 
           announce(
-            `${filteredCount} option${filteredCount === 1 ? "" : "s"} found for "${searchValue}"`
+            `${filteredCount} option${filteredCount === 1 ? "" : "s"} found for "${searchValue}"`,
           );
         }
         prevSearchValue.current = searchValue;
@@ -621,9 +654,14 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
           </div>
         </div>
 
-        <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>
+        <Popover
+          open={isPopoverOpen}
+          onOpenChange={setIsPopoverOpen}
+          modal={modalPopover}
+        >
           <div id={triggerDescriptionId} className="sr-only">
-            Multi-select dropdown. Use arrow keys to navigate, Enter to select, and Escape to close.
+            Multi-select dropdown. Use arrow keys to navigate, Enter to select,
+            and Escape to close.
           </div>
           <div id={selectedCountId} className="sr-only" aria-live="polite">
             {selectedValues.length === 0
@@ -658,7 +696,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                 responsiveSettings.compactMode && "h-8 text-sm",
                 screenSize === "mobile" && "h-12 text-base",
                 disabled && "cursor-not-allowed opacity-50",
-                className
+                className,
               )}
               style={{
                 ...widthConstraints,
@@ -670,8 +708,10 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                   <div
                     className={cn(
                       "flex items-center gap-1",
-                      singleLine ? "multiselect-singleline-scroll overflow-x-auto" : "flex-wrap",
-                      responsiveSettings.compactMode && "gap-0.5"
+                      singleLine
+                        ? "multiselect-singleline-scroll overflow-x-auto"
+                        : "flex-wrap",
+                      responsiveSettings.compactMode && "gap-0.5",
                     )}
                     style={
                       singleLine
@@ -697,10 +737,12 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                             key={value}
                             className={cn(
                               "!pr-1.5 pl-3.5",
-                              responsiveSettings.compactMode && "px-1.5 py-0.5 text-xs",
-                              screenSize === "mobile" && "max-w-[120px] truncate",
+                              responsiveSettings.compactMode &&
+                                "px-1.5 py-0.5 text-xs",
+                              screenSize === "mobile" &&
+                                "max-w-[120px] truncate",
                               singleLine && "flex-shrink-0 whitespace-nowrap",
-                              "[&>svg]:pointer-events-auto"
+                              "[&>svg]:pointer-events-auto",
                             )}
                             style={badgeStyle}
                           >
@@ -708,11 +750,16 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                               <IconComponent
                                 className={cn(
                                   "mr-2 size-3.5",
-                                  responsiveSettings.compactMode && "mr-1 h-3 w-3"
+                                  responsiveSettings.compactMode &&
+                                    "mr-1 h-3 w-3",
                                 )}
                               />
                             )}
-                            <span className={cn(screenSize === "mobile" && "truncate")}>
+                            <span
+                              className={cn(
+                                screenSize === "mobile" && "truncate",
+                              )}
+                            >
                               {option.label}
                             </span>
                             <div
@@ -723,7 +770,10 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                                 toggleOption(value);
                               }}
                               onKeyDown={(event) => {
-                                if (event.key === "Enter" || event.key === " ") {
+                                if (
+                                  event.key === "Enter" ||
+                                  event.key === " "
+                                ) {
                                   event.preventDefault();
                                   event.stopPropagation();
                                   toggleOption(value);
@@ -742,9 +792,10 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                       <Badge
                         className={cn(
                           "!pr-1.5 pl-3.5",
-                          responsiveSettings.compactMode && "px-1.5 py-0.5 text-xs",
+                          responsiveSettings.compactMode &&
+                            "px-1.5 py-0.5 text-xs",
                           singleLine && "flex-shrink-0 whitespace-nowrap",
-                          "[&>svg]:pointer-events-auto"
+                          "[&>svg]:pointer-events-auto",
                         )}
                       >
                         {`+ ${selectedValues.length - responsiveSettings.maxCount} more`}
@@ -782,7 +833,10 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                     >
                       <XIcon className="size-3.5" />
                     </div>
-                    <Separator orientation="vertical" className="flex h-full min-h-6" />
+                    <Separator
+                      orientation="vertical"
+                      className="flex h-full min-h-6"
+                    />
                     <ChevronDown
                       className="text-muted-foreground mx-2 h-4 cursor-pointer"
                       aria-hidden="true"
@@ -791,7 +845,9 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                 </div>
               ) : (
                 <div className="mx-auto flex w-full items-center justify-between">
-                  <span className="text-muted-foreground text-sm">{placeholder}</span>
+                  <span className="text-muted-foreground text-sm">
+                    {placeholder}
+                  </span>
                   <ChevronDown className="text-muted-foreground mx-2 h-4 cursor-pointer" />
                 </div>
               )}
@@ -807,7 +863,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
               screenSize === "mobile" && "w-[85vw] max-w-[280px]",
               screenSize === "tablet" && "w-[70vw] max-w-md",
               screenSize === "desktop" && "min-w-[300px]",
-              popoverClassName
+              popoverClassName,
             )}
             style={{
               maxWidth: `min(${widthConstraints.maxWidth}, 85vw)`,
@@ -837,10 +893,12 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                 className={cn(
                   "multiselect-scrollbar max-h-[40vh] overflow-y-auto",
                   screenSize === "mobile" && "max-h-[50vh]",
-                  "overscroll-behavior-y-contain"
+                  "overscroll-behavior-y-contain",
                 )}
               >
-                <CommandEmpty>{emptyIndicator || "No results found."}</CommandEmpty>{" "}
+                <CommandEmpty>
+                  {emptyIndicator || "No results found."}
+                </CommandEmpty>{" "}
                 {!hideSelectAll && !searchValue && (
                   <CommandGroup>
                     <CommandItem
@@ -858,9 +916,10 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                         className={cn(
                           "border-border mr-2 flex size-3.5 items-center justify-center rounded-xs border",
                           selectedValues.length ===
-                            getAllOptions().filter((opt) => !opt.disabled).length
+                            getAllOptions().filter((opt) => !opt.disabled)
+                              .length
                             ? "bg-primary"
-                            : "opacity-50 [&_svg]:invisible"
+                            : "opacity-50 [&_svg]:invisible",
                         )}
                         aria-hidden="true"
                       >
@@ -868,7 +927,10 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                       </div>
                       <span>
                         (Select All
-                        {getAllOptions().length > 20 ? ` - ${getAllOptions().length} options` : ""})
+                        {getAllOptions().length > 20
+                          ? ` - ${getAllOptions().length} options`
+                          : ""}
+                        )
                       </span>
                     </CommandItem>
                   </CommandGroup>
@@ -877,7 +939,9 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                   filteredOptions.map((group) => (
                     <CommandGroup key={group.heading} heading={group.heading}>
                       {group.options.map((option) => {
-                        const isSelected = selectedValues.includes(option.value);
+                        const isSelected = selectedValues.includes(
+                          option.value,
+                        );
                         return (
                           <CommandItem
                             key={option.value}
@@ -890,14 +954,17 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                             }${option.disabled ? ", disabled" : ""}`}
                             className={cn(
                               "cursor-pointer",
-                              option.disabled && "cursor-not-allowed opacity-50"
+                              option.disabled &&
+                                "cursor-not-allowed opacity-50",
                             )}
                             disabled={option.disabled}
                           >
                             <div
                               className={cn(
                                 "border-border mr-2 flex size-3.5 items-center justify-center rounded-xs border",
-                                isSelected ? "bg-primary" : "opacity-50 [&_svg]:invisible"
+                                isSelected
+                                  ? "bg-primary"
+                                  : "opacity-50 [&_svg]:invisible",
                               )}
                               aria-hidden="true"
                             >
@@ -931,14 +998,16 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                           }${option.disabled ? ", disabled" : ""}`}
                           className={cn(
                             "cursor-pointer",
-                            option.disabled && "cursor-not-allowed opacity-50"
+                            option.disabled && "cursor-not-allowed opacity-50",
                           )}
                           disabled={option.disabled}
                         >
                           <div
                             className={cn(
                               "border-border mr-2 flex size-3.5 items-center justify-center rounded-xs border",
-                              isSelected ? "bg-primary" : "opacity-50 [&_svg]:invisible"
+                              isSelected
+                                ? "bg-primary"
+                                : "opacity-50 [&_svg]:invisible",
                             )}
                             aria-hidden="true"
                           >
@@ -967,7 +1036,10 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                         >
                           Clear
                         </CommandItem>
-                        <Separator orientation="vertical" className="mx-1 flex h-full min-h-6" />
+                        <Separator
+                          orientation="vertical"
+                          className="mx-1 flex h-full min-h-6"
+                        />
                       </>
                     )}
                     <CommandItem
@@ -985,7 +1057,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
             <WandSparkles
               className={cn(
                 "text-foreground bg-background my-2 h-3 w-3 cursor-pointer",
-                isAnimating ? "" : "text-muted-foreground"
+                isAnimating ? "" : "text-muted-foreground",
               )}
               onClick={() => setIsAnimating(!isAnimating)}
             />
@@ -993,7 +1065,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
         </Popover>
       </>
     );
-  }
+  },
 );
 
 MultiSelect.displayName = "MultiSelect";

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

@@ -6,9 +6,11 @@ import { cn } from "@/lib/utils";
 const navigationBarVariants = cva("flex w-full", {
   variants: {
     variant: {
-      default: "justify-between border border-border shadow-sm bg-background",
-      transparent: "justify-between border border-border shadow-sm bg-transparent",
-      menuBar: "relative h-9 gap-2 rounded-full border border-border bg-background font-medium shadow-sm",
+      default: "border-border bg-background justify-between border shadow-sm",
+      transparent:
+        "border-border justify-between border bg-transparent shadow-sm",
+      menuBar:
+        "border-border bg-background relative h-9 gap-2 rounded-full border font-medium shadow-sm",
     },
   },
   defaultVariants: {
@@ -17,20 +19,22 @@ const navigationBarVariants = cva("flex w-full", {
 });
 
 const navigationItemVariants = cva(
-  "flex items-center justify-center whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
+  "flex cursor-pointer items-center justify-center font-medium whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
-        default: "text-sm text-muted-foreground hover:text-foreground",
-        active: "text-sm text-primary bg-muted",
-        menuBarDefault: "relative z-[1] w-full text-sm text-foreground rounded-full px-3 py-1.5 hover:text-primary",
-        menuBarActive: "relative z-[1] w-full text-sm text-primary rounded-full px-3 py-1.5",
+        default: "text-muted-foreground hover:text-foreground text-sm",
+        active: "text-primary bg-muted text-sm",
+        menuBarDefault:
+          "text-foreground hover:text-primary relative z-[1] w-full rounded-full px-3 py-1.5 text-sm",
+        menuBarActive:
+          "text-primary relative z-[1] w-full rounded-full px-3 py-1.5 text-sm",
       },
     },
     defaultVariants: {
       variant: "default",
     },
-  }
+  },
 );
 
 export interface NavigationBarProps
@@ -53,9 +57,16 @@ const NavigationBar = React.forwardRef<HTMLElement, NavigationBarProps>(
 
     // Function to update the indicator position and size based on the active button
     const updateIndicatorPosition = React.useCallback(() => {
-      if (variant !== "menuBar" || !containerRef.current || !indicatorRef.current) return;
-
-      const activeButton = containerRef.current.querySelector(`[data-active="true"]`) as HTMLElement;
+      if (
+        variant !== "menuBar" ||
+        !containerRef.current ||
+        !indicatorRef.current
+      )
+        return;
+
+      const activeButton = containerRef.current.querySelector(
+        `[data-active="true"]`,
+      ) as HTMLElement;
       if (activeButton) {
         indicatorRef.current.style.width = `${activeButton.offsetWidth}px`;
         indicatorRef.current.style.left = `${activeButton.offsetLeft}px`;
@@ -65,7 +76,7 @@ const NavigationBar = React.forwardRef<HTMLElement, NavigationBarProps>(
     // Create ResizeObserver to handle indicator container size changes
     React.useEffect(() => {
       if (variant !== "menuBar") return;
-      
+
       updateIndicatorPosition();
 
       const resizeObserver = new ResizeObserver(updateIndicatorPosition);
@@ -80,21 +91,21 @@ const NavigationBar = React.forwardRef<HTMLElement, NavigationBarProps>(
     }, [activeValue, updateIndicatorPosition, variant]);
 
     return (
-      <nav 
-        ref={ref || containerRef} 
-        className={cn(navigationBarVariants({ variant, className }))} 
+      <nav
+        ref={ref || containerRef}
+        className={cn(navigationBarVariants({ variant, className }))}
         {...props}
       >
         {variant === "menuBar" && (
           <div
             ref={indicatorRef}
-            className="absolute bottom-0 h-full origin-left rounded-full bg-secondary transition-all duration-300"
+            className="bg-secondary absolute bottom-0 h-full origin-left rounded-full transition-all duration-300"
           />
         )}
         {children}
       </nav>
     );
-  }
+  },
 );
 
 NavigationBar.displayName = "NavigationBar";
@@ -110,7 +121,8 @@ const NavigationItem = React.forwardRef<HTMLButtonElement, NavigationItemProps>(
     };
 
     const appliedVariant = getItemVariant();
-    const isMenuBar = appliedVariant === "menuBarDefault" || appliedVariant === "menuBarActive";
+    const isMenuBar =
+      appliedVariant === "menuBarDefault" || appliedVariant === "menuBarActive";
 
     return (
       <button
@@ -122,14 +134,19 @@ const NavigationItem = React.forwardRef<HTMLButtonElement, NavigationItemProps>(
             variant: appliedVariant,
             className,
           }),
-          !isMenuBar && "px-4 py-2 rounded-md"
+          !isMenuBar && "rounded-md px-4 py-2",
         )}
         {...props}
       />
     );
-  }
+  },
 );
 
 NavigationItem.displayName = "NavigationItem";
 
-export { NavigationBar, NavigationItem, navigationBarVariants, navigationItemVariants };
+export {
+  NavigationBar,
+  NavigationItem,
+  navigationBarVariants,
+  navigationItemVariants,
+};