@zentauri-ui/zentauri-components 1.8.3 → 1.8.41

package/src/design-system/kbd.ts

@@ -22,20 +22,15 @@ export const zuiKbdKeyAppearances = {
     "bg-[var(--zui-kbd-indigo-bg,#3730a3)] dark:bg-[var(--zui-kbd-indigo-bg-dark,#4f46e5)] text-[color:var(--zui-kbd-indigo-fg,#ffffff)] dark:text-[color:var(--zui-kbd-indigo-fg-dark,#ffffff)]",
   purple:
     "bg-[var(--zui-kbd-purple-bg,#6b21a8)] dark:bg-[var(--zui-kbd-purple-bg-dark,#9333ea)] text-[color:var(--zui-kbd-purple-fg,#ffffff)] dark:text-[color:var(--zui-kbd-purple-fg-dark,#ffffff)]",
-  pink:
-    "bg-[var(--zui-kbd-pink-bg,#9d174d)] dark:bg-[var(--zui-kbd-pink-bg-dark,#db2777)] text-[color:var(--zui-kbd-pink-fg,#ffffff)] dark:text-[color:var(--zui-kbd-pink-fg-dark,#ffffff)]",
-  rose:
-    "bg-[var(--zui-kbd-rose-bg,#9f1239)] dark:bg-[var(--zui-kbd-rose-bg-dark,#e11d48)] text-[color:var(--zui-kbd-rose-fg,#ffffff)] dark:text-[color:var(--zui-kbd-rose-fg-dark,#ffffff)]",
-  sky:
-    "bg-[var(--zui-kbd-sky-bg,#0ea5e9)] dark:bg-[var(--zui-kbd-sky-bg-dark,#0369a1)] text-[color:var(--zui-kbd-sky-fg,#ffffff)] dark:text-[color:var(--zui-kbd-sky-fg-dark,#ffffff)]",
-  teal:
-    "bg-[var(--zui-kbd-teal-bg,#14b8a6)] dark:bg-[var(--zui-kbd-teal-bg-dark,#0f766e)] text-[color:var(--zui-kbd-teal-fg,#ffffff)] dark:text-[color:var(--zui-kbd-teal-fg-dark,#ffffff)]",
+  pink: "bg-[var(--zui-kbd-pink-bg,#9d174d)] dark:bg-[var(--zui-kbd-pink-bg-dark,#db2777)] text-[color:var(--zui-kbd-pink-fg,#ffffff)] dark:text-[color:var(--zui-kbd-pink-fg-dark,#ffffff)]",
+  rose: "bg-[var(--zui-kbd-rose-bg,#9f1239)] dark:bg-[var(--zui-kbd-rose-bg-dark,#e11d48)] text-[color:var(--zui-kbd-rose-fg,#ffffff)] dark:text-[color:var(--zui-kbd-rose-fg-dark,#ffffff)]",
+  sky: "bg-[var(--zui-kbd-sky-bg,#0ea5e9)] dark:bg-[var(--zui-kbd-sky-bg-dark,#0369a1)] text-[color:var(--zui-kbd-sky-fg,#ffffff)] dark:text-[color:var(--zui-kbd-sky-fg-dark,#ffffff)]",
+  teal: "bg-[var(--zui-kbd-teal-bg,#14b8a6)] dark:bg-[var(--zui-kbd-teal-bg-dark,#0f766e)] text-[color:var(--zui-kbd-teal-fg,#ffffff)] dark:text-[color:var(--zui-kbd-teal-fg-dark,#ffffff)]",
   yellow:
     "bg-[var(--zui-kbd-yellow-bg,#eab308)] dark:bg-[var(--zui-kbd-yellow-bg-dark,#854d0e)] text-[color:var(--zui-kbd-yellow-fg,#ffffff)] dark:text-[color:var(--zui-kbd-yellow-fg-dark,#ffffff)]",
   orange:
     "bg-[var(--zui-kbd-orange-bg,#f97316)] dark:bg-[var(--zui-kbd-orange-bg-dark,#9a3412)] text-[color:var(--zui-kbd-orange-fg,#ffffff)] dark:text-[color:var(--zui-kbd-orange-fg-dark,#ffffff)]",
-  gray:
-    "bg-[var(--zui-kbd-gray-bg,#6b7280)] dark:bg-[var(--zui-kbd-gray-bg-dark,#374151)] text-[color:var(--zui-kbd-gray-fg,#ffffff)] dark:text-[color:var(--zui-kbd-gray-fg-dark,#ffffff)]",
+  gray: "bg-[var(--zui-kbd-gray-bg,#6b7280)] dark:bg-[var(--zui-kbd-gray-bg-dark,#374151)] text-[color:var(--zui-kbd-gray-fg,#ffffff)] dark:text-[color:var(--zui-kbd-gray-fg-dark,#ffffff)]",
   amber:
     "bg-[var(--zui-kbd-amber-bg,#f59e0b)] dark:bg-[var(--zui-kbd-amber-bg-dark,#92400e)] text-[color:var(--zui-kbd-amber-fg,#ffffff)] dark:text-[color:var(--zui-kbd-amber-fg-dark,#ffffff)]",
   violet:

package/src/hooks/useTableFilter/types.ts

@@ -25,4 +25,4 @@ export type UseTableFilterResult<TData, TKey extends string = string> = {
   setFilters: (filters: TableFilterState<TKey>) => void;
   clearFilter: (filterKey: TKey) => void;
   clearFilters: () => void;
-};
+};

package/src/hooks/useTableSort/index.ts

@@ -1,5 +1,2 @@
-export {
-  type UseTableSortParams,
-  type UseTableSortResult,
-} from "./types";
+export { type UseTableSortParams, type UseTableSortResult } from "./types";
 export { useTableSort } from "./useTableSort";

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

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 import { motion } from "framer-motion";
 import { AlertBase } from "../alert-base";
 import { alertAnimationPresets } from "./animations";

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

@@ -1,5 +1,11 @@
 "use client";
-import { animate, motion, useInView, useReducedMotion, type UseInViewOptions } from "framer-motion";
+import {
+  animate,
+  motion,
+  useInView,
+  useReducedMotion,
+  type UseInViewOptions,
+} from "framer-motion";
 import { animatedNumberAppearance } from "./variants";
 import { AnimatedNumberCounterProps, AnimatedNumberProps } from "./types";
 import { cn } from "../../lib/utils";

package/src/ui/animated-number/types.ts

@@ -24,7 +24,16 @@ export type AnimatedNumberProps = MotionPropsWithoutTransitionDelay & {
   ref?: RefObject<HTMLDivElement>;
   appearance?: VariantProps<typeof animatedNumberAppearance>["appearance"];
   size?: VariantProps<typeof animatedNumberAppearance>["size"];
-  type?: "up" | "down" | "scaleUp" | "scaleDown" | "rotateX" | "rotateY" | "skewX" | "skewY" | "fade";
+  type?:
+    | "up"
+    | "down"
+    | "scaleUp"
+    | "scaleDown"
+    | "rotateX"
+    | "rotateY"
+    | "skewX"
+    | "skewY"
+    | "fade";
   delayInSecond?: number;
   transition?: MotionProps["transition"];
 };

package/src/ui/animated-number/variants.ts

@@ -1,14 +1,17 @@
 import { cva } from "class-variance-authority";
 
-import { zuiAnimatedNumberAppearance, zuiAnimatedNumberSize } from "../../design-system/animated-number";
+import {
+  zuiAnimatedNumberAppearance,
+  zuiAnimatedNumberSize,
+} from "../../design-system/animated-number";
 
-export const animatedNumberAppearance = cva("inline-flex",{
+export const animatedNumberAppearance = cva("inline-flex", {
   variants: {
     appearance: zuiAnimatedNumberAppearance,
-    size: zuiAnimatedNumberSize
+    size: zuiAnimatedNumberSize,
   },
   defaultVariants: {
     appearance: "default",
     size: "md",
   },
-});
+});

package/src/ui/buttons/button-base.tsx

@@ -1,11 +1,64 @@
 "use client";
 
+import { cloneElement, isValidElement, type MouseEventHandler } from "react";
+
 import { cn } from "../../lib/utils";
 
 import type { ButtonProps } from "./types";
 import { buttonVariants } from "./variants";
 
 export const ButtonBase = (props: ButtonProps) => {
+  if ("asChild" in props && props.asChild) {
+    const {
+      className,
+      appearance,
+      size,
+      children,
+      asChild: _asChild,
+      disabled,
+      onClick,
+      ...rest
+    } = props;
+
+    if (!isValidElement<{ className?: string }>(children)) {
+      return null;
+    }
+
+    const isNativeButton = children.type === "button";
+    const childOnClick = children.props.onClick as
+      | MouseEventHandler<HTMLElement>
+      | undefined;
+    const handleClick: MouseEventHandler<HTMLElement> = (event) => {
+      if (disabled) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+
+      onClick?.(event);
+      if (!event.defaultPrevented) {
+        childOnClick?.(event);
+      }
+    };
+
+    return cloneElement(children, {
+      ...rest,
+      ...children.props,
+      ...(disabled
+        ? isNativeButton
+          ? { disabled: true }
+          : { "aria-disabled": true, tabIndex: -1 }
+        : null),
+      "data-slot": "button",
+      onClick: handleClick,
+      className: cn(
+        buttonVariants({ appearance, size }),
+        children.props.className,
+        className,
+      ),
+    });
+  }
+
   if (props.as === "link") {
     const {
       className,

package/src/ui/buttons/button.test.tsx

@@ -449,6 +449,46 @@ describe("Button (component library)", () => {
         "Link mode must keep the same data-slot contract",
       ).toBe("A");
     });
+
+    it("should style a child anchor without replacing its navigation props", () => {
+      render(
+        <Button asChild appearance="gradient-teal" size="lg">
+          <a href="/preview/installation">Get started</a>
+        </Button>,
+      );
+      const link = screen.getByRole("link", { name: "Get started" });
+
+      expect(link).toBe(getButtonSlot());
+      expect(link).toHaveAttribute("href", "/preview/installation");
+      expect(link.className).toMatch(/gradient-teal/);
+    });
+
+    it("should make disabled child anchors inert", async () => {
+      const user = userEvent.setup();
+      const onClick = vi.fn();
+      render(
+        <Button asChild disabled onClick={onClick}>
+          <a href="/preview/installation">Get started</a>
+        </Button>,
+      );
+      const link = screen.getByRole("link", { name: "Get started" });
+
+      expect(link).not.toHaveAttribute("disabled");
+      expect(link).toHaveAttribute("aria-disabled", "true");
+      expect(link).toHaveAttribute("tabindex", "-1");
+
+      await user.click(link);
+      expect(onClick).not.toHaveBeenCalled();
+    });
+
+    it("should forward disabled to native button children", () => {
+      render(
+        <Button asChild disabled>
+          <button type="button">Submit</button>
+        </Button>,
+      );
+      expect(screen.getByRole("button", { name: "Submit" })).toBeDisabled();
+    });
   });
 
   describe("props: animation presets (smoke)", () => {

package/src/ui/buttons/types.ts

@@ -1,13 +1,36 @@
 import type { VariantProps } from "class-variance-authority";
-import type { ComponentPropsWithRef } from "react";
+import type {
+  ComponentPropsWithRef,
+  MouseEventHandler,
+  ReactElement,
+} from "react";
 
 import type { buttonVariants } from "./variants";
 
 export type ButtonSharedStatic = VariantProps<typeof buttonVariants>;
 
 export type ButtonProps =
+  | (ButtonSharedStatic &
+      Omit<
+        ComponentPropsWithRef<"button">,
+        "children" | "onClick" | "ref" | "type"
+      > & {
+        asChild: true;
+        as?: never;
+        children: ReactElement<{
+          "aria-disabled"?: boolean | "false" | "true";
+          className?: string;
+          "data-slot"?: string;
+          disabled?: boolean;
+          onClick?: MouseEventHandler<HTMLElement>;
+          tabIndex?: number;
+        }>;
+        onClick?: MouseEventHandler<HTMLElement>;
+      })
   | (ButtonSharedStatic &
       ComponentPropsWithRef<"button"> & {
         as?: "button";
+        asChild?: false;
       })
-  | (ButtonSharedStatic & ComponentPropsWithRef<"a"> & { as: "link" });
+  | (ButtonSharedStatic &
+      ComponentPropsWithRef<"a"> & { as: "link"; asChild?: false });

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

@@ -53,7 +53,9 @@ export function CheckboxAnimated(props: CheckboxAnimatedProps) {
   const state = resolveCheckboxState(resolvedChecked, indeterminate);
   const labelContent = label ?? children;
   const hasVisibleLabel =
-    labelContent !== undefined && labelContent !== null && labelContent !== false;
+    labelContent !== undefined &&
+    labelContent !== null &&
+    labelContent !== false;
   const motionPreset = checkboxAnimationPresets[animation];
   const svgMotionProps = animation === "spring" ? motionPreset : undefined;
   const pathMotionProps = animation === "draw" ? motionPreset : undefined;

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

@@ -49,7 +49,9 @@ export function CheckboxBase(props: CheckboxProps) {
   const state = resolveCheckboxState(resolvedChecked, indeterminate);
   const labelContent = label ?? children;
   const hasVisibleLabel =
-    labelContent !== undefined && labelContent !== null && labelContent !== false;
+    labelContent !== undefined &&
+    labelContent !== null &&
+    labelContent !== false;
 
   const setChecked = useCallback(
     (next: boolean) => {
@@ -98,11 +100,7 @@ export function CheckboxBase(props: CheckboxProps) {
               indicatorClassName,
             )}
           >
-            <path
-              d="M3.5 8H12.5"
-              strokeWidth="2.4"
-              strokeLinecap="round"
-            />
+            <path d="M3.5 8H12.5" strokeWidth="2.4" strokeLinecap="round" />
           </svg>
         ) : (
           <svg

package/src/ui/checkbox/checkbox.test.tsx

@@ -31,14 +31,14 @@ describe("Checkbox", () => {
       </Checkbox>,
     );
 
-    await user.click(screen.getByRole("checkbox", { name: "Marketing emails" }));
+    await user.click(
+      screen.getByRole("checkbox", { name: "Marketing emails" }),
+    );
     expect(onCheckedChange).toHaveBeenLastCalledWith(true);
   });
 
   it("should expose mixed state when indeterminate", () => {
-    render(
-      <Checkbox indeterminate aria-label="Select partial group" />,
-    );
+    render(<Checkbox indeterminate aria-label="Select partial group" />);
     expect(screen.getByRole("checkbox")).toHaveAttribute(
       "aria-checked",
       "mixed",

package/src/ui/checkbox/types.ts

@@ -9,7 +9,9 @@ import type {
 
 export type CheckboxState = "checked" | "unchecked" | "indeterminate";
 
-export type CheckboxRootVariantProps = VariantProps<typeof checkboxRootVariants>;
+export type CheckboxRootVariantProps = VariantProps<
+  typeof checkboxRootVariants
+>;
 export type CheckboxControlVariantProps = VariantProps<
   typeof checkboxControlVariants
 >;
@@ -21,12 +23,7 @@ export type CheckboxProps = CheckboxRootVariantProps &
   CheckboxControlVariantProps &
   Omit<
     ComponentPropsWithRef<"input">,
-    | "type"
-    | "size"
-    | "checked"
-    | "defaultChecked"
-    | "onChange"
-    | "children"
+    "type" | "size" | "checked" | "defaultChecked" | "onChange" | "children"
   > & {
     checked?: boolean;
     defaultChecked?: boolean;

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

@@ -32,7 +32,7 @@ import type {
   CommandContentVariantProps,
   CommandContentLayerProps,
   CommandContentOverlayRenderProps,
-  CommandContentPanelRenderProps
+  CommandContentPanelRenderProps,
 } from "./types";
 import {
   commandContentVariants,
@@ -45,7 +45,7 @@ import {
   commandListVariants,
   commandOverlayVariants,
   commandSeparatorVariants,
-  commandTriggerVariants
+  commandTriggerVariants,
 } from "./variants";
 
 const CommandContext = createContext<CommandCtx | null>(null);

package/src/ui/command/command.test.tsx

@@ -51,9 +51,7 @@ describe("Command", () => {
     const user = userEvent.setup();
     render(<Palette />);
     await user.click(screen.getByRole("button", { name: "Open palette" }));
-    await waitFor(() =>
-      expect(screen.getByRole("dialog")).toBeInTheDocument(),
-    );
+    await waitFor(() => expect(screen.getByRole("dialog")).toBeInTheDocument());
     expect(screen.getByText("Home")).toBeInTheDocument();
   });
 
@@ -61,23 +59,19 @@ describe("Command", () => {
     const { rerender } = render(<Palette open={false} />);
     expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
     rerender(<Palette open />);
-    await waitFor(() =>
-      expect(screen.getByRole("dialog")).toBeInTheDocument(),
-    );
+    await waitFor(() => expect(screen.getByRole("dialog")).toBeInTheDocument());
   });
 
   it("should filter items as the user types", async () => {
     const user = userEvent.setup();
     render(<Palette open />);
-    await waitFor(() =>
-      expect(screen.getByRole("dialog")).toBeInTheDocument(),
-    );
+    await waitFor(() => expect(screen.getByRole("dialog")).toBeInTheDocument());
     await user.type(screen.getByRole("combobox"), "settings");
     await waitFor(() => {
       expect(screen.getByText("Settings")).toBeVisible();
-      expect(screen.getByText("Home").closest("[data-slot=command-item]")).toHaveAttribute(
-        "hidden",
-      );
+      expect(
+        screen.getByText("Home").closest("[data-slot=command-item]"),
+      ).toHaveAttribute("hidden");
     });
   });
 
@@ -94,9 +88,7 @@ describe("Command", () => {
     const user = userEvent.setup();
     const onSelectHome = vi.fn();
     render(<Palette open onSelectHome={onSelectHome} />);
-    await waitFor(() =>
-      expect(screen.getByRole("dialog")).toBeInTheDocument(),
-    );
+    await waitFor(() => expect(screen.getByRole("dialog")).toBeInTheDocument());
     const input = screen.getByRole("combobox");
     input.focus();
     await user.keyboard("{Enter}");
@@ -107,20 +99,14 @@ describe("Command", () => {
     const user = userEvent.setup();
     const onOpenChange = vi.fn();
     render(<Palette open onOpenChange={onOpenChange} />);
-    await waitFor(() =>
-      expect(screen.getByRole("dialog")).toBeInTheDocument(),
-    );
+    await waitFor(() => expect(screen.getByRole("dialog")).toBeInTheDocument());
     await user.keyboard("{Escape}");
-    await waitFor(() =>
-      expect(onOpenChange).toHaveBeenLastCalledWith(false),
-    );
+    await waitFor(() => expect(onOpenChange).toHaveBeenLastCalledWith(false));
   });
 
   it("should render group headings and a separator", async () => {
     render(<Palette open />);
-    await waitFor(() =>
-      expect(screen.getByRole("dialog")).toBeInTheDocument(),
-    );
+    await waitFor(() => expect(screen.getByRole("dialog")).toBeInTheDocument());
     expect(screen.getByText("Navigation")).toBeInTheDocument();
     expect(screen.getByText("Actions")).toBeInTheDocument();
     expect(

package/src/ui/command/index.ts

@@ -25,7 +25,7 @@ export type {
   CommandSectionProps,
   CommandCtx,
   ItemMeta,
-  RegisteredItem
+  RegisteredItem,
 } from "./types";
 export {
   commandContentVariants,

package/src/ui/command/types.ts

@@ -100,7 +100,6 @@ export type CommandCtx = {
   inputRef: RefObject<HTMLInputElement | null>;
 };
 
-
 export type CommandContentOverlayRenderProps = {
   role: "presentation";
   "data-slot": "command-overlay";
@@ -126,4 +125,4 @@ export type CommandContentLayerProps = CommandContentProps & {
   renderPresence?: (children: ReactNode) => ReactNode;
   renderOverlay?: (props: CommandContentOverlayRenderProps) => ReactNode;
   renderPanel?: (props: CommandContentPanelRenderProps) => ReactNode;
-};
+};

package/src/ui/copy-button/types.ts

@@ -12,8 +12,10 @@ export type CopyButtonIconRenderer = (state: {
   copiedIcon: ReactNode;
 }) => ReactNode;
 
-export interface CopyButtonBaseProps
-  extends Omit<ComponentPropsWithRef<"button">, "value" | "onCopy"> {
+export interface CopyButtonBaseProps extends Omit<
+  ComponentPropsWithRef<"button">,
+  "value" | "onCopy"
+> {
   /** Text written to the clipboard when the button is pressed. */
   value: string;
   /** Milliseconds the copied state stays active before resetting. `0` keeps it until re-copied. */

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

@@ -202,10 +202,7 @@ DrawerHeader.displayName = "DrawerHeader";
 
 export function DrawerBody({ className, children }: DrawerSectionProps) {
   return (
-    <div
-      data-slot="drawer-body"
-      className={cn("flex-1 text-sm", className)}
-    >
+    <div data-slot="drawer-body" className={cn("flex-1 text-sm", className)}>
       {children}
     </div>
   );

package/src/ui/dropdown/dropdown.tsx

@@ -146,7 +146,7 @@ export const DropdownContent = ({
       className={cn(
         contentVariants({ placement, spacing }),
         className,
-        divider && "divide-y divide-current"
+        divider && "divide-y divide-current",
       )}
       {...props}
     >

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

@@ -8,7 +8,10 @@ import type { KbdBaseProps } from "../types";
 import { kbdAnimationPresets } from "./animations";
 import type { KbdAnimatedProps } from "./types";
 
-export function KbdAnimated({ animation = "none", ...props }: KbdAnimatedProps) {
+export function KbdAnimated({
+  animation = "none",
+  ...props
+}: KbdAnimatedProps) {
   const motionProps = kbdAnimationPresets[animation];
 
   return (

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

@@ -31,7 +31,10 @@ export function KbdBase({
       {items.map((key, index) => (
         <Fragment key={index}>
           {index > 0 && separator != null ? (
-            <span data-slot="kbd-separator" className={kbdSeparatorVariants({ size })}>
+            <span
+              data-slot="kbd-separator"
+              className={kbdSeparatorVariants({ size })}
+            >
               {separator}
             </span>
           ) : null}

package/src/ui/kbd/kbd.test.tsx

@@ -34,9 +34,7 @@ describe("Kbd", () => {
 
   it("should apply the appearance token", () => {
     render(<Kbd keys={["A"]} appearance="emerald" />);
-    const key = document.querySelector(
-      '[data-slot="kbd-key"]',
-    ) as HTMLElement;
+    const key = document.querySelector('[data-slot="kbd-key"]') as HTMLElement;
     expect(key.className).toMatch(/--zui-kbd-emerald-bg/);
   });
 

package/src/ui/kbd/types.ts

@@ -5,8 +5,10 @@ import type { kbdKeyVariants } from "./variants";
 
 export type KbdVariantProps = VariantProps<typeof kbdKeyVariants>;
 
-export interface KbdBaseProps
-  extends Omit<ComponentPropsWithRef<"span">, "children"> {
+export interface KbdBaseProps extends Omit<
+  ComponentPropsWithRef<"span">,
+  "children"
+> {
   /** Keys to render as individual keycaps, e.g. `["⌘", "K"]`. Takes precedence over `children`. */
   keys?: ReactNode[];
   /** Optional node rendered between keycaps (e.g. "+" or "then"). */

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

@@ -157,9 +157,7 @@ export const Popover = ({
   );
 
   return (
-    <PopoverContext.Provider
-      value={contextValue}
-    >
+    <PopoverContext.Provider value={contextValue}>
       <div className="relative inline-block">{children}</div>
     </PopoverContext.Provider>
   );

package/src/ui/popover/types.ts

@@ -30,9 +30,9 @@ export type PopoverTriggerProps = {
 
 export type PopoverContentProps = ComponentPropsWithRef<"div"> & {
   children: ReactNode;
-  variant?: VariantProps<typeof popoverContentVariants>["variant"]
+  variant?: VariantProps<typeof popoverContentVariants>["variant"];
   size?: VariantProps<typeof popoverContentVariants>["size"];
   width?: VariantProps<typeof popoverContentVariants>["width"];
   side?: PopoverSide;
   align?: PopoverAlign;
-};
+};

package/src/ui/radio-group/animated/index.ts

@@ -1,6 +1,9 @@
 "use client";
 
-export { RadioGroupAnimated, RadioGroupItemAnimated } from "./radio-group-animated";
+export {
+  RadioGroupAnimated,
+  RadioGroupItemAnimated,
+} from "./radio-group-animated";
 export type {
   RadioGroupAnimatedProps,
   RadioGroupAnimation,

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

@@ -110,7 +110,9 @@ export function RadioGroupItemAnimated(props: RadioGroupItemAnimatedProps) {
   const size = sizeProp ?? context?.size;
   const labelContent = label ?? children;
   const hasVisibleLabel =
-    labelContent !== undefined && labelContent !== null && labelContent !== false;
+    labelContent !== undefined &&
+    labelContent !== null &&
+    labelContent !== false;
   const motionPreset = radioGroupAnimationPresets[animation];
 
   return (

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

@@ -18,7 +18,9 @@ describe("RadioGroup", () => {
       </RadioGroup>,
     );
     expect(document.querySelector('[data-slot="radio-group"]')).toBeTruthy();
-    expect(document.querySelector('[data-slot="radio-group-item"]')).toBeTruthy();
+    expect(
+      document.querySelector('[data-slot="radio-group-item"]'),
+    ).toBeTruthy();
   });
 
   it("should select one value at a time", async () => {

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

@@ -4,10 +4,7 @@ import { useCallback, useId, useState } from "react";
 
 import { cn } from "../../lib/utils";
 
-import {
-  RadioGroupContext,
-  useRadioGroupContext,
-} from "./radio-group-context";
+import { RadioGroupContext, useRadioGroupContext } from "./radio-group-context";
 import type { RadioGroupItemProps, RadioGroupProps } from "./types";
 import {
   radioGroupControlVariants,
@@ -103,7 +100,9 @@ export function RadioGroupItem(props: RadioGroupItemProps) {
   const size = sizeProp ?? context?.size;
   const labelContent = label ?? children;
   const hasVisibleLabel =
-    labelContent !== undefined && labelContent !== null && labelContent !== false;
+    labelContent !== undefined &&
+    labelContent !== null &&
+    labelContent !== false;
 
   return (
     <label

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

@@ -8,10 +8,7 @@ export {
   TimelineTitle,
 } from "../timeline-base";
 export { TimelineItem } from "./timeline-item-animated";
-export type {
-  TimelineAnimatedProps,
-  TimelineItemAnimatedProps,
-} from "./types";
+export type { TimelineAnimatedProps, TimelineItemAnimatedProps } from "./types";
 export {
   TIMELINE_DEFAULT_STAGGER,
   timelineItemTransitionPresets,