@gabvdl/ui 0.0.14

package/dist/components/image-viewer/progressive-image.d.ts

@@ -0,0 +1,20 @@
+/**
+ * A blurry thumbnail that upgrades to the full-resolution image once it scrolls
+ * into view (IntersectionObserver), then cross-fades the sharp image in on load.
+ *
+ * The thumbnail paints instantly (already small / often cached from a grid); the
+ * full image is only fetched when the tile nears the viewport, so a gallery with
+ * dozens of images doesn't download every full-res file up front.
+ */
+export declare function ProgressiveImage({ thumb, full, alt, className, imgClassName, }: {
+    /** Small placeholder shown (blurred) until the full image loads. */
+    thumb?: string;
+    /** Full-resolution source; loaded lazily when in view. */
+    full: string;
+    alt: string;
+    /** Container classes (size / rounding / overflow live here). */
+    className?: string;
+    /** Extra classes applied to the sharp `<img>` (e.g. hover transforms). */
+    imgClassName?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=progressive-image.d.ts.map

package/dist/components/image-viewer/progressive-image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progressive-image.d.ts","sourceRoot":"","sources":["../../../src/components/image-viewer/progressive-image.tsx"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,IAAI,EACJ,GAAG,EACH,SAAS,EACT,YAAY,GACb,EAAE;IACD,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,+BA0DA"}

package/dist/components/image-viewer/progressive-image.js

@@ -0,0 +1,62 @@
+import { jsxs as b, jsx as c } from "react/jsx-runtime";
+import { useRef as v, useState as a, useEffect as w } from "react";
+import { cn as t } from "../../lib/utils.js";
+function h({
+  thumb: o,
+  full: l,
+  alt: u,
+  className: d,
+  imgClassName: f
+}) {
+  const r = v(null), [m, n] = a(!1), [s, p] = a(!1);
+  return w(() => {
+    const i = r.current;
+    if (!i) return;
+    if (typeof IntersectionObserver > "u") {
+      n(!0);
+      return;
+    }
+    const e = new IntersectionObserver(
+      (g) => {
+        g.some((y) => y.isIntersecting) && (n(!0), e.disconnect());
+      },
+      // Start fetching a bit before the tile actually enters the viewport. Kept
+      // modest so a fast scroll doesn't kick off a burst of decodes far ahead of
+      // where the user actually is.
+      { rootMargin: "200px" }
+    );
+    return e.observe(i), () => e.disconnect();
+  }, []), /* @__PURE__ */ b("div", { ref: r, className: t("relative bg-muted", d), children: [
+    o && /* @__PURE__ */ c(
+      "img",
+      {
+        src: o,
+        alt: "",
+        "aria-hidden": !0,
+        decoding: "async",
+        className: t(
+          "absolute inset-0 h-full w-full scale-105 object-cover blur-md transition-opacity duration-300",
+          s ? "opacity-0" : "opacity-100"
+        )
+      }
+    ),
+    m && /* @__PURE__ */ c(
+      "img",
+      {
+        src: l,
+        alt: u,
+        decoding: "async",
+        onLoad: () => p(!0),
+        className: t(
+          "absolute inset-0 h-full w-full object-cover transition-opacity duration-300",
+          s ? "opacity-100" : "opacity-0",
+          f
+        )
+      }
+    )
+  ] });
+}
+export {
+  h as ProgressiveImage
+};
+//# sourceMappingURL=progressive-image.js.map

package/dist/components/image-viewer/progressive-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progressive-image.js","sources":["../../../src/components/image-viewer/progressive-image.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * A blurry thumbnail that upgrades to the full-resolution image once it scrolls\n * into view (IntersectionObserver), then cross-fades the sharp image in on load.\n *\n * The thumbnail paints instantly (already small / often cached from a grid); the\n * full image is only fetched when the tile nears the viewport, so a gallery with\n * dozens of images doesn't download every full-res file up front.\n */\nexport function ProgressiveImage({\n  thumb,\n  full,\n  alt,\n  className,\n  imgClassName,\n}: {\n  /** Small placeholder shown (blurred) until the full image loads. */\n  thumb?: string;\n  /** Full-resolution source; loaded lazily when in view. */\n  full: string;\n  alt: string;\n  /** Container classes (size / rounding / overflow live here). */\n  className?: string;\n  /** Extra classes applied to the sharp `<img>` (e.g. hover transforms). */\n  imgClassName?: string;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [inView, setInView] = useState(false);\n  const [loaded, setLoaded] = useState(false);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    // Fallback for environments without IntersectionObserver: load immediately.\n    if (typeof IntersectionObserver === 'undefined') {\n      setInView(true);\n      return;\n    }\n    const io = new IntersectionObserver(\n      (entries) => {\n        if (entries.some((e) => e.isIntersecting)) {\n          setInView(true);\n          io.disconnect();\n        }\n      },\n      // Start fetching a bit before the tile actually enters the viewport. Kept\n      // modest so a fast scroll doesn't kick off a burst of decodes far ahead of\n      // where the user actually is.\n      { rootMargin: '200px' },\n    );\n    io.observe(el);\n    return () => io.disconnect();\n  }, []);\n\n  return (\n    <div ref={ref} className={cn('relative bg-muted', className)}>\n      {thumb && (\n        <img\n          src={thumb}\n          alt=\"\"\n          aria-hidden\n          decoding=\"async\"\n          className={cn(\n            'absolute inset-0 h-full w-full scale-105 object-cover blur-md transition-opacity duration-300',\n            loaded ? 'opacity-0' : 'opacity-100',\n          )}\n        />\n      )}\n      {inView && (\n        <img\n          src={full}\n          alt={alt}\n          decoding=\"async\"\n          onLoad={() => setLoaded(true)}\n          className={cn(\n            'absolute inset-0 h-full w-full object-cover transition-opacity duration-300',\n            loaded ? 'opacity-100' : 'opacity-0',\n            imgClassName,\n          )}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["ProgressiveImage","thumb","full","alt","className","imgClassName","ref","useRef","inView","setInView","useState","loaded","setLoaded","useEffect","el","io","entries","e","cn","jsx"],"mappings":";;;AAYO,SAASA,EAAiB;AAAA,EAC/B,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,KAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AACF,GAUG;AACD,QAAMC,IAAMC,EAAuB,IAAI,GACjC,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK;AAE1C,SAAAG,EAAU,MAAM;AACd,UAAMC,IAAKR,EAAI;AACf,QAAI,CAACQ,EAAI;AAET,QAAI,OAAO,uBAAyB,KAAa;AAC/C,MAAAL,EAAU,EAAI;AACd;AAAA,IACF;AACA,UAAMM,IAAK,IAAI;AAAA,MACb,CAACC,MAAY;AACX,QAAIA,EAAQ,KAAK,CAACC,MAAMA,EAAE,cAAc,MACtCR,EAAU,EAAI,GACdM,EAAG,WAAA;AAAA,MAEP;AAAA;AAAA;AAAA;AAAA,MAIA,EAAE,YAAY,QAAA;AAAA,IAAQ;AAExB,WAAAA,EAAG,QAAQD,CAAE,GACN,MAAMC,EAAG,WAAA;AAAA,EAClB,GAAG,CAAA,CAAE,qBAGF,OAAA,EAAI,KAAAT,GAAU,WAAWY,EAAG,qBAAqBd,CAAS,GACxD,UAAA;AAAA,IAAAH,KACC,gBAAAkB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKlB;AAAA,QACL,KAAI;AAAA,QACJ,eAAW;AAAA,QACX,UAAS;AAAA,QACT,WAAWiB;AAAA,UACT;AAAA,UACAP,IAAS,cAAc;AAAA,QAAA;AAAA,MACzB;AAAA,IAAA;AAAA,IAGHH,KACC,gBAAAW;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKjB;AAAA,QACL,KAAAC;AAAA,QACA,UAAS;AAAA,QACT,QAAQ,MAAMS,EAAU,EAAI;AAAA,QAC5B,WAAWM;AAAA,UACT;AAAA,UACAP,IAAS,gBAAgB;AAAA,UACzBN;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GAEJ;AAEJ;"}

package/dist/components/image-viewer/viewable-image.d.ts

@@ -0,0 +1,17 @@
+/**
+ * A clickable image that opens the full-screen {@link ImageViewer} over its
+ * whole group, positioned at its own index — so the viewer can be swiped/arrowed
+ * as a carousel across the group. Renders a {@link ProgressiveImage} inside.
+ */
+export declare function ViewableImage({ images, index, thumb, full, alt, className, imgClassName, }: {
+    /** The full group of image URLs this one belongs to (the carousel set). */
+    images: string[];
+    /** This image's position within `images`. */
+    index: number;
+    thumb?: string;
+    full: string;
+    alt: string;
+    className?: string;
+    imgClassName?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=viewable-image.d.ts.map

package/dist/components/image-viewer/viewable-image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewable-image.d.ts","sourceRoot":"","sources":["../../../src/components/image-viewer/viewable-image.tsx"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,KAAK,EACL,KAAK,EACL,IAAI,EACJ,GAAG,EACH,SAAS,EACT,YAAY,GACb,EAAE;IACD,2EAA2E;IAC3E,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,+BAkBA"}

package/dist/components/image-viewer/viewable-image.js

@@ -0,0 +1,38 @@
+import { jsx as r } from "react/jsx-runtime";
+import { cn as p } from "../../lib/utils.js";
+import { useImageViewer as s } from "./image-viewer.js";
+import { ProgressiveImage as u } from "./progressive-image.js";
+function w({
+  images: m,
+  index: e,
+  thumb: a,
+  full: i,
+  alt: o,
+  className: t,
+  imgClassName: l
+}) {
+  const { open: n } = s();
+  return /* @__PURE__ */ r(
+    "button",
+    {
+      type: "button",
+      className: p("viewable-image group", t),
+      onClick: () => n(m, e),
+      "aria-label": `Expand: ${o || `image ${e + 1}`}`,
+      children: /* @__PURE__ */ r(
+        u,
+        {
+          thumb: a,
+          full: i,
+          alt: o,
+          className: "h-full w-full",
+          imgClassName: l
+        }
+      )
+    }
+  );
+}
+export {
+  w as ViewableImage
+};
+//# sourceMappingURL=viewable-image.js.map

package/dist/components/image-viewer/viewable-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewable-image.js","sources":["../../../src/components/image-viewer/viewable-image.tsx"],"sourcesContent":["import { cn } from '../../lib/utils';\n\nimport { useImageViewer } from './image-viewer';\nimport { ProgressiveImage } from './progressive-image';\n\n/**\n * A clickable image that opens the full-screen {@link ImageViewer} over its\n * whole group, positioned at its own index — so the viewer can be swiped/arrowed\n * as a carousel across the group. Renders a {@link ProgressiveImage} inside.\n */\nexport function ViewableImage({\n  images,\n  index,\n  thumb,\n  full,\n  alt,\n  className,\n  imgClassName,\n}: {\n  /** The full group of image URLs this one belongs to (the carousel set). */\n  images: string[];\n  /** This image's position within `images`. */\n  index: number;\n  thumb?: string;\n  full: string;\n  alt: string;\n  className?: string;\n  imgClassName?: string;\n}) {\n  const { open } = useImageViewer();\n  return (\n    <button\n      type=\"button\"\n      className={cn('viewable-image group', className)}\n      onClick={() => open(images, index)}\n      aria-label={`Expand: ${alt || `image ${index + 1}`}`}\n    >\n      <ProgressiveImage\n        thumb={thumb}\n        full={full}\n        alt={alt}\n        className=\"h-full w-full\"\n        imgClassName={imgClassName}\n      />\n    </button>\n  );\n}\n"],"names":["ViewableImage","images","index","thumb","full","alt","className","imgClassName","open","useImageViewer","jsx","cn","ProgressiveImage"],"mappings":";;;;AAUO,SAASA,EAAc;AAAA,EAC5B,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,KAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AACF,GAUG;AACD,QAAM,EAAE,MAAAC,EAAA,IAASC,EAAA;AACjB,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWC,EAAG,wBAAwBL,CAAS;AAAA,MAC/C,SAAS,MAAME,EAAKP,GAAQC,CAAK;AAAA,MACjC,cAAY,WAAWG,KAAO,SAASH,IAAQ,CAAC,EAAE;AAAA,MAElD,UAAA,gBAAAQ;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,OAAAT;AAAA,UACA,MAAAC;AAAA,UACA,KAAAC;AAAA,UACA,WAAU;AAAA,UACV,cAAAE;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/dist/components/input/index.d.ts

@@ -0,0 +1,3 @@
+export { Input } from './input';
+export type { InputProps } from './input';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/input/index.d.ts.map

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

package/dist/components/input/input.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export interface InputProps extends React.ComponentProps<'input'> {
+    /**
+     * Persist the input's value under this key so it survives a page reload.
+     * The value is restored on mount and written on every change. Works with
+     * uncontrolled inputs (restores via `defaultValue`); a controlled `value`
+     * is still mirrored to storage on change. Omit to disable caching.
+     */
+    cacheKey?: string;
+    /** Where to cache when `cacheKey` is set. Default: `"local"`. */
+    cacheLocation?: 'local' | 'session';
+}
+/** A minimal Tailwind text input, styled from the shared design tokens. */
+export declare function Input({ className, type, cacheKey, cacheLocation, onChange, defaultValue, ...props }: InputProps): React.JSX.Element;
+//# sourceMappingURL=input.d.ts.map

package/dist/components/input/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC;IAC/D;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACrC;AAYD,2EAA2E;AAC3E,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,aAAuB,EACvB,QAAQ,EACR,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,UAAU,qBAwCZ"}

package/dist/components/input/input.js

@@ -0,0 +1,56 @@
+import { jsx as p } from "react/jsx-runtime";
+import * as l from "react";
+import { cn as m } from "../../lib/utils.js";
+function c(o) {
+  if (typeof window > "u") return null;
+  try {
+    return o === "session" ? window.sessionStorage : window.localStorage;
+  } catch {
+    return null;
+  }
+}
+function g({
+  className: o,
+  type: s,
+  cacheKey: t,
+  cacheLocation: u = "local",
+  onChange: r,
+  defaultValue: e,
+  ...d
+}) {
+  const n = t ? c(u) : null, [a] = l.useState(() => {
+    if (!n || !t) return null;
+    try {
+      return n.getItem(t);
+    } catch {
+      return null;
+    }
+  }), f = l.useCallback(
+    (i) => {
+      if (n && t)
+        try {
+          n.setItem(t, i.target.value);
+        } catch {
+        }
+      r == null || r(i);
+    },
+    [n, t, r]
+  );
+  return /* @__PURE__ */ p(
+    "input",
+    {
+      type: s,
+      defaultValue: t ? a ?? e : e,
+      onChange: t ? f : r,
+      className: m(
+        "h-9 w-full min-w-0 rounded-lg border border-input bg-transparent px-3 py-1 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 md:text-sm",
+        o
+      ),
+      ...d
+    }
+  );
+}
+export {
+  g as Input
+};
+//# sourceMappingURL=input.js.map

package/dist/components/input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sources":["../../../src/components/input/input.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../../lib/utils';\n\nexport interface InputProps extends React.ComponentProps<'input'> {\n  /**\n   * Persist the input's value under this key so it survives a page reload.\n   * The value is restored on mount and written on every change. Works with\n   * uncontrolled inputs (restores via `defaultValue`); a controlled `value`\n   * is still mirrored to storage on change. Omit to disable caching.\n   */\n  cacheKey?: string;\n  /** Where to cache when `cacheKey` is set. Default: `\"local\"`. */\n  cacheLocation?: 'local' | 'session';\n}\n\n/** Resolve the requested Web Storage, tolerating SSR and blocked cookies. */\nfunction getStore(location: 'local' | 'session'): Storage | null {\n  if (typeof window === 'undefined') return null;\n  try {\n    return location === 'session' ? window.sessionStorage : window.localStorage;\n  } catch {\n    return null;\n  }\n}\n\n/** A minimal Tailwind text input, styled from the shared design tokens. */\nexport function Input({\n  className,\n  type,\n  cacheKey,\n  cacheLocation = 'local',\n  onChange,\n  defaultValue,\n  ...props\n}: InputProps) {\n  const store = cacheKey ? getStore(cacheLocation) : null;\n\n  // Read the cached value once, synchronously, so the first render already\n  // shows it (avoids a flash of empty input on reload).\n  const [cached] = React.useState<string | null>(() => {\n    if (!store || !cacheKey) return null;\n    try {\n      return store.getItem(cacheKey);\n    } catch {\n      return null;\n    }\n  });\n\n  const handleChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (store && cacheKey) {\n        try {\n          store.setItem(cacheKey, e.target.value);\n        } catch {\n          /* storage full or unavailable — degrade to a plain input */\n        }\n      }\n      onChange?.(e);\n    },\n    [store, cacheKey, onChange],\n  );\n\n  return (\n    <input\n      type={type}\n      defaultValue={cacheKey ? (cached ?? defaultValue) : defaultValue}\n      onChange={cacheKey ? handleChange : onChange}\n      className={cn(\n        'h-9 w-full min-w-0 rounded-lg border border-input bg-transparent px-3 py-1 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 md:text-sm',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"],"names":["getStore","location","Input","className","type","cacheKey","cacheLocation","onChange","defaultValue","props","store","cached","React","handleChange","e","jsx","cn"],"mappings":";;;AAiBA,SAASA,EAASC,GAA+C;AAC/D,MAAI,OAAO,SAAW,IAAa,QAAO;AAC1C,MAAI;AACF,WAAOA,MAAa,YAAY,OAAO,iBAAiB,OAAO;AAAA,EACjE,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAGO,SAASC,EAAM;AAAA,EACpB,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,GAAGC;AACL,GAAe;AACb,QAAMC,IAAQL,IAAWL,EAASM,CAAa,IAAI,MAI7C,CAACK,CAAM,IAAIC,EAAM,SAAwB,MAAM;AACnD,QAAI,CAACF,KAAS,CAACL,EAAU,QAAO;AAChC,QAAI;AACF,aAAOK,EAAM,QAAQL,CAAQ;AAAA,IAC/B,QAAQ;AACN,aAAO;AAAA,IACT;AAAA,EACF,CAAC,GAEKQ,IAAeD,EAAM;AAAA,IACzB,CAACE,MAA2C;AAC1C,UAAIJ,KAASL;AACX,YAAI;AACF,UAAAK,EAAM,QAAQL,GAAUS,EAAE,OAAO,KAAK;AAAA,QACxC,QAAQ;AAAA,QAER;AAEF,MAAAP,KAAA,QAAAA,EAAWO;AAAA,IACb;AAAA,IACA,CAACJ,GAAOL,GAAUE,CAAQ;AAAA,EAAA;AAG5B,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAAX;AAAA,MACA,cAAcC,IAAYM,KAAUH,IAAgBA;AAAA,MACpD,UAAUH,IAAWQ,IAAeN;AAAA,MACpC,WAAWS;AAAA,QACT;AAAA,QACAb;AAAA,MAAA;AAAA,MAED,GAAGM;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/modal/index.d.ts

@@ -0,0 +1,5 @@
+export { Modal } from './modal';
+export type { ModalProps, ModalSize } from './modal';
+export { ModalProvider, useConfirm, useModal } from './modal-context';
+export type { ConfirmSpec, ModalSpec } from './modal-context';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/modal/modal-context.d.ts

@@ -0,0 +1,37 @@
+import { ModalSize } from './modal';
+import * as React from 'react';
+export interface ModalSpec {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    content?: React.ReactNode;
+    footer?: React.ReactNode;
+    size?: ModalSize;
+    dismissable?: boolean;
+    onClose?: () => void;
+}
+export interface ConfirmSpec {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** Red confirm button, for deletes. */
+    destructive?: boolean;
+}
+interface ModalApi {
+    open: (spec: ModalSpec) => string;
+    close: (id?: string) => void;
+    confirm: (spec: ConfirmSpec) => Promise<boolean>;
+}
+/**
+ * Imperative modals: open one from an event handler, no `useState` per dialog.
+ * Also backs `useConfirm`, so `window.confirm` can go.
+ */
+export declare function ModalProvider({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** `const modal = useModal(); modal.open({ title, content })`. */
+export declare function useModal(): ModalApi;
+/** `if (await confirm({ title: 'Delete note?', destructive: true })) …`. */
+export declare function useConfirm(): (spec: ConfirmSpec) => Promise<boolean>;
+export {};
+//# sourceMappingURL=modal-context.d.ts.map

package/dist/components/modal/modal-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-context.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAEhD,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,QAAQ;IAChB,IAAI,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,MAAM,CAAC;IAClC,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B,OAAO,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;CAClD;AAQD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBA4ExE;AAQD,kEAAkE;AAClE,wBAAgB,QAAQ,IAAI,QAAQ,CAEnC;AAED,4EAA4E;AAC5E,wBAAgB,UAAU,IAAI,CAAC,IAAI,EAAE,WAAW,KAAK,OAAO,CAAC,OAAO,CAAC,CAEpE"}

package/dist/components/modal/modal-context.js

@@ -0,0 +1,81 @@
+import { jsxs as C, Fragment as z, jsx as a } from "react/jsx-runtime";
+import * as n from "react";
+import { Modal as P } from "./modal.js";
+import { Button as b } from "../button/button.js";
+const h = n.createContext(null);
+function j({ children: c }) {
+  const [r, l] = n.useState([]), d = n.useRef(0), u = n.useCallback((e) => {
+    l((t) => {
+      var s;
+      const o = e == null ? t[t.length - 1] : t.find((i) => i.id === e);
+      return (s = o == null ? void 0 : o.onClose) == null || s.call(o), e == null ? t.slice(0, -1) : t.filter((i) => i.id !== e);
+    });
+  }, []), f = n.useCallback((e) => {
+    const t = `m${d.current += 1}`;
+    return l((o) => [...o, { ...e, id: t }]), t;
+  }, []), m = n.useCallback(
+    (e) => new Promise((t) => {
+      const o = `m${d.current += 1}`, s = (i) => {
+        l((x) => x.filter((p) => p.id !== o)), t(i);
+      };
+      l((i) => [
+        ...i,
+        {
+          id: o,
+          title: e.title,
+          description: e.description,
+          size: "sm",
+          // A dismiss (Escape / scrim / ✕) is a "no", never a silent hang.
+          onClose: () => t(!1),
+          footer: /* @__PURE__ */ C(z, { children: [
+            /* @__PURE__ */ a(b, { variant: "ghost", size: "sm", onClick: () => s(!1), children: e.cancelLabel ?? "Cancel" }),
+            /* @__PURE__ */ a(
+              b,
+              {
+                variant: e.destructive ? "destructive" : "default",
+                size: "sm",
+                onClick: () => s(!0),
+                children: e.confirmLabel ?? "Confirm"
+              }
+            )
+          ] })
+        }
+      ]);
+    }),
+    []
+  ), k = n.useMemo(() => ({ open: f, close: u, confirm: m }), [f, u, m]);
+  return /* @__PURE__ */ C(h.Provider, { value: k, children: [
+    c,
+    r.map((e) => /* @__PURE__ */ a(
+      P,
+      {
+        open: !0,
+        onClose: () => u(e.id),
+        title: e.title,
+        description: e.description,
+        footer: e.footer,
+        size: e.size,
+        dismissable: e.dismissable,
+        children: e.content
+      },
+      e.id
+    ))
+  ] });
+}
+function M(c) {
+  const r = n.useContext(h);
+  if (!r) throw new Error(`${c} must be used inside a <ModalProvider>`);
+  return r;
+}
+function L() {
+  return M("useModal");
+}
+function R() {
+  return M("useConfirm").confirm;
+}
+export {
+  j as ModalProvider,
+  R as useConfirm,
+  L as useModal
+};
+//# sourceMappingURL=modal-context.js.map

package/dist/components/modal/modal-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-context.js","sources":["../../../src/components/modal/modal-context.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button } from '../button';\nimport { Modal, type ModalSize } from './modal';\n\nexport interface ModalSpec {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  content?: React.ReactNode;\n  footer?: React.ReactNode;\n  size?: ModalSize;\n  dismissable?: boolean;\n  onClose?: () => void;\n}\n\nexport interface ConfirmSpec {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  /** Red confirm button, for deletes. */\n  destructive?: boolean;\n}\n\ninterface ModalApi {\n  open: (spec: ModalSpec) => string;\n  close: (id?: string) => void;\n  confirm: (spec: ConfirmSpec) => Promise<boolean>;\n}\n\nconst ModalCtx = React.createContext<ModalApi | null>(null);\n\ninterface Entry extends ModalSpec {\n  id: string;\n}\n\n/**\n * Imperative modals: open one from an event handler, no `useState` per dialog.\n * Also backs `useConfirm`, so `window.confirm` can go.\n */\nexport function ModalProvider({ children }: { children: React.ReactNode }) {\n  const [stack, setStack] = React.useState<Entry[]>([]);\n  const seq = React.useRef(0);\n\n  const close = React.useCallback((id?: string) => {\n    setStack((prev) => {\n      const target = id == null ? prev[prev.length - 1] : prev.find((m) => m.id === id);\n      target?.onClose?.();\n      return id == null ? prev.slice(0, -1) : prev.filter((m) => m.id !== id);\n    });\n  }, []);\n\n  const open = React.useCallback((spec: ModalSpec) => {\n    const id = `m${(seq.current += 1)}`;\n    setStack((prev) => [...prev, { ...spec, id }]);\n    return id;\n  }, []);\n\n  const confirm = React.useCallback(\n    (spec: ConfirmSpec) =>\n      new Promise<boolean>((resolve) => {\n        const id = `m${(seq.current += 1)}`;\n        const settle = (answer: boolean) => {\n          setStack((prev) => prev.filter((m) => m.id !== id));\n          resolve(answer);\n        };\n        setStack((prev) => [\n          ...prev,\n          {\n            id,\n            title: spec.title,\n            description: spec.description,\n            size: 'sm',\n            // A dismiss (Escape / scrim / ✕) is a \"no\", never a silent hang.\n            onClose: () => resolve(false),\n            footer: (\n              <>\n                <Button variant=\"ghost\" size=\"sm\" onClick={() => settle(false)}>\n                  {spec.cancelLabel ?? 'Cancel'}\n                </Button>\n                <Button\n                  variant={spec.destructive ? 'destructive' : 'default'}\n                  size=\"sm\"\n                  onClick={() => settle(true)}\n                >\n                  {spec.confirmLabel ?? 'Confirm'}\n                </Button>\n              </>\n            ),\n          },\n        ]);\n      }),\n    [],\n  );\n\n  const api = React.useMemo<ModalApi>(() => ({ open, close, confirm }), [open, close, confirm]);\n\n  return (\n    <ModalCtx.Provider value={api}>\n      {children}\n      {stack.map((m) => (\n        <Modal\n          key={m.id}\n          open\n          onClose={() => close(m.id)}\n          title={m.title}\n          description={m.description}\n          footer={m.footer}\n          size={m.size}\n          dismissable={m.dismissable}\n        >\n          {m.content}\n        </Modal>\n      ))}\n    </ModalCtx.Provider>\n  );\n}\n\nfunction useModalApi(hook: string): ModalApi {\n  const ctx = React.useContext(ModalCtx);\n  if (!ctx) throw new Error(`${hook} must be used inside a <ModalProvider>`);\n  return ctx;\n}\n\n/** `const modal = useModal(); modal.open({ title, content })`. */\nexport function useModal(): ModalApi {\n  return useModalApi('useModal');\n}\n\n/** `if (await confirm({ title: 'Delete note?', destructive: true })) …`. */\nexport function useConfirm(): (spec: ConfirmSpec) => Promise<boolean> {\n  return useModalApi('useConfirm').confirm;\n}\n"],"names":["ModalCtx","React","ModalProvider","children","stack","setStack","seq","close","id","prev","target","m","_a","open","spec","confirm","resolve","settle","answer","jsxs","Fragment","jsx","Button","api","Modal","useModalApi","hook","ctx","useModal","useConfirm"],"mappings":"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"}

package/dist/components/modal/modal.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+export type ModalSize = 'sm' | 'md' | 'lg' | 'full';
+export interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Pinned below the body — buttons, usually. */
+    footer?: React.ReactNode;
+    size?: ModalSize;
+    /** Clicking the scrim closes. Turn off for destructive flows. */
+    dismissable?: boolean;
+    /** Drop the title/close bar entirely — for panels that own their whole chrome
+     * (a command palette, say). Escape and scrim-click still close. */
+    hideHeader?: boolean;
+    className?: string;
+    /** Overrides the body's default padding/scroll wrapper classes. */
+    bodyClassName?: string;
+    children?: React.ReactNode;
+}
+/**
+ * The scrim + panel every project re-implements: portalled to `<body>`, Escape
+ * and scrim-click to close, body scroll locked, focus moved in on open and
+ * returned to the trigger on close, and a soft focus trap so Tab can't wander
+ * behind the overlay.
+ */
+export declare function Modal({ open, onClose, title, description, footer, size, dismissable, hideHeader, className, bodyClassName, children, }: ModalProps): React.ReactPortal | null;
+//# sourceMappingURL=modal.d.ts.map

package/dist/components/modal/modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AASpD,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,gDAAgD;IAChD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,iEAAiE;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;uEACmE;IACnE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,WAAW,EACX,MAAM,EACN,IAAW,EACX,WAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,aAAa,EACb,QAAQ,GACT,EAAE,UAAU,4BAgFZ"}

package/dist/components/modal/modal.js

@@ -0,0 +1,94 @@
+import { jsx as n, jsxs as i } from "react/jsx-runtime";
+import * as m from "react";
+import { createPortal as k } from "react-dom";
+import { X as E } from "lucide-react";
+import { cn as p } from "../../lib/utils.js";
+import { useScrollLock as j, useEscape as D } from "../../hooks/use-overlay.js";
+const K = {
+  sm: "max-w-sm",
+  md: "max-w-lg",
+  lg: "max-w-3xl",
+  full: "max-w-[min(64rem,95vw)] h-[90vh]"
+};
+function I({
+  open: o,
+  onClose: u,
+  title: l,
+  description: f,
+  footer: x,
+  size: v = "md",
+  dismissable: c = !0,
+  hideHeader: g = !1,
+  className: y,
+  bodyClassName: w,
+  children: N
+}) {
+  const a = m.useRef(null), b = m.useRef(null);
+  j(o), D(() => c && u(), o), m.useEffect(() => {
+    var r, s;
+    return o ? (b.current = document.activeElement, (s = ((r = a.current) == null ? void 0 : r.querySelector(h)) ?? a.current) == null || s.focus({ preventScroll: !0 }), () => {
+      var t, d;
+      return (d = (t = b.current) == null ? void 0 : t.focus) == null ? void 0 : d.call(t, { preventScroll: !0 });
+    }) : void 0;
+  }, [o]);
+  const S = (e) => {
+    if (e.key !== "Tab" || !a.current) return;
+    const r = [...a.current.querySelectorAll(h)];
+    if (r.length === 0) return;
+    const [s, t] = [r[0], r[r.length - 1]], d = document.activeElement;
+    e.shiftKey && d === s ? (e.preventDefault(), t.focus()) : !e.shiftKey && d === t && (e.preventDefault(), s.focus());
+  };
+  return !o || typeof document > "u" ? null : k(
+    /* @__PURE__ */ n(
+      "div",
+      {
+        className: "ds-modal-scrim fixed inset-0 z-[90] flex items-end justify-center bg-black/60 p-0 backdrop-blur-sm sm:items-center sm:p-6",
+        onPointerDown: (e) => {
+          c && e.target === e.currentTarget && u();
+        },
+        children: /* @__PURE__ */ i(
+          "div",
+          {
+            ref: a,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": typeof l == "string" ? l : void 0,
+            tabIndex: -1,
+            onKeyDown: S,
+            className: p(
+              "ds-modal-panel flex max-h-[90vh] w-full flex-col overflow-hidden rounded-t-2xl border border-border bg-card text-card-foreground shadow-2xl outline-none sm:rounded-2xl",
+              K[v],
+              y
+            ),
+            children: [
+              !g && (l || c) && /* @__PURE__ */ i("div", { className: "flex items-start justify-between gap-4 border-b border-border px-5 py-4", children: [
+                /* @__PURE__ */ i("div", { className: "min-w-0", children: [
+                  l && /* @__PURE__ */ n("h2", { className: "truncate text-base font-medium", children: l }),
+                  f && /* @__PURE__ */ n("p", { className: "mt-1 text-sm text-muted-foreground", children: f })
+                ] }),
+                c && /* @__PURE__ */ n(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: u,
+                    "aria-label": "Close",
+                    className: "-mr-1 shrink-0 rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                    children: /* @__PURE__ */ n(E, { className: "size-4" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ n("div", { className: p("min-h-0 flex-1 overflow-y-auto px-5 py-4", w), children: N }),
+              x && /* @__PURE__ */ n("div", { className: "flex items-center justify-end gap-2 border-t border-border px-5 py-3", children: x })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+const h = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+export {
+  I as Modal
+};
+//# sourceMappingURL=modal.js.map

package/dist/components/modal/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sources":["../../../src/components/modal/modal.tsx"],"sourcesContent":["import * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { X } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\nimport { useEscape, useScrollLock } from '../../hooks/use-overlay';\n\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'full';\n\nconst SIZES: Record<ModalSize, string> = {\n  sm: 'max-w-sm',\n  md: 'max-w-lg',\n  lg: 'max-w-3xl',\n  full: 'max-w-[min(64rem,95vw)] h-[90vh]',\n};\n\nexport interface ModalProps {\n  open: boolean;\n  onClose: () => void;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  /** Pinned below the body — buttons, usually. */\n  footer?: React.ReactNode;\n  size?: ModalSize;\n  /** Clicking the scrim closes. Turn off for destructive flows. */\n  dismissable?: boolean;\n  /** Drop the title/close bar entirely — for panels that own their whole chrome\n   * (a command palette, say). Escape and scrim-click still close. */\n  hideHeader?: boolean;\n  className?: string;\n  /** Overrides the body's default padding/scroll wrapper classes. */\n  bodyClassName?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * The scrim + panel every project re-implements: portalled to `<body>`, Escape\n * and scrim-click to close, body scroll locked, focus moved in on open and\n * returned to the trigger on close, and a soft focus trap so Tab can't wander\n * behind the overlay.\n */\nexport function Modal({\n  open,\n  onClose,\n  title,\n  description,\n  footer,\n  size = 'md',\n  dismissable = true,\n  hideHeader = false,\n  className,\n  bodyClassName,\n  children,\n}: ModalProps) {\n  const panel = React.useRef<HTMLDivElement>(null);\n  const restoreTo = React.useRef<HTMLElement | null>(null);\n\n  useScrollLock(open);\n  useEscape(() => dismissable && onClose(), open);\n\n  React.useEffect(() => {\n    if (!open) return;\n    restoreTo.current = document.activeElement as HTMLElement | null;\n    const first = panel.current?.querySelector<HTMLElement>(FOCUSABLE);\n    (first ?? panel.current)?.focus({ preventScroll: true });\n    return () => restoreTo.current?.focus?.({ preventScroll: true });\n  }, [open]);\n\n  const onKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key !== 'Tab' || !panel.current) return;\n    const items = [...panel.current.querySelectorAll<HTMLElement>(FOCUSABLE)];\n    if (items.length === 0) return;\n    const [first, last] = [items[0], items[items.length - 1]];\n    const active = document.activeElement;\n    if (e.shiftKey && active === first) {\n      e.preventDefault();\n      last.focus();\n    } else if (!e.shiftKey && active === last) {\n      e.preventDefault();\n      first.focus();\n    }\n  };\n\n  if (!open || typeof document === 'undefined') return null;\n\n  return createPortal(\n    <div\n      className=\"ds-modal-scrim fixed inset-0 z-[90] flex items-end justify-center bg-black/60 p-0 backdrop-blur-sm sm:items-center sm:p-6\"\n      onPointerDown={(e) => {\n        if (dismissable && e.target === e.currentTarget) onClose();\n      }}\n    >\n      <div\n        ref={panel}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={typeof title === 'string' ? title : undefined}\n        tabIndex={-1}\n        onKeyDown={onKeyDown}\n        className={cn(\n          'ds-modal-panel flex max-h-[90vh] w-full flex-col overflow-hidden rounded-t-2xl border border-border bg-card text-card-foreground shadow-2xl outline-none sm:rounded-2xl',\n          SIZES[size],\n          className,\n        )}\n      >\n        {!hideHeader && (title || dismissable) && (\n          <div className=\"flex items-start justify-between gap-4 border-b border-border px-5 py-4\">\n            <div className=\"min-w-0\">\n              {title && <h2 className=\"truncate text-base font-medium\">{title}</h2>}\n              {description && <p className=\"mt-1 text-sm text-muted-foreground\">{description}</p>}\n            </div>\n            {dismissable && (\n              <button\n                type=\"button\"\n                onClick={onClose}\n                aria-label=\"Close\"\n                className=\"-mr-1 shrink-0 rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\"\n              >\n                <X className=\"size-4\" />\n              </button>\n            )}\n          </div>\n        )}\n        <div className={cn('min-h-0 flex-1 overflow-y-auto px-5 py-4', bodyClassName)}>\n          {children}\n        </div>\n        {footer && (\n          <div className=\"flex items-center justify-end gap-2 border-t border-border px-5 py-3\">{footer}</div>\n        )}\n      </div>\n    </div>,\n    document.body,\n  );\n}\n\nconst FOCUSABLE =\n  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n"],"names":["SIZES","Modal","open","onClose","title","description","footer","size","dismissable","hideHeader","className","bodyClassName","children","panel","React","restoreTo","useScrollLock","useEscape","_b","_a","FOCUSABLE","onKeyDown","items","first","last","active","createPortal","jsx","jsxs","cn","X"],"mappings":"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"}

package/dist/components/nav-2d/index.d.ts

@@ -0,0 +1,3 @@
+export { Nav2DProvider, Nav2DItem, useNav2D } from './nav-2d';
+export type { Nav2DProviderProps, Nav2DItemProps, Nav2DContextValue } from './nav-2d';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/nav-2d/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/nav-2d/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAC9D,YAAY,EAAE,kBAAkB,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/nav-2d/nav-2d.d.ts

@@ -0,0 +1,59 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface Nav2DContextValue {
+    /** The id of the item currently selected (the ray's origin). */
+    selectedId: string | null;
+    /** The id currently previewed mid-drag (committed on release), or null. */
+    previewId: string | null;
+    /** Whether the capture blocker is live. */
+    enabled: boolean;
+    /** Turn the navigation blocker on/off (e.g. from a toolbar toggle). */
+    setEnabled: (v: boolean) => void;
+    /** Programmatically select an item (or clear with null). */
+    select: (id: string | null) => void;
+    /** Fire an item's `onActivate` — defaults to the current selection. */
+    activate: (id?: string | null) => void;
+    /** @internal registration used by {@link Nav2DItem}. */
+    register: (id: string, el: HTMLElement, onActivate?: () => void) => () => void;
+    /** @internal keep an item's activate handler fresh across renders. */
+    setActivate: (id: string, onActivate?: () => void) => void;
+}
+/** Access the ambient {@link Nav2DProvider}. Throws if used outside one. */
+export declare function useNav2D(): Nav2DContextValue;
+export interface Nav2DProviderProps {
+    children: ReactNode;
+    /** Start with this item selected (else the first to register wins). */
+    defaultSelectedId?: string | null;
+    /** Start with the capture blocker off. */
+    defaultEnabled?: boolean;
+    /**
+     * Where the capture blocker lives. `'viewport'` (default) covers the whole
+     * page — the intended full-screen navigation mode. `'container'` scopes the
+     * blocker to a positioned wrapper around `children`, so navigation only takes
+     * over a panel and the rest of the page stays interactive (used by the docs
+     * demo, and handy for scoping nav to one region).
+     */
+    bounds?: 'viewport' | 'container';
+    /** Called whenever the selection changes (via joystick, tap or code). */
+    onSelect?: (id: string | null) => void;
+    /** Called when an item is activated (double tap / `activate()`). */
+    onActivate?: (id: string) => void;
+}
+export declare function Nav2DProvider({ children, defaultSelectedId, defaultEnabled, bounds, onSelect, onActivate, }: Nav2DProviderProps): import("react").JSX.Element;
+export interface Nav2DItemProps {
+    children: ReactNode;
+    /** Fired when the item is activated (double tap while selected). */
+    onActivate?: () => void;
+    /** Stable id — auto-generated if omitted. */
+    id?: string;
+    /** Ring corner radius (px) — match the wrapped element for a snug ring. */
+    radius?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Marks a subtree as a reachable navigation target. Shows a ring reflecting its
+ * state (selected / preview / idle) without shifting layout, and registers with
+ * the nearest {@link Nav2DProvider}.
+ */
+export declare function Nav2DItem({ children, onActivate, id: idProp, radius, className, style }: Nav2DItemProps): import("react").JSX.Element;
+//# sourceMappingURL=nav-2d.d.ts.map

package/dist/components/nav-2d/nav-2d.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-2d.d.ts","sourceRoot":"","sources":["../../../src/components/nav-2d/nav-2d.tsx"],"names":[],"mappings":"AAAA,OAAO,EAUL,KAAK,aAAa,EAElB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAmCf,MAAM,WAAW,iBAAiB;IAChC,gEAAgE;IAChE,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,2EAA2E;IAC3E,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,2CAA2C;IAC3C,OAAO,EAAE,OAAO,CAAC;IACjB,uEAAuE;IACvE,UAAU,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,4DAA4D;IAC5D,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACpC,uEAAuE;IACvE,QAAQ,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvC,wDAAwD;IACxD,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,UAAU,CAAC,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAC;IAC/E,sEAAsE;IACtE,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CAC5D;AAID,4EAA4E;AAC5E,wBAAgB,QAAQ,IAAI,iBAAiB,CAI5C;AAgFD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,0CAA0C;IAC1C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IAClC,yEAAyE;IACzE,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvC,oEAAoE;IACpE,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAcD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,iBAAwB,EACxB,cAAqB,EACrB,MAAmB,EACnB,QAAQ,EACR,UAAU,GACX,EAAE,kBAAkB,+BA+KpB;AAmHD,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,oEAAoE;IACpE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,6CAA6C;IAC7C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,2EAA2E;IAC3E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAsBD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,MAAW,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,cAAc,+BA+B5G"}