@refraktor/core 0.0.2 → 0.0.3

package/src/components/modal/modal-overlay/modal-overlay.tsx

@@ -5,16 +5,33 @@ import { Transition } from "../../transition";
 import { useModalContext } from "../modal.context";
 import { ModalOverlayFactoryPayload } from "../modal.types";
 
-const ModalOverlay = factory<ModalOverlayFactoryPayload>(
-    ({ closeOnClick = true, className, onMouseDown, ...props }, ref) => {
-        const { cx } = useTheme();
-        const {
-            modal,
-            closeOnClickOutside,
-            withinPortal,
-            transitionProps,
-            getStyles
-        } = useModalContext();
+const ModalOverlay = factory<ModalOverlayFactoryPayload>(
+    (
+        {
+            closeOnClick = true,
+            backgroundOpacity = 0.5,
+            blur = 0,
+            className,
+            onMouseDown,
+            style,
+            ...props
+        },
+        ref
+    ) => {
+        const { cx } = useTheme();
+        const {
+            modal,
+            closeOnClickOutside,
+            withinPortal,
+            transitionProps,
+            getStyles
+        } = useModalContext();
+
+        const blurValue = typeof blur === "number" ? `${blur}px` : blur;
+        const backdropFilterValue =
+            blurValue !== "0" && blurValue !== "0px"
+                ? `blur(${blurValue})`
+                : undefined;
 
         const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
             onMouseDown?.(event);
@@ -37,17 +54,22 @@ const ModalOverlay = factory<ModalOverlayFactoryPayload>(
                 mounted={modal.opened}
                 {...transitionProps}
             >
-                <div
-                    ref={ref}
-                    aria-hidden="true"
-                    className={cx(
-                        "fixed inset-0 z-40 bg-gradient-to-b from-black/60 via-black/45 to-black/65 backdrop-blur-[2px]",
-                        getStyles("overlay"),
-                        className
-                    )}
-                    onMouseDown={handleMouseDown}
-                    {...props}
-                />
+                <div
+                    ref={ref}
+                    aria-hidden="true"
+                    className={cx(
+                        "fixed inset-0 z-40",
+                        getStyles("overlay"),
+                        className
+                    )}
+                    style={{
+                        backgroundColor: `rgba(0, 0, 0, ${backgroundOpacity})`,
+                        backdropFilter: backdropFilterValue,
+                        ...style
+                    }}
+                    onMouseDown={handleMouseDown}
+                    {...props}
+                />
             </Transition>
         );
 

package/src/components/modal/modal.test.tsx

@@ -74,19 +74,55 @@ describe("@refraktor/core/Modal", () => {
         });
     });
 
-    it("supports standalone subcomponents with ModalRoot", async () => {
-        await render(
-            <ModalRoot defaultOpened transitionProps={transitionProps}>
-                <ModalOverlay />
-                <ModalContent>Standalone composition</ModalContent>
+    it("supports standalone subcomponents with ModalRoot", async () => {
+        await render(
+            <ModalRoot defaultOpened transitionProps={transitionProps}>
+                <ModalOverlay />
+                <ModalContent>Standalone composition</ModalContent>
             </ModalRoot>
         );
-
-        expect(await screen.findByRole("dialog")).toBeInTheDocument();
-    });
-
-    it("locks and unlocks body scroll when enabled", async () => {
-        const user = userEvent.setup();
+
+        expect(await screen.findByRole("dialog")).toBeInTheDocument();
+    });
+
+    it("applies custom overlay background opacity and blur", async () => {
+        await render(
+            <Modal defaultOpened transitionProps={transitionProps}>
+                <Modal.Overlay
+                    data-testid="overlay"
+                    backgroundOpacity={0.4}
+                    blur={6}
+                />
+                <Modal.Content>Styled overlay</Modal.Content>
+            </Modal>
+        );
+
+        const overlay = await screen.findByTestId("overlay");
+
+        expect(overlay).toHaveStyle({
+            backgroundColor: "rgba(0, 0, 0, 0.4)",
+            backdropFilter: "blur(6px)"
+        });
+    });
+
+    it("does not set backdrop blur for zero blur", async () => {
+        await render(
+            <Modal defaultOpened transitionProps={transitionProps}>
+                <Modal.Overlay data-testid="overlay" blur={0} />
+                <Modal.Content>No blur</Modal.Content>
+            </Modal>
+        );
+
+        const overlay = await screen.findByTestId("overlay");
+
+        expect(overlay).toHaveStyle({
+            backgroundColor: "rgba(0, 0, 0, 0.5)"
+        });
+        expect(overlay.style.backdropFilter).toBe("");
+    });
+
+    it("locks and unlocks body scroll when enabled", async () => {
+        const user = userEvent.setup();
 
         await render(
             <Modal defaultOpened lockScroll transitionProps={transitionProps}>

package/src/components/modal/modal.types.ts

@@ -64,6 +64,12 @@ export interface ModalOverlayProps extends ComponentPropsWithoutRef<"div"> {
     /** Whether clicking the overlay closes modal @default `true` */
     closeOnClick?: boolean;
 
+    /** Overlay background opacity @default `0.5` */
+    backgroundOpacity?: number;
+
+    /** Backdrop blur amount in px (or any CSS length) @default `0` */
+    blur?: number | string;
+
     /** Used for editing root class name */
     className?: string;
 }

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-6 px-2 min-w-7",
+        label: "text-[10px]"
+    },
+    sm: {
+        root: "p-0.5 gap-0.5",
+        control: "h-7 px-2.5 min-w-8",
+        label: "text-xs"
+    },
+    md: {
+        root: "p-1 gap-1",
+        control: "h-8 px-3 min-w-9",
+        label: "text-sm"
+    },
+    lg: {
+        root: "p-1 gap-1",
+        control: "h-9 px-3.5 min-w-10",
+        label: "text-base"
+    },
+    xl: {
+        root: "p-1.5 gap-1.5",
+        control: "h-10 px-4 min-w-11",
+        label: "text-lg"
+    }
+};
+
+export const getSize = (size: RefraktorSize = "md") => sizes[size];

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

@@ -0,0 +1,152 @@
+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("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,245 @@
+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",
+                                "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",
+                                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)
+                            }
+                        >
+                            <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,75 @@
+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;
+
+    /** 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>
+        >;
+    };
+}

package/src/components/select/select-item/select-item.tsx

@@ -92,7 +92,7 @@ const SelectItem = factory<SelectItemFactoryPayload>(
                 aria-selected={isSelected}
                 aria-disabled={disabled}
                 className={cx(
-                    "w-full text-left p-1.5 text-sm rounded-none appearance-none border-none bg-transparent",
+                    "w-full text-left p-1.5 text-xs rounded-none appearance-none border-none bg-transparent",
                     "inline-flex items-center gap-2 outline-none transition-colors",
                     "hover:bg-[var(--refraktor-bg-hover)] focus-visible:bg-[var(--refraktor-bg-hover)]",
                     "data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed",