@refraktor/core 0.0.1

package/src/components/select/select.test.tsx

@@ -0,0 +1,155 @@
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, userEvent, waitFor } from "../../vitest";
+import Select from "./select";
+
+describe("@refraktor/core/Select", () => {
+    const transitionProps = {
+        duration: 0,
+        immediate: true
+    } as const;
+
+    it("supports built-in data mode", async () => {
+        const user = userEvent.setup();
+
+        await render(
+            <Select
+                placeholder="Pick framework"
+                transitionProps={transitionProps}
+                data={[
+                    { value: "react", label: "React" },
+                    { value: "vue", label: "Vue" }
+                ]}
+            />
+        );
+
+        const trigger = screen.getByRole("combobox");
+        expect(trigger).toHaveAttribute("placeholder", "Pick framework");
+
+        await user.click(trigger);
+        await user.click(screen.getByRole("option", { name: "React" }));
+
+        expect(trigger).toHaveValue("React");
+
+        await waitFor(() => {
+            expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+        });
+    });
+
+    it("renders searchable input inside dropdown", async () => {
+        const user = userEvent.setup();
+
+        await render(
+            <Select
+                searchable
+                transitionProps={transitionProps}
+                data={[
+                    { value: "react", label: "React" },
+                    { value: "vue", label: "Vue" },
+                    { value: "solid", label: "Solid" }
+                ]}
+            />
+        );
+
+        await user.click(screen.getByRole("combobox"));
+
+        const searchInput = screen.getByPlaceholderText("Search...");
+        expect(searchInput).toBeInTheDocument();
+
+        await user.type(searchInput, "vu");
+
+        expect(screen.getByRole("option", { name: "Vue" })).toBeInTheDocument();
+        expect(
+            screen.queryByRole("option", { name: "React" })
+        ).not.toBeInTheDocument();
+
+        await user.clear(searchInput);
+        await user.type(searchInput, "unknown");
+
+        expect(screen.getByText("No options")).toBeInTheDocument();
+    });
+
+    it("supports compound mode with groups", async () => {
+        const user = userEvent.setup();
+
+        await render(
+            <Select.Root transitionProps={transitionProps}>
+                <Select.Trigger />
+
+                <Select.Dropdown>
+                    <Select.Group label="Frontend">
+                        <Select.Item value="react">React</Select.Item>
+                    </Select.Group>
+
+                    <Select.Group label="Backend">
+                        <Select.Item value="node">Node.js</Select.Item>
+                    </Select.Group>
+                </Select.Dropdown>
+            </Select.Root>
+        );
+
+        const trigger = screen.getByRole("combobox");
+
+        await user.click(trigger);
+        expect(screen.getByText("Frontend")).toBeInTheDocument();
+        expect(screen.getByText("Backend")).toBeInTheDocument();
+
+        await user.click(screen.getByRole("option", { name: "Node.js" }));
+        expect(trigger).toHaveValue("Node.js");
+    });
+
+    it("supports keyboard selection", async () => {
+        const user = userEvent.setup();
+
+        await render(
+            <Select
+                transitionProps={transitionProps}
+                data={[
+                    { value: "react", label: "React" },
+                    { value: "vue", label: "Vue" }
+                ]}
+            />
+        );
+
+        const trigger = screen.getByRole("combobox");
+        trigger.focus();
+
+        await user.keyboard("{ArrowDown}");
+        await user.keyboard("{ArrowDown}");
+        await user.keyboard("{Enter}");
+
+        expect(trigger).toHaveValue("Vue");
+    });
+
+    it("supports controlled mode", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+
+        function Demo() {
+            const [value, setValue] = useState<string | null>("react");
+
+            return (
+                <Select
+                    value={value}
+                    onChange={(nextValue) => {
+                        onChange(nextValue);
+                        setValue(nextValue);
+                    }}
+                    transitionProps={transitionProps}
+                    data={[
+                        { value: "react", label: "React" },
+                        { value: "vue", label: "Vue" }
+                    ]}
+                />
+            );
+        }
+
+        await render(<Demo />);
+
+        await user.click(screen.getByRole("combobox"));
+        await user.click(screen.getByRole("option", { name: "Vue" }));
+
+        expect(onChange).toHaveBeenCalledWith("vue");
+        expect(screen.getByRole("combobox")).toHaveValue("Vue");
+    });
+});

package/src/components/select/select.tsx

@@ -0,0 +1,82 @@
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    factory
+} from "../../utils";
+import { SelectDropdown } from "./select-dropdown";
+import { SelectGroup } from "./select-group";
+import { SelectItem } from "./select-item";
+import { SelectRoot } from "./select-root";
+import { SelectTrigger } from "./select-trigger";
+import type {
+    SelectClassNames,
+    SelectData,
+    SelectFactoryPayload,
+    SelectGroupData,
+    SelectProps
+} from "./select.types";
+
+function isGroupData(item: SelectData): item is SelectGroupData {
+    return "items" in item;
+}
+
+const Select = factory<SelectFactoryPayload>((_props, ref) => {
+    const { data, children, ...props } = _props;
+
+    if (children !== undefined && children !== null) {
+        return (
+            <SelectRoot ref={ref} {...props}>
+                {children}
+            </SelectRoot>
+        );
+    }
+
+    return (
+        <SelectRoot ref={ref} {...props}>
+            <SelectTrigger />
+
+            <SelectDropdown>
+                {(data ?? []).map((entry, index) => {
+                    if (isGroupData(entry)) {
+                        return (
+                            <SelectGroup key={`group-${index}`} label={entry.label}>
+                                {entry.items.map((item) => (
+                                    <SelectItem
+                                        key={item.value}
+                                        value={item.value}
+                                        disabled={item.disabled}
+                                        textValue={item.textValue}
+                                    >
+                                        {item.label}
+                                    </SelectItem>
+                                ))}
+                            </SelectGroup>
+                        );
+                    }
+
+                    return (
+                        <SelectItem
+                            key={entry.value}
+                            value={entry.value}
+                            disabled={entry.disabled}
+                            textValue={entry.textValue}
+                        >
+                            {entry.label}
+                        </SelectItem>
+                    );
+                })}
+            </SelectDropdown>
+        </SelectRoot>
+    );
+});
+
+Select.displayName = "@refraktor/core/Select";
+Select.configure = createComponentConfig<SelectProps>();
+Select.classNames = createClassNamesConfig<SelectClassNames>();
+Select.Root = SelectRoot;
+Select.Trigger = SelectTrigger;
+Select.Dropdown = SelectDropdown;
+Select.Group = SelectGroup;
+Select.Item = SelectItem;
+
+export default Select;

package/src/components/select/select.types.ts

@@ -0,0 +1,257 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type {
+    FlipOptions,
+    InlineOptions,
+    Placement,
+    ShiftOptions
+} from "@floating-ui/react";
+import type { RefraktorRadius, RefraktorSize } from "../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    FactoryPayload
+} from "../../utils";
+import type { TransitionProps } from "../transition";
+import type { InputVariant } from "../input";
+import type { SelectRoot } from "./select-root";
+import type { SelectTrigger } from "./select-trigger";
+import type { SelectDropdown } from "./select-dropdown";
+import type { SelectGroup } from "./select-group";
+import type { SelectItem } from "./select-item";
+
+export type SelectClassNames = {
+    root?: string;
+    trigger?: string;
+    triggerInput?: string;
+    triggerIcon?: string;
+    dropdown?: string;
+    search?: string;
+    searchInput?: string;
+    options?: string;
+    group?: string;
+    groupLabel?: string;
+    item?: string;
+    itemLabel?: string;
+    itemCheck?: string;
+    empty?: string;
+};
+
+export type SelectPositioning = {
+    /** The placement of the dropdown relative to the trigger @default `bottom-start` */
+    placement?: Placement;
+
+    /** Offset distance from the trigger in pixels @default `4` */
+    offset?: number;
+};
+
+export type SelectMiddlewares = {
+    shift?: boolean | ShiftOptions;
+    flip?: boolean | FlipOptions;
+    inline?: boolean | InlineOptions;
+};
+
+export interface SelectItemData {
+    /** Option value */
+    value: string;
+
+    /** Option label */
+    label: ReactNode;
+
+    /** Optional searchable text for non-string labels */
+    textValue?: string;
+
+    /** Whether the option is disabled */
+    disabled?: boolean;
+}
+
+export interface SelectGroupData {
+    /** Group label */
+    label?: ReactNode;
+
+    /** Group items */
+    items: SelectItemData[];
+}
+
+export type SelectData = SelectItemData | SelectGroupData;
+
+export interface SelectRootProps
+    extends Omit<
+        ComponentPropsWithoutRef<"div">,
+        "value" | "defaultValue" | "onChange"
+    > {
+    /** Children containing select subcomponents */
+    children: ReactNode;
+
+    /** Selected value (controlled) */
+    value?: string | null;
+
+    /** Initial selected value (uncontrolled) */
+    defaultValue?: string | null;
+
+    /** Callback called when selected value changes */
+    onChange?: (value: string | null) => void;
+
+    /** Dropdown open state (controlled) */
+    opened?: boolean;
+
+    /** Initial dropdown open state (uncontrolled) */
+    defaultOpened?: boolean;
+
+    /** Callback called when dropdown open state changes */
+    onOpenedChange?: (opened: boolean) => void;
+
+    /** Positioning settings */
+    positioning?: SelectPositioning;
+
+    /** Floating middleware settings */
+    middlewares?: SelectMiddlewares;
+
+    /** Whether select is disabled @default `false` */
+    disabled?: boolean;
+
+    /** Whether to render searchable input inside dropdown @default `false` */
+    searchable?: boolean;
+
+    /** Search query (controlled) */
+    searchValue?: string;
+
+    /** Initial search query (uncontrolled) */
+    defaultSearchValue?: string;
+
+    /** Callback called when search query changes */
+    onSearchChange?: (value: string) => void;
+
+    /** Trigger placeholder text @default `Select option` */
+    placeholder?: string;
+
+    /** Search input placeholder @default `Search...` */
+    searchPlaceholder?: string;
+
+    /** Content rendered when no options match @default `No options` */
+    nothingFound?: ReactNode;
+
+    /** Trigger and search input size @default `md` */
+    size?: RefraktorSize;
+
+    /** Trigger and search input radius @default `default` */
+    radius?: RefraktorRadius;
+
+    /** Trigger and search input variant @default `default` */
+    variant?: InputVariant;
+
+    /** Whether to render dropdown in portal @default `true` */
+    withinPortal?: boolean;
+
+    /** Whether to close on click outside @default `true` */
+    closeOnClickOutside?: boolean;
+
+    /** Whether to close on Escape key @default `true` */
+    closeOnEscape?: boolean;
+
+    /** Transition props for dropdown, uses Transition internally */
+    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
+
+    /** Used for editing root class name */
+    className?: string;
+
+    /** Used for styling different parts of the component */
+    classNames?: SelectClassNames;
+}
+
+export interface SelectTriggerProps extends ComponentPropsWithoutRef<"div"> {
+    /** Trigger placeholder override */
+    placeholder?: string;
+
+    /** Optional custom right section */
+    rightSection?: ReactNode;
+
+    /** Used for editing root class name */
+    className?: string;
+}
+
+export interface SelectDropdownProps extends ComponentPropsWithoutRef<"div"> {
+    /** Content displayed inside dropdown */
+    children: ReactNode;
+
+    /** Used for editing root class name */
+    className?: string;
+}
+
+export interface SelectGroupProps extends ComponentPropsWithoutRef<"div"> {
+    /** Group label */
+    label?: ReactNode;
+
+    /** Group content */
+    children: ReactNode;
+
+    /** Used for editing root class name */
+    className?: string;
+}
+
+export interface SelectItemProps
+    extends Omit<ComponentPropsWithoutRef<"button">, "value" | "onSelect"> {
+    /** Option value */
+    value: string;
+
+    /** Option content */
+    children: ReactNode;
+
+    /** Callback called when option is selected */
+    onSelect?: (value: string) => void;
+
+    /** Optional searchable text for non-string children */
+    textValue?: string;
+
+    /** Whether option is disabled */
+    disabled?: boolean;
+
+    /** Used for editing root class name */
+    className?: string;
+}
+
+export interface SelectProps extends Omit<SelectRootProps, "children"> {
+    /** Compound children. If provided, data-based rendering is skipped */
+    children?: ReactNode;
+
+    /** Data used for built-in rendering mode */
+    data?: SelectData[];
+}
+
+export interface SelectFactoryPayload extends FactoryPayload {
+    props: SelectProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<SelectProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<SelectClassNames>>;
+        Root: typeof SelectRoot;
+        Trigger: typeof SelectTrigger;
+        Dropdown: typeof SelectDropdown;
+        Group: typeof SelectGroup;
+        Item: typeof SelectItem;
+    };
+}
+
+export interface SelectRootFactoryPayload extends FactoryPayload {
+    props: SelectRootProps;
+    ref: HTMLDivElement;
+}
+
+export interface SelectTriggerFactoryPayload extends FactoryPayload {
+    props: SelectTriggerProps;
+    ref: HTMLDivElement;
+}
+
+export interface SelectDropdownFactoryPayload extends FactoryPayload {
+    props: SelectDropdownProps;
+    ref: HTMLDivElement;
+}
+
+export interface SelectGroupFactoryPayload extends FactoryPayload {
+    props: SelectGroupProps;
+    ref: HTMLDivElement;
+}
+
+export interface SelectItemFactoryPayload extends FactoryPayload {
+    props: SelectItemProps;
+    ref: HTMLButtonElement;
+}

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

@@ -0,0 +1,169 @@
+import { useUncontrolled } from "@refraktor/utils";
+import {
+    autoUpdate,
+    flip,
+    FloatingContext,
+    inline,
+    Middleware,
+    offset,
+    Placement,
+    shift,
+    useClick,
+    useDismiss,
+    useFloating,
+    useInteractions
+} from "@floating-ui/react";
+import { useCallback, useMemo } from "react";
+import type { SelectMiddlewares, SelectPositioning } from "./select.types";
+
+interface UseSelectProps {
+    opened?: boolean;
+    defaultOpened?: boolean;
+    onOpenedChange?: (opened: boolean) => void;
+    positioning?: SelectPositioning;
+    middlewares?: SelectMiddlewares;
+    disabled?: boolean;
+    closeOnClickOutside?: boolean;
+    closeOnEscape?: boolean;
+}
+
+export interface UseSelectReturn {
+    opened: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    context: FloatingContext;
+    refs: {
+        setReference: (node: HTMLElement | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+        reference: React.MutableRefObject<HTMLElement | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+    };
+    floatingStyles: React.CSSProperties;
+    getReferenceProps: (
+        userProps?: React.HTMLAttributes<HTMLElement>
+    ) => Record<string, unknown>;
+    getFloatingProps: (
+        userProps?: React.HTMLAttributes<HTMLElement>
+    ) => Record<string, unknown>;
+    placement: Placement;
+}
+
+export function useSelect(options: UseSelectProps = {}): UseSelectReturn {
+    const {
+        opened,
+        defaultOpened,
+        onOpenedChange,
+        positioning = {
+            placement: "bottom-start",
+            offset: 4
+        },
+        middlewares = { flip: true, shift: true },
+        disabled = false,
+        closeOnClickOutside = true,
+        closeOnEscape = true
+    } = options;
+
+    const [isOpen, setIsOpen] = useUncontrolled({
+        value: opened,
+        defaultValue: defaultOpened,
+        finalValue: false,
+        onChange: onOpenedChange
+    });
+
+    const middleware = useMemo(() => {
+        const middlewareList: Middleware[] = [];
+
+        middlewareList.push(offset(positioning.offset ?? 4));
+
+        if (middlewares.flip) {
+            middlewareList.push(
+                flip(
+                    typeof middlewares.flip === "boolean"
+                        ? undefined
+                        : middlewares.flip
+                )
+            );
+        }
+
+        if (middlewares.shift) {
+            middlewareList.push(
+                shift(
+                    typeof middlewares.shift === "boolean"
+                        ? undefined
+                        : middlewares.shift
+                )
+            );
+        }
+
+        if (middlewares.inline) {
+            middlewareList.push(
+                inline(
+                    typeof middlewares.inline === "boolean"
+                        ? undefined
+                        : middlewares.inline
+                )
+            );
+        }
+
+        return middlewareList;
+    }, [positioning.offset, middlewares]);
+
+    const floating = useFloating({
+        placement: positioning.placement,
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        middleware,
+        whileElementsMounted: autoUpdate
+    });
+
+    const click = useClick(floating.context, {
+        enabled: !disabled
+    });
+
+    const dismiss = useDismiss(floating.context, {
+        outsidePress: closeOnClickOutside,
+        escapeKey: closeOnEscape
+    });
+
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        click,
+        dismiss
+    ]);
+
+    const open = useCallback(() => {
+        if (!disabled) {
+            setIsOpen(true);
+        }
+    }, [disabled, setIsOpen]);
+
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, [setIsOpen]);
+
+    const toggle = useCallback(() => {
+        if (!disabled) {
+            setIsOpen(!isOpen);
+        }
+    }, [disabled, isOpen, setIsOpen]);
+
+    return {
+        opened: isOpen,
+        open,
+        close,
+        toggle,
+        context: floating.context,
+        refs: {
+            setReference: floating.refs.setReference,
+            setFloating: floating.refs.setFloating,
+            reference: floating.refs
+                .reference as React.MutableRefObject<HTMLElement | null>,
+            floating: floating.refs
+                .floating as React.MutableRefObject<HTMLElement | null>
+        },
+        floatingStyles: floating.floatingStyles,
+        getReferenceProps,
+        getFloatingProps,
+        placement: floating.placement
+    };
+}

package/src/components/slider/index.ts

@@ -0,0 +1,7 @@
+export { default as Slider } from "./slider";
+export type {
+    SliderProps,
+    SliderClassNames,
+    SliderMark,
+    SliderFactoryPayload
+} from "./slider.types";

package/src/components/slider/slider.styles.ts

@@ -0,0 +1,37 @@
+import { RefraktorSize } from "../../theme";
+
+type SliderSizeStyles = {
+    track: string;
+    thumb: string;
+    label: string;
+};
+
+const sizes: Record<RefraktorSize, SliderSizeStyles> = {
+    xs: {
+        track: "h-1",
+        thumb: "w-3 h-3",
+        label: "text-[8px] px-1 py-0.5"
+    },
+    sm: {
+        track: "h-1.5",
+        thumb: "w-3.5 h-3.5",
+        label: "text-[10px] px-1.5 py-0.5"
+    },
+    md: {
+        track: "h-2",
+        thumb: "w-4 h-4",
+        label: "text-xs px-2 py-1"
+    },
+    lg: {
+        track: "h-2.5",
+        thumb: "w-5 h-5",
+        label: "text-sm px-2.5 py-1"
+    },
+    xl: {
+        track: "h-3",
+        thumb: "w-6 h-6",
+        label: "text-base px-3 py-1.5"
+    }
+};
+
+export const getSize = (size: RefraktorSize = "md") => sizes[size];