@refraktor/core 0.0.3 → 0.0.4

package/build/components/combobox/combobox.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createClassNamesConfig, createComponentConfig, factory } from "../../utils";
+import { ComboboxDropdown } from "./combobox-dropdown";
+import { ComboboxGroup } from "./combobox-group";
+import { ComboboxInput } from "./combobox-input";
+import { ComboboxOption } from "./combobox-option";
+import { ComboboxRoot } from "./combobox-root";
+function isGroupData(item) {
+    return "items" in item;
+}
+const Combobox = factory((_props, ref) => {
+    const { data, children, ...props } = _props;
+    if (children !== undefined && children !== null) {
+        return (_jsx(ComboboxRoot, { ref: ref, ...props, children: children }));
+    }
+    return (_jsxs(ComboboxRoot, { ref: ref, ...props, children: [_jsx(ComboboxInput, {}), _jsx(ComboboxDropdown, { children: (data ?? []).map((entry, index) => {
+                    if (isGroupData(entry)) {
+                        return (_jsx(ComboboxGroup, { label: entry.label, children: entry.items.map((item) => (_jsx(ComboboxOption, { value: item.value, disabled: item.disabled, textValue: item.textValue, children: item.label }, item.value))) }, `group-${index}`));
+                    }
+                    return (_jsx(ComboboxOption, { value: entry.value, disabled: entry.disabled, textValue: entry.textValue, children: entry.label }, entry.value));
+                }) })] }));
+});
+Combobox.displayName = "@refraktor/core/Combobox";
+Combobox.configure = createComponentConfig();
+Combobox.classNames = createClassNamesConfig();
+Combobox.Root = ComboboxRoot;
+Combobox.Input = ComboboxInput;
+Combobox.Dropdown = ComboboxDropdown;
+Combobox.Group = ComboboxGroup;
+Combobox.Option = ComboboxOption;
+export default Combobox;

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

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

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

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

package/build/components/combobox/combobox.test.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, userEvent, waitFor } from "../../vitest";
+import Combobox from "./combobox";
+describe("@refraktor/core/Combobox", () => {
+    const transitionProps = {
+        duration: 0,
+        immediate: true
+    };
+    it("supports built-in data mode", async () => {
+        const user = userEvent.setup();
+        await render(_jsx(Combobox, { placeholder: "Pick framework", transitionProps: transitionProps, data: [
+                { value: "react", label: "React" },
+                { value: "vue", label: "Vue" }
+            ] }));
+        const input = screen.getByRole("combobox");
+        expect(input).toHaveAttribute("placeholder", "Pick framework");
+        await user.click(input);
+        await user.click(screen.getByRole("option", { name: "React" }));
+        expect(input).toHaveValue("React");
+        await waitFor(() => {
+            expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+        });
+    });
+    it("renders defaultValue label in input before opening", async () => {
+        await render(_jsx(Combobox, { defaultValue: "apple", data: [
+                { value: "apple", label: "Apple" },
+                { value: "orange", label: "Orange" }
+            ] }));
+        expect(screen.getByRole("combobox")).toHaveValue("Apple");
+    });
+    it("filters options based on typed query", async () => {
+        const user = userEvent.setup();
+        await render(_jsx(Combobox, { transitionProps: transitionProps, data: [
+                { value: "react", label: "React" },
+                { value: "vue", label: "Vue" },
+                { value: "solid", label: "Solid" }
+            ] }));
+        const input = screen.getByRole("combobox");
+        await user.click(input);
+        await user.type(input, "vu");
+        expect(screen.getByRole("option", { name: "Vue" })).toBeInTheDocument();
+        expect(screen.queryByRole("option", { name: "React" })).not.toBeInTheDocument();
+        await user.clear(input);
+        await user.type(input, "unknown");
+        expect(screen.getByText("No options")).toBeInTheDocument();
+    });
+    it("supports keyboard navigation and selection", async () => {
+        const user = userEvent.setup();
+        await render(_jsx(Combobox, { transitionProps: transitionProps, data: [
+                { value: "react", label: "React" },
+                { value: "vue", label: "Vue" }
+            ] }));
+        const input = screen.getByRole("combobox");
+        input.focus();
+        await user.keyboard("{ArrowDown}");
+        await user.keyboard("{ArrowDown}");
+        await user.keyboard("{Enter}");
+        expect(input).toHaveValue("Vue");
+    });
+    it("supports compound mode with groups", async () => {
+        const user = userEvent.setup();
+        await render(_jsxs(Combobox.Root, { transitionProps: transitionProps, children: [_jsx(Combobox.Input, {}), _jsxs(Combobox.Dropdown, { children: [_jsx(Combobox.Group, { label: "Frontend", children: _jsx(Combobox.Option, { value: "react", children: "React" }) }), _jsx(Combobox.Group, { label: "Backend", children: _jsx(Combobox.Option, { value: "node", children: "Node.js" }) })] })] }));
+        const input = screen.getByRole("combobox");
+        await user.click(input);
+        expect(screen.getByText("Frontend")).toBeInTheDocument();
+        expect(screen.getByText("Backend")).toBeInTheDocument();
+        await user.click(screen.getByRole("option", { name: "Node.js" }));
+        expect(input).toHaveValue("Node.js");
+    });
+    it("supports controlled mode", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        function Demo() {
+            const [value, setValue] = useState("react");
+            return (_jsx(Combobox, { value: value, onChange: (nextValue) => {
+                    onChange(nextValue);
+                    setValue(nextValue);
+                }, transitionProps: transitionProps, data: [
+                    { value: "react", label: "React" },
+                    { value: "vue", label: "Vue" }
+                ] }));
+        }
+        await render(_jsx(Demo, {}));
+        await user.click(screen.getByRole("combobox"));
+        await user.click(screen.getByRole("option", { name: "Vue" }));
+        expect(onChange).toHaveBeenCalledWith("vue");
+        expect(screen.getByRole("combobox")).toHaveValue("Vue");
+    });
+    it("supports custom filter and limit", async () => {
+        const user = userEvent.setup();
+        await render(_jsx(Combobox, { transitionProps: transitionProps, filter: (item, query) => item.textValue.toLowerCase().startsWith(query.toLowerCase()), limit: 1, data: [
+                { value: "react", label: "React" },
+                { value: "ruby", label: "Ruby" },
+                { value: "vue", label: "Vue" }
+            ] }));
+        const input = screen.getByRole("combobox");
+        await user.click(input);
+        await user.type(input, "r");
+        expect(screen.getByRole("option", { name: "React" })).toBeInTheDocument();
+        expect(screen.queryByRole("option", { name: "Ruby" })).not.toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,205 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { FlipOptions, InlineOptions, Placement, ShiftOptions } from "@floating-ui/react";
+import type { RefraktorRadius, RefraktorSize } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, FactoryPayload } from "../../utils";
+import type { TransitionProps } from "../transition";
+import type { InputVariant } from "../input";
+import type { ComboboxRoot } from "./combobox-root";
+import type { ComboboxInput } from "./combobox-input";
+import type { ComboboxDropdown } from "./combobox-dropdown";
+import type { ComboboxGroup } from "./combobox-group";
+import type { ComboboxOption } from "./combobox-option";
+export type ComboboxClassNames = {
+    root?: string;
+    input?: string;
+    inputField?: string;
+    inputIcon?: string;
+    dropdown?: string;
+    options?: string;
+    group?: string;
+    groupLabel?: string;
+    option?: string;
+    optionLabel?: string;
+    optionCheck?: string;
+    empty?: string;
+};
+export type ComboboxPositioning = {
+    /** The placement of the dropdown relative to the input @default `bottom-start` */
+    placement?: Placement;
+    /** Offset distance from the input in pixels @default `4` */
+    offset?: number;
+};
+export type ComboboxMiddlewares = {
+    shift?: boolean | ShiftOptions;
+    flip?: boolean | FlipOptions;
+    inline?: boolean | InlineOptions;
+};
+export interface ComboboxItemData {
+    /** Option value */
+    value: string;
+    /** Option label */
+    label: ReactNode;
+    /** Optional searchable text for non-string labels */
+    textValue?: string;
+    /** Whether the option is disabled */
+    disabled?: boolean;
+}
+export interface ComboboxGroupData {
+    /** Group label */
+    label?: ReactNode;
+    /** Group items */
+    items: ComboboxItemData[];
+}
+export type ComboboxData = ComboboxItemData | ComboboxGroupData;
+export interface ComboboxFilterItem {
+    value: string;
+    label: string;
+    textValue: string;
+    disabled: boolean;
+    groupId?: string;
+}
+export type ComboboxFilter = (item: ComboboxFilterItem, query: string) => boolean;
+export interface ComboboxRootProps extends Omit<ComponentPropsWithoutRef<"div">, "value" | "defaultValue" | "onChange"> {
+    /** Children containing combobox subcomponents */
+    children: ReactNode;
+    /** Label text */
+    label?: ReactNode;
+    /** Description text */
+    description?: ReactNode;
+    /** Error message */
+    error?: ReactNode;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Display an asterisk next to the label */
+    withAsterisk?: boolean;
+    /** Selected value (controlled) */
+    value?: string | null;
+    /** Initial selected value (uncontrolled) */
+    defaultValue?: string | null;
+    /** Callback called when selected value changes */
+    onChange?: (value: string | null) => void;
+    /** Search value (controlled) */
+    searchValue?: string;
+    /** Initial search value (uncontrolled) */
+    defaultSearchValue?: string;
+    /** Callback called when search value changes */
+    onSearchChange?: (value: string) => void;
+    /** Dropdown open state (controlled) */
+    opened?: boolean;
+    /** Initial dropdown open state (uncontrolled) */
+    defaultOpened?: boolean;
+    /** Callback called when dropdown open state changes */
+    onOpenedChange?: (opened: boolean) => void;
+    /** Positioning settings */
+    positioning?: ComboboxPositioning;
+    /** Floating middleware settings */
+    middlewares?: ComboboxMiddlewares;
+    /** Whether combobox is disabled @default `false` */
+    disabled?: boolean;
+    /** Whether to open dropdown when input receives focus @default `true` */
+    openOnFocus?: boolean;
+    /** Input placeholder text @default `Type to search` */
+    placeholder?: string;
+    /** Content rendered when no options match @default `No options` */
+    nothingFound?: ReactNode;
+    /** Filter function for options */
+    filter?: ComboboxFilter;
+    /** Optional maximum number of visible options */
+    limit?: number;
+    /** Input size @default `md` */
+    size?: RefraktorSize;
+    /** Input radius @default `default` */
+    radius?: RefraktorRadius;
+    /** Input variant @default `default` */
+    variant?: InputVariant;
+    /** Whether to render dropdown in portal @default `true` */
+    withinPortal?: boolean;
+    /** Whether to close on click outside @default `true` */
+    closeOnClickOutside?: boolean;
+    /** Whether to close on Escape key @default `true` */
+    closeOnEscape?: boolean;
+    /** Transition props for dropdown, 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?: ComboboxClassNames;
+}
+export interface ComboboxInputProps extends ComponentPropsWithoutRef<"div"> {
+    /** Input placeholder override */
+    placeholder?: string;
+    /** Optional custom left section */
+    leftSection?: ReactNode;
+    /** Optional custom right section */
+    rightSection?: ReactNode;
+    /** Used for editing root class name */
+    className?: string;
+}
+export interface ComboboxDropdownProps extends ComponentPropsWithoutRef<"div"> {
+    /** Content displayed inside dropdown */
+    children: ReactNode;
+    /** Used for editing root class name */
+    className?: string;
+}
+export interface ComboboxGroupProps extends ComponentPropsWithoutRef<"div"> {
+    /** Group label */
+    label?: ReactNode;
+    /** Group content */
+    children: ReactNode;
+    /** Used for editing root class name */
+    className?: string;
+}
+export interface ComboboxOptionProps extends Omit<ComponentPropsWithoutRef<"button">, "value" | "onSelect"> {
+    /** Option value */
+    value: string;
+    /** Option content */
+    children: ReactNode;
+    /** Callback called when option is selected */
+    onSelect?: (value: string) => void;
+    /** Optional searchable text for non-string children */
+    textValue?: string;
+    /** Whether option is disabled */
+    disabled?: boolean;
+    /** Used for editing root class name */
+    className?: string;
+}
+export interface ComboboxProps extends Omit<ComboboxRootProps, "children"> {
+    /** Compound children. If provided, data-based rendering is skipped */
+    children?: ReactNode;
+    /** Data used for built-in rendering mode */
+    data?: ComboboxData[];
+}
+export interface ComboboxFactoryPayload extends FactoryPayload {
+    props: ComboboxProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<ComboboxProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<ComboboxClassNames>>;
+        Root: typeof ComboboxRoot;
+        Input: typeof ComboboxInput;
+        Dropdown: typeof ComboboxDropdown;
+        Group: typeof ComboboxGroup;
+        Option: typeof ComboboxOption;
+    };
+}
+export interface ComboboxRootFactoryPayload extends FactoryPayload {
+    props: ComboboxRootProps;
+    ref: HTMLDivElement;
+}
+export interface ComboboxInputFactoryPayload extends FactoryPayload {
+    props: ComboboxInputProps;
+    ref: HTMLDivElement;
+}
+export interface ComboboxDropdownFactoryPayload extends FactoryPayload {
+    props: ComboboxDropdownProps;
+    ref: HTMLDivElement;
+}
+export interface ComboboxGroupFactoryPayload extends FactoryPayload {
+    props: ComboboxGroupProps;
+    ref: HTMLDivElement;
+}
+export interface ComboboxOptionFactoryPayload extends FactoryPayload {
+    props: ComboboxOptionProps;
+    ref: HTMLButtonElement;
+}
+//# sourceMappingURL=combobox.types.d.ts.map

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

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

package/build/components/combobox/combobox.types.js

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

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

@@ -0,0 +1,8 @@
+export { default as Combobox } from "./combobox";
+export { ComboboxRoot } from "./combobox-root";
+export { ComboboxInput } from "./combobox-input";
+export { ComboboxDropdown } from "./combobox-dropdown";
+export { ComboboxGroup } from "./combobox-group";
+export { ComboboxOption } from "./combobox-option";
+export type { ComboboxProps, ComboboxRootProps, ComboboxInputProps, ComboboxDropdownProps, ComboboxGroupProps, ComboboxOptionProps, ComboboxItemData, ComboboxGroupData, ComboboxData, ComboboxClassNames, ComboboxPositioning, ComboboxMiddlewares, ComboboxFilter, ComboboxFilterItem } from "./combobox.types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,YAAY,EACR,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,qBAAqB,EACrB,kBAAkB,EAClB,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EACd,kBAAkB,EACrB,MAAM,kBAAkB,CAAC"}

package/build/components/combobox/index.js

@@ -0,0 +1,6 @@
+export { default as Combobox } from "./combobox";
+export { ComboboxRoot } from "./combobox-root";
+export { ComboboxInput } from "./combobox-input";
+export { ComboboxDropdown } from "./combobox-dropdown";
+export { ComboboxGroup } from "./combobox-group";
+export { ComboboxOption } from "./combobox-option";

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

@@ -0,0 +1,32 @@
+import { FloatingContext, Placement } from "@floating-ui/react";
+import type { ComboboxMiddlewares, ComboboxPositioning } from "./combobox.types";
+interface UseComboboxProps {
+    opened?: boolean;
+    defaultOpened?: boolean;
+    onOpenedChange?: (opened: boolean) => void;
+    positioning?: ComboboxPositioning;
+    middlewares?: ComboboxMiddlewares;
+    disabled?: boolean;
+    closeOnClickOutside?: boolean;
+    closeOnEscape?: boolean;
+}
+export interface UseComboboxReturn {
+    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 declare function useCombobox(options?: UseComboboxProps): UseComboboxReturn;
+export {};
+//# sourceMappingURL=use-combobox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-combobox.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/use-combobox.ts"],"names":[],"mappings":"AACA,OAAO,EAGH,eAAe,EAIf,SAAS,EAKZ,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEjF,UAAU,gBAAgB;IACtB,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,mBAAmB,CAAC;IAClC,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAiB;IAC9B,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,WAAW,CAAC,OAAO,GAAE,gBAAqB,GAAG,iBAAiB,CA+G7E"}

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

@@ -0,0 +1,80 @@
+import { useUncontrolled } from "@refraktor/utils";
+import { autoUpdate, flip, inline, offset, shift, useDismiss, useFloating, useInteractions } from "@floating-ui/react";
+import { useCallback, useMemo } from "react";
+export function useCombobox(options = {}) {
+    const { opened, defaultOpened, onOpenedChange, positioning = {
+        placement: "bottom-start",
+        offset: 4
+    }, middlewares = { flip: true, shift: true }, disabled = false, closeOnClickOutside = true, closeOnEscape = true } = options;
+    const [isOpen, setIsOpen] = useUncontrolled({
+        value: opened,
+        defaultValue: defaultOpened,
+        finalValue: false,
+        onChange: onOpenedChange
+    });
+    const middleware = useMemo(() => {
+        const middlewareList = [];
+        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 dismiss = useDismiss(floating.context, {
+        outsidePress: closeOnClickOutside,
+        escapeKey: closeOnEscape
+    });
+    const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);
+    const open = useCallback(() => {
+        if (!disabled) {
+            setIsOpen(true);
+        }
+    }, [disabled, setIsOpen]);
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, [setIsOpen]);
+    const toggle = useCallback(() => {
+        if (!disabled) {
+            setIsOpen(!isOpen);
+        }
+    }, [disabled, isOpen, setIsOpen]);
+    return {
+        opened: isOpen,
+        open,
+        close,
+        toggle,
+        context: floating.context,
+        refs: {
+            setReference: floating.refs.setReference,
+            setFloating: floating.refs.setFloating,
+            reference: floating.refs
+                .reference,
+            floating: floating.refs
+                .floating
+        },
+        floatingStyles: floating.floatingStyles,
+        getReferenceProps,
+        getFloatingProps,
+        placement: floating.placement
+    };
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-body.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/drawer-body/drawer-body.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;AAE3D,QAAA,MAAM,UAAU,iEAmBf,CAAC;AAIF,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useDrawerContext } from "../drawer.context";
+const DrawerBody = factory(({ children, className, ...props }, ref) => {
+    const { cx } = useTheme();
+    const { getStyles } = useDrawerContext();
+    return (_jsx("div", { ref: ref, className: cx("overflow-y-auto", getStyles("body"), className), ...props, children: children }));
+});
+DrawerBody.displayName = "@refraktor/core/Drawer.Body";
+export default DrawerBody;

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

@@ -0,0 +1,2 @@
+export { default as DrawerBody } from "./drawer-body";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/drawer-body/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/build/components/drawer/drawer-body/index.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"drawer-content.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/drawer-content/drawer-content.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,2BAA2B,EAAkB,MAAM,iBAAiB,CAAC;AAoB9E,QAAA,MAAM,aAAa,oEAoElB,CAAC;AAIF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"drawer-content.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/drawer-content/drawer-content.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,2BAA2B,EAAkB,MAAM,iBAAiB,CAAC;AAoB9E,QAAA,MAAM,aAAa,oEAsGlB,CAAC;AAIF,eAAe,aAAa,CAAC"}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { FloatingFocusManager, FloatingPortal } from "@floating-ui/react";
 import { useTheme } from "../../../theme";
 import { factory } from "../../../utils";
-import { Portal } from "../../portal";
 import { Transition } from "../../transition";
 import { useDrawerContext } from "../drawer.context";
 import { getSizeStyles } from "../drawer.styles";
@@ -19,9 +19,9 @@ const transitionsByPosition = {
 };
 const DrawerContent = factory(({ children, className, style, ...props }, ref) => {
     const { cx, getRadius } = useTheme();
-    const { drawer, withinPortal, radius, position, size, transitionProps, headerId, contentRef, getStyles } = useDrawerContext();
+    const { drawer, withinPortal, radius, position, size, trapFocus, returnFocus, transitionProps, headerId, getStyles } = useDrawerContext();
     const setRefs = (node) => {
-        contentRef.current = node;
+        drawer.refs.setFloating(node);
         if (typeof ref === "function") {
             ref(node);
         }
@@ -31,11 +31,14 @@ const DrawerContent = factory(({ children, className, style, ...props }, ref) =>
     };
     const { className: transitionClassName, ...resolvedTransitionProps } = transitionProps ?? {};
     const sizeStyles = getSizeStyles(position, size);
-    const content = (_jsx(Transition, { transition: transitionsByPosition[position], duration: 200, mounted: drawer.opened, ...resolvedTransitionProps, className: cx("fixed inset-0 z-50 pointer-events-none", transitionClassName), children: _jsx("div", { ref: setRefs, role: "dialog", "aria-modal": "true", "aria-labelledby": headerId, "data-opened": drawer.opened, "data-position": position, style: {
+    const content = (_jsx(Transition, { transition: transitionsByPosition[position], duration: 200, mounted: drawer.opened, ...resolvedTransitionProps, className: cx("fixed inset-0 z-50 pointer-events-none", transitionClassName), children: drawer.opened ? (_jsx(FloatingFocusManager, { context: drawer.context, modal: trapFocus, returnFocus: returnFocus, outsideElementsInert: false, children: _jsx("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: children }) })) : (_jsx("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: children }) }));
-    return withinPortal ? _jsx(Portal, { children: content }) : content;
+            }, 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: children })) }));
+    return withinPortal ? (_jsx(FloatingPortal, { children: content })) : (content);
 });
 DrawerContent.displayName = "@refraktor/core/Drawer.Content";
 export default DrawerContent;

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

@@ -1 +1 @@
-{"version":3,"file":"drawer-overlay.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/drawer-overlay/drawer-overlay.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,2BAA2B,EAAE,MAAM,iBAAiB,CAAC;AAE9D,QAAA,MAAM,aAAa,oEA0ElB,CAAC;AAIF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"drawer-overlay.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/drawer-overlay/drawer-overlay.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,2BAA2B,EAAE,MAAM,iBAAiB,CAAC;AAE9D,QAAA,MAAM,aAAa,oEA2ElB,CAAC;AAIF,eAAe,aAAa,CAAC"}

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

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { FloatingOverlay, FloatingPortal } from "@floating-ui/react";
 import { useTheme } from "../../../theme";
 import { factory } from "../../../utils";
-import { Portal } from "../../portal";
 import { Transition } from "../../transition";
 import { useDrawerContext } from "../drawer.context";
 const DrawerOverlay = factory(({ closeOnClick = true, backgroundOpacity = 0.5, blur = 0, className, onMouseDown, style, ...props }, ref) => {
     const { cx } = useTheme();
-    const { drawer, closeOnClickOutside, withinPortal, transitionProps, getStyles } = useDrawerContext();
+    const { drawer, closeOnClickOutside, lockScroll, withinPortal, transitionProps, getStyles } = useDrawerContext();
     const blurValue = typeof blur === "number" ? `${blur}px` : blur;
     const backdropFilterValue = blurValue !== "0" && blurValue !== "0px"
         ? `blur(${blurValue})`
@@ -20,12 +20,12 @@ const DrawerOverlay = factory(({ closeOnClick = true, backgroundOpacity = 0.5, b
         }
         drawer.close();
     };
-    const overlayContent = (_jsx(Transition, { transition: "fade", duration: 150, mounted: drawer.opened, ...transitionProps, children: _jsx("div", { ref: ref, "aria-hidden": "true", className: cx("fixed inset-0 z-40", getStyles("overlay"), className), style: {
+    const overlayContent = (_jsx(Transition, { transition: "fade", duration: 150, mounted: drawer.opened, ...transitionProps, children: _jsx(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 }) }));
-    return withinPortal ? (_jsx(Portal, { children: overlayContent })) : (overlayContent);
+    return withinPortal ? (_jsx(FloatingPortal, { children: overlayContent })) : (overlayContent);
 });
 DrawerOverlay.displayName = "@refraktor/core/Drawer.Overlay";
 export default DrawerOverlay;

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

@@ -1 +1 @@
-{"version":3,"file":"drawer-root.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/drawer-root/drawer-root.tsx"],"names":[],"mappings":"AAMA,OAAO,EAEH,wBAAwB,EAE3B,MAAM,iBAAiB,CAAC;AAazB,QAAA,MAAM,UAAU,iEAkEd,CAAC;AAIH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"drawer-root.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/drawer-root/drawer-root.tsx"],"names":[],"mappings":"AAKA,OAAO,EAEH,wBAAwB,EAE3B,MAAM,iBAAiB,CAAC;AAczB,QAAA,MAAM,UAAU,iEAiEd,CAAC;AAIH,eAAe,UAAU,CAAC"}