@refraktor/core 0.0.4 → 0.0.5

package/src/components/button/button.test.tsx

@@ -1,57 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import { render, screen } from "../../vitest";
-import Button from "./button";
-import { createRef } from "react";
-
-describe("@refraktor/core/Button", () => {
-    it("should render correctly", async () => {
-        await render(<Button>Click me</Button>);
-        expect(screen.getByText("Click me")).toBeInTheDocument();
-    });
-
-    it("forwards ref correctly", async () => {
-        const ref = createRef<HTMLButtonElement>();
-
-        await render(<Button ref={ref}>Click me</Button>);
-
-        expect(ref.current).toBeInstanceOf(HTMLButtonElement);
-        expect(ref.current?.tagName).toBe("BUTTON");
-        expect(ref.current?.textContent).toBe("Click me");
-    });
-
-    it("handles click event correctly", async () => {
-        const handleClick = vi.fn();
-
-        await render(<Button onClick={handleClick}>Click me</Button>);
-        screen.getByText("Click me").click();
-        expect(handleClick).toHaveBeenCalled();
-    });
-
-    it("disables button when disabled prop is true", async () => {
-        await render(<Button disabled>Click me</Button>);
-
-        const button = screen.getByRole("button", { name: "Click me" });
-
-        expect(button).toBeDisabled();
-        expect(button).toHaveAttribute("aria-disabled", "true");
-        expect(button).toHaveAttribute("data-disabled", "true");
-    });
-
-    it("renders left section correctly", async () => {
-        await render(
-            <Button leftSection={<span data-testid="left-section">🚀</span>}>
-                Click me
-            </Button>
-        );
-        expect(screen.getByTestId("left-section")).toBeInTheDocument();
-    });
-
-    it("renders right section correctly", async () => {
-        await render(
-            <Button rightSection={<span data-testid="right-section">🚀</span>}>
-                Click me
-            </Button>
-        );
-        expect(screen.getByTestId("right-section")).toBeInTheDocument();
-    });
-});

package/src/components/button/button.tsx

@@ -1,110 +0,0 @@
-import { useId } from "@refraktor/utils";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    polymorphicFactory,
-    useClassNames,
-    useProps
-} from "../../utils";
-import { useTheme } from "../../theme";
-import { Loader } from "../loader";
-import {
-    ButtonClassNames,
-    ButtonFactoryPayload,
-    ButtonProps
-} from "./button.types";
-import { getSize, getVariant } from "./button.styles";
-
-const defaultProps = {
-    size: "md",
-    radius: "default",
-    variant: "default"
-} satisfies Partial<ButtonProps>;
-
-const Button = polymorphicFactory<ButtonFactoryPayload>((_props, ref) => {
-    const { cx, getRadius } = useTheme();
-    const {
-        as,
-        children,
-        id,
-        size,
-        radius,
-        variant,
-        disabled,
-        loading,
-        loaderProps,
-        fullWidth,
-        leftSection,
-        rightSection,
-        classNames,
-        className,
-        ...props
-    } = useProps("Button", defaultProps, _props);
-    const classes = useClassNames("Button", classNames);
-
-    const Component = as ?? "button";
-    const _id = useId(id);
-
-    return (
-        <Component
-            id={_id}
-            ref={ref}
-            disabled={Component === "button" ? disabled || loading : undefined}
-            className={cx(
-                "inline-flex items-center justify-center cursor-pointer transition-all",
-                "[&_svg]:pointer-events-none [&_svg]:shrink-0 outline-none select-none active:scale-[0.98]",
-                "[&[data-disabled=true]]:opacity-50 [&[data-disabled=true]]:pointer-events-none [&[data-disabled=true]]:cursor-not-allowed",
-                fullWidth && "w-full",
-                getSize(size),
-                getRadius(radius),
-                getVariant(variant),
-                classes.root,
-                className
-            )}
-            {...props}
-            data-disabled={disabled || loading}
-            aria-disabled={disabled || loading}
-        >
-            <div
-                className={cx(
-                    "inline-flex items-center justify-center",
-                    classes.container
-                )}
-            >
-                {(loading || leftSection) && (
-                    <span
-                        className={cx(
-                            "shrink-0 mr-2 inline-flex",
-                            classes.leftSection
-                        )}
-                    >
-                        {loading ? (
-                            <Loader size={16} {...loaderProps} />
-                        ) : (
-                            leftSection
-                        )}
-                    </span>
-                )}
-
-                {children}
-
-                {rightSection && (
-                    <span
-                        className={cx(
-                            "shrink-0 ml-2 inline-flex",
-                            classes.rightSection
-                        )}
-                    >
-                        {rightSection}
-                    </span>
-                )}
-            </div>
-        </Component>
-    );
-});
-
-Button.displayName = "@refraktor/core/Button";
-Button.configure = createComponentConfig<ButtonProps>();
-Button.classNames = createClassNamesConfig<ButtonClassNames>();
-
-export default Button;

package/src/components/button/button.types.ts

@@ -1,69 +0,0 @@
-import { ButtonHTMLAttributes, ReactNode } from "react";
-import { RefraktorRadius, RefraktorSize } from "../../theme";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    PolymorphicFactoryPayload
-} from "../../utils";
-import { LoaderProps } from "../loader";
-
-export type ButtonSize =
-    | RefraktorSize
-    | "icon-xs"
-    | "icon-sm"
-    | "icon-md"
-    | "icon-lg"
-    | "icon-xl";
-export type ButtonVariant = "default" | "filled" | "outline" | "ghost";
-
-export type ButtonClassNames = {
-    root?: string;
-    container?: string;
-    leftSection?: string;
-    rightSection?: string;
-};
-
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /** The size of the button @default `md` */
-    size?: ButtonSize;
-
-    /** The radius of the button @default `md` */
-    radius?: RefraktorRadius;
-
-    /** The variant of the button @default `default` */
-    variant?: ButtonVariant;
-
-    /** Whether the button is disabled @default `false` */
-    disabled?: boolean;
-
-    /** Whether the button is loading @default `false` */
-    loading?: boolean;
-
-    /** The props for the loader. Uses the Loader component */
-    loaderProps?: LoaderProps;
-
-    /** Whether the button should take the full width of its container @default `false` */
-    fullWidth?: boolean;
-
-    /** The left section of the button */
-    leftSection?: ReactNode;
-
-    /** The right section of the button */
-    rightSection?: ReactNode;
-
-    /** Used for styling different parts of the component */
-    classNames?: ButtonClassNames;
-
-    /** Used for editing root class name */
-    className?: string;
-}
-
-export interface ButtonFactoryPayload extends PolymorphicFactoryPayload {
-    props: ButtonProps;
-    defaultRef: HTMLButtonElement;
-    defaultComponent: "button";
-    compound: {
-        configure: ReturnType<typeof createComponentConfig<ButtonProps>>;
-        classNames: ReturnType<typeof createClassNamesConfig<ButtonClassNames>>;
-    };
-}

package/src/components/button/index.ts

@@ -1,2 +0,0 @@
-export { default as Button } from "./button";
-export type { ButtonProps, ButtonClassNames } from "./button.types";

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;