@refraktor/core 0.0.2 → 0.0.4

package/src/components/scroll-area/scroll-area.types.ts

@@ -0,0 +1,37 @@
+import { ComponentPropsWithoutRef } from "react";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    FactoryPayload
+} from "../../utils";
+
+export type ScrollAreaOrientation = "vertical" | "horizontal" | "both";
+
+export type ScrollAreaClassNames = {
+    root?: string;
+};
+
+export interface ScrollAreaProps extends ComponentPropsWithoutRef<"div"> {
+    /** Scroll direction behavior @default `vertical` */
+    orientation?: ScrollAreaOrientation;
+
+    /** Scrollbar thickness in pixels @default `6` */
+    scrollbarSize?: number;
+
+    /** Used for editing root class name */
+    className?: string;
+
+    /** Used for styling different parts of the component */
+    classNames?: ScrollAreaClassNames;
+}
+
+export interface ScrollAreaFactoryPayload extends FactoryPayload {
+    props: ScrollAreaProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<ScrollAreaProps>>;
+        classNames: ReturnType<
+            typeof createClassNamesConfig<ScrollAreaClassNames>
+        >;
+    };
+}

package/src/components/segmented-control/index.ts

@@ -0,0 +1,6 @@
+export { default as SegmentedControl } from "./segmented-control";
+export type {
+    SegmentedControlProps,
+    SegmentedControlClassNames,
+    SegmentedControlItem
+} from "./segmented-control.types";

package/src/components/segmented-control/segmented-control.styles.ts

@@ -0,0 +1,37 @@
+import { RefraktorSize } from "../../theme";
+
+type SegmentedControlSizeStyles = {
+    root: string;
+    control: string;
+    label: string;
+};
+
+const sizes: Record<RefraktorSize, SegmentedControlSizeStyles> = {
+    xs: {
+        root: "p-0.5 gap-0.5",
+        control: "h-4 px-2 min-w-6",
+        label: "text-[8px]"
+    },
+    sm: {
+        root: "p-0.5 gap-0.5",
+        control: "h-5 px-2.5 min-w-7",
+        label: "text-[10px]"
+    },
+    md: {
+        root: "p-0.5 gap-0.5",
+        control: "h-7 px-3 min-w-8",
+        label: "text-xs"
+    },
+    lg: {
+        root: "p-0.5 gap-0.5",
+        control: "h-9 px-3.5 min-w-9",
+        label: "text-sm"
+    },
+    xl: {
+        root: "p-0.5 gap-0.5",
+        control: "h-11 px-4 min-w-10",
+        label: "text-base"
+    }
+};
+
+export const getSize = (size: RefraktorSize = "md") => sizes[size];

package/src/components/segmented-control/segmented-control.test.tsx

@@ -0,0 +1,170 @@
+import { createRef, useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, userEvent } from "../../vitest";
+import SegmentedControl from "./segmented-control";
+
+const data = [
+    { value: "react", label: "React" },
+    { value: "vue", label: "Vue" },
+    { value: "svelte", label: "Svelte" }
+];
+
+describe("@refraktor/core/SegmentedControl", () => {
+    it("renders options and selected value", async () => {
+        await render(<SegmentedControl data={data} defaultValue="react" />);
+
+        expect(screen.getByRole("radiogroup")).toBeInTheDocument();
+        expect(screen.getByRole("radio", { name: "React" })).toHaveAttribute(
+            "aria-checked",
+            "true"
+        );
+        expect(screen.getByRole("radio", { name: "Vue" })).toHaveAttribute(
+            "aria-checked",
+            "false"
+        );
+    });
+
+    it("renders data icon without changing accessible name", async () => {
+        await render(
+            <SegmentedControl
+                defaultValue="react"
+                data={[
+                    {
+                        value: "react",
+                        label: "React",
+                        icon: <span data-testid="react-icon">R</span>
+                    }
+                ]}
+            />
+        );
+
+        expect(screen.getByTestId("react-icon")).toBeInTheDocument();
+        expect(screen.getByRole("radio", { name: "React" })).toBeInTheDocument();
+    });
+
+    it("forwards ref correctly", async () => {
+        const ref = createRef<HTMLDivElement>();
+
+        await render(<SegmentedControl ref={ref} data={data} />);
+
+        expect(ref.current).toBeInstanceOf(HTMLDivElement);
+        expect(ref.current?.tagName).toBe("DIV");
+    });
+
+    it("handles click change events", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+
+        await render(
+            <SegmentedControl
+                data={data}
+                defaultValue="react"
+                onChange={onChange}
+            />
+        );
+
+        await user.click(screen.getByRole("radio", { name: "Vue" }));
+
+        expect(onChange).toHaveBeenCalledWith("vue");
+        expect(screen.getByRole("radio", { name: "Vue" })).toHaveAttribute(
+            "aria-checked",
+            "true"
+        );
+    });
+
+    it("supports controlled mode", async () => {
+        const user = userEvent.setup();
+
+        function Demo() {
+            const [value, setValue] = useState("react");
+
+            return (
+                <SegmentedControl
+                    data={data}
+                    value={value}
+                    onChange={setValue}
+                />
+            );
+        }
+
+        await render(<Demo />);
+
+        await user.click(screen.getByRole("radio", { name: "Svelte" }));
+
+        expect(screen.getByRole("radio", { name: "Svelte" })).toHaveAttribute(
+            "aria-checked",
+            "true"
+        );
+    });
+
+    it("does not select disabled item", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+
+        await render(
+            <SegmentedControl
+                defaultValue="react"
+                onChange={onChange}
+                data={[
+                    { value: "react", label: "React" },
+                    { value: "vue", label: "Vue", disabled: true }
+                ]}
+            />
+        );
+
+        const disabledControl = screen.getByRole("radio", { name: "Vue" });
+
+        expect(disabledControl).toBeDisabled();
+
+        await user.click(disabledControl);
+
+        expect(onChange).not.toHaveBeenCalled();
+        expect(disabledControl).toHaveAttribute("aria-checked", "false");
+    });
+
+    it("supports keyboard navigation and skips disabled items", async () => {
+        const user = userEvent.setup();
+
+        await render(
+            <SegmentedControl
+                defaultValue="react"
+                data={[
+                    { value: "react", label: "React" },
+                    { value: "vue", label: "Vue", disabled: true },
+                    { value: "svelte", label: "Svelte" }
+                ]}
+            />
+        );
+
+        const reactControl = screen.getByRole("radio", { name: "React" });
+        reactControl.focus();
+
+        await user.keyboard("{ArrowRight}");
+
+        const svelteControl = screen.getByRole("radio", { name: "Svelte" });
+
+        expect(svelteControl).toHaveFocus();
+        expect(svelteControl).toHaveAttribute("aria-checked", "true");
+    });
+
+    it("supports root and slot class names", async () => {
+        const { container } = await render(
+            <SegmentedControl
+                data={data}
+                className="custom-root"
+                classNames={{
+                    control: "custom-control",
+                    label: "custom-label"
+                }}
+            />
+        );
+
+        const root = container.firstElementChild as HTMLDivElement;
+        const control = screen.getByRole("radio", { name: "React" });
+        const label = screen.getByText("React");
+
+        expect(root).toHaveClass("custom-root");
+        expect(control).toHaveClass("custom-control");
+        expect(label).toHaveClass("custom-label");
+    });
+});

package/src/components/segmented-control/segmented-control.tsx

@@ -0,0 +1,255 @@
+import { useId, useUncontrolled } from "@refraktor/utils";
+import { KeyboardEvent, useMemo, useRef } from "react";
+import { useTheme } from "../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    factory,
+    useClassNames,
+    useProps
+} from "../../utils";
+import { getSize } from "./segmented-control.styles";
+import {
+    SegmentedControlClassNames,
+    SegmentedControlFactoryPayload,
+    SegmentedControlProps
+} from "./segmented-control.types";
+
+const defaultProps = {
+    size: "md",
+    radius: "default",
+    fullWidth: false,
+    disabled: false
+} satisfies Partial<SegmentedControlProps>;
+
+const SegmentedControl = factory<SegmentedControlFactoryPayload>(
+    (_props, ref) => {
+        const { cx, getRadius } = useTheme();
+        const {
+            id,
+            data,
+            value,
+            defaultValue,
+            onChange,
+            size,
+            radius,
+            fullWidth,
+            disabled,
+            name,
+            className,
+            classNames,
+            ...props
+        } = useProps("SegmentedControl", defaultProps, _props);
+        const classes = useClassNames("SegmentedControl", classNames);
+        const _id = useId(id);
+
+        const firstEnabledValue = useMemo(
+            () => data.find((item) => !item.disabled)?.value ?? "",
+            [data]
+        );
+
+        const [selectedValue, setSelectedValue] = useUncontrolled<string>({
+            value,
+            defaultValue,
+            finalValue: firstEnabledValue,
+            onChange
+        });
+
+        const sizeStyles = getSize(size);
+        const controlRefs = useRef<Array<HTMLButtonElement | null>>([]);
+
+        const enabledIndexes = useMemo(() => {
+            const indexes: number[] = [];
+
+            data.forEach((item, index) => {
+                if (!item.disabled) {
+                    indexes.push(index);
+                }
+            });
+
+            return indexes;
+        }, [data]);
+
+        const activeIndex = useMemo(
+            () => data.findIndex((item) => item.value === selectedValue),
+            [data, selectedValue]
+        );
+
+        const tabStopIndex = useMemo(() => {
+            if (activeIndex !== -1 && !data[activeIndex]?.disabled) {
+                return activeIndex;
+            }
+
+            return enabledIndexes[0] ?? -1;
+        }, [activeIndex, data, enabledIndexes]);
+
+        const selectByIndex = (index: number) => {
+            const item = data[index];
+
+            if (
+                !item ||
+                disabled ||
+                item.disabled ||
+                item.value === selectedValue
+            ) {
+                return;
+            }
+
+            setSelectedValue(item.value);
+        };
+
+        const moveSelection = (currentIndex: number, direction: 1 | -1) => {
+            if (disabled || enabledIndexes.length === 0) {
+                return;
+            }
+
+            const currentEnabledPosition = enabledIndexes.indexOf(currentIndex);
+            const basePosition =
+                currentEnabledPosition === -1 ? 0 : currentEnabledPosition;
+            const nextPosition =
+                (basePosition + direction + enabledIndexes.length) %
+                enabledIndexes.length;
+            const nextIndex = enabledIndexes[nextPosition];
+
+            selectByIndex(nextIndex);
+            controlRefs.current[nextIndex]?.focus();
+        };
+
+        const handleKeyDown = (
+            event: KeyboardEvent<HTMLButtonElement>,
+            index: number,
+            isControlDisabled: boolean
+        ) => {
+            if (event.defaultPrevented || disabled || isControlDisabled) {
+                return;
+            }
+
+            if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+                event.preventDefault();
+                moveSelection(index, 1);
+                return;
+            }
+
+            if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+                event.preventDefault();
+                moveSelection(index, -1);
+                return;
+            }
+
+            if (event.key === "Home") {
+                event.preventDefault();
+
+                const firstEnabledIndex = enabledIndexes[0];
+
+                if (firstEnabledIndex !== undefined) {
+                    selectByIndex(firstEnabledIndex);
+                    controlRefs.current[firstEnabledIndex]?.focus();
+                }
+
+                return;
+            }
+
+            if (event.key === "End") {
+                event.preventDefault();
+
+                const lastEnabledIndex =
+                    enabledIndexes[enabledIndexes.length - 1];
+
+                if (lastEnabledIndex !== undefined) {
+                    selectByIndex(lastEnabledIndex);
+                    controlRefs.current[lastEnabledIndex]?.focus();
+                }
+            }
+        };
+
+        return (
+            <div
+                ref={ref}
+                id={_id}
+                role="radiogroup"
+                data-disabled={disabled}
+                aria-disabled={disabled}
+                className={cx(
+                    "relative inline-flex items-stretch border border-[var(--refraktor-border)]",
+                    "bg-[var(--refraktor-bg-subtle)]",
+                    "data-[disabled=true]:opacity-50",
+                    fullWidth && "w-full",
+                    sizeStyles.root,
+                    getRadius(radius),
+                    classes.root,
+                    className
+                )}
+                {...props}
+            >
+                {data.map((item, index) => {
+                    const isActive = item.value === selectedValue;
+                    const isControlDisabled = !!(disabled || item.disabled);
+
+                    return (
+                        <button
+                            key={item.value}
+                            ref={(node) => {
+                                controlRefs.current[index] = node;
+                            }}
+                            type="button"
+                            role="radio"
+                            id={`${_id}-control-${index}`}
+                            aria-checked={isActive}
+                            aria-disabled={isControlDisabled}
+                            data-active={isActive}
+                            data-disabled={isControlDisabled}
+                            disabled={isControlDisabled}
+                            tabIndex={
+                                isControlDisabled || tabStopIndex !== index
+                                    ? -1
+                                    : 0
+                            }
+                            className={cx(
+                                "relative inline-flex items-center justify-center whitespace-nowrap select-none outline-none transition-colors cursor-pointer",
+                                "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--refraktor-primary)]",
+                                "data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed",
+                                item.icon && "gap-1.5",
+                                fullWidth && "flex-1",
+                                sizeStyles.control,
+                                sizeStyles.label,
+                                getRadius(radius),
+                                isActive
+                                    ? "bg-[var(--refraktor-primary)] text-[var(--refraktor-primary-text)]"
+                                    : "text-[var(--refraktor-text-secondary)] hover:bg-[var(--refraktor-bg-hover)] hover:text-[var(--refraktor-text)]",
+                                classes.control
+                            )}
+                            onClick={() => selectByIndex(index)}
+                            onKeyDown={(event) =>
+                                handleKeyDown(event, index, isControlDisabled)
+                            }
+                        >
+                            {item.icon && (
+                                <span
+                                    aria-hidden="true"
+                                    className="inline-flex shrink-0 leading-none"
+                                >
+                                    {item.icon}
+                                </span>
+                            )}
+
+                            <span className={cx("leading-none", classes.label)}>
+                                {item.label}
+                            </span>
+                        </button>
+                    );
+                })}
+
+                {name && (
+                    <input type="hidden" name={name} value={selectedValue} />
+                )}
+            </div>
+        );
+    }
+);
+
+SegmentedControl.displayName = "@refraktor/core/SegmentedControl";
+SegmentedControl.configure = createComponentConfig<SegmentedControlProps>();
+SegmentedControl.classNames =
+    createClassNamesConfig<SegmentedControlClassNames>();
+
+export default SegmentedControl;

package/src/components/segmented-control/segmented-control.types.ts

@@ -0,0 +1,78 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    FactoryPayload
+} from "../../utils";
+
+export interface SegmentedControlItem {
+    /** Item value */
+    value: string;
+
+    /** Item label */
+    label: ReactNode;
+
+    /** Optional item icon */
+    icon?: ReactNode;
+
+    /** Whether item is disabled */
+    disabled?: boolean;
+}
+
+export type SegmentedControlClassNames = {
+    root?: string;
+    control?: string;
+    label?: string;
+};
+
+export interface SegmentedControlProps extends Omit<
+    ComponentPropsWithoutRef<"div">,
+    "onChange"
+> {
+    /** Items to render */
+    data: SegmentedControlItem[];
+
+    /** Selected value (controlled) */
+    value?: string;
+
+    /** Initial selected value (uncontrolled) */
+    defaultValue?: string;
+
+    /** Callback called when selected value changes */
+    onChange?: (value: string) => void;
+
+    /** The size of segmented control @default `md` */
+    size?: RefraktorSize;
+
+    /** The radius of segmented control @default `default` */
+    radius?: RefraktorRadius;
+
+    /** Whether segmented control should take full width @default `false` */
+    fullWidth?: boolean;
+
+    /** Whether segmented control is disabled @default `false` */
+    disabled?: boolean;
+
+    /** Hidden input name for forms */
+    name?: string;
+
+    /** Used for editing root class name */
+    className?: string;
+
+    /** Used for styling different parts of the component */
+    classNames?: SegmentedControlClassNames;
+}
+
+export interface SegmentedControlFactoryPayload extends FactoryPayload {
+    props: SegmentedControlProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<
+            typeof createComponentConfig<SegmentedControlProps>
+        >;
+        classNames: ReturnType<
+            typeof createClassNamesConfig<SegmentedControlClassNames>
+        >;
+    };
+}