@refraktor/core 0.0.1

package/build/components/progress-circle/progress-circle.test.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRef } from "react";
+import { describe, expect, it } from "vitest";
+import { render, screen, waitFor } from "../../vitest";
+import ProgressCircle from "./progress-circle";
+function getCircleMetrics(bar) {
+    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(_jsx(ProgressCircle, { value: 45, "aria-label": "Upload progress" }));
+        const root = screen.getByRole("progressbar", {
+            name: "Upload progress"
+        });
+        const circles = root.querySelectorAll("circle");
+        const bar = circles[1];
+        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();
+        await render(_jsx(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(_jsx(ProgressCircle, { value: -20, "aria-label": "Clamped progress" }));
+        let root = screen.getByRole("progressbar", { name: "Clamped progress" });
+        let circles = root.querySelectorAll("circle");
+        let bar = circles[1];
+        expect(root).toHaveAttribute("aria-valuenow", "0");
+        let { circumference } = getCircleMetrics(bar);
+        expect(Number(bar.getAttribute("stroke-dashoffset"))).toBeCloseTo(circumference, 4);
+        rerender(_jsx(ProgressCircle, { value: 180, "aria-label": "Clamped progress" }));
+        await waitFor(() => {
+            root = screen.getByRole("progressbar", { name: "Clamped progress" });
+            circles = root.querySelectorAll("circle");
+            bar = circles[1];
+            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(_jsx(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];
+        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(_jsx(ProgressCircle, { indeterminate: true, "aria-label": "Loading progress" }));
+        const root = screen.getByRole("progressbar", {
+            name: "Loading progress"
+        });
+        const circles = root.querySelectorAll("circle");
+        const bar = circles[1];
+        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(_jsx(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");
+        const circles = root.querySelectorAll("circle");
+        const track = circles[0];
+        const bar = circles[1];
+        expect(root).toHaveClass("custom-root");
+        expect(svg).toHaveClass("custom-svg");
+        expect(track).toHaveClass("custom-track");
+        expect(bar).toHaveClass("custom-bar");
+    });
+});

package/build/components/progress-circle/progress-circle.types.d.ts

@@ -0,0 +1,36 @@
+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>>;
+    };
+}
+//# sourceMappingURL=progress-circle.types.d.ts.map

package/build/components/progress-circle/progress-circle.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-circle.types.d.ts","sourceRoot":"","sources":["../../../src/components/progress-circle/progress-circle.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EACH,sBAAsB,EACtB,qBAAqB,EACrB,cAAc,EACjB,MAAM,aAAa,CAAC;AAErB,MAAM,MAAM,wBAAwB,GAAG;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,mBACb,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACzD,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,yDAAyD;IACzD,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,gCAAgC;IAChC,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,wDAAwD;IACxD,UAAU,CAAC,EAAE,wBAAwB,CAAC;CACzC;AAED,MAAM,WAAW,4BAA6B,SAAQ,cAAc;IAChE,KAAK,EAAE,mBAAmB,CAAC;IAC3B,GAAG,EAAE,cAAc,CAAC;IACpB,QAAQ,EAAE;QACN,SAAS,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,mBAAmB,CAAC,CAAC,CAAC;QACzE,UAAU,EAAE,UAAU,CAClB,OAAO,sBAAsB,CAAC,wBAAwB,CAAC,CAC1D,CAAC;KACL,CAAC;CACL"}

package/build/components/progress-circle/progress-circle.types.js

@@ -0,0 +1 @@
+export {};

package/build/components/radio/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Radio } from "./radio";
+export { RadioGroup } from "./radio-group";
+export type { RadioProps, RadioClassNames, RadioGroupProps, RadioGroupClassNames, RadioLabelPosition, RadioGroupOrientation } from "./radio.types";
+//# sourceMappingURL=index.d.ts.map

package/build/components/radio/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/radio/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EACR,UAAU,EACV,eAAe,EACf,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,qBAAqB,EACxB,MAAM,eAAe,CAAC"}

package/build/components/radio/index.js

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

package/build/components/radio/radio-group/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RadioGroup } from "./radio-group";
+//# sourceMappingURL=index.d.ts.map

package/build/components/radio/radio-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/radio-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/build/components/radio/radio-group/index.js

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

package/build/components/radio/radio-group/radio-group.d.ts

@@ -0,0 +1,4 @@
+import { RadioGroupFactoryPayload } from "../radio.types";
+declare const RadioGroup: import("../../..").RefraktorComponent<RadioGroupFactoryPayload>;
+export default RadioGroup;
+//# sourceMappingURL=radio-group.d.ts.map

package/build/components/radio/radio-group/radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/radio-group/radio-group.tsx"],"names":[],"mappings":"AAUA,OAAO,EAEH,wBAAwB,EAE3B,MAAM,gBAAgB,CAAC;AAMxB,QAAA,MAAM,UAAU,iEA8Dd,CAAC;AAMH,eAAe,UAAU,CAAC"}

package/build/components/radio/radio-group/radio-group.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId, useUncontrolled } from "@refraktor/utils";
+import { useTheme } from "../../../theme";
+import { createClassNamesConfig, createComponentConfig, factory, useClassNames, useProps } from "../../../utils";
+import { RadioGroupProvider } from "../radio.context";
+const defaultProps = {
+    orientation: "vertical"
+};
+const RadioGroup = factory((_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({
+        value,
+        defaultValue,
+        finalValue: "",
+        onChange
+    });
+    const handleValueChange = (radioValue) => {
+        setSelectedValue(radioValue);
+    };
+    const resolvedName = name ?? _id;
+    return (_jsx(RadioGroupProvider, { value: {
+            value: selectedValue,
+            onValueChange: handleValueChange,
+            name: resolvedName,
+            disabled,
+            size,
+            radius
+        }, children: _jsx("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: children }) }));
+});
+RadioGroup.displayName = "@refraktor/core/RadioGroup";
+RadioGroup.configure = createComponentConfig();
+RadioGroup.classNames = createClassNamesConfig();
+export default RadioGroup;

package/build/components/radio/radio.context.d.ts

@@ -0,0 +1,14 @@
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+export interface RadioGroupContextValue {
+    value: string;
+    onValueChange: (radioValue: string) => void;
+    name?: string;
+    disabled?: boolean;
+    size?: RefraktorSize;
+    radius?: RefraktorRadius;
+}
+export declare const RadioGroupProvider: ({ value, children }: {
+    value: RadioGroupContextValue;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, useRadioGroupContext: () => RadioGroupContextValue | null;
+//# sourceMappingURL=radio.context.d.ts.map

package/build/components/radio/radio.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.context.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio.context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE7D,MAAM,WAAW,sBAAsB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,eAAe,CAAC;CAC5B;AAED,eAAO,MAAO,kBAAkB;;;+CAAE,oBAAoB,qCACH,CAAC"}

package/build/components/radio/radio.context.js

@@ -0,0 +1,2 @@
+import { createOptionalContext } from "@refraktor/utils";
+export const [RadioGroupProvider, useRadioGroupContext] = createOptionalContext();

package/build/components/radio/radio.d.ts

@@ -0,0 +1,4 @@
+import { RadioFactoryPayload } from "./radio.types";
+declare const Radio: import("../..").RefraktorComponent<RadioFactoryPayload>;
+export default Radio;
+//# sourceMappingURL=radio.d.ts.map

package/build/components/radio/radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"AAYA,OAAO,EAEH,mBAAmB,EAEtB,MAAM,eAAe,CAAC;AAOvB,QAAA,MAAM,KAAK,yDA8IT,CAAC;AAOH,eAAe,KAAK,CAAC"}

package/build/components/radio/radio.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useId, useMergedRefs, useUncontrolled } from "@refraktor/utils";
+import { useTheme } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, factory, useClassNames, useProps } from "../../utils";
+import { RadioGroup } from "./radio-group";
+import { useRadioGroupContext } from "./radio.context";
+import { getSize } from "./radio.styles";
+const defaultProps = {
+    labelPosition: "right"
+};
+const Radio = factory((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { id, checked, defaultChecked, onChange, value, name, size, radius, disabled, label, labelPosition, description, error, className, classNames, ...props } = useProps("Radio", defaultProps, _props);
+    const classes = useClassNames("Radio", classNames);
+    const groupContext = useRadioGroupContext();
+    const [uncontrolledValue, handleChange] = useUncontrolled({
+        value: checked,
+        defaultValue: defaultChecked,
+        finalValue: false
+    });
+    const _id = useId(id);
+    const inputRef = useRef(null);
+    const mergedRef = useMergedRefs(ref, inputRef);
+    const hasGroupValue = !!groupContext && typeof value === "string";
+    const isChecked = hasGroupValue
+        ? groupContext.value === value
+        : uncontrolledValue;
+    const isDisabled = !!(disabled || groupContext?.disabled);
+    const resolvedName = name ?? groupContext?.name;
+    const resolvedSize = size ?? groupContext?.size ?? "md";
+    const resolvedRadius = radius ?? groupContext?.radius ?? "full";
+    const sizeClass = getSize(resolvedSize);
+    const handleOnChange = (event) => {
+        const nextChecked = event.currentTarget.checked;
+        if (hasGroupValue && nextChecked) {
+            groupContext.onValueChange(value);
+        }
+        else {
+            handleChange(nextChecked);
+        }
+        onChange?.(event);
+    };
+    return (_jsxs("div", { className: cx("inline-flex flex-col", classes.root, className), children: [_jsxs("label", { className: cx("inline-flex items-center select-none w-fit", sizeClass.gap, isDisabled
+                    ? "opacity-50 cursor-not-allowed"
+                    : "cursor-pointer", labelPosition === "left" ? "flex-row-reverse" : "flex-row", classes.body), htmlFor: _id, children: [_jsx("input", { ...props, id: _id, ref: mergedRef, type: "radio", value: value, name: resolvedName, className: cx("sr-only peer", classes.input), checked: !!isChecked, onChange: handleOnChange, disabled: isDisabled }), _jsx("span", { className: cx("relative inline-flex items-center justify-center shrink-0 border transition-all", "bg-[var(--refraktor-bg)] border-[var(--refraktor-border)]", "peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-[var(--refraktor-primary)]", "data-[checked=true]:bg-[var(--refraktor-primary)] data-[checked=true]:border-[var(--refraktor-primary)]", sizeClass.indicator, getRadius(resolvedRadius), classes.indicator), "data-checked": isChecked, children: _jsx("span", { className: cx("rounded-full bg-[var(--refraktor-primary-text)] transition-transform scale-0 data-[checked=true]:scale-100", sizeClass.dot, classes.dot), "data-checked": isChecked }) }), label && (_jsx("span", { className: cx("text-[var(--refraktor-text)]", sizeClass.label, classes.label), children: label }))] }), description && (_jsx("p", { className: cx("text-[var(--refraktor-text-tertiary)] mt-1", sizeClass.description, classes.description), children: description })), error && error !== true && (_jsx("p", { className: cx("text-[var(--refraktor-colors-red-5)] mt-1 text-xs", classes.error), children: error }))] }));
+});
+Radio.displayName = "@refraktor/core/Radio";
+Radio.configure = createComponentConfig();
+Radio.classNames = createClassNamesConfig();
+Radio.Group = RadioGroup;
+export default Radio;

package/build/components/radio/radio.styles.d.ts

@@ -0,0 +1,11 @@
+import { RefraktorSize } from "../../theme";
+type RadioSizeStyles = {
+    indicator: string;
+    dot: string;
+    label: string;
+    description: string;
+    gap: string;
+};
+export declare const getSize: (size?: RefraktorSize) => RadioSizeStyles;
+export {};
+//# sourceMappingURL=radio.styles.d.ts.map

package/build/components/radio/radio.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.styles.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,KAAK,eAAe,GAAG;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;CACf,CAAC;AAwCF,eAAO,MAAM,OAAO,GAAI,OAAM,aAAoB,oBAAgB,CAAC"}

package/build/components/radio/radio.styles.js

@@ -0,0 +1,38 @@
+const sizes = {
+    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 = "md") => sizes[size];

package/build/components/radio/radio.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=radio.test.d.ts.map

package/build/components/radio/radio.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.test.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio.test.tsx"],"names":[],"mappings":""}

package/build/components/radio/radio.test.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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(_jsx(Radio, { label: "React" }));
+        expect(screen.getByRole("radio", { name: "React" })).toBeInTheDocument();
+    });
+    it("forwards ref correctly", async () => {
+        const ref = createRef();
+        await render(_jsx(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(_jsx(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(_jsxs(Radio.Group, { defaultValue: "react", onChange: onChange, children: [_jsx(Radio, { value: "react", label: "React" }), _jsx(Radio, { value: "vue", label: "Vue" })] }));
+        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(_jsx(Radio.Group, { disabled: true, children: _jsx(Radio, { value: "react", label: "React" }) }));
+        expect(screen.getByRole("radio", { name: "React" })).toBeDisabled();
+    });
+});

package/build/components/radio/radio.types.d.ts

@@ -0,0 +1,87 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, FactoryPayload } from "../../utils";
+import { RadioGroup } from "./radio-group";
+export type RadioLabelPosition = "left" | "right";
+export type RadioGroupOrientation = "vertical" | "horizontal";
+export type RadioClassNames = {
+    root?: string;
+    body?: string;
+    input?: string;
+    indicator?: string;
+    dot?: string;
+    label?: string;
+    description?: string;
+    error?: string;
+};
+export type RadioGroupClassNames = {
+    root?: string;
+};
+export interface RadioProps extends Omit<ComponentPropsWithoutRef<"input">, "size" | "onChange"> {
+    /** State of the radio (controlled) */
+    checked?: boolean;
+    /** Initial state of the radio (uncontrolled) */
+    defaultChecked?: boolean;
+    /** Callback called when the radio state changes */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Value used in Radio.Group */
+    value?: string;
+    /** The size of the radio @default `md` */
+    size?: RefraktorSize;
+    /** The radius of the radio @default `full` */
+    radius?: RefraktorRadius;
+    /** The label of the radio */
+    label?: ReactNode;
+    /** The position of the label @default `right` */
+    labelPosition?: RadioLabelPosition;
+    /** Error state or message */
+    error?: ReactNode;
+    /** Description below the radio */
+    description?: ReactNode;
+    /** Used for editing root class name */
+    className?: string;
+    /** Used for styling different parts of the component */
+    classNames?: RadioClassNames;
+}
+export interface RadioGroupProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
+    /** Radio items to render */
+    children: ReactNode;
+    /** Selected value (controlled) */
+    value?: string;
+    /** Initial selected value (uncontrolled) */
+    defaultValue?: string;
+    /** Callback called when group value changes */
+    onChange?: (value: string) => void;
+    /** Name propagated to radio inputs in the group */
+    name?: string;
+    /** Whether all radios in group are disabled */
+    disabled?: boolean;
+    /** Shared radio size */
+    size?: RefraktorSize;
+    /** Shared radio radius */
+    radius?: RefraktorRadius;
+    /** Layout direction @default `vertical` */
+    orientation?: RadioGroupOrientation;
+    /** Used for editing root class name */
+    className?: string;
+    /** Used for styling different parts of the component */
+    classNames?: RadioGroupClassNames;
+}
+export interface RadioFactoryPayload extends FactoryPayload {
+    props: RadioProps;
+    ref: HTMLInputElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<RadioProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<RadioClassNames>>;
+        Group: typeof RadioGroup;
+    };
+}
+export interface RadioGroupFactoryPayload extends FactoryPayload {
+    props: RadioGroupProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<RadioGroupProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<RadioGroupClassNames>>;
+    };
+}
+//# sourceMappingURL=radio.types.d.ts.map

package/build/components/radio/radio.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.types.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio.types.ts"],"names":[],"mappings":"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"}

package/build/components/radio/radio.types.js

@@ -0,0 +1 @@
+export {};

package/build/components/select/index.d.ts

@@ -0,0 +1,8 @@
+export { default as Select } from "./select";
+export { SelectRoot } from "./select-root";
+export { SelectTrigger } from "./select-trigger";
+export { SelectDropdown } from "./select-dropdown";
+export { SelectGroup } from "./select-group";
+export { SelectItem } from "./select-item";
+export type { SelectProps, SelectRootProps, SelectTriggerProps, SelectDropdownProps, SelectGroupProps, SelectItemProps, SelectItemData, SelectGroupData, SelectData, SelectClassNames, SelectPositioning, SelectMiddlewares } from "./select.types";
+//# sourceMappingURL=index.d.ts.map

package/build/components/select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EACR,WAAW,EACX,eAAe,EACf,kBAAkB,EAClB,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACpB,MAAM,gBAAgB,CAAC"}

package/build/components/select/index.js

@@ -0,0 +1,6 @@
+export { default as Select } from "./select";
+export { SelectRoot } from "./select-root";
+export { SelectTrigger } from "./select-trigger";
+export { SelectDropdown } from "./select-dropdown";
+export { SelectGroup } from "./select-group";
+export { SelectItem } from "./select-item";

package/build/components/select/select-dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SelectDropdown } from "./select-dropdown";
+//# sourceMappingURL=index.d.ts.map

package/build/components/select/select-dropdown/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select-dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/build/components/select/select-dropdown/index.js

@@ -0,0 +1 @@
+export { default as SelectDropdown } from "./select-dropdown";

package/build/components/select/select-dropdown/select-dropdown.d.ts

@@ -0,0 +1,4 @@
+import type { SelectDropdownFactoryPayload } from "../select.types";
+declare const SelectDropdown: import("../../..").RefraktorComponent<SelectDropdownFactoryPayload>;
+export default SelectDropdown;
+//# sourceMappingURL=select-dropdown.d.ts.map

package/build/components/select/select-dropdown/select-dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select-dropdown/select-dropdown.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,iBAAiB,CAAC;AAOpE,QAAA,MAAM,cAAc,qEAmRnB,CAAC;AAIF,eAAe,cAAc,CAAC"}