@zentauri-ui/zentauri-components 1.3.0 → 1.4.0

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

@@ -0,0 +1,133 @@
+"use client";
+
+import { useMemo } from "react";
+import { motion } from "framer-motion";
+
+import { cn, clamp } from "../../../lib/utils";
+
+import { progressAnimationPresets } from "./animations";
+import type { ProgressAnimatedProps } from "./types";
+import type { ProgressCtx, ProgressSectionProps } from "../types";
+import {
+  progressBarVariants,
+  progressTrackVariants,
+  progressVariants,
+} from "../variants";
+import {
+  ProgressContext,
+  ProgressLabel,
+  ProgressValue,
+  useProgressContext,
+} from "../progress-base";
+
+export function ProgressAnimated({
+  className,
+  appearance = "default",
+  size = "md",
+  shape = "rounded",
+  striped = false,
+  animated = false,
+  value = 0,
+  min = 0,
+  max = 100,
+  label,
+  children,
+  ref,
+  animation = "none",
+  busy,
+  ...rest
+}: ProgressAnimatedProps) {
+  const clamped = clamp(value, min, max);
+  const percent = max === min ? 0 : ((clamped - min) / (max - min)) * 100;
+
+  const ctx = useMemo<ProgressCtx>(
+    () => ({
+      value: clamped,
+      min,
+      max,
+      size: size ?? "md",
+      shape: shape ?? "rounded",
+      striped: Boolean(striped),
+      animated: Boolean(animated),
+      appearance: appearance ?? "default",
+    }),
+    [animated, appearance, clamped, max, min, shape, size, striped],
+  );
+
+  const motionProps = progressAnimationPresets[animation];
+
+  return (
+    <ProgressContext.Provider value={ctx}>
+      <motion.div
+        ref={ref}
+        data-slot="progress"
+        role="progressbar"
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={clamped}
+        aria-label={label}
+        aria-busy={busy ? true : undefined}
+        className={cn(
+          progressVariants({ appearance, size, shape, striped, animated }),
+          className,
+        )}
+        initial={animation === "none" ? false : undefined}
+        {...motionProps}
+        {...rest}
+      >
+        {children ?? (
+          <>
+            <ProgressBarAnimated
+              style={{ transform: `scaleX(${percent / 100})` }}
+            />
+          </>
+        )}
+      </motion.div>
+    </ProgressContext.Provider>
+  );
+}
+
+ProgressAnimated.displayName = "Progress";
+
+export function ProgressBarAnimated({
+  className,
+  style,
+  ref,
+  ...rest
+}: ProgressSectionProps & {
+  style?: React.CSSProperties;
+  ref?: React.Ref<HTMLDivElement>;
+}) {
+  const { size, shape, striped, animated } =
+    useProgressContext("ProgressBar");
+
+  return (
+    <div
+      data-slot="progress-track"
+      className={cn(progressTrackVariants({ size, shape }), "text-current")}
+    >
+      <motion.div
+        ref={ref}
+        data-slot="progress-bar"
+        className={cn(progressBarVariants({ striped }), className)}
+        style={{
+          transformOrigin: "left center",
+          ...style,
+        }}
+        animate={
+          animated ? { x: ["-30%", "0%"], opacity: [0.85, 1] } : undefined
+        }
+        transition={
+          animated
+            ? { repeat: Infinity, duration: 1.1, ease: "easeInOut" }
+            : undefined
+        }
+        {...rest}
+      />
+    </div>
+  );
+}
+
+ProgressBarAnimated.displayName = "ProgressBar";
+
+export { ProgressLabel, ProgressValue };

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

@@ -0,0 +1,35 @@
+import type { VariantProps } from "class-variance-authority";
+import type { HTMLMotionProps } from "framer-motion";
+import type { ReactNode } from "react";
+import type { progressVariants } from "../variants";
+import { ProgressSectionProps } from "../types";
+
+export type ProgressVariantProps = VariantProps<typeof progressVariants>;
+
+export type ProgressAnimation = "none" | "shimmer";
+
+export type ProgressPresetMotionProps = Pick<
+  HTMLMotionProps<"div">,
+  "transition" | "animate"
+>;
+
+export type ProgressAnimationPresets = Record<
+  ProgressAnimation,
+  ProgressPresetMotionProps
+>;
+
+export type ProgressAnimatedProps = ProgressVariantProps &
+  Omit<HTMLMotionProps<"div">, "children"> & {
+    value?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+    children?: ReactNode;
+    busy?: boolean;
+    animation?: ProgressAnimation;
+  };
+
+export type ProgressBarAnimatedProps = ProgressSectionProps & {
+  style?: React.CSSProperties;
+  ref?: React.Ref<HTMLDivElement>;
+};

package/src/ui/progress/index.ts

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

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

@@ -0,0 +1,151 @@
+"use client";
+
+import { createContext, useContext, useMemo } from "react";
+
+import { cn, clamp } from "../../lib/utils";
+
+import type { ProgressProps, ProgressSectionProps, ProgressCtx } from "./types";
+import {
+  progressBarVariants,
+  progressTrackVariants,
+  progressVariants,
+} from "./variants";
+
+export const ProgressContext = createContext<ProgressCtx | null>(null);
+
+export function useProgressContext(component: string): ProgressCtx {
+  const ctx = useContext(ProgressContext);
+  if (!ctx) {
+    throw new Error(`${component} must be used within <Progress>`);
+  }
+  return ctx;
+}
+
+export function ProgressBase(props: ProgressProps) {
+  const {
+    className,
+    appearance = "default",
+    size = "md",
+    shape = "rounded",
+    striped = false,
+    animated = false,
+    value = 0,
+    min = 0,
+    max = 100,
+    label,
+    children,
+    ref,
+    as:Wrapper = "div",
+    ...rest
+  } = props;
+  const clamped = clamp(value, min, max);
+  const percent = max === min ? 0 : ((clamped - min) / (max - min)) * 100;
+
+  const ctx = useMemo(
+    () => ({
+      value: clamped,
+      min,
+      max,
+      size: size ?? "md",
+      shape: shape ?? "rounded",
+      striped: Boolean(striped),
+      animated: Boolean(animated),
+      appearance: appearance ?? "default",
+    }),
+    [animated, appearance, clamped, max, min, shape, size, striped],
+  );
+
+  return (
+    <ProgressContext.Provider value={ctx}>
+      <Wrapper
+        ref={ref}
+        data-slot="progress"
+        role="progressbar"
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={clamped}
+        aria-label={label}
+        className={cn(
+          progressVariants({ appearance, size, shape, striped, animated }),
+          className,
+        )}
+        {...rest}
+      >
+        {children ?? (
+          <>
+            <ProgressBar style={{ transform: `scaleX(${percent / 100})` }} />
+          </>
+        )}
+      </Wrapper>
+    </ProgressContext.Provider>
+  );
+}
+
+ProgressBase.displayName = "Progress";
+
+export function ProgressBar({
+  className,
+  style,
+  ref,
+  as:Wrapper = "div",
+  ...rest
+}: ProgressSectionProps & {
+  style?: React.CSSProperties;
+  ref?: React.Ref<HTMLDivElement>;
+}) {
+  const { size, shape, striped, animated } = useProgressContext("ProgressBar");
+
+  return (
+    <Wrapper
+      data-slot="progress-track"
+      className={cn(progressTrackVariants({ size, shape }), "text-current")}
+    >
+      <div
+        ref={ref}
+        data-slot="progress-bar"
+        className={cn(
+          progressBarVariants({ striped }),
+          animated ? "animate-pulse" : undefined,
+          className,
+        )}
+        style={{
+          transformOrigin: "left center",
+          ...style,
+        }}
+        {...rest}
+      />
+    </Wrapper>
+  );
+}
+
+ProgressBar.displayName = "ProgressBar";
+
+export function ProgressLabel({ className, children }: ProgressSectionProps) {
+  return (
+    <div
+      data-slot="progress-label"
+      className={cn("mb-2 font-medium text-slate-200", className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+ProgressLabel.displayName = "ProgressLabel";
+
+export function ProgressValue({ className, children }: ProgressSectionProps) {
+  const { value, min, max } = useProgressContext("ProgressValue");
+  const range = max - min;
+  const pct = range === 0 ? 0 : Math.round(((value - min) / range) * 100);
+  const content = children ?? `${pct}%`;
+  return (
+    <div
+      data-slot="progress-value"
+      className={cn("mt-2 text-right text-slate-400", className)}
+    >
+      {content}
+    </div>
+  );
+}
+
+ProgressValue.displayName = "ProgressValue";

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

@@ -0,0 +1,84 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import {
+  Progress,
+} from "./progress";
+import { ProgressBar, ProgressLabel, ProgressValue } from "./progress-base";
+
+describe("Progress", () => {
+  it("should expose displayName on compound parts", () => {
+    expect(Progress.displayName).toBe("Progress");
+    expect(ProgressBar.displayName).toBe("ProgressBar");
+    expect(ProgressLabel.displayName).toBe("ProgressLabel");
+    expect(ProgressValue.displayName).toBe("ProgressValue");
+  });
+
+  it("should stamp data-slot on the root and default bar track", () => {
+    render(<Progress value={40} />);
+    expect(document.querySelector('[data-slot="progress"]')).toBeTruthy();
+    expect(document.querySelector('[data-slot="progress-track"]')).toBeTruthy();
+    expect(document.querySelector('[data-slot="progress-bar"]')).toBeTruthy();
+  });
+
+  it("should expose progressbar semantics with clamped value", () => {
+    render(<Progress value={120} min={0} max={100} label="Upload" />);
+    const bar = screen.getByRole("progressbar", { name: "Upload" });
+    expect(bar.getAttribute("aria-valuemin")).toBe("0");
+    expect(bar.getAttribute("aria-valuemax")).toBe("100");
+    expect(bar.getAttribute("aria-valuenow")).toBe("100");
+  });
+
+  it("should clampPage below the minimum", () => {
+    render(<Progress value={-5} min={0} max={100} />);
+    expect(screen.getByRole("progressbar").getAttribute("aria-valuenow")).toBe(
+      "0",
+    );
+  });
+
+  it("should render ProgressLabel and ProgressValue slots", () => {
+    render(
+      <Progress value={25} min={0} max={100}>
+        <ProgressLabel>Status</ProgressLabel>
+        <ProgressBar />
+        <ProgressValue />
+      </Progress>,
+    );
+    expect(
+      document.querySelector('[data-slot="progress-label"]'),
+    ).toHaveTextContent("Status");
+    expect(
+      document.querySelector('[data-slot="progress-value"]'),
+    ).toHaveTextContent("25%");
+  });
+
+  it("should allow ProgressValue children to override the default percentage text", () => {
+    render(
+      <Progress value={10} min={0} max={100}>
+        <ProgressBar />
+        <ProgressValue>Almost empty</ProgressValue>
+      </Progress>,
+    );
+    expect(
+      document.querySelector('[data-slot="progress-value"]'),
+    ).toHaveTextContent("Almost empty");
+  });
+
+  it("should apply appearance classes from the variant recipe", () => {
+    render(<Progress value={50} appearance="emerald" />);
+    const root = document.querySelector(
+      '[data-slot="progress"]',
+    ) as HTMLElement;
+    expect(root.className).toMatch(/--progress-fill/);
+  });
+
+  describe("ref forwarding", () => {
+    it("should forward ref to the motion root", () => {
+      const ref = createRef<HTMLDivElement>();
+      render(<Progress ref={ref} value={5} />);
+      expect(ref.current).toBeInstanceOf(HTMLDivElement);
+      expect(ref.current?.getAttribute("data-slot")).toBe("progress");
+    });
+  });
+});

package/src/ui/progress/progress.tsx

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

package/src/ui/progress/types.ts

@@ -0,0 +1,33 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithRef, ElementType, ReactNode } from "react";
+
+import type { progressVariants } from "./variants";
+
+export type ProgressVariantProps = VariantProps<typeof progressVariants>;
+
+export type ProgressProps = ProgressVariantProps &
+  (Omit<ComponentPropsWithRef<"div">, "children"> & {
+    value?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+    children?: ReactNode;
+    as?: ElementType;
+  });
+
+export type ProgressSectionProps = {
+  className?: string;
+  children?: ReactNode;
+  as?: ElementType;
+};
+
+export type ProgressCtx = {
+  value: number;
+  min: number;
+  max: number;
+  size: NonNullable<ProgressProps["size"]>;
+  shape: NonNullable<ProgressProps["shape"]>;
+  striped: boolean;
+  animated: boolean;
+  appearance: NonNullable<ProgressProps["appearance"]>;
+};

package/src/ui/progress/variants.ts

@@ -0,0 +1,105 @@
+import { cva } from "class-variance-authority";
+
+export const progressVariants = cva("w-full text-slate-50", {
+  variants: {
+    appearance: {
+      default: "[--progress-fill:theme(colors.slate.50)]",
+      secondary: "[--progress-fill:theme(colors.slate.300)]",
+      destructive: "[--progress-fill:theme(colors.rose.400)]",
+      emerald: "[--progress-fill:theme(colors.emerald.400)]",
+      indigo: "[--progress-fill:theme(colors.indigo.400)]",
+      purple: "[--progress-fill:theme(colors.purple.400)]",
+      pink: "[--progress-fill:theme(colors.pink.400)]",
+      rose: "[--progress-fill:theme(colors.rose.400)]",
+      sky: "[--progress-fill:theme(colors.sky.400)]",
+      teal: "[--progress-fill:theme(colors.teal.400)]",
+      yellow: "[--progress-fill:theme(colors.yellow.400)]",
+      orange: "[--progress-fill:theme(colors.orange.400)]",
+      outline: "[--progress-fill:theme(colors.cyan.300)]",
+      ghost: "[--progress-fill:theme(colors.slate.200)]",
+      glass: "[--progress-fill:theme(colors.white)]",
+      "gradient-blue":
+        "[--progress-fill:linear-gradient(90deg,theme(colors.blue.500),theme(colors.purple.500))]",
+      "gradient-green":
+        "[--progress-fill:linear-gradient(90deg,theme(colors.green.500),theme(colors.lime.500))]",
+      "gradient-red":
+        "[--progress-fill:linear-gradient(90deg,theme(colors.red.500),theme(colors.pink.500))]",
+      "gradient-yellow":
+        "[--progress-fill:linear-gradient(90deg,theme(colors.yellow.500),theme(colors.orange.500))]",
+      "gradient-purple":
+        "[--progress-fill:linear-gradient(90deg,theme(colors.purple.500),theme(colors.pink.500))]",
+      "gradient-teal":
+        "[--progress-fill:linear-gradient(90deg,theme(colors.teal.500),theme(colors.cyan.500))]",
+      "gradient-indigo":
+        "[--progress-fill:linear-gradient(90deg,theme(colors.indigo.500),theme(colors.purple.500))]",
+      "gradient-pink":
+        "[--progress-fill:linear-gradient(90deg,theme(colors.pink.500),theme(colors.rose.500))]",
+      "gradient-orange":
+        "[--progress-fill:linear-gradient(90deg,theme(colors.orange.500),theme(colors.red.500))]",
+    },
+    size: {
+      xs: "text-[0.65rem]",
+      sm: "text-xs",
+      md: "text-sm",
+      lg: "text-base",
+      xl: "text-lg",
+    },
+    shape: {
+      flat: "rounded-none",
+      rounded: "rounded-md",
+      pill: "rounded-full",
+    },
+    striped: {
+      true: "",
+      false: "",
+    },
+    animated: {
+      true: "",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+    shape: "rounded",
+    striped: false,
+    animated: false,
+  },
+});
+
+export const progressTrackVariants = cva(
+  "relative w-full overflow-hidden bg-white/10",
+  {
+    variants: {
+      size: {
+        xs: "h-1",
+        sm: "h-1.5",
+        md: "h-2",
+        lg: "h-3",
+        xl: "h-4",
+      },
+      shape: {
+        flat: "rounded-none",
+        rounded: "rounded-md",
+        pill: "rounded-full",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      shape: "rounded",
+    },
+  },
+);
+
+export const progressBarVariants = cva(
+  "h-full w-full origin-left rounded-[inherit]",
+  {
+    variants: {
+      striped: {
+        true: "bg-[repeating-linear-gradient(135deg,rgba(255,255,255,0.18)_0,rgba(255,255,255,0.18)_10px,transparent_10px,transparent_20px)]",
+        false: "[background:var(--progress-fill)]",
+      },
+    },
+    defaultVariants: { striped: false },
+  },
+);

package/src/ui/select/index.ts

@@ -0,0 +1,25 @@
+"use client";
+
+export {
+  Select,
+  SelectContext,
+  useSelect,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "./select";
+export type {
+  SelectProps,
+  SelectTriggerProps,
+  SelectContentProps,
+  SelectItemProps,
+  SelectValueProps,
+  SelectOption,
+  SelectContextType,
+} from "./types";
+export {
+  selectTriggerVariants,
+  selectItemVariants,
+  selectContentVariants,
+} from "./variants";