@refraktor/core 0.0.4 → 0.0.5

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

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

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

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

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

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

@@ -1,78 +0,0 @@
-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>
-        >;
-    };
-}

package/src/components/select/index.ts

@@ -1,20 +0,0 @@
-export { default as Select } from "./select";
-export { SelectRoot } from "./select-root";
-export { SelectTrigger } from "./select-trigger";
-export { SelectDropdown } from "./select-dropdown";
-export { SelectGroup } from "./select-group";
-export { SelectItem } from "./select-item";
-export type {
-    SelectProps,
-    SelectRootProps,
-    SelectTriggerProps,
-    SelectDropdownProps,
-    SelectGroupProps,
-    SelectItemProps,
-    SelectItemData,
-    SelectGroupData,
-    SelectData,
-    SelectClassNames,
-    SelectPositioning,
-    SelectMiddlewares
-} from "./select.types";

package/src/components/select/select-dropdown/index.ts

@@ -1 +0,0 @@
-export { default as SelectDropdown } from "./select-dropdown";