@reforma/components 0.0.0-stage → 0.1.0

package/dist/SettingsLayout/SettingsLayout.js

@@ -0,0 +1,400 @@
+import { MOTION_EASE_UI as B } from "@reforma/constants";
+import { cn as g } from "@reforma/lib";
+import { useReducedMotion as I, AnimatePresence as V, motion as A } from "motion/react";
+import { use as T, useState as h, createContext as P, useRef as D, useCallback as _, useEffect as M, useMemo as z } from "react";
+import { createPortal as nt } from "react-dom";
+import { Box as it } from "../Box/Box.js";
+import { Breadcrumb as b } from "../Breadcrumb/Breadcrumb.js";
+import { Button as E } from "../Button/Button.js";
+import { For as H } from "../For/For.js";
+import { tooltipWithHotkey as ot } from "../Hotkey/Hotkey.js";
+import { ListBox as st, ListBoxItem as rt } from "../List/ListBox.js";
+import { Scrollable as at } from "../Scrollable/Scrollable.js";
+import { Show as R } from "../Show/Show.js";
+import { Text as ct } from "../Text/Text.js";
+import { toast as lt } from "../Toast/Toast.js";
+import c from "./SettingsLayout.module.css.js";
+import { jsx as e, jsxs as w } from "react/jsx-runtime";
+const K = A.create(at), U = 0.35, j = 32, dt = -12, ut = ["mod", "s"];
+function mt(t) {
+  return !(t.metaKey || t.ctrlKey) || t.altKey || t.shiftKey ? !1 : t.key === "s" || t.key === "S";
+}
+function Y(t) {
+  return {
+    duration: t ? 0 : U,
+    ease: B
+  };
+}
+function yt(t) {
+  return {
+    duration: t ? 0 : U,
+    ease: "easeOut"
+  };
+}
+function F(t, s) {
+  return {
+    opacity: t ? 0 : 1,
+    x: t && !s ? dt : 0,
+    y: 0
+  };
+}
+const W = /* @__PURE__ */ P(null), q = /* @__PURE__ */ P(null);
+function x() {
+  const t = T(W);
+  if (!t)
+    throw new Error("useSettingsLayout must be used inside SettingsLayout");
+  return t;
+}
+const G = /* @__PURE__ */ P(null);
+function Rt() {
+  const t = T(G);
+  if (!t)
+    throw new Error("useSettingsSave must be used inside SettingsLayout.Content with saveable prop");
+  return t;
+}
+function J({
+  items: t,
+  defaultSelected: s,
+  defaultStack: l,
+  className: r,
+  children: i
+}) {
+  const [o, a] = h(s ?? t[0]?.id ?? ""), [n, d] = h(() => l ? [...l] : []);
+  return /* @__PURE__ */ e(W, {
+    value: {
+      items: t,
+      selectedId: o,
+      select: (u) => {
+        u !== o && a(u), d([]);
+      },
+      stack: n,
+      push: (u) => d((y) => [...y, u]),
+      rename: (u, y) => d((L) => L.map((f) => f.id === u && f.label !== y ? {
+        ...f,
+        label: y
+      } : f)),
+      pop: () => d((u) => u.slice(0, -1)),
+      reset: () => d([])
+    },
+    children: /* @__PURE__ */ e("div", {
+      className: g(c.root, r),
+      children: i
+    })
+  });
+}
+function Q({
+  title: t,
+  className: s,
+  "aria-label": l = "Settings sections",
+  footer: r
+}) {
+  const {
+    items: i,
+    selectedId: o,
+    select: a
+  } = x();
+  return /* @__PURE__ */ w("div", {
+    className: g(c.sidebar, s),
+    children: [/* @__PURE__ */ e(R, {
+      when: t,
+      children: /* @__PURE__ */ e(ct, {
+        variant: "sm",
+        color: "secondary",
+        className: c.sidebarTitle,
+        children: t
+      })
+    }), /* @__PURE__ */ e(st, {
+      "aria-label": l,
+      size: "md",
+      selectionMode: "single",
+      selectedKeys: [o],
+      disallowEmptySelection: !0,
+      children: /* @__PURE__ */ e(H, {
+        each: i,
+        children: (n) => /* @__PURE__ */ e(rt, {
+          id: n.id,
+          icon: n.icon,
+          textValue: n.label,
+          onPress: () => a(n.id),
+          children: n.label
+        }, n.id)
+      })
+    }), /* @__PURE__ */ e(R, {
+      when: r,
+      children: /* @__PURE__ */ e("div", {
+        className: c.sidebarFooter,
+        children: r
+      })
+    })]
+  });
+}
+function ft() {
+  const {
+    items: t,
+    selectedId: s,
+    stack: l,
+    reset: r
+  } = x(), i = t.find((o) => o.id === s)?.label ?? "";
+  return /* @__PURE__ */ w(b, {
+    variant: "heading-2",
+    className: c.title,
+    children: [l.length === 0 ? /* @__PURE__ */ e(b.Page, {
+      children: i
+    }, "root") : /* @__PURE__ */ e(b.Link, {
+      onPress: r,
+      children: i
+    }, "root"), /* @__PURE__ */ e(H, {
+      each: l,
+      children: (o) => /* @__PURE__ */ e(b.Page, {
+        children: o.label
+      }, o.id)
+    })]
+  });
+}
+function X({
+  paneKey: t,
+  className: s,
+  children: l
+}) {
+  const {
+    stack: r
+  } = x(), i = T(q), o = I(), a = t ? r.findIndex((d) => d.id === t) : -1, n = a >= 0 && a < r.length - 1;
+  return i ? /* @__PURE__ */ nt(/* @__PURE__ */ e(V, {
+    initial: !1,
+    children: t ? /* @__PURE__ */ e(K, {
+      className: g(c.overlay, s),
+      contentClass: g(c.scrollContent, c.paneContent),
+      initial: o ? !1 : {
+        opacity: 0,
+        x: j
+      },
+      animate: F(n, o),
+      exit: o ? void 0 : {
+        opacity: 0,
+        x: j,
+        pointerEvents: "none"
+      },
+      transition: Y(o),
+      inert: n,
+      children: l
+    }, t) : null
+  }), i) : null;
+}
+function Z({
+  className: t,
+  action: s,
+  footer: l,
+  children: r
+}) {
+  const {
+    selectedId: i,
+    stack: o
+  } = x(), [a, n] = h(null), d = I(), m = o.length > 0, u = z(() => F(m, d), [m, d]);
+  return /* @__PURE__ */ e(q, {
+    value: a,
+    children: /* @__PURE__ */ w("div", {
+      className: g(c.content, t),
+      children: [/* @__PURE__ */ w("div", {
+        className: c.header,
+        children: [/* @__PURE__ */ e(ft, {}), s]
+      }), /* @__PURE__ */ e("div", {
+        ref: n,
+        className: c.viewport,
+        children: /* @__PURE__ */ e(K, {
+          className: c.scroll,
+          contentClass: c.scrollContent,
+          initial: d ? !1 : {
+            opacity: 0.6,
+            y: 8
+          },
+          animate: u,
+          transition: m ? Y(d) : yt(d),
+          inert: m,
+          children: r
+        }, i)
+      }), l]
+    })
+  });
+}
+function $({
+  children: t
+}) {
+  return /* @__PURE__ */ e(it, {
+    align: "center",
+    justify: "center",
+    gap: "lg",
+    grow: !0,
+    fullWidth: !0,
+    fullHeight: !0,
+    children: t
+  });
+}
+function tt({
+  headerRight: t,
+  footer: s,
+  saveable: l,
+  className: r,
+  children: i
+}) {
+  return l ? /* @__PURE__ */ e(St, {
+    headerRight: t,
+    footer: s,
+    className: r,
+    children: i
+  }) : /* @__PURE__ */ e(Z, {
+    className: r,
+    action: t,
+    footer: s,
+    children: i
+  });
+}
+const vt = 1e3, pt = {
+  save: {
+    dirty: "Save changes",
+    saving: "Saving…",
+    saved: "Saved",
+    tooltip: "Save changes"
+  },
+  add: {
+    dirty: "Add",
+    saving: "Adding…",
+    saved: "Added",
+    tooltip: "Add"
+  }
+};
+function ht(t) {
+  return typeof t == "object" ? {
+    dirty: t.dirty,
+    saving: t.saving,
+    saved: t.saved,
+    tooltip: t.tooltip ?? t.dirty
+  } : pt[t];
+}
+function St({
+  headerRight: t,
+  footer: s,
+  className: l,
+  children: r
+}) {
+  const {
+    selectedId: i
+  } = x(), o = I(), [a, n] = h("idle"), [d, m] = h("save"), u = D(null), y = D(void 0), [L, f] = h(i);
+  L !== i && (f(i), n("idle"), m("save"));
+  const k = _((v) => {
+    n((p) => v ? "dirty" : p === "dirty" ? "idle" : p);
+  }, []), C = _(async () => {
+    if (u.current) {
+      n("saving");
+      try {
+        const v = await u.current();
+        n(v ? "saved" : "dirty");
+      } catch {
+        lt.error({
+          message: "Something went wrong while saving."
+        }), n("dirty");
+      }
+    }
+  }, []);
+  M(() => {
+    if (a !== "dirty")
+      return;
+    const v = (p) => {
+      mt(p) && (p.preventDefault(), p.stopPropagation(), C());
+    };
+    return window.addEventListener("keydown", v, !0), () => {
+      window.removeEventListener("keydown", v, !0);
+    };
+  }, [C, a]), M(() => (a === "saved" && (y.current = setTimeout(() => {
+    n("idle");
+  }, vt)), () => {
+    clearTimeout(y.current);
+  }), [a]);
+  const et = z(() => ({
+    saveRef: u,
+    onDirtyChange: k,
+    setSaveVerb: m
+  }), [k]), O = {
+    duration: o ? 0 : 0.2,
+    ease: B
+  }, N = ht(d);
+  let S = null;
+  return a === "dirty" ? S = /* @__PURE__ */ e(E, {
+    color: "contrast",
+    size: "sm",
+    onPress: () => {
+      C();
+    },
+    tooltip: ot(N.tooltip, ut),
+    children: N.dirty
+  }) : a === "saving" ? S = /* @__PURE__ */ e(E, {
+    color: "contrast",
+    size: "sm",
+    isDisabled: !0,
+    children: N.saving
+  }) : a === "saved" && (S = /* @__PURE__ */ e(E, {
+    color: "success",
+    size: "sm",
+    children: N.saved
+  })), /* @__PURE__ */ e(G, {
+    value: et,
+    children: /* @__PURE__ */ e(Z, {
+      className: l,
+      footer: s,
+      action: /* @__PURE__ */ e("div", {
+        className: c.headerAction,
+        children: /* @__PURE__ */ e(V, {
+          mode: "popLayout",
+          initial: !1,
+          children: S ? /* @__PURE__ */ e(A.div, {
+            className: c.saveAction,
+            initial: {
+              opacity: 0,
+              scale: 0.92
+            },
+            animate: {
+              opacity: 1,
+              scale: 1
+            },
+            exit: {
+              opacity: 0,
+              scale: 0.92
+            },
+            transition: O,
+            children: S
+          }, "save") : t ? /* @__PURE__ */ e(A.div, {
+            className: c.saveAction,
+            initial: {
+              opacity: 0
+            },
+            animate: {
+              opacity: 1
+            },
+            exit: {
+              opacity: 0
+            },
+            transition: O,
+            children: t
+          }, "header-right") : null
+        })
+      }),
+      children: r
+    })
+  });
+}
+const jt = Object.assign(J, {
+  Sidebar: Q,
+  Content: tt,
+  Pane: X,
+  Empty: $
+});
+J.displayName = "SettingsLayout";
+Q.displayName = "SettingsLayout.Sidebar";
+tt.displayName = "SettingsLayout.Content";
+X.displayName = "SettingsLayout.Pane";
+$.displayName = "SettingsLayout.Empty";
+export {
+  jt as SettingsLayout,
+  x as useSettingsLayout,
+  Rt as useSettingsSave
+};
+//# sourceMappingURL=SettingsLayout.js.map

package/dist/SettingsLayout/SettingsLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsLayout.js","sources":["../../src/SettingsLayout/SettingsLayout.tsx"],"sourcesContent":["import { MOTION_EASE_UI } from '@reforma/constants';\nimport { cn } from '@reforma/lib';\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react';\nimport { createContext, use, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Box } from '../Box';\nimport { Breadcrumb } from '../Breadcrumb';\nimport { Button } from '../Button';\nimport { For } from '../For';\nimport { tooltipWithHotkey } from '../Hotkey';\nimport { ListBox, ListBoxItem } from '../List';\nimport { Scrollable } from '../Scrollable';\nimport { Show } from '../Show';\nimport { Text } from '../Text';\nimport { toast } from '../Toast';\nimport styles from './SettingsLayout.module.css';\n\nimport type { ReactNode, RefObject } from 'react';\n\nconst MotionScrollable = motion.create(Scrollable);\n\nconst PANE_DURATION_S = 0.35;\nconst SLIDE_IN = 32;\nconst SLIDE_OUT = -12;\nconst SAVE_HOTKEY = ['mod', 's'] as const;\n\nfunction isSaveHotkey(event: KeyboardEvent): boolean {\n    if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) {\n        return false;\n    }\n\n    return event.key === 's' || event.key === 'S';\n}\n\nfunction paneTransition(reducedMotion: boolean | null) {\n    return { duration: reducedMotion ? 0 : PANE_DURATION_S, ease: MOTION_EASE_UI };\n}\n\nfunction tabEnterTransition(reducedMotion: boolean | null) {\n    return { duration: reducedMotion ? 0 : PANE_DURATION_S, ease: 'easeOut' as const };\n}\n\nfunction layerRest(covered: boolean, reducedMotion: boolean | null) {\n    return {\n        opacity: covered ? 0 : 1,\n        x: (covered && !reducedMotion) ? SLIDE_OUT : 0,\n        y: 0,\n    };\n}\n\nexport interface SettingsNavItem {\n    id: string;\n    label: string;\n    icon?: ReactNode;\n}\n\nexport interface SettingsStackItem {\n    id: string;\n    label: string;\n}\n\ninterface SettingsLayoutContextValue {\n    items: readonly SettingsNavItem[];\n    selectedId: string;\n    select: (id: string) => void;\n    stack: readonly SettingsStackItem[];\n    push: (item: SettingsStackItem) => void;\n    rename: (id: string, label: string) => void;\n    pop: () => void;\n    reset: () => void;\n}\n\nconst SettingsLayoutContext = createContext<SettingsLayoutContextValue | null>(null);\nconst SettingsOverlayContext = createContext<HTMLElement | null>(null);\n\nexport function useSettingsLayout(): SettingsLayoutContextValue {\n    const ctx = use(SettingsLayoutContext);\n\n    if (!ctx) {\n        throw new Error('useSettingsLayout must be used inside SettingsLayout');\n    }\n\n    return ctx;\n}\n\ntype SettingsSaveCopy = {\n    dirty: string;\n    saving: string;\n    saved: string;\n    tooltip?: string;\n};\n\ntype SettingsSaveVerb = 'save' | 'add' | SettingsSaveCopy;\n\ninterface SettingsSaveContextValue {\n    saveRef: RefObject<(() => Promise<boolean>) | null>;\n    onDirtyChange: (dirty: boolean) => void;\n    setSaveVerb: (verb: SettingsSaveVerb) => void;\n}\n\nconst SettingsSaveContext = createContext<SettingsSaveContextValue | null>(null);\n\nexport function useSettingsSave(): SettingsSaveContextValue {\n    const ctx = use(SettingsSaveContext);\n\n    if (!ctx) {\n        throw new Error('useSettingsSave must be used inside SettingsLayout.Content with saveable prop');\n    }\n\n    return ctx;\n}\n\nexport interface SettingsLayoutProps {\n    items: readonly SettingsNavItem[];\n    defaultSelected?: string;\n    defaultStack?: readonly SettingsStackItem[];\n    className?: string;\n    children: ReactNode;\n}\n\nfunction SettingsLayoutRoot({\n    items,\n    defaultSelected,\n    defaultStack,\n    className,\n    children,\n}: SettingsLayoutProps) {\n    const [selectedId, setSelectedId] = useState(defaultSelected ?? items[0]?.id ?? '');\n    const [stack, setStack] = useState<SettingsStackItem[]>(() => (\n        defaultStack ? [...defaultStack] : []\n    ));\n\n    const select = (id: string) => {\n        if (id !== selectedId) {\n            setSelectedId(id);\n        }\n\n        setStack([]);\n    };\n\n    return (\n        <SettingsLayoutContext\n            value={ {\n                items,\n                selectedId,\n                select,\n                stack,\n                push: item => setStack(current => [...current, item]),\n                rename: (id, label) => setStack(current => current.map(item => (\n                    item.id === id && item.label !== label\n                        ? { ...item, label }\n                        : item\n                ))),\n                pop: () => setStack(current => current.slice(0, -1)),\n                reset: () => setStack([]),\n            } }\n        >\n            <div className={ cn(styles.root, className) }>\n                { children }\n            </div>\n        </SettingsLayoutContext>\n    );\n}\n\nexport interface SettingsLayoutSidebarProps {\n    title?: string;\n    className?: string;\n    'aria-label'?: string;\n    footer?: ReactNode;\n}\n\nfunction Sidebar({\n    title,\n    className,\n    'aria-label': ariaLabel = 'Settings sections',\n    footer,\n}: SettingsLayoutSidebarProps) {\n    const { items, selectedId, select } = useSettingsLayout();\n\n    return (\n        <div className={ cn(styles.sidebar, className) }>\n            <Show when={ title }>\n                <Text variant=\"sm\" color=\"secondary\" className={ styles.sidebarTitle }>\n                    { title }\n                </Text>\n            </Show>\n            <ListBox\n                aria-label={ ariaLabel }\n                size=\"md\"\n                selectionMode=\"single\"\n                selectedKeys={ [selectedId] }\n                disallowEmptySelection\n            >\n                <For each={ items }>\n                    { item => (\n                        <ListBoxItem\n                            key={ item.id }\n                            id={ item.id }\n                            icon={ item.icon }\n                            textValue={ item.label }\n                            onPress={ () => select(item.id) }\n                        >\n                            { item.label }\n                        </ListBoxItem>\n                    ) }\n                </For>\n            </ListBox>\n            <Show when={ footer }>\n                <div className={ styles.sidebarFooter }>{ footer }</div>\n            </Show>\n        </div>\n    );\n}\n\nfunction Title() {\n    const { items, selectedId, stack, reset } = useSettingsLayout();\n    const rootLabel = items.find(item => item.id === selectedId)?.label ?? '';\n\n    return (\n        <Breadcrumb variant=\"heading-2\" className={ styles.title }>\n            { stack.length === 0\n                ? (\n                    <Breadcrumb.Page key=\"root\">\n                        { rootLabel }\n                    </Breadcrumb.Page>\n                )\n                : (\n                    <Breadcrumb.Link key=\"root\" onPress={ reset }>\n                        { rootLabel }\n                    </Breadcrumb.Link>\n                ) }\n            <For each={ stack }>\n                { item => (\n                    <Breadcrumb.Page key={ item.id }>\n                        { item.label }\n                    </Breadcrumb.Page>\n                ) }\n            </For>\n        </Breadcrumb>\n    );\n}\n\nexport interface SettingsLayoutPaneProps {\n    paneKey?: string;\n    className?: string;\n    children: ReactNode;\n}\n\n/** Nested view over the content viewport. Previous layer stays mounted (scroll kept). */\nfunction Pane({ paneKey, className, children }: SettingsLayoutPaneProps) {\n    const { stack } = useSettingsLayout();\n    const overlay = use(SettingsOverlayContext);\n    const reducedMotion = useReducedMotion();\n    const index = paneKey ? stack.findIndex(item => item.id === paneKey) : -1;\n    const covered = index >= 0 && index < stack.length - 1;\n\n    if (!overlay) {\n        return null;\n    }\n\n    return createPortal(\n        <AnimatePresence initial={ false }>\n            { paneKey\n                ? (\n                    <MotionScrollable\n                        key={ paneKey }\n                        className={ cn(styles.overlay, className) }\n                        contentClass={ cn(styles.scrollContent, styles.paneContent) }\n                        initial={ reducedMotion ? false : { opacity: 0, x: SLIDE_IN } }\n                        animate={ layerRest(covered, reducedMotion) }\n                        exit={ reducedMotion ? undefined : { opacity: 0, x: SLIDE_IN, pointerEvents: 'none' } }\n                        transition={ paneTransition(reducedMotion) }\n                        inert={ covered }\n                    >\n                        { children }\n                    </MotionScrollable>\n                )\n                : null }\n        </AnimatePresence>,\n        overlay\n    );\n}\n\nfunction Shell({\n    className,\n    action,\n    footer,\n    children,\n}: {\n    className?: string;\n    action?: ReactNode;\n    footer?: ReactNode;\n    children: ReactNode;\n}) {\n    const { selectedId, stack } = useSettingsLayout();\n    const [overlay, setOverlay] = useState<HTMLDivElement | null>(null);\n    const reducedMotion = useReducedMotion();\n    const covered = stack.length > 0;\n    const animate = useMemo(\n        () => layerRest(covered, reducedMotion),\n        [covered, reducedMotion]\n    );\n\n    return (\n        <SettingsOverlayContext value={ overlay }>\n            <div className={ cn(styles.content, className) }>\n                <div className={ styles.header }>\n                    <Title />\n                    { action }\n                </div>\n                <div ref={ setOverlay } className={ styles.viewport }>\n                    <MotionScrollable\n                        key={ selectedId }\n                        className={ styles.scroll }\n                        contentClass={ styles.scrollContent }\n                        initial={ reducedMotion ? false : { opacity: 0.6, y: 8 } }\n                        animate={ animate }\n                        transition={ covered\n                            ? paneTransition(reducedMotion)\n                            : tabEnterTransition(reducedMotion) }\n                        inert={ covered }\n                    >\n                        { children }\n                    </MotionScrollable>\n                </div>\n                { footer }\n            </div>\n        </SettingsOverlayContext>\n    );\n}\n\nfunction Empty({ children }: { children: ReactNode }) {\n    return (\n        <Box align=\"center\" justify=\"center\" gap=\"lg\" grow fullWidth fullHeight>\n            { children }\n        </Box>\n    );\n}\n\nexport interface SettingsLayoutContentProps {\n    headerRight?: ReactNode;\n    /** Pinned under the scrolling pane. */\n    footer?: ReactNode;\n    saveable?: boolean;\n    className?: string;\n    children: ReactNode;\n}\n\nfunction Content({ headerRight, footer, saveable, className, children }: SettingsLayoutContentProps) {\n    if (saveable) {\n        return (\n            <SaveableContent headerRight={ headerRight } footer={ footer } className={ className }>\n                { children }\n            </SaveableContent>\n        );\n    }\n\n    return (\n        <Shell className={ className } action={ headerRight } footer={ footer }>\n            { children }\n        </Shell>\n    );\n}\n\ntype SaveState = 'idle' | 'dirty' | 'saving' | 'saved';\n\nconst SAVED_DISPLAY_DURATION = 1000;\n\nconst ACTION_COPY = {\n    save: {\n        dirty: 'Save changes',\n        saving: 'Saving…',\n        saved: 'Saved',\n        tooltip: 'Save changes',\n    },\n    add: {\n        dirty: 'Add',\n        saving: 'Adding…',\n        saved: 'Added',\n        tooltip: 'Add',\n    },\n} as const satisfies Record<string, SettingsSaveCopy & { tooltip: string }>;\n\nfunction saveActionCopy(verb: SettingsSaveVerb): SettingsSaveCopy & { tooltip: string } {\n    if (typeof verb === 'object') {\n        return {\n            dirty: verb.dirty,\n            saving: verb.saving,\n            saved: verb.saved,\n            tooltip: verb.tooltip ?? verb.dirty,\n        };\n    }\n\n    return ACTION_COPY[verb];\n}\n\nfunction SaveableContent({\n    headerRight,\n    footer,\n    className,\n    children,\n}: Omit<SettingsLayoutContentProps, 'saveable'>) {\n    const { selectedId } = useSettingsLayout();\n    const reducedMotion = useReducedMotion();\n    const [saveState, setSaveState] = useState<SaveState>('idle');\n    const [saveVerb, setSaveVerb] = useState<SettingsSaveVerb>('save');\n    const saveRef = useRef<(() => Promise<boolean>) | null>(null);\n    const savedTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n    const [saveTab, setSaveTab] = useState(selectedId);\n\n    if (saveTab !== selectedId) {\n        setSaveTab(selectedId);\n        setSaveState('idle');\n        setSaveVerb('save');\n    }\n\n    const onDirtyChange = useCallback((dirty: boolean) => {\n        setSaveState((prev) => {\n            if (dirty) {\n                return 'dirty';\n            }\n\n            if (prev === 'dirty') {\n                return 'idle';\n            }\n\n            return prev;\n        });\n    }, []);\n\n    const handleSave = useCallback(async() => {\n        if (!saveRef.current) {\n            return;\n        }\n\n        setSaveState('saving');\n\n        try {\n            const success = await saveRef.current();\n\n            if (success) {\n                setSaveState('saved');\n            }\n            else {\n                setSaveState('dirty');\n            }\n        }\n        catch {\n            toast.error({ message: 'Something went wrong while saving.' });\n            setSaveState('dirty');\n        }\n    }, []);\n\n    useEffect(() => {\n        if (saveState !== 'dirty') {\n            return;\n        }\n\n        // Window capture so Pane overlays (portaled) still hit ⌘S / Ctrl+S.\n        const onKeyDown = (event: KeyboardEvent) => {\n            if (!isSaveHotkey(event)) {\n                return;\n            }\n\n            event.preventDefault();\n            event.stopPropagation();\n            void handleSave();\n        };\n\n        window.addEventListener('keydown', onKeyDown, true);\n\n        return () => {\n            window.removeEventListener('keydown', onKeyDown, true);\n        };\n    }, [handleSave, saveState]);\n\n    useEffect(() => {\n        if (saveState === 'saved') {\n            savedTimerRef.current = setTimeout(() => {\n                setSaveState('idle');\n            }, SAVED_DISPLAY_DURATION);\n        }\n\n        return () => {\n            clearTimeout(savedTimerRef.current);\n        };\n    }, [saveState]);\n\n    const ctx = useMemo<SettingsSaveContextValue>(\n        () => ({ saveRef, onDirtyChange, setSaveVerb }),\n        [onDirtyChange]\n    );\n\n    const saveTransition = {\n        duration: reducedMotion ? 0 : 0.2,\n        ease: MOTION_EASE_UI,\n    };\n\n    const copy = saveActionCopy(saveVerb);\n    let saveControl: ReactNode = null;\n\n    if (saveState === 'dirty') {\n        saveControl = (\n            <Button\n                color=\"contrast\"\n                size=\"sm\"\n                onPress={ () => void handleSave() }\n                tooltip={ tooltipWithHotkey(copy.tooltip, SAVE_HOTKEY) }\n            >\n                { copy.dirty }\n            </Button>\n        );\n    }\n    else if (saveState === 'saving') {\n        saveControl = (\n            <Button color=\"contrast\" size=\"sm\" isDisabled>\n                { copy.saving }\n            </Button>\n        );\n    }\n    else if (saveState === 'saved') {\n        saveControl = (\n            <Button color=\"success\" size=\"sm\">\n                { copy.saved }\n            </Button>\n        );\n    }\n\n    return (\n        <SettingsSaveContext value={ ctx }>\n            <Shell\n                className={ className }\n                footer={ footer }\n                action={ (\n                    <div className={ styles.headerAction }>\n                        <AnimatePresence mode=\"popLayout\" initial={ false }>\n                            { saveControl\n                                ? (\n                                    <motion.div\n                                        key=\"save\"\n                                        className={ styles.saveAction }\n                                        initial={ { opacity: 0, scale: 0.92 } }\n                                        animate={ { opacity: 1, scale: 1 } }\n                                        exit={ { opacity: 0, scale: 0.92 } }\n                                        transition={ saveTransition }\n                                    >\n                                        { saveControl }\n                                    </motion.div>\n                                )\n                                : headerRight\n                                    ? (\n                                        <motion.div\n                                            key=\"header-right\"\n                                            className={ styles.saveAction }\n                                            initial={ { opacity: 0 } }\n                                            animate={ { opacity: 1 } }\n                                            exit={ { opacity: 0 } }\n                                            transition={ saveTransition }\n                                        >\n                                            { headerRight }\n                                        </motion.div>\n                                    )\n                                    : null }\n                        </AnimatePresence>\n                    </div>\n                ) }\n            >\n                { children }\n            </Shell>\n        </SettingsSaveContext>\n    );\n}\n\nexport const SettingsLayout = Object.assign(SettingsLayoutRoot, {\n    Sidebar,\n    Content,\n    Pane,\n    Empty,\n});\n\nSettingsLayoutRoot.displayName = 'SettingsLayout';\nSidebar.displayName = 'SettingsLayout.Sidebar';\nContent.displayName = 'SettingsLayout.Content';\nPane.displayName = 'SettingsLayout.Pane';\nEmpty.displayName = 'SettingsLayout.Empty';\n"],"names":["MotionScrollable","motion","Scrollable","PANE_DURATION_S","SLIDE_IN","SLIDE_OUT","SAVE_HOTKEY","isSaveHotkey","event","paneTransition","reducedMotion","MOTION_EASE_UI","tabEnterTransition","layerRest","covered","SettingsLayoutContext","SettingsOverlayContext","useSettingsLayout","ctx","use","SettingsSaveContext","useSettingsSave","SettingsLayoutRoot","items","defaultSelected","defaultStack","className","children","selectedId","setSelectedId","useState","stack","setStack","id","current","item","label","cn","styles","Sidebar","title","ariaLabel","footer","select","_jsx","Show","Text","ListBox","For","ListBoxItem","Title","reset","rootLabel","Breadcrumb","Pane","paneKey","overlay","useReducedMotion","index","createPortal","AnimatePresence","Shell","action","setOverlay","animate","useMemo","_jsxs","Empty","Box","Content","headerRight","saveable","SaveableContent","SAVED_DISPLAY_DURATION","ACTION_COPY","saveActionCopy","verb","saveState","setSaveState","saveVerb","setSaveVerb","saveRef","useRef","savedTimerRef","saveTab","setSaveTab","onDirtyChange","useCallback","dirty","prev","handleSave","success","toast","useEffect","onKeyDown","saveTransition","copy","saveControl","Button","tooltipWithHotkey","SettingsLayout"],"mappings":"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"}

package/dist/SettingsLayout/SettingsLayout.module.css

@@ -0,0 +1 @@
+@layer components{.SettingsLayout_root_lBxQ4b{display:flex;padding:var(--spacing-xs);width:100%;height:100%;overflow:hidden}.SettingsLayout_sidebar_EMtPUy{display:flex;flex-direction:column;gap:var(--spacing-lg);border:1px solid var(--color-secondary-muted-border);border-radius:calc(var(--radius-lg) * var(--squircle-radius-factor));background:var(--color-surface);padding:var(--spacing-lg);width:210px;min-width:210px;corner-shape:superellipse(var(--squircle-value));overflow-y:auto}.SettingsLayout_sidebarTitle_AKclrV{padding:0 var(--spacing-lg)}.SettingsLayout_sidebarFooter_jBD19p{margin-top:auto}.SettingsLayout_content_uv3Glf{display:flex;flex:1;flex-direction:column;min-width:0;min-height:0}.SettingsLayout_header_zOdrOE{display:flex;flex-shrink:0;justify-content:space-between;align-items:center;background:var(--modal-background, var(--color-surface));padding:var(--spacing-40) var(--spacing-40) var(--spacing-20)}.SettingsLayout_viewport_xQNQD0{position:relative;flex:1;min-height:0;overflow:hidden}.SettingsLayout_scroll_qBlv4h,.SettingsLayout_overlay_GMz7It{position:absolute;inset:0}.SettingsLayout_scrollContent_nHRRrq{display:flex;flex:1;flex-direction:column;padding:var(--spacing-20) var(--spacing-40) var(--spacing-40);width:100%}.SettingsLayout_paneContent_Gozrp5{gap:var(--spacing-24)}.SettingsLayout_overlay_GMz7It{z-index:1;background:var(--modal-background, var(--color-surface))}.SettingsLayout_headerAction_jC1Js8{margin-block:-9999px}.SettingsLayout_saveAction_2YRmkD{display:inline-flex;align-items:center}.SettingsLayout_title_toPbWC{flex:1;min-width:0}}

package/dist/SettingsLayout/SettingsLayout.module.css.js

@@ -0,0 +1,34 @@
+const t = "SettingsLayout_root_lBxQ4b", o = "SettingsLayout_sidebar_EMtPUy", e = "SettingsLayout_sidebarTitle_AKclrV", n = "SettingsLayout_sidebarFooter_jBD19p", s = "SettingsLayout_content_uv3Glf", a = "SettingsLayout_header_zOdrOE", i = "SettingsLayout_viewport_xQNQD0", r = "SettingsLayout_scroll_qBlv4h", c = "SettingsLayout_overlay_GMz7It", _ = "SettingsLayout_scrollContent_nHRRrq", l = "SettingsLayout_paneContent_Gozrp5", y = "SettingsLayout_headerAction_jC1Js8", d = "SettingsLayout_saveAction_2YRmkD", u = "SettingsLayout_title_toPbWC", g = {
+  root: t,
+  sidebar: o,
+  sidebarTitle: e,
+  sidebarFooter: n,
+  content: s,
+  header: a,
+  viewport: i,
+  scroll: r,
+  overlay: c,
+  scrollContent: _,
+  paneContent: l,
+  headerAction: y,
+  saveAction: d,
+  title: u
+};
+export {
+  s as content,
+  g as default,
+  a as header,
+  y as headerAction,
+  c as overlay,
+  l as paneContent,
+  t as root,
+  d as saveAction,
+  r as scroll,
+  _ as scrollContent,
+  o as sidebar,
+  n as sidebarFooter,
+  e as sidebarTitle,
+  u as title,
+  i as viewport
+};
+//# sourceMappingURL=SettingsLayout.module.css.js.map

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

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

package/dist/SettingsLayout/index.d.ts

@@ -0,0 +1,3 @@
+export { SettingsLayout, useSettingsLayout, useSettingsSave } from './SettingsLayout';
+export type { SettingsLayoutContentProps, SettingsLayoutProps, SettingsLayoutSidebarProps, SettingsNavItem, SettingsStackItem, } from './SettingsLayout';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SettingsLayout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACtF,YAAY,EACR,0BAA0B,EAC1B,mBAAmB,EACnB,0BAA0B,EAC1B,eAAe,EACf,iBAAiB,GACpB,MAAM,kBAAkB,CAAC"}

package/dist/SettingsLayout/index.js

@@ -0,0 +1,7 @@
+import { SettingsLayout as s, useSettingsLayout as o, useSettingsSave as u } from "./SettingsLayout.js";
+export {
+  s as SettingsLayout,
+  o as useSettingsLayout,
+  u as useSettingsSave
+};
+//# sourceMappingURL=index.js.map

package/dist/SettingsLayout/index.js.map

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

package/dist/Shimmer/Shimmer.d.ts

@@ -0,0 +1,11 @@
+import { type ComponentType, type CSSProperties, type JSX } from 'react';
+export interface ShimmerProps {
+    children: string;
+    as?: keyof JSX.IntrinsicElements | ComponentType<any>;
+    className?: string;
+    style?: CSSProperties;
+    duration?: number;
+    spread?: number;
+}
+export declare function Shimmer({ children, as: tag, className, style, duration, spread, }: ShimmerProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+//# sourceMappingURL=Shimmer.d.ts.map

package/dist/Shimmer/Shimmer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shimmer.d.ts","sourceRoot":"","sources":["../../src/Shimmer/Shimmer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,aAAa,EAAE,KAAK,aAAa,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAIxF,MAAM,WAAW,YAAY;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,OAAO,CAAC,EACpB,QAAQ,EACR,EAAE,EAAE,GAAY,EAChB,SAAS,EACT,KAAK,EACL,QAAY,EACZ,MAAU,GACb,EAAE,YAAY,0FAad"}

package/dist/Shimmer/Shimmer.js

@@ -0,0 +1,24 @@
+import { cn as a } from "@reforma/lib";
+import { createElement as n } from "react";
+import p from "./Shimmer.module.css.js";
+function c({
+  children: r,
+  as: t = "span",
+  className: e,
+  style: m,
+  duration: o = 2,
+  spread: s = 2
+}) {
+  return /* @__PURE__ */ n(t, {
+    className: a(p.root, e),
+    style: {
+      ...m,
+      "--spread": `${(r?.length ?? 0) * s}px`,
+      "--shimmer-duration": `${o}s`
+    }
+  }, r);
+}
+export {
+  c as Shimmer
+};
+//# sourceMappingURL=Shimmer.js.map

package/dist/Shimmer/Shimmer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shimmer.js","sources":["../../src/Shimmer/Shimmer.tsx"],"sourcesContent":["import { cn } from '@reforma/lib';\nimport { createElement, type ComponentType, type CSSProperties, type JSX } from 'react';\n\nimport styles from './Shimmer.module.css';\n\nexport interface ShimmerProps {\n    children: string;\n    as?: keyof JSX.IntrinsicElements | ComponentType<any>;\n    className?: string;\n    style?: CSSProperties;\n    duration?: number;\n    spread?: number;\n}\n\nexport function Shimmer({\n    children,\n    as: tag = 'span',\n    className,\n    style,\n    duration = 2,\n    spread = 2,\n}: ShimmerProps) {\n    return createElement(\n        tag,\n        {\n            className: cn(styles.root, className),\n            style: {\n                ...style,\n                '--spread': `${ (children?.length ?? 0) * spread }px`,\n                '--shimmer-duration': `${ duration }s`,\n            } as CSSProperties,\n        },\n        children\n    );\n}\n"],"names":["Shimmer","children","tag","className","style","duration","spread","cn","styles"],"mappings":";;;AAGO,SAASA,EAAQ;AAAA,EACtB,UAAAC;AAAA,EACA,IAAIC,IAAM;AAAA,EACV,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,QAAAC,IAAS;AACX,GAAG;AACD,2BAAkCJ,GAAK;AAAA,IACrC,WAAWK,EAAGC,EAAO,MAAML,CAAS;AAAA,IACpC,OAAO;AAAA,MACL,GAAGC;AAAA,MACH,YAAY,IAAIH,GAAU,UAAU,KAAKK,CAAM;AAAA,MAC/C,sBAAsB,GAAGD,CAAQ;AAAA,IAAA;AAAA,EACnC,GACCJ,CAAQ;AACb;"}

package/dist/Shimmer/Shimmer.module.css

@@ -0,0 +1 @@
+@property --shimmer-ball-x{syntax: "<percentage>"; inherits: false; initial-value: -30%;}@property --shimmer-ball-y{syntax: "<percentage>"; inherits: false; initial-value: 48%;}@layer components{.Shimmer_root_Whlm59{--shimmer-highlight: var(--color-text);--shimmer-text: var(--color-secondary-muted-text);--shimmer-band: linear-gradient(90deg, transparent calc(50% - var(--spread)), var(--shimmer-highlight), transparent calc(50% + var(--spread)));--shimmer-duration: 2s;display:inline-block;position:relative;background-image:var(--shimmer-band),linear-gradient(var(--shimmer-text),var(--shimmer-text));background-position:100% center,0 0;background-size:250% 100%,auto;background-repeat:no-repeat,no-repeat;-webkit-text-fill-color:transparent;color:transparent;-webkit-background-clip:text;animation:Shimmer_shimmer-text-sweep_4cI2x4 var(--shimmer-duration) linear infinite;background-clip:text}.Shimmer_block_GupghG{--shimmer-block-base: var(--color-secondary-muted-light);--shimmer-block-highlight: color-mix(in srgb, var(--color-text) 12%, transparent);--shimmer-block-duration: 1.6s;position:relative;border-radius:calc(var(--radius-md) * var(--squircle-radius-factor));width:100%;min-height:1rem;overflow:hidden;corner-shape:superellipse(var(--squircle-value));background-color:var(--shimmer-block-base)}.Shimmer_block_GupghG[data-variant=sweep]:after{position:absolute;transform:translate(-100%);animation:Shimmer_shimmer-block-sweep_AOw36z var(--shimmer-block-duration) linear infinite;inset:0;background:linear-gradient(90deg,transparent 0%,var(--shimmer-block-highlight) 50%,transparent 100%);content:""}.Shimmer_block_GupghG[data-variant=dots]{--shimmer-block-duration: 5s;--shimmer-dot-gap: 12px;--shimmer-dot-dim: color-mix(in srgb, var(--color-text) 18%, transparent);--shimmer-dot-mask: radial-gradient(circle, #000 1.15px, transparent 1.4px);--shimmer-ball-radius-x: 42%;--shimmer-ball-radius-y: 55%;--shimmer-ball-x: -28%;--shimmer-ball-y: 42%;background-image:radial-gradient(circle,var(--shimmer-dot-dim) 1.15px,transparent 1.4px);background-size:var(--shimmer-dot-gap) var(--shimmer-dot-gap);background-color:var(--shimmer-block-base)}.Shimmer_block_GupghG[data-variant=dots]:after{position:absolute;inset:0;background:radial-gradient(ellipse var(--shimmer-ball-radius-x) var(--shimmer-ball-radius-y) at var(--shimmer-ball-x) var(--shimmer-ball-y),color-mix(in srgb,var(--color-text) 50%,transparent) 0%,color-mix(in srgb,var(--color-text) 26%,transparent) 40%,color-mix(in srgb,var(--color-text) 8%,transparent) 68%,transparent 88%);content:"";-webkit-mask-image:var(--shimmer-dot-mask);mask-image:var(--shimmer-dot-mask);-webkit-mask-size:var(--shimmer-dot-gap) var(--shimmer-dot-gap);mask-size:var(--shimmer-dot-gap) var(--shimmer-dot-gap);-webkit-mask-repeat:repeat;mask-repeat:repeat;animation:Shimmer_shimmer-dot-ball-path_V5SnDK var(--shimmer-block-duration) ease-in-out infinite}}@keyframes Shimmer_shimmer-text-sweep_4cI2x4{to{background-position:0% center,0 0}}@keyframes Shimmer_shimmer-block-sweep_AOw36z{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes Shimmer_shimmer-dot-ball-path_V5SnDK{0%{--shimmer-ball-x: -28%;--shimmer-ball-y: 42%}12%{--shimmer-ball-x: 22%;--shimmer-ball-y: 72%}24%{--shimmer-ball-x: 58%;--shimmer-ball-y: 28%}38%{--shimmer-ball-x: 108%;--shimmer-ball-y: 62%}50%{--shimmer-ball-x: 78%;--shimmer-ball-y: 18%}63%{--shimmer-ball-x: 18%;--shimmer-ball-y: 80%}76%{--shimmer-ball-x: 92%;--shimmer-ball-y: 48%}88%{--shimmer-ball-x: 35%;--shimmer-ball-y: 22%}to{--shimmer-ball-x: -28%;--shimmer-ball-y: 42%}}

package/dist/Shimmer/Shimmer.module.css.js

@@ -0,0 +1,10 @@
+const o = "Shimmer_root_Whlm59", t = "Shimmer_block_GupghG", c = {
+  root: o,
+  block: t
+};
+export {
+  t as block,
+  c as default,
+  o as root
+};
+//# sourceMappingURL=Shimmer.module.css.js.map

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

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

package/dist/Shimmer/ShimmerBlock.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentPropsWithoutRef } from 'react';
+export type ShimmerBlockVariant = 'sweep' | 'dots';
+export type ShimmerBlockProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
+    /**
+     * `sweep` — soft band (default).
+     * `dots` — peg mesh mask; a soft ball rolls underneath and tints the dots.
+     */
+    variant?: ShimmerBlockVariant;
+    /** Sweep / wander duration in seconds. Defaults: sweep `1.6`, dots `7.5`. */
+    duration?: number;
+};
+/** Block-level loading skeleton (image/card placeholders). Text shine → {@link Shimmer}. */
+export declare function ShimmerBlock({ className, style, variant, duration, ...rest }: ShimmerBlockProps): import("react").JSX.Element;
+//# sourceMappingURL=ShimmerBlock.d.ts.map

package/dist/Shimmer/ShimmerBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShimmerBlock.d.ts","sourceRoot":"","sources":["../../src/Shimmer/ShimmerBlock.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,wBAAwB,EAAiB,MAAM,OAAO,CAAC;AAErE,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnD,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAChF;;;OAGG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,4FAA4F;AAC5F,wBAAgB,YAAY,CAAC,EACzB,SAAS,EACT,KAAK,EACL,OAAiB,EACjB,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,iBAAiB,+BAiBnB"}

package/dist/Shimmer/ShimmerBlock.js

@@ -0,0 +1,26 @@
+import { cn as m } from "@reforma/lib";
+import a from "./Shimmer.module.css.js";
+import { jsx as n } from "react/jsx-runtime";
+function p({
+  className: r,
+  style: t,
+  variant: o = "sweep",
+  duration: e,
+  ...s
+}) {
+  const i = e ?? (o === "dots" ? 7.5 : 1.6);
+  return /* @__PURE__ */ n("div", {
+    ...s,
+    "aria-hidden": !0,
+    className: m(a.block, r),
+    "data-variant": o,
+    style: {
+      ...t,
+      "--shimmer-block-duration": `${i}s`
+    }
+  });
+}
+export {
+  p as ShimmerBlock
+};
+//# sourceMappingURL=ShimmerBlock.js.map

package/dist/Shimmer/ShimmerBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShimmerBlock.js","sources":["../../src/Shimmer/ShimmerBlock.tsx"],"sourcesContent":["import { cn } from '@reforma/lib';\n\nimport styles from './Shimmer.module.css';\n\nimport type { ComponentPropsWithoutRef, CSSProperties } from 'react';\n\nexport type ShimmerBlockVariant = 'sweep' | 'dots';\n\nexport type ShimmerBlockProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {\n    /**\n     * `sweep` — soft band (default).\n     * `dots` — peg mesh mask; a soft ball rolls underneath and tints the dots.\n     */\n    variant?: ShimmerBlockVariant;\n    /** Sweep / wander duration in seconds. Defaults: sweep `1.6`, dots `7.5`. */\n    duration?: number;\n};\n\n/** Block-level loading skeleton (image/card placeholders). Text shine → {@link Shimmer}. */\nexport function ShimmerBlock({\n    className,\n    style,\n    variant = 'sweep',\n    duration,\n    ...rest\n}: ShimmerBlockProps) {\n    const resolvedDuration = duration ?? (variant === 'dots' ? 7.5 : 1.6);\n\n    return (\n        <div\n            { ...rest }\n            aria-hidden\n            className={ cn(styles.block, className) }\n            data-variant={ variant }\n            style={\n                {\n                    ...style,\n                    '--shimmer-block-duration': `${ resolvedDuration }s`,\n                } as CSSProperties\n            }\n        />\n    );\n}\n"],"names":["ShimmerBlock","className","style","variant","duration","rest","resolvedDuration","cn","styles"],"mappings":";;;AAIO,SAASA,EAAa;AAAA,EAC3B,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,GAAGC;AACL,GAAG;AACD,QAAMC,IAAmBF,MAAaD,MAAY,SAAS,MAAM;AACjE,2BAAyB,OAAO;AAAA,IAC9B,GAAGE;AAAA,IACH,eAAe;AAAA,IACf,WAAWE,EAAGC,EAAO,OAAOP,CAAS;AAAA,IACrC,gBAAgBE;AAAA,IAChB,OAAO;AAAA,MACL,GAAGD;AAAA,MACH,4BAA4B,GAAGI,CAAgB;AAAA,IAAA;AAAA,EACjD,CACD;AACH;"}

package/dist/Shimmer/index.d.ts

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