@refraktor/core 0.0.4 → 0.0.5

package/src/components/loader/loader.tsx

@@ -1,89 +0,0 @@
-import { CSSProperties, useMemo } from "react";
-import { createComponentConfig, cx, factory, useProps } from "../../utils";
-import { LoaderFactoryPayload, LoaderProps } from "./loader.types";
-import { useId } from "@refraktor/utils";
-
-const defaultProps = {
-    size: 32,
-    color: "var(--refraktor-primary)",
-    speed: 1,
-    stroke: 3,
-    strokeLength: 0.6,
-    bgOpacity: 0.1
-} satisfies Partial<LoaderProps>;
-
-const Loader = factory<LoaderFactoryPayload>((_props, ref) => {
-    const {
-        id,
-        size,
-        color,
-        speed,
-        stroke,
-        strokeLength,
-        bgOpacity,
-        className,
-        ...props
-    } = useProps("Loader", defaultProps, _props);
-    const _id = useId(id);
-
-    const radius = Math.max(0, size / 2 - stroke / 2);
-    const viewBoxSize = size;
-    const viewBox = `0 0 ${viewBoxSize} ${viewBoxSize}`;
-
-    const { dashArray } = useMemo(() => {
-        const r = Math.max(0, size / 2 - stroke / 2);
-        const c = 2 * Math.PI * r;
-        return { circumference: c, dashArray: `${c * strokeLength} ${c}` };
-    }, [size, stroke, strokeLength]);
-
-    const commonStyle = {
-        "--loader-speed": `${speed}s`
-    } as CSSProperties;
-
-    return (
-        <div
-            ref={ref}
-            id={_id}
-            className={cx("inline-flex items-center justify-center", className)}
-            role="status"
-            {...props}
-        >
-            <svg
-                className="loader-spin"
-                viewBox={viewBox}
-                width={size}
-                height={size}
-                style={commonStyle}
-            >
-                <circle
-                    cx={viewBoxSize / 2}
-                    cy={viewBoxSize / 2}
-                    r={radius}
-                    strokeWidth={stroke}
-                    fill="none"
-                    className="transition-colors duration-500 ease-in-out"
-                    style={{
-                        stroke: color,
-                        opacity: bgOpacity
-                    }}
-                />
-                <circle
-                    cx={viewBoxSize / 2}
-                    cy={viewBoxSize / 2}
-                    r={radius}
-                    strokeWidth={stroke}
-                    strokeDasharray={dashArray}
-                    strokeLinecap="round"
-                    fill="none"
-                    className="transition-colors duration-500 ease-in-out"
-                    style={{ stroke: color }}
-                />
-            </svg>
-        </div>
-    );
-});
-
-Loader.displayName = "@refraktor/core/Loader";
-Loader.configure = createComponentConfig<LoaderProps>();
-
-export default Loader;

package/src/components/loader/loader.types.ts

@@ -1,33 +0,0 @@
-import { ComponentPropsWithoutRef } from "react";
-import { createComponentConfig, FactoryPayload } from "../../utils";
-
-export interface LoaderProps extends ComponentPropsWithoutRef<"div"> {
-    /** The size of the loader @default `32` */
-    size?: number;
-
-    /** The color of the loader @default `var(--refraktor-primary)` */
-    color?: string;
-
-    /** The speed of the loader @default `1` */
-    speed?: number;
-
-    /** The size of the stroke @default `3` */
-    stroke?: number;
-
-    /** The length of the stroke @default `0.6` */
-    strokeLength?: number;
-
-    /** The opacity of the background @default `0.1` */
-    bgOpacity?: number;
-
-    /** Used for editing root class name */
-    className?: string;
-}
-
-export interface LoaderFactoryPayload extends FactoryPayload {
-    props: LoaderProps;
-    ref: HTMLDivElement;
-    compound: {
-        configure: ReturnType<typeof createComponentConfig<LoaderProps>>;
-    };
-}

package/src/components/menu/index.ts

@@ -1,24 +0,0 @@
-export { default as Menu } from "./menu";
-export { MenuTrigger } from "./menu-trigger";
-export { MenuDropdown } from "./menu-dropdown";
-export { MenuItem } from "./menu-item";
-export { MenuLabel } from "./menu-label";
-export { MenuSeparator } from "./menu-separator";
-export { MenuSub } from "./menu-sub";
-export { MenuSubTrigger } from "./menu-sub-trigger";
-export { MenuSubDropdown } from "./menu-sub-dropdown";
-export type {
-    MenuProps,
-    MenuTriggerProps,
-    MenuDropdownProps,
-    MenuItemProps,
-    MenuLabelProps,
-    MenuSeparatorProps,
-    MenuSubProps,
-    MenuSubTriggerProps,
-    MenuSubDropdownProps,
-    MenuClassNames,
-    MenuPositioning,
-    MenuMiddlewares,
-    MenuTriggerType
-} from "./menu.types";

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

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

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

@@ -1,220 +0,0 @@
-import { useEffect, useRef } from "react";
-import { useTheme } from "../../../theme";
-import { factory } from "../../../utils";
-import { MenuDropdownFactoryPayload } from "../menu.types";
-import {
-    findFocusedMenuItemIndex,
-    findTypeaheadMatch,
-    focusMenuItem,
-    getNavigableMenuItems,
-    useMenuLevelContext,
-    useMenuRootContext
-} from "../menu.context";
-import { Transition } from "../../transition";
-import {
-    FloatingFocusManager,
-    FloatingPortal,
-    useMergeRefs
-} from "@floating-ui/react";
-
-const MenuDropdown = factory<MenuDropdownFactoryPayload>(
-    ({ children, className, style, ...props }, ref) => {
-        const { cx, getRadius } = useTheme();
-        const { radius, withinPortal, transitionProps, getStyles } =
-            useMenuRootContext();
-        const level = useMenuLevelContext();
-
-        const typeaheadRef = useRef("");
-        const typeaheadTimeoutRef = useRef<number | null>(null);
-
-        useEffect(() => {
-            return () => {
-                if (typeaheadTimeoutRef.current !== null) {
-                    window.clearTimeout(typeaheadTimeoutRef.current);
-                }
-            };
-        }, []);
-
-        const clearTypeahead = () => {
-            typeaheadRef.current = "";
-
-            if (typeaheadTimeoutRef.current !== null) {
-                window.clearTimeout(typeaheadTimeoutRef.current);
-                typeaheadTimeoutRef.current = null;
-            }
-        };
-
-        const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
-            const items = getNavigableMenuItems(level.getItems());
-            const focusedIndex = findFocusedMenuItemIndex(items);
-
-            if (event.key === "ArrowDown") {
-                event.preventDefault();
-
-                if (!items.length) {
-                    return;
-                }
-
-                const nextIndex =
-                    focusedIndex >= 0 ? (focusedIndex + 1) % items.length : 0;
-
-                focusMenuItem(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;
-
-                focusMenuItem(items[nextIndex]);
-                return;
-            }
-
-            if (event.key === "Home") {
-                event.preventDefault();
-                focusMenuItem(items[0]);
-                return;
-            }
-
-            if (event.key === "End") {
-                event.preventDefault();
-                focusMenuItem(items[items.length - 1]);
-                return;
-            }
-
-            if (event.key === "ArrowRight") {
-                if (focusedIndex < 0) {
-                    return;
-                }
-
-                const activeItem = items[focusedIndex];
-
-                if (activeItem.hasSubmenu && activeItem.openSubmenu) {
-                    event.preventDefault();
-                    activeItem.openSubmenu(true);
-                }
-
-                return;
-            }
-
-            if (event.key === "ArrowLeft" && level.isSubmenu) {
-                event.preventDefault();
-                level.closeMenu();
-                level.menu.refs.reference.current?.focus();
-                return;
-            }
-
-            if (event.key === "Escape") {
-                event.preventDefault();
-
-                if (level.isSubmenu) {
-                    level.closeMenu();
-                    level.menu.refs.reference.current?.focus();
-                } else {
-                    level.closeAllMenus();
-                    level.menu.refs.reference.current?.focus();
-                }
-
-                return;
-            }
-
-            if (event.key === "Tab") {
-                level.closeAllMenus();
-                return;
-            }
-
-            if (
-                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 matchedIndex = findTypeaheadMatch(
-                    items,
-                    search,
-                    focusedIndex
-                );
-
-                if (matchedIndex !== -1) {
-                    event.preventDefault();
-                    focusMenuItem(items[matchedIndex]);
-                }
-            }
-        };
-
-        const dropdownContent = (
-            <Transition
-                transition="fade"
-                duration={150}
-                mounted={level.menu.opened}
-                style={{ position: "relative", zIndex: 1000 }}
-                {...transitionProps}
-            >
-                <div
-                    ref={useMergeRefs([ref, level.menu.refs.setFloating])}
-                    role="menu"
-                    tabIndex={-1}
-                    style={{
-                        ...level.menu.floatingStyles,
-                        zIndex: 1000,
-                        scrollbarGutter: "auto",
-                        ...style
-                    }}
-                    className={cx(
-                        "z-50 min-w-32 max-h-80 overflow-y-auto refraktor-scrollbar",
-                        "p-1 bg-[var(--refraktor-bg)] text-[var(--refraktor-text)] shadow-md border border-[var(--refraktor-border)]",
-                        getRadius(radius),
-                        getStyles("dropdown"),
-                        className
-                    )}
-                    {...level.menu.getFloatingProps({
-                        onKeyDown: handleKeyDown
-                    })}
-                    {...props}
-                >
-                    {children}
-                </div>
-            </Transition>
-        );
-
-        const wrappedContent = (
-            <FloatingFocusManager
-                context={level.menu.context}
-                modal={false}
-                initialFocus={-1}
-                disabled={!level.menu.opened}
-            >
-                {dropdownContent}
-            </FloatingFocusManager>
-        );
-
-        return withinPortal ? (
-            <FloatingPortal>{wrappedContent}</FloatingPortal>
-        ) : (
-            wrappedContent
-        );
-    }
-);
-
-MenuDropdown.displayName = "@refraktor/core/Menu.Dropdown";
-
-export default MenuDropdown;

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

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

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

@@ -1,126 +0,0 @@
-import { useId } from "@refraktor/utils";
-import { useEffect, useRef } from "react";
-import { useTheme } from "../../../theme";
-import { factory } from "../../../utils";
-import { MenuItemFactoryPayload } from "../menu.types";
-import {
-    getNodeTextValue,
-    useMenuLevelContext,
-    useMenuRootContext
-} from "../menu.context";
-
-const MenuItem = factory<MenuItemFactoryPayload>(
-    (
-        {
-            id,
-            children,
-            className,
-            onSelect,
-            onClick,
-            onMouseMove,
-            disabled,
-            closeOnSelect,
-            textValue,
-            leftSection,
-            rightSection,
-            ...props
-        },
-        ref
-    ) => {
-        const { cx } = useTheme();
-        const { closeOnItemClick, getStyles } = useMenuRootContext();
-        const level = useMenuLevelContext();
-
-        const _id = useId(id);
-        const itemRef = useRef<HTMLButtonElement | null>(null);
-        const resolvedTextValue = getNodeTextValue(children, textValue);
-
-        useEffect(() => {
-            return level.registerItem({
-                id: _id,
-                ref: itemRef as React.MutableRefObject<HTMLElement | null>,
-                disabled: !!disabled,
-                textValue: resolvedTextValue
-            });
-        }, [level, _id, disabled, resolvedTextValue]);
-
-        return (
-            <button
-                ref={(node) => {
-                    itemRef.current = node;
-
-                    if (typeof ref === "function") {
-                        ref(node);
-                    } else if (ref) {
-                        ref.current = node;
-                    }
-                }}
-                type="button"
-                role="menuitem"
-                tabIndex={-1}
-                disabled={disabled}
-                data-disabled={disabled}
-                aria-disabled={disabled}
-                className={cx(
-                    "w-full text-left px-2 py-1.5 text-sm rounded-sm",
-                    "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",
-                    getStyles("item"),
-                    className
-                )}
-                onMouseMove={(event) => {
-                    onMouseMove?.(event);
-
-                    if (!disabled && document.activeElement !== event.currentTarget) {
-                        event.currentTarget.focus();
-                    }
-                }}
-                onClick={(event) => {
-                    onClick?.(event);
-
-                    if (event.defaultPrevented || disabled) {
-                        return;
-                    }
-
-                    onSelect?.();
-
-                    const shouldClose = closeOnSelect ?? closeOnItemClick;
-
-                    if (shouldClose) {
-                        level.closeAllMenus();
-                    }
-                }}
-                {...props}
-            >
-                {leftSection && (
-                    <span
-                        className={cx(
-                            "inline-flex items-center shrink-0",
-                            getStyles("itemLeftSection")
-                        )}
-                    >
-                        {leftSection}
-                    </span>
-                )}
-
-                <span className="flex-1">{children}</span>
-
-                {rightSection && (
-                    <span
-                        className={cx(
-                            "inline-flex items-center shrink-0 text-[var(--refraktor-text-secondary)]",
-                            getStyles("itemRightSection")
-                        )}
-                    >
-                        {rightSection}
-                    </span>
-                )}
-            </button>
-        );
-    }
-);
-
-MenuItem.displayName = "@refraktor/core/Menu.Item";
-
-export default MenuItem;

package/src/components/menu/menu-label/index.ts

@@ -1 +0,0 @@
-export { default as MenuLabel } from "./menu-label";

package/src/components/menu/menu-label/menu-label.tsx

@@ -1,30 +0,0 @@
-import { useTheme } from "../../../theme";
-import { factory } from "../../../utils";
-import { MenuLabelFactoryPayload } from "../menu.types";
-import { useMenuRootContext } from "../menu.context";
-
-const MenuLabel = factory<MenuLabelFactoryPayload>(
-    ({ children, className, ...props }, ref) => {
-        const { cx } = useTheme();
-        const { getStyles } = useMenuRootContext();
-
-        return (
-            <div
-                ref={ref}
-                role="presentation"
-                className={cx(
-                    "px-2 py-1 text-xs font-medium text-[var(--refraktor-text-secondary)]",
-                    getStyles("label"),
-                    className
-                )}
-                {...props}
-            >
-                {children}
-            </div>
-        );
-    }
-);
-
-MenuLabel.displayName = "@refraktor/core/Menu.Label";
-
-export default MenuLabel;

package/src/components/menu/menu-separator/index.ts

@@ -1 +0,0 @@
-export { default as MenuSeparator } from "./menu-separator";

package/src/components/menu/menu-separator/menu-separator.tsx

@@ -1,28 +0,0 @@
-import { useTheme } from "../../../theme";
-import { factory } from "../../../utils";
-import { MenuSeparatorFactoryPayload } from "../menu.types";
-import { useMenuRootContext } from "../menu.context";
-
-const MenuSeparator = factory<MenuSeparatorFactoryPayload>(
-    ({ className, ...props }, ref) => {
-        const { cx } = useTheme();
-        const { getStyles } = useMenuRootContext();
-
-        return (
-            <div
-                ref={ref}
-                role="separator"
-                className={cx(
-                    "my-1 h-px bg-[var(--refraktor-border)]",
-                    getStyles("separator"),
-                    className
-                )}
-                {...props}
-            />
-        );
-    }
-);
-
-MenuSeparator.displayName = "@refraktor/core/Menu.Separator";
-
-export default MenuSeparator;

package/src/components/menu/menu-sub/index.ts

@@ -1 +0,0 @@
-export { default as MenuSub } from "./menu-sub";

package/src/components/menu/menu-sub/menu-sub.tsx

@@ -1,117 +0,0 @@
-import { useCallback } from "react";
-import { useTheme } from "../../../theme";
-import { factory, useProps } from "../../../utils";
-import { MenuSubFactoryPayload, MenuSubProps } from "../menu.types";
-import {
-    focusMenuItem,
-    getNavigableMenuItems,
-    MenuSubProvider,
-    useMenuItemsRegistry,
-    useMenuLevelContext
-} from "../menu.context";
-import { useMenu } from "../use-menu";
-
-const defaultProps = {
-    positioning: {
-        placement: "right-start",
-        offset: 4
-    },
-    middlewares: { flip: true, shift: true },
-    trigger: "hover",
-    openDelay: 75,
-    closeDelay: 125,
-    closeOnClickOutside: false,
-    closeOnEscape: true,
-    disabled: false
-} satisfies Partial<MenuSubProps>;
-
-const MenuSub = factory<MenuSubFactoryPayload>((_props, ref) => {
-    const { cx } = useTheme();
-    const {
-        children,
-        opened,
-        defaultOpened,
-        onOpenedChange,
-        positioning,
-        middlewares,
-        disabled,
-        trigger,
-        openDelay,
-        closeDelay,
-        closeOnClickOutside,
-        closeOnEscape,
-        className,
-        ...props
-    } = useProps("MenuSub", defaultProps, _props);
-    const parentLevel = useMenuLevelContext();
-
-    const submenu = useMenu({
-        opened,
-        defaultOpened,
-        onOpenedChange,
-        positioning,
-        middlewares,
-        disabled,
-        trigger,
-        openDelay,
-        closeDelay,
-        closeOnClickOutside,
-        closeOnEscape
-    });
-
-    const registry = useMenuItemsRegistry();
-
-    const submenuLevel = {
-        menu: submenu,
-        isSubmenu: true,
-        registerItem: registry.registerItem,
-        getItems: registry.getItems,
-        closeMenu: submenu.close,
-        closeAllMenus: () => {
-            submenu.close();
-            parentLevel.closeAllMenus();
-        }
-    };
-
-    const openSubmenu = useCallback(
-        (focusFirstItem?: boolean) => {
-            if (disabled) {
-                return;
-            }
-
-            submenu.open();
-
-            if (focusFirstItem) {
-                requestAnimationFrame(() => {
-                    const items = getNavigableMenuItems(submenuLevel.getItems());
-                    focusMenuItem(items[0]);
-                });
-            }
-        },
-        [disabled, submenu, submenuLevel]
-    );
-
-    const closeSubmenu = useCallback(() => {
-        submenu.close();
-    }, [submenu]);
-
-    return (
-        <MenuSubProvider
-            value={{
-                submenuLevel,
-                parentLevel,
-                disabled: !!disabled,
-                openSubmenu,
-                closeSubmenu
-            }}
-        >
-            <div ref={ref} className={cx(className)} {...props}>
-                {children}
-            </div>
-        </MenuSubProvider>
-    );
-});
-
-MenuSub.displayName = "@refraktor/core/Menu.Sub";
-
-export default MenuSub;

package/src/components/menu/menu-sub-dropdown/index.ts

@@ -1 +0,0 @@
-export { default as MenuSubDropdown } from "./menu-sub-dropdown";