@reforma/components 0.0.0-stage → 0.1.0

package/dist/List/useCellEditMode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCellEditMode.js","sources":["../../src/List/useCellEditMode.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport type { DOMAttributes } from 'react';\n\nexport interface CellEditModeProps {\n    onFocus: NonNullable<DOMAttributes<HTMLElement>['onFocus']>;\n    onBlur: NonNullable<DOMAttributes<HTMLElement>['onBlur']>;\n}\n\n/**\n * Forward keyboard events into an editable embedded in a RAC {@link GridListItem} rather than consuming them as list navigation (e.g. Space for selection toggling).\n *\n * Attach the returned props to {@link HTMLInputElement}, {@link HTMLTextAreaElement}, or contenteditable hosts. Matches the workaround discussed in react-spectrum#4674 via a capture-phase `window` listener.\n */\nexport function useCellEditMode(): CellEditModeProps {\n    const isFocusedRef = useRef(false);\n\n    useEffect(() => {\n        const handler = (event: KeyboardEvent) => {\n            if (isFocusedRef.current) {\n                event.stopPropagation();\n            }\n        };\n\n        window.addEventListener('keydown', handler, true);\n\n        return () => {\n            window.removeEventListener('keydown', handler, true);\n        };\n    }, []);\n\n    const onFocus = useCallback(() => {\n        isFocusedRef.current = true;\n    }, []);\n\n    const onBlur = useCallback(() => {\n        isFocusedRef.current = false;\n    }, []);\n\n    return useMemo(() => ({\n        onFocus,\n        onBlur,\n    }), [onBlur, onFocus]);\n}\n"],"names":["useCellEditMode","isFocusedRef","useRef","useEffect","handler","event","onFocus","useCallback","onBlur","useMemo"],"mappings":";AAMO,SAASA,IAAkB;AAChC,QAAMC,IAAeC,EAAO,EAAK;AACjC,EAAAC,EAAU,MAAM;AACd,UAAMC,IAAU,CAAAC,MAAS;AACvB,MAAIJ,EAAa,WACfI,EAAM,gBAAA;AAAA,IAEV;AACA,kBAAO,iBAAiB,WAAWD,GAAS,EAAI,GACzC,MAAM;AACX,aAAO,oBAAoB,WAAWA,GAAS,EAAI;AAAA,IACrD;AAAA,EACF,GAAG,CAAA,CAAE;AACL,QAAME,IAAUC,EAAY,MAAM;AAChC,IAAAN,EAAa,UAAU;AAAA,EACzB,GAAG,CAAA,CAAE,GACCO,IAASD,EAAY,MAAM;AAC/B,IAAAN,EAAa,UAAU;AAAA,EACzB,GAAG,CAAA,CAAE;AACL,SAAOQ,EAAQ,OAAO;AAAA,IACpB,SAAAH;AAAA,IACA,QAAAE;AAAA,EAAA,IACE,CAACA,GAAQF,CAAO,CAAC;AACvB;"}

package/dist/List/useListHoverHighlight.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from 'react';
+type ListTarget = RefObject<HTMLElement | null> | HTMLElement | null;
+/**
+ * Slides one highlight plate across list/menu rows (hover + keyboard), instead of painting each row.
+ */
+export declare function useListHoverHighlight(list: ListTarget, enabled: boolean, itemSelector?: string): void;
+export {};
+//# sourceMappingURL=useListHoverHighlight.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useListHoverHighlight.d.ts","sourceRoot":"","sources":["../../src/List/useListHoverHighlight.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AASlD,KAAK,UAAU,GAAG,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,WAAW,GAAG,IAAI,CAAC;AAUrE;;GAEG;AACH,wBAAgB,qBAAqB,CACjC,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,OAAO,EAChB,YAAY,GAAE,MAAqB,QAsOtC"}

package/dist/List/useListHoverHighlight.js

@@ -0,0 +1,92 @@
+import { useEffect as Y } from "react";
+import T from "./ListBox.module.css.js";
+const M = `.${T.item}`, R = 16;
+function k(n) {
+  return n instanceof HTMLElement ? n : n?.current ?? null;
+}
+function H(n, g, a = M) {
+  const $ = n instanceof HTMLElement ? n : null;
+  Y(() => {
+    const t = k(n);
+    if (!t || !g)
+      return;
+    let h = !1, i = null, c = 0, d = 0, u = !1;
+    const m = (e) => {
+      if (!(e instanceof Element))
+        return null;
+      const r = e.closest(a);
+      return !r || !t.contains(r) ? null : r;
+    }, X = (e) => e.hasAttribute("data-disabled") || e.hasAttribute("data-selected") || e.hasAttribute("data-highlighted") || e.hasAttribute("data-nested-selected"), p = () => t.querySelector(`${a}[data-focus-visible]`), y = (e, r) => {
+      if (!i)
+        return !1;
+      const o = i.getBoundingClientRect();
+      return e >= o.left && e <= o.right && r >= o.top - R && r <= o.bottom + R;
+    }, b = (e) => {
+      const r = t.getBoundingClientRect(), o = e.getBoundingClientRect();
+      t.style.setProperty("--reforma-listbox-highlight-top", `${o.top - r.top + t.scrollTop}px`), t.style.setProperty("--reforma-listbox-highlight-left", `${o.left - r.left + t.scrollLeft}px`), t.style.setProperty("--reforma-listbox-highlight-width", `${o.width}px`), t.style.setProperty("--reforma-listbox-highlight-height", `${o.height}px`);
+    }, s = () => {
+      i = null, t.style.setProperty("--reforma-listbox-highlight-opacity", "0"), t.removeAttribute("data-highlight-ready"), t.removeAttribute("data-highlight-danger");
+    }, l = (e) => {
+      if (!e || X(e)) {
+        s();
+        return;
+      }
+      const r = i == null;
+      r && t.removeAttribute("data-highlight-ready"), i = e, b(e), t.toggleAttribute("data-highlight-danger", e.classList.contains(T.itemDanger)), t.style.setProperty("--reforma-listbox-highlight-opacity", "1"), r && requestAnimationFrame(() => {
+        i && t.setAttribute("data-highlight-ready", "");
+      });
+    }, v = (e, r, o) => {
+      h = !1;
+      const f = m(e);
+      if (f) {
+        f !== i && l(f);
+        return;
+      }
+      y(r, o) || s();
+    }, E = (e) => {
+      c = e.clientX, d = e.clientY, u = !0, v(e.target, e.clientX, e.clientY);
+    }, L = (e) => {
+      c = e.clientX, d = e.clientY, u = !0, v(document.elementFromPoint(e.clientX, e.clientY), e.clientX, e.clientY);
+    }, P = (e) => {
+      if (!(e.relatedTarget instanceof Node && t.contains(e.relatedTarget)) && (u = !1, !i?.hasAttribute("data-open"))) {
+        if (h) {
+          l(p());
+          return;
+        }
+        s();
+      }
+    }, x = () => {
+      h = !0, requestAnimationFrame(() => {
+        h && l(p());
+      });
+    }, A = () => {
+      if (t.removeAttribute("data-highlight-ready"), u) {
+        const e = m(document.elementFromPoint(c, d));
+        if (e) {
+          l(e);
+          return;
+        }
+        if (!y(c, d)) {
+          s();
+          return;
+        }
+      }
+      i && b(i);
+    }, w = () => {
+      i && t.setAttribute("data-highlight-ready", "");
+    }, F = new MutationObserver(() => {
+      i && l(i);
+    });
+    return F.observe(t, {
+      subtree: !0,
+      attributes: !0,
+      attributeFilter: ["data-selected", "data-disabled", "data-highlighted", "data-nested-selected"]
+    }), t.addEventListener("pointerenter", L), t.addEventListener("pointermove", E), t.addEventListener("pointerleave", P), t.addEventListener("keydown", x), t.addEventListener("scroll", A), t.addEventListener("scrollend", w), l(t.querySelector(`${a}:hover`)), () => {
+      F.disconnect(), t.removeEventListener("pointerenter", L), t.removeEventListener("pointermove", E), t.removeEventListener("pointerleave", P), t.removeEventListener("keydown", x), t.removeEventListener("scroll", A), t.removeEventListener("scrollend", w), s(), t.style.removeProperty("--reforma-listbox-highlight-top"), t.style.removeProperty("--reforma-listbox-highlight-left"), t.style.removeProperty("--reforma-listbox-highlight-width"), t.style.removeProperty("--reforma-listbox-highlight-height"), t.style.removeProperty("--reforma-listbox-highlight-opacity");
+    };
+  }, [g, a, n, $]);
+}
+export {
+  H as useListHoverHighlight
+};
+//# sourceMappingURL=useListHoverHighlight.js.map

package/dist/List/useListHoverHighlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useListHoverHighlight.js","sources":["../../src/List/useListHoverHighlight.ts"],"sourcesContent":["import { useEffect, type RefObject } from 'react';\n\nimport styles from './ListBox.module.css';\n\nconst DEFAULT_ITEM = `.${ styles.item }`;\n\n/** Keep the plate across the few pixels between rows. Empty space is farther than this. */\nconst ROW_GAP = 16;\n\ntype ListTarget = RefObject<HTMLElement | null> | HTMLElement | null;\n\nfunction resolveList(target: ListTarget): HTMLElement | null {\n    if (target instanceof HTMLElement) {\n        return target;\n    }\n\n    return target?.current ?? null;\n}\n\n/**\n * Slides one highlight plate across list/menu rows (hover + keyboard), instead of painting each row.\n */\nexport function useListHoverHighlight(\n    list: ListTarget,\n    enabled: boolean,\n    itemSelector: string = DEFAULT_ITEM\n) {\n    const listEl = list instanceof HTMLElement ? list : null;\n\n    useEffect(() => {\n        const root = resolveList(list);\n\n        if (!root || !enabled) {\n            return;\n        }\n\n        let followKeyboard = false;\n        let current: HTMLElement | null = null;\n        let pointerX = 0;\n        let pointerY = 0;\n        let hasPointer = false;\n\n        const rowFrom = (target: EventTarget | null) => {\n            if (!(target instanceof Element)) {\n                return null;\n            }\n\n            const row = target.closest<HTMLElement>(itemSelector);\n\n            if (!row || !root.contains(row)) {\n                return null;\n            }\n\n            return row;\n        };\n\n        const blocked = (row: HTMLElement) => (\n            row.hasAttribute('data-disabled')\n            || row.hasAttribute('data-selected')\n            || row.hasAttribute('data-highlighted')\n            || row.hasAttribute('data-nested-selected')\n        );\n\n        const keyboardRow = () => (\n            root.querySelector<HTMLElement>(`${ itemSelector }[data-focus-visible]`)\n        );\n\n        const besideCurrent = (x: number, y: number) => {\n            if (!current) {\n                return false;\n            }\n\n            const box = current.getBoundingClientRect();\n\n            return x >= box.left && x <= box.right\n                && y >= box.top - ROW_GAP && y <= box.bottom + ROW_GAP;\n        };\n\n        const setGeometry = (row: HTMLElement) => {\n            const listRect = root.getBoundingClientRect();\n            const rowRect = row.getBoundingClientRect();\n\n            root.style.setProperty('--reforma-listbox-highlight-top', `${ rowRect.top - listRect.top + root.scrollTop }px`);\n            root.style.setProperty('--reforma-listbox-highlight-left', `${ rowRect.left - listRect.left + root.scrollLeft }px`);\n            root.style.setProperty('--reforma-listbox-highlight-width', `${ rowRect.width }px`);\n            root.style.setProperty('--reforma-listbox-highlight-height', `${ rowRect.height }px`);\n        };\n\n        const hide = () => {\n            current = null;\n            root.style.setProperty('--reforma-listbox-highlight-opacity', '0');\n            root.removeAttribute('data-highlight-ready');\n            root.removeAttribute('data-highlight-danger');\n        };\n\n        const show = (row: HTMLElement | null) => {\n            if (!row || blocked(row)) {\n                hide();\n\n                return;\n            }\n\n            const appeared = current == null;\n\n            if (appeared) {\n                root.removeAttribute('data-highlight-ready');\n            }\n\n            current = row;\n            setGeometry(row);\n            root.toggleAttribute('data-highlight-danger', row.classList.contains(styles.itemDanger));\n            root.style.setProperty('--reforma-listbox-highlight-opacity', '1');\n\n            if (appeared) {\n                requestAnimationFrame(() => {\n                    if (current) {\n                        root.setAttribute('data-highlight-ready', '');\n                    }\n                });\n            }\n        };\n\n        const followPointer = (target: EventTarget | null, x: number, y: number) => {\n            followKeyboard = false;\n            const row = rowFrom(target);\n\n            if (row) {\n                if (row !== current) {\n                    show(row);\n                }\n\n                return;\n            }\n\n            if (!besideCurrent(x, y)) {\n                hide();\n            }\n        };\n\n        const onPointerMove = (event: PointerEvent) => {\n            pointerX = event.clientX;\n            pointerY = event.clientY;\n            hasPointer = true;\n            followPointer(event.target, event.clientX, event.clientY);\n        };\n\n        const onPointerEnter = (event: PointerEvent) => {\n            pointerX = event.clientX;\n            pointerY = event.clientY;\n            hasPointer = true;\n            followPointer(\n                document.elementFromPoint(event.clientX, event.clientY),\n                event.clientX,\n                event.clientY\n            );\n        };\n\n        const onPointerLeave = (event: PointerEvent) => {\n            if (event.relatedTarget instanceof Node && root.contains(event.relatedTarget)) {\n                return;\n            }\n\n            hasPointer = false;\n\n            if (current?.hasAttribute('data-open')) {\n                return;\n            }\n\n            if (followKeyboard) {\n                show(keyboardRow());\n\n                return;\n            }\n\n            hide();\n        };\n\n        const onKeyDown = () => {\n            followKeyboard = true;\n            requestAnimationFrame(() => {\n                if (followKeyboard) {\n                    show(keyboardRow());\n                }\n            });\n        };\n\n        const onScroll = () => {\n            root.removeAttribute('data-highlight-ready');\n\n            // Virtualized lists recycle the hovered node; re-hit-test instead of following `current`.\n            if (hasPointer) {\n                const row = rowFrom(document.elementFromPoint(pointerX, pointerY));\n\n                if (row) {\n                    show(row);\n\n                    return;\n                }\n\n                if (!besideCurrent(pointerX, pointerY)) {\n                    hide();\n\n                    return;\n                }\n            }\n\n            if (current) {\n                setGeometry(current);\n            }\n        };\n\n        const onScrollEnd = () => {\n            if (current) {\n                root.setAttribute('data-highlight-ready', '');\n            }\n        };\n\n        // Selection lands after pointerup. Re-run show so a blocked row drops the plate.\n        const rowState = new MutationObserver(() => {\n            if (current) {\n                show(current);\n            }\n        });\n\n        rowState.observe(root, {\n            subtree: true,\n            attributes: true,\n            attributeFilter: ['data-selected', 'data-disabled', 'data-highlighted', 'data-nested-selected'],\n        });\n\n        root.addEventListener('pointerenter', onPointerEnter);\n        root.addEventListener('pointermove', onPointerMove);\n        root.addEventListener('pointerleave', onPointerLeave);\n        root.addEventListener('keydown', onKeyDown);\n        root.addEventListener('scroll', onScroll);\n        root.addEventListener('scrollend', onScrollEnd);\n\n        show(root.querySelector<HTMLElement>(`${ itemSelector }:hover`));\n\n        return () => {\n            rowState.disconnect();\n            root.removeEventListener('pointerenter', onPointerEnter);\n            root.removeEventListener('pointermove', onPointerMove);\n            root.removeEventListener('pointerleave', onPointerLeave);\n            root.removeEventListener('keydown', onKeyDown);\n            root.removeEventListener('scroll', onScroll);\n            root.removeEventListener('scrollend', onScrollEnd);\n            hide();\n            root.style.removeProperty('--reforma-listbox-highlight-top');\n            root.style.removeProperty('--reforma-listbox-highlight-left');\n            root.style.removeProperty('--reforma-listbox-highlight-width');\n            root.style.removeProperty('--reforma-listbox-highlight-height');\n            root.style.removeProperty('--reforma-listbox-highlight-opacity');\n        };\n    }, [enabled, itemSelector, list, listEl]);\n}\n"],"names":["DEFAULT_ITEM","styles","ROW_GAP","resolveList","target","useListHoverHighlight","list","enabled","itemSelector","listEl","useEffect","root","followKeyboard","current","pointerX","pointerY","hasPointer","rowFrom","row","blocked","keyboardRow","besideCurrent","x","y","box","setGeometry","listRect","rowRect","hide","show","appeared","followPointer","onPointerMove","event","onPointerEnter","onPointerLeave","onKeyDown","onScroll","onScrollEnd","rowState"],"mappings":"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"}

package/dist/List/useScrollActiveListItem.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from 'react';
+/**
+ * Bring a row into the nearest scrollport when it becomes active (selected,
+ * keyboard, or `data-highlighted`). Staying active must not scroll again —
+ * a parent re-render would yank an ancestor pager back to this row.
+ */
+export declare function useScrollActiveListItem(ref: RefObject<HTMLElement | null>): void;
+//# sourceMappingURL=useScrollActiveListItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollActiveListItem.d.ts","sourceRoot":"","sources":["../../src/List/useScrollActiveListItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhE;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,IAAI,CAahF"}

package/dist/List/useScrollActiveListItem.js

@@ -0,0 +1,15 @@
+import { useRef as s, useLayoutEffect as a } from "react";
+const i = "[data-highlighted], [data-selected], [data-focus-visible]";
+function r(o) {
+  const e = s(!1);
+  a(() => {
+    const t = o.current, c = !!t?.matches(i);
+    c && !e.current && t?.scrollIntoView({
+      block: "nearest"
+    }), e.current = c;
+  });
+}
+export {
+  r as useScrollActiveListItem
+};
+//# sourceMappingURL=useScrollActiveListItem.js.map

package/dist/List/useScrollActiveListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollActiveListItem.js","sources":["../../src/List/useScrollActiveListItem.ts"],"sourcesContent":["import { useLayoutEffect, useRef, type RefObject } from 'react';\n\nconst ACTIVE_ROW = '[data-highlighted], [data-selected], [data-focus-visible]';\n\n/**\n * Bring a row into the nearest scrollport when it becomes active (selected,\n * keyboard, or `data-highlighted`). Staying active must not scroll again —\n * a parent re-render would yank an ancestor pager back to this row.\n */\nexport function useScrollActiveListItem(ref: RefObject<HTMLElement | null>): void {\n    const wasActive = useRef(false);\n\n    useLayoutEffect(() => {\n        const el = ref.current;\n        const active = Boolean(el?.matches(ACTIVE_ROW));\n\n        if (active && !wasActive.current) {\n            el?.scrollIntoView({ block: 'nearest' });\n        }\n\n        wasActive.current = active;\n    });\n}\n"],"names":["ACTIVE_ROW","useScrollActiveListItem","ref","wasActive","useRef","useLayoutEffect","el","active"],"mappings":";AACA,MAAMA,IAAa;AAOZ,SAASC,EAAwBC,GAAK;AAC3C,QAAMC,IAAYC,EAAO,EAAK;AAC9B,EAAAC,EAAgB,MAAM;AACpB,UAAMC,IAAKJ,EAAI,SACTK,IAAS,EAAQD,GAAI,QAAQN,CAAU;AAC7C,IAAIO,KAAU,CAACJ,EAAU,WACvBG,GAAI,eAAe;AAAA,MACjB,OAAO;AAAA,IAAA,CACR,GAEHH,EAAU,UAAUI;AAAA,EACtB,CAAC;AACH;"}

package/dist/Loader/Loader.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'react';
+import type { SpinnerSize } from '../Spinner/Spinner';
+export type LoaderSize = SpinnerSize;
+export type LoaderProps = {
+    size?: LoaderSize;
+    className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+/** Brand Reforma mark loading animation (Lottie). */
+export declare function Loader({ size, className, ...props }: LoaderProps): import("react").JSX.Element;
+export declare namespace Loader {
+    var displayName: string;
+}
+//# sourceMappingURL=Loader.d.ts.map

package/dist/Loader/Loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loader.d.ts","sourceRoot":"","sources":["../../src/Loader/Loader.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,MAAM,UAAU,GAAG,WAAW,CAAC;AAErC,MAAM,MAAM,WAAW,GAAG;IACtB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAuBrD,qDAAqD;AACrD,wBAAgB,MAAM,CAAC,EAAE,IAAgB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,+BAa5E;yBAbe,MAAM"}

package/dist/Loader/Loader.js

@@ -0,0 +1,41 @@
+import { cn as e } from "@reforma/lib";
+import { Suspense as n, lazy as l } from "react";
+import m from "./Loader.module.css.js";
+import { jsx as r } from "react/jsx-runtime";
+const s = /* @__PURE__ */ l(async () => {
+  const [{
+    Lottie: a
+  }, t] = await Promise.all([import("../Lottie/index.js"), import("./reforma-loader.json.js")]), o = t.default ?? t;
+  function i() {
+    return /* @__PURE__ */ r(a, {
+      animationData: o,
+      loop: !0,
+      autoplay: !0,
+      "aria-hidden": !0
+    });
+  }
+  return {
+    default: i
+  };
+});
+function u({
+  size: a = "inherit",
+  className: t,
+  ...o
+}) {
+  return /* @__PURE__ */ r("div", {
+    className: e(m.root, t),
+    "data-size": a,
+    "aria-hidden": !0,
+    ...o,
+    children: /* @__PURE__ */ r(n, {
+      fallback: null,
+      children: /* @__PURE__ */ r(s, {})
+    })
+  });
+}
+u.displayName = "Loader";
+export {
+  u as Loader
+};
+//# sourceMappingURL=Loader.js.map

package/dist/Loader/Loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loader.js","sources":["../../src/Loader/Loader.tsx"],"sourcesContent":["import { cn } from '@reforma/lib';\nimport { lazy, Suspense } from 'react';\n\nimport styles from './Loader.module.css';\n\nimport type { HTMLAttributes } from 'react';\nimport type { SpinnerSize } from '../Spinner/Spinner';\n\nexport type LoaderSize = SpinnerSize;\n\nexport type LoaderProps = {\n    size?: LoaderSize;\n    className?: string;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;\n\nconst LottieMark = lazy(async() => {\n    const [{ Lottie }, animation] = await Promise.all([\n        import('../Lottie'),\n        import('./reforma-loader.json'),\n    ]);\n    const animationData = (animation as { default?: unknown }).default ?? animation;\n\n    function Mark() {\n        return (\n            <Lottie\n                animationData={ animationData }\n                loop\n                autoplay\n                aria-hidden\n            />\n        );\n    }\n\n    return { default: Mark };\n});\n\n/** Brand Reforma mark loading animation (Lottie). */\nexport function Loader({ size = 'inherit', className, ...props }: LoaderProps) {\n    return (\n        <div\n            className={ cn(styles.root, className) }\n            data-size={ size }\n            aria-hidden\n            { ...props }\n        >\n            <Suspense fallback={ null }>\n                <LottieMark />\n            </Suspense>\n        </div>\n    );\n}\n\nLoader.displayName = 'Loader';\n"],"names":["LottieMark","Lottie","animation","animationData","Mark","Loader","size","className","props","cn","styles","Suspense","_jsx"],"mappings":";;;;AAIA,MAAMA,sBAA+B,YAAY;AAC/C,QAAM,CAAC;AAAA,IACL,QAAAC;AAAA,EAAA,GACCC,CAAS,IAAI,MAAM,QAAQ,IAAI,CAAC,OAAO,oBAAW,GAAG,OAAO,0BAAuB,CAAC,CAAC,GAClFC,IAAgBD,EAAU,WAAWA;AAC3C,WAASE,IAAO;AACd,6BAAyBH,GAAQ;AAAA,MAC/B,eAAAE;AAAA,MACA,MAAM;AAAA,MACN,UAAU;AAAA,MACV,eAAe;AAAA,IAAA,CAChB;AAAA,EACH;AACA,SAAO;AAAA,IACL,SAASC;AAAA,EAAA;AAEb,CAAC;AAGM,SAASC,EAAO;AAAA,EACrB,MAAAC,IAAO;AAAA,EACP,WAAAC;AAAA,EACA,GAAGC;AACL,GAAG;AACD,2BAAyB,OAAO;AAAA,IAC9B,WAAWC,EAAGC,EAAO,MAAMH,CAAS;AAAA,IACpC,aAAaD;AAAA,IACb,eAAe;AAAA,IACf,GAAGE;AAAA,IACH,4BAA4BG,GAAU;AAAA,MACpC,UAAU;AAAA,MACV,UAAuBC,gBAAAA,EAAKZ,GAAY,CAAA,CAAE;AAAA,IAAA,CAC3C;AAAA,EAAA,CACF;AACH;AACAK,EAAO,cAAc;"}

package/dist/Loader/Loader.module.css

@@ -0,0 +1 @@
+@layer components{.Loader_root_aWwNUZ{--loader-size: 1em;display:flex;flex-shrink:0;justify-content:center;align-items:center;width:var(--loader-size);height:var(--loader-size);color:var(--color-text-secondary)}.Loader_root_aWwNUZ svg{width:100%;height:100%}.Loader_root_aWwNUZ[data-size=xxs]{--loader-size: var(--spacing-12)}.Loader_root_aWwNUZ[data-size=xs]{--loader-size: var(--spacing-16)}.Loader_root_aWwNUZ[data-size=sm]{--loader-size: var(--spacing-20)}.Loader_root_aWwNUZ[data-size=md]{--loader-size: var(--spacing-24)}.Loader_root_aWwNUZ[data-size=lg]{--loader-size: var(--spacing-28)}.Loader_root_aWwNUZ[data-size=xl]{--loader-size: var(--spacing-32)}.Loader_root_aWwNUZ[data-size=xxl]{--loader-size: var(--spacing-36)}}

package/dist/Loader/Loader.module.css.js

@@ -0,0 +1,8 @@
+const o = "Loader_root_aWwNUZ", t = {
+  root: o
+};
+export {
+  t as default,
+  o as root
+};
+//# sourceMappingURL=Loader.module.css.js.map

package/dist/Loader/Loader.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loader.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/Loader/index.d.ts

@@ -0,0 +1,2 @@
+export { Loader, type LoaderProps, type LoaderSize } from './Loader';
+//# sourceMappingURL=index.d.ts.map

package/dist/Loader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Loader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC"}

package/dist/Loader/index.js

@@ -0,0 +1,5 @@
+import { Loader as e } from "./Loader.js";
+export {
+  e as Loader
+};
+//# sourceMappingURL=index.js.map

package/dist/Loader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/Loader/reforma-loader.json.js

@@ -0,0 +1,34 @@
+const t = "5.5.2", o = { a: "SVGator", d: "SVGator, the ultimate SVG animation generator now supports Lottie: a thoughtfully designed, intuitive interface, right at your fingertips.", g: "Made in SVGator (https://www.svgator.com/)" }, s = { filename: "logo wave.json", customProps: { k: ["SVGator", "svgator", "lottie animation", "svg animation", "lottie", "svg"], version: 1, app: "https://app.svgator.com/editor#/55fcdd609b1645d89670add7ba0f1d26", site: "https://www.svgator.com/", date: "2026-03-24T13:27:51.339Z", exportId: "526c0bba0c4b41b08d15c3e5590065c8", cached: "false" } }, e = "logo wave", a = 0, y = [], r = 80, i = 80, x = 0, n = 151, c = 100, k = { list: [] }, p = [{ ty: 4, st: 0, ip: 0, op: 151, ks: { a: { a: 0, k: [14.73335, 14.73335] }, p: { a: 0, k: [20.7334, 20.7334] }, s: { a: 1, k: [{ t: 0, s: [100, 100], i: { x: 0.58, y: 1 }, o: { x: 0.42, y: 0 } }, { t: 40, s: [110, 110], i: { x: 0.58, y: 1 }, o: { x: 0.42, y: 0 } }, { t: 80, s: [100, 100], i: { x: 1, y: 1 }, o: { x: 0, y: 0 } }] }, o: { a: 1, k: [{ t: 0, s: [80], i: { x: 0.58, y: 1 }, o: { x: 0.42, y: 0 } }, { t: 40, s: [100], i: { x: 0.58, y: 1 }, o: { x: 0.42, y: 0 } }, { t: 80, s: [80], i: { x: 1, y: 1 }, o: { x: 0, y: 0 } }] } }, shapes: [{ ty: "sh", ks: { a: 0, k: { v: [[0, 0], [29.4667, 0], [29.4667, 29.4667], [0, 29.4667], [0, 0]], i: [[0, 0], [29.4667, 0], [29.4667, 29.4667], [0, 29.4667], [0, 0]], o: [[0, 0], [29.4667, 0], [29.4667, 29.4667], [0, 29.4667], [0, 0]], c: !0 } }, _render: !0 }, { ty: "fl", o: { a: 0, k: 100 }, c: { a: 0, k: [0.901961, 0.478431, 0.364706] }, _render: !0 }], completed: !0, sr: 1 }, { ty: 4, st: 0, ip: 0, op: 151, ks: { a: { a: 0, k: [14.73335, 53.26655] }, p: { a: 0, k: [20.7334, 59.2666] }, s: { a: 1, k: [{ t: 15, s: [100, 100], i: { x: 0.58, y: 1 }, o: { x: 0.42, y: 0 } }, { t: 55.00000000000001, s: [110, 110], i: { x: 0.58, y: 1 }, o: { x: 0.42, y: 0 } }, { t: 95, s: [100, 100], i: { x: 1, y: 1 }, o: { x: 0, y: 0 } }] }, o: { a: 1, k: [{ t: 15, s: [80], i: { x: 0.58, y: 1 }, o: { x: 0.42, y: 0 } }, { t: 55.00000000000001, s: [100], i: { x: 0.58, y: 1 }, o: { x: 0.42, y: 0 } }, { t: 95, s: [80], i: { x: 1, y: 1 }, o: { x: 0, y: 0 } }] } }, shapes: [{ ty: "sh", ks: { a: 0, k: { v: [[0, 53.2665], [14.7333, 38.5332], [29.4667, 53.2665], [14.7333, 67.9999], [0, 53.2665]], i: [[0, 53.2665], [6.59634, 38.5332], [29.4667, 45.1295], [22.8703, 67.9999], [0, 61.4035]], o: [[0, 45.1295], [22.8703, 38.5332], [29.4667, 61.4035], [6.59634, 67.9999], [0, 53.2665]], c: !0 } }, _render: !0 }, { ty: "fl", o: { a: 0, k: 100 }, c: { a: 0, k: [0.901961, 0.478431, 0.364706] }, _render: !0 }], completed: !0, sr: 1 }, { ty: 4, st: 0, ip: 0, op: 151, ks: { a: { a: 0, k: [53.26655, 14.73335] }, p: { a: 0, k: [59.2666, 20.7334] }, s: { a: 1, k: [{ t: 30, s: [100, 100], i: { x: 0.58, y: 1 }, o: { x: 0.42, y: 0 } }, { t: 70, s: [110, 110], i: { x: 0.58, y: 1 }, o: { x: 0.42, y: 0 } }, { t: 110.00000000000001, s: [100, 100], i: { x: 1, y: 1 }, o: { x: 0, y: 0 } }] }, o: { a: 1, k: [{ t: 30, s: [80], i: { x: 0.58, y: 1 }, o: { x: 0.42, y: 0 } }, { t: 70, s: [100], i: { x: 0.58, y: 1 }, o: { x: 0.42, y: 0 } }, { t: 110.00000000000001, s: [80], i: { x: 1, y: 1 }, o: { x: 0, y: 0 } }] } }, shapes: [{ ty: "sh", ks: { a: 0, k: { v: [[38.5332, 0], [53.2665, 0], [67.9999, 14.7333], [53.2665, 29.4667], [38.5332, 29.4667], [38.5332, 0]], i: [[38.5332, 0], [53.2665, 0], [67.9999, 6.59634], [61.4035, 29.4667], [38.5332, 29.4667], [38.5332, 0]], o: [[38.5332, 0], [61.4035, 0], [67.9999, 22.8703], [53.2665, 29.4667], [38.5332, 29.4667], [38.5332, 0]], c: !0 } }, _render: !0 }, { ty: "fl", o: { a: 0, k: 100 }, c: { a: 0, k: [0.901961, 0.478431, 0.364706] }, _render: !0 }], completed: !0, sr: 1 }, { ty: 4, st: 0, ip: 0, op: 151, ks: { a: { a: 0, k: [53.26655, 53.26655] }, p: { a: 0, k: [59.2666, 59.2666] }, s: { a: 1, k: [{ t: 45, s: [100, 100], i: { x: 0.58, y: 1 }, o: { x: 0.42, y: 0 } }, { t: 85, s: [110, 110], i: { x: 0.58, y: 1 }, o: { x: 0.42, y: 0 } }, { t: 125, s: [100, 100], i: { x: 1, y: 1 }, o: { x: 0, y: 0 } }] }, o: { a: 1, k: [{ t: 45, s: [80], i: { x: 0.58, y: 1 }, o: { x: 0.42, y: 0 } }, { t: 85, s: [100], i: { x: 0.58, y: 1 }, o: { x: 0.42, y: 0 } }, { t: 125, s: [80], i: { x: 1, y: 1 }, o: { x: 0, y: 0 } }] } }, shapes: [{ ty: "sh", ks: { a: 0, k: { v: [[38.5332, 38.5332], [67.9999, 67.9999], [38.5332, 67.9999], [38.5332, 38.5332]], i: [[38.5332, 38.5332], [67.9999, 51.725899999999996], [38.5332, 67.9999], [38.5332, 38.5332]], o: [[54.8072, 38.5332], [67.9999, 67.9999], [38.5332, 67.9999], [38.5332, 38.5332]], c: !0 } }, _render: !0 }, { ty: "fl", o: { a: 0, k: 100 }, c: { a: 0, k: [0.901961, 0.478431, 0.364706] }, _render: !0 }], completed: !0, sr: 1 }], d = !0, u = {
+  v: t,
+  meta: o,
+  metadata: s,
+  nm: e,
+  ddd: a,
+  assets: y,
+  w: r,
+  h: i,
+  ip: x,
+  op: n,
+  fr: c,
+  fonts: k,
+  layers: p,
+  __complete: d
+};
+export {
+  d as __complete,
+  y as assets,
+  a as ddd,
+  u as default,
+  k as fonts,
+  c as fr,
+  i as h,
+  x as ip,
+  p as layers,
+  o as meta,
+  s as metadata,
+  e as nm,
+  n as op,
+  t as v,
+  r as w
+};
+//# sourceMappingURL=reforma-loader.json.js.map

package/dist/Loader/reforma-loader.json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reforma-loader.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/dist/Lottie/Lottie.d.ts

@@ -0,0 +1,6 @@
+import LottieReact from 'lottie-react';
+import type { ComponentProps } from 'react';
+export type LottieProps = ComponentProps<typeof LottieReact>;
+declare const Lottie: typeof LottieReact;
+export { Lottie };
+//# sourceMappingURL=Lottie.d.ts.map

package/dist/Lottie/Lottie.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Lottie.d.ts","sourceRoot":"","sources":["../../src/Lottie/Lottie.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,cAAc,CAAC;AAEvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC;AAG7D,QAAA,MAAM,MAAM,EAAE,OAAO,WAAiD,CAAC;AAEvE,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/Lottie/Lottie.js

@@ -0,0 +1,6 @@
+import t from "lottie-react";
+const o = t, i = o.default ?? t;
+export {
+  i as Lottie
+};
+//# sourceMappingURL=Lottie.js.map

package/dist/Lottie/Lottie.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Lottie.js","sources":["../../src/Lottie/Lottie.tsx"],"sourcesContent":["import LottieReact from 'lottie-react';\n\nimport type { ComponentProps } from 'react';\n\nexport type LottieProps = ComponentProps<typeof LottieReact>;\n\nconst LottieModule = LottieReact as unknown as { default?: typeof LottieReact };\nconst Lottie: typeof LottieReact = LottieModule.default ?? LottieReact;\n\nexport { Lottie };\n"],"names":["LottieModule","LottieReact","Lottie"],"mappings":";AACA,MAAMA,IAAeC,GACfC,IAASF,EAAa,WAAWC;"}

package/dist/Lottie/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Lottie';
+//# sourceMappingURL=index.d.ts.map

package/dist/Lottie/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Lottie/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/dist/Lottie/index.js

@@ -0,0 +1,5 @@
+import { Lottie as e } from "./Lottie.js";
+export {
+  e as Lottie
+};
+//# sourceMappingURL=index.js.map

package/dist/Lottie/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/Marker/Marker.d.ts

@@ -0,0 +1,28 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type MarkerVariant = 'default' | 'separator';
+export type MarkerProps = {
+    /** `separator` is a labeled divider (chat day, section break). */
+    variant?: MarkerVariant;
+    className?: string;
+    children?: ReactNode;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'color'>;
+export type MarkerIconProps = HTMLAttributes<HTMLSpanElement>;
+export type MarkerContentProps = {
+    /** Sweep the label while a status is live. Only applies to string children. */
+    shimmer?: boolean;
+    children?: ReactNode;
+} & Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'color'>;
+export declare function Marker({ variant, className, children, ...props }: MarkerProps): import("react").JSX.Element;
+export declare namespace Marker {
+    var displayName: string;
+}
+/** Decorative icon / loader slot. Hidden from assistive tech. */
+export declare function MarkerIcon({ className, ...props }: MarkerIconProps): import("react").JSX.Element;
+export declare namespace MarkerIcon {
+    var displayName: string;
+}
+export declare function MarkerContent({ shimmer, className, children, ...props }: MarkerContentProps): import("react").JSX.Element;
+export declare namespace MarkerContent {
+    var displayName: string;
+}
+//# sourceMappingURL=Marker.d.ts.map

package/dist/Marker/Marker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Marker.d.ts","sourceRoot":"","sources":["../../src/Marker/Marker.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,CAAC;AAEpD,MAAM,MAAM,WAAW,GAAG;IACtB,kEAAkE;IAClE,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,CAAC;AAE/D,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAE9D,MAAM,MAAM,kBAAkB,GAAG;IAC7B,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,CAAC;AAEhE,wBAAgB,MAAM,CAAC,EACnB,OAAmB,EACnB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,WAAW,+BAUb;yBAfe,MAAM;;;AAiBtB,iEAAiE;AACjE,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,+BAElE;yBAFe,UAAU;;;AAI1B,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,+BAM3F;yBANe,aAAa"}

package/dist/Marker/Marker.js

@@ -0,0 +1,52 @@
+import { cn as o } from "@reforma/lib";
+import { Shimmer as m } from "../Shimmer/Shimmer.js";
+import { Text as s } from "../Text/Text.js";
+import i from "./Marker.module.css.js";
+import { jsx as e } from "react/jsx-runtime";
+function p({
+  variant: r = "default",
+  className: t,
+  children: a,
+  ...n
+}) {
+  return /* @__PURE__ */ e("div", {
+    ...n,
+    className: o(i.root, t),
+    "data-variant": r,
+    children: a
+  });
+}
+function c({
+  className: r,
+  ...t
+}) {
+  return /* @__PURE__ */ e("span", {
+    "aria-hidden": !0,
+    className: o(i.icon, r),
+    ...t
+  });
+}
+function f({
+  shimmer: r,
+  className: t,
+  children: a,
+  ...n
+}) {
+  return /* @__PURE__ */ e(s, {
+    "data-inline-links": !0,
+    className: o(i.content, t),
+    ...n,
+    children: r && typeof a == "string" ? /* @__PURE__ */ e(m, {
+      children: a
+    }) : a
+  });
+}
+p.displayName = "Marker";
+c.displayName = "MarkerIcon";
+f.displayName = "MarkerContent";
+export {
+  p as Marker,
+  f as MarkerContent,
+  c as MarkerIcon
+};
+//# sourceMappingURL=Marker.js.map

package/dist/Marker/Marker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Marker.js","sources":["../../src/Marker/Marker.tsx"],"sourcesContent":["import { cn } from '@reforma/lib';\n\nimport { Shimmer } from '../Shimmer';\nimport { Text } from '../Text';\nimport styles from './Marker.module.css';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nexport type MarkerVariant = 'default' | 'separator';\n\nexport type MarkerProps = {\n    /** `separator` is a labeled divider (chat day, section break). */\n    variant?: MarkerVariant;\n    className?: string;\n    children?: ReactNode;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'color'>;\n\nexport type MarkerIconProps = HTMLAttributes<HTMLSpanElement>;\n\nexport type MarkerContentProps = {\n    /** Sweep the label while a status is live. Only applies to string children. */\n    shimmer?: boolean;\n    children?: ReactNode;\n} & Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'color'>;\n\nexport function Marker({\n    variant = 'default',\n    className,\n    children,\n    ...props\n}: MarkerProps) {\n    return (\n        <div\n            { ...props }\n            className={ cn(styles.root, className) }\n            data-variant={ variant }\n        >\n            { children }\n        </div>\n    );\n}\n\n/** Decorative icon / loader slot. Hidden from assistive tech. */\nexport function MarkerIcon({ className, ...props }: MarkerIconProps) {\n    return <span aria-hidden className={ cn(styles.icon, className) } { ...props } />;\n}\n\nexport function MarkerContent({ shimmer, className, children, ...props }: MarkerContentProps) {\n    return (\n        <Text data-inline-links className={ cn(styles.content, className) } { ...props }>\n            { (shimmer && typeof children === 'string') ? <Shimmer>{ children }</Shimmer> : children }\n        </Text>\n    );\n}\n\nMarker.displayName = 'Marker';\nMarkerIcon.displayName = 'MarkerIcon';\nMarkerContent.displayName = 'MarkerContent';\n"],"names":["Marker","variant","className","children","props","cn","styles","MarkerIcon","MarkerContent","shimmer","Text","Shimmer"],"mappings":";;;;;AAKO,SAASA,EAAO;AAAA,EACrB,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAG;AACD,2BAAyB,OAAO;AAAA,IAC9B,GAAGA;AAAA,IACH,WAAWC,EAAGC,EAAO,MAAMJ,CAAS;AAAA,IACpC,gBAAgBD;AAAA,IAChB,UAAAE;AAAA,EAAA,CACD;AACH;AAGO,SAASI,EAAW;AAAA,EACzB,WAAAL;AAAA,EACA,GAAGE;AACL,GAAG;AACD,2BAAyB,QAAQ;AAAA,IAC/B,eAAe;AAAA,IACf,WAAWC,EAAGC,EAAO,MAAMJ,CAAS;AAAA,IACpC,GAAGE;AAAA,EAAA,CACJ;AACH;AACO,SAASI,EAAc;AAAA,EAC5B,SAAAC;AAAA,EACA,WAAAP;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAG;AACD,2BAAyBM,GAAM;AAAA,IAC7B,qBAAqB;AAAA,IACrB,WAAWL,EAAGC,EAAO,SAASJ,CAAS;AAAA,IACvC,GAAGE;AAAA,IACH,UAAUK,KAAW,OAAON,KAAa,6BAA6BQ,GAAS;AAAA,MAC7E,UAAAR;AAAA,IAAA,CACD,IAAIA;AAAA,EAAA,CACN;AACH;AACAH,EAAO,cAAc;AACrBO,EAAW,cAAc;AACzBC,EAAc,cAAc;"}

package/dist/Marker/Marker.module.css

@@ -0,0 +1 @@
+@layer components{.Marker_root_WwKknj{display:flex;align-items:center;gap:var(--spacing-md);width:100%;min-height:var(--spacing-xl);color:var(--color-secondary-muted-text);font-weight:400;font-size:var(--text-xs);line-height:var(--leading-xs);font-family:Onest,sans-serif;letter-spacing:0;text-align:left}.Marker_root_WwKknj[data-variant=separator]:before,.Marker_root_WwKknj[data-variant=separator]:after{flex:1;background-color:var(--color-secondary-muted);min-width:0;height:1px;content:""}.Marker_icon_67EXh7{display:inline-flex;flex-shrink:0;justify-content:center;align-items:center;color:currentColor}.Marker_content_BnARYh{min-width:0;overflow-wrap:break-word}.Marker_root_WwKknj[data-variant=separator] .Marker_content_BnARYh{flex:none;text-align:center}}

package/dist/Marker/Marker.module.css.js

@@ -0,0 +1,12 @@
+const o = "Marker_root_WwKknj", t = "Marker_icon_67EXh7", n = "Marker_content_BnARYh", c = {
+  root: o,
+  icon: t,
+  content: n
+};
+export {
+  n as content,
+  c as default,
+  t as icon,
+  o as root
+};
+//# sourceMappingURL=Marker.module.css.js.map

package/dist/Marker/Marker.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Marker.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/Marker/index.d.ts

@@ -0,0 +1,3 @@
+export { Marker, MarkerContent, MarkerIcon } from './Marker';
+export type { MarkerContentProps, MarkerIconProps, MarkerProps, MarkerVariant, } from './Marker';
+//# sourceMappingURL=index.d.ts.map

package/dist/Marker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Marker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC7D,YAAY,EACR,kBAAkB,EAClB,eAAe,EACf,WAAW,EACX,aAAa,GAChB,MAAM,UAAU,CAAC"}

package/dist/Marker/index.js

@@ -0,0 +1,7 @@
+import { Marker as o, MarkerContent as a, MarkerIcon as k } from "./Marker.js";
+export {
+  o as Marker,
+  a as MarkerContent,
+  k as MarkerIcon
+};
+//# sourceMappingURL=index.js.map

package/dist/Marker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/Modal/Dialog.d.ts

@@ -0,0 +1,9 @@
+import type { ModalComponent, ModalOptionsRaw } from './typings';
+export type DialogProps = {
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: ModalComponent;
+} & ModalOptionsRaw;
+export declare function Dialog({ isOpen: _isOpen, defaultOpen, onOpenChange, children, component, ..._modalOptions }: DialogProps): import("react").JSX.Element | undefined;
+//# sourceMappingURL=Dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Modal/Dialog.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAA+B,eAAe,EAAE,MAAM,WAAW,CAAC;AAE9F,MAAM,MAAM,WAAW,GAAG;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC7B,GAAG,eAAe,CAAC;AAEpB,wBAAgB,MAAM,CAAC,EACnB,MAAM,EAAE,OAAO,EACf,WAAkB,EAClB,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,GAAG,aAAa,EACnB,EAAE,WAAW,2CAkEb"}

package/dist/Modal/Dialog.js

@@ -0,0 +1,48 @@
+import { useState as m, useCallback as R, useRef as x, useLayoutEffect as n, useMemo as I } from "react";
+import b from "./Modal.js";
+import { ModalRoot as j } from "./views/ModalRoot.js";
+import { jsx as k } from "react/jsx-runtime";
+function H({
+  isOpen: u,
+  defaultOpen: d = !0,
+  onOpenChange: f,
+  children: v,
+  component: O,
+  ...s
+}) {
+  const c = u !== void 0, [C, M] = m(d), t = c ? u : C, l = R((o) => {
+    c || M(o), f?.(o);
+  }, [c, f]), [e, i] = m(null), a = x(e);
+  n(() => {
+    a.current = e;
+  }, [e]);
+  const p = v ?? O, r = I(() => ({
+    ...s,
+    component: p,
+    reactHost: !0,
+    onOpen: (o) => {
+      l(!0), s.onOpen?.(o);
+    },
+    onClose: (o) => {
+      l(!1), i(null), s.onClose?.(o);
+    }
+  }), [s, p, l]);
+  if (n(() => {
+    !t || e || i(b.create(r));
+  }, [t, e, r]), n(() => {
+    e && e.updateOptions(r);
+  }, [e, t, r]), n(() => {
+    e && !t && e.close();
+  }, [t, e]), n(() => () => {
+    a.current?.close(!1, {
+      restoreFocus: !1
+    });
+  }, []), !!e)
+    return /* @__PURE__ */ k(j, {
+      modal: e
+    });
+}
+export {
+  H as Dialog
+};
+//# sourceMappingURL=Dialog.js.map

package/dist/Modal/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sources":["../../src/Modal/Dialog.tsx"],"sourcesContent":["import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport Modal from './Modal';\nimport { ModalRoot } from './views/ModalRoot';\n\nimport type { ModalComponent, ModalInstance, ModalOptions, ModalOptionsRaw } from './typings';\n\nexport type DialogProps = {\n    isOpen?: boolean;\n    defaultOpen?: boolean;\n    onOpenChange?: (open: boolean) => void;\n    children?: ModalComponent;\n} & ModalOptionsRaw;\n\nexport function Dialog({\n    isOpen: _isOpen,\n    defaultOpen = true,\n    onOpenChange,\n    children,\n    component,\n    ..._modalOptions\n}: DialogProps) {\n    const controlled = _isOpen !== undefined;\n    const [internalOpen, setInternalOpen] = useState(defaultOpen);\n    const isOpen = controlled ? _isOpen : internalOpen;\n\n    const setOpen = useCallback((open: boolean) => {\n        if (!controlled) {\n            setInternalOpen(open);\n        }\n\n        onOpenChange?.(open);\n    }, [controlled, onOpenChange]);\n\n    const [instance, setInstance] = useState<ModalInstance | null>(null);\n    const instanceRef = useRef(instance);\n\n    useLayoutEffect(() => {\n        instanceRef.current = instance;\n    }, [instance]);\n\n    const resolvedComponent = children ?? component;\n\n    const modalOptions = useMemo<Partial<ModalOptions>>(() => ({\n        ..._modalOptions,\n        component: resolvedComponent,\n        reactHost: true,\n        onOpen: (modalInstance) => {\n            setOpen(true);\n            _modalOptions.onOpen?.(modalInstance);\n        },\n        onClose: (modalInstance) => {\n            setOpen(false);\n            setInstance(null);\n            _modalOptions.onClose?.(modalInstance);\n        },\n    }), [_modalOptions, resolvedComponent, setOpen]);\n\n    useLayoutEffect(() => {\n        if (!isOpen || instance) {\n            return;\n        }\n\n        setInstance(Modal.create(modalOptions));\n    }, [isOpen, instance, modalOptions]);\n\n    useLayoutEffect(() => {\n        if (instance) {\n            instance.updateOptions(modalOptions);\n        }\n    }, [instance, isOpen, modalOptions]);\n\n    useLayoutEffect(() => {\n        if (instance && !isOpen) {\n            void instance.close();\n        }\n    }, [isOpen, instance]);\n\n    useLayoutEffect(() => () => {\n        void instanceRef.current?.close(false, { restoreFocus: false });\n    }, []);\n\n    if (!instance) {\n        return;\n    }\n\n    return <ModalRoot modal={ instance } />;\n}\n"],"names":["Dialog","_isOpen","defaultOpen","onOpenChange","children","component","_modalOptions","controlled","internalOpen","setInternalOpen","useState","isOpen","setOpen","useCallback","open","instance","setInstance","instanceRef","useRef","useLayoutEffect","resolvedComponent","modalOptions","useMemo","modalInstance","Modal","ModalRoot"],"mappings":";;;;AAIO,SAASA,EAAO;AAAA,EACrB,QAAQC;AAAA,EACR,aAAAC,IAAc;AAAA,EACd,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAG;AACD,QAAMC,IAAaN,MAAY,QACzB,CAACO,GAAcC,CAAe,IAAIC,EAASR,CAAW,GACtDS,IAASJ,IAAaN,IAAUO,GAChCI,IAAUC,EAAY,CAAAC,MAAQ;AAClC,IAAKP,KACHE,EAAgBK,CAAI,GAEtBX,IAAeW,CAAI;AAAA,EACrB,GAAG,CAACP,GAAYJ,CAAY,CAAC,GACvB,CAACY,GAAUC,CAAW,IAAIN,EAAS,IAAI,GACvCO,IAAcC,EAAOH,CAAQ;AACnC,EAAAI,EAAgB,MAAM;AACpB,IAAAF,EAAY,UAAUF;AAAA,EACxB,GAAG,CAACA,CAAQ,CAAC;AACb,QAAMK,IAAoBhB,KAAYC,GAChCgB,IAAeC,EAAQ,OAAO;AAAA,IAClC,GAAGhB;AAAA,IACH,WAAWc;AAAA,IACX,WAAW;AAAA,IACX,QAAQ,CAAAG,MAAiB;AACvB,MAAAX,EAAQ,EAAI,GACZN,EAAc,SAASiB,CAAa;AAAA,IACtC;AAAA,IACA,SAAS,CAAAA,MAAiB;AACxB,MAAAX,EAAQ,EAAK,GACbI,EAAY,IAAI,GAChBV,EAAc,UAAUiB,CAAa;AAAA,IACvC;AAAA,EAAA,IACE,CAACjB,GAAec,GAAmBR,CAAO,CAAC;AAsB/C,MArBAO,EAAgB,MAAM;AACpB,IAAI,CAACR,KAAUI,KAGfC,EAAYQ,EAAM,OAAOH,CAAY,CAAC;AAAA,EACxC,GAAG,CAACV,GAAQI,GAAUM,CAAY,CAAC,GACnCF,EAAgB,MAAM;AACpB,IAAIJ,KACFA,EAAS,cAAcM,CAAY;AAAA,EAEvC,GAAG,CAACN,GAAUJ,GAAQU,CAAY,CAAC,GACnCF,EAAgB,MAAM;AACpB,IAAIJ,KAAY,CAACJ,KACVI,EAAS,MAAA;AAAA,EAElB,GAAG,CAACJ,GAAQI,CAAQ,CAAC,GACrBI,EAAgB,MAAM,MAAM;AAC1B,IAAKF,EAAY,SAAS,MAAM,IAAO;AAAA,MACrC,cAAc;AAAA,IAAA,CACf;AAAA,EACH,GAAG,CAAA,CAAE,GACD,EAACF;AAGL,6BAAyBU,GAAW;AAAA,MAClC,OAAOV;AAAA,IAAA,CACR;AACH;"}