@spatika/react 1.0.0 → 1.2.0

package/dist/primitives/Grid.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+export type BoxProps = React.ComponentPropsWithoutRef<"div"> & {
+    component?: React.ElementType;
+    asChild?: boolean;
+};
+/**
+ * Generic layout primitive. Prefer Stack / Grid / Paper for structured layouts.
+ */
+declare const Box: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    component?: React.ElementType;
+    asChild?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export type GridProps = React.ComponentPropsWithoutRef<"div"> & {
+    container?: boolean;
+    item?: boolean;
+    spacing?: number;
+    columns?: 12;
+    xs?: number | "auto";
+    sm?: number | "auto";
+    md?: number | "auto";
+    lg?: number | "auto";
+    size?: number | "grow";
+};
+/**
+ * 12-column CSS grid. Use `container` on the parent and breakpoint spans on items.
+ */
+declare function Grid({ container, item: _item, spacing, columns: _columns, xs, sm, md, lg, size, className, ...props }: GridProps): React.JSX.Element;
+declare namespace Grid {
+    var displayName: string;
+}
+export { Box, Grid };
+//# sourceMappingURL=Grid.d.ts.map

package/dist/primitives/Grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/primitives/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,QAAQ,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IAC7D,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;GAEG;AACH,QAAA,MAAM,GAAG;gBAPK,KAAK,CAAC,WAAW;cACnB,OAAO;wCAWlB,CAAC;AA6BF,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,EAAE,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAAC;AAOF;;GAEG;AACH,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,IAAI,EAAE,KAAK,EACX,OAAW,EACX,OAAO,EAAE,QAAa,EACtB,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,SAAS,qBAmBX;kBA/BQ,IAAI;;;AAkCb,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC"}

package/dist/primitives/Grid.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "../lib/slot";
+import { cn } from "../lib/cn";
+/**
+ * Generic layout primitive. Prefer Stack / Grid / Paper for structured layouts.
+ */
+const Box = React.forwardRef(({ className, component = "div", asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : component;
+    return _jsx(Comp, { ref: ref, "data-slot": "box", className: cn(className), ...props });
+});
+Box.displayName = "Box";
+const gapClass = {
+    0: "gap-0",
+    1: "gap-1",
+    2: "gap-2",
+    3: "gap-3",
+    4: "gap-4",
+    5: "gap-5",
+    6: "gap-6",
+    8: "gap-8",
+};
+const spanClass = {
+    1: "col-span-1",
+    2: "col-span-2",
+    3: "col-span-3",
+    4: "col-span-4",
+    5: "col-span-5",
+    6: "col-span-6",
+    7: "col-span-7",
+    8: "col-span-8",
+    9: "col-span-9",
+    10: "col-span-10",
+    11: "col-span-11",
+    12: "col-span-12",
+};
+function spanFor(value) {
+    if (value == null || value === "auto" || value === "grow")
+        return undefined;
+    return spanClass[value] ?? "col-span-12";
+}
+/**
+ * 12-column CSS grid. Use `container` on the parent and breakpoint spans on items.
+ */
+function Grid({ container, item: _item, spacing = 2, columns: _columns = 12, xs, sm, md, lg, size, className, ...props }) {
+    const span = spanFor(typeof size === "number" ? size : xs);
+    return (_jsx("div", { "data-slot": "grid", "data-container": container ? "" : undefined, "data-item": _item || !container ? "" : undefined, className: cn(container && "grid grid-cols-12", container && (gapClass[spacing] ?? "gap-2"), !container && (span ?? (size === "grow" ? "col-span-12" : "col-span-12")), sm && typeof sm === "number" && spanClass[sm]?.replace("col-span", "sm:col-span"), md && typeof md === "number" && spanClass[md]?.replace("col-span", "md:col-span"), lg && typeof lg === "number" && spanClass[lg]?.replace("col-span", "lg:col-span"), className), ...props }));
+}
+Grid.displayName = "Grid";
+export { Box, Grid };

package/dist/primitives/IconButton.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const iconButtonVariants: (props?: ({
+    variant?: "filled" | "outline" | "ghost" | "glass" | null | undefined;
+    size?: "touch" | "sm" | "lg" | "md" | null | undefined;
+    shape?: "circular" | "rounded" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type IconButtonProps = React.ComponentPropsWithoutRef<"button"> & VariantProps<typeof iconButtonVariants> & {
+    asChild?: boolean;
+};
+/**
+ * Compact icon-only control. Prefer {@link HeaderIconButton} inside app chrome.
+ */
+declare const IconButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
+    variant?: "filled" | "outline" | "ghost" | "glass" | null | undefined;
+    size?: "touch" | "sm" | "lg" | "md" | null | undefined;
+    shape?: "circular" | "rounded" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { IconButton, iconButtonVariants };
+//# sourceMappingURL=IconButton.d.ts.map

package/dist/primitives/IconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/primitives/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,kBAAkB;;;;8EA2BvB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GACpE,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ;;GAEG;AACH,QAAA,MAAM,UAAU;;;;;cANF,OAAO;2CAmBpB,CAAC;AAGF,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/primitives/IconButton.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { Slot } from "../lib/slot";
+import { cn } from "../lib/cn";
+const iconButtonVariants = cva("inline-flex shrink-0 items-center justify-center outline-none transition-[color,background-color,border-color,transform] duration-150 focus-visible:ring-ring/50 focus-visible:ring-[3px] active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variants: {
+        variant: {
+            ghost: "text-muted-foreground hover:bg-muted/40 hover:text-foreground",
+            outline: "border border-border/60 bg-background/80 text-foreground hover:bg-muted/40",
+            glass: "glass border-border/50 text-foreground hover:border-primary/30 hover:text-primary",
+            filled: "bg-primary text-primary-foreground hover:bg-primary/90",
+        },
+        size: {
+            sm: "size-8 rounded-lg",
+            md: "size-10 rounded-xl",
+            lg: "size-12 rounded-xl",
+            touch: "size-11 rounded-xl",
+        },
+        shape: {
+            rounded: "",
+            circular: "rounded-full",
+        },
+    },
+    defaultVariants: {
+        variant: "ghost",
+        size: "md",
+        shape: "rounded",
+    },
+});
+/**
+ * Compact icon-only control. Prefer {@link HeaderIconButton} inside app chrome.
+ */
+const IconButton = React.forwardRef(({ className, variant, size, shape, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (_jsx(Comp, { ref: ref, type: asChild ? undefined : "button", "data-slot": "icon-button", className: cn(iconButtonVariants({ variant, size, shape }), className), ...props }));
+});
+IconButton.displayName = "IconButton";
+export { IconButton, iconButtonVariants };

package/dist/primitives/ImageList.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+export type ImageListProps = React.ComponentPropsWithoutRef<"ul"> & {
+    cols?: number;
+    gap?: number;
+    variant?: "standard" | "quilted" | "masonry";
+    rowHeight?: number;
+};
+declare function ImageList({ cols, gap, variant, rowHeight, className, style, children, ...props }: ImageListProps): React.JSX.Element;
+declare namespace ImageList {
+    var displayName: string;
+}
+export type ImageListItemProps = React.ComponentPropsWithoutRef<"li"> & {
+    cols?: number;
+    rows?: number;
+};
+declare function ImageListItem({ cols, rows, className, style, ...props }: ImageListItemProps): React.JSX.Element;
+declare namespace ImageListItem {
+    var displayName: string;
+}
+export type ImageListItemBarProps = React.ComponentPropsWithoutRef<"div"> & {
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    actionIcon?: React.ReactNode;
+    position?: "bottom" | "top";
+};
+declare function ImageListItemBar({ title, subtitle, actionIcon, position, className, ...props }: ImageListItemBarProps): React.JSX.Element;
+declare namespace ImageListItemBar {
+    var displayName: string;
+}
+export { ImageList, ImageListItem, ImageListItemBar };
+//# sourceMappingURL=ImageList.d.ts.map

package/dist/primitives/ImageList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageList.d.ts","sourceRoot":"","sources":["../../src/primitives/ImageList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,GAAG;IAClE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,iBAAS,SAAS,CAAC,EACjB,IAAQ,EACR,GAAO,EACP,OAAoB,EACpB,SAAe,EACf,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,qBA2BhB;kBApCQ,SAAS;;;AAuClB,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,GAAG;IACtE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,iBAAS,aAAa,CAAC,EAAE,IAAQ,EAAE,IAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,qBAiB5F;kBAjBQ,aAAa;;;AAoBtB,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IAC1E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC7B,CAAC;AAEF,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,UAAU,EACV,QAAmB,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,qBAoBvB;kBA3BQ,gBAAgB;;;AA8BzB,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/primitives/ImageList.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn";
+function ImageList({ cols = 2, gap = 8, variant = "standard", rowHeight = 180, className, style, children, ...props }) {
+    return (_jsx("ul", { "data-slot": "image-list", "data-variant": variant, className: cn("m-0 w-full list-none p-0", variant === "masonry"
+            ? "block [&>[data-slot=image-list-item]]:mb-2 [&>[data-slot=image-list-item]]:h-auto"
+            : "grid", className), style: {
+            gap,
+            ...(variant === "masonry"
+                ? { columnCount: cols, columnGap: gap }
+                : {
+                    gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
+                    gridAutoRows: rowHeight,
+                }),
+            ...style,
+        }, ...props, children: children }));
+}
+ImageList.displayName = "ImageList";
+function ImageListItem({ cols = 1, rows = 1, className, style, ...props }) {
+    return (_jsx("li", { "data-slot": "image-list-item", className: cn("relative h-full min-h-0 overflow-hidden rounded-xl [&_img]:absolute [&_img]:inset-0 [&_img]:size-full [&_img]:object-cover", className), style: {
+            gridColumn: `span ${cols}`,
+            gridRow: `span ${rows}`,
+            breakInside: "avoid",
+            ...style,
+        }, ...props }));
+}
+ImageListItem.displayName = "ImageListItem";
+function ImageListItemBar({ title, subtitle, actionIcon, position = "bottom", className, ...props }) {
+    return (_jsxs("div", { "data-slot": "image-list-item-bar", className: cn("absolute inset-x-0 z-10 flex items-end justify-between gap-2 p-3 text-white", position === "top"
+            ? "top-0 bg-gradient-to-b from-black/70 to-transparent"
+            : "bottom-0 bg-gradient-to-t from-black/70 to-transparent", className), ...props, children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm font-bold", children: title }), subtitle ? _jsx("div", { className: "truncate text-xs opacity-80", children: subtitle }) : null] }), actionIcon] }));
+}
+ImageListItemBar.displayName = "ImageListItemBar";
+export { ImageList, ImageListItem, ImageListItemBar };

package/dist/primitives/InputAdornment.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+export type InputAdornmentProps = React.ComponentPropsWithoutRef<"span"> & {
+    position?: "start" | "end";
+};
+declare function InputAdornment({ position, className, ...props }: InputAdornmentProps): React.JSX.Element;
+declare namespace InputAdornment {
+    var displayName: string;
+}
+export type OutlinedInputProps = React.ComponentPropsWithoutRef<"input"> & {
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    error?: boolean;
+    fullWidth?: boolean;
+};
+declare const OutlinedInput: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    error?: boolean;
+    fullWidth?: boolean;
+} & React.RefAttributes<HTMLInputElement>>;
+declare const FilledInput: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    error?: boolean;
+    fullWidth?: boolean;
+} & React.RefAttributes<HTMLInputElement>>;
+export { InputAdornment, OutlinedInput, FilledInput };
+//# sourceMappingURL=InputAdornment.d.ts.map

package/dist/primitives/InputAdornment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputAdornment.d.ts","sourceRoot":"","sources":["../../src/primitives/InputAdornment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,GAAG;IACzE,QAAQ,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CAC5B,CAAC;AAEF,iBAAS,cAAc,CAAC,EACtB,QAAkB,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,mBAAmB,qBAarB;kBAjBQ,cAAc;;;AAoBvB,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,GAAG;IACzE,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,aAAa;qBANA,KAAK,CAAC,SAAS;mBACjB,KAAK,CAAC,SAAS;YACtB,OAAO;gBACH,OAAO;0CAyBpB,CAAC;AAGF,QAAA,MAAM,WAAW;qBA/BE,KAAK,CAAC,SAAS;mBACjB,KAAK,CAAC,SAAS;YACtB,OAAO;gBACH,OAAO;0CAkDpB,CAAC;AAGF,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,EAAE,CAAC"}

package/dist/primitives/InputAdornment.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn";
+import { Input } from "./Input";
+function InputAdornment({ position = "start", className, ...props }) {
+    return (_jsx("span", { "data-slot": "input-adornment", "data-position": position, className: cn("inline-flex shrink-0 items-center text-sm font-medium text-muted-foreground", position === "start" ? "pl-1 pr-1.5" : "pl-1.5 pr-1", className), ...props }));
+}
+InputAdornment.displayName = "InputAdornment";
+const OutlinedInput = React.forwardRef(({ startAdornment, endAdornment, error, fullWidth, className, ...props }, ref) => (_jsxs("div", { "data-slot": "outlined-input", className: cn("flex h-9 items-center rounded-md border border-input bg-input-background px-2", "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]", error && "border-destructive", fullWidth && "w-full", className), children: [startAdornment, _jsx(Input, { ref: ref, "aria-invalid": error || undefined, className: "h-full flex-1 border-0 bg-transparent px-1 shadow-none focus-visible:ring-0", ...props }), endAdornment] })));
+OutlinedInput.displayName = "OutlinedInput";
+const FilledInput = React.forwardRef(({ startAdornment, endAdornment, error, fullWidth, className, ...props }, ref) => (_jsxs("div", { "data-slot": "filled-input", className: cn("flex h-9 items-center rounded-md border-b border-transparent bg-muted/50 px-2", "focus-within:border-primary focus-within:bg-muted/70", error && "border-destructive", fullWidth && "w-full", className), children: [startAdornment, _jsx(Input, { ref: ref, "aria-invalid": error || undefined, className: "h-full flex-1 border-0 bg-transparent px-1 shadow-none focus-visible:ring-0", ...props }), endAdornment] })));
+FilledInput.displayName = "FilledInput";
+export { InputAdornment, OutlinedInput, FilledInput };

package/dist/primitives/Link.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const linkVariants: (props?: ({
+    color?: "inherit" | "primary" | "muted" | null | undefined;
+    underline?: "none" | "always" | "hover" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type LinkProps = Omit<React.ComponentPropsWithoutRef<"a">, "color"> & VariantProps<typeof linkVariants> & {
+    asChild?: boolean;
+};
+declare const Link: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "color"> & VariantProps<(props?: ({
+    color?: "inherit" | "primary" | "muted" | null | undefined;
+    underline?: "none" | "always" | "hover" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLAnchorElement>>;
+export { Link, linkVariants };
+//# sourceMappingURL=Link.d.ts.map

package/dist/primitives/Link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/primitives/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,YAAY;;;8EAoBjB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,GACxE,YAAY,CAAC,OAAO,YAAY,CAAC,GAAG;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ,QAAA,MAAM,IAAI;;;;cAHI,OAAO;2CAepB,CAAC;AAGF,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC"}

package/dist/primitives/Link.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { Slot } from "../lib/slot";
+import { cn } from "../lib/cn";
+const linkVariants = cva("inline font-medium underline-offset-4 outline-none transition-colors focus-visible:ring-ring/50 focus-visible:ring-[3px] rounded-sm", {
+    variants: {
+        color: {
+            primary: "text-primary hover:text-primary/80",
+            inherit: "text-inherit hover:text-primary",
+            muted: "text-muted-foreground hover:text-foreground",
+        },
+        underline: {
+            always: "underline",
+            hover: "hover:underline",
+            none: "no-underline",
+        },
+    },
+    defaultVariants: {
+        color: "primary",
+        underline: "hover",
+    },
+});
+const Link = React.forwardRef(({ className, color, underline, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a";
+    return (_jsx(Comp, { ref: ref, "data-slot": "link", className: cn(linkVariants({ color, underline }), className), ...props }));
+});
+Link.displayName = "Link";
+export { Link, linkVariants };

package/dist/primitives/List.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+export type ListProps = React.ComponentPropsWithoutRef<"ul"> & {
+    dense?: boolean;
+    disablePadding?: boolean;
+};
+declare const List: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
+    dense?: boolean;
+    disablePadding?: boolean;
+} & React.RefAttributes<HTMLUListElement>>;
+export type ListItemProps = React.ComponentPropsWithoutRef<"li"> & {
+    disablePadding?: boolean;
+    disableGutters?: boolean;
+};
+declare const ListItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+    disablePadding?: boolean;
+    disableGutters?: boolean;
+} & React.RefAttributes<HTMLLIElement>>;
+export type ListItemButtonProps = React.ComponentPropsWithoutRef<"button"> & {
+    selected?: boolean;
+};
+declare const ListItemButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    selected?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare function ListItemIcon({ className, ...props }: React.ComponentPropsWithoutRef<"span">): React.JSX.Element;
+declare namespace ListItemIcon {
+    var displayName: string;
+}
+export type ListItemTextProps = React.ComponentPropsWithoutRef<"div"> & {
+    primary?: React.ReactNode;
+    secondary?: React.ReactNode;
+};
+declare function ListItemText({ className, primary, secondary, children, ...props }: ListItemTextProps): React.JSX.Element;
+declare namespace ListItemText {
+    var displayName: string;
+}
+declare function ListSubheader({ className, ...props }: React.ComponentPropsWithoutRef<"li">): React.JSX.Element;
+declare namespace ListSubheader {
+    var displayName: string;
+}
+export { List, ListItem, ListItemButton, ListItemIcon, ListItemText, ListSubheader };
+//# sourceMappingURL=List.d.ts.map

package/dist/primitives/List.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../src/primitives/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,GAAG;IAC7D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,QAAA,MAAM,IAAI;YAJA,OAAO;qBACE,OAAO;0CAiBzB,CAAC;AAGF,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,GAAG;IACjE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,QAAA,MAAM,QAAQ;qBAJK,OAAO;qBACP,OAAO;uCAgBzB,CAAC;AAGF,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GAAG;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,cAAc;eAHP,OAAO;2CAmBnB,CAAC;AAGF,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,qBAWpF;kBAXQ,YAAY;;;AAcrB,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACtE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AAEF,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,iBAAiB,qBASnB;kBAfQ,YAAY;;;AAkBrB,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,qBAWnF;kBAXQ,aAAa;;;AActB,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,cAAc,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC"}

package/dist/primitives/List.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn";
+const List = React.forwardRef(({ className, dense, disablePadding, ...props }, ref) => (_jsx("ul", { ref: ref, "data-slot": "list", "data-dense": dense ? "" : undefined, className: cn("m-0 list-none", disablePadding ? "p-0" : dense ? "py-1" : "py-2", className), ...props })));
+List.displayName = "List";
+const ListItem = React.forwardRef(({ className, disablePadding, disableGutters, ...props }, ref) => (_jsx("li", { ref: ref, "data-slot": "list-item", className: cn("flex items-center gap-3", disablePadding ? "p-0" : disableGutters ? "py-2" : "px-4 py-2.5", className), ...props })));
+ListItem.displayName = "ListItem";
+const ListItemButton = React.forwardRef(({ className, selected, ...props }, ref) => (_jsx("button", { ref: ref, type: "button", "data-slot": "list-item-button", "data-selected": selected ? "" : undefined, className: cn("flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm font-medium outline-none transition-colors", "hover:bg-muted/40 focus-visible:ring-ring/50 focus-visible:ring-[3px]", selected && "bg-primary/10 text-primary", className), ...props })));
+ListItemButton.displayName = "ListItemButton";
+function ListItemIcon({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "list-item-icon", className: cn("inline-flex size-8 shrink-0 items-center justify-center text-muted-foreground [&_svg]:size-4", className), ...props }));
+}
+ListItemIcon.displayName = "ListItemIcon";
+function ListItemText({ className, primary, secondary, children, ...props }) {
+    return (_jsxs("div", { "data-slot": "list-item-text", className: cn("min-w-0 flex-1", className), ...props, children: [_jsx("div", { className: "truncate text-sm font-semibold", children: primary ?? children }), secondary ? (_jsx("div", { className: "truncate text-xs font-medium text-muted-foreground", children: secondary })) : null] }));
+}
+ListItemText.displayName = "ListItemText";
+function ListSubheader({ className, ...props }) {
+    return (_jsx("li", { "data-slot": "list-subheader", className: cn("px-4 py-2 text-[10px] font-black uppercase tracking-widest text-muted-foreground", className), ...props }));
+}
+ListSubheader.displayName = "ListSubheader";
+export { List, ListItem, ListItemButton, ListItemIcon, ListItemText, ListSubheader };

package/dist/primitives/Masonry.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export type MasonryProps = React.ComponentPropsWithoutRef<"div"> & {
+    columns?: number;
+    spacing?: number;
+};
+/**
+ * CSS multi-column masonry. Children should be block-level items.
+ */
+declare function Masonry({ columns, spacing, className, style, children, ...props }: MasonryProps): React.JSX.Element;
+declare namespace Masonry {
+    var displayName: string;
+}
+export { Masonry };
+//# sourceMappingURL=Masonry.d.ts.map

package/dist/primitives/Masonry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Masonry.d.ts","sourceRoot":"","sources":["../../src/primitives/Masonry.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACjE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,iBAAS,OAAO,CAAC,EAAE,OAAW,EAAE,OAAY,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,qBAiBjG;kBAjBQ,OAAO;;;AAoBhB,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/primitives/Masonry.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn";
+/**
+ * CSS multi-column masonry. Children should be block-level items.
+ */
+function Masonry({ columns = 3, spacing = 16, className, style, children, ...props }) {
+    return (_jsx("div", { "data-slot": "masonry", className: cn(className), style: {
+            columnCount: columns,
+            columnGap: spacing,
+            ...style,
+        }, ...props, children: React.Children.map(children, (child) => (_jsx("div", { className: "mb-4 break-inside-avoid", children: child }))) }));
+}
+Masonry.displayName = "Masonry";
+export { Masonry };

package/dist/primitives/Menu.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+export type MenuProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Anchor element — typically the button that opened the menu. */
+    anchorEl?: HTMLElement | null;
+    children?: React.ReactNode;
+};
+declare function Menu({ open: openProp, defaultOpen, onOpenChange, anchorEl, children, }: MenuProps): React.JSX.Element | null;
+declare namespace Menu {
+    var displayName: string;
+}
+declare function MenuList({ className, ...props }: React.ComponentPropsWithoutRef<"div">): React.JSX.Element;
+declare namespace MenuList {
+    var displayName: string;
+}
+export type MenuItemProps = React.ComponentPropsWithoutRef<"button"> & {
+    selected?: boolean;
+    dense?: boolean;
+};
+declare function MenuItem({ className, selected, dense, ...props }: MenuItemProps): React.JSX.Element;
+declare namespace MenuItem {
+    var displayName: string;
+}
+declare const MenuAnchor: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Menu, MenuList, MenuItem, MenuAnchor };
+//# sourceMappingURL=Menu.d.ts.map

package/dist/primitives/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/primitives/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,iBAAS,IAAI,CAAC,EACZ,IAAI,EAAE,QAAQ,EACd,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,QAAQ,GACT,EAAE,SAAS,4BAiDX;kBAvDQ,IAAI;;;AA0Db,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,qBAE/E;kBAFQ,QAAQ;;;AAKjB,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GAAG;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,qBAiBxE;kBAjBQ,QAAQ;;;AAoBjB,QAAA,MAAM,UAAU,kLAEf,CAAC;AAGF,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC"}

package/dist/primitives/Menu.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Portal } from "../lib/portal";
+import { useControllableState } from "../lib/use-controllable-state";
+import { useDismissable } from "../lib/use-dismissable";
+import { useFloatingPosition } from "../lib/use-floating-position";
+import { cn } from "../lib/cn";
+import { OVERLAY_Z_INDEX } from "../lib/overlay-stack";
+function Menu({ open: openProp, defaultOpen, onOpenChange, anchorEl, children, }) {
+    const [open = false, setOpen] = useControllableState({
+        prop: openProp,
+        defaultProp: defaultOpen ?? false,
+        onChange: onOpenChange,
+    });
+    const triggerRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    React.useEffect(() => {
+        triggerRef.current = anchorEl ?? null;
+    }, [anchorEl]);
+    const position = useFloatingPosition({
+        open,
+        triggerRef,
+        contentRef,
+        side: "bottom",
+        align: "start",
+        sideOffset: 4,
+    });
+    useDismissable({
+        enabled: open,
+        onDismiss: () => setOpen(false),
+        refs: [triggerRef, contentRef],
+    });
+    if (!open)
+        return null;
+    return (_jsx(Portal, { children: _jsx("div", { ref: contentRef, role: "menu", "data-slot": "menu", className: "glass-menu z-[10000] min-w-40 overflow-hidden rounded-xl border border-border/50 p-1 shadow-xl outline-none", style: {
+                position: "fixed",
+                top: position?.top ?? 0,
+                left: position?.left ?? 0,
+                zIndex: OVERLAY_Z_INDEX.menu,
+                opacity: position ? 1 : 0,
+            }, children: children }) }));
+}
+Menu.displayName = "Menu";
+function MenuList({ className, ...props }) {
+    return _jsx("div", { role: "menu", "data-slot": "menu-list", className: cn("flex flex-col p-1", className), ...props });
+}
+MenuList.displayName = "MenuList";
+function MenuItem({ className, selected, dense, ...props }) {
+    return (_jsx("button", { type: "button", role: "menuitem", "data-slot": "menu-item", "data-selected": selected ? "" : undefined, className: cn("flex w-full items-center gap-2 rounded-lg px-3 text-left text-sm font-medium outline-none", dense ? "py-1.5" : "py-2", selected ? "bg-primary/10 text-primary" : "hover:bg-muted/50", "disabled:pointer-events-none disabled:opacity-40", className), ...props }));
+}
+MenuItem.displayName = "MenuItem";
+const MenuAnchor = React.forwardRef((props, ref) => _jsx("button", { ref: ref, type: "button", "data-slot": "menu-anchor", ...props }));
+MenuAnchor.displayName = "MenuAnchor";
+export { Menu, MenuList, MenuItem, MenuAnchor };

package/dist/primitives/MobileStepper.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export type MobileStepperProps = React.ComponentPropsWithoutRef<"div"> & {
+    steps: number;
+    activeStep?: number;
+    position?: "static" | "bottom" | "top";
+    variant?: "dots" | "text" | "progress";
+    nextButton?: React.ReactNode;
+    backButton?: React.ReactNode;
+};
+declare function MobileStepper({ steps, activeStep, position, variant, nextButton, backButton, className, ...props }: MobileStepperProps): React.JSX.Element;
+declare namespace MobileStepper {
+    var displayName: string;
+}
+export { MobileStepper };
+//# sourceMappingURL=MobileStepper.d.ts.map

package/dist/primitives/MobileStepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileStepper.d.ts","sourceRoot":"","sources":["../../src/primitives/MobileStepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC;IACvC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,CAAC;AAEF,iBAAS,aAAa,CAAC,EACrB,KAAK,EACL,UAAc,EACd,QAAmB,EACnB,OAAgB,EAChB,UAAU,EACV,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE,kBAAkB,qBAsCpB;kBA/CQ,aAAa;;;AAkDtB,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/primitives/MobileStepper.js

@@ -0,0 +1,8 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn";
+import { LinearProgress } from "./Progress";
+function MobileStepper({ steps, activeStep = 0, position = "static", variant = "dots", nextButton, backButton, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "mobile-stepper", "data-position": position, className: cn("flex w-full items-center gap-3 rounded-xl border border-border/40 bg-card/40 px-3 py-2", position === "bottom" && "sticky bottom-0", position === "top" && "sticky top-0", className), ...props, children: [backButton, _jsx("div", { className: "min-w-0 flex-1", children: variant === "text" ? (_jsxs("p", { className: "text-center text-xs font-bold text-muted-foreground", children: [activeStep + 1, " / ", steps] })) : variant === "progress" ? (_jsx(LinearProgress, { value: ((activeStep + 1) / steps) * 100 })) : (_jsx("div", { className: "flex items-center justify-center gap-1.5", children: Array.from({ length: steps }, (_, i) => (_jsx("span", { className: cn("size-1.5 rounded-full", i === activeStep ? "bg-primary" : "bg-border") }, i))) })) }), nextButton] }));
+}
+MobileStepper.displayName = "MobileStepper";
+export { MobileStepper };

package/dist/primitives/Modal.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+export type ModalProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"> & {
+    open?: boolean;
+    onClose?: () => void;
+    children?: React.ReactNode;
+    keepMounted?: boolean;
+    disableEscapeKeyDown?: boolean;
+    hideBackdrop?: boolean;
+};
+/**
+ * Low-level modal. Prefer Dialog for titled confirmations.
+ */
+declare function Modal({ open, onClose, children, keepMounted, disableEscapeKeyDown, hideBackdrop, className, style, ...props }: ModalProps): React.JSX.Element | null;
+declare namespace Modal {
+    var displayName: string;
+}
+export { Modal };
+//# sourceMappingURL=Modal.d.ts.map

package/dist/primitives/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/primitives/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACjF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,iBAAS,KAAK,CAAC,EACb,IAAY,EACZ,OAAO,EACP,QAAQ,EACR,WAAW,EACX,oBAAoB,EACpB,YAAY,EACZ,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,UAAU,4BAqCZ;kBA/CQ,KAAK;;;AAkDd,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/primitives/Modal.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Portal } from "../lib/portal";
+import { useFocusTrap } from "../lib/use-focus-trap";
+import { cn } from "../lib/cn";
+import { OVERLAY_Z_INDEX, fixedLayerStyle } from "../lib/overlay-stack";
+import { Backdrop } from "./Backdrop";
+/**
+ * Low-level modal. Prefer Dialog for titled confirmations.
+ */
+function Modal({ open = false, onClose, children, keepMounted, disableEscapeKeyDown, hideBackdrop, className, style, ...props }) {
+    const contentRef = React.useRef(null);
+    useFocusTrap(contentRef, open);
+    React.useEffect(() => {
+        if (!open || disableEscapeKeyDown || !onClose)
+            return;
+        const onKey = (event) => {
+            if (event.key === "Escape")
+                onClose();
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, disableEscapeKeyDown, onClose]);
+    if (!open && !keepMounted)
+        return null;
+    return (_jsx(Portal, { children: _jsxs("div", { "data-slot": "modal", hidden: !open, className: cn("fixed inset-0 flex items-center justify-center p-4", className), style: fixedLayerStyle(OVERLAY_Z_INDEX.modal, style), ...props, children: [hideBackdrop ? null : (_jsx(Backdrop, { open: open, contained: true, className: "absolute inset-0", onClick: onClose })), _jsx("div", { ref: contentRef, role: "presentation", className: "relative z-10 outline-none", children: children })] }) }));
+}
+Modal.displayName = "Modal";
+export { Modal };