@refraktor/core 0.0.1 → 0.0.3

package/build/components/drawer/drawer.context.d.ts

@@ -0,0 +1,23 @@
+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;
+    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
+    headerId: string;
+    contentRef: React.MutableRefObject<HTMLDivElement | null>;
+    classNames?: DrawerClassNames;
+    getStyles: (part: keyof DrawerClassNames) => string | undefined;
+}
+export declare const DrawerProvider: ({ children, value }: {
+    children: React.ReactNode;
+    value: DrawerContextValue;
+}) => import("react/jsx-runtime").JSX.Element, useDrawerContext: () => DrawerContextValue;
+//# sourceMappingURL=drawer.context.d.ts.map

package/build/components/drawer/drawer.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.context.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/drawer.context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,MAAM,WAAW,kBAAkB;IAC/B,MAAM,EAAE,eAAe,CAAC;IACxB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,EAAE,cAAc,CAAC;IACzB,IAAI,EAAE,aAAa,CAAC;IACpB,eAAe,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC;IAChE,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC1D,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,gBAAgB,KAAK,MAAM,GAAG,SAAS,CAAC;CACnE;AAED,eAAO,MAAO,cAAc;;;+CAAE,gBAAgB,0BAGzC,CAAC"}

package/build/components/drawer/drawer.context.js

@@ -0,0 +1,2 @@
+import { createSafeContext } from "@refraktor/utils";
+export const [DrawerProvider, useDrawerContext] = createSafeContext("Drawer context was not found in tree. Make sure Drawer subcomponents are wrapped with Drawer or DrawerRoot.");

package/build/components/drawer/drawer.d.ts

@@ -0,0 +1,4 @@
+import { DrawerFactoryPayload } from "./drawer.types";
+declare const Drawer: import("../..").RefraktorComponent<DrawerFactoryPayload>;
+export default Drawer;
+//# sourceMappingURL=drawer.d.ts.map

package/build/components/drawer/drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"AAUA,OAAO,EAEH,oBAAoB,EAEvB,MAAM,gBAAgB,CAAC;AAExB,QAAA,MAAM,MAAM,0DAEV,CAAC;AAWH,eAAe,MAAM,CAAC"}

package/build/components/drawer/drawer.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createClassNamesConfig, createComponentConfig, factory } from "../../utils";
+import { DrawerClose } from "./drawer-close";
+import { DrawerContent } from "./drawer-content";
+import { DrawerHeader } from "./drawer-header";
+import { DrawerOverlay } from "./drawer-overlay";
+import { DrawerRoot } from "./drawer-root";
+const Drawer = factory((props, ref) => {
+    return _jsx(DrawerRoot, { ...props, ref: ref });
+});
+Drawer.displayName = "@refraktor/core/Drawer";
+Drawer.configure = createComponentConfig();
+Drawer.classNames = createClassNamesConfig();
+Drawer.Root = DrawerRoot;
+Drawer.Overlay = DrawerOverlay;
+Drawer.Content = DrawerContent;
+Drawer.Header = DrawerHeader;
+Drawer.Close = DrawerClose;
+export default Drawer;

package/build/components/drawer/drawer.styles.d.ts

@@ -0,0 +1,6 @@
+import { CSSProperties } from "react";
+import { RefraktorSize } from "../../theme";
+import { DrawerPosition } from "./drawer.types";
+export declare const getSize: (size?: RefraktorSize) => string;
+export declare function getSizeStyles(position: DrawerPosition, size?: RefraktorSize): CSSProperties;
+//# sourceMappingURL=drawer.styles.d.ts.map

package/build/components/drawer/drawer.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/drawer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAUhD,eAAO,MAAM,OAAO,GAAI,OAAM,aAAoB,WAAgB,CAAC;AAEnE,wBAAgB,aAAa,CACzB,QAAQ,EAAE,cAAc,EACxB,IAAI,GAAE,aAAoB,GAC3B,aAAa,CAcf"}

package/build/components/drawer/drawer.styles.js

@@ -0,0 +1,21 @@
+const sizes = {
+    xs: "16rem",
+    sm: "20rem",
+    md: "24rem",
+    lg: "30rem",
+    xl: "36rem"
+};
+export const getSize = (size = "md") => sizes[size];
+export function getSizeStyles(position, size = "md") {
+    const resolvedSize = getSize(size);
+    if (position === "left" || position === "right") {
+        return {
+            width: resolvedSize,
+            maxWidth: "100vw"
+        };
+    }
+    return {
+        height: resolvedSize,
+        maxHeight: "100vh"
+    };
+}

package/build/components/drawer/drawer.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=drawer.test.d.ts.map

package/build/components/drawer/drawer.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.test.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/drawer.test.tsx"],"names":[],"mappings":""}

package/build/components/drawer/drawer.test.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, userEvent, waitFor } from "../../vitest";
+import Drawer from "./drawer";
+import { DrawerContent } from "./drawer-content";
+import { DrawerOverlay } from "./drawer-overlay";
+import { DrawerRoot } from "./drawer-root";
+describe("@refraktor/core/Drawer", () => {
+    const transitionProps = {
+        duration: 0,
+        immediate: true
+    };
+    it("renders with compound subcomponents and closes with header close button", async () => {
+        const user = userEvent.setup();
+        await render(_jsxs(Drawer, { defaultOpened: true, transitionProps: transitionProps, children: [_jsx(Drawer.Overlay, {}), _jsxs(Drawer.Content, { children: [_jsx(Drawer.Header, { text: "Edit profile" }), _jsx("p", { children: "Drawer body" })] })] }));
+        expect(await screen.findByRole("dialog", { name: "Edit profile" })).toBeInTheDocument();
+        await user.click(screen.getByRole("button", { name: "Close" }));
+        await waitFor(() => {
+            expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+        });
+    });
+    it("calls onOpenedChange when clicking overlay in controlled mode", async () => {
+        const user = userEvent.setup();
+        const onOpenedChange = vi.fn();
+        await render(_jsxs(Drawer, { opened: true, onOpenedChange: onOpenedChange, transitionProps: transitionProps, children: [_jsx(Drawer.Overlay, { "data-testid": "overlay" }), _jsx(Drawer.Content, { children: "Controlled drawer" })] }));
+        await user.click(await screen.findByTestId("overlay"));
+        expect(onOpenedChange).toHaveBeenCalledWith(false);
+    });
+    it("closes on Escape key", async () => {
+        const user = userEvent.setup();
+        await render(_jsx(Drawer, { defaultOpened: true, transitionProps: transitionProps, children: _jsx(Drawer.Content, { children: "Keyboard close" }) }));
+        await screen.findByRole("dialog");
+        await user.keyboard("{Escape}");
+        await waitFor(() => {
+            expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+        });
+    });
+    it("supports standalone subcomponents with DrawerRoot", async () => {
+        await render(_jsxs(DrawerRoot, { defaultOpened: true, transitionProps: transitionProps, children: [_jsx(DrawerOverlay, {}), _jsx(DrawerContent, { children: "Standalone composition" })] }));
+        expect(await screen.findByRole("dialog")).toBeInTheDocument();
+    });
+    it("applies custom overlay background opacity and blur", async () => {
+        await render(_jsxs(Drawer, { defaultOpened: true, transitionProps: transitionProps, children: [_jsx(Drawer.Overlay, { "data-testid": "overlay", backgroundOpacity: 0.4, blur: 6 }), _jsx(Drawer.Content, { children: "Styled overlay" })] }));
+        const overlay = await screen.findByTestId("overlay");
+        expect(overlay).toHaveStyle({
+            backgroundColor: "rgba(0, 0, 0, 0.4)",
+            backdropFilter: "blur(6px)"
+        });
+    });
+    it("locks and unlocks body scroll when enabled", async () => {
+        const user = userEvent.setup();
+        await render(_jsx(Drawer, { defaultOpened: true, lockScroll: true, transitionProps: transitionProps, children: _jsxs(Drawer.Content, { children: ["Scroll locked", _jsx(Drawer.Close, {})] }) }));
+        await waitFor(() => {
+            expect(document.body).toHaveAttribute("data-scroll-locked");
+        });
+        await user.click(screen.getByRole("button", { name: "Close" }));
+        await waitFor(() => {
+            expect(document.body).not.toHaveAttribute("data-scroll-locked");
+        });
+    });
+    it("supports different positions and predefined sizes", async () => {
+        await render(_jsxs(_Fragment, { children: [_jsx(Drawer, { defaultOpened: true, position: "left", size: "sm", transitionProps: transitionProps, children: _jsx(Drawer.Content, { "data-testid": "left-content", children: "Left" }) }), _jsx(Drawer, { defaultOpened: true, position: "bottom", size: "xl", transitionProps: transitionProps, children: _jsx(Drawer.Content, { "data-testid": "bottom-content", children: "Bottom" }) })] }));
+        const leftContent = await screen.findByTestId("left-content");
+        const bottomContent = await screen.findByTestId("bottom-content");
+        expect(leftContent).toHaveAttribute("data-position", "left");
+        expect(leftContent).toHaveStyle({ width: "20rem" });
+        expect(bottomContent).toHaveAttribute("data-position", "bottom");
+        expect(bottomContent).toHaveStyle({ height: "36rem" });
+    });
+});

package/build/components/drawer/drawer.types.d.ts

@@ -0,0 +1,116 @@
+import { ComponentPropsWithoutRef, MouseEvent, ReactNode } from "react";
+import { createClassNamesConfig, createComponentConfig, FactoryPayload } from "../../utils";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import { TransitionProps } from "../transition";
+import { DrawerRoot } from "./drawer-root";
+import { DrawerOverlay } from "./drawer-overlay";
+import { DrawerContent } from "./drawer-content";
+import { DrawerHeader } from "./drawer-header";
+import { DrawerClose } from "./drawer-close";
+export type DrawerPosition = "left" | "right" | "top" | "bottom";
+export type DrawerClassNames = {
+    root?: string;
+    overlay?: string;
+    content?: string;
+    header?: string;
+    close?: string;
+};
+export interface DrawerProps extends ComponentPropsWithoutRef<"div"> {
+    /** Children containing drawer subcomponents */
+    children: ReactNode;
+    /** State of the drawer (controlled) */
+    opened?: boolean;
+    /** Initial state of the drawer (uncontrolled) */
+    defaultOpened?: boolean;
+    /** Callback called when drawer state changes */
+    onOpenedChange?: (opened: boolean) => void;
+    /** Whether to close drawer on overlay/outside click @default `true` */
+    closeOnClickOutside?: boolean;
+    /** Whether to close drawer on Escape key @default `true` */
+    closeOnEscape?: boolean;
+    /** Whether to lock body scroll while opened @default `true` */
+    lockScroll?: boolean;
+    /** Whether to render overlay/content inside portal @default `true` */
+    withinPortal?: boolean;
+    /** Radius for drawer content @default `none` */
+    radius?: RefraktorRadius;
+    /** Side where drawer appears @default `right` */
+    position?: DrawerPosition;
+    /** Drawer size scale (width for left/right, height for top/bottom) @default `md` */
+    size?: RefraktorSize;
+    /** Transition props for overlay/content, 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?: DrawerClassNames;
+}
+export type DrawerRootProps = DrawerProps;
+export interface DrawerOverlayProps extends ComponentPropsWithoutRef<"div"> {
+    /** Whether clicking the overlay closes drawer @default `true` */
+    closeOnClick?: boolean;
+    /** Overlay background opacity @default `0.5` */
+    backgroundOpacity?: number;
+    /** Backdrop blur amount in px (or any CSS length) @default `0` */
+    blur?: number | string;
+    /** Used for editing root class name */
+    className?: string;
+}
+export interface DrawerContentProps extends ComponentPropsWithoutRef<"div"> {
+    /** Drawer body content */
+    children: ReactNode;
+    /** Used for editing root class name */
+    className?: string;
+}
+export interface DrawerHeaderProps extends ComponentPropsWithoutRef<"div"> {
+    /** Header content */
+    children?: ReactNode;
+    /** Shorthand header text */
+    text?: ReactNode;
+    /** Whether to show close button inside header @default `true` */
+    withClose?: boolean;
+    /** Used for editing root class name */
+    className?: string;
+}
+export interface DrawerCloseProps extends Omit<ComponentPropsWithoutRef<"button">, "onClick"> {
+    /** Optional close content (defaults to `x`) */
+    children?: ReactNode;
+    /** Click callback fired before closing */
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /** Used for editing root class name */
+    className?: string;
+}
+export interface DrawerFactoryPayload extends FactoryPayload {
+    props: DrawerProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<DrawerProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<DrawerClassNames>>;
+        Root: typeof DrawerRoot;
+        Overlay: typeof DrawerOverlay;
+        Content: typeof DrawerContent;
+        Header: typeof DrawerHeader;
+        Close: typeof DrawerClose;
+    };
+}
+export interface DrawerRootFactoryPayload extends FactoryPayload {
+    props: DrawerRootProps;
+    ref: HTMLDivElement;
+}
+export interface DrawerOverlayFactoryPayload extends FactoryPayload {
+    props: DrawerOverlayProps;
+    ref: HTMLDivElement;
+}
+export interface DrawerContentFactoryPayload extends FactoryPayload {
+    props: DrawerContentProps;
+    ref: HTMLDivElement;
+}
+export interface DrawerHeaderFactoryPayload extends FactoryPayload {
+    props: DrawerHeaderProps;
+    ref: HTMLDivElement;
+}
+export interface DrawerCloseFactoryPayload extends FactoryPayload {
+    props: DrawerCloseProps;
+    ref: HTMLButtonElement;
+}
+//# sourceMappingURL=drawer.types.d.ts.map

package/build/components/drawer/drawer.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.types.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/drawer.types.ts"],"names":[],"mappings":"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"}

package/build/components/drawer/drawer.types.js

@@ -0,0 +1 @@
+export {};

package/build/components/drawer/index.d.ts

@@ -0,0 +1,8 @@
+export { default as Drawer } from "./drawer";
+export { DrawerRoot } from "./drawer-root";
+export { DrawerOverlay } from "./drawer-overlay";
+export { DrawerContent } from "./drawer-content";
+export { DrawerHeader } from "./drawer-header";
+export { DrawerClose } from "./drawer-close";
+export type { DrawerProps, DrawerRootProps, DrawerOverlayProps, DrawerContentProps, DrawerHeaderProps, DrawerCloseProps, DrawerClassNames, DrawerPosition } from "./drawer.types";
+//# sourceMappingURL=index.d.ts.map

package/build/components/drawer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,YAAY,EACR,WAAW,EACX,eAAe,EACf,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACjB,MAAM,gBAAgB,CAAC"}

package/build/components/drawer/index.js

@@ -0,0 +1,6 @@
+export { default as Drawer } from "./drawer";
+export { DrawerRoot } from "./drawer-root";
+export { DrawerOverlay } from "./drawer-overlay";
+export { DrawerContent } from "./drawer-content";
+export { DrawerHeader } from "./drawer-header";
+export { DrawerClose } from "./drawer-close";

package/build/components/drawer/use-drawer.d.ts

@@ -0,0 +1,17 @@
+interface UseDrawerProps {
+    opened?: boolean;
+    defaultOpened?: boolean;
+    onOpenedChange?: (opened: boolean) => void;
+    closeOnClickOutside?: boolean;
+    closeOnEscape?: boolean;
+    contentRef: React.MutableRefObject<HTMLElement | null>;
+}
+export interface UseDrawerReturn {
+    opened: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+}
+export declare function useDrawer(options: UseDrawerProps): UseDrawerReturn;
+export {};
+//# sourceMappingURL=use-drawer.d.ts.map

package/build/components/drawer/use-drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-drawer.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/use-drawer.ts"],"names":[],"mappings":"AAGA,UAAU,cAAc;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC1D;AAED,MAAM,WAAW,eAAe;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,SAAS,CAAC,OAAO,EAAE,cAAc,GAAG,eAAe,CAiFlE"}

package/build/components/drawer/use-drawer.js

@@ -0,0 +1,61 @@
+import { useUncontrolled } from "@refraktor/utils";
+import { useCallback, useEffect } from "react";
+export function useDrawer(options) {
+    const { opened, defaultOpened, onOpenedChange, closeOnClickOutside = true, closeOnEscape = true, contentRef } = options;
+    const [isOpen, setIsOpen] = useUncontrolled({
+        value: opened,
+        defaultValue: defaultOpened,
+        finalValue: false,
+        onChange: onOpenedChange
+    });
+    const open = useCallback(() => {
+        setIsOpen(true);
+    }, [setIsOpen]);
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, [setIsOpen]);
+    const toggle = useCallback(() => {
+        setIsOpen(!isOpen);
+    }, [isOpen, setIsOpen]);
+    useEffect(() => {
+        if (!isOpen || !closeOnEscape) {
+            return;
+        }
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape") {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [closeOnEscape, isOpen, setIsOpen]);
+    useEffect(() => {
+        if (!isOpen || !closeOnClickOutside) {
+            return;
+        }
+        const handlePointerDown = (event) => {
+            const target = event.target;
+            if (!(target instanceof Node)) {
+                return;
+            }
+            if (contentRef.current?.contains(target)) {
+                return;
+            }
+            setIsOpen(false);
+        };
+        document.addEventListener("mousedown", handlePointerDown);
+        document.addEventListener("touchstart", handlePointerDown);
+        return () => {
+            document.removeEventListener("mousedown", handlePointerDown);
+            document.removeEventListener("touchstart", handlePointerDown);
+        };
+    }, [closeOnClickOutside, contentRef, isOpen, setIsOpen]);
+    return {
+        opened: isOpen,
+        open,
+        close,
+        toggle
+    };
+}

package/build/components/index.d.ts

@@ -1,9 +1,11 @@
 export * from "./accordion";
 export * from "./avatar";
 export * from "./badge";
+export * from "./breadcrumbs";
 export * from "./button";
 export * from "./checkbox";
 export * from "./color-swatch";
+export * from "./drawer";
 export * from "./input";
 export * from "./loader";
 export * from "./modal";
@@ -16,8 +18,10 @@ export * from "./progress";
 export * from "./progress-circle";
 export * from "./radio";
 export * from "./select";
+export * from "./segmented-control";
 export * from "./slider";
 export * from "./switch";
+export * from "./table";
 export * from "./tabs";
 export * from "./timeline";
 export * from "./textarea";

package/build/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}

package/build/components/index.js

@@ -1,9 +1,11 @@
 export * from "./accordion";
 export * from "./avatar";
 export * from "./badge";
+export * from "./breadcrumbs";
 export * from "./button";
 export * from "./checkbox";
 export * from "./color-swatch";
+export * from "./drawer";
 export * from "./input";
 export * from "./loader";
 export * from "./modal";
@@ -16,8 +18,10 @@ export * from "./progress";
 export * from "./progress-circle";
 export * from "./radio";
 export * from "./select";
+export * from "./segmented-control";
 export * from "./slider";
 export * from "./switch";
+export * from "./table";
 export * from "./tabs";
 export * from "./timeline";
 export * from "./textarea";

package/build/components/menu/menu-dropdown/menu-dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu-dropdown/menu-dropdown.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAgB3D,QAAA,MAAM,YAAY,mEAmMjB,CAAC;AAIF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"menu-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu-dropdown/menu-dropdown.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAgB3D,QAAA,MAAM,YAAY,mEAoMjB,CAAC;AAIF,eAAe,YAAY,CAAC"}

package/build/components/menu/menu-dropdown/menu-dropdown.js

@@ -110,14 +110,15 @@ const MenuDropdown = factory(({ children, className, style, ...props }, ref) =>
             }
         }
     };
-    const dropdownContent = (_jsx(Transition, { transition: "fade", duration: 150, mounted: level.menu.opened, ...transitionProps, children: _jsx("div", { ref: useMergeRefs([ref, level.menu.refs.setFloating]), role: "menu", tabIndex: -1, style: {
+    const dropdownContent = (_jsx(Transition, { transition: "fade", duration: 150, mounted: level.menu.opened, style: { position: "relative", zIndex: 1000 }, ...transitionProps, children: _jsx("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: children }) }));
-    const wrappedContent = level.menu.opened ? (_jsx(FloatingFocusManager, { context: level.menu.context, modal: false, initialFocus: -1, children: dropdownContent })) : (dropdownContent);
+    const wrappedContent = (_jsx(FloatingFocusManager, { context: level.menu.context, modal: false, initialFocus: -1, disabled: !level.menu.opened, children: dropdownContent }));
     return withinPortal ? (_jsx(FloatingPortal, { children: wrappedContent })) : (wrappedContent);
 });
 MenuDropdown.displayName = "@refraktor/core/Menu.Dropdown";

package/build/components/menu/menu-sub-dropdown/menu-sub-dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-sub-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu-sub-dropdown/menu-sub-dropdown.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,6BAA6B,EAAE,MAAM,eAAe,CAAC;AAiB9D,QAAA,MAAM,eAAe,sEAkMpB,CAAC;AAIF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"menu-sub-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu-sub-dropdown/menu-sub-dropdown.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,6BAA6B,EAAE,MAAM,eAAe,CAAC;AAiB9D,QAAA,MAAM,eAAe,sEAoMpB,CAAC;AAIF,eAAe,eAAe,CAAC"}

package/build/components/menu/menu-sub-dropdown/menu-sub-dropdown.js

@@ -104,11 +104,12 @@ const MenuSubDropdown = factory(({ children, className, style, ...props }, ref)
             }
         }
     };
-    const dropdownContent = (_jsx(Transition, { transition: "fade", duration: 150, mounted: submenuLevel.menu.opened, ...transitionProps, children: _jsx(MenuLevelProvider, { value: submenuLevel, children: _jsx("div", { ref: useMergeRefs([
+    const dropdownContent = (_jsx(Transition, { transition: "fade", duration: 150, mounted: submenuLevel.menu.opened, style: { position: "relative", zIndex: 1000 }, ...transitionProps, children: _jsx(MenuLevelProvider, { value: submenuLevel, children: _jsx("div", { ref: useMergeRefs([
                     ref,
                     submenuLevel.menu.refs.setFloating
                 ]), role: "menu", tabIndex: -1, style: {
                     ...submenuLevel.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"), getStyles("subDropdown"), className), ...submenuLevel.menu.getFloatingProps({

package/build/components/menu/use-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-menu.d.ts","sourceRoot":"","sources":["../../../src/components/menu/use-menu.ts"],"names":[],"mappings":"AACA,OAAO,EAGH,eAAe,EAIf,SAAS,EAUZ,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACH,eAAe,EACf,eAAe,EACf,eAAe,EAClB,MAAM,cAAc,CAAC;AAEtB,UAAU,YAAY;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,aAAa;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,eAAe,CAAC;IACzB,IAAI,EAAE;QACF,YAAY,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;QACjD,WAAW,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;QAChD,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;QACtD,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;KACxD,CAAC;IACF,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,iBAAiB,EAAE,CACf,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAC5C,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7B,gBAAgB,EAAE,CACd,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAC5C,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7B,SAAS,EAAE,SAAS,CAAC;CACxB;AAED,wBAAgB,OAAO,CAAC,OAAO,GAAE,YAAiB,GAAG,aAAa,CA4IjE"}
+{"version":3,"file":"use-menu.d.ts","sourceRoot":"","sources":["../../../src/components/menu/use-menu.ts"],"names":[],"mappings":"AACA,OAAO,EAGH,eAAe,EAIf,SAAS,EAUZ,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACH,eAAe,EACf,eAAe,EACf,eAAe,EAClB,MAAM,cAAc,CAAC;AAEtB,UAAU,YAAY;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,aAAa;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,eAAe,CAAC;IACzB,IAAI,EAAE;QACF,YAAY,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;QACjD,WAAW,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;QAChD,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;QACtD,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;KACxD,CAAC;IACF,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,iBAAiB,EAAE,CACf,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAC5C,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7B,gBAAgB,EAAE,CACd,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAC5C,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7B,SAAS,EAAE,SAAS,CAAC;CACxB;AAED,wBAAgB,OAAO,CAAC,OAAO,GAAE,YAAiB,GAAG,aAAa,CA6IjE"}

package/build/components/menu/use-menu.js

@@ -37,7 +37,8 @@ export function useMenu(options = {}) {
         open: isOpen,
         onOpenChange: setIsOpen,
         middleware,
-        whileElementsMounted: autoUpdate
+        whileElementsMounted: autoUpdate,
+        strategy: "fixed"
     });
     const click = useClick(floating.context, {
         enabled: trigger === "click" && !disabled

package/build/components/modal/modal-close/modal-close.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-close.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modal-close/modal-close.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAC;AAE1D,QAAA,MAAM,UAAU,iEAoCf,CAAC;AAIF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"modal-close.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modal-close/modal-close.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAC;AAE1D,QAAA,MAAM,UAAU,iEAgCf,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/build/components/modal/modal-close/modal-close.js

@@ -13,7 +13,7 @@ const ModalClose = factory(({ children, className, onClick, type = "button", ...
         }
         modal.close();
     };
-    return (_jsx("button", { ref: ref, type: type, "aria-label": "Close", className: cx("absolute right-4 top-4 inline-flex h-9 w-9 items-center justify-center rounded-full cursor-pointer border border-transparent", "text-base text-[var(--refraktor-text-secondary)] transition-all", "hover:border-[var(--refraktor-border)] hover:bg-[var(--refraktor-bg-subtle)] hover:text-[var(--refraktor-text)]", "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--refraktor-primary)]", "active:scale-95", getStyles("close"), className), onClick: handleClick, ...props, children: children ?? _jsx(XIcon, {}) }));
+    return (_jsx("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: children ?? _jsx(XIcon, {}) }));
 });
 ModalClose.displayName = "@refraktor/core/Modal.Close";
 export default ModalClose;

package/build/components/modal/modal-content/modal-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-content.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modal-content/modal-content.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,CAAC;AAE5D,QAAA,MAAM,YAAY,mEA6DjB,CAAC;AAIF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"modal-content.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modal-content/modal-content.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,CAAC;AAE5D,QAAA,MAAM,YAAY,mEA4DjB,CAAC;AAIF,eAAe,YAAY,CAAC"}

package/build/components/modal/modal-content/modal-content.js

@@ -17,7 +17,7 @@ const ModalContent = factory(({ children, className, style, ...props }, ref) =>
         }
     };
     const { className: transitionClassName, ...resolvedTransitionProps } = transitionProps ?? {};
-    const content = (_jsx(Transition, { transition: "scale", duration: 150, mounted: modal.opened, ...resolvedTransitionProps, className: cx("fixed inset-0 z-50 grid place-items-center p-3 sm:p-6 pointer-events-none", transitionClassName), children: _jsx("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-[36rem]", "border border-[var(--refraktor-border)] bg-[var(--refraktor-bg-elevated)] px-5 pb-5 pt-4 text-[var(--refraktor-text)] shadow-[0_30px_80px_-40px_rgba(0,0,0,0.75)] sm:px-6 sm:pb-6 sm:pt-5", "max-h-[calc(100vh-1.5rem)] max-h-[calc(100dvh-1.5rem)] overflow-y-auto refraktor-scrollbar", getRadius(radius), getStyles("content"), className), ...props, children: children }) }));
+    const content = (_jsx(Transition, { transition: "scale", duration: 150, mounted: modal.opened, ...resolvedTransitionProps, className: cx("fixed inset-0 z-50 grid place-items-center pointer-events-none", transitionClassName), children: _jsx("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: children }) }));
     return withinPortal ? _jsx(Portal, { children: content }) : content;
 });
 ModalContent.displayName = "@refraktor/core/Modal.Content";

package/build/components/modal/modal-header/modal-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-header.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modal-header/modal-header.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAE3D,QAAA,MAAM,WAAW,kEA2BhB,CAAC;AAIF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"modal-header.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modal-header/modal-header.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAE3D,QAAA,MAAM,WAAW,kEA6BhB,CAAC;AAIF,eAAe,WAAW,CAAC"}

package/build/components/modal/modal-header/modal-header.js

@@ -7,7 +7,7 @@ const ModalHeader = factory(({ children, className, id, text, withClose = true,
     const { cx } = useTheme();
     const { headerId, getStyles } = useModalContext();
     const resolvedId = id ?? headerId;
-    return (_jsxs("div", { ref: ref, className: cx("mb-3 flex items-center justify-between gap-2.5", getStyles("header"), className), ...props, children: [_jsx("div", { id: resolvedId, className: "min-w-0 flex-1 text-sm font-semibold leading-5 text-[var(--refraktor-text)]", children: text ?? children }), withClose && _jsx(ModalClose, { className: "static shrink-0 self-center" })] }));
+    return (_jsxs("div", { ref: ref, className: cx("mb-4 flex items-center justify-between", getStyles("header"), className), ...props, children: [_jsx("div", { id: resolvedId, className: "min-w-0 flex-1 text-sm font-semibold leading-5 text-[var(--refraktor-text)]", children: text ?? children }), withClose && (_jsx(ModalClose, { className: "static shrink-0 self-center" }))] }));
 });
 ModalHeader.displayName = "@refraktor/core/Modal.Header";
 export default ModalHeader;

package/build/components/modal/modal-overlay/modal-overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-overlay.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modal-overlay/modal-overlay.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,CAAC;AAE5D,QAAA,MAAM,YAAY,mEAoDjB,CAAC;AAIF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"modal-overlay.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modal-overlay/modal-overlay.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,CAAC;AAE5D,QAAA,MAAM,YAAY,mEA0EjB,CAAC;AAIF,eAAe,YAAY,CAAC"}

package/build/components/modal/modal-overlay/modal-overlay.js

@@ -4,9 +4,13 @@ import { factory } from "../../../utils";
 import { Portal } from "../../portal";
 import { Transition } from "../../transition";
 import { useModalContext } from "../modal.context";
-const ModalOverlay = factory(({ closeOnClick = true, className, onMouseDown, ...props }, ref) => {
+const ModalOverlay = factory(({ 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) => {
         onMouseDown?.(event);
         if (event.defaultPrevented ||
@@ -16,7 +20,11 @@ const ModalOverlay = factory(({ closeOnClick = true, className, onMouseDown, ...
         }
         modal.close();
     };
-    const overlayContent = (_jsx(Transition, { transition: "fade", duration: 150, mounted: modal.opened, ...transitionProps, children: _jsx("div", { ref: ref, "aria-hidden": "true", className: cx("fixed inset-0 z-40 bg-gradient-to-b from-black/60 via-black/45 to-black/65 backdrop-blur-[2px]", getStyles("overlay"), className), onMouseDown: handleMouseDown, ...props }) }));
+    const overlayContent = (_jsx(Transition, { transition: "fade", duration: 150, mounted: modal.opened, ...transitionProps, children: _jsx("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 }) }));
     return withinPortal ? (_jsx(Portal, { children: overlayContent })) : (overlayContent);
 });
 ModalOverlay.displayName = "@refraktor/core/Modal.Overlay";