@refraktor/core 0.0.1

package/src/components/checkbox/checkbox.tsx

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

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

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

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

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

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

@@ -0,0 +1,84 @@
+import { useId } from "@refraktor/utils";
+import { useTheme } from "../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    factory,
+    useClassNames,
+    useProps
+} from "../../utils";
+import {
+    ColorSwatchClassNames,
+    ColorSwatchFactoryPayload,
+    ColorSwatchProps
+} from "./color-swatch.types";
+import { getSize } from "./color-swatch.styles";
+
+const defaultProps = {
+    color: "transparent",
+    size: "md",
+    radius: "default"
+} satisfies Partial<ColorSwatchProps>;
+
+const ColorSwatch = factory<ColorSwatchFactoryPayload>((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const {
+        id,
+        color,
+        size,
+        radius,
+        children,
+        className,
+        classNames,
+        ...props
+    } = useProps("ColorSwatch", defaultProps, _props);
+    const classes = useClassNames("ColorSwatch", classNames);
+
+    const _id = useId(id);
+
+    return (
+        <div
+            ref={ref}
+            id={_id}
+            className={cx(
+                "relative inline-flex items-center justify-center overflow-hidden shrink-0 border border-[var(--refraktor-border)]",
+                getSize(size),
+                getRadius(radius),
+                classes.root,
+                className
+            )}
+            {...props}
+        >
+            <span
+                aria-hidden
+                className={cx(
+                    "absolute inset-0 refraktor-transparency-grid pointer-events-none",
+                    classes.grid
+                )}
+            />
+
+            <span
+                aria-hidden
+                className={cx("absolute inset-0 pointer-events-none", classes.color)}
+                style={{ background: color }}
+            />
+
+            {children && (
+                <span
+                    className={cx(
+                        "relative z-[1] inline-flex items-center justify-center",
+                        classes.content
+                    )}
+                >
+                    {children}
+                </span>
+            )}
+        </div>
+    );
+});
+
+ColorSwatch.displayName = "@refraktor/core/ColorSwatch";
+ColorSwatch.configure = createComponentConfig<ColorSwatchProps>();
+ColorSwatch.classNames = createClassNamesConfig<ColorSwatchClassNames>();
+
+export default ColorSwatch;

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

@@ -0,0 +1,46 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    FactoryPayload
+} from "../../utils";
+
+export type ColorSwatchClassNames = {
+    root?: string;
+    grid?: string;
+    color?: string;
+    content?: string;
+};
+
+export interface ColorSwatchProps
+    extends Omit<ComponentPropsWithoutRef<"div">, "color"> {
+    /** Swatch color value (hex, rgb, rgba, hsl, etc.) */
+    color?: string;
+
+    /** Swatch size @default `md` */
+    size?: RefraktorSize;
+
+    /** Swatch radius @default `default` */
+    radius?: RefraktorRadius;
+
+    /** Optional centered content */
+    children?: ReactNode;
+
+    /** Used for editing root class name */
+    className?: string;
+
+    /** Used for styling different parts of the component */
+    classNames?: ColorSwatchClassNames;
+}
+
+export interface ColorSwatchFactoryPayload extends FactoryPayload {
+    props: ColorSwatchProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<ColorSwatchProps>>;
+        classNames: ReturnType<
+            typeof createClassNamesConfig<ColorSwatchClassNames>
+        >;
+    };
+}

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

@@ -0,0 +1,2 @@
+export { default as ColorSwatch } from "./color-swatch";
+export type { ColorSwatchProps, ColorSwatchClassNames } from "./color-swatch.types";

package/src/components/index.ts

@@ -0,0 +1,25 @@
+export * from "./accordion";
+export * from "./avatar";
+export * from "./badge";
+export * from "./button";
+export * from "./checkbox";
+export * from "./color-swatch";
+export * from "./input";
+export * from "./loader";
+export * from "./modal";
+export * from "./menu";
+export * from "./number-input";
+export * from "./pagination";
+export * from "./popover";
+export * from "./portal";
+export * from "./progress";
+export * from "./progress-circle";
+export * from "./radio";
+export * from "./select";
+export * from "./slider";
+export * from "./switch";
+export * from "./tabs";
+export * from "./timeline";
+export * from "./textarea";
+export * from "./tooltip";
+export * from "./transition";

package/src/components/input/index.ts

@@ -0,0 +1,2 @@
+export { default as Input } from "./input";
+export * from "./input.types";

package/src/components/input/input-description/index.ts

@@ -0,0 +1,2 @@
+export { default as InputDescription } from "./input-description";
+export type { InputDescriptionProps } from "./input-description";

package/src/components/input/input-description/input-description.tsx

@@ -0,0 +1,36 @@
+import { ComponentPropsWithoutRef } from "react";
+import { factory, useProps, cx } from "../../../utils";
+
+export interface InputDescriptionProps extends ComponentPropsWithoutRef<"p"> {
+    /** Editing root class name */
+    className?: string;
+}
+
+const InputDescription = factory<{
+    props: InputDescriptionProps;
+    ref: HTMLParagraphElement;
+}>((_props, ref) => {
+    const { className, children, ...props } = useProps(
+        "InputDescription",
+        null,
+        _props
+    );
+
+    return (
+        <p
+            ref={ref}
+            className={cx(
+                "text-xs leading-relaxed",
+                "text-[var(--refraktor-text-tertiary)]",
+                className
+            )}
+            {...props}
+        >
+            {children}
+        </p>
+    );
+});
+
+InputDescription.displayName = "@refraktor/core/InputDescription";
+
+export default InputDescription;

package/src/components/input/input-error/index.ts

@@ -0,0 +1,2 @@
+export { default as InputError } from "./input-error";
+export type { InputErrorProps } from "./input-error";

package/src/components/input/input-error/input-error.tsx

@@ -0,0 +1,36 @@
+import { ComponentPropsWithoutRef } from "react";
+import { factory, useProps, cx } from "../../../utils";
+
+export interface InputErrorProps extends ComponentPropsWithoutRef<"p"> {
+    /** Editing root class name */
+    className?: string;
+}
+
+const InputError = factory<{
+    props: InputErrorProps;
+    ref: HTMLParagraphElement;
+}>((_props, ref) => {
+    const { className, children, ...props } = useProps(
+        "InputError",
+        null,
+        _props
+    );
+
+    return (
+        <p
+            ref={ref}
+            className={cx(
+                "text-xs mt-0.5",
+                "text-[var(--refraktor-colors-red-5)]",
+                className
+            )}
+            {...props}
+        >
+            {children}
+        </p>
+    );
+});
+
+InputError.displayName = "@refraktor/core/InputError";
+
+export default InputError;

package/src/components/input/input-field/index.ts

@@ -0,0 +1 @@
+export { default as InputField } from "./input-field";