@zentauri-ui/zentauri-components 1.7.0 → 1.7.1

package/src/ui/radio-group/animated/radio-group-animated.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useCallback, useId, useState } from "react";
+
+import { cn } from "../../../lib/utils";
+
+import { radioGroupAnimationPresets } from "./animations";
+import type {
+  RadioGroupAnimatedProps,
+  RadioGroupItemAnimatedProps,
+} from "./types";
+import {
+  RadioGroupContext,
+  useRadioGroupContext,
+} from "../radio-group-context";
+import {
+  radioGroupControlVariants,
+  radioGroupIndicatorVariants,
+  radioGroupItemVariants,
+  radioGroupRootVariants,
+} from "../variants";
+
+export function RadioGroupAnimated(props: RadioGroupAnimatedProps) {
+  const {
+    className,
+    value,
+    defaultValue,
+    name,
+    disabled,
+    required,
+    onValueChange,
+    orientation,
+    appearance,
+    size,
+    children,
+    ref,
+    animation: _animation,
+    ...rest
+  } = props;
+  const generatedName = useId();
+  const isControlled = value !== undefined;
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const resolvedValue = isControlled ? value : uncontrolled;
+
+  const setValue = useCallback(
+    (next: string) => {
+      if (!isControlled) {
+        setUncontrolled(next);
+      }
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange],
+  );
+
+  return (
+    <RadioGroupContext.Provider
+      value={{
+        value: resolvedValue,
+        name: name ?? generatedName,
+        disabled,
+        required,
+        appearance: appearance ?? undefined,
+        size: size ?? undefined,
+        onValueChange: setValue,
+      }}
+    >
+      <div
+        ref={ref}
+        role="radiogroup"
+        data-slot="radio-group"
+        data-orientation={orientation ?? "vertical"}
+        className={cn(radioGroupRootVariants({ orientation }), className)}
+        {...rest}
+      >
+        {children}
+      </div>
+    </RadioGroupContext.Provider>
+  );
+}
+
+RadioGroupAnimated.displayName = "RadioGroup";
+
+export function RadioGroupItemAnimated(props: RadioGroupItemAnimatedProps) {
+  const {
+    className,
+    rootClassName,
+    controlClassName,
+    indicatorClassName,
+    value,
+    appearance: appearanceProp,
+    size: sizeProp,
+    disabled: disabledProp,
+    required: requiredProp,
+    children,
+    label,
+    id,
+    ref,
+    "aria-label": ariaLabel,
+    animation = "pop",
+    ...rest
+  } = props;
+  const generatedId = useId();
+  const context = useRadioGroupContext();
+  const controlId = id ?? generatedId;
+  const checked = context?.value === value;
+  const disabled = disabledProp ?? context?.disabled;
+  const required = requiredProp ?? context?.required;
+  const appearance = appearanceProp ?? context?.appearance;
+  const size = sizeProp ?? context?.size;
+  const labelContent = label ?? children;
+  const hasVisibleLabel =
+    labelContent !== undefined && labelContent !== null && labelContent !== false;
+  const motionPreset = radioGroupAnimationPresets[animation];
+
+  return (
+    <label
+      className={cn(radioGroupItemVariants({ size }), rootClassName, className)}
+      data-disabled={disabled ? "true" : undefined}
+      data-state={checked ? "checked" : "unchecked"}
+      htmlFor={controlId}
+    >
+      <input
+        ref={ref}
+        id={controlId}
+        type="radio"
+        data-slot="radio-group-item"
+        className="peer sr-only"
+        name={context?.name}
+        value={value}
+        checked={checked}
+        disabled={disabled}
+        required={required}
+        aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : value)}
+        onChange={(event) => {
+          if (event.currentTarget.checked) {
+            context?.onValueChange(value);
+          }
+        }}
+        {...rest}
+      />
+      <span
+        aria-hidden="true"
+        className={cn(
+          radioGroupControlVariants({ appearance, size }),
+          controlClassName,
+        )}
+        data-slot="radio-group-control"
+      >
+        {checked && (
+          <motion.span
+            className={cn(
+              radioGroupIndicatorVariants({ size }),
+              "opacity-100",
+              indicatorClassName,
+            )}
+            data-slot="radio-group-indicator"
+            initial={motionPreset.initial}
+            animate={motionPreset.animate}
+            transition={motionPreset.transition}
+          />
+        )}
+      </span>
+      {hasVisibleLabel && (
+        <span className="min-w-0 leading-6" data-slot="radio-group-label">
+          {labelContent}
+        </span>
+      )}
+    </label>
+  );
+}
+
+RadioGroupItemAnimated.displayName = "RadioGroupItem";

package/src/ui/radio-group/animated/types.ts

@@ -0,0 +1,13 @@
+import type { RadioGroupItemProps, RadioGroupProps } from "../types";
+import type { radioGroupAnimationPresets } from "./animations";
+
+export type RadioGroupAnimation = keyof typeof radioGroupAnimationPresets;
+export type RadioGroupAnimationPresets = typeof radioGroupAnimationPresets;
+
+export type RadioGroupAnimatedProps = RadioGroupProps & {
+  animation?: RadioGroupAnimation;
+};
+
+export type RadioGroupItemAnimatedProps = RadioGroupItemProps & {
+  animation?: RadioGroupAnimation;
+};

package/src/ui/radio-group/index.ts

@@ -0,0 +1,19 @@
+"use client";
+
+export { RadioGroup, RadioGroupItem } from "./radio-group";
+export type {
+  RadioGroupAppearance,
+  RadioGroupControlVariantProps,
+  RadioGroupIndicatorVariantProps,
+  RadioGroupItemProps,
+  RadioGroupItemVariantProps,
+  RadioGroupProps,
+  RadioGroupRootVariantProps,
+  RadioGroupSize,
+} from "./types";
+export {
+  radioGroupControlVariants,
+  radioGroupIndicatorVariants,
+  radioGroupItemVariants,
+  radioGroupRootVariants,
+} from "./variants";

package/src/ui/radio-group/radio-group-context.ts

@@ -0,0 +1,23 @@
+"use client";
+
+import { createContext, useContext } from "react";
+
+import type { RadioGroupAppearance, RadioGroupSize } from "./types";
+
+export type RadioGroupContextValue = {
+  value: string | undefined;
+  name: string;
+  disabled?: boolean;
+  required?: boolean;
+  appearance?: RadioGroupAppearance;
+  size?: RadioGroupSize;
+  onValueChange: (value: string) => void;
+};
+
+export const RadioGroupContext = createContext<RadioGroupContextValue | null>(
+  null,
+);
+
+export function useRadioGroupContext() {
+  return useContext(RadioGroupContext);
+}

package/src/ui/radio-group/radio-group.test.tsx

@@ -0,0 +1,61 @@
+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 { RadioGroup, RadioGroupItem } from "./radio-group";
+
+describe("RadioGroup", () => {
+  it("should expose displayName", () => {
+    expect(RadioGroup.displayName).toBe("RadioGroup");
+    expect(RadioGroupItem.displayName).toBe("RadioGroupItem");
+  });
+
+  it("should stamp data-slot", () => {
+    render(
+      <RadioGroup defaultValue="a" aria-label="Plans">
+        <RadioGroupItem value="a">A</RadioGroupItem>
+      </RadioGroup>,
+    );
+    expect(document.querySelector('[data-slot="radio-group"]')).toBeTruthy();
+    expect(document.querySelector('[data-slot="radio-group-item"]')).toBeTruthy();
+  });
+
+  it("should select one value at a time", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <RadioGroup defaultValue="starter" onValueChange={onValueChange}>
+        <RadioGroupItem value="starter">Starter</RadioGroupItem>
+        <RadioGroupItem value="pro">Pro</RadioGroupItem>
+      </RadioGroup>,
+    );
+
+    await user.click(screen.getByRole("radio", { name: "Pro" }));
+
+    expect(onValueChange).toHaveBeenLastCalledWith("pro");
+    expect(screen.getByRole("radio", { name: "Starter" })).not.toBeChecked();
+    expect(screen.getByRole("radio", { name: "Pro" })).toBeChecked();
+  });
+
+  it("should support controlled value", () => {
+    render(
+      <RadioGroup value="pro">
+        <RadioGroupItem value="starter">Starter</RadioGroupItem>
+        <RadioGroupItem value="pro">Pro</RadioGroupItem>
+      </RadioGroup>,
+    );
+
+    expect(screen.getByRole("radio", { name: "Pro" })).toBeChecked();
+  });
+
+  it("should forward ref to the root", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(
+      <RadioGroup ref={ref} defaultValue="a">
+        <RadioGroupItem value="a">A</RadioGroupItem>
+      </RadioGroup>,
+    );
+    expect(ref.current?.getAttribute("data-slot")).toBe("radio-group");
+  });
+});

package/src/ui/radio-group/radio-group.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import { useCallback, useId, useState } from "react";
+
+import { cn } from "../../lib/utils";
+
+import {
+  RadioGroupContext,
+  useRadioGroupContext,
+} from "./radio-group-context";
+import type { RadioGroupItemProps, RadioGroupProps } from "./types";
+import {
+  radioGroupControlVariants,
+  radioGroupIndicatorVariants,
+  radioGroupItemVariants,
+  radioGroupRootVariants,
+} from "./variants";
+
+export function RadioGroup(props: RadioGroupProps) {
+  const {
+    className,
+    value,
+    defaultValue,
+    name,
+    disabled,
+    required,
+    onValueChange,
+    orientation,
+    appearance,
+    size,
+    children,
+    ref,
+    ...rest
+  } = props;
+  const generatedName = useId();
+  const isControlled = value !== undefined;
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const resolvedValue = isControlled ? value : uncontrolled;
+
+  const setValue = useCallback(
+    (next: string) => {
+      if (!isControlled) {
+        setUncontrolled(next);
+      }
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange],
+  );
+
+  return (
+    <RadioGroupContext.Provider
+      value={{
+        value: resolvedValue,
+        name: name ?? generatedName,
+        disabled,
+        required,
+        appearance: appearance ?? undefined,
+        size: size ?? undefined,
+        onValueChange: setValue,
+      }}
+    >
+      <div
+        ref={ref}
+        role="radiogroup"
+        data-slot="radio-group"
+        data-orientation={orientation ?? "vertical"}
+        className={cn(radioGroupRootVariants({ orientation }), className)}
+        {...rest}
+      >
+        {children}
+      </div>
+    </RadioGroupContext.Provider>
+  );
+}
+
+RadioGroup.displayName = "RadioGroup";
+
+export function RadioGroupItem(props: RadioGroupItemProps) {
+  const {
+    className,
+    rootClassName,
+    controlClassName,
+    indicatorClassName,
+    value,
+    appearance: appearanceProp,
+    size: sizeProp,
+    disabled: disabledProp,
+    required: requiredProp,
+    children,
+    label,
+    id,
+    ref,
+    "aria-label": ariaLabel,
+    ...rest
+  } = props;
+  const generatedId = useId();
+  const context = useRadioGroupContext();
+  const controlId = id ?? generatedId;
+  const checked = context?.value === value;
+  const disabled = disabledProp ?? context?.disabled;
+  const required = requiredProp ?? context?.required;
+  const appearance = appearanceProp ?? context?.appearance;
+  const size = sizeProp ?? context?.size;
+  const labelContent = label ?? children;
+  const hasVisibleLabel =
+    labelContent !== undefined && labelContent !== null && labelContent !== false;
+
+  return (
+    <label
+      className={cn(radioGroupItemVariants({ size }), rootClassName, className)}
+      data-disabled={disabled ? "true" : undefined}
+      data-state={checked ? "checked" : "unchecked"}
+      htmlFor={controlId}
+    >
+      <input
+        ref={ref}
+        id={controlId}
+        type="radio"
+        data-slot="radio-group-item"
+        className="peer sr-only"
+        name={context?.name}
+        value={value}
+        checked={checked}
+        disabled={disabled}
+        required={required}
+        aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : value)}
+        onChange={(event) => {
+          if (event.currentTarget.checked) {
+            context?.onValueChange(value);
+          }
+        }}
+        {...rest}
+      />
+      <span
+        aria-hidden="true"
+        className={cn(
+          radioGroupControlVariants({ appearance, size }),
+          controlClassName,
+        )}
+        data-slot="radio-group-control"
+      >
+        <span
+          className={cn(
+            radioGroupIndicatorVariants({ size }),
+            indicatorClassName,
+          )}
+          data-slot="radio-group-indicator"
+        />
+      </span>
+      {hasVisibleLabel && (
+        <span className="min-w-0 leading-6" data-slot="radio-group-label">
+          {labelContent}
+        </span>
+      )}
+    </label>
+  );
+}
+
+RadioGroupItem.displayName = "RadioGroupItem";

package/src/ui/radio-group/types.ts

@@ -0,0 +1,62 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+
+import type {
+  radioGroupControlVariants,
+  radioGroupIndicatorVariants,
+  radioGroupItemVariants,
+  radioGroupRootVariants,
+} from "./variants";
+
+export type RadioGroupRootVariantProps = VariantProps<
+  typeof radioGroupRootVariants
+>;
+export type RadioGroupItemVariantProps = VariantProps<
+  typeof radioGroupItemVariants
+>;
+export type RadioGroupControlVariantProps = VariantProps<
+  typeof radioGroupControlVariants
+>;
+export type RadioGroupIndicatorVariantProps = VariantProps<
+  typeof radioGroupIndicatorVariants
+>;
+
+export type RadioGroupAppearance = NonNullable<
+  RadioGroupControlVariantProps["appearance"]
+>;
+export type RadioGroupSize = NonNullable<RadioGroupItemVariantProps["size"]>;
+
+export type RadioGroupProps = RadioGroupRootVariantProps &
+  Pick<RadioGroupControlVariantProps, "appearance"> &
+  RadioGroupItemVariantProps &
+  Omit<
+    ComponentPropsWithRef<"div">,
+    "defaultValue" | "dir" | "onChange" | "role"
+  > & {
+    value?: string;
+    defaultValue?: string;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    onValueChange?: (value: string) => void;
+  };
+
+export type RadioGroupItemProps = RadioGroupItemVariantProps &
+  RadioGroupControlVariantProps &
+  Omit<
+    ComponentPropsWithRef<"input">,
+    | "type"
+    | "size"
+    | "name"
+    | "checked"
+    | "defaultChecked"
+    | "onChange"
+    | "children"
+  > & {
+    value: string;
+    label?: ReactNode;
+    children?: ReactNode;
+    rootClassName?: string;
+    controlClassName?: string;
+    indicatorClassName?: string;
+  };

package/src/ui/radio-group/variants.ts

@@ -0,0 +1,61 @@
+import { cva } from "class-variance-authority";
+
+import {
+  zuiRadioGroupAppearances,
+  zuiRadioGroupControlBase,
+  zuiRadioGroupIndicatorBase,
+  zuiRadioGroupItemBase,
+  zuiRadioGroupOrientations,
+  zuiRadioGroupRootBase,
+  zuiRadioGroupSizes,
+} from "../../design-system/radio-group";
+
+export const radioGroupRootVariants = cva(zuiRadioGroupRootBase, {
+  variants: {
+    orientation: zuiRadioGroupOrientations,
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+});
+
+export const radioGroupItemVariants = cva(zuiRadioGroupItemBase, {
+  variants: {
+    size: {
+      sm: zuiRadioGroupSizes.sm.item,
+      md: zuiRadioGroupSizes.md.item,
+      lg: zuiRadioGroupSizes.lg.item,
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export const radioGroupControlVariants = cva(zuiRadioGroupControlBase, {
+  variants: {
+    appearance: zuiRadioGroupAppearances,
+    size: {
+      sm: zuiRadioGroupSizes.sm.control,
+      md: zuiRadioGroupSizes.md.control,
+      lg: zuiRadioGroupSizes.lg.control,
+    },
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+  },
+});
+
+export const radioGroupIndicatorVariants = cva(zuiRadioGroupIndicatorBase, {
+  variants: {
+    size: {
+      sm: zuiRadioGroupSizes.sm.indicator,
+      md: zuiRadioGroupSizes.md.indicator,
+      lg: zuiRadioGroupSizes.lg.indicator,
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});