@refraktor/core 0.0.2 → 0.0.4

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

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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";
+const defaultProps = {
+    closeOnClickOutside: true,
+    closeOnEscape: true,
+    lockScroll: true,
+    withinPortal: true,
+    radius: "none",
+    position: "right",
+    size: "md",
+    trapFocus: true,
+    returnFocus: true
+};
+const DrawerRoot = factory((_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) => classes[part];
+    return (_jsx(DrawerProvider, { value: {
+            drawer,
+            closeOnClickOutside,
+            lockScroll,
+            withinPortal,
+            radius,
+            position,
+            size,
+            trapFocus,
+            returnFocus,
+            transitionProps,
+            headerId,
+            classNames,
+            getStyles
+        }, children: _jsx("div", { ref: ref, id: _id, className: cx(classes.root, className), ...props, children: children }) }));
+});
+DrawerRoot.displayName = "@refraktor/core/Drawer.Root";
+export default DrawerRoot;

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

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

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

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

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

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

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

@@ -0,0 +1,24 @@
+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 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,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC;IAChE,QAAQ,EAAE,MAAM,CAAC;IACjB,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":"AAWA,OAAO,EAEH,oBAAoB,EAEvB,MAAM,gBAAgB,CAAC;AAExB,QAAA,MAAM,MAAM,0DA4BX,CAAC;AAYF,eAAe,MAAM,CAAC"}

package/build/components/drawer/drawer.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createClassNamesConfig, createComponentConfig, factory } from "../../utils";
+import { DrawerBody } from "./drawer-body";
+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(({ title, withOverlay = true, withCloseButton = true, overlayProps, children, ...rootProps }, ref) => {
+    return (_jsxs(DrawerRoot, { ...rootProps, ref: ref, children: [withOverlay && _jsx(DrawerOverlay, { ...overlayProps }), _jsxs(DrawerContent, { children: [(title || withCloseButton) && (_jsx(DrawerHeader, { withClose: withCloseButton, children: title })), _jsx(DrawerBody, { children: children })] })] }));
+});
+Drawer.displayName = "@refraktor/core/Drawer";
+Drawer.configure = createComponentConfig();
+Drawer.classNames = createClassNamesConfig();
+Drawer.Root = DrawerRoot;
+Drawer.Overlay = DrawerOverlay;
+Drawer.Content = DrawerContent;
+Drawer.Header = DrawerHeader;
+Drawer.Body = DrawerBody;
+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,109 @@
+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 { DrawerBody } from "./drawer-body";
+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.Root, { defaultOpened: true, transitionProps: transitionProps, children: [_jsx(Drawer.Overlay, {}), _jsxs(Drawer.Content, { children: [_jsx(Drawer.Header, { text: "Edit profile" }), _jsx(Drawer.Body, { children: _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.Root, { 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.Root, { 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.Root, { 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("supports different positions and predefined sizes", async () => {
+        await render(_jsxs(_Fragment, { children: [_jsx(Drawer.Root, { defaultOpened: true, position: "left", size: "sm", transitionProps: transitionProps, children: _jsx(Drawer.Content, { "data-testid": "left-content", children: "Left" }) }), _jsx(Drawer.Root, { 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" });
+    });
+    it("renders Drawer.Body subcomponent", async () => {
+        await render(_jsx(Drawer.Root, { defaultOpened: true, transitionProps: transitionProps, children: _jsx(Drawer.Content, { children: _jsx(Drawer.Body, { "data-testid": "body", children: "Body content" }) }) }));
+        const body = await screen.findByTestId("body");
+        expect(body).toBeInTheDocument();
+        expect(body).toHaveTextContent("Body content");
+    });
+    it("renders standalone DrawerBody component", async () => {
+        await render(_jsx(DrawerRoot, { defaultOpened: true, transitionProps: transitionProps, children: _jsx(DrawerContent, { children: _jsx(DrawerBody, { "data-testid": "body", children: "Standalone body" }) }) }));
+        expect(await screen.findByTestId("body")).toHaveTextContent("Standalone body");
+    });
+    describe("single-component shorthand API", () => {
+        it("renders with title, overlay, close button, and body", async () => {
+            await render(_jsx(Drawer, { defaultOpened: true, title: "Edit profile", transitionProps: transitionProps, children: _jsx("p", { children: "Profile form" }) }));
+            expect(await screen.findByRole("dialog", { name: "Edit profile" })).toBeInTheDocument();
+            expect(screen.getByText("Profile form")).toBeInTheDocument();
+            expect(screen.getByRole("button", { name: "Close" })).toBeInTheDocument();
+        });
+        it("hides overlay when withOverlay is false", async () => {
+            const { container } = await render(_jsx(Drawer, { defaultOpened: true, title: "No overlay", withOverlay: false, transitionProps: transitionProps }));
+            expect(await screen.findByRole("dialog")).toBeInTheDocument();
+            expect(container.ownerDocument.querySelector("[aria-hidden='true']")).toBeNull();
+        });
+        it("hides close button when withCloseButton is false", async () => {
+            await render(_jsx(Drawer, { defaultOpened: true, title: "No close", withCloseButton: false, transitionProps: transitionProps }));
+            await screen.findByRole("dialog");
+            expect(screen.queryByRole("button", { name: "Close" })).not.toBeInTheDocument();
+        });
+        it("closes via shorthand close button", async () => {
+            const user = userEvent.setup();
+            await render(_jsx(Drawer, { defaultOpened: true, title: "Closeable", transitionProps: transitionProps, children: "Content" }));
+            await screen.findByRole("dialog");
+            await user.click(screen.getByRole("button", { name: "Close" }));
+            await waitFor(() => {
+                expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+            });
+        });
+        it("passes overlayProps to the overlay", async () => {
+            await render(_jsx(Drawer, { defaultOpened: true, title: "Custom overlay", overlayProps: {
+                    backgroundOpacity: 0.8,
+                    blur: 10,
+                    "data-testid": "shorthand-overlay"
+                }, transitionProps: transitionProps, children: "Content" }));
+            const overlay = await screen.findByTestId("shorthand-overlay");
+            expect(overlay).toHaveStyle({
+                backgroundColor: "rgba(0, 0, 0, 0.8)",
+                backdropFilter: "blur(10px)"
+            });
+        });
+    });
+});

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

@@ -0,0 +1,142 @@
+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 { DrawerBody } from "./drawer-body";
+import { DrawerClose } from "./drawer-close";
+export type DrawerPosition = "left" | "right" | "top" | "bottom";
+export type DrawerClassNames = {
+    root?: string;
+    overlay?: string;
+    content?: string;
+    header?: string;
+    body?: string;
+    close?: string;
+};
+export interface DrawerRootProps 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;
+    /** Whether to trap focus within the drawer @default `true` */
+    trapFocus?: boolean;
+    /** Whether to return focus to trigger after close @default `true` */
+    returnFocus?: boolean;
+    /** 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 interface DrawerProps extends Omit<DrawerRootProps, "title"> {
+    /** Title text rendered in the header */
+    title?: ReactNode;
+    /** Whether to render the overlay @default `true` */
+    withOverlay?: boolean;
+    /** Whether to show the close button in the header @default `true` */
+    withCloseButton?: boolean;
+    /** Props passed to the Overlay subcomponent */
+    overlayProps?: DrawerOverlayProps;
+}
+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 DrawerBodyProps extends ComponentPropsWithoutRef<"div"> {
+    /** Body content */
+    children?: ReactNode;
+    /** 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;
+        Body: typeof DrawerBody;
+        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 DrawerBodyFactoryPayload extends FactoryPayload {
+    props: DrawerBodyProps;
+    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,9 @@
+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 { DrawerBody } from "./drawer-body";
+export { DrawerClose } from "./drawer-close";
+export type { DrawerProps, DrawerRootProps, DrawerOverlayProps, DrawerContentProps, DrawerHeaderProps, DrawerBodyProps, 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,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,YAAY,EACR,WAAW,EACX,eAAe,EACf,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACjB,MAAM,gBAAgB,CAAC"}

package/build/components/drawer/index.js

@@ -0,0 +1,7 @@
+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 { DrawerBody } from "./drawer-body";
+export { DrawerClose } from "./drawer-close";

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

@@ -0,0 +1,24 @@
+import { FloatingContext } from "@floating-ui/react";
+interface UseDrawerProps {
+    opened?: boolean;
+    defaultOpened?: boolean;
+    onOpenedChange?: (opened: boolean) => void;
+    closeOnClickOutside?: boolean;
+    closeOnEscape?: boolean;
+}
+export interface UseDrawerReturn {
+    opened: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    context: FloatingContext;
+    refs: {
+        setReference: (node: HTMLElement | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+        floating: React.MutableRefObject<HTMLElement | null>;
+    };
+    getFloatingProps: (userProps?: React.HTMLAttributes<HTMLElement>) => Record<string, unknown>;
+}
+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":"AACA,OAAO,EACH,eAAe,EAKlB,MAAM,oBAAoB,CAAC;AAG5B,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;CAC3B;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;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,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;KACxD,CAAC;IACF,gBAAgB,EAAE,CACd,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAC5C,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAChC;AAED,wBAAgB,SAAS,CAAC,OAAO,EAAE,cAAc,GAAG,eAAe,CA2DlE"}

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

@@ -0,0 +1,48 @@
+import { useUncontrolled } from "@refraktor/utils";
+import { useDismiss, useFloating, useInteractions, useRole } from "@floating-ui/react";
+import { useCallback } from "react";
+export function useDrawer(options) {
+    const { opened, defaultOpened, onOpenedChange, closeOnClickOutside = true, closeOnEscape = true } = options;
+    const [isOpen, setIsOpen] = useUncontrolled({
+        value: opened,
+        defaultValue: defaultOpened,
+        finalValue: false,
+        onChange: onOpenedChange
+    });
+    const floating = useFloating({
+        open: isOpen,
+        onOpenChange: setIsOpen
+    });
+    const dismiss = useDismiss(floating.context, {
+        outsidePress: closeOnClickOutside,
+        outsidePressEvent: "mousedown",
+        escapeKey: closeOnEscape
+    });
+    const role = useRole(floating.context, {
+        role: "dialog"
+    });
+    const { getFloatingProps } = useInteractions([dismiss, role]);
+    const open = useCallback(() => {
+        setIsOpen(true);
+    }, [setIsOpen]);
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, [setIsOpen]);
+    const toggle = useCallback(() => {
+        setIsOpen(!isOpen);
+    }, [isOpen, setIsOpen]);
+    return {
+        opened: isOpen,
+        open,
+        close,
+        toggle,
+        context: floating.context,
+        refs: {
+            setReference: floating.refs.setReference,
+            setFloating: floating.refs.setFloating,
+            floating: floating.refs
+                .floating
+        },
+        getFloatingProps
+    };
+}

package/build/components/file-input/file-input.d.ts

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

package/build/components/file-input/file-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.d.ts","sourceRoot":"","sources":["../../../src/components/file-input/file-input.tsx"],"names":[],"mappings":"AAaA,OAAO,EAEH,uBAAuB,EAE1B,MAAM,oBAAoB,CAAC;AAU5B,QAAA,MAAM,SAAS,6DA8Lb,CAAC;AAMH,eAAe,SAAS,CAAC"}

package/build/components/file-input/file-input.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useMergedRefs } from "@refraktor/utils";
+import { useMemo, useRef, useState } from "react";
+import { XIcon } from "../../icons";
+import { useTheme } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, factory, useClassNames, useProps } from "../../utils";
+import { getSize, getVariant } from "../input/input-field/input-field.styles";
+import { InputWrapper } from "../input/input-wrapper";
+import { formatFileSummary, validateFiles } from "./file-input.utils";
+const defaultProps = {
+    variant: "default",
+    size: "md",
+    radius: "default",
+    clearable: true
+};
+const FileInput = factory((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { id, label, description, error, required, withAsterisk, variant, size, radius, multiple, placeholder, clearable, maxSize, minSize, maxFiles, onChange, onReject, className, classNames, disabled, accept, ...props } = useProps("FileInput", defaultProps, _props);
+    const classes = useClassNames("FileInput", classNames);
+    const _id = useId(id);
+    const localRef = useRef(null);
+    const mergedRef = useMergedRefs(ref, localRef);
+    const [files, setFiles] = useState([]);
+    const hasWrapper = label || description || error;
+    const hasValue = files.length > 0;
+    const describedBy = error
+        ? `${_id}-error`
+        : description
+            ? `${_id}-description`
+            : undefined;
+    const summary = useMemo(() => formatFileSummary(files), [files]);
+    const resolvedPlaceholder = placeholder ?? (multiple ? "Select files" : "Select file");
+    const openPicker = () => {
+        if (disabled) {
+            return;
+        }
+        localRef.current?.click();
+    };
+    const handleInputChange = (event) => {
+        const selectedFiles = Array.from(event.currentTarget.files ?? []);
+        if (selectedFiles.length === 0) {
+            return;
+        }
+        const { accepted, rejections } = validateFiles(selectedFiles, {
+            accept,
+            minSize,
+            maxSize,
+            maxFiles,
+            multiple
+        });
+        setFiles(accepted);
+        onChange?.(accepted);
+        if (rejections.length > 0) {
+            onReject?.(rejections);
+        }
+    };
+    const handleTriggerKeyDown = (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            openPicker();
+        }
+    };
+    const handleClear = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (disabled) {
+            return;
+        }
+        if (localRef.current) {
+            localRef.current.value = "";
+        }
+        setFiles([]);
+        onChange?.([]);
+    };
+    const field = (_jsxs("div", { className: cx("relative w-full", classes.root), children: [_jsx("input", { ...props, id: _id, ref: mergedRef, type: "file", accept: accept, multiple: multiple, disabled: disabled, required: required, "aria-invalid": error ? true : undefined, "aria-describedby": describedBy, className: "pointer-events-none absolute h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 opacity-0", onClick: (event) => {
+                    event.currentTarget.value = "";
+                }, onChange: handleInputChange }), _jsxs("div", { role: "button", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, "aria-invalid": error ? true : undefined, "aria-describedby": describedBy, className: cx("w-full flex items-center gap-2 transition-all", "focus-visible:border-[var(--refraktor-primary)]", "select-none", getSize(size), getVariant(variant), getRadius(radius), error && "border-[var(--refraktor-colors-red-6)]", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer", classes.trigger, className), onClick: openPicker, onKeyDown: handleTriggerKeyDown, children: [_jsx("span", { className: cx("min-w-0 flex-1 truncate", classes.value, hasValue
+                            ? cx("text-[var(--refraktor-text)]", classes.files)
+                            : cx("text-[var(--refraktor-text-tertiary)]", classes.placeholder)), children: hasValue ? summary : resolvedPlaceholder }), clearable && hasValue && !disabled && (_jsx("button", { type: "button", className: cx("inline-flex h-4 w-4 items-center justify-center rounded-full border-0 bg-transparent p-0", "text-[var(--refraktor-text-secondary)] transition-colors hover:text-[var(--refraktor-text)]", classes.clear), "aria-label": files.length > 1 ? "Clear files" : "Clear file", onClick: handleClear, children: _jsx(XIcon, { size: 12 }) }))] })] }));
+    if (!hasWrapper) {
+        return field;
+    }
+    return (_jsx(InputWrapper, { label: label, description: description, error: error, required: required, withAsterisk: withAsterisk, inputId: _id, children: field }));
+});
+FileInput.displayName = "@refraktor/core/FileInput";
+FileInput.configure = createComponentConfig();
+FileInput.classNames = createClassNamesConfig();
+export default FileInput;

package/build/components/file-input/file-input.test.d.ts

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