@krizaka/ui 3.4.0 → 3.6.0

package/dist/loader.d.ts

@@ -7,22 +7,26 @@ declare const loader: tailwind_variants.TVReturnType<{
         inline: {
             box: string;
             glyph: string;
+            mark: string;
         };
         block: {
             box: string;
             glyph: string;
+            mark: string;
             text: string;
         };
         overlay: {
             root: string;
             box: string;
             glyph: string;
+            mark: string;
             text: string;
         };
         page: {
             root: string;
             box: string;
             glyph: string;
+            mark: string;
             text: string;
             label: string;
         };
@@ -39,6 +43,7 @@ declare const loader: tailwind_variants.TVReturnType<{
     root: string;
     box: string;
     glyph: string;
+    mark: string;
     text: string;
     label: string;
     detail: string;
@@ -47,22 +52,26 @@ declare const loader: tailwind_variants.TVReturnType<{
         inline: {
             box: string;
             glyph: string;
+            mark: string;
         };
         block: {
             box: string;
             glyph: string;
+            mark: string;
             text: string;
         };
         overlay: {
             root: string;
             box: string;
             glyph: string;
+            mark: string;
             text: string;
         };
         page: {
             root: string;
             box: string;
             glyph: string;
+            mark: string;
             text: string;
             label: string;
         };
@@ -79,6 +88,7 @@ declare const loader: tailwind_variants.TVReturnType<{
     root: string;
     box: string;
     glyph: string;
+    mark: string;
     text: string;
     label: string;
     detail: string;
@@ -87,22 +97,26 @@ declare const loader: tailwind_variants.TVReturnType<{
         inline: {
             box: string;
             glyph: string;
+            mark: string;
         };
         block: {
             box: string;
             glyph: string;
+            mark: string;
             text: string;
         };
         overlay: {
             root: string;
             box: string;
             glyph: string;
+            mark: string;
             text: string;
         };
         page: {
             root: string;
             box: string;
             glyph: string;
+            mark: string;
             text: string;
             label: string;
         };
@@ -119,6 +133,7 @@ declare const loader: tailwind_variants.TVReturnType<{
     root: string;
     box: string;
     glyph: string;
+    mark: string;
     text: string;
     label: string;
     detail: string;
@@ -166,12 +181,17 @@ interface LoaderProps extends Omit<React.ComponentProps<"div">, "children"> {
      * @default "inline"
      */
     variant?: LoaderVariants["variant"];
+    /**
+     * The product's mark in place of the Krizaka glyph while it waits — `<OrochiaLogo animated />` (or `ProductLogo`) of
+     * `@krizaka/ui`; it takes the loader's size. The ending (check or cross) stays the glyph's. Decorative: leave `title` off.
+     */
+    mark?: React.ReactNode;
 }
 /**
  * A wait, from start to end. `role="status"` (polite): its words are announced when it shows and when it ends. Under
  * prefers-reduced-motion the glyph rests on a still frame; the delay and the ending stay.
  */
-declare function Loader({ label, status, successLabel, errorLabel, value, eta, delay, minDuration, endDuration, variant, className, ...props }: LoaderProps): React.JSX.Element;
+declare function Loader({ label, status, successLabel, errorLabel, value, eta, delay, minDuration, endDuration, variant, mark, className, ...props }: LoaderProps): React.JSX.Element;
 interface LoadingRegionProps extends React.ComponentProps<"div"> {
     /** Whether the content is on its way. */
     loading: boolean;

package/dist/loader.js

@@ -12,24 +12,27 @@ var loader = tv({
     root: "text-fg-secondary",
     box: "kz-fade flex items-center gap-3",
     glyph: "shrink-0 text-accent",
+    mark: "block shrink-0 [&>svg]:block [&>svg]:h-full [&>svg]:w-full",
     text: "flex min-w-0 flex-col",
     label: "font-medium text-fg",
     detail: "text-xs text-fg-secondary tabular-nums"
   },
   variants: {
     variant: {
-      inline: { box: "text-sm", glyph: "h-5 w-5" },
-      block: { box: "flex-col justify-center py-10 text-center text-sm", glyph: "h-9 w-9", text: "items-center" },
+      inline: { box: "text-sm", glyph: "h-5 w-5", mark: "h-5 w-5" },
+      block: { box: "flex-col justify-center py-10 text-center text-sm", glyph: "h-9 w-9", mark: "h-9 w-9", text: "items-center" },
       overlay: {
         root: "absolute inset-0 z-10 flex items-center justify-center rounded-[inherit] empty:hidden",
         box: "flex-col rounded-xl border border-border-default bg-surface-1/90 px-6 py-5 text-center text-sm shadow-lg backdrop-blur-sm",
         glyph: "h-9 w-9",
+        mark: "h-9 w-9",
         text: "items-center"
       },
       page: {
         root: "fixed inset-0 z-50 flex items-center justify-center bg-surface-0/80 backdrop-blur-sm empty:hidden",
         box: "flex-col text-center",
         glyph: "h-14 w-14",
+        mark: "h-14 w-14",
         text: "items-center",
         label: "font-display text-lg"
       }
@@ -66,6 +69,7 @@ function Loader({
   minDuration = 600,
   endDuration = 1600,
   variant,
+  mark,
   className,
   ...props
 }) {
@@ -98,7 +102,7 @@ function Loader({
   const words = phase === "success" ? successLabel ?? label : phase === "error" ? errorLabel ?? label : label;
   const detail = phase === "loading" ? [known ? `${Math.round(Math.min(1, Math.max(0, value)) * 100)} %` : null, eta].filter(Boolean).join(" \xB7 ") : "";
   return /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", "data-phase": phase ?? "idle", className: s.root({ className }), ...props, children: phase && /* @__PURE__ */ jsxs("div", { className: s.box(), children: [
-    /* @__PURE__ */ jsx(LoaderGlyph, { state: phase, value: known ? value : null, className: s.glyph() }),
+    mark && phase === "loading" ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: s.mark(), "data-mark": "", children: mark }) : /* @__PURE__ */ jsx(LoaderGlyph, { state: phase, value: known ? value : null, className: s.glyph() }),
     /* @__PURE__ */ jsxs("span", { className: s.text(), children: [
       /* @__PURE__ */ jsx("span", { className: s.label(), children: words }),
       detail && /* @__PURE__ */ jsx("span", { className: s.detail(), children: detail })

package/dist/loader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/loader/loader.tsx"],"sourcesContent":["// Client (timers). The whole life of a wait, done right once: nothing for the first instants (a fast answer never\n// flashes a spinner), then the Krizaka glyph with its words and an ETA, held long enough to be read, ending on a\n// check or a cross that is drawn and announced. `LoadingRegion` hands a region over from its content to a skeleton of\n// the same shape, then to words when the wait grows long, then back to the content.\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { LoaderGlyph } from \"../spinner/glyph\";\n\nexport const loader = tv({\n  slots: {\n    root: \"text-fg-secondary\",\n    box: \"kz-fade flex items-center gap-3\",\n    glyph: \"shrink-0 text-accent\",\n    text: \"flex min-w-0 flex-col\",\n    label: \"font-medium text-fg\",\n    detail: \"text-xs text-fg-secondary tabular-nums\",\n  },\n  variants: {\n    variant: {\n      inline: { box: \"text-sm\", glyph: \"h-5 w-5\" },\n      block: { box: \"flex-col justify-center py-10 text-center text-sm\", glyph: \"h-9 w-9\", text: \"items-center\" },\n      overlay: {\n        root: \"absolute inset-0 z-10 flex items-center justify-center rounded-[inherit] empty:hidden\",\n        box: \"flex-col rounded-xl border border-border-default bg-surface-1/90 px-6 py-5 text-center text-sm shadow-lg backdrop-blur-sm\",\n        glyph: \"h-9 w-9\",\n        text: \"items-center\",\n      },\n      page: {\n        root: \"fixed inset-0 z-50 flex items-center justify-center bg-surface-0/80 backdrop-blur-sm empty:hidden\",\n        box: \"flex-col text-center\",\n        glyph: \"h-14 w-14\",\n        text: \"items-center\",\n        label: \"font-display text-lg\",\n      },\n    },\n    ended: {\n      success: { glyph: \"text-fg-success\" },\n      error: { glyph: \"text-fg-danger\" },\n    },\n  },\n  defaultVariants: { variant: \"inline\" },\n});\n\nexport type LoaderVariants = VariantProps<typeof loader>;\n\n/**\n * `true` once `active` has lasted `delay` ms; then stays `true` at least `minDuration` ms — a wait that ends early never\n * shows, one that shows never blinks.\n */\nexport function useDelayedWait(active: boolean, delay = 250, minDuration = 600): boolean {\n  const [shown, setShown] = React.useState(false);\n  const since = React.useRef(0);\n  React.useEffect(() => {\n    if (active === shown) return;\n    const wait = active ? delay : Math.max(0, minDuration - (Date.now() - since.current));\n    const timer = setTimeout(() => {\n      since.current = Date.now();\n      setShown(active);\n    }, wait);\n    return () => clearTimeout(timer);\n  }, [active, shown, delay, minDuration]);\n  return shown;\n}\n\nexport interface LoaderProps extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  /** What is loading, in words (“Loading your invoices”) — passed translated; shown and announced. */\n  label: string;\n  /**\n   * loading · success · error. When the wait ends, the loader shows how it ended for `endDuration` ms, then disappears.\n   * @default \"loading\"\n   */\n  status?: \"loading\" | \"success\" | \"error\";\n  /** The words of a success (“Invoices loaded”) — passed translated. Default: nothing more than the check. */\n  successLabel?: string;\n  /** The words of a failure (“Could not load the invoices”) — passed translated. */\n  errorLabel?: string;\n  /** Between 0 and 1: a determinate wait — the trace grows to it and the percentage shows. */\n  value?: number | null;\n  /** The time left, in words (“About 20 s left”) — passed translated (`@krizaka/intl` formats durations). */\n  eta?: string;\n  /**\n   * Milliseconds before anything shows: a wait shorter than this never flashes.\n   * @default 250\n   */\n  delay?: number;\n  /**\n   * Once shown, the least milliseconds it stays: it never blinks.\n   * @default 600\n   */\n  minDuration?: number;\n  /**\n   * Milliseconds the ending (check or cross) stays before the loader disappears; `0` never shows it, `Infinity` keeps it.\n   * @default 1600\n   */\n  endDuration?: number;\n  /**\n   * inline (beside the content) · block (a region's centre) · overlay (over a `relative` parent, frosted) · page (the\n   * whole screen).\n   * @default \"inline\"\n   */\n  variant?: LoaderVariants[\"variant\"];\n}\n\n/**\n * A wait, from start to end. `role=\"status\"` (polite): its words are announced when it shows and when it ends. Under\n * prefers-reduced-motion the glyph rests on a still frame; the delay and the ending stay.\n */\nexport function Loader({\n  label,\n  status = \"loading\",\n  successLabel,\n  errorLabel,\n  value,\n  eta,\n  delay = 250,\n  minDuration = 600,\n  endDuration = 1600,\n  variant,\n  className,\n  ...props\n}: LoaderProps) {\n  const waiting = useDelayedWait(status === \"loading\", delay, minDuration);\n  // Rendered already ended (a result to show), it shows its ending; otherwise only a wait that was seen ends visibly.\n  const [ending, setEnding] = React.useState<\"success\" | \"error\" | null>(() => (status !== \"loading\" && endDuration > 0 ? status : null));\n  const wasWaiting = React.useRef(false);\n  React.useEffect(() => {\n    if (!Number.isFinite(endDuration)) return;\n    const hide = setTimeout(() => setEnding((e) => (wasWaiting.current ? e : null)), endDuration);\n    return () => clearTimeout(hide);\n    // Only the ending a loader was mounted with: later endings have their own timer below.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  React.useEffect(() => {\n    if (waiting) {\n      wasWaiting.current = true;\n      return;\n    }\n    if (!wasWaiting.current || status === \"loading\") return;\n    wasWaiting.current = false;\n    const end = status;\n    const show = setTimeout(() => setEnding(endDuration > 0 ? end : null), 0);\n    const hide = Number.isFinite(endDuration) ? setTimeout(() => setEnding(null), endDuration) : undefined;\n    return () => {\n      clearTimeout(show);\n      clearTimeout(hide);\n    };\n  }, [waiting, status, endDuration]);\n\n  const phase = waiting ? \"loading\" : ending;\n  const s = loader({ variant, ended: phase === \"success\" || phase === \"error\" ? phase : undefined });\n  const known = phase === \"loading\" && typeof value === \"number\" && Number.isFinite(value);\n  const words = phase === \"success\" ? (successLabel ?? label) : phase === \"error\" ? (errorLabel ?? label) : label;\n  const detail = phase === \"loading\" ? [known ? `${Math.round(Math.min(1, Math.max(0, value)) * 100)} %` : null, eta].filter(Boolean).join(\" · \") : \"\";\n  return (\n    <div role=\"status\" aria-live=\"polite\" data-phase={phase ?? \"idle\"} className={s.root({ className })} {...props}>\n      {phase && (\n        <div className={s.box()}>\n          <LoaderGlyph state={phase} value={known ? value : null} className={s.glyph()} />\n          <span className={s.text()}>\n            <span className={s.label()}>{words}</span>\n            {detail && <span className={s.detail()}>{detail}</span>}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport interface LoadingRegionProps extends React.ComponentProps<\"div\"> {\n  /** Whether the content is on its way. */\n  loading: boolean;\n  /** What stands in while it loads: skeletons the shape of the content (no layout shift when it arrives). */\n  skeleton: React.ReactNode;\n  /** What is loading, in words — passed translated; announced when the wait shows. */\n  label: string;\n  /** The words when the wait grows long (“Still loading — the server is busy”) — passed translated. */\n  slowLabel?: string;\n  /**\n   * Milliseconds of skeleton before the words of a long wait appear over it.\n   * @default 4000\n   */\n  slowAfter?: number;\n  /**\n   * Milliseconds before the skeleton shows: a fast answer goes straight to the content.\n   * @default 200\n   */\n  delay?: number;\n  /**\n   * Once shown, the least milliseconds the skeleton stays.\n   * @default 500\n   */\n  minDuration?: number;\n}\n\n/**\n * A region that hands over: its content → (after `delay`) a skeleton of the same shape → (after `slowAfter`) words over\n * the skeleton → its content again, fading in. `aria-busy` while it waits; the wait is announced once.\n */\nexport function LoadingRegion({\n  loading,\n  skeleton,\n  label,\n  slowLabel,\n  slowAfter = 4000,\n  delay = 200,\n  minDuration = 500,\n  className,\n  children,\n  ...props\n}: LoadingRegionProps) {\n  const waiting = useDelayedWait(loading, delay, minDuration);\n  const slow = useDelayedWait(waiting && loading, slowAfter, 0);\n  const busy = loading || waiting;\n  return (\n    <div aria-busy={busy} data-phase={waiting ? (slow ? \"slow\" : \"skeleton\") : busy ? \"pending\" : \"ready\"} className={[\"relative\", className].filter(Boolean).join(\" \")} {...props}>\n      <span role=\"status\" className=\"sr-only\">\n        {waiting ? (slow ? (slowLabel ?? label) : label) : \"\"}\n      </span>\n      {waiting ? (\n        <div aria-hidden className=\"kz-fade\">\n          {skeleton}\n        </div>\n      ) : busy ? (\n        // Within the delay: the skeleton holds the place, invisible — nothing flashes, nothing jumps.\n        <div aria-hidden className=\"invisible\">\n          {skeleton}\n        </div>\n      ) : (\n        <div className=\"kz-fade\">{children}</div>\n      )}\n      {waiting && slow && <Loader label={slowLabel ?? label} variant=\"overlay\" delay={0} minDuration={0} endDuration={0} aria-live=\"off\" role=\"presentation\" />}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/loader/loader.tsx"],"sourcesContent":["// Client (timers). The whole life of a wait, done right once: nothing for the first instants (a fast answer never\n// flashes a spinner), then the Krizaka glyph with its words and an ETA, held long enough to be read, ending on a\n// check or a cross that is drawn and announced. `LoadingRegion` hands a region over from its content to a skeleton of\n// the same shape, then to words when the wait grows long, then back to the content.\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { LoaderGlyph } from \"../spinner/glyph\";\n\nexport const loader = tv({\n  slots: {\n    root: \"text-fg-secondary\",\n    box: \"kz-fade flex items-center gap-3\",\n    glyph: \"shrink-0 text-accent\",\n    mark: \"block shrink-0 [&>svg]:block [&>svg]:h-full [&>svg]:w-full\",\n    text: \"flex min-w-0 flex-col\",\n    label: \"font-medium text-fg\",\n    detail: \"text-xs text-fg-secondary tabular-nums\",\n  },\n  variants: {\n    variant: {\n      inline: { box: \"text-sm\", glyph: \"h-5 w-5\", mark: \"h-5 w-5\" },\n      block: { box: \"flex-col justify-center py-10 text-center text-sm\", glyph: \"h-9 w-9\", mark: \"h-9 w-9\", text: \"items-center\" },\n      overlay: {\n        root: \"absolute inset-0 z-10 flex items-center justify-center rounded-[inherit] empty:hidden\",\n        box: \"flex-col rounded-xl border border-border-default bg-surface-1/90 px-6 py-5 text-center text-sm shadow-lg backdrop-blur-sm\",\n        glyph: \"h-9 w-9\", mark: \"h-9 w-9\",\n        text: \"items-center\",\n      },\n      page: {\n        root: \"fixed inset-0 z-50 flex items-center justify-center bg-surface-0/80 backdrop-blur-sm empty:hidden\",\n        box: \"flex-col text-center\",\n        glyph: \"h-14 w-14\", mark: \"h-14 w-14\",\n        text: \"items-center\",\n        label: \"font-display text-lg\",\n      },\n    },\n    ended: {\n      success: { glyph: \"text-fg-success\" },\n      error: { glyph: \"text-fg-danger\" },\n    },\n  },\n  defaultVariants: { variant: \"inline\" },\n});\n\nexport type LoaderVariants = VariantProps<typeof loader>;\n\n/**\n * `true` once `active` has lasted `delay` ms; then stays `true` at least `minDuration` ms — a wait that ends early never\n * shows, one that shows never blinks.\n */\nexport function useDelayedWait(active: boolean, delay = 250, minDuration = 600): boolean {\n  const [shown, setShown] = React.useState(false);\n  const since = React.useRef(0);\n  React.useEffect(() => {\n    if (active === shown) return;\n    const wait = active ? delay : Math.max(0, minDuration - (Date.now() - since.current));\n    const timer = setTimeout(() => {\n      since.current = Date.now();\n      setShown(active);\n    }, wait);\n    return () => clearTimeout(timer);\n  }, [active, shown, delay, minDuration]);\n  return shown;\n}\n\nexport interface LoaderProps extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  /** What is loading, in words (“Loading your invoices”) — passed translated; shown and announced. */\n  label: string;\n  /**\n   * loading · success · error. When the wait ends, the loader shows how it ended for `endDuration` ms, then disappears.\n   * @default \"loading\"\n   */\n  status?: \"loading\" | \"success\" | \"error\";\n  /** The words of a success (“Invoices loaded”) — passed translated. Default: nothing more than the check. */\n  successLabel?: string;\n  /** The words of a failure (“Could not load the invoices”) — passed translated. */\n  errorLabel?: string;\n  /** Between 0 and 1: a determinate wait — the trace grows to it and the percentage shows. */\n  value?: number | null;\n  /** The time left, in words (“About 20 s left”) — passed translated (`@krizaka/intl` formats durations). */\n  eta?: string;\n  /**\n   * Milliseconds before anything shows: a wait shorter than this never flashes.\n   * @default 250\n   */\n  delay?: number;\n  /**\n   * Once shown, the least milliseconds it stays: it never blinks.\n   * @default 600\n   */\n  minDuration?: number;\n  /**\n   * Milliseconds the ending (check or cross) stays before the loader disappears; `0` never shows it, `Infinity` keeps it.\n   * @default 1600\n   */\n  endDuration?: number;\n  /**\n   * inline (beside the content) · block (a region's centre) · overlay (over a `relative` parent, frosted) · page (the\n   * whole screen).\n   * @default \"inline\"\n   */\n  variant?: LoaderVariants[\"variant\"];\n  /**\n   * The product's mark in place of the Krizaka glyph while it waits — `<OrochiaLogo animated />` (or `ProductLogo`) of\n   * `@krizaka/ui`; it takes the loader's size. The ending (check or cross) stays the glyph's. Decorative: leave `title` off.\n   */\n  mark?: React.ReactNode;\n}\n\n/**\n * A wait, from start to end. `role=\"status\"` (polite): its words are announced when it shows and when it ends. Under\n * prefers-reduced-motion the glyph rests on a still frame; the delay and the ending stay.\n */\nexport function Loader({\n  label,\n  status = \"loading\",\n  successLabel,\n  errorLabel,\n  value,\n  eta,\n  delay = 250,\n  minDuration = 600,\n  endDuration = 1600,\n  variant,\n  mark,\n  className,\n  ...props\n}: LoaderProps) {\n  const waiting = useDelayedWait(status === \"loading\", delay, minDuration);\n  // Rendered already ended (a result to show), it shows its ending; otherwise only a wait that was seen ends visibly.\n  const [ending, setEnding] = React.useState<\"success\" | \"error\" | null>(() => (status !== \"loading\" && endDuration > 0 ? status : null));\n  const wasWaiting = React.useRef(false);\n  React.useEffect(() => {\n    if (!Number.isFinite(endDuration)) return;\n    const hide = setTimeout(() => setEnding((e) => (wasWaiting.current ? e : null)), endDuration);\n    return () => clearTimeout(hide);\n    // Only the ending a loader was mounted with: later endings have their own timer below.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  React.useEffect(() => {\n    if (waiting) {\n      wasWaiting.current = true;\n      return;\n    }\n    if (!wasWaiting.current || status === \"loading\") return;\n    wasWaiting.current = false;\n    const end = status;\n    const show = setTimeout(() => setEnding(endDuration > 0 ? end : null), 0);\n    const hide = Number.isFinite(endDuration) ? setTimeout(() => setEnding(null), endDuration) : undefined;\n    return () => {\n      clearTimeout(show);\n      clearTimeout(hide);\n    };\n  }, [waiting, status, endDuration]);\n\n  const phase = waiting ? \"loading\" : ending;\n  const s = loader({ variant, ended: phase === \"success\" || phase === \"error\" ? phase : undefined });\n  const known = phase === \"loading\" && typeof value === \"number\" && Number.isFinite(value);\n  const words = phase === \"success\" ? (successLabel ?? label) : phase === \"error\" ? (errorLabel ?? label) : label;\n  const detail = phase === \"loading\" ? [known ? `${Math.round(Math.min(1, Math.max(0, value)) * 100)} %` : null, eta].filter(Boolean).join(\" · \") : \"\";\n  return (\n    <div role=\"status\" aria-live=\"polite\" data-phase={phase ?? \"idle\"} className={s.root({ className })} {...props}>\n      {phase && (\n        <div className={s.box()}>\n          {mark && phase === \"loading\" ? (\n            <span aria-hidden className={s.mark()} data-mark=\"\">\n              {mark}\n            </span>\n          ) : (\n            <LoaderGlyph state={phase} value={known ? value : null} className={s.glyph()} />\n          )}\n          <span className={s.text()}>\n            <span className={s.label()}>{words}</span>\n            {detail && <span className={s.detail()}>{detail}</span>}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport interface LoadingRegionProps extends React.ComponentProps<\"div\"> {\n  /** Whether the content is on its way. */\n  loading: boolean;\n  /** What stands in while it loads: skeletons the shape of the content (no layout shift when it arrives). */\n  skeleton: React.ReactNode;\n  /** What is loading, in words — passed translated; announced when the wait shows. */\n  label: string;\n  /** The words when the wait grows long (“Still loading — the server is busy”) — passed translated. */\n  slowLabel?: string;\n  /**\n   * Milliseconds of skeleton before the words of a long wait appear over it.\n   * @default 4000\n   */\n  slowAfter?: number;\n  /**\n   * Milliseconds before the skeleton shows: a fast answer goes straight to the content.\n   * @default 200\n   */\n  delay?: number;\n  /**\n   * Once shown, the least milliseconds the skeleton stays.\n   * @default 500\n   */\n  minDuration?: number;\n}\n\n/**\n * A region that hands over: its content → (after `delay`) a skeleton of the same shape → (after `slowAfter`) words over\n * the skeleton → its content again, fading in. `aria-busy` while it waits; the wait is announced once.\n */\nexport function LoadingRegion({\n  loading,\n  skeleton,\n  label,\n  slowLabel,\n  slowAfter = 4000,\n  delay = 200,\n  minDuration = 500,\n  className,\n  children,\n  ...props\n}: LoadingRegionProps) {\n  const waiting = useDelayedWait(loading, delay, minDuration);\n  const slow = useDelayedWait(waiting && loading, slowAfter, 0);\n  const busy = loading || waiting;\n  return (\n    <div aria-busy={busy} data-phase={waiting ? (slow ? \"slow\" : \"skeleton\") : busy ? \"pending\" : \"ready\"} className={[\"relative\", className].filter(Boolean).join(\" \")} {...props}>\n      <span role=\"status\" className=\"sr-only\">\n        {waiting ? (slow ? (slowLabel ?? label) : label) : \"\"}\n      </span>\n      {waiting ? (\n        <div aria-hidden className=\"kz-fade\">\n          {skeleton}\n        </div>\n      ) : busy ? (\n        // Within the delay: the skeleton holds the place, invisible — nothing flashes, nothing jumps.\n        <div aria-hidden className=\"invisible\">\n          {skeleton}\n        </div>\n      ) : (\n        <div className=\"kz-fade\">{children}</div>\n      )}\n      {waiting && slow && <Loader label={slowLabel ?? label} variant=\"overlay\" delay={0} minDuration={0} endDuration={0} aria-live=\"off\" role=\"presentation\" />}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/map.js

@@ -673,11 +673,17 @@ function Map({
     }
   ) });
 }
+var noSubscription = () => () => void 0;
 function Marker({ position, label, onPress, selected, size = 18, children }) {
   const { map: m, lib, places } = useMap();
   const s = map();
   const id = React2.useId();
-  const [el] = React2.useState(() => typeof document === "undefined" ? null : document.createElement("div"));
+  const host = React2.useRef(null);
+  const el = React2.useSyncExternalStore(
+    noSubscription,
+    () => host.current ??= document.createElement("div"),
+    () => null
+  );
   React2.useEffect(() => {
     places.add(id, label);
     return () => places.remove(id);