@smwb/ui-react 2.1.3 → 2.3.0

package/dist/components/feedBack/saveAssetDialog/saveAssetDialog.js

@@ -0,0 +1,60 @@
+import { jsxs as u, jsx as i } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/saveAssetDialog/saveAssetDialog.entry.css';/* empty css                                                                         */
+import T from "clsx";
+import { Modal as l } from "../modal/modal.js";
+import { TextField as c } from "../../inputs/textField/textField.js";
+import { Button as w } from "../../inputs/button/button.js";
+function H({
+  open: k,
+  title: o,
+  nameLabel: t,
+  name: d,
+  onNameChange: s,
+  previewSrc: _,
+  onCapture: f,
+  captureLabel: v,
+  busy: r,
+  confirmLabel: x,
+  cancelLabel: p,
+  onConfirm: F,
+  onClose: h,
+  children: j,
+  className: m
+}) {
+  const z = s !== void 0 || d !== void 0;
+  return /* @__PURE__ */ u(l, { open: k, onClose: h, size: "small", children: [
+    /* @__PURE__ */ i(l.Header, { children: o != null ? o : "Save" }),
+    /* @__PURE__ */ i(l.Content, { children: /* @__PURE__ */ u("div", { className: T("smwb-save-asset-dialog__body", m), children: [
+      z ? /* @__PURE__ */ i(
+        c,
+        {
+          label: t != null ? t : "Name",
+          value: d != null ? d : "",
+          disabled: !!r,
+          onChange: (S) => s == null ? void 0 : s(S.currentTarget.value)
+        }
+      ) : null,
+      _ ? /* @__PURE__ */ i("div", { className: "smwb-save-asset-dialog__preview", children: /* @__PURE__ */ i("img", { src: _, alt: "" }) }) : null,
+      f ? /* @__PURE__ */ i(
+        w,
+        {
+          variant: "outlined",
+          size: "small",
+          disabled: !!r,
+          onClick: () => f(),
+          label: v != null ? v : "Capture preview"
+        }
+      ) : null,
+      j
+    ] }) }),
+    /* @__PURE__ */ u(l.Footer, { children: [
+      /* @__PURE__ */ i(w, { variant: "text", disabled: !!r, onClick: () => h(), label: p != null ? p : "Cancel" }),
+      /* @__PURE__ */ i(w, { variant: "contained", disabled: !!r, onClick: () => F(), label: x != null ? x : "Save" })
+    ] })
+  ] });
+}
+export {
+  H as SaveAssetDialog,
+  H as default
+};
+//# sourceMappingURL=saveAssetDialog.js.map

package/dist/components/feedBack/saveAssetDialog/saveAssetDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"saveAssetDialog.js","sources":["../../../../src/components/feedBack/saveAssetDialog/saveAssetDialog.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { TextField } from \"../../inputs/textField\";\n\nexport interface SaveAssetDialogProps {\n  open: boolean;\n  title?: string;\n  /** Label for the name field. Omit `onNameChange` AND `name` to hide the field. */\n  nameLabel?: string;\n  name?: string;\n  onNameChange?: (name: string) => void;\n  /** Preview image URL (e.g. a freshly captured thumbnail). */\n  previewSrc?: string;\n  /** Shows a Capture button when provided. */\n  onCapture?: () => void;\n  captureLabel?: string;\n  /** Disables the actions + name field while a save/capture is in flight. */\n  busy?: boolean;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  onConfirm: () => void;\n  onClose: () => void;\n  /** Extra content between the name field/preview and the actions. */\n  children?: React.ReactNode;\n  className?: string;\n}\n\n/**\n * A \"name it / preview a thumbnail / confirm-cancel\" dialog on `Modal` — the\n * save/capture flow apps hand-build for every asset. Pairs with srv-solid's\n * asset store: `onConfirm` uploads the captured `previewSrc`.\n */\nexport function SaveAssetDialog({\n  open,\n  title,\n  nameLabel,\n  name,\n  onNameChange,\n  previewSrc,\n  onCapture,\n  captureLabel,\n  busy,\n  confirmLabel,\n  cancelLabel,\n  onConfirm,\n  onClose,\n  children,\n  className,\n}: SaveAssetDialogProps): React.ReactElement {\n  const showNameField = onNameChange !== undefined || name !== undefined;\n\n  return (\n    <Modal open={open} onClose={onClose} size=\"small\">\n      <Modal.Header>{title ?? \"Save\"}</Modal.Header>\n      <Modal.Content>\n        <div className={cn(\"smwb-save-asset-dialog__body\", className)}>\n          {showNameField ? (\n            <TextField\n              label={nameLabel ?? \"Name\"}\n              value={name ?? \"\"}\n              disabled={!!busy}\n              onChange={(event) => onNameChange?.(event.currentTarget.value)}\n            />\n          ) : null}\n          {previewSrc ? (\n            <div className=\"smwb-save-asset-dialog__preview\">\n              <img src={previewSrc} alt=\"\" />\n            </div>\n          ) : null}\n          {onCapture ? (\n            <Button\n              variant=\"outlined\"\n              size=\"small\"\n              disabled={!!busy}\n              onClick={() => onCapture()}\n              label={captureLabel ?? \"Capture preview\"}\n            />\n          ) : null}\n          {children}\n        </div>\n      </Modal.Content>\n      <Modal.Footer>\n        <Button variant=\"text\" disabled={!!busy} onClick={() => onClose()} label={cancelLabel ?? \"Cancel\"} />\n        <Button variant=\"contained\" disabled={!!busy} onClick={() => onConfirm()} label={confirmLabel ?? \"Save\"} />\n      </Modal.Footer>\n    </Modal>\n  );\n}\n\nexport default SaveAssetDialog;\n"],"names":["SaveAssetDialog","open","title","nameLabel","name","onNameChange","previewSrc","onCapture","captureLabel","busy","confirmLabel","cancelLabel","onConfirm","onClose","children","className","showNameField","jsxs","Modal","jsx","cn","TextField","event","Button"],"mappings":";;;;;;AAmCO,SAASA,EAAgB;AAAA,EAC9B,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAA6C;AAC3C,QAAMC,IAAgBX,MAAiB,UAAaD,MAAS;AAE7D,SACE,gBAAAa,EAACC,GAAA,EAAM,MAAAjB,GAAY,SAAAY,GAAkB,MAAK,SACxC,UAAA;AAAA,IAAA,gBAAAM,EAACD,EAAM,QAAN,EAAc,UAAAhB,KAAA,OAAAA,IAAS,QAAO;AAAA,IAC/B,gBAAAiB,EAACD,EAAM,SAAN,EACC,UAAA,gBAAAD,EAAC,SAAI,WAAWG,EAAG,gCAAgCL,CAAS,GACzD,UAAA;AAAA,MAAAC,IACC,gBAAAG;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,OAAOlB,KAAA,OAAAA,IAAa;AAAA,UACpB,OAAOC,KAAA,OAAAA,IAAQ;AAAA,UACf,UAAU,CAAC,CAACK;AAAA,UACZ,UAAU,CAACa,MAAUjB,KAAA,gBAAAA,EAAeiB,EAAM,cAAc;AAAA,QAAK;AAAA,MAAA,IAE7D;AAAA,MACHhB,IACC,gBAAAa,EAAC,OAAA,EAAI,WAAU,mCACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,KAAKb,GAAY,KAAI,GAAA,CAAG,EAAA,CAC/B,IACE;AAAA,MACHC,IACC,gBAAAY;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,UAAU,CAAC,CAACd;AAAA,UACZ,SAAS,MAAMF,EAAA;AAAA,UACf,OAAOC,KAAA,OAAAA,IAAgB;AAAA,QAAA;AAAA,MAAA,IAEvB;AAAA,MACHM;AAAA,IAAA,EAAA,CACH,EAAA,CACF;AAAA,IACA,gBAAAG,EAACC,EAAM,QAAN,EACC,UAAA;AAAA,MAAA,gBAAAC,EAACI,GAAA,EAAO,SAAQ,QAAO,UAAU,CAAC,CAACd,GAAM,SAAS,MAAMI,EAAA,GAAW,OAAOF,KAAA,OAAAA,IAAe,SAAA,CAAU;AAAA,MACnG,gBAAAQ,EAACI,GAAA,EAAO,SAAQ,aAAY,UAAU,CAAC,CAACd,GAAM,SAAS,MAAMG,EAAA,GAAa,OAAOF,KAAA,OAAAA,IAAgB,OAAA,CAAQ;AAAA,IAAA,EAAA,CAC3G;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/inputs/valueSlider/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ValueSlider } from "./valueSlider";
+export type { ValueSliderProps } from "./valueSlider";

package/dist/components/inputs/valueSlider/valueSlider.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { type SliderProps, type SliderValue } from "../slider";
+export interface ValueSliderProps extends SliderProps {
+    /**
+     * Read-only value readout beside the label. `true` shows the raw value; pass a
+     * formatter for units/precision (e.g. `(v) => `${v}%``). Reflects `value`.
+     */
+    readout?: boolean | ((value: SliderValue | undefined) => string);
+    /** Content at the end of the header row — a reset button, a favourite star, etc. */
+    endAdornment?: React.ReactNode;
+    /** Renders a built-in reset control in the header; called on click. */
+    onReset?: () => void;
+    /** Accessible label for the reset control. */
+    resetLabel?: string;
+}
+/**
+ * `Slider` plus the value-readout + adornment header row every app rebuilds: a
+ * read-only formatted value next to the label, an optional reset "eraser", and an
+ * `endAdornment` slot. A drop-in preset — all `Slider` props pass through; the
+ * label is rendered in the header instead of inside Slider.
+ */
+export declare function ValueSlider({ readout, endAdornment, onReset, resetLabel, label, className, ...sliderProps }: ValueSliderProps): React.ReactElement;
+export default ValueSlider;

package/dist/components/inputs/valueSlider/valueSlider.js

@@ -0,0 +1,55 @@
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/valueSlider/valueSlider.entry.css';/* empty css                                                                 */
+import c from "clsx";
+import { Slider as m } from "../slider/slider.js";
+function h(i, l) {
+  return typeof i == "function" ? i(l) : Array.isArray(l) ? `${l[0]} – ${l[1]}` : l == null ? "" : String(l);
+}
+function v({
+  readout: i,
+  endAdornment: l,
+  onReset: n,
+  resetLabel: s,
+  label: e,
+  className: u,
+  ...a
+}) {
+  const t = i !== void 0 && i !== !1, o = e != null || t || l != null || n != null;
+  return /* @__PURE__ */ d("div", { className: c("smwb-value-slider", u), children: [
+    o ? /* @__PURE__ */ d("div", { className: "smwb-value-slider__header", children: [
+      e != null ? /* @__PURE__ */ r("span", { className: "smwb-value-slider__label", children: e }) : null,
+      /* @__PURE__ */ r("span", { className: "smwb-value-slider__spacer" }),
+      t ? /* @__PURE__ */ r("span", { className: "smwb-value-slider__readout", children: h(i, a.value) }) : null,
+      l,
+      n != null ? /* @__PURE__ */ r(
+        "button",
+        {
+          type: "button",
+          className: "smwb-value-slider__reset",
+          "aria-label": s != null ? s : "Reset",
+          disabled: !!a.disabled,
+          onClick: () => n(),
+          children: /* @__PURE__ */ r(
+            "svg",
+            {
+              viewBox: "0 0 24 24",
+              width: "16",
+              height: "16",
+              "aria-hidden": "true",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              children: /* @__PURE__ */ r("path", { d: "M3 12a9 9 0 1 0 3-6.7M3 4v4h4", strokeLinecap: "round", strokeLinejoin: "round" })
+            }
+          )
+        }
+      ) : null
+    ] }) : null,
+    /* @__PURE__ */ r(m, { ...a })
+  ] });
+}
+export {
+  v as ValueSlider,
+  v as default
+};
+//# sourceMappingURL=valueSlider.js.map

package/dist/components/inputs/valueSlider/valueSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"valueSlider.js","sources":["../../../../src/components/inputs/valueSlider/valueSlider.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Slider, type SliderProps, type SliderValue } from \"../slider\";\n\nexport interface ValueSliderProps extends SliderProps {\n  /**\n   * Read-only value readout beside the label. `true` shows the raw value; pass a\n   * formatter for units/precision (e.g. `(v) => `${v}%``). Reflects `value`.\n   */\n  readout?: boolean | ((value: SliderValue | undefined) => string);\n  /** Content at the end of the header row — a reset button, a favourite star, etc. */\n  endAdornment?: React.ReactNode;\n  /** Renders a built-in reset control in the header; called on click. */\n  onReset?: () => void;\n  /** Accessible label for the reset control. */\n  resetLabel?: string;\n}\n\nfunction formatReadout(readout: ValueSliderProps[\"readout\"], value: SliderValue | undefined): string {\n  if (typeof readout === \"function\") return readout(value);\n  if (Array.isArray(value)) return `${value[0]} – ${value[1]}`;\n  return value == null ? \"\" : String(value);\n}\n\n/**\n * `Slider` plus the value-readout + adornment header row every app rebuilds: a\n * read-only formatted value next to the label, an optional reset \"eraser\", and an\n * `endAdornment` slot. A drop-in preset — all `Slider` props pass through; the\n * label is rendered in the header instead of inside Slider.\n */\nexport function ValueSlider({\n  readout,\n  endAdornment,\n  onReset,\n  resetLabel,\n  label,\n  className,\n  ...sliderProps\n}: ValueSliderProps): React.ReactElement {\n  const hasReadout = readout !== undefined && readout !== false;\n  const showHeader = label != null || hasReadout || endAdornment != null || onReset != null;\n\n  return (\n    <div className={cn(\"smwb-value-slider\", className)}>\n      {showHeader ? (\n        <div className=\"smwb-value-slider__header\">\n          {label != null ? <span className=\"smwb-value-slider__label\">{label}</span> : null}\n          <span className=\"smwb-value-slider__spacer\" />\n          {hasReadout ? (\n            <span className=\"smwb-value-slider__readout\">{formatReadout(readout, sliderProps.value)}</span>\n          ) : null}\n          {endAdornment}\n          {onReset != null ? (\n            <button\n              type=\"button\"\n              className=\"smwb-value-slider__reset\"\n              aria-label={resetLabel ?? \"Reset\"}\n              disabled={!!sliderProps.disabled}\n              onClick={() => onReset()}\n            >\n              <svg\n                viewBox=\"0 0 24 24\"\n                width=\"16\"\n                height=\"16\"\n                aria-hidden=\"true\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n              >\n                <path d=\"M3 12a9 9 0 1 0 3-6.7M3 4v4h4\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              </svg>\n            </button>\n          ) : null}\n        </div>\n      ) : null}\n      <Slider {...sliderProps} />\n    </div>\n  );\n}\n\nexport default ValueSlider;\n"],"names":["formatReadout","readout","value","ValueSlider","endAdornment","onReset","resetLabel","label","className","sliderProps","hasReadout","showHeader","cn","jsxs","jsx","Slider"],"mappings":";;;;AAmBA,SAASA,EAAcC,GAAsCC,GAAwC;AACnG,SAAI,OAAOD,KAAY,aAAmBA,EAAQC,CAAK,IACnD,MAAM,QAAQA,CAAK,IAAU,GAAGA,EAAM,CAAC,CAAC,MAAMA,EAAM,CAAC,CAAC,KACnDA,KAAS,OAAO,KAAK,OAAOA,CAAK;AAC1C;AAQO,SAASC,EAAY;AAAA,EAC1B,SAAAF;AAAA,EACA,cAAAG;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAyC;AACvC,QAAMC,IAAaT,MAAY,UAAaA,MAAY,IAClDU,IAAaJ,KAAS,QAAQG,KAAcN,KAAgB,QAAQC,KAAW;AAErF,2BACG,OAAA,EAAI,WAAWO,EAAG,qBAAqBJ,CAAS,GAC9C,UAAA;AAAA,IAAAG,IACC,gBAAAE,EAAC,OAAA,EAAI,WAAU,6BACZ,UAAA;AAAA,MAAAN,KAAS,OAAO,gBAAAO,EAAC,QAAA,EAAK,WAAU,4BAA4B,aAAM,IAAU;AAAA,MAC7E,gBAAAA,EAAC,QAAA,EAAK,WAAU,4BAAA,CAA4B;AAAA,MAC3CJ,IACC,gBAAAI,EAAC,QAAA,EAAK,WAAU,8BAA8B,YAAcb,GAASQ,EAAY,KAAK,EAAA,CAAE,IACtF;AAAA,MACHL;AAAA,MACAC,KAAW,OACV,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,cAAYR,KAAA,OAAAA,IAAc;AAAA,UAC1B,UAAU,CAAC,CAACG,EAAY;AAAA,UACxB,SAAS,MAAMJ,EAAA;AAAA,UAEf,UAAA,gBAAAS;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,OAAM;AAAA,cACN,QAAO;AAAA,cACP,eAAY;AAAA,cACZ,MAAK;AAAA,cACL,QAAO;AAAA,cACP,aAAY;AAAA,cAEZ,4BAAC,QAAA,EAAK,GAAE,iCAAgC,eAAc,SAAQ,gBAAe,QAAA,CAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QACvF;AAAA,MAAA,IAEA;AAAA,IAAA,EAAA,CACN,IACE;AAAA,IACJ,gBAAAA,EAACC,GAAA,EAAQ,GAAGN,EAAA,CAAa;AAAA,EAAA,GAC3B;AAEJ;"}

package/dist/components/navigation/overflowMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { default as OverflowMenu } from "./overflowMenu";
+export type { OverflowMenuProps, OverflowMenuItem } from "./overflowMenu";

package/dist/components/navigation/overflowMenu/overflowMenu.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import type { Placement } from "@floating-ui/react";
+export interface OverflowMenuItem {
+    id: string;
+    label: string;
+    icon?: React.ReactNode | string;
+    danger?: boolean;
+    disabled?: boolean;
+    onSelect?: () => void;
+}
+export interface OverflowMenuProps {
+    items: OverflowMenuItem[];
+    /** Trigger icon name (default `more_vert`). */
+    icon?: string;
+    placement?: Placement;
+    "aria-label"?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * A one-shot kebab / overflow menu: a trigger icon button wired to a floating
+ * `Menu` over an `items` array, with open/close state baked in. The card 3-dot
+ * menu every app hand-builds (button + surface + open state) collapses to
+ * passing an items list.
+ */
+export declare function OverflowMenu({ items, icon, placement, "aria-label": ariaLabel, disabled, className, }: OverflowMenuProps): React.ReactElement;
+export default OverflowMenu;

package/dist/components/navigation/overflowMenu/overflowMenu.js

@@ -0,0 +1,54 @@
+import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/overflowMenu/overflowMenu.entry.css';/* empty css                                                                   */
+import { useRef as h, useState as b } from "react";
+import t from "clsx";
+import { Button as v } from "../../inputs/button/button.js";
+import { Menu as w } from "../menu/menu.js";
+import { MenuItem as x } from "../menu/menuItem.js";
+import { Icon as M } from "../../base/icon/icon.js";
+function R({
+  items: p,
+  icon: u = "more_vert",
+  placement: e,
+  "aria-label": n,
+  disabled: i,
+  className: d
+}) {
+  const s = h(null), [m, l] = b(!1), c = () => l(!1);
+  return /* @__PURE__ */ f("span", { className: t("smwb-overflow-menu", d), children: [
+    /* @__PURE__ */ r(
+      v,
+      {
+        ref: s,
+        variant: "text",
+        size: "small",
+        icon: u,
+        "aria-label": n != null ? n : "More actions",
+        "aria-haspopup": "menu",
+        disabled: !!i,
+        onClick: () => l((o) => !o)
+      }
+    ),
+    /* @__PURE__ */ r(w, { isOpen: m, onClose: c, anchorElement: s.current, ...e ? { placement: e } : {}, children: p.map((o) => /* @__PURE__ */ f(
+      x,
+      {
+        className: t({ "smwb-overflow-menu__item--danger": o.danger }),
+        disabled: o.disabled,
+        onClick: () => {
+          var a;
+          o.disabled || ((a = o.onSelect) == null || a.call(o), c());
+        },
+        children: [
+          o.icon ? typeof o.icon == "string" ? /* @__PURE__ */ r(M, { name: o.icon }) : o.icon : null,
+          o.label
+        ]
+      },
+      o.id
+    )) })
+  ] });
+}
+export {
+  R as OverflowMenu,
+  R as default
+};
+//# sourceMappingURL=overflowMenu.js.map

package/dist/components/navigation/overflowMenu/overflowMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overflowMenu.js","sources":["../../../../src/components/navigation/overflowMenu/overflowMenu.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport type { Placement } from \"@floating-ui/react\";\nimport cn from \"clsx\";\nimport { Button } from \"../../inputs/button\";\nimport { Icon } from \"../../base/icon\";\nimport { Menu, MenuItem } from \"../menu\";\n\nexport interface OverflowMenuItem {\n  id: string;\n  label: string;\n  icon?: React.ReactNode | string;\n  danger?: boolean;\n  disabled?: boolean;\n  onSelect?: () => void;\n}\n\nexport interface OverflowMenuProps {\n  items: OverflowMenuItem[];\n  /** Trigger icon name (default `more_vert`). */\n  icon?: string;\n  placement?: Placement;\n  \"aria-label\"?: string;\n  disabled?: boolean;\n  className?: string;\n}\n\n/**\n * A one-shot kebab / overflow menu: a trigger icon button wired to a floating\n * `Menu` over an `items` array, with open/close state baked in. The card 3-dot\n * menu every app hand-builds (button + surface + open state) collapses to\n * passing an items list.\n */\nexport function OverflowMenu({\n  items,\n  icon = \"more_vert\",\n  placement,\n  \"aria-label\": ariaLabel,\n  disabled,\n  className,\n}: OverflowMenuProps): React.ReactElement {\n  const anchorRef = useRef<HTMLButtonElement | HTMLAnchorElement | null>(null);\n  const [open, setOpen] = useState(false);\n  const close = (): void => setOpen(false);\n\n  return (\n    <span className={cn(\"smwb-overflow-menu\", className)}>\n      <Button\n        ref={anchorRef}\n        variant=\"text\"\n        size=\"small\"\n        icon={icon}\n        aria-label={ariaLabel ?? \"More actions\"}\n        aria-haspopup=\"menu\"\n        disabled={!!disabled}\n        onClick={() => setOpen((value) => !value)}\n      />\n      <Menu isOpen={open} onClose={close} anchorElement={anchorRef.current} {...(placement ? { placement } : {})}>\n        {items.map((item) => (\n          <MenuItem\n            key={item.id}\n            className={cn({ \"smwb-overflow-menu__item--danger\": item.danger })}\n            disabled={item.disabled}\n            onClick={() => {\n              if (item.disabled) return;\n              item.onSelect?.();\n              close();\n            }}\n          >\n            {item.icon ? typeof item.icon === \"string\" ? <Icon name={item.icon} /> : item.icon : null}\n            {item.label}\n          </MenuItem>\n        ))}\n      </Menu>\n    </span>\n  );\n}\n\nexport default OverflowMenu;\n"],"names":["OverflowMenu","items","icon","placement","ariaLabel","disabled","className","anchorRef","useRef","open","setOpen","useState","close","cn","jsx","Button","value","Menu","item","jsxs","MenuItem","_a","Icon"],"mappings":";;;;;;;;AAiCO,SAASA,EAAa;AAAA,EAC3B,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,WAAAC;AAAA,EACA,cAAcC;AAAA,EACd,UAAAC;AAAA,EACA,WAAAC;AACF,GAA0C;AACxC,QAAMC,IAAYC,EAAqD,IAAI,GACrE,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAChCC,IAAQ,MAAYF,EAAQ,EAAK;AAEvC,2BACG,QAAA,EAAK,WAAWG,EAAG,sBAAsBP,CAAS,GACjD,UAAA;AAAA,IAAA,gBAAAQ;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKR;AAAA,QACL,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,MAAAL;AAAA,QACA,cAAYE,KAAA,OAAAA,IAAa;AAAA,QACzB,iBAAc;AAAA,QACd,UAAU,CAAC,CAACC;AAAA,QACZ,SAAS,MAAMK,EAAQ,CAACM,MAAU,CAACA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,sBAEzCC,GAAA,EAAK,QAAQR,GAAM,SAASG,GAAO,eAAeL,EAAU,SAAU,GAAIJ,IAAY,EAAE,WAAAA,MAAc,CAAA,GACpG,UAAAF,EAAM,IAAI,CAACiB,MACV,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QAEC,WAAWP,EAAG,EAAE,oCAAoCK,EAAK,QAAQ;AAAA,QACjE,UAAUA,EAAK;AAAA,QACf,SAAS,MAAM;;AACb,UAAIA,EAAK,cACTG,IAAAH,EAAK,aAAL,QAAAG,EAAA,KAAAH,IACAN,EAAA;AAAA,QACF;AAAA,QAEC,UAAA;AAAA,UAAAM,EAAK,OAAO,OAAOA,EAAK,QAAS,WAAW,gBAAAJ,EAACQ,GAAA,EAAK,MAAMJ,EAAK,KAAA,CAAM,IAAKA,EAAK,OAAO;AAAA,UACpFA,EAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAVDA,EAAK;AAAA,IAAA,CAYb,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;"}

package/dist/headless/components/dataDisplay/assetGrid/assetGrid.js

@@ -0,0 +1,67 @@
+import { jsx as e } from "react/jsx-runtime";
+import _, { useRef as H, useState as h, useEffect as I, useMemo as O } from "react";
+import T from "clsx";
+import { useVirtualList as W } from "../../../hooks/useVirtualList.js";
+function G({
+  items: l,
+  renderItem: f,
+  minColumn: d = 160,
+  rowHeight: a,
+  gap: r = 8,
+  overscan: v = 2,
+  loading: b,
+  loadingCount: w = 12,
+  emptyLabel: x,
+  className: N,
+  style: R
+}) {
+  const g = H(null), [c, A] = h(0), [M, S] = h(0), [z, $] = h(!1);
+  I(() => {
+    const s = g.current;
+    if (!s || typeof ResizeObserver == "undefined") return;
+    const t = new ResizeObserver(() => {
+      A(s.clientWidth), S(s.clientHeight), $(!0);
+    });
+    return t.observe(s), () => t.disconnect();
+  }, []);
+  const o = O(
+    () => c <= 0 ? 1 : Math.max(1, Math.floor((c + r) / (d + r))),
+    [c, r, d]
+  ), C = Math.ceil(l.length / o), i = W({
+    itemCount: C,
+    itemHeight: a + r,
+    viewportHeight: M || 1,
+    overscan: v
+  }), u = {
+    display: "grid",
+    gridTemplateColumns: `repeat(auto-fill, minmax(${d}px, 1fr))`,
+    gap: r,
+    gridAutoRows: a
+  }, F = {
+    display: "grid",
+    gridTemplateColumns: `repeat(${o}, minmax(0, 1fr))`,
+    gap: r,
+    height: a,
+    marginBottom: r
+  };
+  let n;
+  return b ? n = /* @__PURE__ */ e("div", { className: "smwb-asset-grid__plain", style: u, children: Array.from({ length: w }).map((s, t) => /* @__PURE__ */ e("div", { className: "smwb-asset-grid__skeleton", style: { height: a } }, t)) }) : l.length === 0 ? n = /* @__PURE__ */ e("div", { className: "smwb-asset-grid__empty", children: x }) : z ? n = /* @__PURE__ */ e("div", { className: "smwb-asset-grid__sizer", style: { height: i.totalHeight, position: "relative" }, children: /* @__PURE__ */ e(
+    "div",
+    {
+      className: "smwb-asset-grid__band",
+      style: { position: "absolute", top: 0, left: 0, right: 0, transform: `translateY(${i.offsetY}px)` },
+      children: Array.from({ length: Math.max(0, i.endIndex - i.startIndex) }).map((s, t) => {
+        const p = i.startIndex + t;
+        return /* @__PURE__ */ e("div", { className: "smwb-asset-grid__row", style: F, children: Array.from({ length: o }).map((Y, y) => {
+          const m = p * o + y;
+          return m < l.length ? /* @__PURE__ */ e(_.Fragment, { children: f(l[m], m) }, y) : null;
+        }) }, p);
+      })
+    }
+  ) }) : n = /* @__PURE__ */ e("div", { className: "smwb-asset-grid__plain", style: u, children: l.map((s, t) => /* @__PURE__ */ e(_.Fragment, { children: f(s, t) }, t)) }), /* @__PURE__ */ e("div", { ref: g, className: T("smwb-asset-grid", N), style: R, onScroll: i.onScroll, children: n });
+}
+export {
+  G as AssetGrid,
+  G as default
+};
+//# sourceMappingURL=assetGrid.js.map

package/dist/headless/components/dataDisplay/assetGrid/assetGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"assetGrid.js","sources":["../../../../../src/components/dataDisplay/assetGrid/assetGrid.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { useVirtualList } from \"../../../hooks/useVirtualList\";\n\nexport interface AssetGridProps<T> {\n  items: T[];\n  /** Render one cell. `index` is the absolute index into `items`. */\n  renderItem: (item: T, index: number) => React.ReactNode;\n  /** Minimum column width (px); drives the column count from the measured width. Default 160. */\n  minColumn?: number;\n  /** Fixed cell height (px). */\n  rowHeight: number;\n  /** Gap (px) between cells on both axes. Default 8. */\n  gap?: number;\n  /** Extra rows rendered above/below the viewport. Default 2. */\n  overscan?: number;\n  loading?: boolean;\n  /** Skeleton tile count while loading. Default 12. */\n  loadingCount?: number;\n  emptyLabel?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\n/**\n * A virtualized, data-shape-agnostic asset grid: measures its own width to pick a\n * column count, windows rows via `useVirtualList`, and renders only the visible\n * cells through a `renderItem` slot — with loading skeletons + an empty state. The\n * windowing math every catalog app reimplements, upstreamed. SSR-safe: before it\n * can measure (server + first paint) it renders a plain auto-fill grid of all\n * items, then virtualizes after mount.\n */\nexport function AssetGrid<T>({\n  items,\n  renderItem,\n  minColumn = 160,\n  rowHeight,\n  gap = 8,\n  overscan = 2,\n  loading,\n  loadingCount = 12,\n  emptyLabel,\n  className,\n  style,\n}: AssetGridProps<T>): React.ReactElement {\n  const viewportRef = useRef<HTMLDivElement | null>(null);\n  const [width, setWidth] = useState(0);\n  const [height, setHeight] = useState(0);\n  const [ready, setReady] = useState(false);\n\n  useEffect(() => {\n    const el = viewportRef.current;\n    if (!el || typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver(() => {\n      setWidth(el.clientWidth);\n      setHeight(el.clientHeight);\n      setReady(true);\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const cols = useMemo(\n    () => (width <= 0 ? 1 : Math.max(1, Math.floor((width + gap) / (minColumn + gap)))),\n    [width, gap, minColumn]\n  );\n  const rowCount = Math.ceil(items.length / cols);\n  const vl = useVirtualList({\n    itemCount: rowCount,\n    itemHeight: rowHeight + gap,\n    viewportHeight: height || 1,\n    overscan,\n  });\n\n  const plainStyle: React.CSSProperties = {\n    display: \"grid\",\n    gridTemplateColumns: `repeat(auto-fill, minmax(${minColumn}px, 1fr))`,\n    gap,\n    gridAutoRows: rowHeight,\n  };\n  const rowStyle: React.CSSProperties = {\n    display: \"grid\",\n    gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,\n    gap,\n    height: rowHeight,\n    marginBottom: gap,\n  };\n\n  let body: React.ReactNode;\n  if (loading) {\n    body = (\n      <div className=\"smwb-asset-grid__plain\" style={plainStyle}>\n        {Array.from({ length: loadingCount }).map((_, i) => (\n          <div key={i} className=\"smwb-asset-grid__skeleton\" style={{ height: rowHeight }} />\n        ))}\n      </div>\n    );\n  } else if (items.length === 0) {\n    body = <div className=\"smwb-asset-grid__empty\">{emptyLabel}</div>;\n  } else if (!ready) {\n    body = (\n      <div className=\"smwb-asset-grid__plain\" style={plainStyle}>\n        {items.map((item, index) => (\n          <React.Fragment key={index}>{renderItem(item, index)}</React.Fragment>\n        ))}\n      </div>\n    );\n  } else {\n    body = (\n      <div className=\"smwb-asset-grid__sizer\" style={{ height: vl.totalHeight, position: \"relative\" }}>\n        <div\n          className=\"smwb-asset-grid__band\"\n          style={{ position: \"absolute\", top: 0, left: 0, right: 0, transform: `translateY(${vl.offsetY}px)` }}\n        >\n          {Array.from({ length: Math.max(0, vl.endIndex - vl.startIndex) }).map((_, r) => {\n            const row = vl.startIndex + r;\n            return (\n              <div key={row} className=\"smwb-asset-grid__row\" style={rowStyle}>\n                {Array.from({ length: cols }).map((_, c) => {\n                  const index = row * cols + c;\n                  return index < items.length ? (\n                    <React.Fragment key={c}>{renderItem(items[index], index)}</React.Fragment>\n                  ) : null;\n                })}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div ref={viewportRef} className={cn(\"smwb-asset-grid\", className)} style={style} onScroll={vl.onScroll}>\n      {body}\n    </div>\n  );\n}\n\nexport default AssetGrid;\n"],"names":["AssetGrid","items","renderItem","minColumn","rowHeight","gap","overscan","loading","loadingCount","emptyLabel","className","style","viewportRef","useRef","width","setWidth","useState","height","setHeight","ready","setReady","useEffect","el","ro","cols","useMemo","rowCount","vl","useVirtualList","plainStyle","rowStyle","body","jsx","_","i","r","row","c","index","React","item","cn"],"mappings":"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"}

package/dist/headless/components/dataDisplay/chat/useChatStickToBottom.js

@@ -1,5 +1,6 @@
-import { useRef as c, useEffect as M, useLayoutEffect as T } from "react";
-function L(t, r = 24) {
+import { useRef as c, useEffect as M } from "react";
+import { useSafeLayoutEffect as S } from "../../../hooks/useSafeLayoutEffect.js";
+function T(t, r = 24) {
   return t.scrollHeight - t.scrollTop - t.clientHeight <= r;
 }
 function h(t) {
@@ -12,15 +13,15 @@ function B({ containerRef: t, messages: r, threshold: l = 24 }) {
     if (!e)
       return;
     const o = () => {
-      n.current = L(e, l);
+      n.current = T(e, l);
     };
     return o(), e.addEventListener("scroll", o, { passive: !0 }), () => e.removeEventListener("scroll", o);
-  }, [t, l]), T(() => {
-    var g, a;
+  }, [t, l]), S(() => {
+    var a, g;
     const e = t.current;
     if (!e)
       return;
-    const o = u.current, p = d.current, v = f.current, i = (g = r[0]) == null ? void 0 : g.id, s = (a = r[r.length - 1]) == null ? void 0 : a.id;
+    const o = u.current, p = d.current, v = f.current, i = (a = r[0]) == null ? void 0 : a.id, s = (g = r[r.length - 1]) == null ? void 0 : g.id;
     if (p === void 0)
       h(e), n.current = !0;
     else {
@@ -31,7 +32,7 @@ function B({ containerRef: t, messages: r, threshold: l = 24 }) {
   }, [t, r]);
 }
 export {
-  L as isScrolledToBottom,
+  T as isScrolledToBottom,
   h as scrollChatToBottom,
   B as useChatStickToBottom
 };

package/dist/headless/components/dataDisplay/chat/useChatStickToBottom.js.map

@@ -1 +1 @@
-{"version":3,"file":"useChatStickToBottom.js","sources":["../../../../../src/components/dataDisplay/chat/useChatStickToBottom.ts"],"sourcesContent":["import { RefObject, useEffect, useLayoutEffect, useRef } from \"react\";\n\nexport interface UseChatStickToBottomParams {\n  containerRef: RefObject<HTMLElement | null>;\n  messages: readonly { id: string }[];\n  threshold?: number;\n}\n\nexport function isScrolledToBottom(element: HTMLElement, threshold = 24): boolean {\n  return element.scrollHeight - element.scrollTop - element.clientHeight <= threshold;\n}\n\nexport function scrollChatToBottom(element: HTMLElement): void {\n  element.scrollTop = element.scrollHeight;\n}\n\nexport function useChatStickToBottom({ containerRef, messages, threshold = 24 }: UseChatStickToBottomParams) {\n  const isAtBottomRef = useRef(true);\n  const previousScrollHeightRef = useRef(0);\n  const previousFirstMessageIdRef = useRef<string | undefined>();\n  const previousLastMessageIdRef = useRef<string | undefined>();\n\n  useEffect(() => {\n    const element = containerRef.current;\n\n    if (!element) {\n      return;\n    }\n\n    const handleScroll = () => {\n      isAtBottomRef.current = isScrolledToBottom(element, threshold);\n    };\n\n    handleScroll();\n    element.addEventListener(\"scroll\", handleScroll, { passive: true });\n\n    return () => element.removeEventListener(\"scroll\", handleScroll);\n  }, [containerRef, threshold]);\n\n  useLayoutEffect(() => {\n    const element = containerRef.current;\n\n    if (!element) {\n      return;\n    }\n\n    const previousScrollHeight = previousScrollHeightRef.current;\n    const previousFirstMessageId = previousFirstMessageIdRef.current;\n    const previousLastMessageId = previousLastMessageIdRef.current;\n    const firstMessageId = messages[0]?.id;\n    const lastMessageId = messages[messages.length - 1]?.id;\n\n    if (previousFirstMessageId === undefined) {\n      scrollChatToBottom(element);\n      isAtBottomRef.current = true;\n    } else {\n      const prepended =\n        firstMessageId !== undefined &&\n        firstMessageId !== previousFirstMessageId &&\n        lastMessageId === previousLastMessageId;\n      const appended = lastMessageId !== undefined && lastMessageId !== previousLastMessageId;\n\n      if (prepended && previousScrollHeight > 0) {\n        element.scrollTop += element.scrollHeight - previousScrollHeight;\n      } else if (appended && isAtBottomRef.current) {\n        scrollChatToBottom(element);\n      }\n    }\n\n    previousScrollHeightRef.current = element.scrollHeight;\n    previousFirstMessageIdRef.current = firstMessageId;\n    previousLastMessageIdRef.current = lastMessageId;\n  }, [containerRef, messages]);\n}\n"],"names":["isScrolledToBottom","element","threshold","scrollChatToBottom","useChatStickToBottom","containerRef","messages","isAtBottomRef","useRef","previousScrollHeightRef","previousFirstMessageIdRef","previousLastMessageIdRef","useEffect","handleScroll","useLayoutEffect","previousScrollHeight","previousFirstMessageId","previousLastMessageId","firstMessageId","_a","lastMessageId","_b","prepended","appended"],"mappings":";AAQO,SAASA,EAAmBC,GAAsBC,IAAY,IAAa;AAChF,SAAOD,EAAQ,eAAeA,EAAQ,YAAYA,EAAQ,gBAAgBC;AAC5E;AAEO,SAASC,EAAmBF,GAA4B;AAC7D,EAAAA,EAAQ,YAAYA,EAAQ;AAC9B;AAEO,SAASG,EAAqB,EAAE,cAAAC,GAAc,UAAAC,GAAU,WAAAJ,IAAY,MAAkC;AAC3G,QAAMK,IAAgBC,EAAO,EAAI,GAC3BC,IAA0BD,EAAO,CAAC,GAClCE,IAA4BF,EAAA,GAC5BG,IAA2BH,EAAA;AAEjC,EAAAI,EAAU,MAAM;AACd,UAAMX,IAAUI,EAAa;AAE7B,QAAI,CAACJ;AACH;AAGF,UAAMY,IAAe,MAAM;AACzB,MAAAN,EAAc,UAAUP,EAAmBC,GAASC,CAAS;AAAA,IAC/D;AAEA,WAAAW,EAAA,GACAZ,EAAQ,iBAAiB,UAAUY,GAAc,EAAE,SAAS,IAAM,GAE3D,MAAMZ,EAAQ,oBAAoB,UAAUY,CAAY;AAAA,EACjE,GAAG,CAACR,GAAcH,CAAS,CAAC,GAE5BY,EAAgB,MAAM;;AACpB,UAAMb,IAAUI,EAAa;AAE7B,QAAI,CAACJ;AACH;AAGF,UAAMc,IAAuBN,EAAwB,SAC/CO,IAAyBN,EAA0B,SACnDO,IAAwBN,EAAyB,SACjDO,KAAiBC,IAAAb,EAAS,CAAC,MAAV,gBAAAa,EAAa,IAC9BC,KAAgBC,IAAAf,EAASA,EAAS,SAAS,CAAC,MAA5B,gBAAAe,EAA+B;AAErD,QAAIL,MAA2B;AAC7B,MAAAb,EAAmBF,CAAO,GAC1BM,EAAc,UAAU;AAAA,SACnB;AACL,YAAMe,IACJJ,MAAmB,UACnBA,MAAmBF,KACnBI,MAAkBH,GACdM,IAAWH,MAAkB,UAAaA,MAAkBH;AAElE,MAAIK,KAAaP,IAAuB,IACtCd,EAAQ,aAAaA,EAAQ,eAAec,IACnCQ,KAAYhB,EAAc,WACnCJ,EAAmBF,CAAO;AAAA,IAE9B;AAEA,IAAAQ,EAAwB,UAAUR,EAAQ,cAC1CS,EAA0B,UAAUQ,GACpCP,EAAyB,UAAUS;AAAA,EACrC,GAAG,CAACf,GAAcC,CAAQ,CAAC;AAC7B;"}
+{"version":3,"file":"useChatStickToBottom.js","sources":["../../../../../src/components/dataDisplay/chat/useChatStickToBottom.ts"],"sourcesContent":["import { RefObject, useEffect, useRef } from \"react\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\n\nexport interface UseChatStickToBottomParams {\n  containerRef: RefObject<HTMLElement | null>;\n  messages: readonly { id: string }[];\n  threshold?: number;\n}\n\nexport function isScrolledToBottom(element: HTMLElement, threshold = 24): boolean {\n  return element.scrollHeight - element.scrollTop - element.clientHeight <= threshold;\n}\n\nexport function scrollChatToBottom(element: HTMLElement): void {\n  element.scrollTop = element.scrollHeight;\n}\n\nexport function useChatStickToBottom({ containerRef, messages, threshold = 24 }: UseChatStickToBottomParams) {\n  const isAtBottomRef = useRef(true);\n  const previousScrollHeightRef = useRef(0);\n  const previousFirstMessageIdRef = useRef<string | undefined>();\n  const previousLastMessageIdRef = useRef<string | undefined>();\n\n  useEffect(() => {\n    const element = containerRef.current;\n\n    if (!element) {\n      return;\n    }\n\n    const handleScroll = () => {\n      isAtBottomRef.current = isScrolledToBottom(element, threshold);\n    };\n\n    handleScroll();\n    element.addEventListener(\"scroll\", handleScroll, { passive: true });\n\n    return () => element.removeEventListener(\"scroll\", handleScroll);\n  }, [containerRef, threshold]);\n\n  useSafeLayoutEffect(() => {\n    const element = containerRef.current;\n\n    if (!element) {\n      return;\n    }\n\n    const previousScrollHeight = previousScrollHeightRef.current;\n    const previousFirstMessageId = previousFirstMessageIdRef.current;\n    const previousLastMessageId = previousLastMessageIdRef.current;\n    const firstMessageId = messages[0]?.id;\n    const lastMessageId = messages[messages.length - 1]?.id;\n\n    if (previousFirstMessageId === undefined) {\n      scrollChatToBottom(element);\n      isAtBottomRef.current = true;\n    } else {\n      const prepended =\n        firstMessageId !== undefined &&\n        firstMessageId !== previousFirstMessageId &&\n        lastMessageId === previousLastMessageId;\n      const appended = lastMessageId !== undefined && lastMessageId !== previousLastMessageId;\n\n      if (prepended && previousScrollHeight > 0) {\n        element.scrollTop += element.scrollHeight - previousScrollHeight;\n      } else if (appended && isAtBottomRef.current) {\n        scrollChatToBottom(element);\n      }\n    }\n\n    previousScrollHeightRef.current = element.scrollHeight;\n    previousFirstMessageIdRef.current = firstMessageId;\n    previousLastMessageIdRef.current = lastMessageId;\n  }, [containerRef, messages]);\n}\n"],"names":["isScrolledToBottom","element","threshold","scrollChatToBottom","useChatStickToBottom","containerRef","messages","isAtBottomRef","useRef","previousScrollHeightRef","previousFirstMessageIdRef","previousLastMessageIdRef","useEffect","handleScroll","useSafeLayoutEffect","previousScrollHeight","previousFirstMessageId","previousLastMessageId","firstMessageId","_a","lastMessageId","_b","prepended","appended"],"mappings":";;AASO,SAASA,EAAmBC,GAAsBC,IAAY,IAAa;AAChF,SAAOD,EAAQ,eAAeA,EAAQ,YAAYA,EAAQ,gBAAgBC;AAC5E;AAEO,SAASC,EAAmBF,GAA4B;AAC7D,EAAAA,EAAQ,YAAYA,EAAQ;AAC9B;AAEO,SAASG,EAAqB,EAAE,cAAAC,GAAc,UAAAC,GAAU,WAAAJ,IAAY,MAAkC;AAC3G,QAAMK,IAAgBC,EAAO,EAAI,GAC3BC,IAA0BD,EAAO,CAAC,GAClCE,IAA4BF,EAAA,GAC5BG,IAA2BH,EAAA;AAEjC,EAAAI,EAAU,MAAM;AACd,UAAMX,IAAUI,EAAa;AAE7B,QAAI,CAACJ;AACH;AAGF,UAAMY,IAAe,MAAM;AACzB,MAAAN,EAAc,UAAUP,EAAmBC,GAASC,CAAS;AAAA,IAC/D;AAEA,WAAAW,EAAA,GACAZ,EAAQ,iBAAiB,UAAUY,GAAc,EAAE,SAAS,IAAM,GAE3D,MAAMZ,EAAQ,oBAAoB,UAAUY,CAAY;AAAA,EACjE,GAAG,CAACR,GAAcH,CAAS,CAAC,GAE5BY,EAAoB,MAAM;;AACxB,UAAMb,IAAUI,EAAa;AAE7B,QAAI,CAACJ;AACH;AAGF,UAAMc,IAAuBN,EAAwB,SAC/CO,IAAyBN,EAA0B,SACnDO,IAAwBN,EAAyB,SACjDO,KAAiBC,IAAAb,EAAS,CAAC,MAAV,gBAAAa,EAAa,IAC9BC,KAAgBC,IAAAf,EAASA,EAAS,SAAS,CAAC,MAA5B,gBAAAe,EAA+B;AAErD,QAAIL,MAA2B;AAC7B,MAAAb,EAAmBF,CAAO,GAC1BM,EAAc,UAAU;AAAA,SACnB;AACL,YAAMe,IACJJ,MAAmB,UACnBA,MAAmBF,KACnBI,MAAkBH,GACdM,IAAWH,MAAkB,UAAaA,MAAkBH;AAElE,MAAIK,KAAaP,IAAuB,IACtCd,EAAQ,aAAaA,EAAQ,eAAec,IACnCQ,KAAYhB,EAAc,WACnCJ,EAAmBF,CAAO;AAAA,IAE9B;AAEA,IAAAQ,EAAwB,UAAUR,EAAQ,cAC1CS,EAA0B,UAAUQ,GACpCP,EAAyB,UAAUS;AAAA,EACrC,GAAG,CAACf,GAAcC,CAAQ,CAAC;AAC7B;"}

package/dist/headless/components/dataDisplay/chipGroup/chipGroup.js

@@ -0,0 +1,41 @@
+import { jsx as u } from "react/jsx-runtime";
+import A from "clsx";
+import { Chip as j } from "../chip/chip.js";
+function N({
+  options: d,
+  value: e,
+  multiple: t,
+  onChange: l,
+  size: m = "medium",
+  color: f = "primary",
+  disabled: a,
+  className: b,
+  ...p
+}) {
+  const c = () => e == null ? [] : Array.isArray(e) ? e : [e], i = (r) => c().includes(r), v = (r) => {
+    if (t) {
+      const s = c(), x = s.includes(r) ? s.filter((y) => y !== r) : [...s, r];
+      l == null || l(x);
+    } else
+      l == null || l(r);
+  };
+  return /* @__PURE__ */ u("div", { ...p, role: "group", className: A("smwb-chip-group", b), children: d.map((r) => /* @__PURE__ */ u(
+    j,
+    {
+      label: r.label,
+      icon: r.icon,
+      size: m,
+      color: f,
+      selected: i(r.value),
+      variant: i(r.value) ? "filled" : "outlined",
+      disabled: !!(a || r.disabled),
+      onClick: () => v(r.value)
+    },
+    r.value
+  )) });
+}
+export {
+  N as ChipGroup,
+  N as default
+};
+//# sourceMappingURL=chipGroup.js.map

package/dist/headless/components/dataDisplay/chipGroup/chipGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chipGroup.js","sources":["../../../../../src/components/dataDisplay/chipGroup/chipGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Chip, type ChipColor } from \"../chip\";\n\nexport interface ChipGroupOption {\n  value: string;\n  label: string;\n  icon?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport interface ChipGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  options: ChipGroupOption[];\n  /** Selected value (single) or values (when `multiple`). */\n  value?: string | string[];\n  /** Allow more than one selected chip (value becomes a string[]). */\n  multiple?: boolean;\n  onChange?: (value: string | string[]) => void;\n  size?: \"small\" | \"medium\";\n  color?: ChipColor;\n  disabled?: boolean;\n}\n\n/**\n * A multi/single-select toggle group built on `Chip` — the \"chip as a toggle\"\n * loop (selected → filled, else outlined; `role=group`) apps re-hand-roll for\n * filters / segmented controls. Pass an `options` array and a controlled\n * `value`; `onChange` returns the next value (string, or string[] when multiple).\n */\nexport function ChipGroup({\n  options,\n  value,\n  multiple,\n  onChange,\n  size = \"medium\",\n  color = \"primary\",\n  disabled,\n  className,\n  ...rest\n}: ChipGroupProps): React.ReactElement {\n  const selectedValues = (): string[] => {\n    if (value == null) return [];\n    return Array.isArray(value) ? value : [value];\n  };\n  const isSelected = (option: string): boolean => selectedValues().includes(option);\n\n  const toggle = (option: string): void => {\n    if (multiple) {\n      const current = selectedValues();\n      const next = current.includes(option) ? current.filter((v) => v !== option) : [...current, option];\n      onChange?.(next);\n    } else {\n      onChange?.(option);\n    }\n  };\n\n  return (\n    <div {...rest} role=\"group\" className={cn(\"smwb-chip-group\", className)}>\n      {options.map((option) => (\n        <Chip\n          key={option.value}\n          label={option.label}\n          icon={option.icon}\n          size={size}\n          color={color}\n          selected={isSelected(option.value)}\n          variant={isSelected(option.value) ? \"filled\" : \"outlined\"}\n          disabled={!!(disabled || option.disabled)}\n          onClick={() => toggle(option.value)}\n        />\n      ))}\n    </div>\n  );\n}\n\nexport default ChipGroup;\n"],"names":["ChipGroup","options","value","multiple","onChange","size","color","disabled","className","rest","selectedValues","isSelected","option","toggle","current","next","v","jsx","cn","Chip"],"mappings":";;;AA6BO,SAASA,EAAU;AAAA,EACxB,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAuC;AACrC,QAAMC,IAAiB,MACjBR,KAAS,OAAa,CAAA,IACnB,MAAM,QAAQA,CAAK,IAAIA,IAAQ,CAACA,CAAK,GAExCS,IAAa,CAACC,MAA4BF,EAAA,EAAiB,SAASE,CAAM,GAE1EC,IAAS,CAACD,MAAyB;AACvC,QAAIT,GAAU;AACZ,YAAMW,IAAUJ,EAAA,GACVK,IAAOD,EAAQ,SAASF,CAAM,IAAIE,EAAQ,OAAO,CAACE,MAAMA,MAAMJ,CAAM,IAAI,CAAC,GAAGE,GAASF,CAAM;AACjG,MAAAR,KAAA,QAAAA,EAAWW;AAAA,IACb;AACE,MAAAX,KAAA,QAAAA,EAAWQ;AAAA,EAEf;AAEA,SACE,gBAAAK,EAAC,OAAA,EAAK,GAAGR,GAAM,MAAK,SAAQ,WAAWS,EAAG,mBAAmBV,CAAS,GACnE,UAAAP,EAAQ,IAAI,CAACW,MACZ,gBAAAK;AAAA,IAACE;AAAA,IAAA;AAAA,MAEC,OAAOP,EAAO;AAAA,MACd,MAAMA,EAAO;AAAA,MACb,MAAAP;AAAA,MACA,OAAAC;AAAA,MACA,UAAUK,EAAWC,EAAO,KAAK;AAAA,MACjC,SAASD,EAAWC,EAAO,KAAK,IAAI,WAAW;AAAA,MAC/C,UAAU,CAAC,EAAEL,KAAYK,EAAO;AAAA,MAChC,SAAS,MAAMC,EAAOD,EAAO,KAAK;AAAA,IAAA;AAAA,IAR7BA,EAAO;AAAA,EAAA,CAUf,GACH;AAEJ;"}

package/dist/headless/components/dataDisplay/lazyImage/lazyImage.js

@@ -0,0 +1,51 @@
+import { jsxs as z, jsx as u } from "react/jsx-runtime";
+import { forwardRef as _, useState as d, useRef as x, useEffect as F } from "react";
+import N from "clsx";
+import { useForkRef as j } from "../../../hooks/useForkRef.js";
+const q = _(function({ src: c, alt: n, fallback: a, lazy: e = !0, aspectRatio: m, className: g, onError: t, ...b }, p) {
+  const [y, v] = d(!1), [i, l] = d(!e), f = x(null), w = j(p, f);
+  F(() => {
+    if (!e || i) return;
+    const s = f.current;
+    if (!s) return;
+    if (typeof IntersectionObserver == "undefined") {
+      l(!0);
+      return;
+    }
+    const o = new IntersectionObserver((R) => {
+      R.some((h) => h.isIntersecting) && (l(!0), o.disconnect());
+    });
+    return o.observe(s), () => o.disconnect();
+  }, [e, i]);
+  const r = y || !c, I = (s) => {
+    v(!0), t == null || t(s);
+  };
+  return /* @__PURE__ */ z(
+    "span",
+    {
+      className: N("smwb-lazy-image", g, { "smwb-lazy-image--empty": r }),
+      style: m != null ? { aspectRatio: String(m) } : void 0,
+      children: [
+        r && a ? /* @__PURE__ */ u("span", { className: "smwb-lazy-image__fallback", children: a }) : null,
+        r ? null : /* @__PURE__ */ u(
+          "img",
+          {
+            ...b,
+            ref: w,
+            className: "smwb-lazy-image__img",
+            src: i ? c : void 0,
+            alt: n != null ? n : "",
+            loading: e ? "lazy" : void 0,
+            decoding: "async",
+            onError: I
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  q as LazyImage,
+  q as default
+};
+//# sourceMappingURL=lazyImage.js.map

package/dist/headless/components/dataDisplay/lazyImage/lazyImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazyImage.js","sources":["../../../../../src/components/dataDisplay/lazyImage/lazyImage.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\n\nexport interface LazyImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, \"onError\"> {\n  /** Image URL. When absent (or after a load error) the `fallback` is shown. */\n  src?: string | undefined;\n  alt?: string | undefined;\n  /** Rendered in place of the image when it is missing or fails to load. */\n  fallback?: React.ReactNode;\n  /** Defer loading until the image scrolls into view (IntersectionObserver). Default true. */\n  lazy?: boolean;\n  /** CSS `aspect-ratio` for the wrapper (e.g. `1`, `\"4 / 3\"`) to reserve space before load. */\n  aspectRatio?: string | number;\n  /** Fires on a load error (after the fallback is swapped in). */\n  onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;\n}\n\n/**\n * An `<img>` with a built-in `onError` fallback and optional in-viewport lazy\n * loading — the `<img decoding=async onError=…>` + fallback dance hand-rolled in\n * every gallery, in one primitive. SSR-safe: renders the image markup on the\n * server; the IntersectionObserver only runs in an effect on the client.\n */\nexport const LazyImage = forwardRef<HTMLImageElement, LazyImageProps>(function LazyImage(\n  { src, alt, fallback, lazy = true, aspectRatio, className, onError, ...rest },\n  ref\n) {\n  const [failed, setFailed] = useState(false);\n  const [visible, setVisible] = useState(!lazy);\n  const imgRef = useRef<HTMLImageElement | null>(null);\n  const setRefs = useForkRef(ref, imgRef);\n\n  useEffect(() => {\n    if (!lazy || visible) return;\n    const el = imgRef.current;\n    if (!el) return;\n    if (typeof IntersectionObserver === \"undefined\") {\n      setVisible(true);\n      return;\n    }\n    const io = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) {\n        setVisible(true);\n        io.disconnect();\n      }\n    });\n    io.observe(el);\n    return () => io.disconnect();\n  }, [lazy, visible]);\n\n  const showFallback = failed || !src;\n  const handleError = (event: React.SyntheticEvent<HTMLImageElement>): void => {\n    setFailed(true);\n    onError?.(event);\n  };\n\n  return (\n    <span\n      className={cn(\"smwb-lazy-image\", className, { \"smwb-lazy-image--empty\": showFallback })}\n      style={aspectRatio != null ? { aspectRatio: String(aspectRatio) } : undefined}\n    >\n      {showFallback && fallback ? <span className=\"smwb-lazy-image__fallback\">{fallback}</span> : null}\n      {!showFallback ? (\n        <img\n          {...rest}\n          ref={setRefs}\n          className=\"smwb-lazy-image__img\"\n          src={visible ? src : undefined}\n          alt={alt ?? \"\"}\n          loading={lazy ? \"lazy\" : undefined}\n          decoding=\"async\"\n          onError={handleError}\n        />\n      ) : null}\n    </span>\n  );\n});\n\nexport default LazyImage;\n"],"names":["LazyImage","forwardRef","src","alt","fallback","lazy","aspectRatio","className","onError","rest","ref","failed","setFailed","useState","visible","setVisible","imgRef","useRef","setRefs","useForkRef","useEffect","el","io","entries","entry","showFallback","handleError","event","jsxs","cn","jsx"],"mappings":";;;;AAwBO,MAAMA,IAAYC,EAA6C,SACpE,EAAE,KAAAC,GAAK,KAAAC,GAAK,UAAAC,GAAU,MAAAC,IAAO,IAAM,aAAAC,GAAa,WAAAC,GAAW,SAAAC,GAAS,GAAGC,EAAA,GACvEC,GACA;AACA,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAASC,CAAU,IAAIF,EAAS,CAACR,CAAI,GACtCW,IAASC,EAAgC,IAAI,GAC7CC,IAAUC,EAAWT,GAAKM,CAAM;AAEtC,EAAAI,EAAU,MAAM;AACd,QAAI,CAACf,KAAQS,EAAS;AACtB,UAAMO,IAAKL,EAAO;AAClB,QAAI,CAACK,EAAI;AACT,QAAI,OAAO,wBAAyB,aAAa;AAC/C,MAAAN,EAAW,EAAI;AACf;AAAA,IACF;AACA,UAAMO,IAAK,IAAI,qBAAqB,CAACC,MAAY;AAC/C,MAAIA,EAAQ,KAAK,CAACC,MAAUA,EAAM,cAAc,MAC9CT,EAAW,EAAI,GACfO,EAAG,WAAA;AAAA,IAEP,CAAC;AACD,WAAAA,EAAG,QAAQD,CAAE,GACN,MAAMC,EAAG,WAAA;AAAA,EAClB,GAAG,CAACjB,GAAMS,CAAO,CAAC;AAElB,QAAMW,IAAed,KAAU,CAACT,GAC1BwB,IAAc,CAACC,MAAwD;AAC3E,IAAAf,EAAU,EAAI,GACdJ,KAAA,QAAAA,EAAUmB;AAAA,EACZ;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,mBAAmBtB,GAAW,EAAE,0BAA0BkB,GAAc;AAAA,MACtF,OAAOnB,KAAe,OAAO,EAAE,aAAa,OAAOA,CAAW,MAAM;AAAA,MAEnE,UAAA;AAAA,QAAAmB,KAAgBrB,IAAW,gBAAA0B,EAAC,QAAA,EAAK,WAAU,6BAA6B,aAAS,IAAU;AAAA,QAC1FL,IAWE,OAVF,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGrB;AAAA,YACJ,KAAKS;AAAA,YACL,WAAU;AAAA,YACV,KAAKJ,IAAUZ,IAAM;AAAA,YACrB,KAAKC,KAAA,OAAAA,IAAO;AAAA,YACZ,SAASE,IAAO,SAAS;AAAA,YACzB,UAAS;AAAA,YACT,SAASqB;AAAA,UAAA;AAAA,QAAA;AAAA,MAET;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/headless/components/dataDisplay/thumbCard/thumbCard.js

@@ -0,0 +1,81 @@
+import { jsxs as p, jsx as s } from "react/jsx-runtime";
+import { forwardRef as L, useRef as _, useState as j, useEffect as D } from "react";
+import { createPortal as I } from "react-dom";
+import M from "clsx";
+import { useForkRef as z } from "../../../hooks/useForkRef.js";
+import { LazyImage as B } from "../lazyImage/lazyImage.js";
+const O = L(function({
+  src: w,
+  caption: c,
+  selected: a,
+  onSelect: r,
+  fallback: v,
+  hoverPreview: i,
+  topStart: d,
+  topEnd: l,
+  lazy: y = !0,
+  disabled: n,
+  hoverDelay: g = 350,
+  className: N,
+  ...R
+}, x) {
+  const f = _(null), T = z(x, f), [o, b] = j(null), u = _(null), e = () => {
+    u.current && (clearTimeout(u.current), u.current = null);
+  }, k = () => {
+    i == null || n || (e(), u.current = setTimeout(() => {
+      var h;
+      const t = (h = f.current) == null ? void 0 : h.getBoundingClientRect();
+      t && b({ top: t.top, left: t.right + 8 });
+    }, g));
+  }, C = () => {
+    e(), b(null);
+  };
+  D(() => e, []);
+  const m = !!r && !n, E = (t) => {
+    m && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), r == null || r());
+  };
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      ...R,
+      ref: T,
+      className: M("smwb-thumb-card", N, {
+        "smwb-thumb-card--selected": a,
+        "smwb-thumb-card--disabled": n,
+        "smwb-thumb-card--interactive": m
+      }),
+      role: m ? "button" : void 0,
+      tabIndex: m ? 0 : void 0,
+      "aria-pressed": r ? a != null ? a : !1 : void 0,
+      "aria-disabled": n || void 0,
+      onClick: m ? () => r == null ? void 0 : r() : void 0,
+      onKeyDown: E,
+      onMouseEnter: k,
+      onMouseLeave: C,
+      children: [
+        /* @__PURE__ */ p("div", { className: "smwb-thumb-card__media", children: [
+          /* @__PURE__ */ s(B, { src: w, lazy: y, fallback: v }),
+          d ? /* @__PURE__ */ s("div", { className: "smwb-thumb-card__slot smwb-thumb-card__slot--start", children: d }) : null,
+          l ? /* @__PURE__ */ s("div", { className: "smwb-thumb-card__slot smwb-thumb-card__slot--end", children: l }) : null
+        ] }),
+        c ? /* @__PURE__ */ s("div", { className: "smwb-thumb-card__caption", children: c }) : null,
+        o && typeof document != "undefined" ? I(
+          /* @__PURE__ */ s(
+            "div",
+            {
+              className: "smwb-thumb-card__preview",
+              style: { position: "fixed", top: o.top, left: o.left },
+              children: typeof i == "string" ? /* @__PURE__ */ s("img", { src: i, alt: "" }) : i
+            }
+          ),
+          document.body
+        ) : null
+      ]
+    }
+  );
+});
+export {
+  O as ThumbCard,
+  O as default
+};
+//# sourceMappingURL=thumbCard.js.map