@zentauri-ui/zentauri-components 1.4.62 → 1.4.64

package/src/ui/file-upload/variants.ts

@@ -8,17 +8,26 @@ export const fileUploadVariants = cva(
         idle: "border-white/15 bg-white/5 text-slate-300 hover:border-white/25 hover:bg-white/[0.07]",
         active: "border-violet-400/70 bg-violet-500/10 text-white",
         disabled: "cursor-not-allowed opacity-50",
-        error: "border-red-400/70 bg-red-500/10 text-red-400 hover:border-red-400/80 hover:bg-red-500/15",
-        success: "border-green-400/70 bg-green-500/10 text-green-400 hover:border-green-400/80 hover:bg-green-500/15",
-        warning: "border-yellow-400/70 bg-yellow-500/10 text-yellow-400 hover:border-yellow-400/80 hover:bg-yellow-500/15",
+        error:
+          "border-red-400/70 bg-red-500/10 text-red-400 hover:border-red-400/80 hover:bg-red-500/15",
+        success:
+          "border-green-400/70 bg-green-500/10 text-green-400 hover:border-green-400/80 hover:bg-green-500/15",
+        warning:
+          "border-yellow-400/70 bg-yellow-500/10 text-yellow-400 hover:border-yellow-400/80 hover:bg-yellow-500/15",
         info: "border-blue-400/70 bg-blue-500/10 text-blue-400 hover:border-blue-400/80 hover:bg-blue-500/15",
-        neutral: "border-gray-400/70 bg-gray-500/10 text-gray-400 hover:border-gray-400/80 hover:bg-gray-500/15",
-        purple: "border-purple-400/70 bg-purple-500/10 text-purple-400 hover:border-purple-400/80 hover:bg-purple-500/15",
-        indigo: "border-indigo-400/70 bg-indigo-500/10 text-indigo-400 hover:border-indigo-400/80 hover:bg-indigo-500/15",
-        emerald: "border-emerald-400/70 bg-emerald-500/10 text-emerald-400 hover:border-emerald-400/80 hover:bg-emerald-500/15",
-        amber: "border-amber-400/70 bg-amber-500/10 text-amber-400 hover:border-amber-400/80 hover:bg-amber-500/15",
+        neutral:
+          "border-gray-400/70 bg-gray-500/10 text-gray-400 hover:border-gray-400/80 hover:bg-gray-500/15",
+        purple:
+          "border-purple-400/70 bg-purple-500/10 text-purple-400 hover:border-purple-400/80 hover:bg-purple-500/15",
+        indigo:
+          "border-indigo-400/70 bg-indigo-500/10 text-indigo-400 hover:border-indigo-400/80 hover:bg-indigo-500/15",
+        emerald:
+          "border-emerald-400/70 bg-emerald-500/10 text-emerald-400 hover:border-emerald-400/80 hover:bg-emerald-500/15",
+        amber:
+          "border-amber-400/70 bg-amber-500/10 text-amber-400 hover:border-amber-400/80 hover:bg-amber-500/15",
         pink: "border-pink-400/70 bg-pink-500/10 text-pink-400 hover:border-pink-400/80 hover:bg-pink-500/15",
-        orange: "border-orange-400/70 bg-orange-500/10 text-orange-400 hover:border-orange-400/80 hover:bg-orange-500/15",
+        orange:
+          "border-orange-400/70 bg-orange-500/10 text-orange-400 hover:border-orange-400/80 hover:bg-orange-500/15",
         teal: "border-teal-400/70 bg-teal-500/10 text-teal-400 hover:border-teal-400/80 hover:bg-teal-500/15",
       },
     },

package/src/ui/inputs/animated/index.ts

@@ -1,5 +1,11 @@
 "use client";
 
 export { InputAnimated } from "./input-animated";
-export type { InputAnimatedProps, InputAnimation, InputAnimationPresets, InputPresetMotionProps, InputSharedAnimatedProps } from "./types";
+export type {
+  InputAnimatedProps,
+  InputAnimation,
+  InputAnimationPresets,
+  InputPresetMotionProps,
+  InputSharedAnimatedProps,
+} from "./types";
 export { inputAnimationPresets } from "./animations";

package/src/ui/inputs/input.test.tsx

@@ -381,7 +381,11 @@ describe("Input (component library)", () => {
       "should render without throwing when animation=%s",
       (animation) => {
         const { unmount } = render(
-          <InputAnimated animation={animation} placeholder="x" aria-label="Anim" />,
+          <InputAnimated
+            animation={animation}
+            placeholder="x"
+            aria-label="Anim"
+          />,
         );
         expect(
           getInputSlot(),

package/src/ui/inputs/types.ts

@@ -3,7 +3,10 @@ import type { ComponentPropsWithRef, ReactNode } from "react";
 
 import type { inputVariants } from "./variants";
 
-export type InputSharedProps = Omit<VariantProps<typeof inputVariants>, "as"> & {
+export type InputSharedProps = Omit<
+  VariantProps<typeof inputVariants>,
+  "as"
+> & {
   errorMessage?: string;
   hint?: ReactNode;
   label?: ReactNode;

package/src/ui/modal/animated/index.ts

@@ -1,5 +1,10 @@
 "use client";
 
 export { ModalContentAnimated } from "./modal-content-animated";
-export type { ModalContentAnimatedProps, ModalAnimation, ModalAnimationPresets, ModalPresetMotionProps } from "./types";
+export type {
+  ModalContentAnimatedProps,
+  ModalAnimation,
+  ModalAnimationPresets,
+  ModalPresetMotionProps,
+} from "./types";
 export { modalOverlayAnimationPresets } from "./animations";

package/src/ui/modal/index.ts

@@ -9,7 +9,7 @@ export {
   ModalHeader,
   ModalDescription,
   ModalClose,
-  ModalFooter
+  ModalFooter,
 } from "./modal-base";
 export type {
   ModalContentProps,

package/src/ui/modal/modal-base.tsx

@@ -126,7 +126,6 @@ export function ModalTrigger({
 
 ModalTrigger.displayName = "ModalTrigger";
 
-
 export function ModalContent({
   className,
   size,

package/src/ui/modal/modal.test.tsx

@@ -2,11 +2,15 @@ import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 
+import { Modal } from "./modal";
 import {
-  Modal,
-} from "./modal";
-import { ModalTrigger, ModalContent, ModalTitle, ModalBody, ModalDescription, ModalClose } from "./modal-base";
-
+  ModalTrigger,
+  ModalContent,
+  ModalTitle,
+  ModalBody,
+  ModalDescription,
+  ModalClose,
+} from "./modal-base";
 
 describe("Modal", () => {
   it("should expose displayName on exported parts", () => {
@@ -155,9 +159,7 @@ describe("Modal", () => {
     const trigger = screen.getByRole("button", { name: "Open" });
     trigger.focus();
     await user.click(trigger);
-    await waitFor(() =>
-      expect(screen.getByRole("dialog")).toBeInTheDocument(),
-    );
+    await waitFor(() => expect(screen.getByRole("dialog")).toBeInTheDocument());
     await user.keyboard("{Escape}");
     await waitFor(() =>
       expect(screen.queryByRole("dialog")).not.toBeInTheDocument(),

package/src/ui/modal/modal.tsx

@@ -5,4 +5,4 @@ export const Modal = (props: ModalProps) => {
   return <ModalBase {...props} />;
 };
 
-Modal.displayName = "Modal";
+Modal.displayName = "Modal";

package/src/ui/modal/types.ts

@@ -1,9 +1,17 @@
 import type { VariantProps } from "class-variance-authority";
-import type { CSSProperties, ElementType, HTMLAttributes, ReactNode, Ref } from "react";
+import type {
+  CSSProperties,
+  ElementType,
+  HTMLAttributes,
+  ReactNode,
+  Ref,
+} from "react";
 
 import type { modalContentVariants, modalTriggerVariants } from "./variants";
 
-export type ModalContentVariantProps = VariantProps<typeof modalContentVariants>;
+export type ModalContentVariantProps = VariantProps<
+  typeof modalContentVariants
+>;
 
 export type ModalProps = {
   open?: boolean;

package/src/ui/modal/variants.ts

@@ -24,23 +24,23 @@ export const modalTriggerVariants = cva(
         amber: "border-amber-600 bg-amber-950/70 backdrop-blur-xl",
         violet: "border-violet-600 bg-violet-950/70 backdrop-blur-xl",
         "gradient-blue":
-          "border-gradient-to-r from-blue-600 to-purple-600 bg-gradient-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl",
+          "border-blue-600 bg-linear-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl",
         "gradient-green":
-          "border-gradient-to-r from-green-600 to-lime-600 bg-gradient-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl",
+          "border-green-600 bg-linear-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl",
         "gradient-red":
-          "border-gradient-to-r from-red-600 to-pink-600 bg-gradient-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl",
+          "border-red-600 bg-linear-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl",
         "gradient-yellow":
-          "border-gradient-to-r from-yellow-600 to-orange-600 bg-gradient-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl",
+          "border-yellow-600 bg-linear-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl",
         "gradient-purple":
-          "border-gradient-to-r from-purple-600 to-pink-600 bg-gradient-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl",
+          "border-purple-600 bg-linear-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl",
         "gradient-teal":
-          "border-gradient-to-r from-teal-600 to-cyan-600 bg-gradient-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl",
+          "border-teal-600 bg-linear-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl",
         "gradient-indigo":
-          "border-gradient-to-r from-indigo-600 to-purple-600 bg-gradient-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl",
+          "border-indigo-600 bg-linear-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl",
         "gradient-pink":
-          "border-gradient-to-r from-pink-600 to-rose-600 bg-gradient-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl",
+          "border-pink-600 bg-linear-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl",
         "gradient-orange":
-          "border-gradient-to-r from-orange-600 to-red-600 bg-gradient-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl",
+          "border-orange-600 bg-linear-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl",
       },
     },
     defaultVariants: {
@@ -81,23 +81,23 @@ export const modalContentVariants = cva(
         amber: "border-amber-600 bg-amber-950/70 backdrop-blur-xl",
         violet: "border-violet-600 bg-violet-950/70 backdrop-blur-xl",
         "gradient-blue":
-          "border-gradient-to-r from-blue-600 to-purple-600 bg-gradient-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl",
+          "border-blue-600 bg-linear-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl",
         "gradient-green":
-          "border-gradient-to-r from-green-600 to-lime-600 bg-gradient-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl",
+          "border-green-600 bg-linear-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl",
         "gradient-red":
-          "border-gradient-to-r from-red-600 to-pink-600 bg-gradient-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl",
+          "border-red-600 bg-linear-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl",
         "gradient-yellow":
-          "border-gradient-to-r from-yellow-600 to-orange-600 bg-gradient-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl",
+          "border-yellow-600 bg-linear-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl",
         "gradient-purple":
-          "border-gradient-to-r from-purple-600 to-pink-600 bg-gradient-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl",
+          "border-purple-600 bg-linear-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl",
         "gradient-teal":
-          "border-gradient-to-r from-teal-600 to-cyan-600 bg-gradient-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl",
+          "border-teal-600 bg-linear-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl",
         "gradient-indigo":
-          "border-gradient-to-r from-indigo-600 to-purple-600 bg-gradient-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl",
+          "border-indigo-600 bg-linear-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl",
         "gradient-pink":
-          "border-gradient-to-r from-pink-600 to-rose-600 bg-gradient-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl",
+          "border-pink-600 bg-linear-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl",
         "gradient-orange":
-          "border-gradient-to-r from-orange-600 to-red-600 bg-gradient-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl",
+          "border-orange-600 bg-linear-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl",
       },
     },
     defaultVariants: {

package/src/ui/pagination/variants.ts

@@ -29,23 +29,23 @@ export const paginationListVariants = cva(
         amber: "border-amber-500/25 bg-amber-950/20",
         violet: "border-violet-500/25 bg-violet-950/20",
         "gradient-blue":
-          "border-blue-500/30 bg-gradient-to-r from-blue-950/30 to-purple-950/30",
+          "border-blue-500/30 bg-linear-to-r from-blue-950/30 to-purple-950/30",
         "gradient-green":
-          "border-lime-500/30 bg-gradient-to-r from-green-950/30 to-lime-950/30",
+          "border-lime-500/30 bg-linear-to-r from-green-950/30 to-lime-950/30",
         "gradient-red":
-          "border-pink-500/30 bg-gradient-to-r from-red-950/30 to-pink-950/30",
+          "border-pink-500/30 bg-linear-to-r from-red-950/30 to-pink-950/30",
         "gradient-yellow":
-          "border-orange-500/30 bg-gradient-to-r from-yellow-950/30 to-orange-950/30",
+          "border-orange-500/30 bg-linear-to-r from-yellow-950/30 to-orange-950/30",
         "gradient-purple":
-          "border-pink-500/30 bg-gradient-to-r from-purple-950/30 to-pink-950/30",
+          "border-pink-500/30 bg-linear-to-r from-purple-950/30 to-pink-950/30",
         "gradient-teal":
-          "border-cyan-500/30 bg-gradient-to-r from-teal-950/30 to-cyan-950/30",
+          "border-cyan-500/30 bg-linear-to-r from-teal-950/30 to-cyan-950/30",
         "gradient-indigo":
-          "border-purple-500/30 bg-gradient-to-r from-indigo-950/30 to-purple-950/30",
+          "border-purple-500/30 bg-linear-to-r from-indigo-950/30 to-purple-950/30",
         "gradient-pink":
-          "border-rose-500/30 bg-gradient-to-r from-pink-950/30 to-rose-950/30",
+          "border-rose-500/30 bg-linear-to-r from-pink-950/30 to-rose-950/30",
         "gradient-orange":
-          "border-orange-500/30 bg-gradient-to-r from-orange-950/30 to-red-950/30",
+          "border-orange-500/30 bg-linear-to-r from-orange-950/30 to-red-950/30",
       },
       size: {
         sm: "gap-0.5",

package/src/ui/progress/animated/progress-animated.tsx

@@ -137,8 +137,7 @@ export function ProgressBarAnimated({
   style?: React.CSSProperties;
   ref?: React.Ref<HTMLDivElement>;
 }) {
-  const { size, shape, striped, animated } =
-    useProgressContext("ProgressBar");
+  const { size, shape, striped, animated } = useProgressContext("ProgressBar");
 
   return (
     <div

package/src/ui/progress/animated/types.ts

@@ -32,4 +32,4 @@ export type ProgressAnimatedProps = ProgressVariantProps &
 export type ProgressBarAnimatedProps = ProgressSectionProps & {
   style?: React.CSSProperties;
   ref?: React.Ref<HTMLDivElement>;
-};
+};

package/src/ui/progress/index.ts

@@ -1,8 +1,18 @@
 "use client";
 
 export { Progress } from "./progress";
-export { ProgressBar, ProgressLabel, ProgressValue, ProgressBase } from "./progress-base";
-export type { ProgressProps, ProgressSectionProps, ProgressCtx, ProgressVariantProps } from "./types";
+export {
+  ProgressBar,
+  ProgressLabel,
+  ProgressValue,
+  ProgressBase,
+} from "./progress-base";
+export type {
+  ProgressProps,
+  ProgressSectionProps,
+  ProgressCtx,
+  ProgressVariantProps,
+} from "./types";
 export {
   progressVariants,
   progressTrackVariants,

package/src/ui/progress/progress-base.tsx

@@ -44,7 +44,7 @@ export function ProgressBase(props: ProgressProps) {
     label,
     children,
     ref,
-    as:Wrapper = "div",
+    as: Wrapper = "div",
     ...rest
   } = props;
   const clamped = clamp(value, min, max);
@@ -135,7 +135,7 @@ export function ProgressBar({
   className,
   style,
   ref,
-  as:Wrapper = "div",
+  as: Wrapper = "div",
   ...rest
 }: ProgressSectionProps & {
   style?: React.CSSProperties;

package/src/ui/progress/progress.test.tsx

@@ -2,9 +2,7 @@ import { createRef } from "react";
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 
-import {
-  Progress,
-} from "./progress";
+import { Progress } from "./progress";
 import { ProgressBar, ProgressLabel, ProgressValue } from "./progress-base";
 
 describe("Progress", () => {

package/src/ui/progress/progress.tsx

@@ -2,11 +2,7 @@ import { ProgressBase } from "./progress-base";
 import type { ProgressProps } from "./types";
 
 export const Progress = (props: ProgressProps) => {
-  return (
-    <ProgressBase
-      {...props}
-    />
-  );
+  return <ProgressBase {...props} />;
 };
 
-Progress.displayName = "Progress";
+Progress.displayName = "Progress";

package/src/ui/search/filter-search-suggestions.test.ts

@@ -4,35 +4,63 @@ import { filterSearchSuggestions } from "./filter-search-suggestions";
 import type { SearchFilterable } from "./types";
 
 const sampleItems: SearchFilterable[] = [
-  { id: "1", label: "Installation", href: "/preview/installation", keywords: ["npm", "setup"] },
+  {
+    id: "1",
+    label: "Installation",
+    href: "/preview/installation",
+    keywords: ["npm", "setup"],
+  },
   { id: "2", label: "Modal", href: "/preview/components/modal" },
-  { id: "3", label: "GitHub", href: "https://example.com/repo", keywords: ["github", "source"] },
+  {
+    id: "3",
+    label: "GitHub",
+    href: "https://example.com/repo",
+    keywords: ["github", "source"],
+  },
 ];
 
 describe("filterSearchSuggestions", () => {
   it("returns empty list for whitespace-only query", () => {
-    expect(filterSearchSuggestions({ query: "   ", items: sampleItems })).toEqual([]);
+    expect(
+      filterSearchSuggestions({ query: "   ", items: sampleItems }),
+    ).toEqual([]);
   });
 
   it("returns empty list for empty query", () => {
-    expect(filterSearchSuggestions({ query: "", items: sampleItems })).toEqual([]);
+    expect(filterSearchSuggestions({ query: "", items: sampleItems })).toEqual(
+      [],
+    );
   });
 
   it("matches label case-insensitively", () => {
-    expect(filterSearchSuggestions({ query: "modal", items: sampleItems })).toEqual([
-      { id: "2", label: "Modal", href: "/preview/components/modal" },
-    ]);
+    expect(
+      filterSearchSuggestions({ query: "modal", items: sampleItems }),
+    ).toEqual([{ id: "2", label: "Modal", href: "/preview/components/modal" }]);
   });
 
   it("matches href substring", () => {
-    expect(filterSearchSuggestions({ query: "installation", items: sampleItems })).toEqual([
-      { id: "1", label: "Installation", href: "/preview/installation", keywords: ["npm", "setup"] },
+    expect(
+      filterSearchSuggestions({ query: "installation", items: sampleItems }),
+    ).toEqual([
+      {
+        id: "1",
+        label: "Installation",
+        href: "/preview/installation",
+        keywords: ["npm", "setup"],
+      },
     ]);
   });
 
   it("matches keywords", () => {
-    expect(filterSearchSuggestions({ query: "github", items: sampleItems })).toEqual([
-      { id: "3", label: "GitHub", href: "https://example.com/repo", keywords: ["github", "source"] },
+    expect(
+      filterSearchSuggestions({ query: "github", items: sampleItems }),
+    ).toEqual([
+      {
+        id: "3",
+        label: "GitHub",
+        href: "https://example.com/repo",
+        keywords: ["github", "source"],
+      },
     ]);
   });
 
@@ -43,6 +71,12 @@ describe("filterSearchSuggestions", () => {
       href: `/x/${index}`,
       keywords: ["alpha"],
     }));
-    expect(filterSearchSuggestions({ query: "alpha", items: many, options: { maxResults: 5 } })).toHaveLength(5);
+    expect(
+      filterSearchSuggestions({
+        query: "alpha",
+        items: many,
+        options: { maxResults: 5 },
+      }),
+    ).toHaveLength(5);
   });
 });

package/src/ui/search/filter-search-suggestions.ts

@@ -28,9 +28,9 @@ export function filterSearchSuggestions<T extends SearchFilterable>({
   for (const item of items) {
     const isMatch =
       item.label.toLowerCase().includes(normalized) ||
-      (item.description?.toLowerCase().includes(normalized)) ||
-      (item.href?.toLowerCase().includes(normalized)) ||
-      (item.keywords?.some((k) => k.toLowerCase().includes(normalized)));
+      item.description?.toLowerCase().includes(normalized) ||
+      item.href?.toLowerCase().includes(normalized) ||
+      item.keywords?.some((k) => k.toLowerCase().includes(normalized));
 
     if (isMatch) {
       matches.push(item);

package/src/ui/search/search-bar.tsx

@@ -7,28 +7,26 @@ import { inputVariants } from "../inputs/variants";
 
 import type { SearchBarProps } from "./types";
 
-export const SearchBar = function SearchBar(
-  {
-    value,
-    onValueChange,
-    leadingSlot,
-    className,
-    inputClassName,
-    appearance = "default",
-    inputSize = "md",
-    ring = true,
-    id,
-    onChange,
-    disabled,
-    type,
-    comboboxListboxId,
-    comboboxActiveOptionId,
-    comboboxExpanded,
-    "aria-label": ariaLabel,
-    ref,
-    ...rest
-  }: SearchBarProps,
-) {
+export const SearchBar = function SearchBar({
+  value,
+  onValueChange,
+  leadingSlot,
+  className,
+  inputClassName,
+  appearance = "default",
+  inputSize = "md",
+  ring = true,
+  id,
+  onChange,
+  disabled,
+  type,
+  comboboxListboxId,
+  comboboxActiveOptionId,
+  comboboxExpanded,
+  "aria-label": ariaLabel,
+  ref,
+  ...rest
+}: SearchBarProps) {
   const generatedId = useId();
   const controlId = id ?? generatedId;
   const combobox = Boolean(comboboxListboxId);
@@ -54,10 +52,7 @@ export const SearchBar = function SearchBar(
         spellCheck={false}
         disabled={disabled}
         value={value}
-        aria-label={
-          ariaLabel ??
-          (combobox ? undefined : "Search")
-        }
+        aria-label={ariaLabel ?? (combobox ? undefined : "Search")}
         data-slot="search-bar-input"
         className={cn(
           inputVariants({ appearance, size: inputSize, ring, as: "input" }),
@@ -83,6 +78,6 @@ export const SearchBar = function SearchBar(
       />
     </div>
   );
-}
+};
 
 SearchBar.displayName = "SearchBar";

package/src/ui/search/search-suggestion-list.tsx

@@ -24,7 +24,10 @@ export function SearchSuggestionList({
     return (
       <div
         data-slot="search-suggestion-list-empty"
-        className={cn("px-1 py-6 text-center text-sm text-slate-500", className)}
+        className={cn(
+          "px-1 py-6 text-center text-sm text-slate-500",
+          className,
+        )}
       >
         {emptyLabel ?? "No matches."}
       </div>
@@ -50,7 +53,10 @@ export function SearchSuggestionList({
     <nav
       data-slot="search-suggestion-list"
       aria-label="Search results"
-      className={cn("flex max-h-[min(50vh,360px)] flex-col gap-1 overflow-y-auto pr-1", className)}
+      className={cn(
+        "flex max-h-[min(50vh,360px)] flex-col gap-1 overflow-y-auto pr-1",
+        className,
+      )}
     >
       <div
         {...(useListbox
@@ -64,7 +70,9 @@ export function SearchSuggestionList({
         {rows.map(({ item, showGroup }) => {
           const isActive = activeId === item.id;
           const optionDomId =
-            useListbox && listboxId ? searchSuggestionOptionDomId(listboxId, item.id) : undefined;
+            useListbox && listboxId
+              ? searchSuggestionOptionDomId(listboxId, item.id)
+              : undefined;
           return (
             <Fragment key={item.id}>
               {showGroup ? (
@@ -88,7 +96,9 @@ export function SearchSuggestionList({
               >
                 <span className="font-medium text-slate-100">{item.label}</span>
                 {item.description ? (
-                  <span className="truncate text-xs text-slate-500">{item.description}</span>
+                  <span className="truncate text-xs text-slate-500">
+                    {item.description}
+                  </span>
                 ) : null}
               </button>
             </Fragment>
@@ -100,4 +110,3 @@ export function SearchSuggestionList({
 }
 
 SearchSuggestionList.displayName = "SearchSuggestionList";
-

package/src/ui/search/search-suggestion-utils.ts

@@ -2,7 +2,10 @@
  * Builds a stable DOM id for a listbox option so `aria-activedescendant` on the combobox
  * input can reference it. Safe for href-like `itemId` strings.
  */
-export function searchSuggestionOptionDomId(listboxId: string, itemId: string): string {
+export function searchSuggestionOptionDomId(
+  listboxId: string,
+  itemId: string,
+): string {
   const safe = itemId.replace(/[^a-zA-Z0-9_-]/g, "_");
   return `${listboxId}_opt_${safe}`;
 }

package/src/ui/select/select.tsx

@@ -220,8 +220,7 @@ export const SelectContent = ({
 
       if (event.key === "ArrowUp") {
         event.preventDefault();
-        const prev =
-          idx <= 0 ? options.length - 1 : Math.max(idx - 1, 0);
+        const prev = idx <= 0 ? options.length - 1 : Math.max(idx - 1, 0);
         options[prev]?.focus();
         return;
       }