@refraktor/core 0.0.3 → 0.0.5

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

@@ -1,204 +0,0 @@
-import { useUncontrolled } from "@refraktor/utils";
-import {
-    autoUpdate,
-    flip,
-    FloatingContext,
-    inline,
-    Middleware,
-    offset,
-    Placement,
-    safePolygon,
-    shift,
-    useClick,
-    useDismiss,
-    useFloating,
-    useFocus,
-    useHover,
-    useInteractions,
-    useRole
-} from "@floating-ui/react";
-import { useCallback, useMemo } from "react";
-import {
-    MenuMiddlewares,
-    MenuPositioning,
-    MenuTriggerType
-} from "./menu.types";
-
-interface UseMenuProps {
-    opened?: boolean;
-    defaultOpened?: boolean;
-    onOpenedChange?: (opened: boolean) => void;
-    positioning?: MenuPositioning;
-    middlewares?: MenuMiddlewares;
-    disabled?: boolean;
-    trigger?: MenuTriggerType;
-    closeOnClickOutside?: boolean;
-    closeOnEscape?: boolean;
-    openDelay?: number;
-    closeDelay?: number;
-}
-
-export interface UseMenuReturn {
-    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 useMenu(options: UseMenuProps = {}): UseMenuReturn {
-    const {
-        opened,
-        defaultOpened,
-        onOpenedChange,
-        positioning = {
-            placement: "bottom-start",
-            offset: 4
-        },
-        middlewares = { flip: true, shift: true },
-        disabled = false,
-        trigger = "click",
-        closeOnClickOutside = true,
-        closeOnEscape = true,
-        openDelay = 0,
-        closeDelay = 100
-    } = 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,
-        strategy: "fixed"
-    });
-
-    const click = useClick(floating.context, {
-        enabled: trigger === "click" && !disabled
-    });
-
-    const hover = useHover(floating.context, {
-        enabled: trigger === "hover" && !disabled,
-        handleClose: safePolygon(),
-        delay: {
-            open: openDelay,
-            close: closeDelay
-        }
-    });
-
-    const focus = useFocus(floating.context, {
-        enabled: trigger === "focus" && !disabled
-    });
-
-    const dismiss = useDismiss(floating.context, {
-        outsidePress: closeOnClickOutside,
-        escapeKey: closeOnEscape
-    });
-
-    const role = useRole(floating.context, {
-        role: "menu"
-    });
-
-    const { getReferenceProps, getFloatingProps } = useInteractions([
-        click,
-        hover,
-        focus,
-        dismiss,
-        role
-    ]);
-
-    const open = useCallback(() => {
-        if (!disabled) {
-            setIsOpen(true);
-        }
-    }, [setIsOpen, disabled]);
-
-    const close = useCallback(() => {
-        setIsOpen(false);
-    }, [setIsOpen]);
-
-    const toggle = useCallback(() => {
-        if (!disabled) {
-            setIsOpen(!isOpen);
-        }
-    }, [setIsOpen, isOpen, disabled]);
-
-    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/modal/index.ts

@@ -1,15 +0,0 @@
-export { default as Modal } from "./modal";
-export { ModalRoot } from "./modal-root";
-export { ModalOverlay } from "./modal-overlay";
-export { ModalContent } from "./modal-content";
-export { ModalHeader } from "./modal-header";
-export { ModalClose } from "./modal-close";
-export type {
-    ModalProps,
-    ModalRootProps,
-    ModalOverlayProps,
-    ModalContentProps,
-    ModalHeaderProps,
-    ModalCloseProps,
-    ModalClassNames
-} from "./modal.types";

package/src/components/modal/modal-close/index.ts

@@ -1 +0,0 @@
-export { default as ModalClose } from "./modal-close";

package/src/components/modal/modal-close/modal-close.tsx

@@ -1,43 +0,0 @@
-import { XIcon } from "../../../icons";
-import { useTheme } from "../../../theme";
-import { factory } from "../../../utils";
-import { useModalContext } from "../modal.context";
-import { ModalCloseFactoryPayload } from "../modal.types";
-
-const ModalClose = factory<ModalCloseFactoryPayload>(
-    ({ children, className, onClick, type = "button", ...props }, ref) => {
-        const { cx } = useTheme();
-        const { modal, getStyles } = useModalContext();
-
-        const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-            onClick?.(event);
-
-            if (event.defaultPrevented) {
-                return;
-            }
-
-            modal.close();
-        };
-
-        return (
-            <button
-                ref={ref}
-                type={type}
-                aria-label="Close"
-                className={cx(
-                    "size-6 text-[var(--refraktor-text-secondary)] hover:text-[var(--refraktor-text)] cursor-pointer transition-colors",
-                    getStyles("close"),
-                    className
-                )}
-                onClick={handleClick}
-                {...props}
-            >
-                {children ?? <XIcon />}
-            </button>
-        );
-    }
-);
-
-ModalClose.displayName = "@refraktor/core/Modal.Close";
-
-export default ModalClose;

package/src/components/modal/modal-content/index.ts

@@ -1 +0,0 @@
-export { default as ModalContent } from "./modal-content";

package/src/components/modal/modal-content/modal-content.tsx

@@ -1,72 +0,0 @@
-import { useTheme } from "../../../theme";
-import { factory } from "../../../utils";
-import { Portal } from "../../portal";
-import { Transition } from "../../transition";
-import { useModalContext } from "../modal.context";
-import { ModalContentFactoryPayload } from "../modal.types";
-
-const ModalContent = factory<ModalContentFactoryPayload>(
-    ({ children, className, style, ...props }, ref) => {
-        const { cx, getRadius } = useTheme();
-        const {
-            modal,
-            withinPortal,
-            radius,
-            transitionProps,
-            headerId,
-            contentRef,
-            getStyles
-        } = useModalContext();
-
-        const setRefs = (node: HTMLDivElement | null) => {
-            contentRef.current = node;
-
-            if (typeof ref === "function") {
-                ref(node);
-            } else if (ref) {
-                ref.current = node;
-            }
-        };
-
-        const { className: transitionClassName, ...resolvedTransitionProps } =
-            transitionProps ?? {};
-
-        const content = (
-            <Transition
-                transition="scale"
-                duration={150}
-                mounted={modal.opened}
-                {...resolvedTransitionProps}
-                className={cx(
-                    "fixed inset-0 z-50 grid place-items-center pointer-events-none",
-                    transitionClassName
-                )}
-            >
-                <div
-                    ref={setRefs}
-                    role="dialog"
-                    aria-modal="true"
-                    aria-labelledby={headerId}
-                    data-opened={modal.opened}
-                    style={style}
-                    className={cx(
-                        "pointer-events-auto relative z-50 w-full max-w-md",
-                        "border border-[var(--refraktor-border)] bg-[var(--refraktor-bg)] p-4 text-[var(--refraktor-text)] shadow-md",
-                        getRadius(radius),
-                        getStyles("content"),
-                        className
-                    )}
-                    {...props}
-                >
-                    {children}
-                </div>
-            </Transition>
-        );
-
-        return withinPortal ? <Portal>{content}</Portal> : content;
-    }
-);
-
-ModalContent.displayName = "@refraktor/core/Modal.Content";
-
-export default ModalContent;

package/src/components/modal/modal-header/index.ts

@@ -1 +0,0 @@
-export { default as ModalHeader } from "./modal-header";

package/src/components/modal/modal-header/modal-header.tsx

@@ -1,40 +0,0 @@
-import { useTheme } from "../../../theme";
-import { factory } from "../../../utils";
-import { ModalClose } from "../modal-close";
-import { useModalContext } from "../modal.context";
-import { ModalHeaderFactoryPayload } from "../modal.types";
-
-const ModalHeader = factory<ModalHeaderFactoryPayload>(
-    ({ children, className, id, text, withClose = true, ...props }, ref) => {
-        const { cx } = useTheme();
-        const { headerId, getStyles } = useModalContext();
-        const resolvedId = id ?? headerId;
-
-        return (
-            <div
-                ref={ref}
-                className={cx(
-                    "mb-4 flex items-center justify-between",
-                    getStyles("header"),
-                    className
-                )}
-                {...props}
-            >
-                <div
-                    id={resolvedId}
-                    className="min-w-0 flex-1 text-sm font-semibold leading-5 text-[var(--refraktor-text)]"
-                >
-                    {text ?? children}
-                </div>
-
-                {withClose && (
-                    <ModalClose className="static shrink-0 self-center" />
-                )}
-            </div>
-        );
-    }
-);
-
-ModalHeader.displayName = "@refraktor/core/Modal.Header";
-
-export default ModalHeader;

package/src/components/modal/modal-overlay/index.ts

@@ -1 +0,0 @@
-export { default as ModalOverlay } from "./modal-overlay";

package/src/components/modal/modal-overlay/modal-overlay.tsx

@@ -1,86 +0,0 @@
-import { useTheme } from "../../../theme";
-import { factory } from "../../../utils";
-import { Portal } from "../../portal";
-import { Transition } from "../../transition";
-import { useModalContext } from "../modal.context";
-import { ModalOverlayFactoryPayload } from "../modal.types";
-
-const ModalOverlay = factory<ModalOverlayFactoryPayload>(
-    (
-        {
-            closeOnClick = true,
-            backgroundOpacity = 0.5,
-            blur = 0,
-            className,
-            onMouseDown,
-            style,
-            ...props
-        },
-        ref
-    ) => {
-        const { cx } = useTheme();
-        const {
-            modal,
-            closeOnClickOutside,
-            withinPortal,
-            transitionProps,
-            getStyles
-        } = useModalContext();
-
-        const blurValue = typeof blur === "number" ? `${blur}px` : blur;
-        const backdropFilterValue =
-            blurValue !== "0" && blurValue !== "0px"
-                ? `blur(${blurValue})`
-                : undefined;
-
-        const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
-            onMouseDown?.(event);
-
-            if (
-                event.defaultPrevented ||
-                !closeOnClick ||
-                !closeOnClickOutside
-            ) {
-                return;
-            }
-
-            modal.close();
-        };
-
-        const overlayContent = (
-            <Transition
-                transition="fade"
-                duration={150}
-                mounted={modal.opened}
-                {...transitionProps}
-            >
-                <div
-                    ref={ref}
-                    aria-hidden="true"
-                    className={cx(
-                        "fixed inset-0 z-40",
-                        getStyles("overlay"),
-                        className
-                    )}
-                    style={{
-                        backgroundColor: `rgba(0, 0, 0, ${backgroundOpacity})`,
-                        backdropFilter: backdropFilterValue,
-                        ...style
-                    }}
-                    onMouseDown={handleMouseDown}
-                    {...props}
-                />
-            </Transition>
-        );
-
-        return withinPortal ? (
-            <Portal>{overlayContent}</Portal>
-        ) : (
-            overlayContent
-        );
-    }
-);
-
-ModalOverlay.displayName = "@refraktor/core/Modal.Overlay";
-
-export default ModalOverlay;

package/src/components/modal/modal-root/index.ts

@@ -1 +0,0 @@
-export { default as ModalRoot } from "./modal-root";

package/src/components/modal/modal-root/modal-root.tsx

@@ -1,88 +0,0 @@
-import { useId } from "@refraktor/utils";
-import { useRef } from "react";
-import { useTheme } from "../../../theme";
-import { factory, useClassNames, useProps } from "../../../utils";
-import { ModalProvider } from "../modal.context";
-import { useModal } from "../use-modal";
-import {
-    ModalClassNames,
-    ModalRootFactoryPayload,
-    ModalRootProps
-} from "../modal.types";
-import { RemoveScroll } from "react-remove-scroll";
-
-const defaultProps = {
-    closeOnClickOutside: true,
-    closeOnEscape: true,
-    lockScroll: true,
-    withinPortal: true,
-    radius: "md"
-} satisfies Partial<ModalRootProps>;
-
-const ModalRoot = factory<ModalRootFactoryPayload>((_props, ref) => {
-    const { cx } = useTheme();
-    const {
-        id,
-        children,
-        opened,
-        defaultOpened,
-        onOpenedChange,
-        closeOnClickOutside,
-        closeOnEscape,
-        lockScroll,
-        withinPortal,
-        radius,
-        transitionProps,
-        className,
-        classNames,
-        ...props
-    } = useProps("Modal", defaultProps, _props);
-    const classes = useClassNames("Modal", classNames);
-
-    const _id = useId(id);
-    const headerId = `${_id}-header`;
-    const contentRef = useRef<HTMLDivElement | null>(null);
-
-    const modal = useModal({
-        opened,
-        defaultOpened,
-        onOpenedChange,
-        closeOnClickOutside,
-        closeOnEscape,
-        contentRef
-    });
-
-    const getStyles = (part: keyof ModalClassNames) => classes[part];
-
-    return (
-        <ModalProvider
-            value={{
-                modal,
-                closeOnClickOutside,
-                lockScroll,
-                withinPortal,
-                radius,
-                transitionProps,
-                headerId,
-                contentRef,
-                classNames,
-                getStyles
-            }}
-        >
-            <RemoveScroll enabled={modal.opened && lockScroll}>
-                <div
-                    ref={ref}
-                    id={_id}
-                    className={cx(classes.root, className)}
-                    {...props}
-                >
-                    {children}
-                </div>
-            </RemoveScroll>
-        </ModalProvider>
-    );
-});
-
-ModalRoot.displayName = "@refraktor/core/Modal.Root";
-
-export default ModalRoot;

package/src/components/modal/modal.context.ts

@@ -1,23 +0,0 @@
-import { createSafeContext } from "@refraktor/utils";
-import { RefraktorRadius } from "../../theme";
-import { TransitionProps } from "../transition";
-import { ModalClassNames } from "./modal.types";
-import { UseModalReturn } from "./use-modal";
-
-export interface ModalContextValue {
-    modal: UseModalReturn;
-    closeOnClickOutside: boolean;
-    lockScroll: boolean;
-    withinPortal: boolean;
-    radius: RefraktorRadius;
-    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
-    headerId: string;
-    contentRef: React.MutableRefObject<HTMLDivElement | null>;
-    classNames?: ModalClassNames;
-    getStyles: (part: keyof ModalClassNames) => string | undefined;
-}
-
-export const [ModalProvider, useModalContext] =
-    createSafeContext<ModalContextValue>(
-        "Modal context was not found in tree. Make sure Modal subcomponents are wrapped with Modal or ModalRoot."
-    );