@refraktor/core 0.0.1

package/src/components/radio/radio.tsx

@@ -0,0 +1,173 @@
+import { useRef } from "react";
+import { useId, useMergedRefs, useUncontrolled } from "@refraktor/utils";
+import { useTheme } from "../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    factory,
+    useClassNames,
+    useProps
+} from "../../utils";
+import { RadioGroup } from "./radio-group";
+import { useRadioGroupContext } from "./radio.context";
+import {
+    RadioClassNames,
+    RadioFactoryPayload,
+    RadioProps
+} from "./radio.types";
+import { getSize } from "./radio.styles";
+
+const defaultProps = {
+    labelPosition: "right"
+} satisfies Partial<RadioProps>;
+
+const Radio = factory<RadioFactoryPayload>((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const {
+        id,
+        checked,
+        defaultChecked,
+        onChange,
+        value,
+        name,
+        size,
+        radius,
+        disabled,
+        label,
+        labelPosition,
+        description,
+        error,
+        className,
+        classNames,
+        ...props
+    } = useProps("Radio", defaultProps, _props);
+    const classes = useClassNames("Radio", classNames);
+    const groupContext = useRadioGroupContext();
+
+    const [uncontrolledValue, handleChange] = useUncontrolled({
+        value: checked,
+        defaultValue: defaultChecked,
+        finalValue: false
+    });
+
+    const _id = useId(id);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const mergedRef = useMergedRefs(ref, inputRef);
+
+    const hasGroupValue = !!groupContext && typeof value === "string";
+    const isChecked = hasGroupValue
+        ? groupContext.value === value
+        : uncontrolledValue;
+    const isDisabled = !!(disabled || groupContext?.disabled);
+
+    const resolvedName = name ?? groupContext?.name;
+    const resolvedSize = size ?? groupContext?.size ?? "md";
+    const resolvedRadius = radius ?? groupContext?.radius ?? "full";
+    const sizeClass = getSize(resolvedSize);
+
+    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const nextChecked = event.currentTarget.checked;
+
+        if (hasGroupValue && nextChecked) {
+            groupContext.onValueChange(value);
+        } else {
+            handleChange(nextChecked);
+        }
+
+        onChange?.(event);
+    };
+
+    return (
+        <div className={cx("inline-flex flex-col", classes.root, className)}>
+            <label
+                className={cx(
+                    "inline-flex items-center select-none w-fit",
+                    sizeClass.gap,
+                    isDisabled
+                        ? "opacity-50 cursor-not-allowed"
+                        : "cursor-pointer",
+                    labelPosition === "left" ? "flex-row-reverse" : "flex-row",
+                    classes.body
+                )}
+                htmlFor={_id}
+            >
+                <input
+                    {...props}
+                    id={_id}
+                    ref={mergedRef}
+                    type="radio"
+                    value={value}
+                    name={resolvedName}
+                    className={cx("sr-only peer", classes.input)}
+                    checked={!!isChecked}
+                    onChange={handleOnChange}
+                    disabled={isDisabled}
+                />
+
+                <span
+                    className={cx(
+                        "relative inline-flex items-center justify-center shrink-0 border transition-all",
+                        "bg-[var(--refraktor-bg)] border-[var(--refraktor-border)]",
+                        "peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-[var(--refraktor-primary)]",
+                        "data-[checked=true]:bg-[var(--refraktor-primary)] data-[checked=true]:border-[var(--refraktor-primary)]",
+                        sizeClass.indicator,
+                        getRadius(resolvedRadius),
+                        classes.indicator
+                    )}
+                    data-checked={isChecked}
+                >
+                    <span
+                        className={cx(
+                            "rounded-full bg-[var(--refraktor-primary-text)] transition-transform scale-0 data-[checked=true]:scale-100",
+                            sizeClass.dot,
+                            classes.dot
+                        )}
+                        data-checked={isChecked}
+                    />
+                </span>
+
+                {label && (
+                    <span
+                        className={cx(
+                            "text-[var(--refraktor-text)]",
+                            sizeClass.label,
+                            classes.label
+                        )}
+                    >
+                        {label}
+                    </span>
+                )}
+            </label>
+
+            {description && (
+                <p
+                    className={cx(
+                        "text-[var(--refraktor-text-tertiary)] mt-1",
+                        sizeClass.description,
+                        classes.description
+                    )}
+                >
+                    {description}
+                </p>
+            )}
+
+            {error && error !== true && (
+                <p
+                    className={cx(
+                        "text-[var(--refraktor-colors-red-5)] mt-1 text-xs",
+                        classes.error
+                    )}
+                >
+                    {error}
+                </p>
+            )}
+        </div>
+    );
+});
+
+Radio.displayName = "@refraktor/core/Radio";
+Radio.configure = createComponentConfig<RadioProps>();
+Radio.classNames = createClassNamesConfig<RadioClassNames>();
+Radio.Group = RadioGroup;
+
+export default Radio;

package/src/components/radio/radio.types.ts

@@ -0,0 +1,126 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    FactoryPayload
+} from "../../utils";
+import { RadioGroup } from "./radio-group";
+
+export type RadioLabelPosition = "left" | "right";
+export type RadioGroupOrientation = "vertical" | "horizontal";
+
+export type RadioClassNames = {
+    root?: string;
+    body?: string;
+    input?: string;
+    indicator?: string;
+    dot?: string;
+    label?: string;
+    description?: string;
+    error?: string;
+};
+
+export type RadioGroupClassNames = {
+    root?: string;
+};
+
+export interface RadioProps extends Omit<
+    ComponentPropsWithoutRef<"input">,
+    "size" | "onChange"
+> {
+    /** State of the radio (controlled) */
+    checked?: boolean;
+
+    /** Initial state of the radio (uncontrolled) */
+    defaultChecked?: boolean;
+
+    /** Callback called when the radio state changes */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+
+    /** Value used in Radio.Group */
+    value?: string;
+
+    /** The size of the radio @default `md` */
+    size?: RefraktorSize;
+
+    /** The radius of the radio @default `full` */
+    radius?: RefraktorRadius;
+
+    /** The label of the radio */
+    label?: ReactNode;
+
+    /** The position of the label @default `right` */
+    labelPosition?: RadioLabelPosition;
+
+    /** Error state or message */
+    error?: ReactNode;
+
+    /** Description below the radio */
+    description?: ReactNode;
+
+    /** Used for editing root class name */
+    className?: string;
+
+    /** Used for styling different parts of the component */
+    classNames?: RadioClassNames;
+}
+
+export interface RadioGroupProps extends Omit<
+    ComponentPropsWithoutRef<"div">,
+    "onChange"
+> {
+    /** Radio items to render */
+    children: ReactNode;
+
+    /** Selected value (controlled) */
+    value?: string;
+
+    /** Initial selected value (uncontrolled) */
+    defaultValue?: string;
+
+    /** Callback called when group value changes */
+    onChange?: (value: string) => void;
+
+    /** Name propagated to radio inputs in the group */
+    name?: string;
+
+    /** Whether all radios in group are disabled */
+    disabled?: boolean;
+
+    /** Shared radio size */
+    size?: RefraktorSize;
+
+    /** Shared radio radius */
+    radius?: RefraktorRadius;
+
+    /** Layout direction @default `vertical` */
+    orientation?: RadioGroupOrientation;
+
+    /** Used for editing root class name */
+    className?: string;
+
+    /** Used for styling different parts of the component */
+    classNames?: RadioGroupClassNames;
+}
+
+export interface RadioFactoryPayload extends FactoryPayload {
+    props: RadioProps;
+    ref: HTMLInputElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<RadioProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<RadioClassNames>>;
+        Group: typeof RadioGroup;
+    };
+}
+
+export interface RadioGroupFactoryPayload extends FactoryPayload {
+    props: RadioGroupProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<RadioGroupProps>>;
+        classNames: ReturnType<
+            typeof createClassNamesConfig<RadioGroupClassNames>
+        >;
+    };
+}

package/src/components/select/index.ts

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

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

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

@@ -0,0 +1,298 @@
+import { useEffect, useRef } from "react";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { InputField } from "../../input/input-field";
+import { Transition } from "../../transition";
+import {
+    findFocusedSelectItemIndex,
+    focusSelectItem,
+    getNavigableSelectItems,
+    useSelectContext
+} from "../select.context";
+import type { SelectDropdownFactoryPayload } from "../select.types";
+import {
+    FloatingFocusManager,
+    FloatingPortal,
+    useMergeRefs
+} from "@floating-ui/react";
+
+const SelectDropdown = factory<SelectDropdownFactoryPayload>(
+    ({ children, className, style, onKeyDown, ...props }, ref) => {
+        const { cx, getRadius } = useTheme();
+        const select = useSelectContext();
+
+        const typeaheadRef = useRef("");
+        const typeaheadTimeoutRef = useRef<number | null>(null);
+
+        useEffect(() => {
+            return () => {
+                if (typeaheadTimeoutRef.current !== null) {
+                    window.clearTimeout(typeaheadTimeoutRef.current);
+                }
+            };
+        }, []);
+
+        useEffect(() => {
+            if (!select.select.opened) {
+                return;
+            }
+
+            requestAnimationFrame(() => {
+                if (select.searchable) {
+                    select.searchInputRef.current?.focus();
+                    return;
+                }
+
+                select.focusSelectedOrFirstItem();
+            });
+        }, [
+            select.focusSelectedOrFirstItem,
+            select.searchable,
+            select.searchInputRef,
+            select.select.opened
+        ]);
+
+        const clearTypeahead = () => {
+            typeaheadRef.current = "";
+
+            if (typeaheadTimeoutRef.current !== null) {
+                window.clearTimeout(typeaheadTimeoutRef.current);
+                typeaheadTimeoutRef.current = null;
+            }
+        };
+
+        const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+            onKeyDown?.(event as any);
+
+            if (event.defaultPrevented) {
+                return;
+            }
+
+            const items = getNavigableSelectItems(select.getVisibleItems());
+            const focusedIndex = findFocusedSelectItemIndex(items);
+            const isSearchInputTarget =
+                event.target === select.searchInputRef.current;
+
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+
+                if (!items.length) {
+                    return;
+                }
+
+                const nextIndex =
+                    focusedIndex >= 0 ? (focusedIndex + 1) % items.length : 0;
+
+                focusSelectItem(items[nextIndex]);
+                return;
+            }
+
+            if (event.key === "ArrowUp") {
+                event.preventDefault();
+
+                if (!items.length) {
+                    return;
+                }
+
+                const nextIndex =
+                    focusedIndex >= 0
+                        ? (focusedIndex - 1 + items.length) % items.length
+                        : items.length - 1;
+
+                focusSelectItem(items[nextIndex]);
+                return;
+            }
+
+            if (event.key === "Home") {
+                event.preventDefault();
+                focusSelectItem(items[0]);
+                return;
+            }
+
+            if (event.key === "End") {
+                event.preventDefault();
+                focusSelectItem(items[items.length - 1]);
+                return;
+            }
+
+            if (event.key === "Escape") {
+                event.preventDefault();
+                select.select.close();
+                select.triggerInputRef.current?.focus();
+                return;
+            }
+
+            if (event.key === "Tab") {
+                select.select.close();
+                return;
+            }
+
+            if (
+                (event.key === "Enter" || event.key === " ") &&
+                !isSearchInputTarget
+            ) {
+                if (focusedIndex === -1) {
+                    return;
+                }
+
+                event.preventDefault();
+                items[focusedIndex].select();
+                return;
+            }
+
+            if (
+                !select.searchable &&
+                event.key.length === 1 &&
+                !event.ctrlKey &&
+                !event.metaKey &&
+                !event.altKey
+            ) {
+                const search = `${typeaheadRef.current}${event.key.toLowerCase()}`;
+                typeaheadRef.current = search;
+
+                if (typeaheadTimeoutRef.current !== null) {
+                    window.clearTimeout(typeaheadTimeoutRef.current);
+                }
+
+                typeaheadTimeoutRef.current = window.setTimeout(() => {
+                    clearTypeahead();
+                }, 400);
+
+                const matchedItem = items.find((item, index) => {
+                    if (index <= focusedIndex) {
+                        return false;
+                    }
+
+                    return item.textValue
+                        .trim()
+                        .toLowerCase()
+                        .startsWith(search);
+                });
+
+                if (matchedItem) {
+                    event.preventDefault();
+                    focusSelectItem(matchedItem);
+                    return;
+                }
+
+                const wrappedMatch = items.find((item, index) => {
+                    if (index > focusedIndex) {
+                        return false;
+                    }
+
+                    return item.textValue
+                        .trim()
+                        .toLowerCase()
+                        .startsWith(search);
+                });
+
+                if (wrappedMatch) {
+                    event.preventDefault();
+                    focusSelectItem(wrappedMatch);
+                }
+            }
+        };
+
+        const referenceWidth =
+            select.select.refs.reference.current?.offsetWidth;
+
+        const dropdownContent = (
+            <Transition
+                transition="fade"
+                duration={150}
+                mounted={select.select.opened}
+                {...select.transitionProps}
+            >
+                <div
+                    ref={useMergeRefs([ref, select.select.refs.setFloating])}
+                    id={select.listId}
+                    role="listbox"
+                    aria-labelledby={select.triggerId}
+                    tabIndex={-1}
+                    style={{
+                        ...select.select.floatingStyles,
+                        width: referenceWidth,
+                        ...style
+                    }}
+                    className={cx(
+                        "z-50 min-w-32 bg-[var(--refraktor-bg)] text-[var(--refraktor-text)] shadow-md border border-[var(--refraktor-border)]",
+                        getRadius(select.radius),
+                        select.getStyles("dropdown"),
+                        className
+                    )}
+                    {...select.select.getFloatingProps({
+                        onKeyDown: handleKeyDown
+                    })}
+                    {...props}
+                >
+                    {select.searchable && (
+                        <div
+                            className={cx(
+                                "p-1 border-b border-[var(--refraktor-border)]",
+                                select.getStyles("search")
+                            )}
+                        >
+                            <InputField
+                                ref={(node) => {
+                                    select.searchInputRef.current = node;
+                                }}
+                                value={select.search}
+                                onChange={(event) => {
+                                    select.setSearch(event.currentTarget.value);
+                                }}
+                                size={select.size}
+                                radius={select.radius}
+                                variant={select.variant}
+                                placeholder={select.searchPlaceholder}
+                                autoComplete="off"
+                                className={select.getStyles("searchInput")}
+                            />
+                        </div>
+                    )}
+
+                    <div
+                        className={cx(
+                            "max-h-80 overflow-y-auto refraktor-scrollbar p-1",
+                            select.getStyles("options")
+                        )}
+                    >
+                        {children}
+
+                        {!select.hasVisibleItems() && (
+                            <div
+                                className={cx(
+                                    "px-1.5 py-1.5 text-sm text-[var(--refraktor-text-secondary)]",
+                                    select.getStyles("empty")
+                                )}
+                            >
+                                {select.nothingFound}
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </Transition>
+        );
+
+        const wrappedContent = select.select.opened ? (
+            <FloatingFocusManager
+                context={select.select.context}
+                modal={false}
+                initialFocus={-1}
+            >
+                {dropdownContent}
+            </FloatingFocusManager>
+        ) : (
+            dropdownContent
+        );
+
+        return select.withinPortal ? (
+            <FloatingPortal>{wrappedContent}</FloatingPortal>
+        ) : (
+            wrappedContent
+        );
+    }
+);
+
+SelectDropdown.displayName = "@refraktor/core/Select.Dropdown";
+
+export default SelectDropdown;

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

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

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

@@ -0,0 +1,47 @@
+import { useId } from "@refraktor/utils";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { SelectGroupProvider, useSelectContext } from "../select.context";
+import type { SelectGroupFactoryPayload } from "../select.types";
+
+const SelectGroup = factory<SelectGroupFactoryPayload>(
+    ({ id, label, children, className, ...props }, ref) => {
+        const { cx } = useTheme();
+        const select = useSelectContext();
+
+        const _id = useId(id);
+        const labelId = `${_id}-label`;
+        const isVisible = select.isGroupVisible(_id);
+
+        return (
+            <SelectGroupProvider value={{ groupId: _id }}>
+                <div
+                    ref={ref}
+                    role="group"
+                    aria-labelledby={label ? labelId : undefined}
+                    hidden={!isVisible}
+                    className={cx("py-1", select.getStyles("group"), className)}
+                    {...props}
+                >
+                    {label && (
+                        <div
+                            id={labelId}
+                            className={cx(
+                                "px-1.5 pb-1 text-xs font-medium text-[var(--refraktor-text-secondary)]",
+                                select.getStyles("groupLabel")
+                            )}
+                        >
+                            {label}
+                        </div>
+                    )}
+
+                    {children}
+                </div>
+            </SelectGroupProvider>
+        );
+    }
+);
+
+SelectGroup.displayName = "@refraktor/core/Select.Group";
+
+export default SelectGroup;

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

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