@zentauri-ui/zentauri-components 1.8.3 → 1.8.4

package/src/animations/slide-left/slide-left.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { slideLeftPreset } from "./presets";
+
+export const SlideLeft = createMotionAnimation(
+  "SlideLeft",
+  "animation-slide-left",
+  slideLeftPreset,
+);

package/src/animations/slide-left/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type SlideLeftProps = MotionAnimationProps;

package/src/animations/slide-right/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { SlideRight } from "./slide-right";
+export { slideRightPreset } from "./presets";
+export type { SlideRightProps } from "./types";

package/src/animations/slide-right/presets.ts

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const slideRightPreset = {
+  initial: { x: -24 },
+  animate: { x: 0 },
+  exit: { x: -12 },
+  transition: { duration: 0.34, ease: "easeOut" },
+} satisfies MotionAnimationPreset;

package/src/animations/slide-right/slide-right.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { slideRightPreset } from "./presets";
+
+export const SlideRight = createMotionAnimation(
+  "SlideRight",
+  "animation-slide-right",
+  slideRightPreset,
+);

package/src/animations/slide-right/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type SlideRightProps = MotionAnimationProps;

package/src/animations/slide-up/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { SlideUp } from "./slide-up";
+export { slideUpPreset } from "./presets";
+export type { SlideUpProps } from "./types";

package/src/animations/slide-up/presets.ts

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const slideUpPreset = {
+  initial: { y: 24 },
+  animate: { y: 0 },
+  exit: { y: 12 },
+  transition: { duration: 0.34, ease: "easeOut" },
+} satisfies MotionAnimationPreset;

package/src/animations/slide-up/slide-up.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { slideUpPreset } from "./presets";
+
+export const SlideUp = createMotionAnimation(
+  "SlideUp",
+  "animation-slide-up",
+  slideUpPreset,
+);

package/src/animations/slide-up/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type SlideUpProps = MotionAnimationProps;

package/src/animations/spin/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { Spin } from "./spin";
+export { spinPreset } from "./presets";
+export type { SpinProps } from "./types";

package/src/animations/spin/presets.ts

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const spinPreset = {
+  initial: { rotate: 0 },
+  animate: { rotate: 360 },
+  exit: { opacity: 0, rotate: 360 },
+  transition: { duration: 2, ease: "linear", repeat: Infinity },
+} satisfies MotionAnimationPreset;

package/src/animations/spin/spin.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { spinPreset } from "./presets";
+
+export const Spin = createMotionAnimation("Spin", "animation-spin", spinPreset);

package/src/animations/spin/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type SpinProps = MotionAnimationProps;

package/src/animations/text-reveal/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { TextReveal } from "./text-reveal";
+export { textRevealPreset } from "./presets";
+export type { TextRevealProps } from "./types";

package/src/animations/text-reveal/presets.ts

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const textRevealPreset = {
+  initial: { opacity: 0, y: 18, filter: "blur(6px)" },
+  animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+  exit: { opacity: 0, y: 8, filter: "blur(4px)" },
+  transition: { duration: 0.42, ease: [0.16, 1, 0.3, 1] },
+} satisfies MotionAnimationPreset;

package/src/animations/text-reveal/text-reveal.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { textRevealPreset } from "./presets";
+
+export const TextReveal = createMotionAnimation(
+  "TextReveal",
+  "animation-text-reveal",
+  textRevealPreset,
+);

package/src/animations/text-reveal/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type TextRevealProps = MotionAnimationProps;

package/src/animations/text-shimmer/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { TextShimmer } from "./text-shimmer";
+export { textShimmerPreset } from "./presets";
+export type { TextShimmerProps } from "./types";

package/src/animations/text-shimmer/presets.ts

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const textShimmerPreset = {
+  initial: { opacity: 0, backgroundPosition: "200% 0" },
+  animate: { opacity: 1, backgroundPosition: "-200% 0" },
+  exit: { opacity: 0, backgroundPosition: "-200% 0" },
+  transition: { duration: 1.2, ease: "easeInOut" },
+} satisfies MotionAnimationPreset;

package/src/animations/text-shimmer/text-shimmer.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { textShimmerPreset } from "./presets";
+
+export const TextShimmer = createMotionAnimation(
+  "TextShimmer",
+  "animation-text-shimmer",
+  textShimmerPreset,
+);

package/src/animations/text-shimmer/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type TextShimmerProps = MotionAnimationProps;

package/src/animations/tilt/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { Tilt } from "./tilt";
+export { tiltPreset } from "./presets";
+export type { TiltProps } from "./types";

package/src/animations/tilt/presets.ts

@@ -0,0 +1,12 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const tiltPreset = {
+  initial: { rotateX: 0, rotateY: 0, transformPerspective: 900 },
+  animate: {
+    rotateX: [0, 3, -3, 0],
+    rotateY: [0, -5, 5, 0],
+    transformPerspective: 900,
+  },
+  exit: { opacity: 0, rotateX: 0, rotateY: 0, transformPerspective: 900 },
+  transition: { duration: 2, ease: "easeInOut", repeat: Infinity },
+} satisfies MotionAnimationPreset;

package/src/animations/tilt/tilt.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { tiltPreset } from "./presets";
+
+export const Tilt = createMotionAnimation("Tilt", "animation-tilt", tiltPreset);

package/src/animations/tilt/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type TiltProps = MotionAnimationProps;

package/src/animations/wiggle/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { Wiggle } from "./wiggle";
+export { wigglePreset } from "./presets";
+export type { WiggleProps } from "./types";

package/src/animations/wiggle/presets.ts

@@ -0,0 +1,13 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const wigglePreset = {
+  initial: { rotate: 0 },
+  animate: { rotate: [0, -4, 4, -3, 3, 0] },
+  exit: { opacity: 0, rotate: 0 },
+  transition: {
+    duration: 0.75,
+    ease: "easeInOut",
+    repeat: Infinity,
+    repeatDelay: 1,
+  },
+} satisfies MotionAnimationPreset;

package/src/animations/wiggle/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type WiggleProps = MotionAnimationProps;

package/src/animations/wiggle/wiggle.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { wigglePreset } from "./presets";
+
+export const Wiggle = createMotionAnimation(
+  "Wiggle",
+  "animation-wiggle",
+  wigglePreset,
+);

package/src/design-system/copy-button.ts

@@ -26,20 +26,15 @@ export const zuiCopyButtonAppearances = {
     "bg-[var(--zui-copy-button-indigo-bg,#3730a3)] dark:bg-[var(--zui-copy-button-indigo-bg-dark,#4f46e5)] text-[color:var(--zui-copy-button-indigo-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-indigo-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-indigo-bg-hover,#3730a3)] dark:hover:bg-[var(--zui-copy-button-indigo-bg-hover-dark,#4f46e5)]",
   purple:
     "bg-[var(--zui-copy-button-purple-bg,#6b21a8)] dark:bg-[var(--zui-copy-button-purple-bg-dark,#9333ea)] text-[color:var(--zui-copy-button-purple-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-purple-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-purple-bg-hover,#6b21a8)] dark:hover:bg-[var(--zui-copy-button-purple-bg-hover-dark,#9333ea)]",
-  pink:
-    "bg-[var(--zui-copy-button-pink-bg,#9d174d)] dark:bg-[var(--zui-copy-button-pink-bg-dark,#db2777)] text-[color:var(--zui-copy-button-pink-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-pink-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-pink-bg-hover,#9d174d)] dark:hover:bg-[var(--zui-copy-button-pink-bg-hover-dark,#db2777)]",
-  rose:
-    "bg-[var(--zui-copy-button-rose-bg,#9f1239)] dark:bg-[var(--zui-copy-button-rose-bg-dark,#e11d48)] text-[color:var(--zui-copy-button-rose-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-rose-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-rose-bg-hover,#9f1239)] dark:hover:bg-[var(--zui-copy-button-rose-bg-hover-dark,#e11d48)]",
-  sky:
-    "bg-[var(--zui-copy-button-sky-bg,#0ea5e9)] dark:bg-[var(--zui-copy-button-sky-bg-dark,#0369a1)] text-[color:var(--zui-copy-button-sky-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-sky-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-sky-bg-hover,#0ea5e9)] dark:hover:bg-[var(--zui-copy-button-sky-bg-hover-dark,#075985)]",
-  teal:
-    "bg-[var(--zui-copy-button-teal-bg,#14b8a6)] dark:bg-[var(--zui-copy-button-teal-bg-dark,#0f766e)] text-[color:var(--zui-copy-button-teal-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-teal-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-teal-bg-hover,#14b8a6)] dark:hover:bg-[var(--zui-copy-button-teal-bg-hover-dark,#115e59)]",
+  pink: "bg-[var(--zui-copy-button-pink-bg,#9d174d)] dark:bg-[var(--zui-copy-button-pink-bg-dark,#db2777)] text-[color:var(--zui-copy-button-pink-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-pink-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-pink-bg-hover,#9d174d)] dark:hover:bg-[var(--zui-copy-button-pink-bg-hover-dark,#db2777)]",
+  rose: "bg-[var(--zui-copy-button-rose-bg,#9f1239)] dark:bg-[var(--zui-copy-button-rose-bg-dark,#e11d48)] text-[color:var(--zui-copy-button-rose-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-rose-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-rose-bg-hover,#9f1239)] dark:hover:bg-[var(--zui-copy-button-rose-bg-hover-dark,#e11d48)]",
+  sky: "bg-[var(--zui-copy-button-sky-bg,#0ea5e9)] dark:bg-[var(--zui-copy-button-sky-bg-dark,#0369a1)] text-[color:var(--zui-copy-button-sky-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-sky-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-sky-bg-hover,#0ea5e9)] dark:hover:bg-[var(--zui-copy-button-sky-bg-hover-dark,#075985)]",
+  teal: "bg-[var(--zui-copy-button-teal-bg,#14b8a6)] dark:bg-[var(--zui-copy-button-teal-bg-dark,#0f766e)] text-[color:var(--zui-copy-button-teal-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-teal-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-teal-bg-hover,#14b8a6)] dark:hover:bg-[var(--zui-copy-button-teal-bg-hover-dark,#115e59)]",
   yellow:
     "bg-[var(--zui-copy-button-yellow-bg,#eab308)] dark:bg-[var(--zui-copy-button-yellow-bg-dark,#854d0e)] text-[color:var(--zui-copy-button-yellow-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-yellow-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-yellow-bg-hover,#eab308)] dark:hover:bg-[var(--zui-copy-button-yellow-bg-hover-dark,#713f12)]",
   orange:
     "bg-[var(--zui-copy-button-orange-bg,#f97316)] dark:bg-[var(--zui-copy-button-orange-bg-dark,#9a3412)] text-[color:var(--zui-copy-button-orange-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-orange-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-orange-bg-hover,#f97316)] dark:hover:bg-[var(--zui-copy-button-orange-bg-hover-dark,#7c2d12)]",
-  gray:
-    "bg-[var(--zui-copy-button-gray-bg,#6b7280)] dark:bg-[var(--zui-copy-button-gray-bg-dark,#374151)] text-[color:var(--zui-copy-button-gray-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-gray-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-gray-bg-hover,#6b7280)] dark:hover:bg-[var(--zui-copy-button-gray-bg-hover-dark,#1f2937)]",
+  gray: "bg-[var(--zui-copy-button-gray-bg,#6b7280)] dark:bg-[var(--zui-copy-button-gray-bg-dark,#374151)] text-[color:var(--zui-copy-button-gray-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-gray-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-gray-bg-hover,#6b7280)] dark:hover:bg-[var(--zui-copy-button-gray-bg-hover-dark,#1f2937)]",
   amber:
     "bg-[var(--zui-copy-button-amber-bg,#f59e0b)] dark:bg-[var(--zui-copy-button-amber-bg-dark,#92400e)] text-[color:var(--zui-copy-button-amber-fg,#ffffff)] dark:text-[color:var(--zui-copy-button-amber-fg-dark,#ffffff)] hover:bg-[var(--zui-copy-button-amber-bg-hover,#f59e0b)] dark:hover:bg-[var(--zui-copy-button-amber-bg-hover-dark,#78350f)]",
   violet:

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/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>
   );