@refraktor/core 0.0.1

package/src/components/badge/badge.tsx

@@ -0,0 +1,62 @@
+import { useId } from "@refraktor/utils";
+import { useTheme } from "../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    factory,
+    useClassNames,
+    useProps
+} from "../../utils";
+import {
+    BadgeClassNames,
+    BadgeFactoryPayload,
+    BadgeProps
+} from "./badge.types";
+import { getSize, getVariant } from "./badge.styles";
+
+const defaultProps = {
+    size: "xs",
+    radius: "default",
+    variant: "default"
+} satisfies Partial<BadgeProps>;
+
+const Badge = factory<BadgeFactoryPayload>((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const {
+        children,
+        id,
+        size,
+        radius,
+        variant,
+        className,
+        classNames,
+        ...props
+    } = useProps("Badge", defaultProps, _props);
+    const classes = useClassNames("Badge", classNames);
+
+    const _id = useId(id);
+
+    return (
+        <div
+            id={_id}
+            ref={ref}
+            className={cx(
+                "inline-flex items-center justify-center w-fit",
+                getSize(size),
+                getRadius(radius),
+                getVariant(variant),
+                classes.root,
+                className
+            )}
+            {...props}
+        >
+            {children}
+        </div>
+    );
+});
+
+Badge.displayName = "@refraktor/core/Badge";
+Badge.configure = createComponentConfig<BadgeProps>();
+Badge.classNames = createClassNamesConfig<BadgeClassNames>();
+
+export default Badge;

package/src/components/badge/badge.types.ts

@@ -0,0 +1,40 @@
+import { ComponentPropsWithoutRef } from "react";
+import type {
+    createClassNamesConfig,
+    createComponentConfig,
+    FactoryPayload
+} from "../../utils";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+
+export type BadgeVariant = "default" | "outline";
+
+export type BadgeClassNames = {
+    root?: string;
+    content?: string;
+};
+
+export interface BadgeProps extends ComponentPropsWithoutRef<"div"> {
+    /** The variant of the badge @default `default` */
+    variant?: BadgeVariant;
+
+    /** The size of the badge @default `xs` */
+    size?: RefraktorSize;
+
+    /** The radius of the badge @default `md` */
+    radius?: RefraktorRadius;
+
+    /** Used for editing root class name */
+    className?: string;
+
+    /** Used for styling different parts of the component */
+    classNames?: BadgeClassNames;
+}
+
+export interface BadgeFactoryPayload extends FactoryPayload {
+    props: BadgeProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<BadgeProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<BadgeClassNames>>;
+    };
+}

package/src/components/badge/index.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from "./badge";
+export type { BadgeProps, BadgeClassNames } from "./badge.types";

package/src/components/button/button.styles.ts

@@ -0,0 +1,28 @@
+import { ButtonSize, ButtonVariant } from "./button.types";
+
+const sizes: Record<ButtonSize, string> = {
+    xs: "text-xs px-1.5 h-5 gap-1",
+    sm: "text-xs px-2 h-6 gap-1.5",
+    md: "text-sm px-2.5 h-8 gap-2",
+    lg: "text-base px-3 h-10 gap-2.5",
+    xl: "text-lg px-4 h-12 gap-3",
+    "icon-xs": "size-5",
+    "icon-sm": "size-6",
+    "icon-md": "size-8",
+    "icon-lg": "size-10",
+    "icon-xl": "size-12"
+};
+
+export const getSize = (size: ButtonSize = "md") => sizes[size];
+
+const variants: Record<ButtonVariant, string> = {
+    default:
+        "bg-[var(--refraktor-bg)] text-[var(--refraktor-text)] hover:bg-[var(--refraktor-bg-hover)]",
+    filled: "bg-[var(--refraktor-primary)] text-[var(--refraktor-primary-text)] hover:bg-[var(--refraktor-primary-hover)]",
+    outline:
+        "text-[var(--refraktor-text)] border border-[var(--refraktor-border)] hover:border-[var(--refraktor-border-hover)]",
+    ghost: "bg-transparent text-[var(--refraktor-text)] hover:bg-[var(--refraktor-bg-hover)]"
+};
+
+export const getVariant = (variant: ButtonVariant = "default") =>
+    variants[variant];

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

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

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

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

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

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

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

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

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

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

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

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