@zentauri-ui/zentauri-components 1.3.0 → 1.4.0

package/src/ui/slider/types.ts

@@ -0,0 +1,66 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithoutRef, ReactNode, RefObject } from "react";
+
+import type {
+  sliderRangeVariants,
+  sliderRootVariants,
+  sliderThumbVariants,
+  sliderTrackVariants,
+} from "./variants";
+
+type SliderRootVariantProps = VariantProps<typeof sliderRootVariants>;
+type SliderThumbVariantProps = VariantProps<typeof sliderThumbVariants>;
+
+export type SliderProps = SliderRootVariantProps & {
+  min?: number;
+  max?: number;
+  step?: number;
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+  disabled?: boolean;
+  appearance?: VariantProps<typeof sliderRangeVariants>["appearance"];
+  /** Label for the slider group (accessibility). */
+  "aria-label"?: string;
+  /** Optional visible label id */
+  "aria-labelledby"?: string;
+  children?: ReactNode;
+} & Omit<ComponentPropsWithoutRef<"div">, "children" | "defaultValue">;
+
+export type SliderTrackProps = ComponentPropsWithoutRef<"div"> &
+  VariantProps<typeof sliderTrackVariants>;
+
+export type SliderRangeProps = ComponentPropsWithoutRef<"div"> &
+  VariantProps<typeof sliderRangeVariants>;
+
+export type SliderThumbProps = SliderThumbVariantProps &
+  ComponentPropsWithoutRef<"div">;
+
+export type RangeSliderProps = SliderRootVariantProps & {
+  min?: number;
+  max?: number;
+  step?: number;
+  value?: [number, number];
+  defaultValue?: [number, number];
+  onValueChange?: (value: [number, number]) => void;
+  disabled?: boolean;
+  appearance?: VariantProps<typeof sliderRangeVariants>["appearance"];
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+} & Omit<ComponentPropsWithoutRef<"div">, "children" | "defaultValue">;
+
+export type SliderAppearance = NonNullable<
+  Parameters<typeof sliderRangeVariants>[0]
+>["appearance"];
+
+export type SliderCtx = {
+  min: number;
+  max: number;
+  step: number;
+  value: number;
+  setValue: (next: number) => void;
+  disabled: boolean;
+  size: NonNullable<SliderProps["size"]>;
+  appearance: SliderAppearance;
+  trackRef: RefObject<HTMLDivElement | null>;
+};

package/src/ui/slider/variants.ts

@@ -0,0 +1,81 @@
+import { cva } from "class-variance-authority";
+
+export const sliderRootVariants = cva("w-full select-none touch-none", {
+  variants: {
+    size: {
+      sm: "py-2",
+      md: "py-2.5",
+      lg: "py-3",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export const sliderTrackVariants = cva(
+  "relative h-2 w-full shrink-0 overflow-hidden rounded-full bg-white/10",
+  {
+    variants: {
+      size: {
+        sm: "h-1.5",
+        md: "h-2",
+        lg: "h-2.5",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);
+
+export const sliderRangeVariants = cva(
+  "absolute h-full rounded-full bg-gradient-to-r from-violet-500 to-indigo-400",
+  {
+    variants: {
+      appearance: {
+        default: "from-violet-500 to-indigo-400",
+        sky: "from-sky-500 to-indigo-400",
+        rose: "from-rose-500 to-indigo-400",
+        purple: "from-purple-500 to-indigo-400",
+        pink: "from-pink-500 to-indigo-400",
+        orange: "from-orange-500 to-indigo-400",
+        yellow: "from-yellow-500 to-indigo-400",
+        teal: "from-teal-500 to-indigo-400",
+        indigo: "from-indigo-500 to-indigo-400",
+        emerald: "from-emerald-500 to-teal-400",
+        amber: "from-amber-500 to-orange-400",
+        gray: "from-gray-500 to-indigo-400",
+        violet: "from-violet-500 to-indigo-400",
+        "gradient-blue": "from-blue-500 to-indigo-400",
+        "gradient-green": "from-green-500 to-indigo-400",
+        "gradient-red": "from-red-500 to-indigo-400",
+        "gradient-yellow": "from-yellow-500 to-indigo-400",
+        "gradient-purple": "from-purple-500 to-indigo-400",
+        "gradient-teal": "from-teal-500 to-indigo-400",
+        "gradient-indigo": "from-indigo-500 to-indigo-400",
+        "gradient-pink": "from-pink-500 to-indigo-400",
+        "gradient-orange": "from-orange-500 to-indigo-400",
+      },
+    },
+    defaultVariants: {
+      appearance: "default",
+    },
+  },
+);
+
+export const sliderThumbVariants = cva(
+  "block size-4 rounded-full border border-white/20 bg-white shadow-md ring-offset-2 ring-offset-slate-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 disabled:pointer-events-none disabled:opacity-40",
+  {
+    variants: {
+      size: {
+        sm: "size-3.5",
+        md: "size-4",
+        lg: "size-5",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);

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

@@ -0,0 +1,5 @@
+"use client";
+
+export { Spinner } from "./spinner";
+export type { SpinnerProps } from "./types";
+export { spinnerVariants } from "./variants";

package/src/ui/spinner/animated/spinner.test.tsx

@@ -0,0 +1,41 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Spinner } from "./spinner";
+
+describe("Spinner", () => {
+  it("should expose displayName", () => {
+    expect(Spinner.displayName).toBe("Spinner");
+  });
+
+  it("should stamp data-slot and status role on the root", () => {
+    render(<Spinner />);
+    const root = document.querySelector('[data-slot="spinner"]');
+    expect(root).toBeTruthy();
+    expect(screen.getByRole("status", { name: "Loading" })).toBe(root);
+  });
+
+  it("should honor a custom aria-label", () => {
+    render(<Spinner aria-label="Saving" />);
+    expect(screen.getByRole("status", { name: "Saving" })).toBeInTheDocument();
+  });
+
+  it.each(["ring", "dots", "pulse", "bars"] as const)(
+    "should render without throwing for variant=%s",
+    (variant) => {
+      const { unmount } = render(<Spinner variant={variant} />);
+      expect(screen.getByRole("status")).toBeVisible();
+      unmount();
+    },
+  );
+
+  describe("ref forwarding", () => {
+    it("should attach ref to the root span", () => {
+      const ref = createRef<HTMLSpanElement>();
+      render(<Spinner ref={ref} />);
+      expect(ref.current).toBeInstanceOf(HTMLSpanElement);
+      expect(ref.current?.getAttribute("data-slot")).toBe("spinner");
+    });
+  });
+});

package/src/ui/spinner/animated/spinner.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { cn } from "../../../lib/utils";
+
+import type { SpinnerProps } from "./types";
+import { spinnerVariants } from "./variants";
+
+export function Spinner(props: SpinnerProps) {
+  const {
+    className,
+    appearance,
+    size,
+    variant = "ring",
+    ref,
+    "aria-label": ariaLabel = "Loading",
+    ...rest
+  } = props;
+  const rootClass = cn(
+    spinnerVariants({ appearance, size, variant }),
+    className,
+  );
+
+  if (variant === "ring") {
+    return (
+      <motion.span
+        ref={ref}
+        role="status"
+        data-slot="spinner"
+        aria-label={ariaLabel}
+        className={cn(rootClass, "relative")}
+        initial={false}
+        {...rest}
+      >
+        <motion.span
+          className="block size-full rounded-full border-2 border-current border-t-transparent"
+          animate={{ rotate: 360 }}
+          transition={{ repeat: Infinity, ease: "linear", duration: 0.85 }}
+          aria-hidden
+        />
+      </motion.span>
+    );
+  }
+
+  if (variant === "dots") {
+    const dotSizes = {
+      xs: "size-1",
+      sm: "size-1.5",
+      md: "size-2",
+      lg: "size-2.5",
+      xl: "size-3",
+    };
+    const dotSize = dotSizes[size as keyof typeof dotSizes];
+    return (
+      <motion.span
+        ref={ref}
+        role="status"
+        data-slot="spinner"
+        aria-label={ariaLabel}
+        className={cn(rootClass, "gap-1")}
+        initial={false}
+        {...rest}
+      >
+        {[0, 1, 2].map((index) => (
+          <motion.span
+            key={index}
+            className={cn("rounded-full bg-current", dotSize)}
+            animate={{ y: [0, -5, 0], opacity: [0.45, 1, 0.45] }}
+            transition={{
+              repeat: Infinity,
+              duration: 0.55,
+              ease: "easeInOut",
+              delay: index * 0.12,
+            }}
+            aria-hidden
+          />
+        ))}
+      </motion.span>
+    );
+  }
+
+  if (variant === "pulse") {
+    return (
+      <motion.span
+        ref={ref}
+        role="status"
+        data-slot="spinner"
+        aria-label={ariaLabel}
+        className={cn(rootClass)}
+        initial={false}
+        {...rest}
+      >
+        <motion.span
+          className="block size-full rounded-full bg-current"
+          animate={{ scale: [0.75, 1, 0.75], opacity: [0.45, 1, 0.45] }}
+          transition={{ repeat: Infinity, duration: 0.9, ease: "easeInOut" }}
+          aria-hidden
+        />
+      </motion.span>
+    );
+  }
+
+  const barWidths = {
+    xs: "w-0.5",
+    sm: "w-0.5",
+    md: "w-1",
+    lg: "w-1.5",
+    xl: "w-2",
+  };
+
+  const barWidth =
+    barWidths[size as keyof typeof barWidths];
+    
+  return (
+    <motion.span
+      ref={ref}
+      role="status"
+      data-slot="spinner"
+      aria-label={ariaLabel}
+      className={cn(rootClass, "gap-1")}
+      initial={false}
+      {...rest}
+    >
+      {[0, 1, 2, 3].map((index) => (
+        <motion.span
+          key={index}
+          className={cn("h-full max-h-[70%] rounded-full bg-current", barWidth)}
+          animate={{ scaleY: [0.35, 1, 0.35] }}
+          transition={{
+            repeat: Infinity,
+            duration: 0.65,
+            ease: "easeInOut",
+            delay: index * 0.1,
+          }}
+          aria-hidden
+        />
+      ))}
+    </motion.span>
+  );
+}
+
+Spinner.displayName = "Spinner";

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

@@ -0,0 +1,11 @@
+import type { VariantProps } from "class-variance-authority";
+import type { HTMLMotionProps } from "framer-motion";
+
+import type { spinnerVariants } from "./variants";
+
+type SpinnerVariantProps = VariantProps<typeof spinnerVariants>;
+
+export type SpinnerProps = SpinnerVariantProps &
+  Omit<HTMLMotionProps<"span">, "children"> & {
+    "aria-label"?: string;
+  };

package/src/ui/spinner/animated/variants.ts

@@ -0,0 +1,50 @@
+import { cva } from "class-variance-authority";
+
+const spinnerAppearances = {
+  default: "text-slate-50",
+  secondary: "text-slate-300",
+  destructive: "text-rose-400",
+  ghost: "text-slate-300",
+  emerald: "text-emerald-400",
+  indigo: "text-indigo-400",
+  purple: "text-purple-400",
+  pink: "text-pink-400",
+  rose: "text-rose-400",
+  sky: "text-sky-400",
+  teal: "text-teal-400",
+  yellow: "text-yellow-400",
+  orange: "text-orange-400",
+  "gradient-blue": "text-blue-400",
+  "gradient-green": "text-green-400",
+  "gradient-red": "text-red-400",
+  "gradient-yellow": "text-yellow-400",
+  "gradient-purple": "text-purple-400",
+  "gradient-teal": "text-teal-400",
+  "gradient-indigo": "text-indigo-400",
+  "gradient-pink": "text-pink-400",
+  "gradient-orange": "text-orange-400",
+} as const;
+
+export const spinnerVariants = cva("inline-flex items-center justify-center", {
+  variants: {
+    appearance: spinnerAppearances,
+    size: {
+      xs: "size-3",
+      sm: "size-4",
+      md: "size-6",
+      lg: "size-8",
+      xl: "size-10",
+    },
+    variant: {
+      ring: "",
+      dots: "",
+      pulse: "",
+      bars: "",
+    },
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+    variant: "ring",
+  },
+});

package/src/ui/stepper/index.ts

@@ -0,0 +1,22 @@
+"use client";
+
+export {
+  Stepper,
+  StepperDescription,
+  StepperIndicator,
+  StepperItem,
+  StepperTitle,
+} from "./stepper";
+export type {
+  StepperDescriptionProps,
+  StepperIndicatorProps,
+  StepperItemProps,
+  StepperProps,
+  StepperTitleProps,
+  StepperAppearance,
+} from "./types";
+export {
+  stepperIndicatorVariants,
+  stepperItemVariants,
+  stepperVariants,
+} from "./variants";

package/src/ui/stepper/stepper.test.tsx

@@ -0,0 +1,183 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import {
+  Stepper,
+  StepperDescription,
+  StepperIndicator,
+  StepperItem,
+  StepperTitle,
+} from "./stepper";
+
+describe("Stepper", () => {
+  it("should expose displayName", () => {
+    expect(Stepper.displayName).toBe("Stepper");
+    expect(StepperItem.displayName).toBe("StepperItem");
+    expect(StepperIndicator.displayName).toBe("StepperIndicator");
+    expect(StepperTitle.displayName).toBe("StepperTitle");
+    expect(StepperDescription.displayName).toBe("StepperDescription");
+  });
+
+  it("should stamp data-slot on stepper root and use list semantics", () => {
+    render(
+      <Stepper>
+        <StepperItem>
+          <StepperIndicator />
+          <StepperTitle>One</StepperTitle>
+        </StepperItem>
+      </Stepper>,
+    );
+    const root = document.querySelector('[data-slot="stepper"]');
+    expect(root).toBeTruthy();
+    expect(root).toHaveAttribute("role", "list");
+    expect(document.querySelector('[data-slot="stepper-item"]')).toHaveAttribute(
+      "role",
+      "listitem",
+    );
+  });
+
+  it("should apply default upcoming appearance to indicators", () => {
+    render(
+      <Stepper>
+        <StepperItem>
+          <StepperIndicator />
+          <StepperTitle>Cart</StepperTitle>
+        </StepperItem>
+        <StepperItem>
+          <StepperIndicator />
+          <StepperTitle>Pay</StepperTitle>
+        </StepperItem>
+      </Stepper>,
+    );
+    const indicators = document.querySelectorAll(
+      '[data-slot="stepper-indicator"]',
+    );
+    expect(indicators).toHaveLength(2);
+    expect(indicators[0]?.className).toContain("border-white/15");
+    expect(indicators[1]?.className).toContain("border-white/15");
+  });
+
+  it("should honor appearance prop on each indicator", () => {
+    render(
+      <Stepper>
+        <StepperItem>
+          <StepperIndicator appearance="complete" />
+          <StepperTitle>Done</StepperTitle>
+        </StepperItem>
+        <StepperItem>
+          <StepperIndicator appearance="current" />
+          <StepperTitle>Active</StepperTitle>
+        </StepperItem>
+      </Stepper>,
+    );
+    const indicators = document.querySelectorAll(
+      '[data-slot="stepper-indicator"]',
+    );
+    expect(indicators[0]?.className).toMatch(/emerald/);
+    expect(indicators[1]?.className).toMatch(/violet/);
+  });
+
+  it("should render step index as indicator content when children are omitted", () => {
+    render(
+      <Stepper>
+        <StepperItem>
+          <StepperIndicator />
+          <StepperTitle>First</StepperTitle>
+        </StepperItem>
+        <StepperItem>
+          <StepperIndicator />
+          <StepperTitle>Second</StepperTitle>
+        </StepperItem>
+      </Stepper>,
+    );
+    const indicators = screen.getAllByText(/^[12]$/);
+    expect(indicators[0]).toHaveTextContent("1");
+    expect(indicators[1]).toHaveTextContent("2");
+  });
+
+  it("should render custom indicator children instead of the default index", () => {
+    render(
+      <Stepper>
+        <StepperItem>
+          <StepperIndicator>✓</StepperIndicator>
+          <StepperTitle>Check</StepperTitle>
+        </StepperItem>
+      </Stepper>,
+    );
+    expect(screen.getByText("✓")).toBeInTheDocument();
+  });
+
+  it("should apply vertical orientation classes on the root", () => {
+    const { container } = render(
+      <Stepper orientation="vertical">
+        <StepperItem>
+          <StepperIndicator />
+          <StepperTitle>V</StepperTitle>
+        </StepperItem>
+      </Stepper>,
+    );
+    const root = container.querySelector('[data-slot="stepper"]');
+    expect(root?.className).toMatch(/flex-col/);
+  });
+
+  it("should pass size from Stepper context to indicators", () => {
+    render(
+      <Stepper size="sm">
+        <StepperItem>
+          <StepperIndicator />
+          <StepperTitle>Small</StepperTitle>
+        </StepperItem>
+      </Stepper>,
+    );
+    const indicator = document.querySelector('[data-slot="stepper-indicator"]');
+    expect(indicator?.className).toMatch(/size-8/);
+  });
+
+  it("should stamp data-slot on title and description", () => {
+    render(
+      <Stepper>
+        <StepperItem>
+          <StepperIndicator />
+          <StepperTitle data-testid="t">T</StepperTitle>
+          <StepperDescription data-testid="d">D</StepperDescription>
+        </StepperItem>
+      </Stepper>,
+    );
+    expect(document.querySelector('[data-slot="stepper-title"]')).toBe(
+      screen.getByTestId("t"),
+    );
+    expect(document.querySelector('[data-slot="stepper-description"]')).toBe(
+      screen.getByTestId("d"),
+    );
+  });
+
+  it("should forward ref on Stepper", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(
+      <Stepper ref={ref}>
+        <StepperItem>
+          <StepperIndicator />
+          <StepperTitle>A</StepperTitle>
+        </StepperItem>
+      </Stepper>,
+    );
+    expect(ref.current?.getAttribute("data-slot")).toBe("stepper");
+  });
+
+  it("should throw when StepperItem is used outside Stepper", () => {
+    expect(() =>
+      render(
+        <StepperItem>
+          <StepperIndicator />
+        </StepperItem>,
+      ),
+    ).toThrow(/must be used within <Stepper>/);
+  });
+
+  it("should throw when StepperIndicator is used outside Stepper", () => {
+    expect(() => render(<StepperIndicator />)).toThrow(
+      /must be used within <Stepper>/,
+    );
+  });
+});