@zentauri-ui/zentauri-components 1.7.0 → 1.7.2

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",
+  },
+});

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

@@ -0,0 +1,15 @@
+import type { PopoverAnimationPresets } from "./types";
+
+export const popoverAnimationPresets: PopoverAnimationPresets = {
+  none: {},
+  fade: {
+    initial: { opacity: 0, y: -4 },
+    animate: { opacity: 1, y: 0 },
+    transition: { duration: 0.16, ease: "easeOut" },
+  },
+  scale: {
+    initial: { opacity: 0, scale: 0.96 },
+    animate: { opacity: 1, scale: 1 },
+    transition: { duration: 0.16, ease: "easeOut" },
+  },
+};

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

@@ -0,0 +1,10 @@
+"use client";
+
+export { PopoverContentAnimated } from "./popover-content-animated";
+export { popoverAnimationPresets } from "./animations";
+export type {
+  PopoverAnimation,
+  PopoverAnimationPresets,
+  PopoverContentAnimatedProps,
+  PopoverPresetMotionProps,
+} from "./types";

package/src/ui/popover/animated/popover-content-animated.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { cn } from "../../../lib/utils";
+
+import { popoverAnimationPresets } from "./animations";
+import type { PopoverContentAnimatedProps } from "./types";
+import { sideAlignClass, usePopover } from "../popover-base";
+import { popoverContentVariants } from "../variants";
+
+export const PopoverContentAnimated = ({
+  children,
+  className,
+  variant,
+  size,
+  width,
+  side = "bottom",
+  align = "center",
+  role = "dialog",
+  animation = "none",
+  onDrag: _onDrag,
+  onDragStart: _onDragStart,
+  onDragEnd: _onDragEnd,
+  onAnimationStart: _onAnimationStart,
+  ...props
+}: PopoverContentAnimatedProps) => {
+  const { open, contentId, contentRef } = usePopover();
+
+  if (!open) {
+    return null;
+  }
+
+  const motionProps = popoverAnimationPresets[animation];
+
+  return (
+    <motion.div
+      ref={contentRef}
+      id={contentId}
+      data-open={open}
+      role={role}
+      tabIndex={-1}
+      {...motionProps}
+      className={cn(
+        popoverContentVariants({ variant, size, width }),
+        sideAlignClass(side, align),
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </motion.div>
+  );
+};

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

@@ -0,0 +1,18 @@
+import type { HTMLMotionProps } from "framer-motion";
+import type { PopoverContentProps } from "../types";
+
+export type PopoverAnimation = "none" | "fade" | "scale";
+
+export type PopoverPresetMotionProps = Pick<
+  HTMLMotionProps<"div">,
+  "initial" | "animate" | "style" | "transition"
+>;
+
+export type PopoverAnimationPresets = Record<
+  PopoverAnimation,
+  PopoverPresetMotionProps
+>;
+
+export type PopoverContentAnimatedProps = PopoverContentProps & {
+  animation?: PopoverAnimation;
+};

package/src/ui/popover/index.ts

@@ -0,0 +1,18 @@
+"use client";
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverContext,
+  usePopover,
+} from "./popover";
+export { popoverContentVariants } from "./variants";
+export type {
+  PopoverAlign,
+  PopoverContentProps,
+  PopoverContextType,
+  PopoverProps,
+  PopoverSide,
+  PopoverTriggerProps,
+} from "./types";