@refraktor/core 0.0.4 → 0.0.5

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/chip/chip-group/chip-group.tsx

@@ -1,107 +0,0 @@
-import { useId, useUncontrolled } from "@refraktor/utils";
-import { useTheme } from "../../../theme";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    factory,
-    useClassNames,
-    useProps
-} from "../../../utils";
-import { ChipGroupProvider } from "../chip.context";
-import {
-    ChipGroupClassNames,
-    ChipGroupFactoryPayload,
-    ChipGroupProps
-} from "../chip.types";
-
-const defaultProps = {
-    orientation: "horizontal"
-} satisfies Partial<ChipGroupProps>;
-
-const ChipGroup = factory<ChipGroupFactoryPayload>((_props, ref) => {
-    const { cx } = useTheme();
-    const {
-        id,
-        children,
-        value,
-        defaultValue,
-        onChange,
-        name,
-        disabled,
-        size,
-        radius,
-        variant,
-        orientation,
-        className,
-        classNames,
-        ...props
-    } = useProps("ChipGroup", defaultProps, _props);
-    const classes = useClassNames<ChipGroupClassNames>("ChipGroup", classNames);
-
-    const _id = useId(id);
-
-    const [values, setValues] = useUncontrolled<string[]>({
-        value,
-        defaultValue,
-        finalValue: [],
-        onChange
-    });
-
-    const handleValueChange = (chipValue: string, selected: boolean) => {
-        const nextValues = selected
-            ? values.includes(chipValue)
-                ? values
-                : [...values, chipValue]
-            : values.filter((itemValue) => itemValue !== chipValue);
-
-        setValues(nextValues);
-    };
-
-    return (
-        <ChipGroupProvider
-            value={{
-                value: values,
-                onValueChange: handleValueChange,
-                disabled,
-                size,
-                radius,
-                variant
-            }}
-        >
-            <div
-                ref={ref}
-                id={_id}
-                data-disabled={disabled}
-                aria-disabled={disabled}
-                className={cx(
-                    "inline-flex",
-                    orientation === "vertical"
-                        ? "flex-col items-start gap-2"
-                        : "flex-row flex-wrap items-center gap-2",
-                    "data-[disabled=true]:opacity-50",
-                    classes.root,
-                    className
-                )}
-                {...props}
-            >
-                {children}
-
-                {name &&
-                    values.map((itemValue, index) => (
-                        <input
-                            key={`${itemValue}-${index}`}
-                            type="hidden"
-                            name={name}
-                            value={itemValue}
-                        />
-                    ))}
-            </div>
-        </ChipGroupProvider>
-    );
-});
-
-ChipGroup.displayName = "@refraktor/core/ChipGroup";
-ChipGroup.configure = createComponentConfig<ChipGroupProps>();
-ChipGroup.classNames = createClassNamesConfig<ChipGroupClassNames>();
-
-export default ChipGroup;

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

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

package/src/components/chip/chip.context.ts

@@ -1,15 +0,0 @@
-import { createOptionalContext } from "@refraktor/utils";
-import { RefraktorRadius, RefraktorSize } from "../../theme";
-import { ChipVariant } from "./chip.types";
-
-export interface ChipGroupContextValue {
-    value: string[];
-    onValueChange: (chipValue: string, selected: boolean) => void;
-    disabled?: boolean;
-    size?: RefraktorSize;
-    radius?: RefraktorRadius;
-    variant?: ChipVariant;
-}
-
-export const [ChipGroupProvider, useChipGroupContext] =
-    createOptionalContext<ChipGroupContextValue>();

package/src/components/chip/chip.styles.ts

@@ -1,36 +0,0 @@
-import { RefraktorSize } from "../../theme";
-import { ChipVariant } from "./chip.types";
-
-const sizes: Record<RefraktorSize, string> = {
-    xs: "text-xs h-5 px-2 gap-1",
-    sm: "text-xs h-6 px-2.5 gap-1.5",
-    md: "text-sm h-7 px-3 gap-1.5",
-    lg: "text-base h-8 px-3.5 gap-2",
-    xl: "text-lg h-9 px-4 gap-2"
-};
-
-const variants: Record<
-    ChipVariant,
-    {
-        idle: string;
-        selected: string;
-    }
-> = {
-    default: {
-        idle: "bg-[var(--refraktor-bg)] text-[var(--refraktor-text)] border border-[var(--refraktor-border)] hover:bg-[var(--refraktor-bg-hover)]",
-        selected:
-            "bg-[var(--refraktor-primary)] text-[var(--refraktor-primary-text)] border border-[var(--refraktor-primary)]"
-    },
-    outline: {
-        idle: "bg-transparent text-[var(--refraktor-text)] border border-[var(--refraktor-border)] hover:border-[var(--refraktor-border-hover)]",
-        selected:
-            "bg-[var(--refraktor-bg-subtle)] text-[var(--refraktor-text)] border border-[var(--refraktor-primary)]"
-    }
-};
-
-export const getSize = (size: RefraktorSize = "sm") => sizes[size];
-
-export const getVariant = (
-    variant: ChipVariant = "default",
-    selected = false
-) => (selected ? variants[variant].selected : variants[variant].idle);

package/src/components/chip/chip.test.tsx

@@ -1,197 +0,0 @@
-import { createRef, useState } from "react";
-import { describe, expect, it, vi } from "vitest";
-import { render, screen, userEvent } from "../../vitest";
-import Chip from "./chip";
-
-describe("@refraktor/core/Chip", () => {
-    it("renders correctly", async () => {
-        await render(<Chip>React</Chip>);
-
-        expect(screen.getByText("React")).toBeInTheDocument();
-    });
-
-    it("forwards ref correctly", async () => {
-        const ref = createRef<HTMLDivElement>();
-
-        await render(<Chip ref={ref}>React</Chip>);
-
-        expect(ref.current).toBeInstanceOf(HTMLDivElement);
-        expect(ref.current?.tagName).toBe("DIV");
-    });
-
-    it("supports uncontrolled selected state when selectable", async () => {
-        const user = userEvent.setup();
-
-        await render(<Chip selectable>React</Chip>);
-
-        const chip = screen.getByRole("button", { name: "React" });
-
-        expect(chip).toHaveAttribute("aria-pressed", "false");
-
-        await user.click(chip);
-
-        expect(chip).toHaveAttribute("aria-pressed", "true");
-    });
-
-    it("supports controlled selected state", async () => {
-        const user = userEvent.setup();
-
-        function Demo() {
-            const [selected, setSelected] = useState(false);
-
-            return (
-                <Chip selectable selected={selected} onSelectedChange={setSelected}>
-                    React
-                </Chip>
-            );
-        }
-
-        await render(<Demo />);
-
-        const chip = screen.getByRole("button", { name: "React" });
-
-        await user.click(chip);
-
-        expect(chip).toHaveAttribute("aria-pressed", "true");
-    });
-
-    it("handles keyboard toggling", async () => {
-        const user = userEvent.setup();
-
-        await render(<Chip selectable>Vue</Chip>);
-
-        const chip = screen.getByRole("button", { name: "Vue" });
-        chip.focus();
-
-        await user.keyboard("{Space}");
-        expect(chip).toHaveAttribute("aria-pressed", "true");
-
-        await user.keyboard("{Enter}");
-        expect(chip).toHaveAttribute("aria-pressed", "false");
-    });
-
-    it("calls onRemove and does not toggle selection", async () => {
-        const user = userEvent.setup();
-        const onRemove = vi.fn();
-
-        await render(
-            <Chip selectable removable onRemove={onRemove} defaultSelected>
-                Svelte
-            </Chip>
-        );
-
-        const chip = screen.getByRole("button", { name: "Svelte" });
-        const removeButton = screen.getByRole("button", { name: "Remove chip" });
-
-        expect(chip).toHaveAttribute("aria-pressed", "true");
-
-        await user.click(removeButton);
-
-        expect(onRemove).toHaveBeenCalledTimes(1);
-        expect(chip).toHaveAttribute("aria-pressed", "false");
-    });
-
-    it("supports group selection", async () => {
-        const user = userEvent.setup();
-        const onChange = vi.fn();
-
-        await render(
-            <Chip.Group defaultValue={["react"]} onChange={onChange}>
-                <Chip value="react">React</Chip>
-                <Chip value="vue">Vue</Chip>
-            </Chip.Group>
-        );
-
-        const reactChip = screen.getByRole("button", { name: "React" });
-        const vueChip = screen.getByRole("button", { name: "Vue" });
-
-        expect(reactChip).toHaveAttribute("aria-pressed", "true");
-        expect(vueChip).toHaveAttribute("aria-pressed", "false");
-
-        await user.click(vueChip);
-        expect(onChange).toHaveBeenLastCalledWith(["react", "vue"]);
-
-        await user.click(reactChip);
-        expect(onChange).toHaveBeenLastCalledWith(["vue"]);
-    });
-
-    it("removes value from group with removable chip", async () => {
-        const user = userEvent.setup();
-        const onChange = vi.fn();
-
-        await render(
-            <Chip.Group defaultValue={["react"]} onChange={onChange}>
-                <Chip value="react" removable>
-                    React
-                </Chip>
-            </Chip.Group>
-        );
-
-        await user.click(screen.getByRole("button", { name: "Remove chip" }));
-
-        expect(onChange).toHaveBeenLastCalledWith([]);
-    });
-
-    it("supports disabled state from group", async () => {
-        const user = userEvent.setup();
-        const onChange = vi.fn();
-
-        await render(
-            <Chip.Group disabled onChange={onChange}>
-                <Chip value="react">React</Chip>
-            </Chip.Group>
-        );
-
-        const chip = screen.getByRole("button", { name: "React" });
-        await user.click(chip);
-
-        expect(chip).toHaveAttribute("aria-disabled", "true");
-        expect(onChange).not.toHaveBeenCalled();
-    });
-
-    it("supports hidden inputs from group name", async () => {
-        const { container } = await render(
-            <Chip.Group name="frameworks" defaultValue={["react", "vue"]}>
-                <Chip value="react">React</Chip>
-                <Chip value="vue">Vue</Chip>
-            </Chip.Group>
-        );
-
-        const hiddenInputs = container.querySelectorAll(
-            'input[type="hidden"][name="frameworks"]'
-        );
-
-        expect(hiddenInputs).toHaveLength(2);
-        expect(
-            Array.from(hiddenInputs).map(
-                (item) => (item as HTMLInputElement).value
-            )
-        ).toEqual(["react", "vue"]);
-    });
-
-    it("supports root and slot class names", async () => {
-        const { container } = await render(
-            <Chip
-                className="custom-root"
-                classNames={{
-                    label: "custom-label",
-                    removeButton: "custom-remove-button",
-                    removeIcon: "custom-remove-icon"
-                }}
-                removable
-            >
-                React
-            </Chip>
-        );
-
-        const root = container.firstElementChild as HTMLDivElement;
-        const label = screen.getByText("React");
-        const removeButton = screen.getByRole("button", { name: "Remove chip" });
-        const removeIcon = removeButton.querySelector("span");
-
-        expect(root).toHaveClass("custom-root");
-        expect(label).toHaveClass("custom-label");
-        expect(removeButton).toHaveClass("custom-remove-button");
-        expect(removeIcon).toHaveClass("custom-remove-icon");
-    });
-});