@refraktor/core 0.0.1 → 0.0.3

package/src/components/number-input/number-input.test.tsx

@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "../../vitest";
+import NumberInput from "./number-input";
+
+describe("@refraktor/core/NumberInput", () => {
+    it("supports input wrapper props", async () => {
+        await render(
+            <NumberInput
+                label="Quantity"
+                description="Enter desired amount"
+                error="Quantity is required"
+            />
+        );
+
+        const input = screen.getByLabelText("Quantity");
+
+        expect(input).toHaveAttribute("type", "number");
+        expect(input).toHaveAttribute("aria-invalid", "true");
+        expect(screen.getByText("Enter desired amount")).toBeInTheDocument();
+        expect(screen.getByText("Quantity is required")).toBeInTheDocument();
+    });
+});

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

@@ -69,6 +69,11 @@ const NumberInput = factory<NumberInputFactoryPayload>((_props, ref) => {
     const { cx } = useTheme();
     const {
         id,
+        label,
+        description,
+        error,
+        required,
+        withAsterisk,
         value,
         defaultValue,
         size,
@@ -134,8 +139,8 @@ const NumberInput = factory<NumberInputFactoryPayload>((_props, ref) => {
     };
 
     const stopHold = () => {
-        if (holdTimer.current) clearTimeout(holdTimer.current);
-        if (repeatTimer.current) clearInterval(repeatTimer.current);
+        if (holdTimer.current) clearInterval(holdTimer.current);
+        if (repeatTimer.current) clearTimeout(repeatTimer.current);
         holdTimer.current = null;
         repeatTimer.current = null;
     };
@@ -292,56 +297,79 @@ const NumberInput = factory<NumberInputFactoryPayload>((_props, ref) => {
         );
     }, [controlsPosition, canIncrement, canDecrement, classes, controlSizing]);
 
+    const hasWrapper = label || description || error;
+
+    const field = (
+        <InputField
+            ref={ref}
+            id={_id}
+            type="number"
+            required={required}
+            error={!!error}
+            disabled={disabled}
+            size={size}
+            min={min}
+            max={max}
+            step={step}
+            value={_value}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            onKeyDown={handleKeyDown}
+            onWheel={handleWheel}
+            leftSection={controlsPosition === "left" ? controls : undefined}
+            rightSection={controlsPosition === "right" ? controls : undefined}
+            className={className}
+            classNames={{
+                root: cx(
+                    "px-0 gap-0 items-stretch overflow-hidden",
+                    controlsPosition === "none"
+                        ? "px-2"
+                        : controlsPosition === "left"
+                          ? "pr-2"
+                          : "pl-2",
+                    classes.root
+                ),
+                leftSection: cx(
+                    "h-full self-stretch",
+                    controlsPosition === "left" && controlSizing.leftSpacing,
+                    classes.leftSection
+                ),
+                rightSection: cx(
+                    "h-full self-stretch",
+                    controlsPosition === "right" && controlSizing.rightSpacing,
+                    classes.rightSection
+                ),
+                ...(classes as any)
+            }}
+            aria-describedby={
+                error
+                    ? `${_id}-error`
+                    : description
+                      ? `${_id}-description`
+                      : undefined
+            }
+            aria-disabled={disabled}
+            aria-valuemin={min}
+            aria-valuemax={max}
+            aria-valuenow={Number(_value)}
+            {...props}
+        />
+    );
+
+    if (!hasWrapper) {
+        return field;
+    }
+
     return (
-        <InputWrapper>
-            <InputField
-                ref={ref}
-                type="number"
-                disabled={disabled}
-                size={size}
-                min={min}
-                max={max}
-                step={step}
-                value={_value}
-                onChange={handleChange}
-                onBlur={handleBlur}
-                onKeyDown={handleKeyDown}
-                onWheel={handleWheel}
-                leftSection={controlsPosition === "left" ? controls : undefined}
-                rightSection={
-                    controlsPosition === "right" ? controls : undefined
-                }
-                className={className}
-                classNames={{
-                    root: cx(
-                        "px-0 gap-0 items-stretch overflow-hidden",
-                        controlsPosition === "none"
-                            ? "px-2"
-                            : controlsPosition === "left"
-                              ? "pr-2"
-                              : "pl-2",
-                        classes.root
-                    ),
-                    leftSection: cx(
-                        "h-full self-stretch",
-                        controlsPosition === "left" &&
-                            controlSizing.leftSpacing,
-                        classes.leftSection
-                    ),
-                    rightSection: cx(
-                        "h-full self-stretch",
-                        controlsPosition === "right" &&
-                            controlSizing.rightSpacing,
-                        classes.rightSection
-                    ),
-                    ...(classes as any)
-                }}
-                aria-disabled={disabled}
-                aria-valuemin={min}
-                aria-valuemax={max}
-                aria-valuenow={Number(_value)}
-                {...props}
-            />
+        <InputWrapper
+            label={label}
+            description={description}
+            error={error}
+            required={required}
+            withAsterisk={withAsterisk}
+            inputId={_id}
+        >
+            {field}
         </InputWrapper>
     );
 });

package/src/components/number-input/number-input.types.ts

@@ -1,9 +1,9 @@
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    FactoryPayload
-} from "../../utils";
-import { InputFieldClassNames, InputFieldProps } from "../input";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    FactoryPayload
+} from "../../utils";
+import { InputFieldClassNames, InputProps } from "../input";
 
 export type NumberInputControlsPosition = "left" | "right" | "none";
 
@@ -43,8 +43,8 @@ export interface _NumberInputProps {
     classNames?: NumberInputClassNames;
 }
 
-export type NumberInputProps = _NumberInputProps &
-    Omit<InputFieldProps, "onChange" | "type" | keyof _NumberInputProps>;
+export type NumberInputProps = _NumberInputProps &
+    Omit<InputProps, "onChange" | "type" | keyof _NumberInputProps>;
 
 export interface NumberInputFactoryPayload extends FactoryPayload {
     props: NumberInputProps;

package/src/components/popover/popover-dropdown/popover-dropdown.tsx

@@ -26,6 +26,7 @@ const PopoverDropdown = factory<PopoverDropdownFactoryPayload>(
                 transition="fade"
                 duration={200}
                 mounted={popover.opened}
+                style={{ position: "relative", zIndex: 1000 }}
                 {...transitionProps}
             >
                 <div
@@ -42,6 +43,7 @@ const PopoverDropdown = factory<PopoverDropdownFactoryPayload>(
                     aria-modal="true"
                     style={{
                         ...popover.floatingStyles,
+                        zIndex: 1000,
                         ...style
                     }}
                     className={cx(

package/src/components/popover/use-popover.ts

@@ -142,7 +142,8 @@ export function usePopover(options: UsePopoverProps = {}): UsePopoverReturn {
         open: isOpen,
         onOpenChange: setIsOpen,
         middleware: middleware,
-        whileElementsMounted: autoUpdate
+        whileElementsMounted: autoUpdate,
+        strategy: "fixed"
     });
 
     const click = useClick(floating.context, {

package/src/components/portal/portal.tsx

@@ -98,7 +98,7 @@ const Portal = factory<PortalFactoryPayload>((_props, ref) => {
     return createPortal(<>{children}</>, nodeRef.current);
 });
 
-Portal.displayName = "@velra/core/Portal";
+Portal.displayName = "@refraktor/core/Portal";
 Portal.configure = createComponentConfig<PortalProps>();
 
 export default Portal;

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;