@refraktor/core 0.0.4 → 0.0.5

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

@@ -1,135 +0,0 @@
-import {
-    FloatingFocusManager,
-    FloatingPortal
-} from "@floating-ui/react";
-import { useTheme } from "../../../theme";
-import { factory } from "../../../utils";
-import { Transition, TransitionProps } from "../../transition";
-import { useDrawerContext } from "../drawer.context";
-import { DrawerContentFactoryPayload, DrawerPosition } from "../drawer.types";
-import { getSizeStyles } from "../drawer.styles";
-
-const positionClasses: Record<DrawerPosition, string> = {
-    left: "left-0 top-0 h-full max-h-full",
-    right: "right-0 top-0 h-full max-h-full",
-    top: "left-0 top-0 w-full max-w-full",
-    bottom: "bottom-0 left-0 w-full max-w-full"
-};
-
-const transitionsByPosition: Record<
-    DrawerPosition,
-    TransitionProps["transition"]
-> = {
-    left: "slide-right",
-    right: "slide-left",
-    top: "slide-down",
-    bottom: "slide-up"
-};
-
-const DrawerContent = factory<DrawerContentFactoryPayload>(
-    ({ children, className, style, ...props }, ref) => {
-        const { cx, getRadius } = useTheme();
-        const {
-            drawer,
-            withinPortal,
-            radius,
-            position,
-            size,
-            trapFocus,
-            returnFocus,
-            transitionProps,
-            headerId,
-            getStyles
-        } = useDrawerContext();
-
-        const setRefs = (node: HTMLDivElement | null) => {
-            drawer.refs.setFloating(node);
-
-            if (typeof ref === "function") {
-                ref(node);
-            } else if (ref) {
-                ref.current = node;
-            }
-        };
-
-        const { className: transitionClassName, ...resolvedTransitionProps } =
-            transitionProps ?? {};
-
-        const sizeStyles = getSizeStyles(position, size);
-
-        const content = (
-            <Transition
-                transition={transitionsByPosition[position]}
-                duration={200}
-                mounted={drawer.opened}
-                {...resolvedTransitionProps}
-                className={cx(
-                    "fixed inset-0 z-50 pointer-events-none",
-                    transitionClassName
-                )}
-            >
-                {drawer.opened ? (
-                    <FloatingFocusManager
-                        context={drawer.context}
-                        modal={trapFocus}
-                        returnFocus={returnFocus}
-                        outsideElementsInert={false}
-                    >
-                        <div
-                            ref={setRefs}
-                            aria-labelledby={headerId}
-                            data-opened={drawer.opened}
-                            data-position={position}
-                            style={{
-                                ...sizeStyles,
-                                ...style
-                            }}
-                            className={cx(
-                                "pointer-events-auto fixed z-50 border border-[var(--refraktor-border)] bg-[var(--refraktor-bg)] p-4 text-[var(--refraktor-text)] shadow-md",
-                                positionClasses[position],
-                                getRadius(radius),
-                                getStyles("content"),
-                                className
-                            )}
-                            {...drawer.getFloatingProps()}
-                            {...props}
-                        >
-                            {children}
-                        </div>
-                    </FloatingFocusManager>
-                ) : (
-                    <div
-                        ref={setRefs}
-                        aria-labelledby={headerId}
-                        data-opened={drawer.opened}
-                        data-position={position}
-                        style={{
-                            ...sizeStyles,
-                            ...style
-                        }}
-                        className={cx(
-                            "pointer-events-auto fixed z-50 border border-[var(--refraktor-border)] bg-[var(--refraktor-bg)] p-4 text-[var(--refraktor-text)] shadow-md",
-                            positionClasses[position],
-                            getRadius(radius),
-                            getStyles("content"),
-                            className
-                        )}
-                        {...props}
-                    >
-                        {children}
-                    </div>
-                )}
-            </Transition>
-        );
-
-        return withinPortal ? (
-            <FloatingPortal>{content}</FloatingPortal>
-        ) : (
-            content
-        );
-    }
-);
-
-DrawerContent.displayName = "@refraktor/core/Drawer.Content";
-
-export default DrawerContent;

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

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

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

@@ -1,40 +0,0 @@
-import { useTheme } from "../../../theme";
-import { factory } from "../../../utils";
-import { DrawerClose } from "../drawer-close";
-import { useDrawerContext } from "../drawer.context";
-import { DrawerHeaderFactoryPayload } from "../drawer.types";
-
-const DrawerHeader = factory<DrawerHeaderFactoryPayload>(
-    ({ children, className, id, text, withClose = true, ...props }, ref) => {
-        const { cx } = useTheme();
-        const { headerId, getStyles } = useDrawerContext();
-        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 && (
-                    <DrawerClose className="static shrink-0 self-center" />
-                )}
-            </div>
-        );
-    }
-);
-
-DrawerHeader.displayName = "@refraktor/core/Drawer.Header";
-
-export default DrawerHeader;

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

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

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

@@ -1,87 +0,0 @@
-import { FloatingOverlay, FloatingPortal } from "@floating-ui/react";
-import { useTheme } from "../../../theme";
-import { factory } from "../../../utils";
-import { Transition } from "../../transition";
-import { useDrawerContext } from "../drawer.context";
-import { DrawerOverlayFactoryPayload } from "../drawer.types";
-
-const DrawerOverlay = factory<DrawerOverlayFactoryPayload>(
-    (
-        {
-            closeOnClick = true,
-            backgroundOpacity = 0.5,
-            blur = 0,
-            className,
-            onMouseDown,
-            style,
-            ...props
-        },
-        ref
-    ) => {
-        const { cx } = useTheme();
-        const {
-            drawer,
-            closeOnClickOutside,
-            lockScroll,
-            withinPortal,
-            transitionProps,
-            getStyles
-        } = useDrawerContext();
-
-        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;
-            }
-
-            drawer.close();
-        };
-
-        const overlayContent = (
-            <Transition
-                transition="fade"
-                duration={150}
-                mounted={drawer.opened}
-                {...transitionProps}
-            >
-                <FloatingOverlay
-                    lockScroll={lockScroll}
-                    ref={ref}
-                    className={cx(
-                        "z-40",
-                        getStyles("overlay"),
-                        className
-                    )}
-                    style={{
-                        backgroundColor: `rgba(0, 0, 0, ${backgroundOpacity})`,
-                        backdropFilter: backdropFilterValue,
-                        ...style
-                    }}
-                    onMouseDown={handleMouseDown}
-                    {...props}
-                />
-            </Transition>
-        );
-
-        return withinPortal ? (
-            <FloatingPortal>{overlayContent}</FloatingPortal>
-        ) : (
-            overlayContent
-        );
-    }
-);
-
-DrawerOverlay.displayName = "@refraktor/core/Drawer.Overlay";
-
-export default DrawerOverlay;

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

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

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

@@ -1,93 +0,0 @@
-import { useId } from "@refraktor/utils";
-import { useTheme } from "../../../theme";
-import { factory, useClassNames, useProps } from "../../../utils";
-import { DrawerProvider } from "../drawer.context";
-import { useDrawer } from "../use-drawer";
-import {
-    DrawerClassNames,
-    DrawerRootFactoryPayload,
-    DrawerRootProps
-} from "../drawer.types";
-
-const defaultProps = {
-    closeOnClickOutside: true,
-    closeOnEscape: true,
-    lockScroll: true,
-    withinPortal: true,
-    radius: "none",
-    position: "right",
-    size: "md",
-    trapFocus: true,
-    returnFocus: true
-} satisfies Partial<DrawerRootProps>;
-
-const DrawerRoot = factory<DrawerRootFactoryPayload>((_props, ref) => {
-    const { cx } = useTheme();
-    const {
-        id,
-        children,
-        opened,
-        defaultOpened,
-        onOpenedChange,
-        closeOnClickOutside,
-        closeOnEscape,
-        lockScroll,
-        withinPortal,
-        radius,
-        position,
-        size,
-        trapFocus,
-        returnFocus,
-        transitionProps,
-        className,
-        classNames,
-        ...props
-    } = useProps("Drawer", defaultProps, _props);
-    const classes = useClassNames("Drawer", classNames);
-
-    const _id = useId(id);
-    const headerId = `${_id}-header`;
-
-    const drawer = useDrawer({
-        opened,
-        defaultOpened,
-        onOpenedChange,
-        closeOnClickOutside,
-        closeOnEscape
-    });
-
-    const getStyles = (part: keyof DrawerClassNames) => classes[part];
-
-    return (
-        <DrawerProvider
-            value={{
-                drawer,
-                closeOnClickOutside,
-                lockScroll,
-                withinPortal,
-                radius,
-                position,
-                size,
-                trapFocus,
-                returnFocus,
-                transitionProps,
-                headerId,
-                classNames,
-                getStyles
-            }}
-        >
-            <div
-                ref={ref}
-                id={_id}
-                className={cx(classes.root, className)}
-                {...props}
-            >
-                {children}
-            </div>
-        </DrawerProvider>
-    );
-});
-
-DrawerRoot.displayName = "@refraktor/core/Drawer.Root";
-
-export default DrawerRoot;

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

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

package/src/components/drawer/drawer.context.ts

@@ -1,26 +0,0 @@
-import { createSafeContext } from "@refraktor/utils";
-import { RefraktorRadius, RefraktorSize } from "../../theme";
-import { TransitionProps } from "../transition";
-import { DrawerClassNames, DrawerPosition } from "./drawer.types";
-import { UseDrawerReturn } from "./use-drawer";
-
-export interface DrawerContextValue {
-    drawer: UseDrawerReturn;
-    closeOnClickOutside: boolean;
-    lockScroll: boolean;
-    withinPortal: boolean;
-    radius: RefraktorRadius;
-    position: DrawerPosition;
-    size: RefraktorSize;
-    trapFocus: boolean;
-    returnFocus: boolean;
-    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
-    headerId: string;
-    classNames?: DrawerClassNames;
-    getStyles: (part: keyof DrawerClassNames) => string | undefined;
-}
-
-export const [DrawerProvider, useDrawerContext] =
-    createSafeContext<DrawerContextValue>(
-        "Drawer context was not found in tree. Make sure Drawer subcomponents are wrapped with Drawer or DrawerRoot."
-    );

package/src/components/drawer/drawer.styles.ts

@@ -1,32 +0,0 @@
-import { CSSProperties } from "react";
-import { RefraktorSize } from "../../theme";
-import { DrawerPosition } from "./drawer.types";
-
-const sizes: Record<RefraktorSize, string> = {
-    xs: "16rem",
-    sm: "20rem",
-    md: "24rem",
-    lg: "30rem",
-    xl: "36rem"
-};
-
-export const getSize = (size: RefraktorSize = "md") => sizes[size];
-
-export function getSizeStyles(
-    position: DrawerPosition,
-    size: RefraktorSize = "md"
-): CSSProperties {
-    const resolvedSize = getSize(size);
-
-    if (position === "left" || position === "right") {
-        return {
-            width: resolvedSize,
-            maxWidth: "100vw"
-        };
-    }
-
-    return {
-        height: resolvedSize,
-        maxHeight: "100vh"
-    };
-}