@refraktor/core 0.0.1

package/src/components/progress-circle/progress-circle.styles.ts

@@ -0,0 +1,31 @@
+import { RefraktorSize } from "../../theme";
+
+type ProgressCircleSizeStyles = {
+    size: number;
+    stroke: number;
+};
+
+const sizes: Record<RefraktorSize, ProgressCircleSizeStyles> = {
+    xs: {
+        size: 16,
+        stroke: 2
+    },
+    sm: {
+        size: 20,
+        stroke: 2.5
+    },
+    md: {
+        size: 24,
+        stroke: 3
+    },
+    lg: {
+        size: 32,
+        stroke: 4
+    },
+    xl: {
+        size: 40,
+        stroke: 5
+    }
+};
+
+export const getSize = (size: RefraktorSize = "md") => sizes[size];

package/src/components/progress-circle/progress-circle.test.tsx

@@ -0,0 +1,140 @@
+import { createRef } from "react";
+import { describe, expect, it } from "vitest";
+import { render, screen, waitFor } from "../../vitest";
+import ProgressCircle from "./progress-circle";
+
+function getCircleMetrics(bar: SVGCircleElement) {
+    const radius = Number(bar.getAttribute("r"));
+    const circumference = 2 * Math.PI * radius;
+    return { radius, circumference };
+}
+
+describe("@refraktor/core/ProgressCircle", () => {
+    it("renders with determinate values", async () => {
+        await render(<ProgressCircle value={45} aria-label="Upload progress" />);
+
+        const root = screen.getByRole("progressbar", {
+            name: "Upload progress"
+        });
+        const circles = root.querySelectorAll("circle");
+        const bar = circles[1] as SVGCircleElement;
+
+        expect(root).toHaveAttribute("aria-valuemin", "0");
+        expect(root).toHaveAttribute("aria-valuemax", "100");
+        expect(root).toHaveAttribute("aria-valuenow", "45");
+
+        const { circumference } = getCircleMetrics(bar);
+        const expectedOffset = circumference - (45 / 100) * circumference;
+        expect(
+            Number(bar.getAttribute("stroke-dashoffset"))
+        ).toBeCloseTo(expectedOffset, 4);
+    });
+
+    it("forwards ref correctly", async () => {
+        const ref = createRef<HTMLDivElement>();
+
+        await render(<ProgressCircle ref={ref} aria-label="Progress" />);
+
+        expect(ref.current).toBeInstanceOf(HTMLDivElement);
+        expect(ref.current?.tagName).toBe("DIV");
+        expect(ref.current).toHaveAttribute("role", "progressbar");
+    });
+
+    it("clamps values outside range", async () => {
+        const { rerender } = await render(
+            <ProgressCircle value={-20} aria-label="Clamped progress" />
+        );
+
+        let root = screen.getByRole("progressbar", { name: "Clamped progress" });
+        let circles = root.querySelectorAll("circle");
+        let bar = circles[1] as SVGCircleElement;
+
+        expect(root).toHaveAttribute("aria-valuenow", "0");
+
+        let { circumference } = getCircleMetrics(bar);
+        expect(
+            Number(bar.getAttribute("stroke-dashoffset"))
+        ).toBeCloseTo(circumference, 4);
+
+        rerender(<ProgressCircle value={180} aria-label="Clamped progress" />);
+
+        await waitFor(() => {
+            root = screen.getByRole("progressbar", { name: "Clamped progress" });
+            circles = root.querySelectorAll("circle");
+            bar = circles[1] as SVGCircleElement;
+            expect(root).toHaveAttribute("aria-valuenow", "100");
+            ({ circumference } = getCircleMetrics(bar));
+            expect(
+                Number(bar.getAttribute("stroke-dashoffset"))
+            ).toBeCloseTo(0, 4);
+        });
+    });
+
+    it("supports custom min and max", async () => {
+        await render(
+            <ProgressCircle
+                value={25}
+                min={20}
+                max={40}
+                aria-label="Custom range progress"
+            />
+        );
+
+        const root = screen.getByRole("progressbar", {
+            name: "Custom range progress"
+        });
+        const circles = root.querySelectorAll("circle");
+        const bar = circles[1] as SVGCircleElement;
+
+        expect(root).toHaveAttribute("aria-valuemin", "20");
+        expect(root).toHaveAttribute("aria-valuemax", "40");
+        expect(root).toHaveAttribute("aria-valuenow", "25");
+
+        const { circumference } = getCircleMetrics(bar);
+        const expectedOffset = circumference - (25 / 100) * circumference;
+        expect(
+            Number(bar.getAttribute("stroke-dashoffset"))
+        ).toBeCloseTo(expectedOffset, 4);
+    });
+
+    it("supports indeterminate mode", async () => {
+        await render(<ProgressCircle indeterminate aria-label="Loading progress" />);
+
+        const root = screen.getByRole("progressbar", {
+            name: "Loading progress"
+        });
+        const circles = root.querySelectorAll("circle");
+        const bar = circles[1] as SVGCircleElement;
+
+        expect(root).not.toHaveAttribute("aria-valuemin");
+        expect(root).not.toHaveAttribute("aria-valuemax");
+        expect(root).not.toHaveAttribute("aria-valuenow");
+        expect(bar).toHaveClass("loader-spin");
+        expect(bar.getAttribute("stroke-dasharray")).not.toBe("");
+    });
+
+    it("supports root and slot class names", async () => {
+        await render(
+            <ProgressCircle
+                aria-label="Styled progress"
+                className="custom-root"
+                classNames={{
+                    svg: "custom-svg",
+                    track: "custom-track",
+                    bar: "custom-bar"
+                }}
+            />
+        );
+
+        const root = screen.getByRole("progressbar", { name: "Styled progress" });
+        const svg = root.querySelector("svg") as SVGSVGElement;
+        const circles = root.querySelectorAll("circle");
+        const track = circles[0] as SVGCircleElement;
+        const bar = circles[1] as SVGCircleElement;
+
+        expect(root).toHaveClass("custom-root");
+        expect(svg).toHaveClass("custom-svg");
+        expect(track).toHaveClass("custom-track");
+        expect(bar).toHaveClass("custom-bar");
+    });
+});

package/src/components/progress-circle/progress-circle.tsx

@@ -0,0 +1,124 @@
+import { clamp, useId } from "@refraktor/utils";
+import { useTheme } from "../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    factory,
+    useClassNames,
+    useProps
+} from "../../utils";
+import {
+    ProgressCircleClassNames,
+    ProgressCircleFactoryPayload,
+    ProgressCircleProps
+} from "./progress-circle.types";
+import { getSize } from "./progress-circle.styles";
+
+const defaultProps = {
+    value: 0,
+    min: 0,
+    max: 100,
+    indeterminate: false,
+    animated: true,
+    size: "md"
+} satisfies Partial<ProgressCircleProps>;
+
+const ProgressCircle = factory<ProgressCircleFactoryPayload>((_props, ref) => {
+    const { cx } = useTheme();
+    const {
+        id,
+        value,
+        min,
+        max,
+        indeterminate,
+        animated,
+        size,
+        className,
+        classNames,
+        ...props
+    } = useProps("ProgressCircle", defaultProps, _props);
+    const classes = useClassNames("ProgressCircle", classNames);
+
+    const _id = useId(id);
+
+    const sizeStyles = getSize(size);
+    const diameter = sizeStyles.size;
+    const strokeWidth = sizeStyles.stroke;
+    const radius = Math.max(0, diameter / 2 - strokeWidth / 2);
+    const circumference = 2 * Math.PI * radius;
+
+    const lowerBound = Math.min(min, max);
+    const upperBound = Math.max(min, max);
+    const clampedValue = clamp(value, lowerBound, upperBound);
+
+    const percentage =
+        upperBound === lowerBound
+            ? 0
+            : ((clampedValue - lowerBound) / (upperBound - lowerBound)) * 100;
+
+    const strokeDashoffset =
+        circumference - (percentage / 100) * circumference;
+
+    return (
+        <div
+            {...props}
+            ref={ref}
+            id={_id}
+            role="progressbar"
+            aria-valuemin={indeterminate ? undefined : lowerBound}
+            aria-valuemax={indeterminate ? undefined : upperBound}
+            aria-valuenow={indeterminate ? undefined : clampedValue}
+            className={cx(
+                "inline-flex items-center justify-center",
+                classes.root,
+                className
+            )}
+        >
+            <svg
+                viewBox={`0 0 ${diameter} ${diameter}`}
+                width={diameter}
+                height={diameter}
+                className={cx("block -rotate-90", classes.svg)}
+            >
+                <circle
+                    cx={diameter / 2}
+                    cy={diameter / 2}
+                    r={radius}
+                    fill="none"
+                    strokeWidth={strokeWidth}
+                    className={cx("stroke-[var(--refraktor-bg)]", classes.track)}
+                />
+
+                <circle
+                    cx={diameter / 2}
+                    cy={diameter / 2}
+                    r={radius}
+                    fill="none"
+                    strokeWidth={strokeWidth}
+                    strokeLinecap="round"
+                    strokeDasharray={
+                        indeterminate
+                            ? `${circumference * 0.4} ${circumference}`
+                            : circumference
+                    }
+                    strokeDashoffset={
+                        indeterminate ? circumference * 0.15 : strokeDashoffset
+                    }
+                    className={cx(
+                        "stroke-[var(--refraktor-primary)]",
+                        indeterminate && "loader-spin",
+                        animated && !indeterminate &&
+                            "transition-[stroke-dashoffset] duration-300 ease-out",
+                        classes.bar
+                    )}
+                />
+            </svg>
+        </div>
+    );
+});
+
+ProgressCircle.displayName = "@refraktor/core/ProgressCircle";
+ProgressCircle.configure = createComponentConfig<ProgressCircleProps>();
+ProgressCircle.classNames = createClassNamesConfig<ProgressCircleClassNames>();
+
+export default ProgressCircle;

package/src/components/progress-circle/progress-circle.types.ts

@@ -0,0 +1,52 @@
+import { ComponentPropsWithoutRef } from "react";
+import { RefraktorSize } from "../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    FactoryPayload
+} from "../../utils";
+
+export type ProgressCircleClassNames = {
+    root?: string;
+    svg?: string;
+    track?: string;
+    bar?: string;
+};
+
+export interface ProgressCircleProps
+    extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+    /** Current progress value @default `0` */
+    value?: number;
+
+    /** Minimum progress value @default `0` */
+    min?: number;
+
+    /** Maximum progress value @default `100` */
+    max?: number;
+
+    /** Whether progress is indeterminate @default `false` */
+    indeterminate?: boolean;
+
+    /** Whether dash-offset transitions are animated @default `true` */
+    animated?: boolean;
+
+    /** Circle size @default `md` */
+    size?: RefraktorSize;
+
+    /** Used for editing root class name */
+    className?: string;
+
+    /** Used for styling different parts of the component */
+    classNames?: ProgressCircleClassNames;
+}
+
+export interface ProgressCircleFactoryPayload extends FactoryPayload {
+    props: ProgressCircleProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<ProgressCircleProps>>;
+        classNames: ReturnType<
+            typeof createClassNamesConfig<ProgressCircleClassNames>
+        >;
+    };
+}

package/src/components/radio/index.ts

@@ -0,0 +1,10 @@
+export { default as Radio } from "./radio";
+export { RadioGroup } from "./radio-group";
+export type {
+    RadioProps,
+    RadioClassNames,
+    RadioGroupProps,
+    RadioGroupClassNames,
+    RadioLabelPosition,
+    RadioGroupOrientation
+} from "./radio.types";

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

@@ -0,0 +1 @@
+export { default as RadioGroup } from "./radio-group";

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

@@ -0,0 +1,89 @@
+import { useId, useUncontrolled } from "@refraktor/utils";
+import { useTheme } from "../../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    factory,
+    useClassNames,
+    useProps
+} from "../../../utils";
+import { RadioGroupProvider } from "../radio.context";
+import {
+    RadioGroupClassNames,
+    RadioGroupFactoryPayload,
+    RadioGroupProps
+} from "../radio.types";
+
+const defaultProps = {
+    orientation: "vertical"
+} satisfies Partial<RadioGroupProps>;
+
+const RadioGroup = factory<RadioGroupFactoryPayload>((_props, ref) => {
+    const { cx } = useTheme();
+    const {
+        id,
+        children,
+        value,
+        defaultValue,
+        onChange,
+        name,
+        disabled,
+        size,
+        radius,
+        orientation,
+        className,
+        classNames,
+        ...props
+    } = useProps("RadioGroup", defaultProps, _props);
+    const classes = useClassNames("RadioGroup", classNames);
+
+    const _id = useId(id);
+
+    const [selectedValue, setSelectedValue] = useUncontrolled<string>({
+        value,
+        defaultValue,
+        finalValue: "",
+        onChange
+    });
+
+    const handleValueChange = (radioValue: string) => {
+        setSelectedValue(radioValue);
+    };
+
+    const resolvedName = name ?? _id;
+
+    return (
+        <RadioGroupProvider
+            value={{
+                value: selectedValue,
+                onValueChange: handleValueChange,
+                name: resolvedName,
+                disabled,
+                size,
+                radius
+            }}
+        >
+            <div
+                ref={ref}
+                id={_id}
+                className={cx(
+                    "inline-flex",
+                    orientation === "horizontal"
+                        ? "flex-row flex-wrap gap-3"
+                        : "flex-col gap-2",
+                    classes.root,
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </div>
+        </RadioGroupProvider>
+    );
+});
+
+RadioGroup.displayName = "@refraktor/core/RadioGroup";
+RadioGroup.configure = createComponentConfig<RadioGroupProps>();
+RadioGroup.classNames = createClassNamesConfig<RadioGroupClassNames>();
+
+export default RadioGroup;

package/src/components/radio/radio.context.ts

@@ -0,0 +1,14 @@
+import { createOptionalContext } from "@refraktor/utils";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+
+export interface RadioGroupContextValue {
+    value: string;
+    onValueChange: (radioValue: string) => void;
+    name?: string;
+    disabled?: boolean;
+    size?: RefraktorSize;
+    radius?: RefraktorRadius;
+}
+
+export const [RadioGroupProvider, useRadioGroupContext] =
+    createOptionalContext<RadioGroupContextValue>();

package/src/components/radio/radio.styles.ts

@@ -0,0 +1,49 @@
+import { RefraktorSize } from "../../theme";
+
+type RadioSizeStyles = {
+    indicator: string;
+    dot: string;
+    label: string;
+    description: string;
+    gap: string;
+};
+
+const sizes: Record<RefraktorSize, RadioSizeStyles> = {
+    xs: {
+        indicator: "h-3.5 w-3.5",
+        dot: "h-1.5 w-1.5",
+        label: "text-[10px]",
+        description: "text-[10px]",
+        gap: "gap-1.5"
+    },
+    sm: {
+        indicator: "h-4 w-4",
+        dot: "h-2 w-2",
+        label: "text-xs",
+        description: "text-xs",
+        gap: "gap-2"
+    },
+    md: {
+        indicator: "h-5 w-5",
+        dot: "h-2.5 w-2.5",
+        label: "text-sm",
+        description: "text-xs",
+        gap: "gap-2"
+    },
+    lg: {
+        indicator: "h-6 w-6",
+        dot: "h-3 w-3",
+        label: "text-base",
+        description: "text-sm",
+        gap: "gap-2.5"
+    },
+    xl: {
+        indicator: "h-7 w-7",
+        dot: "h-3.5 w-3.5",
+        label: "text-lg",
+        description: "text-base",
+        gap: "gap-3"
+    }
+};
+
+export const getSize = (size: RefraktorSize = "md") => sizes[size];

package/src/components/radio/radio.test.tsx

@@ -0,0 +1,75 @@
+import { createRef } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, userEvent } from "../../vitest";
+import Radio from "./radio";
+
+describe("@refraktor/core/Radio", () => {
+    it("renders correctly", async () => {
+        await render(<Radio label="React" />);
+
+        expect(
+            screen.getByRole("radio", { name: "React" })
+        ).toBeInTheDocument();
+    });
+
+    it("forwards ref correctly", async () => {
+        const ref = createRef<HTMLInputElement>();
+
+        await render(<Radio ref={ref} label="React" />);
+
+        expect(ref.current).toBeInstanceOf(HTMLInputElement);
+        expect(ref.current?.tagName).toBe("INPUT");
+        expect(ref.current?.type).toBe("radio");
+    });
+
+    it("handles change events", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+
+        await render(<Radio label="React" onChange={onChange} />);
+
+        const input = screen.getByRole("radio", { name: "React" });
+        await user.click(input);
+
+        expect(input).toBeChecked();
+        expect(onChange).toHaveBeenCalledTimes(1);
+    });
+
+    it("supports radio group", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+
+        await render(
+            <Radio.Group defaultValue="react" onChange={onChange}>
+                <Radio value="react" label="React" />
+                <Radio value="vue" label="Vue" />
+            </Radio.Group>
+        );
+
+        const reactInput = screen.getByRole("radio", { name: "React" });
+        const vueInput = screen.getByRole("radio", { name: "Vue" });
+
+        expect(reactInput).toBeChecked();
+        expect(vueInput).not.toBeChecked();
+
+        await user.click(vueInput);
+        expect(onChange).toHaveBeenLastCalledWith("vue");
+        expect(vueInput).toBeChecked();
+        expect(reactInput).not.toBeChecked();
+
+        await user.click(reactInput);
+        expect(onChange).toHaveBeenLastCalledWith("react");
+        expect(reactInput).toBeChecked();
+        expect(vueInput).not.toBeChecked();
+    });
+
+    it("propagates disabled state from group", async () => {
+        await render(
+            <Radio.Group disabled>
+                <Radio value="react" label="React" />
+            </Radio.Group>
+        );
+
+        expect(screen.getByRole("radio", { name: "React" })).toBeDisabled();
+    });
+});