@zentauri-ui/zentauri-components 1.6.3 → 1.7.1

package/src/ui/card/variants.ts

@@ -1,132 +1,57 @@
 import { cva } from "class-variance-authority";
 
-export const cardVariants = cva(
-  [
-    "relative flex w-full flex-col overflow-hidden text-slate-900 dark:text-slate-50",
-    "ring-offset-slate-50 dark:ring-offset-slate-950 transition-colors",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-600 dark:focus-visible:ring-slate-300 focus-visible:ring-offset-2",
-  ],
-  {
-    variants: {
-      appearance: {
-        default:
-          "border border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5 shadow-[0_1px_2px_rgba(15,23,42,0.08)] dark:shadow-[0_1px_2px_rgba(15,23,42,0.12)]",
-        glass:
-          "border border-black/15 dark:border-white/15 bg-black/10 dark:bg-white/10 backdrop-blur-md shadow-[0_8px_24px_rgba(15,23,42,0.12)] dark:shadow-[0_18px_48px_rgba(15,23,42,0.35)]",
-        outline: "border border-black/15 dark:border-white/15 bg-transparent",
-        ghost: "border border-transparent bg-transparent",
-        elevated:
-          "border border-black/10 dark:border-white/10 bg-slate-100/80 dark:bg-slate-900/80 shadow-[0_12px_32px_rgba(15,23,42,0.12)] dark:shadow-[0_24px_64px_rgba(15,23,42,0.45)]",
-        sky: "border border-sky-800 dark:border-sky-600 bg-sky-50 dark:bg-sky-950/70 backdrop-blur-xl",
-        rose: "border border-rose-800 dark:border-rose-600 bg-rose-50 dark:bg-rose-950/70 backdrop-blur-xl",
-        purple:
-          "border border-purple-800 dark:border-purple-600 bg-purple-50 dark:bg-purple-950/70 backdrop-blur-xl",
-        pink: "border border-pink-800 dark:border-pink-600 bg-pink-50 dark:bg-pink-950/70 backdrop-blur-xl",
-        orange:
-          "border border-orange-800 dark:border-orange-600 bg-orange-50 dark:bg-orange-950/70 backdrop-blur-xl",
-        yellow:
-          "border border-yellow-800 dark:border-yellow-600 bg-yellow-50 dark:bg-yellow-950/70 backdrop-blur-xl",
-        teal: "border border-teal-800 dark:border-teal-600 bg-teal-50 dark:bg-teal-950/70 backdrop-blur-xl",
-        indigo:
-          "border border-indigo-800 dark:border-indigo-600 bg-indigo-50 dark:bg-indigo-950/70 backdrop-blur-xl",
-        emerald:
-          "border border-emerald-800 dark:border-emerald-600 bg-emerald-50 dark:bg-emerald-950/70 backdrop-blur-xl",
-        gray: "border border-gray-800 dark:border-gray-600 bg-gray-50 dark:bg-gray-950/70 backdrop-blur-xl",
-        amber:
-          "border border-amber-800 dark:border-amber-600 bg-amber-50 dark:bg-amber-950/70 backdrop-blur-xl",
-        violet:
-          "border border-violet-800 dark:border-violet-600 bg-violet-50 dark:bg-violet-950/70 backdrop-blur-xl",
-        "gradient-blue":
-          "border border-blue-800 dark:border-blue-600 bg-linear-to-r from-blue-50 dark:from-blue-950/70 to-purple-50 dark:to-purple-950/70 backdrop-blur-xl",
-        "gradient-green":
-          "border border-green-800 dark:border-green-600 bg-linear-to-r from-green-50 dark:from-green-950/70 to-lime-50 dark:to-lime-950/70 backdrop-blur-xl",
-        "gradient-red":
-          "border border-red-800 dark:border-red-600 bg-linear-to-r from-red-50 dark:from-red-950/70 to-pink-50 dark:to-pink-950/70 backdrop-blur-xl",
-        "gradient-yellow":
-          "border border-yellow-800 dark:border-yellow-600 bg-linear-to-r from-yellow-50 dark:from-yellow-950/70 to-orange-50 dark:to-orange-950/70 backdrop-blur-xl",
-        "gradient-purple":
-          "border border-purple-800 dark:border-purple-600 bg-linear-to-r from-purple-50 dark:from-purple-950/70 to-pink-50 dark:to-pink-950/70 backdrop-blur-xl",
-        "gradient-teal":
-          "border border-teal-800 dark:border-teal-600 bg-linear-to-r from-teal-50 dark:from-teal-950/70 to-cyan-50 dark:to-cyan-950/70 backdrop-blur-xl",
-        "gradient-indigo":
-          "border border-indigo-800 dark:border-indigo-600 bg-linear-to-r from-indigo-50 dark:from-indigo-950/70 to-purple-50 dark:to-purple-950/70 backdrop-blur-xl",
-        "gradient-pink":
-          "border border-pink-800 dark:border-pink-600 bg-linear-to-r from-pink-50 dark:from-pink-950/70 to-rose-50 dark:to-rose-950/70 backdrop-blur-xl",
-        "gradient-orange":
-          "border border-orange-800 dark:border-orange-600 bg-linear-to-r from-orange-50 dark:from-orange-950/70 to-red-50 dark:to-red-950/70 backdrop-blur-xl",
-      },
-      size: {
-        sm: "gap-2 p-3 text-sm",
-        md: "gap-3 p-4 text-sm",
-        lg: "gap-4 p-6 text-base",
-      },
-      rounded: {
-        sm: "rounded-lg",
-        md: "rounded-xl",
-        lg: "rounded-2xl",
-        full: "rounded-3xl",
-      },
-    },
-    defaultVariants: {
-      appearance: "default",
-      size: "md",
-      rounded: "md",
-    },
+import {
+  zuiCardAppearances,
+  zuiCardBase,
+  zuiCardDescriptionBase,
+  zuiCardDescriptionSizes,
+  zuiCardFooterBase,
+  zuiCardFooterSizes,
+  zuiCardHeaderBase,
+  zuiCardHeaderSizes,
+  zuiCardRounded,
+  zuiCardSizes,
+  zuiCardTitleBase,
+  zuiCardTitleSizes,
+} from "../../design-system/card";
+
+export const cardVariants = cva(zuiCardBase, {
+  variants: {
+    appearance: zuiCardAppearances,
+    size: zuiCardSizes,
+    rounded: zuiCardRounded,
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+    rounded: "md",
   },
-);
+});
 
-export const cardHeaderVariants = cva(
-  "flex flex-col gap-1 border-b border-black/10 dark:border-white/10 pb-3",
-  {
-    variants: {
-      size: {
-        sm: "pb-2",
-        md: "pb-3",
-        lg: "pb-4",
-      },
-    },
-    defaultVariants: { size: "md" },
+export const cardHeaderVariants = cva(zuiCardHeaderBase, {
+  variants: {
+    size: zuiCardHeaderSizes,
   },
-);
+  defaultVariants: { size: "md" },
+});
 
-export const cardFooterVariants = cva(
-  "flex flex-col gap-2 border-t border-black/10 dark:border-white/10 pt-3",
-  {
-    variants: {
-      size: {
-        sm: "pt-2",
-        md: "pt-3",
-        lg: "pt-4",
-      },
-    },
-    defaultVariants: { size: "md" },
+export const cardFooterVariants = cva(zuiCardFooterBase, {
+  variants: {
+    size: zuiCardFooterSizes,
   },
-);
+  defaultVariants: { size: "md" },
+});
 
-export const cardTitleVariants = cva(
-  "font-semibold tracking-tight text-slate-950 dark:text-white",
-  {
-    variants: {
-      size: {
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-lg",
-      },
-    },
-    defaultVariants: { size: "md" },
+export const cardTitleVariants = cva(zuiCardTitleBase, {
+  variants: {
+    size: zuiCardTitleSizes,
   },
-);
+  defaultVariants: { size: "md" },
+});
 
-export const cardDescriptionVariants = cva(
-  "text-slate-500 dark:text-slate-50",
-  {
-    variants: {
-      size: {
-        sm: "text-xs",
-        md: "text-sm",
-        lg: "text-base",
-      },
-    },
-    defaultVariants: { size: "md" },
+export const cardDescriptionVariants = cva(zuiCardDescriptionBase, {
+  variants: {
+    size: zuiCardDescriptionSizes,
   },
-);
+  defaultVariants: { size: "md" },
+});

package/src/ui/checkbox/animated/animations.ts

@@ -0,0 +1,12 @@
+export const checkboxAnimationPresets = {
+  draw: {
+    initial: { pathLength: 0, opacity: 0 },
+    animate: { pathLength: 1, opacity: 1 },
+    transition: { duration: 0.2, ease: "easeOut" },
+  },
+  spring: {
+    initial: { scale: 0.7, opacity: 0 },
+    animate: { scale: 1, opacity: 1 },
+    transition: { type: "spring", stiffness: 520, damping: 30 },
+  },
+} as const;

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

@@ -0,0 +1,145 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useCallback, useId, useState } from "react";
+
+import { cn } from "../../../lib/utils";
+
+import { checkboxAnimationPresets } from "./animations";
+import type { CheckboxAnimatedProps } from "./types";
+import type { CheckboxState } from "../types";
+import {
+  checkboxControlVariants,
+  checkboxIndicatorVariants,
+  checkboxRootVariants,
+} from "../variants";
+
+function resolveCheckboxState(
+  checked: boolean,
+  indeterminate: boolean | undefined,
+): CheckboxState {
+  if (indeterminate) {
+    return "indeterminate";
+  }
+  return checked ? "checked" : "unchecked";
+}
+
+export function CheckboxAnimated(props: CheckboxAnimatedProps) {
+  const {
+    className,
+    rootClassName,
+    controlClassName,
+    indicatorClassName,
+    appearance,
+    size,
+    checked,
+    defaultChecked = false,
+    indeterminate,
+    onCheckedChange,
+    disabled,
+    children,
+    label,
+    id,
+    ref,
+    "aria-label": ariaLabel,
+    animation = "draw",
+    ...rest
+  } = props;
+  const generatedId = useId();
+  const controlId = id ?? generatedId;
+  const isControlled = checked !== undefined;
+  const [uncontrolled, setUncontrolled] = useState(defaultChecked);
+  const resolvedChecked = isControlled ? Boolean(checked) : uncontrolled;
+  const state = resolveCheckboxState(resolvedChecked, indeterminate);
+  const labelContent = label ?? children;
+  const hasVisibleLabel =
+    labelContent !== undefined && labelContent !== null && labelContent !== false;
+  const motionPreset = checkboxAnimationPresets[animation];
+  const svgMotionProps = animation === "spring" ? motionPreset : undefined;
+  const pathMotionProps = animation === "draw" ? motionPreset : undefined;
+
+  const setChecked = useCallback(
+    (next: boolean) => {
+      if (!isControlled) {
+        setUncontrolled(next);
+      }
+      onCheckedChange?.(next);
+    },
+    [isControlled, onCheckedChange],
+  );
+
+  return (
+    <label
+      className={cn(checkboxRootVariants({ size }), rootClassName, className)}
+      data-disabled={disabled ? "true" : undefined}
+      data-state={state}
+      htmlFor={controlId}
+    >
+      <input
+        ref={ref}
+        id={controlId}
+        type="checkbox"
+        data-slot="checkbox"
+        className="peer sr-only"
+        checked={resolvedChecked}
+        disabled={disabled}
+        aria-checked={indeterminate ? "mixed" : resolvedChecked}
+        aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : "Checkbox")}
+        onChange={(event) => setChecked(event.currentTarget.checked)}
+        {...rest}
+      />
+      <span
+        aria-hidden="true"
+        className={cn(
+          checkboxControlVariants({ appearance, size }),
+          controlClassName,
+        )}
+        data-slot="checkbox-control"
+      >
+        {state !== "unchecked" && (
+          <motion.svg
+            key={state}
+            viewBox="0 0 16 16"
+            fill="none"
+            className={cn(
+              checkboxIndicatorVariants({ size }),
+              "opacity-100",
+              indicatorClassName,
+            )}
+            initial={svgMotionProps?.initial}
+            animate={svgMotionProps?.animate}
+            transition={svgMotionProps?.transition}
+          >
+            {state === "indeterminate" ? (
+              <motion.path
+                d="M3.5 8H12.5"
+                strokeWidth="2.4"
+                strokeLinecap="round"
+                initial={pathMotionProps?.initial}
+                animate={pathMotionProps?.animate}
+                transition={pathMotionProps?.transition}
+              />
+            ) : (
+              <motion.path
+                d="M3.2 8.4L6.5 11.5L12.8 4.5"
+                strokeWidth="2.2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                initial={pathMotionProps?.initial}
+                animate={pathMotionProps?.animate}
+                transition={pathMotionProps?.transition}
+              />
+            )}
+          </motion.svg>
+        )}
+      </span>
+      {hasVisibleLabel && (
+        <span className="min-w-0 leading-6" data-slot="checkbox-label">
+          {labelContent}
+        </span>
+      )}
+    </label>
+  );
+}
+
+CheckboxAnimated.displayName = "Checkbox";

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

@@ -0,0 +1,9 @@
+"use client";
+
+export { CheckboxAnimated } from "./checkbox-animated";
+export type {
+  CheckboxAnimatedProps,
+  CheckboxAnimation,
+  CheckboxAnimationPresets,
+} from "./types";
+export { checkboxAnimationPresets } from "./animations";

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

@@ -0,0 +1,9 @@
+import type { CheckboxProps } from "../types";
+import type { checkboxAnimationPresets } from "./animations";
+
+export type CheckboxAnimation = keyof typeof checkboxAnimationPresets;
+export type CheckboxAnimationPresets = typeof checkboxAnimationPresets;
+
+export type CheckboxAnimatedProps = CheckboxProps & {
+  animation?: CheckboxAnimation;
+};

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

@@ -0,0 +1,134 @@
+"use client";
+
+import { useCallback, useId, useState } from "react";
+
+import { cn } from "../../lib/utils";
+
+import type { CheckboxProps, CheckboxState } from "./types";
+import {
+  checkboxControlVariants,
+  checkboxIndicatorVariants,
+  checkboxRootVariants,
+} from "./variants";
+
+function resolveCheckboxState(
+  checked: boolean,
+  indeterminate: boolean | undefined,
+): CheckboxState {
+  if (indeterminate) {
+    return "indeterminate";
+  }
+  return checked ? "checked" : "unchecked";
+}
+
+export function CheckboxBase(props: CheckboxProps) {
+  const {
+    className,
+    rootClassName,
+    controlClassName,
+    indicatorClassName,
+    appearance,
+    size,
+    checked,
+    defaultChecked = false,
+    indeterminate,
+    onCheckedChange,
+    disabled,
+    children,
+    label,
+    id,
+    ref,
+    "aria-label": ariaLabel,
+    ...rest
+  } = props;
+  const generatedId = useId();
+  const controlId = id ?? generatedId;
+  const isControlled = checked !== undefined;
+  const [uncontrolled, setUncontrolled] = useState(defaultChecked);
+  const resolvedChecked = isControlled ? Boolean(checked) : uncontrolled;
+  const state = resolveCheckboxState(resolvedChecked, indeterminate);
+  const labelContent = label ?? children;
+  const hasVisibleLabel =
+    labelContent !== undefined && labelContent !== null && labelContent !== false;
+
+  const setChecked = useCallback(
+    (next: boolean) => {
+      if (!isControlled) {
+        setUncontrolled(next);
+      }
+      onCheckedChange?.(next);
+    },
+    [isControlled, onCheckedChange],
+  );
+
+  return (
+    <label
+      className={cn(checkboxRootVariants({ size }), rootClassName, className)}
+      data-disabled={disabled ? "true" : undefined}
+      data-state={state}
+      htmlFor={controlId}
+    >
+      <input
+        ref={ref}
+        id={controlId}
+        type="checkbox"
+        data-slot="checkbox"
+        className="peer sr-only"
+        checked={resolvedChecked}
+        disabled={disabled}
+        aria-checked={indeterminate ? "mixed" : resolvedChecked}
+        aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : "Checkbox")}
+        onChange={(event) => setChecked(event.currentTarget.checked)}
+        {...rest}
+      />
+      <span
+        aria-hidden="true"
+        className={cn(
+          checkboxControlVariants({ appearance, size }),
+          controlClassName,
+        )}
+        data-slot="checkbox-control"
+      >
+        {state === "indeterminate" ? (
+          <svg
+            viewBox="0 0 16 16"
+            fill="none"
+            className={cn(
+              checkboxIndicatorVariants({ size }),
+              indicatorClassName,
+            )}
+          >
+            <path
+              d="M3.5 8H12.5"
+              strokeWidth="2.4"
+              strokeLinecap="round"
+            />
+          </svg>
+        ) : (
+          <svg
+            viewBox="0 0 16 16"
+            fill="none"
+            className={cn(
+              checkboxIndicatorVariants({ size }),
+              indicatorClassName,
+            )}
+          >
+            <path
+              d="M3.2 8.4L6.5 11.5L12.8 4.5"
+              strokeWidth="2.2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        )}
+      </span>
+      {hasVisibleLabel && (
+        <span className="min-w-0 leading-6" data-slot="checkbox-label">
+          {labelContent}
+        </span>
+      )}
+    </label>
+  );
+}
+
+CheckboxBase.displayName = "Checkbox";

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

@@ -0,0 +1,53 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { Checkbox } from "./checkbox";
+
+describe("Checkbox", () => {
+  it("should expose displayName", () => {
+    expect(Checkbox.displayName).toBe("Checkbox");
+  });
+
+  it("should stamp data-slot", () => {
+    render(<Checkbox aria-label="Accept" />);
+    expect(document.querySelector('[data-slot="checkbox"]')).toBeTruthy();
+  });
+
+  it("should use accessible label content", () => {
+    render(<Checkbox>Accept terms</Checkbox>);
+    expect(
+      screen.getByRole("checkbox", { name: "Accept terms" }),
+    ).toBeInTheDocument();
+  });
+
+  it("should call onCheckedChange when toggled", async () => {
+    const user = userEvent.setup();
+    const onCheckedChange = vi.fn();
+    render(
+      <Checkbox defaultChecked={false} onCheckedChange={onCheckedChange}>
+        Marketing emails
+      </Checkbox>,
+    );
+
+    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" />,
+    );
+    expect(screen.getByRole("checkbox")).toHaveAttribute(
+      "aria-checked",
+      "mixed",
+    );
+  });
+
+  it("should forward ref to the input", () => {
+    const ref = createRef<HTMLInputElement>();
+    render(<Checkbox ref={ref} aria-label="Remember me" />);
+    expect(ref.current?.getAttribute("data-slot")).toBe("checkbox");
+  });
+});

package/src/ui/checkbox/checkbox.tsx

@@ -0,0 +1,8 @@
+import { CheckboxBase } from "./checkbox-base";
+import type { CheckboxProps } from "./types";
+
+export function Checkbox(props: CheckboxProps) {
+  return <CheckboxBase {...props} />;
+}
+
+Checkbox.displayName = "Checkbox";

package/src/ui/checkbox/index.ts

@@ -0,0 +1,15 @@
+"use client";
+
+export { Checkbox } from "./checkbox";
+export type {
+  CheckboxControlVariantProps,
+  CheckboxIndicatorVariantProps,
+  CheckboxProps,
+  CheckboxRootVariantProps,
+  CheckboxState,
+} from "./types";
+export {
+  checkboxControlVariants,
+  checkboxIndicatorVariants,
+  checkboxRootVariants,
+} from "./variants";

package/src/ui/checkbox/types.ts

@@ -0,0 +1,40 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+
+import type {
+  checkboxControlVariants,
+  checkboxIndicatorVariants,
+  checkboxRootVariants,
+} from "./variants";
+
+export type CheckboxState = "checked" | "unchecked" | "indeterminate";
+
+export type CheckboxRootVariantProps = VariantProps<typeof checkboxRootVariants>;
+export type CheckboxControlVariantProps = VariantProps<
+  typeof checkboxControlVariants
+>;
+export type CheckboxIndicatorVariantProps = VariantProps<
+  typeof checkboxIndicatorVariants
+>;
+
+export type CheckboxProps = CheckboxRootVariantProps &
+  CheckboxControlVariantProps &
+  Omit<
+    ComponentPropsWithRef<"input">,
+    | "type"
+    | "size"
+    | "checked"
+    | "defaultChecked"
+    | "onChange"
+    | "children"
+  > & {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    indeterminate?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    children?: ReactNode;
+    label?: ReactNode;
+    rootClassName?: string;
+    controlClassName?: string;
+    indicatorClassName?: string;
+  };

package/src/ui/checkbox/variants.ts

@@ -0,0 +1,50 @@
+import { cva } from "class-variance-authority";
+
+import {
+  zuiCheckboxAppearances,
+  zuiCheckboxControlBase,
+  zuiCheckboxIndicatorBase,
+  zuiCheckboxRootBase,
+  zuiCheckboxSizes,
+} from "../../design-system/checkbox";
+
+export const checkboxRootVariants = cva(zuiCheckboxRootBase, {
+  variants: {
+    size: {
+      sm: zuiCheckboxSizes.sm.root,
+      md: zuiCheckboxSizes.md.root,
+      lg: zuiCheckboxSizes.lg.root,
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export const checkboxControlVariants = cva(zuiCheckboxControlBase, {
+  variants: {
+    appearance: zuiCheckboxAppearances,
+    size: {
+      sm: zuiCheckboxSizes.sm.control,
+      md: zuiCheckboxSizes.md.control,
+      lg: zuiCheckboxSizes.lg.control,
+    },
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+  },
+});
+
+export const checkboxIndicatorVariants = cva(zuiCheckboxIndicatorBase, {
+  variants: {
+    size: {
+      sm: zuiCheckboxSizes.sm.indicator,
+      md: zuiCheckboxSizes.md.indicator,
+      lg: zuiCheckboxSizes.lg.indicator,
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});