@refraktor/core 0.0.1 → 0.0.3

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 $ tsc && tailwindcss -i src/style.css -o build/style.css --minify
 ≈ tailwindcss v4.1.18
 
-Done in 99ms
+Done in 129ms

package/build/components/breadcrumbs/breadcrumbs.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"AAWA,OAAO,EAEH,yBAAyB,EAE5B,MAAM,qBAAqB,CAAC;AAa7B,QAAA,MAAM,WAAW,+DAoKf,CAAC;AAMH,eAAe,WAAW,CAAC"}

package/build/components/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useUncontrolled } from "@refraktor/utils";
+import { ChevronIcon } from "../../icons";
+import { useTheme } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, factory, useClassNames, useProps } from "../../utils";
+import { getSize } from "./breadcrumbs.styles";
+import { buildBreadcrumbsRange } from "./breadcrumbs.utils";
+const defaultProps = {
+    maxItems: 4,
+    itemsBeforeCollapse: 1,
+    itemsAfterCollapse: 1,
+    defaultExpanded: false,
+    expandLabel: "Show full breadcrumb path",
+    size: "md",
+    radius: "default"
+};
+const Breadcrumbs = factory((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { id, items, maxItems, itemsBeforeCollapse, itemsAfterCollapse, expanded, defaultExpanded, onExpandedChange, expandLabel, separator, size, radius, className, classNames, ...props } = useProps("Breadcrumbs", defaultProps, _props);
+    const classes = useClassNames("Breadcrumbs", classNames);
+    const _id = useId(id);
+    const [isExpanded, setIsExpanded] = useUncontrolled({
+        value: expanded,
+        defaultValue: defaultExpanded,
+        finalValue: false,
+        onChange: onExpandedChange
+    });
+    const sizeStyles = getSize(size);
+    const visibleItems = buildBreadcrumbsRange({
+        total: items.length,
+        maxItems,
+        itemsBeforeCollapse,
+        itemsAfterCollapse,
+        expanded: isExpanded
+    });
+    if (items.length === 0) {
+        return null;
+    }
+    const resolvedSeparator = separator !== undefined ? (separator) : (_jsx(ChevronIcon, { direction: "right", size: sizeStyles.iconSize }));
+    return (_jsx("nav", { ...props, ref: ref, id: _id, "aria-label": props["aria-label"] ?? "Breadcrumb", className: cx("w-full", classes.root, className), children: _jsx("ol", { className: cx("flex flex-wrap items-center", sizeStyles.list, classes.list), children: visibleItems.map((rangeItem, index) => {
+                const showSeparator = index < visibleItems.length - 1;
+                const content = (() => {
+                    if (rangeItem === "collapse") {
+                        return (_jsx("button", { type: "button", "aria-label": expandLabel, className: cx("inline-flex items-center justify-center select-none outline-none transition-colors", "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--refraktor-primary)]", "text-[var(--refraktor-text-secondary)] hover:bg-[var(--refraktor-bg-hover)] hover:text-[var(--refraktor-text)]", sizeStyles.collapse, getRadius(radius), classes.collapse), onClick: () => setIsExpanded(true), children: "..." }));
+                    }
+                    const item = items[rangeItem];
+                    const isCurrent = rangeItem === items.length - 1;
+                    const baseLabelClass = cx("inline-flex min-w-0 items-center truncate", sizeStyles.label);
+                    if (!isCurrent && item.href) {
+                        return (_jsx("a", { href: item.href, target: item.target, rel: item.rel, "aria-label": item.ariaLabel, className: cx(baseLabelClass, "outline-none transition-colors", "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--refraktor-primary)]", "text-[var(--refraktor-text-secondary)] hover:text-[var(--refraktor-text)]", classes.link), children: item.label }));
+                    }
+                    return (_jsx("span", { "aria-label": item.ariaLabel, "aria-current": isCurrent ? "page" : undefined, className: cx(baseLabelClass, isCurrent
+                            ? "font-medium text-[var(--refraktor-text)]"
+                            : "text-[var(--refraktor-text-secondary)]", isCurrent ? classes.current : classes.link), children: item.label }));
+                })();
+                return (_jsxs("li", { className: cx("inline-flex min-w-0 items-center", sizeStyles.item, classes.item), children: [content, showSeparator && (_jsx("span", { "aria-hidden": "true", className: cx("inline-flex items-center text-[var(--refraktor-text-tertiary)]", sizeStyles.separator, classes.separator), children: resolvedSeparator }))] }, rangeItem === "collapse"
+                    ? "collapse"
+                    : `item-${rangeItem}`));
+            }) }) }));
+});
+Breadcrumbs.displayName = "@refraktor/core/Breadcrumbs";
+Breadcrumbs.configure = createComponentConfig();
+Breadcrumbs.classNames = createClassNamesConfig();
+export default Breadcrumbs;

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

@@ -0,0 +1,12 @@
+import { RefraktorSize } from "../../theme";
+type BreadcrumbsSizeStyles = {
+    list: string;
+    item: string;
+    label: string;
+    separator: string;
+    collapse: string;
+    iconSize: number;
+};
+export declare const getSize: (size?: RefraktorSize) => BreadcrumbsSizeStyles;
+export {};
+//# sourceMappingURL=breadcrumbs.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.styles.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumbs/breadcrumbs.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,KAAK,qBAAqB,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CACpB,CAAC;AA6CF,eAAO,MAAM,OAAO,GAAI,OAAM,aAAoB,0BAAgB,CAAC"}

package/build/components/breadcrumbs/breadcrumbs.styles.js

@@ -0,0 +1,43 @@
+const sizes = {
+    xs: {
+        list: "gap-1",
+        item: "gap-1",
+        label: "text-xs",
+        separator: "mx-1",
+        collapse: "h-5 min-w-5 px-1 text-xs",
+        iconSize: 12
+    },
+    sm: {
+        list: "gap-1",
+        item: "gap-1",
+        label: "text-xs",
+        separator: "mx-1",
+        collapse: "h-6 min-w-6 px-1.5 text-xs",
+        iconSize: 14
+    },
+    md: {
+        list: "gap-1.5",
+        item: "gap-1.5",
+        label: "text-sm",
+        separator: "mx-1.5",
+        collapse: "h-7 min-w-7 px-2 text-sm",
+        iconSize: 16
+    },
+    lg: {
+        list: "gap-2",
+        item: "gap-2",
+        label: "text-base",
+        separator: "mx-2",
+        collapse: "h-8 min-w-8 px-2.5 text-base",
+        iconSize: 18
+    },
+    xl: {
+        list: "gap-2.5",
+        item: "gap-2.5",
+        label: "text-lg",
+        separator: "mx-2.5",
+        collapse: "h-9 min-w-9 px-3 text-lg",
+        iconSize: 20
+    }
+};
+export const getSize = (size = "md") => sizes[size];

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

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

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

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

package/build/components/breadcrumbs/breadcrumbs.test.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render as rtlRender } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ThemeProvider } from "../../theme";
+import { render, screen, userEvent } from "../../vitest";
+import Breadcrumbs from "./breadcrumbs";
+const items = [
+    { label: "Home", href: "/" },
+    { label: "Workspace", href: "/workspace" },
+    { label: "Projects", href: "/workspace/projects" },
+    { label: "Refraktor", href: "/workspace/projects/refraktor" },
+    { label: "Components", href: "/workspace/projects/refraktor/components" },
+    { label: "Breadcrumbs" }
+];
+describe("@refraktor/core/Breadcrumbs", () => {
+    it("renders navigation, links and current page", async () => {
+        await render(_jsx(Breadcrumbs, { items: items.slice(0, 3), maxItems: 0 }));
+        expect(screen.getByRole("navigation", { name: "Breadcrumb" })).toBeInTheDocument();
+        expect(screen.getByRole("link", { name: "Home" })).toHaveAttribute("href", "/");
+        expect(screen.getByText("Projects")).toHaveAttribute("aria-current", "page");
+    });
+    it("collapses and expands middle items", async () => {
+        const user = userEvent.setup();
+        const onExpandedChange = vi.fn();
+        await render(_jsx(Breadcrumbs, { items: items, maxItems: 4, onExpandedChange: onExpandedChange }));
+        expect(screen.getByRole("button", { name: /show full breadcrumb path/i })).toBeInTheDocument();
+        expect(screen.queryByText("Projects")).not.toBeInTheDocument();
+        await user.click(screen.getByRole("button", { name: /show full breadcrumb path/i }));
+        expect(onExpandedChange).toHaveBeenCalledWith(true);
+        expect(screen.getByText("Projects")).toBeInTheDocument();
+        expect(screen.queryByRole("button", { name: /show full breadcrumb path/i })).not.toBeInTheDocument();
+    });
+    it("supports itemsBeforeCollapse and itemsAfterCollapse", async () => {
+        await render(_jsx(Breadcrumbs, { items: items, maxItems: 4, itemsBeforeCollapse: 2, itemsAfterCollapse: 2 }));
+        expect(screen.getByText("Home")).toBeInTheDocument();
+        expect(screen.getByText("Workspace")).toBeInTheDocument();
+        expect(screen.getByText("Components")).toBeInTheDocument();
+        expect(screen.getByText("Breadcrumbs")).toBeInTheDocument();
+        expect(screen.queryByText("Projects")).not.toBeInTheDocument();
+    });
+    it("supports controlled expanded mode", async () => {
+        await render(_jsx(Breadcrumbs, { items: items, maxItems: 3, expanded: true }));
+        expect(screen.getByText("Projects")).toBeInTheDocument();
+        expect(screen.queryByRole("button", { name: /show full breadcrumb path/i })).not.toBeInTheDocument();
+    });
+    it("supports custom separator", async () => {
+        await render(_jsx(Breadcrumbs, { items: items.slice(0, 3), separator: "/" }));
+        expect(screen.getAllByText("/")).toHaveLength(2);
+    });
+    it("supports root and slot class names", async () => {
+        const { container } = await render(_jsx(Breadcrumbs, { items: items, maxItems: 4, className: "custom-root", classNames: {
+                list: "custom-list",
+                item: "custom-item",
+                link: "custom-link",
+                current: "custom-current",
+                separator: "custom-separator",
+                collapse: "custom-collapse"
+            } }));
+        const root = container.firstElementChild;
+        expect(root).toHaveClass("custom-root");
+        expect(root.querySelector("ol")).toHaveClass("custom-list");
+        expect(root.querySelector("li")).toHaveClass("custom-item");
+        expect(screen.getByRole("link", { name: "Home" })).toHaveClass("custom-link");
+        expect(root.querySelector('[aria-current="page"]')).toHaveClass("custom-current");
+        expect(screen.getByRole("button", { name: /show full breadcrumb path/i })).toHaveClass("custom-collapse");
+        expect(root.querySelector("span[aria-hidden='true']")).toHaveClass("custom-separator");
+    });
+    it("returns null when items array is empty", () => {
+        const { container } = rtlRender(_jsx(ThemeProvider, { children: _jsx(Breadcrumbs, { items: [] }) }));
+        expect(container.firstChild).toBeNull();
+    });
+});

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

@@ -0,0 +1,56 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, FactoryPayload } from "../../utils";
+export type BreadcrumbsItem = {
+    label: ReactNode;
+    href?: string;
+    target?: ComponentPropsWithoutRef<"a">["target"];
+    rel?: ComponentPropsWithoutRef<"a">["rel"];
+    ariaLabel?: string;
+};
+export type BreadcrumbsClassNames = {
+    root?: string;
+    list?: string;
+    item?: string;
+    link?: string;
+    current?: string;
+    separator?: string;
+    collapse?: string;
+};
+export interface BreadcrumbsProps extends Omit<ComponentPropsWithoutRef<"nav">, "children"> {
+    /** Breadcrumb items in hierarchical order */
+    items: BreadcrumbsItem[];
+    /** Collapse items when amount exceeds this number. Use `0` to disable @default `4` */
+    maxItems?: number;
+    /** Amount of visible items before collapsed section @default `1` */
+    itemsBeforeCollapse?: number;
+    /** Amount of visible items after collapsed section @default `1` */
+    itemsAfterCollapse?: number;
+    /** Collapse state (controlled) */
+    expanded?: boolean;
+    /** Initial collapse state (uncontrolled) @default `false` */
+    defaultExpanded?: boolean;
+    /** Callback called when collapse state changes */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Accessible label for collapse control @default `Show full breadcrumb path` */
+    expandLabel?: string;
+    /** Separator between items */
+    separator?: ReactNode;
+    /** Size of breadcrumb text and controls @default `md` */
+    size?: RefraktorSize;
+    /** Radius of collapse control @default `default` */
+    radius?: RefraktorRadius;
+    /** Used for editing root class name */
+    className?: string;
+    /** Used for styling different parts of the component */
+    classNames?: BreadcrumbsClassNames;
+}
+export interface BreadcrumbsFactoryPayload extends FactoryPayload {
+    props: BreadcrumbsProps;
+    ref: HTMLElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<BreadcrumbsProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<BreadcrumbsClassNames>>;
+    };
+}
+//# sourceMappingURL=breadcrumbs.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.types.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumbs/breadcrumbs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EACH,sBAAsB,EACtB,qBAAqB,EACrB,cAAc,EACjB,MAAM,aAAa,CAAC;AAErB,MAAM,MAAM,eAAe,GAAG;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,wBAAwB,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC;IACjD,GAAG,CAAC,EAAE,wBAAwB,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,WAAW,gBACb,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACzD,6CAA6C;IAC7C,KAAK,EAAE,eAAe,EAAE,CAAC;IAEzB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,oEAAoE;IACpE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,6DAA6D;IAC7D,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAE/C,iFAAiF;IACjF,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,yDAAyD;IACzD,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB,oDAAoD;IACpD,MAAM,CAAC,EAAE,eAAe,CAAC;IAEzB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,wDAAwD;IACxD,UAAU,CAAC,EAAE,qBAAqB,CAAC;CACtC;AAED,MAAM,WAAW,yBAA0B,SAAQ,cAAc;IAC7D,KAAK,EAAE,gBAAgB,CAAC;IACxB,GAAG,EAAE,WAAW,CAAC;IACjB,QAAQ,EAAE;QACN,SAAS,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,gBAAgB,CAAC,CAAC,CAAC;QACtE,UAAU,EAAE,UAAU,CAClB,OAAO,sBAAsB,CAAC,qBAAqB,CAAC,CACvD,CAAC;KACL,CAAC;CACL"}

package/build/components/breadcrumbs/breadcrumbs.types.js

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

package/build/components/breadcrumbs/breadcrumbs.utils.d.ts

@@ -0,0 +1,10 @@
+export type BreadcrumbsRangeItem = number | "collapse";
+export type BreadcrumbsRangeOptions = {
+    total: number;
+    maxItems: number;
+    itemsBeforeCollapse: number;
+    itemsAfterCollapse: number;
+    expanded: boolean;
+};
+export declare function buildBreadcrumbsRange(options: BreadcrumbsRangeOptions): BreadcrumbsRangeItem[];
+//# sourceMappingURL=breadcrumbs.utils.d.ts.map

package/build/components/breadcrumbs/breadcrumbs.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.utils.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumbs/breadcrumbs.utils.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,UAAU,CAAC;AAEvD,MAAM,MAAM,uBAAuB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC;CACrB,CAAC;AAoBF,wBAAgB,qBAAqB,CACjC,OAAO,EAAE,uBAAuB,GACjC,oBAAoB,EAAE,CAuCxB"}

package/build/components/breadcrumbs/breadcrumbs.utils.js

@@ -0,0 +1,36 @@
+function range(start, end) {
+    if (end < start) {
+        return [];
+    }
+    const length = end - start + 1;
+    return Array.from({ length }, (_, index) => start + index);
+}
+function toSafeInteger(value, fallback, minimum = 0) {
+    if (!Number.isFinite(value)) {
+        return fallback;
+    }
+    return Math.max(minimum, Math.trunc(value));
+}
+export function buildBreadcrumbsRange(options) {
+    const total = toSafeInteger(options.total, 0, 0);
+    if (total <= 0) {
+        return [];
+    }
+    const all = range(0, total - 1);
+    if (options.expanded) {
+        return all;
+    }
+    const maxItems = toSafeInteger(options.maxItems, 0, 0);
+    if (maxItems === 0 || total <= maxItems) {
+        return all;
+    }
+    const itemsBeforeCollapse = Math.min(toSafeInteger(options.itemsBeforeCollapse, 1, 1), total - 1);
+    const itemsAfterCollapse = Math.min(toSafeInteger(options.itemsAfterCollapse, 1, 1), total - itemsBeforeCollapse);
+    const hiddenItems = total - itemsBeforeCollapse - Math.max(itemsAfterCollapse, 1);
+    if (hiddenItems <= 1) {
+        return all;
+    }
+    const start = range(0, itemsBeforeCollapse - 1);
+    const end = range(total - itemsAfterCollapse, total - 1);
+    return [...start, "collapse", ...end];
+}

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

@@ -0,0 +1,3 @@
+export { default as Breadcrumbs } from "./breadcrumbs";
+export type { BreadcrumbsProps, BreadcrumbsItem, BreadcrumbsClassNames } from "./breadcrumbs.types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumbs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EACR,gBAAgB,EAChB,eAAe,EACf,qBAAqB,EACxB,MAAM,qBAAqB,CAAC"}

package/build/components/breadcrumbs/index.js

@@ -0,0 +1 @@
+export { default as Breadcrumbs } from "./breadcrumbs";

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-close.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/drawer-close/drawer-close.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,QAAA,MAAM,WAAW,kEAgChB,CAAC;AAIF,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { XIcon } from "../../../icons";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useDrawerContext } from "../drawer.context";
+const DrawerClose = factory(({ children, className, onClick, type = "button", ...props }, ref) => {
+    const { cx } = useTheme();
+    const { drawer, getStyles } = useDrawerContext();
+    const handleClick = (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) {
+            return;
+        }
+        drawer.close();
+    };
+    return (_jsx("button", { ref: ref, type: type, "aria-label": "Close", className: cx("size-6 cursor-pointer text-[var(--refraktor-text-secondary)] transition-colors hover:text-[var(--refraktor-text)]", getStyles("close"), className), onClick: handleClick, ...props, children: children ?? _jsx(XIcon, {}) }));
+});
+DrawerClose.displayName = "@refraktor/core/Drawer.Close";
+export default DrawerClose;

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

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

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

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

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

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

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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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";
+const positionClasses = {
+    left: "left-0 top-0 h-full max-h-full",
+    right: "right-0 top-0 h-full max-h-full",
+    top: "left-0 top-0 w-full max-w-full",
+    bottom: "bottom-0 left-0 w-full max-w-full"
+};
+const transitionsByPosition = {
+    left: "slide-right",
+    right: "slide-left",
+    top: "slide-down",
+    bottom: "slide-up"
+};
+const DrawerContent = factory(({ children, className, style, ...props }, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { drawer, withinPortal, radius, position, size, transitionProps, headerId, contentRef, getStyles } = useDrawerContext();
+    const setRefs = (node) => {
+        contentRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    };
+    const { className: transitionClassName, ...resolvedTransitionProps } = transitionProps ?? {};
+    const sizeStyles = getSizeStyles(position, size);
+    const content = (_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: {
+                ...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;
+});
+DrawerContent.displayName = "@refraktor/core/Drawer.Content";
+export default DrawerContent;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-header.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/drawer-header/drawer-header.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,0BAA0B,EAAE,MAAM,iBAAiB,CAAC;AAE7D,QAAA,MAAM,YAAY,mEA6BjB,CAAC;AAIF,eAAe,YAAY,CAAC"}

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { DrawerClose } from "../drawer-close";
+import { useDrawerContext } from "../drawer.context";
+const DrawerHeader = factory(({ children, className, id, text, withClose = true, ...props }, ref) => {
+    const { cx } = useTheme();
+    const { headerId, getStyles } = useDrawerContext();
+    const resolvedId = id ?? headerId;
+    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(DrawerClose, { className: "static shrink-0 self-center" }))] }));
+});
+DrawerHeader.displayName = "@refraktor/core/Drawer.Header";
+export default DrawerHeader;

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

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

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

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

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

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

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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 blurValue = typeof blur === "number" ? `${blur}px` : blur;
+    const backdropFilterValue = blurValue !== "0" && blurValue !== "0px"
+        ? `blur(${blurValue})`
+        : undefined;
+    const handleMouseDown = (event) => {
+        onMouseDown?.(event);
+        if (event.defaultPrevented ||
+            !closeOnClick ||
+            !closeOnClickOutside) {
+            return;
+        }
+        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: {
+                backgroundColor: `rgba(0, 0, 0, ${backgroundOpacity})`,
+                backdropFilter: backdropFilterValue,
+                ...style
+            }, onMouseDown: handleMouseDown, ...props }) }));
+    return withinPortal ? (_jsx(Portal, { children: overlayContent })) : (overlayContent);
+});
+DrawerOverlay.displayName = "@refraktor/core/Drawer.Overlay";
+export default DrawerOverlay;

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

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

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

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

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

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

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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from "@refraktor/utils";
+import { useRef } from "react";
+import { RemoveScroll } from "react-remove-scroll";
+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"
+};
+const DrawerRoot = factory((_props, ref) => {
+    const { cx } = useTheme();
+    const { id, children, opened, defaultOpened, onOpenedChange, closeOnClickOutside, closeOnEscape, lockScroll, withinPortal, radius, position, size, transitionProps, className, classNames, ...props } = useProps("Drawer", defaultProps, _props);
+    const classes = useClassNames("Drawer", classNames);
+    const _id = useId(id);
+    const headerId = `${_id}-header`;
+    const contentRef = useRef(null);
+    const drawer = useDrawer({
+        opened,
+        defaultOpened,
+        onOpenedChange,
+        closeOnClickOutside,
+        closeOnEscape,
+        contentRef
+    });
+    const getStyles = (part) => classes[part];
+    return (_jsx(DrawerProvider, { value: {
+            drawer,
+            closeOnClickOutside,
+            lockScroll,
+            withinPortal,
+            radius,
+            position,
+            size,
+            transitionProps,
+            headerId,
+            contentRef,
+            classNames,
+            getStyles
+        }, children: _jsx(RemoveScroll, { enabled: drawer.opened && lockScroll, 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";