@refraktor/core 0.0.4 → 0.0.5

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

@@ -1,107 +0,0 @@
-import { createRef } from "react";
-import { describe, expect, it } from "vitest";
-import { render, screen, waitFor } from "../../vitest";
-import Progress from "./progress";
-
-describe("@refraktor/core/Progress", () => {
-    it("renders with determinate values", async () => {
-        await render(<Progress value={45} aria-label="Upload progress" />);
-
-        const track = screen.getByRole("progressbar", {
-            name: "Upload progress"
-        });
-        const bar = track.firstElementChild as HTMLDivElement;
-
-        expect(track).toHaveAttribute("aria-valuemin", "0");
-        expect(track).toHaveAttribute("aria-valuemax", "100");
-        expect(track).toHaveAttribute("aria-valuenow", "45");
-        expect(bar).toHaveStyle({ width: "45%" });
-    });
-
-    it("forwards ref correctly", async () => {
-        const ref = createRef<HTMLDivElement>();
-
-        await render(<Progress 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(
-            <Progress value={-20} aria-label="Clamped progress" />
-        );
-
-        let track = screen.getByRole("progressbar", { name: "Clamped progress" });
-        let bar = track.firstElementChild as HTMLDivElement;
-        expect(track).toHaveAttribute("aria-valuenow", "0");
-        expect(bar).toHaveStyle({ width: "0%" });
-
-        rerender(<Progress value={180} aria-label="Clamped progress" />);
-
-        await waitFor(() => {
-            track = screen.getByRole("progressbar", { name: "Clamped progress" });
-            bar = track.firstElementChild as HTMLDivElement;
-            expect(track).toHaveAttribute("aria-valuenow", "100");
-            expect(bar).toHaveStyle({ width: "100%" });
-        });
-    });
-
-    it("supports custom min and max", async () => {
-        await render(
-            <Progress
-                value={25}
-                min={20}
-                max={40}
-                aria-label="Custom range progress"
-            />
-        );
-
-        const track = screen.getByRole("progressbar", {
-            name: "Custom range progress"
-        });
-        const bar = track.firstElementChild as HTMLDivElement;
-
-        expect(track).toHaveAttribute("aria-valuemin", "20");
-        expect(track).toHaveAttribute("aria-valuemax", "40");
-        expect(track).toHaveAttribute("aria-valuenow", "25");
-        expect(bar).toHaveStyle({ width: "25%" });
-    });
-
-    it("supports indeterminate mode", async () => {
-        await render(<Progress indeterminate aria-label="Loading progress" />);
-
-        const track = screen.getByRole("progressbar", {
-            name: "Loading progress"
-        });
-        const bar = track.firstElementChild as HTMLDivElement;
-
-        expect(track).not.toHaveAttribute("aria-valuemin");
-        expect(track).not.toHaveAttribute("aria-valuemax");
-        expect(track).not.toHaveAttribute("aria-valuenow");
-        expect(bar).toHaveClass("refraktor-progress-indeterminate");
-        expect(bar.style.width).toBe("");
-    });
-
-    it("supports root and slot class names", async () => {
-        const { container } = await render(
-            <Progress
-                aria-label="Styled progress"
-                className="custom-root"
-                classNames={{
-                    track: "custom-track",
-                    bar: "custom-bar"
-                }}
-            />
-        );
-
-        const root = container.firstElementChild as HTMLDivElement;
-        const track = screen.getByRole("progressbar", { name: "Styled progress" });
-        const bar = track.firstElementChild as HTMLDivElement;
-
-        expect(root).toHaveClass("custom-root");
-        expect(track).toHaveClass("custom-track");
-        expect(bar).toHaveClass("custom-bar");
-    });
-});

package/src/components/progress/progress.tsx

@@ -1,93 +0,0 @@
-import { clamp, useId } from "@refraktor/utils";
-import { useTheme } from "../../theme";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    factory,
-    useClassNames,
-    useProps
-} from "../../utils";
-import {
-    ProgressClassNames,
-    ProgressFactoryPayload,
-    ProgressProps
-} from "./progress.types";
-import { getSize } from "./progress.styles";
-
-const defaultProps = {
-    value: 0,
-    min: 0,
-    max: 100,
-    indeterminate: false,
-    animated: true,
-    size: "md",
-    radius: "full"
-} satisfies Partial<ProgressProps>;
-
-const Progress = factory<ProgressFactoryPayload>((_props, ref) => {
-    const { cx, getRadius } = useTheme();
-    const {
-        id,
-        value,
-        min,
-        max,
-        indeterminate,
-        animated,
-        size,
-        radius,
-        className,
-        classNames,
-        ...props
-    } = useProps("Progress", defaultProps, _props);
-    const classes = useClassNames("Progress", classNames);
-
-    const _id = useId(id);
-    const sizeStyles = getSize(size);
-
-    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;
-
-    return (
-        <div className={cx("w-full", classes.root, className)}>
-            <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(
-                    "relative w-full overflow-hidden bg-[var(--refraktor-bg)]",
-                    sizeStyles.track,
-                    getRadius(radius),
-                    classes.track
-                )}
-            >
-                <div
-                    className={cx(
-                        "h-full bg-[var(--refraktor-primary)]",
-                        getRadius(radius),
-                        indeterminate &&
-                            "absolute inset-y-0 left-0 refraktor-progress-indeterminate",
-                        animated && !indeterminate &&
-                            "transition-[width] duration-300 ease-out",
-                        classes.bar
-                    )}
-                    style={indeterminate ? undefined : { width: `${percentage}%` }}
-                />
-            </div>
-        </div>
-    );
-});
-
-Progress.displayName = "@refraktor/core/Progress";
-Progress.configure = createComponentConfig<ProgressProps>();
-Progress.classNames = createClassNamesConfig<ProgressClassNames>();
-
-export default Progress;

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

@@ -1,52 +0,0 @@
-import { ComponentPropsWithoutRef } from "react";
-import { RefraktorRadius, RefraktorSize } from "../../theme";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    FactoryPayload
-} from "../../utils";
-
-export type ProgressClassNames = {
-    root?: string;
-    track?: string;
-    bar?: string;
-};
-
-export interface ProgressProps
-    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 width transitions are animated @default `true` */
-    animated?: boolean;
-
-    /** Track size @default `md` */
-    size?: RefraktorSize;
-
-    /** Track radius @default `full` */
-    radius?: RefraktorRadius;
-
-    /** Used for editing root class name */
-    className?: string;
-
-    /** Used for styling different parts of the component */
-    classNames?: ProgressClassNames;
-}
-
-export interface ProgressFactoryPayload extends FactoryPayload {
-    props: ProgressProps;
-    ref: HTMLDivElement;
-    compound: {
-        configure: ReturnType<typeof createComponentConfig<ProgressProps>>;
-        classNames: ReturnType<typeof createClassNamesConfig<ProgressClassNames>>;
-    };
-}

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

@@ -1,5 +0,0 @@
-export { default as ProgressCircle } from "./progress-circle";
-export type {
-    ProgressCircleProps,
-    ProgressCircleClassNames
-} from "./progress-circle.types";

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

@@ -1,31 +0,0 @@
-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

@@ -1,140 +0,0 @@
-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

@@ -1,124 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

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