@refraktor/core 0.0.3 → 0.0.5

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

@@ -1,93 +0,0 @@
-import { useId, useUncontrolled } from "@refraktor/utils";
-import { useTheme } from "../../../theme";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    factory,
-    useClassNames,
-    useProps
-} from "../../../utils";
-import { CheckboxGroupProvider } from "../checkbox.context";
-import {
-    CheckboxGroupClassNames,
-    CheckboxGroupFactoryPayload,
-    CheckboxGroupProps
-} from "../checkbox.types";
-
-const defaultProps = {
-    orientation: "vertical"
-} satisfies Partial<CheckboxGroupProps>;
-
-const CheckboxGroup = factory<CheckboxGroupFactoryPayload>((_props, ref) => {
-    const { cx } = useTheme();
-    const {
-        id,
-        children,
-        value,
-        defaultValue,
-        onChange,
-        name,
-        disabled,
-        size,
-        radius,
-        orientation,
-        className,
-        classNames,
-        ...props
-    } = useProps("CheckboxGroup", defaultProps, _props);
-    const classes = useClassNames("CheckboxGroup", classNames);
-
-    const _id = useId(id);
-
-    const [values, setValues] = useUncontrolled<string[]>({
-        value,
-        defaultValue,
-        finalValue: [],
-        onChange
-    });
-
-    const handleValueChange = (checkboxValue: string, checked: boolean) => {
-        const nextValues = checked
-            ? values.includes(checkboxValue)
-                ? values
-                : [...values, checkboxValue]
-            : values.filter((itemValue) => itemValue !== checkboxValue);
-
-        setValues(nextValues);
-    };
-
-    return (
-        <CheckboxGroupProvider
-            value={{
-                value: values,
-                onValueChange: handleValueChange,
-                name,
-                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>
-        </CheckboxGroupProvider>
-    );
-});
-
-CheckboxGroup.displayName = "@refraktor/core/CheckboxGroup";
-CheckboxGroup.configure = createComponentConfig<CheckboxGroupProps>();
-CheckboxGroup.classNames = createClassNamesConfig<CheckboxGroupClassNames>();
-
-export default CheckboxGroup;

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

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

package/src/components/checkbox/checkbox.context.ts

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

package/src/components/checkbox/checkbox.styles.ts

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

package/src/components/checkbox/checkbox.test.tsx

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

package/src/components/checkbox/checkbox.tsx

@@ -1,192 +0,0 @@
-import { useEffect, useRef } from "react";
-import { useId, useMergedRefs, useUncontrolled } from "@refraktor/utils";
-import { useTheme } from "../../theme";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    factory,
-    useClassNames,
-    useProps
-} from "../../utils";
-import { CheckIcon, MinusIcon } from "../../icons";
-import { CheckboxGroup } from "./checkbox-group";
-import { useCheckboxGroupContext } from "./checkbox.context";
-import {
-    CheckboxClassNames,
-    CheckboxFactoryPayload,
-    CheckboxProps
-} from "./checkbox.types";
-import { getSize } from "./checkbox.styles";
-
-const defaultProps = {
-    labelPosition: "right"
-} satisfies Partial<CheckboxProps>;
-
-const Checkbox = factory<CheckboxFactoryPayload>((_props, ref) => {
-    const { cx, getRadius } = useTheme();
-    const {
-        id,
-        checked,
-        defaultChecked,
-        onChange,
-        indeterminate,
-        value,
-        name,
-        size,
-        radius,
-        disabled,
-        label,
-        labelPosition,
-        description,
-        error,
-        className,
-        classNames,
-        ...props
-    } = useProps("Checkbox", defaultProps, _props);
-    const classes = useClassNames("Checkbox", classNames);
-    const groupContext = useCheckboxGroupContext();
-
-    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.includes(value)
-        : uncontrolledValue;
-    const isIndeterminate = !!indeterminate;
-    const isDisabled = !!(disabled || groupContext?.disabled);
-
-    const resolvedName = name ?? groupContext?.name;
-    const resolvedSize = size ?? groupContext?.size ?? "md";
-    const resolvedRadius = radius ?? groupContext?.radius ?? "sm";
-    const sizeClass = getSize(resolvedSize);
-
-    useEffect(() => {
-        if (inputRef.current) {
-            inputRef.current.indeterminate = isIndeterminate;
-        }
-    }, [isIndeterminate, isChecked]);
-
-    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        const nextChecked = event.currentTarget.checked;
-
-        if (hasGroupValue) {
-            groupContext.onValueChange(value, nextChecked);
-        } 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="checkbox"
-                    value={value}
-                    name={resolvedName}
-                    className={cx("sr-only peer", classes.input)}
-                    checked={!!isChecked}
-                    onChange={handleOnChange}
-                    disabled={isDisabled}
-                    aria-checked={isIndeterminate ? "mixed" : undefined}
-                />
-
-                <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)]",
-                        "data-[indeterminate=true]:bg-[var(--refraktor-primary)] data-[indeterminate=true]:border-[var(--refraktor-primary)]",
-                        sizeClass.indicator,
-                        getRadius(resolvedRadius),
-                        classes.indicator
-                    )}
-                    data-checked={isChecked}
-                    data-indeterminate={isIndeterminate}
-                >
-                    {(isChecked || isIndeterminate) && (
-                        <span
-                            className={cx(
-                                "text-[var(--refraktor-primary-text)]",
-                                sizeClass.icon,
-                                classes.icon
-                            )}
-                        >
-                            {isIndeterminate ? (
-                                <MinusIcon size="100%" />
-                            ) : (
-                                <CheckIcon size="100%" />
-                            )}
-                        </span>
-                    )}
-                </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>
-    );
-});
-
-Checkbox.displayName = "@refraktor/core/Checkbox";
-Checkbox.configure = createComponentConfig<CheckboxProps>();
-Checkbox.classNames = createClassNamesConfig<CheckboxClassNames>();
-Checkbox.Group = CheckboxGroup;
-
-export default Checkbox;

package/src/components/checkbox/checkbox.types.ts

@@ -1,125 +0,0 @@
-import { ComponentPropsWithoutRef, ReactNode } from "react";
-import { RefraktorRadius, RefraktorSize } from "../../theme";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    FactoryPayload
-} from "../../utils";
-import { CheckboxGroup } from "./checkbox-group";
-
-export type CheckboxLabelPosition = "left" | "right";
-export type CheckboxGroupOrientation = "vertical" | "horizontal";
-
-export type CheckboxClassNames = {
-    root?: string;
-    body?: string;
-    input?: string;
-    indicator?: string;
-    icon?: string;
-    label?: string;
-    description?: string;
-    error?: string;
-};
-
-export type CheckboxGroupClassNames = {
-    root?: string;
-};
-
-export interface CheckboxProps
-    extends Omit<ComponentPropsWithoutRef<"input">, "size" | "onChange"> {
-    /** State of the checkbox (controlled) */
-    checked?: boolean;
-
-    /** Initial state of the checkbox (uncontrolled) */
-    defaultChecked?: boolean;
-
-    /** Callback called when the checkbox state changes */
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-
-    /** Whether the checkbox should display indeterminate state */
-    indeterminate?: boolean;
-
-    /** Value used in Checkbox.Group */
-    value?: string;
-
-    /** The size of the checkbox @default `md` */
-    size?: RefraktorSize;
-
-    /** The radius of the checkbox @default `sm` */
-    radius?: RefraktorRadius;
-
-    /** The label of the checkbox */
-    label?: ReactNode;
-
-    /** The position of the label @default `right` */
-    labelPosition?: CheckboxLabelPosition;
-
-    /** Error state or message */
-    error?: ReactNode;
-
-    /** Description below the checkbox */
-    description?: ReactNode;
-
-    /** Used for editing root class name */
-    className?: string;
-
-    /** Used for styling different parts of the component */
-    classNames?: CheckboxClassNames;
-}
-
-export interface CheckboxGroupProps
-    extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
-    /** Checkbox items to render */
-    children: ReactNode;
-
-    /** Selected values (controlled) */
-    value?: string[];
-
-    /** Initial selected values (uncontrolled) */
-    defaultValue?: string[];
-
-    /** Callback called when group values change */
-    onChange?: (value: string[]) => void;
-
-    /** Name propagated to checkbox inputs in the group */
-    name?: string;
-
-    /** Whether all checkboxes in group are disabled */
-    disabled?: boolean;
-
-    /** Shared checkbox size */
-    size?: RefraktorSize;
-
-    /** Shared checkbox radius */
-    radius?: RefraktorRadius;
-
-    /** Layout direction @default `vertical` */
-    orientation?: CheckboxGroupOrientation;
-
-    /** Used for editing root class name */
-    className?: string;
-
-    /** Used for styling different parts of the component */
-    classNames?: CheckboxGroupClassNames;
-}
-
-export interface CheckboxFactoryPayload extends FactoryPayload {
-    props: CheckboxProps;
-    ref: HTMLInputElement;
-    compound: {
-        configure: ReturnType<typeof createComponentConfig<CheckboxProps>>;
-        classNames: ReturnType<typeof createClassNamesConfig<CheckboxClassNames>>;
-        Group: typeof CheckboxGroup;
-    };
-}
-
-export interface CheckboxGroupFactoryPayload extends FactoryPayload {
-    props: CheckboxGroupProps;
-    ref: HTMLDivElement;
-    compound: {
-        configure: ReturnType<typeof createComponentConfig<CheckboxGroupProps>>;
-        classNames: ReturnType<
-            typeof createClassNamesConfig<CheckboxGroupClassNames>
-        >;
-    };
-}

package/src/components/checkbox/index.ts

@@ -1,10 +0,0 @@
-export { default as Checkbox } from "./checkbox";
-export { CheckboxGroup } from "./checkbox-group";
-export type {
-    CheckboxProps,
-    CheckboxClassNames,
-    CheckboxGroupProps,
-    CheckboxGroupClassNames,
-    CheckboxLabelPosition,
-    CheckboxGroupOrientation
-} from "./checkbox.types";

package/src/components/color-swatch/color-swatch.styles.ts

@@ -1,11 +0,0 @@
-import { RefraktorSize } from "../../theme";
-
-const sizes: Record<RefraktorSize, string> = {
-    xs: "size-4",
-    sm: "size-5",
-    md: "size-6",
-    lg: "size-8",
-    xl: "size-10"
-};
-
-export const getSize = (size: RefraktorSize = "md") => sizes[size];

package/src/components/color-swatch/color-swatch.test.tsx

@@ -1,80 +0,0 @@
-import { createRef } from "react";
-import { describe, expect, it } from "vitest";
-import { render, screen } from "../../vitest";
-import ColorSwatch from "./color-swatch";
-
-describe("@refraktor/core/ColorSwatch", () => {
-    it("renders with provided color", async () => {
-        await render(
-            <ColorSwatch
-                color="rgba(255, 0, 0, 0.5)"
-                data-testid="swatch"
-                classNames={{ color: "custom-color" }}
-            />
-        );
-
-        const swatch = screen.getByTestId("swatch");
-        const colorLayer = swatch.querySelector(".custom-color") as HTMLSpanElement;
-
-        expect(colorLayer).toBeInTheDocument();
-        expect(colorLayer).toHaveStyle({ background: "rgba(255, 0, 0, 0.5)" });
-    });
-
-    it("forwards ref correctly", async () => {
-        const ref = createRef<HTMLDivElement>();
-
-        await render(<ColorSwatch ref={ref} data-testid="swatch" />);
-
-        expect(ref.current).toBeInstanceOf(HTMLDivElement);
-        expect(ref.current?.tagName).toBe("DIV");
-    });
-
-    it("supports root and slot class names", async () => {
-        const { container } = await render(
-            <ColorSwatch
-                className="custom-root"
-                classNames={{
-                    grid: "custom-grid",
-                    color: "custom-color",
-                    content: "custom-content"
-                }}
-            >
-                A
-            </ColorSwatch>
-        );
-
-        const root = container.firstElementChild as HTMLDivElement;
-        const gridLayer = root.querySelector(".custom-grid") as HTMLSpanElement;
-        const colorLayer = root.querySelector(".custom-color") as HTMLSpanElement;
-        const contentLayer = root.querySelector(".custom-content") as HTMLSpanElement;
-
-        expect(root).toHaveClass("custom-root");
-        expect(gridLayer).toBeInTheDocument();
-        expect(colorLayer).toBeInTheDocument();
-        expect(contentLayer).toBeInTheDocument();
-    });
-
-    it("includes transparency grid class", async () => {
-        await render(
-            <ColorSwatch
-                data-testid="swatch"
-                classNames={{ grid: "custom-grid" }}
-                color="rgba(0, 128, 255, 0.4)"
-            />
-        );
-
-        const swatch = screen.getByTestId("swatch");
-        const gridLayer = swatch.querySelector(".custom-grid") as HTMLSpanElement;
-
-        expect(gridLayer).toHaveClass("refraktor-transparency-grid");
-    });
-
-    it("applies size and radius classes", async () => {
-        await render(<ColorSwatch size="xl" radius="full" data-testid="swatch" />);
-
-        const swatch = screen.getByTestId("swatch");
-
-        expect(swatch.className).toContain("size-10");
-        expect(swatch.className).toContain("rounded-[var(--refraktor-radius-full)]");
-    });
-});