@refraktor/core 0.0.4 → 0.0.5

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

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

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

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

@@ -1,75 +0,0 @@
-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();
-    });
-});

package/src/components/radio/radio.tsx

@@ -1,173 +0,0 @@
-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 {
-    RadioClassNames,
-    RadioFactoryPayload,
-    RadioProps
-} from "./radio.types";
-import { getSize } from "./radio.styles";
-
-const defaultProps = {
-    labelPosition: "right"
-} satisfies Partial<RadioProps>;
-
-const Radio = factory<RadioFactoryPayload>((_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<HTMLInputElement>(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: React.ChangeEvent<HTMLInputElement>) => {
-        const nextChecked = event.currentTarget.checked;
-
-        if (hasGroupValue && nextChecked) {
-            groupContext.onValueChange(value);
-        } else {
-            handleChange(nextChecked);
-        }
-
-        onChange?.(event);
-    };
-
-    return (
-        <div className={cx("inline-flex flex-col", classes.root, className)}>
-            <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}
-            >
-                <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}
-                />
-
-                <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}
-                >
-                    <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}
-                    />
-                </span>
-
-                {label && (
-                    <span
-                        className={cx(
-                            "text-[var(--refraktor-text)]",
-                            sizeClass.label,
-                            classes.label
-                        )}
-                    >
-                        {label}
-                    </span>
-                )}
-            </label>
-
-            {description && (
-                <p
-                    className={cx(
-                        "text-[var(--refraktor-text-tertiary)] mt-1",
-                        sizeClass.description,
-                        classes.description
-                    )}
-                >
-                    {description}
-                </p>
-            )}
-
-            {error && error !== true && (
-                <p
-                    className={cx(
-                        "text-[var(--refraktor-colors-red-5)] mt-1 text-xs",
-                        classes.error
-                    )}
-                >
-                    {error}
-                </p>
-            )}
-        </div>
-    );
-});
-
-Radio.displayName = "@refraktor/core/Radio";
-Radio.configure = createComponentConfig<RadioProps>();
-Radio.classNames = createClassNamesConfig<RadioClassNames>();
-Radio.Group = RadioGroup;
-
-export default Radio;

package/src/components/radio/radio.types.ts

@@ -1,126 +0,0 @@
-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>
-        >;
-    };
-}

package/src/components/scroll-area/index.ts

@@ -1,6 +0,0 @@
-export { default as ScrollArea } from "./scroll-area";
-export type {
-    ScrollAreaProps,
-    ScrollAreaClassNames,
-    ScrollAreaOrientation
-} from "./scroll-area.types";

package/src/components/scroll-area/scroll-area.test.tsx

@@ -1,72 +0,0 @@
-import { createRef } from "react";
-import { describe, expect, it } from "vitest";
-import { render, screen } from "../../vitest";
-import ScrollArea from "./scroll-area";
-
-describe("@refraktor/core/ScrollArea", () => {
-    it("renders children with default vertical scroll behavior", async () => {
-        await render(
-            <ScrollArea data-testid="scroll-area">
-                <div>Content</div>
-            </ScrollArea>
-        );
-
-        const scrollArea = screen.getByTestId("scroll-area");
-
-        expect(scrollArea).toHaveClass("refraktor-scrollbar");
-        expect(scrollArea).toHaveClass("overflow-y-auto");
-        expect(scrollArea).toHaveClass("overflow-x-hidden");
-        expect(scrollArea).toHaveTextContent("Content");
-    });
-
-    it("supports horizontal and bidirectional orientation", async () => {
-        const { rerender } = await render(
-            <ScrollArea data-testid="scroll-area" orientation="horizontal" />
-        );
-
-        expect(screen.getByTestId("scroll-area")).toHaveClass(
-            "overflow-x-auto"
-        );
-        expect(screen.getByTestId("scroll-area")).toHaveClass(
-            "overflow-y-hidden"
-        );
-
-        rerender(<ScrollArea data-testid="scroll-area" orientation="both" />);
-
-        expect(screen.getByTestId("scroll-area")).toHaveClass("overflow-auto");
-    });
-
-    it("applies scrollbar size css variable", async () => {
-        await render(<ScrollArea data-testid="scroll-area" scrollbarSize={10} />);
-
-        const scrollArea = screen.getByTestId("scroll-area");
-
-        expect(scrollArea.style.getPropertyValue("--refraktor-scrollbar-size")).toBe(
-            "10px"
-        );
-    });
-
-    it("supports root and slot class names", async () => {
-        await render(
-            <ScrollArea
-                data-testid="scroll-area"
-                className="custom-root"
-                classNames={{ root: "slot-root" }}
-            />
-        );
-
-        const scrollArea = screen.getByTestId("scroll-area");
-
-        expect(scrollArea).toHaveClass("custom-root");
-        expect(scrollArea).toHaveClass("slot-root");
-    });
-
-    it("forwards ref to root element", async () => {
-        const ref = createRef<HTMLDivElement>();
-
-        await render(<ScrollArea ref={ref} />);
-
-        expect(ref.current).toBeInstanceOf(HTMLDivElement);
-        expect(ref.current?.tagName).toBe("DIV");
-    });
-});

package/src/components/scroll-area/scroll-area.tsx

@@ -1,70 +0,0 @@
-import type { CSSProperties } from "react";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    factory,
-    useClassNames,
-    useProps
-} from "../../utils";
-import type {
-    ScrollAreaClassNames,
-    ScrollAreaFactoryPayload,
-    ScrollAreaOrientation,
-    ScrollAreaProps
-} from "./scroll-area.types";
-import { useTheme } from "../../theme";
-
-const defaultProps = {
-    orientation: "vertical",
-    scrollbarSize: 6
-} satisfies Partial<ScrollAreaProps>;
-
-function getOrientationStyles(orientation: ScrollAreaOrientation): string {
-    if (orientation === "horizontal") {
-        return "overflow-x-auto overflow-y-hidden";
-    }
-
-    if (orientation === "both") {
-        return "overflow-auto";
-    }
-
-    return "overflow-y-auto overflow-x-hidden";
-}
-
-const ScrollArea = factory<ScrollAreaFactoryPayload>((_props, ref) => {
-    const { cx } = useTheme();
-    const {
-        orientation,
-        scrollbarSize,
-        className,
-        classNames,
-        style,
-        ...props
-    } = useProps("ScrollArea", defaultProps, _props);
-    const classes = useClassNames("ScrollArea", classNames);
-
-    const resolvedStyle = {
-        ...(style ?? {}),
-        "--refraktor-scrollbar-size": `${scrollbarSize}px`
-    } as CSSProperties;
-
-    return (
-        <div
-            ref={ref}
-            className={cx(
-                "refraktor-scrollbar",
-                getOrientationStyles(orientation),
-                classes.root,
-                className
-            )}
-            style={resolvedStyle}
-            {...props}
-        />
-    );
-});
-
-ScrollArea.displayName = "@refraktor/core/ScrollArea";
-ScrollArea.configure = createComponentConfig<ScrollAreaProps>();
-ScrollArea.classNames = createClassNamesConfig<ScrollAreaClassNames>();
-
-export default ScrollArea;