@smwb/ui-react 2.6.3 → 2.7.0

package/dist/headless/components/feedBack/progressIndicator/progressIndicator.js

@@ -1,51 +1,82 @@
-import { jsx as i, jsxs as b, Fragment as _ } from "react/jsx-runtime";
-import { useRef as v, useEffect as w, forwardRef as h } from "react";
+import { jsx as c, jsxs as $, Fragment as M } from "react/jsx-runtime";
+import { useRef as R, useEffect as k, forwardRef as x } from "react";
 import m from "clsx";
-const P = h(function({ type: r, variant: e, className: c, progressValue: a = 0, color: s = "primary", size: d = "medium", id: u, ...f }, n) {
-  const l = {
+const j = x(function({
+  type: r,
+  variant: s,
+  className: t,
+  progressValue: i = 0,
+  max: e = 100,
+  color: u = "primary",
+  size: y = "medium",
+  fullWidth: N,
+  width: a,
+  valueLabel: l,
+  id: P,
+  ...g
+}, d) {
+  const f = {
     role: "progressbar",
-    "aria-label": f["aria-label"],
-    id: u,
-    ...r === "determinate" ? { "aria-valuenow": a, "aria-valuemin": 0, "aria-valuemax": 100 } : {}
-  }, o = s !== "primary" ? `smwb-indicator_color-${s}` : null;
-  return e === "circular" ? /* @__PURE__ */ i(
+    "aria-label": g["aria-label"],
+    id: P,
+    ...r === "determinate" ? { "aria-valuenow": i, "aria-valuemin": 0, "aria-valuemax": e } : {}
+  }, b = u !== "primary" ? `smwb-indicator_color-${u}` : null, _ = Math.min(100, Math.max(0, e > 0 ? i / e * 100 : 0));
+  if (s === "circular")
+    return /* @__PURE__ */ c(
+      "div",
+      {
+        ref: d,
+        className: m("smwb-indicator_circular", `smwb-${r}`, b, `smwb-indicator_size-${y}`, t),
+        ...f,
+        children: r === "determinate" ? /* @__PURE__ */ c(z, { progressValue: _ }) : /* @__PURE__ */ $(M, { children: [
+          /* @__PURE__ */ c("div", { className: "smwb-indicator_circular__thumb" }),
+          /* @__PURE__ */ c("div", {}),
+          /* @__PURE__ */ c("div", {}),
+          /* @__PURE__ */ c("div", {})
+        ] })
+      }
+    );
+  const v = { "smwb-indicator_full-width": N }, h = a !== void 0 ? { width: typeof a == "number" ? `${a}px` : a } : void 0, w = (n) => /* @__PURE__ */ c(
     "div",
     {
-      ref: n,
-      className: m("smwb-indicator_circular", `smwb-${r}`, o, `smwb-indicator_size-${d}`, c),
-      ...l,
-      children: r === "determinate" ? /* @__PURE__ */ i($, { progressValue: a }) : /* @__PURE__ */ b(_, { children: [
-        /* @__PURE__ */ i("div", { className: "smwb-indicator_circular__thumb" }),
-        /* @__PURE__ */ i("div", {}),
-        /* @__PURE__ */ i("div", {}),
-        /* @__PURE__ */ i("div", {})
-      ] })
+      ref: n ? d : void 0,
+      className: m("smwb-indicator_linear", `smwb-${r}`, b, n && v, n && t),
+      style: n ? h : void 0,
+      ...f,
+      children: /* @__PURE__ */ c(
+        "div",
+        {
+          className: "smwb-indicator_linear__thumb",
+          style: r === "determinate" ? { width: `${_}%` } : {}
+        }
+      )
     }
-  ) : /* @__PURE__ */ i("div", { ref: n, className: m("smwb-indicator_linear", `smwb-${r}`, o, c), ...l, children: /* @__PURE__ */ i(
-    "div",
-    {
-      className: "smwb-indicator_linear__thumb",
-      style: r === "determinate" ? { width: `${a}%` } : {}
-    }
-  ) });
+  );
+  if (!l || r !== "determinate")
+    return w(!0);
+  const p = e === 100 ? `${Math.round(i)}%` : `${i} / ${e}`;
+  return /* @__PURE__ */ $("div", { ref: d, className: m("smwb-indicator_labeled", v, t), style: h, children: [
+    w(!1),
+    /* @__PURE__ */ c("span", { className: "smwb-indicator__value", children: typeof l == "function" ? l(i, e) : p })
+  ] });
 });
-function $({ progressValue: t = 0 }) {
-  const r = v(null);
-  return w(() => {
-    var c;
+function z({ progressValue: o = 0 }) {
+  const r = R(null);
+  return k(() => {
+    var t;
     if (!r.current || !r.current.r) return;
-    const e = (c = r.current) == null ? void 0 : c.r.baseVal.value;
-    if (e && r.current) {
-      const a = 2 * Math.PI * e;
-      r.current.style.strokeDasharray = `${a} ${a}`, r.current.style.strokeDashoffset = `${a}`;
-      const s = a - t / 100 * a;
-      r.current.style.strokeDashoffset = `${s}`;
+    const s = (t = r.current) == null ? void 0 : t.r.baseVal.value;
+    if (s && r.current) {
+      const i = 2 * Math.PI * s;
+      r.current.style.strokeDasharray = `${i} ${i}`, r.current.style.strokeDashoffset = `${i}`;
+      const e = i - o / 100 * i;
+      r.current.style.strokeDashoffset = `${e}`;
     }
-  }, [r, t]), /* @__PURE__ */ i("svg", { className: "smwb-indicator_circular__svg", children: /* @__PURE__ */ i("circle", { className: "smwb-indicator_circular__circle", cx: "24", cy: "24", r: "22", ref: r }) });
+  }, [r, o]), /* @__PURE__ */ c("svg", { className: "smwb-indicator_circular__svg", children: /* @__PURE__ */ c("circle", { className: "smwb-indicator_circular__circle", cx: "24", cy: "24", r: "22", ref: r }) });
 }
 export {
-  $ as CircularProgress,
-  P as ProgressIndicator,
-  P as default
+  z as CircularProgress,
+  j as ProgressIndicator,
+  j as default
 };
 //# sourceMappingURL=progressIndicator.js.map

package/dist/headless/components/feedBack/progressIndicator/progressIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"progressIndicator.js","sources":["../../../../../src/components/feedBack/progressIndicator/progressIndicator.tsx"],"sourcesContent":["import React, { forwardRef, useRef, useEffect } from \"react\";\nimport cn from \"clsx\";\n\nexport type ProgressColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface ProgressIndicatorProps {\n  className?: string;\n  variant: \"circular\" | \"linear\";\n  type: \"determinate\" | \"indeterminate\";\n  progressValue?: number;\n  /** Semantic color. */\n  color?: ProgressColor;\n  /** Circular size preset. */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Accessible name for the progress bar. */\n  \"aria-label\"?: string;\n  id?: string;\n}\n\nexport const ProgressIndicator = forwardRef<HTMLDivElement, ProgressIndicatorProps>(function ProgressIndicator(\n  { type, variant, className, progressValue = 0, color = \"primary\", size = \"medium\", id, ...rest },\n  ref\n) {\n  const ariaProps = {\n    role: \"progressbar\" as const,\n    \"aria-label\": rest[\"aria-label\"],\n    id,\n    ...(type === \"determinate\" ? { \"aria-valuenow\": progressValue, \"aria-valuemin\": 0, \"aria-valuemax\": 100 } : {}),\n  };\n  const colorClass = color !== \"primary\" ? `smwb-indicator_color-${color}` : null;\n\n  if (variant === \"circular\") {\n    return (\n      <div\n        ref={ref}\n        className={cn(\"smwb-indicator_circular\", `smwb-${type}`, colorClass, `smwb-indicator_size-${size}`, className)}\n        {...ariaProps}\n      >\n        {type === \"determinate\" ? (\n          <CircularProgress progressValue={progressValue} />\n        ) : (\n          <>\n            <div className=\"smwb-indicator_circular__thumb\" />\n            <div></div>\n            <div></div>\n            <div></div>\n          </>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div ref={ref} className={cn(\"smwb-indicator_linear\", `smwb-${type}`, colorClass, className)} {...ariaProps}>\n      <div\n        className=\"smwb-indicator_linear__thumb\"\n        style={type === \"determinate\" ? { width: `${progressValue}%` } : {}}\n      ></div>\n    </div>\n  );\n});\n\nexport interface CircularProgressProps {\n  progressValue?: number;\n}\n\nexport function CircularProgress({ progressValue = 0 }: CircularProgressProps) {\n  const circleRef = useRef<SVGCircleElement>(null);\n\n  useEffect(() => {\n    if (!circleRef.current || !circleRef.current.r) return;\n\n    const circleRadius = circleRef.current?.r.baseVal.value;\n    if (circleRadius && circleRef.current) {\n      const circleLength = 2 * Math.PI * circleRadius;\n      circleRef.current.style.strokeDasharray = `${circleLength} ${circleLength}`;\n      circleRef.current.style.strokeDashoffset = `${circleLength}`;\n\n      const offset = circleLength - (progressValue / 100) * circleLength;\n      circleRef.current.style.strokeDashoffset = `${offset}`;\n    }\n  }, [circleRef, progressValue]);\n\n  return (\n    <svg className=\"smwb-indicator_circular__svg\">\n      <circle className=\"smwb-indicator_circular__circle\" cx=\"24\" cy=\"24\" r=\"22\" ref={circleRef} />\n    </svg>\n  );\n}\n\nexport default ProgressIndicator;\n"],"names":["ProgressIndicator","forwardRef","type","variant","className","progressValue","color","size","id","rest","ref","ariaProps","colorClass","jsx","cn","CircularProgress","jsxs","Fragment","circleRef","useRef","useEffect","circleRadius","_a","circleLength","offset"],"mappings":";;;AAmBO,MAAMA,IAAoBC,EAAmD,SAClF,EAAE,MAAAC,GAAM,SAAAC,GAAS,WAAAC,GAAW,eAAAC,IAAgB,GAAG,OAAAC,IAAQ,WAAW,MAAAC,IAAO,UAAU,IAAAC,GAAI,GAAGC,EAAA,GAC1FC,GACA;AACA,QAAMC,IAAY;AAAA,IAChB,MAAM;AAAA,IACN,cAAcF,EAAK,YAAY;AAAA,IAC/B,IAAAD;AAAA,IACA,GAAIN,MAAS,gBAAgB,EAAE,iBAAiBG,GAAe,iBAAiB,GAAG,iBAAiB,QAAQ,CAAA;AAAA,EAAC,GAEzGO,IAAaN,MAAU,YAAY,wBAAwBA,CAAK,KAAK;AAE3E,SAAIH,MAAY,aAEZ,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,WAAWI,EAAG,2BAA2B,QAAQZ,CAAI,IAAIU,GAAY,uBAAuBL,CAAI,IAAIH,CAAS;AAAA,MAC5G,GAAGO;AAAA,MAEH,gBAAS,gBACR,gBAAAE,EAACE,GAAA,EAAiB,eAAAV,EAAA,CAA8B,IAEhD,gBAAAW,EAAAC,GAAA,EACE,UAAA;AAAA,QAAA,gBAAAJ,EAAC,OAAA,EAAI,WAAU,iCAAA,CAAiC;AAAA,0BAC/C,OAAA,EAAI;AAAA,0BACJ,OAAA,EAAI;AAAA,0BACJ,OAAA,CAAA,CAAI;AAAA,MAAA,EAAA,CACP;AAAA,IAAA;AAAA,EAAA,IAON,gBAAAA,EAAC,OAAA,EAAI,KAAAH,GAAU,WAAWI,EAAG,yBAAyB,QAAQZ,CAAI,IAAIU,GAAYR,CAAS,GAAI,GAAGO,GAChG,UAAA,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAOX,MAAS,gBAAgB,EAAE,OAAO,GAAGG,CAAa,QAAQ,CAAA;AAAA,IAAC;AAAA,EAAA,GAEtE;AAEJ,CAAC;AAMM,SAASU,EAAiB,EAAE,eAAAV,IAAgB,KAA4B;AAC7E,QAAMa,IAAYC,EAAyB,IAAI;AAE/C,SAAAC,EAAU,MAAM;;AACd,QAAI,CAACF,EAAU,WAAW,CAACA,EAAU,QAAQ,EAAG;AAEhD,UAAMG,KAAeC,IAAAJ,EAAU,YAAV,gBAAAI,EAAmB,EAAE,QAAQ;AAClD,QAAID,KAAgBH,EAAU,SAAS;AACrC,YAAMK,IAAe,IAAI,KAAK,KAAKF;AACnC,MAAAH,EAAU,QAAQ,MAAM,kBAAkB,GAAGK,CAAY,IAAIA,CAAY,IACzEL,EAAU,QAAQ,MAAM,mBAAmB,GAAGK,CAAY;AAE1D,YAAMC,IAASD,IAAgBlB,IAAgB,MAAOkB;AACtD,MAAAL,EAAU,QAAQ,MAAM,mBAAmB,GAAGM,CAAM;AAAA,IACtD;AAAA,EACF,GAAG,CAACN,GAAWb,CAAa,CAAC,qBAG1B,OAAA,EAAI,WAAU,gCACb,UAAA,gBAAAQ,EAAC,YAAO,WAAU,mCAAkC,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,KAAKK,GAAW,GAC7F;AAEJ;"}
+{"version":3,"file":"progressIndicator.js","sources":["../../../../../src/components/feedBack/progressIndicator/progressIndicator.tsx"],"sourcesContent":["import React, { forwardRef, useRef, useEffect, type CSSProperties, type ReactNode } from \"react\";\nimport cn from \"clsx\";\n\nexport type ProgressColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface ProgressIndicatorProps {\n  className?: string;\n  variant: \"circular\" | \"linear\";\n  type: \"determinate\" | \"indeterminate\";\n  progressValue?: number;\n  /** Upper bound of `progressValue` (100 by default): with `max={14}`, `progressValue={3}` is 3 of 14. */\n  max?: number;\n  /** Semantic color. */\n  color?: ProgressColor;\n  /** Circular size preset. */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Linear: fill the container's width instead of the fixed 240px track. */\n  fullWidth?: boolean;\n  /** Linear: the width, in px or any CSS length. */\n  width?: number | string;\n  /**\n   * Linear, determinate: the value as text beside the bar. `true` shows a\n   * percentage — or \"3 / 14\" with a custom `max`; a function formats it, e.g.\n   * `(value, max) => <>{value} of {max}</>`.\n   */\n  valueLabel?: boolean | ((value: number, max: number) => ReactNode);\n  /** Accessible name for the progress bar. */\n  \"aria-label\"?: string;\n  id?: string;\n}\n\nexport const ProgressIndicator = forwardRef<HTMLDivElement, ProgressIndicatorProps>(function ProgressIndicator(\n  {\n    type,\n    variant,\n    className,\n    progressValue = 0,\n    max = 100,\n    color = \"primary\",\n    size = \"medium\",\n    fullWidth,\n    width,\n    valueLabel,\n    id,\n    ...rest\n  },\n  ref\n) {\n  const ariaProps = {\n    role: \"progressbar\" as const,\n    \"aria-label\": rest[\"aria-label\"],\n    id,\n    ...(type === \"determinate\" ? { \"aria-valuenow\": progressValue, \"aria-valuemin\": 0, \"aria-valuemax\": max } : {}),\n  };\n  const colorClass = color !== \"primary\" ? `smwb-indicator_color-${color}` : null;\n  const percent = Math.min(100, Math.max(0, max > 0 ? (progressValue / max) * 100 : 0));\n\n  if (variant === \"circular\") {\n    return (\n      <div\n        ref={ref}\n        className={cn(\"smwb-indicator_circular\", `smwb-${type}`, colorClass, `smwb-indicator_size-${size}`, className)}\n        {...ariaProps}\n      >\n        {type === \"determinate\" ? (\n          <CircularProgress progressValue={percent} />\n        ) : (\n          <>\n            <div className=\"smwb-indicator_circular__thumb\" />\n            <div></div>\n            <div></div>\n            <div></div>\n          </>\n        )}\n      </div>\n    );\n  }\n\n  // Width class and style go on the outermost element: the bar, or the wrapper\n  // that also holds the value label.\n  const sizeClass = { \"smwb-indicator_full-width\": fullWidth };\n  const sizeStyle: CSSProperties | undefined =\n    width !== undefined ? { width: typeof width === \"number\" ? `${width}px` : width } : undefined;\n  const bar = (outer: boolean) => (\n    <div\n      ref={outer ? ref : undefined}\n      className={cn(\"smwb-indicator_linear\", `smwb-${type}`, colorClass, outer && sizeClass, outer && className)}\n      style={outer ? sizeStyle : undefined}\n      {...ariaProps}\n    >\n      <div\n        className=\"smwb-indicator_linear__thumb\"\n        style={type === \"determinate\" ? { width: `${percent}%` } : {}}\n      ></div>\n    </div>\n  );\n\n  if (!valueLabel || type !== \"determinate\") {\n    return bar(true);\n  }\n  const defaultText = max === 100 ? `${Math.round(progressValue)}%` : `${progressValue} / ${max}`;\n  return (\n    <div ref={ref} className={cn(\"smwb-indicator_labeled\", sizeClass, className)} style={sizeStyle}>\n      {bar(false)}\n      <span className=\"smwb-indicator__value\">\n        {typeof valueLabel === \"function\" ? valueLabel(progressValue, max) : defaultText}\n      </span>\n    </div>\n  );\n});\n\nexport interface CircularProgressProps {\n  /** Percent, 0–100. */\n  progressValue?: number;\n}\n\nexport function CircularProgress({ progressValue = 0 }: CircularProgressProps) {\n  const circleRef = useRef<SVGCircleElement>(null);\n\n  useEffect(() => {\n    if (!circleRef.current || !circleRef.current.r) return;\n\n    const circleRadius = circleRef.current?.r.baseVal.value;\n    if (circleRadius && circleRef.current) {\n      const circleLength = 2 * Math.PI * circleRadius;\n      circleRef.current.style.strokeDasharray = `${circleLength} ${circleLength}`;\n      circleRef.current.style.strokeDashoffset = `${circleLength}`;\n\n      const offset = circleLength - (progressValue / 100) * circleLength;\n      circleRef.current.style.strokeDashoffset = `${offset}`;\n    }\n  }, [circleRef, progressValue]);\n\n  return (\n    <svg className=\"smwb-indicator_circular__svg\">\n      <circle className=\"smwb-indicator_circular__circle\" cx=\"24\" cy=\"24\" r=\"22\" ref={circleRef} />\n    </svg>\n  );\n}\n\nexport default ProgressIndicator;\n"],"names":["ProgressIndicator","forwardRef","type","variant","className","progressValue","max","color","size","fullWidth","width","valueLabel","id","rest","ref","ariaProps","colorClass","percent","jsx","cn","CircularProgress","jsxs","Fragment","sizeClass","sizeStyle","bar","outer","defaultText","circleRef","useRef","useEffect","circleRadius","_a","circleLength","offset"],"mappings":"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"}

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

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

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

@@ -1 +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=\"medium\">\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              fullWidth\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":";;;;;AAkCO,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,UACxC,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,WAAS;AAAA,UACT,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;"}
+{"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  // The visible heading also names the dialog for screen readers.\n  const heading = title ?? \"Save\";\n\n  return (\n    <Modal open={open} onClose={onClose} size=\"medium\" aria-label={heading}>\n      <Modal.Header>{heading}</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              fullWidth\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","heading","Modal","jsx","jsxs","cn","TextField","event","Button"],"mappings":";;;;;AAkCO,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,QAEvDa,IAAUf,KAAA,OAAAA,IAAS;AAEzB,2BACGgB,GAAA,EAAM,MAAAjB,GAAY,SAAAY,GAAkB,MAAK,UAAS,cAAYI,GAC7D,UAAA;AAAA,IAAA,gBAAAE,EAACD,EAAM,QAAN,EAAc,UAAAD,EAAA,CAAQ;AAAA,IACvB,gBAAAE,EAACD,EAAM,SAAN,EACC,UAAA,gBAAAE,EAAC,SAAI,WAAWC,EAAG,gCAAgCN,CAAS,GACzD,UAAA;AAAA,MAAAC,IACC,gBAAAG;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,OAAOnB,KAAA,OAAAA,IAAa;AAAA,UACpB,OAAOC,KAAA,OAAAA,IAAQ;AAAA,UACf,WAAS;AAAA,UACT,UAAU,CAAC,CAACK;AAAA,UACZ,UAAU,CAACc,MAAUlB,KAAA,gBAAAA,EAAekB,EAAM,cAAc;AAAA,QAAK;AAAA,MAAA,IAE7D;AAAA,MACHjB,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,QAACK;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,UAAU,CAAC,CAACf;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,gBAAAM,EAACF,EAAM,QAAN,EACC,UAAA;AAAA,MAAA,gBAAAC,EAACK,GAAA,EAAO,SAAQ,QAAO,UAAU,CAAC,CAACf,GAAM,SAAS,MAAMI,EAAA,GAAW,OAAOF,KAAA,OAAAA,IAAe,SAAA,CAAU;AAAA,MACnG,gBAAAQ,EAACK,GAAA,EAAO,SAAQ,aAAY,UAAU,CAAC,CAACf,GAAM,SAAS,MAAMG,EAAA,GAAa,OAAOF,KAAA,OAAAA,IAAgB,OAAA,CAAQ;AAAA,IAAA,EAAA,CAC3G;AAAA,EAAA,GACF;AAEJ;"}

package/dist/headless/components/feedBack/tooltip/tooltip.js

@@ -1,59 +1,66 @@
-import { jsxs as S, jsx as f } from "react/jsx-runtime";
-import { forwardRef as X, useState as d, useRef as v, useCallback as u, useEffect as Y } from "react";
-import H from "clsx";
-import { useFloating as L, autoUpdate as U, offset as V } from "@floating-ui/react";
-import { resolvePlacement as q } from "../../../utils/floating.js";
-const Q = X(function({
-  className: h,
-  children: w,
-  placement: T = "top",
-  offset: e = { offsetX: 0, offsetY: 0 },
-  message: k,
-  open: b,
-  trigger: o = "hover",
-  openDelay: s = 0,
-  closeDelay: c = 0
-}, x) {
-  var m, p;
-  const i = q(T), [O, r] = d(!1), [R, C] = d(!1), n = v(null), l = v(null), t = u(() => {
-    n.current !== null && (clearTimeout(n.current), n.current = null), l.current !== null && (clearTimeout(l.current), l.current = null);
+import { jsxs as _, jsx as v } from "react/jsx-runtime";
+import { forwardRef as M, useState as f, useRef as w, useCallback as d, useEffect as N } from "react";
+import j from "clsx";
+import { useFloating as A, autoUpdate as F, offset as L, flip as S, shift as V } from "@floating-ui/react";
+import { resolvePlacement as X } from "../../../utils/floating.js";
+function Y({ reference: h, placement: u, offset: e, className: a, children: m }) {
+  var o, n;
+  const l = X(u), { refs: p, floatingStyles: t } = A({
+    elements: { reference: h },
+    placement: l.placement,
+    whileElementsMounted: F,
+    middleware: [
+      L({ mainAxis: (o = e == null ? void 0 : e.offsetY) != null ? o : 0, crossAxis: (n = e == null ? void 0 : e.offsetX) != null ? n : 0 }),
+      // A fixed placement turns to the other side, and slides along it, when the
+      // viewport has no room for it.
+      ...l.autoMiddleware ? [l.autoMiddleware] : [S(), V({ padding: 8 })]
+    ]
+  });
+  return /* @__PURE__ */ v("div", { ref: p.setFloating, className: j("smwb-tooltip", a), style: t, children: m });
+}
+const Q = M(function({
+  className: u,
+  children: e,
+  placement: a = "top",
+  offset: m = { offsetX: 0, offsetY: 0 },
+  message: l,
+  open: p,
+  trigger: t = "hover",
+  openDelay: o = 0,
+  closeDelay: n = 0
+}, k) {
+  const [T, b] = f(null), [P, s] = f(!1), [x, C] = f(!1), i = w(null), c = w(null), r = d(() => {
+    i.current !== null && (clearTimeout(i.current), i.current = null), c.current !== null && (clearTimeout(c.current), c.current = null);
   }, []);
-  Y(() => () => t(), [t]);
-  const _ = u(() => {
-    if (t(), s <= 0) {
-      r(!0);
+  N(() => () => r(), [r]);
+  const O = d(() => {
+    if (r(), o <= 0) {
+      s(!0);
       return;
     }
-    n.current = setTimeout(() => r(!0), s);
-  }, [t, s]), E = u(() => {
-    if (t(), c <= 0) {
-      r(!1);
+    i.current = setTimeout(() => s(!0), o);
+  }, [r, o]), R = d(() => {
+    if (r(), n <= 0) {
+      s(!1);
       return;
     }
-    l.current = setTimeout(() => r(!1), c);
-  }, [t, c]), { refs: a, floatingStyles: M } = L({
-    placement: i.placement,
-    whileElementsMounted: U,
-    middleware: [
-      V({ mainAxis: (m = e == null ? void 0 : e.offsetY) != null ? m : 0, crossAxis: (p = e == null ? void 0 : e.offsetX) != null ? p : 0 }),
-      ...i.autoMiddleware ? [i.autoMiddleware] : []
-    ]
-  }), N = o === "manual" ? b === !0 : o === "click" ? R : O, P = o === "hover" ? _ : void 0, j = o === "hover" ? E : void 0, A = o === "click" ? () => {
-    C((F) => !F);
-  } : void 0;
-  return /* @__PURE__ */ S("div", { className: "smwb-tooltip__wrapper", role: "tooltip", ref: x, children: [
-    /* @__PURE__ */ f(
+    c.current = setTimeout(() => s(!1), n);
+  }, [r, n]);
+  return /* @__PURE__ */ _("div", { className: "smwb-tooltip__wrapper", role: "tooltip", ref: k, children: [
+    /* @__PURE__ */ v(
       "div",
       {
         className: "smwb-tooltip__ref",
-        ref: a.setReference,
-        onPointerEnter: P,
-        onPointerLeave: j,
-        onClick: A,
-        children: w
+        ref: b,
+        onPointerEnter: t === "hover" ? O : void 0,
+        onPointerLeave: t === "hover" ? R : void 0,
+        onClick: t === "click" ? () => {
+          C((E) => !E);
+        } : void 0,
+        children: e
       }
     ),
-    N && /* @__PURE__ */ f("div", { ref: a.setFloating, className: H("smwb-tooltip", h), style: M, children: k })
+    (t === "manual" ? p === !0 : t === "click" ? x : P) && T ? /* @__PURE__ */ v(Y, { reference: T, placement: a, offset: m, className: u, children: l }) : null
   ] });
 });
 export {

package/dist/headless/components/feedBack/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../../../../src/components/feedBack/tooltip/tooltip.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren, useCallback, useEffect, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { autoUpdate, offset as offsetMiddleware, useFloating } from \"@floating-ui/react\";\nimport { Placement, resolvePlacement } from \"../../../utils/floating\";\n\nexport type TooltipTrigger = \"hover\" | \"click\" | \"manual\";\n\nexport interface TooltipProps {\n  className?: string;\n  offset?: {\n    offsetX?: number;\n    offsetY?: number;\n  };\n  message: React.ReactNode;\n  placement?: Placement;\n  /** Controls tooltip visibility when trigger is manual. */\n  open?: boolean;\n  /** hover (default): show on pointer enter; click: toggle; manual: use open only. */\n  trigger?: TooltipTrigger;\n  openDelay?: number;\n  closeDelay?: number;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, PropsWithChildren<TooltipProps>>(function Tooltip(\n  {\n    className,\n    children,\n    placement = \"top\",\n    offset = { offsetX: 0, offsetY: 0 },\n    message,\n    open: openProp,\n    trigger = \"hover\",\n    openDelay = 0,\n    closeDelay = 0,\n  },\n  ref\n) {\n  const resolved = resolvePlacement(placement);\n  const [hoverOpen, setHoverOpen] = useState(false);\n  const [clickOpen, setClickOpen] = useState(false);\n  const openTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const clearTimers = useCallback(() => {\n    if (openTimerRef.current !== null) {\n      clearTimeout(openTimerRef.current);\n      openTimerRef.current = null;\n    }\n    if (closeTimerRef.current !== null) {\n      clearTimeout(closeTimerRef.current);\n      closeTimerRef.current = null;\n    }\n  }, []);\n\n  useEffect(() => () => clearTimers(), [clearTimers]);\n\n  const scheduleOpen = useCallback(() => {\n    clearTimers();\n    if (openDelay <= 0) {\n      setHoverOpen(true);\n      return;\n    }\n    openTimerRef.current = setTimeout(() => setHoverOpen(true), openDelay);\n  }, [clearTimers, openDelay]);\n\n  const scheduleClose = useCallback(() => {\n    clearTimers();\n    if (closeDelay <= 0) {\n      setHoverOpen(false);\n      return;\n    }\n    closeTimerRef.current = setTimeout(() => setHoverOpen(false), closeDelay);\n  }, [clearTimers, closeDelay]);\n\n  const { refs, floatingStyles } = useFloating({\n    placement: resolved.placement,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      offsetMiddleware({ mainAxis: offset?.offsetY ?? 0, crossAxis: offset?.offsetX ?? 0 }),\n      ...(resolved.autoMiddleware ? [resolved.autoMiddleware] : []),\n    ],\n  });\n\n  const isVisible = trigger === \"manual\" ? openProp === true : trigger === \"click\" ? clickOpen : hoverOpen;\n\n  const onPointerEnter = trigger === \"hover\" ? scheduleOpen : undefined;\n  const onPointerLeave = trigger === \"hover\" ? scheduleClose : undefined;\n  const onClick =\n    trigger === \"click\"\n      ? () => {\n          setClickOpen((prev) => !prev);\n        }\n      : undefined;\n\n  return (\n    <div className=\"smwb-tooltip__wrapper\" role=\"tooltip\" ref={ref}>\n      <div\n        className=\"smwb-tooltip__ref\"\n        ref={refs.setReference}\n        onPointerEnter={onPointerEnter}\n        onPointerLeave={onPointerLeave}\n        onClick={onClick}\n      >\n        {children}\n      </div>\n      {isVisible && (\n        <div ref={refs.setFloating} className={cn(\"smwb-tooltip\", className)} style={floatingStyles}>\n          {message}\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default Tooltip;\n"],"names":["Tooltip","forwardRef","className","children","placement","offset","message","openProp","trigger","openDelay","closeDelay","ref","resolved","resolvePlacement","hoverOpen","setHoverOpen","useState","clickOpen","setClickOpen","openTimerRef","useRef","closeTimerRef","clearTimers","useCallback","useEffect","scheduleOpen","scheduleClose","refs","floatingStyles","useFloating","autoUpdate","offsetMiddleware","isVisible","onPointerEnter","onPointerLeave","onClick","prev","jsx","cn"],"mappings":";;;;;AAuBO,MAAMA,IAAUC,EAA4D,SACjF;AAAA,EACE,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EAAA,QACZC,IAAS,EAAE,SAAS,GAAG,SAAS,EAAA;AAAA,EAChC,SAAAC;AAAA,EACA,MAAMC;AAAA,EACN,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AACf,GACAC,GACA;;AACA,QAAMC,IAAWC,EAAiBT,CAAS,GACrC,CAACU,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1C,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK,GAC1CG,IAAeC,EAA6C,IAAI,GAChEC,IAAgBD,EAA6C,IAAI,GAEjEE,IAAcC,EAAY,MAAM;AACpC,IAAIJ,EAAa,YAAY,SAC3B,aAAaA,EAAa,OAAO,GACjCA,EAAa,UAAU,OAErBE,EAAc,YAAY,SAC5B,aAAaA,EAAc,OAAO,GAClCA,EAAc,UAAU;AAAA,EAE5B,GAAG,CAAA,CAAE;AAEL,EAAAG,EAAU,MAAM,MAAMF,KAAe,CAACA,CAAW,CAAC;AAElD,QAAMG,IAAeF,EAAY,MAAM;AAErC,QADAD,EAAA,GACIb,KAAa,GAAG;AAClB,MAAAM,EAAa,EAAI;AACjB;AAAA,IACF;AACA,IAAAI,EAAa,UAAU,WAAW,MAAMJ,EAAa,EAAI,GAAGN,CAAS;AAAA,EACvE,GAAG,CAACa,GAAab,CAAS,CAAC,GAErBiB,IAAgBH,EAAY,MAAM;AAEtC,QADAD,EAAA,GACIZ,KAAc,GAAG;AACnB,MAAAK,EAAa,EAAK;AAClB;AAAA,IACF;AACA,IAAAM,EAAc,UAAU,WAAW,MAAMN,EAAa,EAAK,GAAGL,CAAU;AAAA,EAC1E,GAAG,CAACY,GAAaZ,CAAU,CAAC,GAEtB,EAAE,MAAAiB,GAAM,gBAAAC,EAAA,IAAmBC,EAAY;AAAA,IAC3C,WAAWjB,EAAS;AAAA,IACpB,sBAAsBkB;AAAA,IACtB,YAAY;AAAA,MACVC,EAAiB,EAAE,WAAU1B,IAAAA,KAAAA,gBAAAA,EAAQ,YAARA,OAAAA,IAAmB,GAAG,YAAWA,IAAAA,KAAAA,gBAAAA,EAAQ,YAARA,OAAAA,IAAmB,GAAG;AAAA,MACpF,GAAIO,EAAS,iBAAiB,CAACA,EAAS,cAAc,IAAI,CAAA;AAAA,IAAC;AAAA,EAC7D,CACD,GAEKoB,IAAYxB,MAAY,WAAWD,MAAa,KAAOC,MAAY,UAAUS,IAAYH,GAEzFmB,IAAiBzB,MAAY,UAAUiB,IAAe,QACtDS,IAAiB1B,MAAY,UAAUkB,IAAgB,QACvDS,IACJ3B,MAAY,UACR,MAAM;AACJ,IAAAU,EAAa,CAACkB,MAAS,CAACA,CAAI;AAAA,EAC9B,IACA;AAEN,2BACG,OAAA,EAAI,WAAU,yBAAwB,MAAK,WAAU,KAAAzB,GACpD,UAAA;AAAA,IAAA,gBAAA0B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,KAAKV,EAAK;AAAA,QACV,gBAAAM;AAAA,QACA,gBAAAC;AAAA,QACA,SAAAC;AAAA,QAEC,UAAAhC;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF6B,KACC,gBAAAK,EAAC,OAAA,EAAI,KAAKV,EAAK,aAAa,WAAWW,EAAG,gBAAgBpC,CAAS,GAAG,OAAO0B,GAC1E,UAAAtB,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ,CAAC;"}
+{"version":3,"file":"tooltip.js","sources":["../../../../../src/components/feedBack/tooltip/tooltip.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren, useCallback, useEffect, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { autoUpdate, flip, offset as offsetMiddleware, shift, useFloating } from \"@floating-ui/react\";\nimport { Placement, resolvePlacement } from \"../../../utils/floating\";\n\nexport type TooltipTrigger = \"hover\" | \"click\" | \"manual\";\n\nexport interface TooltipProps {\n  className?: string;\n  offset?: {\n    offsetX?: number;\n    offsetY?: number;\n  };\n  message: React.ReactNode;\n  placement?: Placement;\n  /** Controls tooltip visibility when trigger is manual. */\n  open?: boolean;\n  /** hover (default): show on pointer enter; click: toggle; manual: use open only. */\n  trigger?: TooltipTrigger;\n  openDelay?: number;\n  closeDelay?: number;\n}\n\ninterface TooltipPopupProps {\n  reference: HTMLElement;\n  placement: Placement;\n  offset: TooltipProps[\"offset\"];\n  className?: string;\n  children: React.ReactNode;\n}\n\n// Floating UI's hooks run layout effects, so they live here and mount only while\n// the tooltip shows: a closed tooltip runs none, on the server included. (Floating\n// UI picks useLayoutEffect when its module loads in a DOM, so a server render in\n// a DOM test environment warned for every closed tooltip.)\nfunction TooltipPopup({ reference, placement, offset, className, children }: TooltipPopupProps) {\n  const resolved = resolvePlacement(placement);\n  const { refs, floatingStyles } = useFloating({\n    elements: { reference },\n    placement: resolved.placement,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      offsetMiddleware({ mainAxis: offset?.offsetY ?? 0, crossAxis: offset?.offsetX ?? 0 }),\n      // A fixed placement turns to the other side, and slides along it, when the\n      // viewport has no room for it.\n      ...(resolved.autoMiddleware ? [resolved.autoMiddleware] : [flip(), shift({ padding: 8 })]),\n    ],\n  });\n  return (\n    <div ref={refs.setFloating} className={cn(\"smwb-tooltip\", className)} style={floatingStyles}>\n      {children}\n    </div>\n  );\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, PropsWithChildren<TooltipProps>>(function Tooltip(\n  {\n    className,\n    children,\n    placement = \"top\",\n    offset = { offsetX: 0, offsetY: 0 },\n    message,\n    open: openProp,\n    trigger = \"hover\",\n    openDelay = 0,\n    closeDelay = 0,\n  },\n  ref\n) {\n  const [reference, setReference] = useState<HTMLDivElement | null>(null);\n  const [hoverOpen, setHoverOpen] = useState(false);\n  const [clickOpen, setClickOpen] = useState(false);\n  const openTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const clearTimers = useCallback(() => {\n    if (openTimerRef.current !== null) {\n      clearTimeout(openTimerRef.current);\n      openTimerRef.current = null;\n    }\n    if (closeTimerRef.current !== null) {\n      clearTimeout(closeTimerRef.current);\n      closeTimerRef.current = null;\n    }\n  }, []);\n\n  useEffect(() => () => clearTimers(), [clearTimers]);\n\n  const scheduleOpen = useCallback(() => {\n    clearTimers();\n    if (openDelay <= 0) {\n      setHoverOpen(true);\n      return;\n    }\n    openTimerRef.current = setTimeout(() => setHoverOpen(true), openDelay);\n  }, [clearTimers, openDelay]);\n\n  const scheduleClose = useCallback(() => {\n    clearTimers();\n    if (closeDelay <= 0) {\n      setHoverOpen(false);\n      return;\n    }\n    closeTimerRef.current = setTimeout(() => setHoverOpen(false), closeDelay);\n  }, [clearTimers, closeDelay]);\n\n  const isVisible = trigger === \"manual\" ? openProp === true : trigger === \"click\" ? clickOpen : hoverOpen;\n\n  const onPointerEnter = trigger === \"hover\" ? scheduleOpen : undefined;\n  const onPointerLeave = trigger === \"hover\" ? scheduleClose : undefined;\n  const onClick =\n    trigger === \"click\"\n      ? () => {\n          setClickOpen((prev) => !prev);\n        }\n      : undefined;\n\n  return (\n    <div className=\"smwb-tooltip__wrapper\" role=\"tooltip\" ref={ref}>\n      <div\n        className=\"smwb-tooltip__ref\"\n        ref={setReference}\n        onPointerEnter={onPointerEnter}\n        onPointerLeave={onPointerLeave}\n        onClick={onClick}\n      >\n        {children}\n      </div>\n      {isVisible && reference ? (\n        <TooltipPopup reference={reference} placement={placement} offset={offset} className={className}>\n          {message}\n        </TooltipPopup>\n      ) : null}\n    </div>\n  );\n});\n\nexport default Tooltip;\n"],"names":["TooltipPopup","reference","placement","offset","className","children","resolved","resolvePlacement","refs","floatingStyles","useFloating","autoUpdate","offsetMiddleware","flip","shift","jsx","cn","Tooltip","forwardRef","message","openProp","trigger","openDelay","closeDelay","ref","setReference","useState","hoverOpen","setHoverOpen","clickOpen","setClickOpen","openTimerRef","useRef","closeTimerRef","clearTimers","useCallback","useEffect","scheduleOpen","scheduleClose","prev"],"mappings":"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"}