@smwb/ui-react 2.6.3 → 2.8.0

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

@@ -1,41 +1,41 @@
-import { jsx as o, Fragment as D } from "react/jsx-runtime";
-import { forwardRef as L, useState as S, useRef as c, useEffect as $ } from "react";
+import { jsx as t, Fragment as D } from "react/jsx-runtime";
+import { forwardRef as L, useState as S, useRef as f, useEffect as $ } from "react";
 import { CSSTransition as h } from "react-transition-group";
 import { createPortal as A } from "react-dom";
 import a from "clsx";
 import { useSafeLayoutEffect as F } from "../../../hooks/useSafeLayoutEffect.js";
 import { useForkRef as M } from "../../../hooks/useForkRef.js";
 import { isTopOverlayLayer as O } from "../../../utils/overlayLayer.js";
-const j = L(function({
+const P = L(function({
   children: e,
   onClose: r,
   open: m,
-  className: f,
-  animation: u = "fade",
-  backdrop: p = "dark",
-  size: i = "large",
-  closeOnOutsideClick: v = !0,
-  asForm: _ = !1,
-  disableAppearAnimation: w = !1,
-  role: b = "dialog",
-  closeOnEsc: d = !0,
-  ...y
-}, k) {
-  const [l, x] = S(), s = c(null), R = c(null), E = M(k, R);
+  className: u,
+  animation: p = "fade",
+  backdrop: v = "dark",
+  size: d = "large",
+  closeOnOutsideClick: _ = !0,
+  asForm: w = !1,
+  disableAppearAnimation: b = !1,
+  role: y = "dialog",
+  closeOnEsc: i = !0,
+  ...k
+}, x) {
+  const [l, R] = S(), s = f(null), E = f(null), N = M(x, E);
   if (F(() => {
-    x(document.body);
+    R(document.body);
   }, []), $(() => {
-    if (!m || !d || !r)
+    if (!m || !i || !r)
       return;
-    const n = (g) => {
-      g.key === "Escape" && O(s.current) && r();
+    const n = (c) => {
+      c.key === "Escape" && !c.defaultPrevented && O(s.current) && r();
     };
     return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
-  }, [m, d, r]), !l)
-    return /* @__PURE__ */ o(D, {});
-  const N = _ ? "form" : "div";
+  }, [m, i, r]), !l)
+    return /* @__PURE__ */ t(D, {});
+  const g = w ? "form" : "div";
   return A(
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ t(
       h,
       {
         timeout: {
@@ -54,26 +54,26 @@ const j = L(function({
           exit: "smwb-modal__overlay-exit",
           exitActive: "smwb-modal__overlay-exit-active"
         },
-        appear: !w,
+        appear: !b,
         mountOnEnter: !0,
         unmountOnExit: !0,
         nodeRef: s,
-        children: /* @__PURE__ */ o(
+        children: /* @__PURE__ */ t(
           "div",
           {
             ref: s,
             "data-smwb-overlay-layer": "",
-            className: a("smwb-modal__overlay", `smwb-${p}`, `smwb-${i}`),
-            onClick: v && r ? r : void 0,
-            children: /* @__PURE__ */ o(
-              N,
+            className: a("smwb-modal__overlay", `smwb-${v}`, `smwb-${d}`),
+            onClick: _ && r ? r : void 0,
+            children: /* @__PURE__ */ t(
+              g,
               {
-                ref: E,
-                className: a("smwb-modal", `smwb-${i}`, `smwb-${u}`, f),
+                ref: N,
+                className: a("smwb-modal", `smwb-${d}`, `smwb-${p}`, u),
                 onClick: (n) => n.stopPropagation(),
-                role: b,
+                role: y,
                 "aria-modal": "true",
-                ...y,
+                ...k,
                 children: e
               }
             )
@@ -84,24 +84,24 @@ const j = L(function({
     l
   );
 });
-function C({ className: t, children: e }) {
-  return /* @__PURE__ */ o("div", { className: a("smwb-modal__header", t), children: e });
+function j({ className: o, children: e }) {
+  return /* @__PURE__ */ t("div", { className: a("smwb-modal__header", o), children: e });
 }
-function P({ className: t, children: e }) {
-  return /* @__PURE__ */ o("div", { className: a("smwb-modal__content", t), children: e });
+function C({ className: o, children: e }) {
+  return /* @__PURE__ */ t("div", { className: a("smwb-modal__content", o), children: e });
 }
-function T({ className: t, children: e }) {
-  return /* @__PURE__ */ o("div", { className: a("smwb-modal__footer", t), children: e });
+function T({ className: o, children: e }) {
+  return /* @__PURE__ */ t("div", { className: a("smwb-modal__footer", o), children: e });
 }
-const U = Object.assign(j, {
+const U = Object.assign(P, {
   Footer: T,
-  Header: C,
-  Content: P
+  Header: j,
+  Content: C
 });
 export {
-  P as Content,
+  C as Content,
   T as Footer,
-  C as Header,
+  j as Header,
   U as Modal,
   U as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../../../src/components/feedBack/modal/modal.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren, useEffect, useRef, useState } from \"react\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { createPortal } from \"react-dom\";\nimport cn from \"clsx\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { isTopOverlayLayer } from \"../../../utils/overlayLayer\";\n\nexport interface ModalProps {\n  size?: \"small\" | \"medium\" | \"large\" | \"fullscreen\";\n  closeOnOutsideClick?: boolean;\n  onClose?: () => void;\n  open: boolean;\n  animation?: \"fade\" | \"scale\" | \"drop\";\n  className?: string;\n  backdrop?: \"blured\" | \"dark\" | \"transparent\" | \"darkBlured\";\n  asForm?: boolean;\n  disableAppearAnimation?: boolean;\n  /** ARIA role of the dialog. */\n  role?: \"dialog\" | \"alertdialog\";\n  /** Close the modal when Escape is pressed. */\n  closeOnEsc?: boolean;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n}\n\nconst ModalBase = forwardRef<HTMLDivElement, PropsWithChildren<ModalProps>>(function Modal(\n  {\n    children,\n    onClose,\n    open,\n    className,\n    animation = \"fade\",\n    backdrop = \"dark\",\n    size = \"large\",\n    closeOnOutsideClick = true,\n    asForm = false,\n    disableAppearAnimation = false,\n    role = \"dialog\",\n    closeOnEsc = true,\n    ...rest\n  },\n  ref\n) {\n  const [domRoot, setDomRoot] = useState<HTMLElement>();\n\n  const nodeRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const forkedContentRef = useForkRef<HTMLDivElement>(ref, contentRef);\n\n  useSafeLayoutEffect(() => {\n    setDomRoot(document.body);\n  }, []);\n\n  useEffect(() => {\n    if (!open || !closeOnEsc || !onClose) {\n      return;\n    }\n    const onKeyDown = (event: KeyboardEvent) => {\n      // Only the topmost overlay layer reacts to Escape.\n      if (event.key === \"Escape\" && isTopOverlayLayer(nodeRef.current)) {\n        onClose();\n      }\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [open, closeOnEsc, onClose]);\n\n  if (!domRoot) {\n    return <></>;\n  }\n\n  const Component = (asForm ? \"form\" : \"div\") as \"div\";\n\n  return createPortal(\n    <CSSTransition\n      timeout={{\n        appear: 225,\n        enter: 225,\n        exit: 150,\n      }}\n      in={open}\n      classNames={{\n        appear: \"smwb-modal__overlay-appear\",\n        appearActive: \"smwb-modal__overlay-appear-active\",\n        appearDone: \"smwb-modal__overlay-appear-done\",\n        enter: \"smwb-modal__overlay-enter\",\n        enterActive: \"smwb-modal__overlay-enter-active\",\n        enterDone: \"smwb-modal__overlay-enter-done\",\n        exit: \"smwb-modal__overlay-exit\",\n        exitActive: \"smwb-modal__overlay-exit-active\",\n      }}\n      appear={!disableAppearAnimation}\n      mountOnEnter\n      unmountOnExit\n      nodeRef={nodeRef}\n    >\n      <div\n        ref={nodeRef}\n        data-smwb-overlay-layer=\"\"\n        className={cn(\"smwb-modal__overlay\", `smwb-${backdrop}`, `smwb-${size}`)}\n        onClick={closeOnOutsideClick && onClose ? onClose : undefined}\n      >\n        <Component\n          ref={forkedContentRef}\n          className={cn(\"smwb-modal\", `smwb-${size}`, `smwb-${animation}`, className)}\n          onClick={(e) => e.stopPropagation()}\n          role={role}\n          aria-modal=\"true\"\n          {...rest}\n        >\n          {children}\n        </Component>\n      </div>\n    </CSSTransition>,\n    domRoot\n  );\n});\n\nexport interface HeaderProps {\n  className?: string;\n}\n\nexport function Header({ className, children }: PropsWithChildren<HeaderProps>) {\n  return <div className={cn(\"smwb-modal__header\", className)}>{children}</div>;\n}\n\nexport interface ContentProps {\n  className?: string;\n}\n\nexport function Content({ className, children }: PropsWithChildren<ContentProps>) {\n  return <div className={cn(\"smwb-modal__content\", className)}>{children}</div>;\n}\n\nexport interface FooterProps {\n  className?: string;\n}\n\nexport function Footer({ className, children }: PropsWithChildren<FooterProps>) {\n  return <div className={cn(\"smwb-modal__footer\", className)}>{children}</div>;\n}\n\nexport const Modal = Object.assign(ModalBase, {\n  Footer,\n  Header,\n  Content,\n});\n\nexport default Modal;\n"],"names":["ModalBase","forwardRef","children","onClose","open","className","animation","backdrop","size","closeOnOutsideClick","asForm","disableAppearAnimation","role","closeOnEsc","rest","ref","domRoot","setDomRoot","useState","nodeRef","useRef","contentRef","forkedContentRef","useForkRef","useSafeLayoutEffect","useEffect","onKeyDown","event","isTopOverlayLayer","jsx","Fragment","Component","createPortal","CSSTransition","cn","e","Header","Content","Footer","Modal"],"mappings":"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"}
+{"version":3,"file":"modal.js","sources":["../../../../../src/components/feedBack/modal/modal.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren, useEffect, useRef, useState } from \"react\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { createPortal } from \"react-dom\";\nimport cn from \"clsx\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { isTopOverlayLayer } from \"../../../utils/overlayLayer\";\n\nexport interface ModalProps {\n  size?: \"small\" | \"medium\" | \"large\" | \"fullscreen\";\n  closeOnOutsideClick?: boolean;\n  onClose?: () => void;\n  open: boolean;\n  animation?: \"fade\" | \"scale\" | \"drop\";\n  className?: string;\n  backdrop?: \"blured\" | \"dark\" | \"transparent\" | \"darkBlured\";\n  asForm?: boolean;\n  disableAppearAnimation?: boolean;\n  /** ARIA role of the dialog. */\n  role?: \"dialog\" | \"alertdialog\";\n  /** Close the modal when Escape is pressed. */\n  closeOnEsc?: boolean;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n}\n\nconst ModalBase = forwardRef<HTMLDivElement, PropsWithChildren<ModalProps>>(function Modal(\n  {\n    children,\n    onClose,\n    open,\n    className,\n    animation = \"fade\",\n    backdrop = \"dark\",\n    size = \"large\",\n    closeOnOutsideClick = true,\n    asForm = false,\n    disableAppearAnimation = false,\n    role = \"dialog\",\n    closeOnEsc = true,\n    ...rest\n  },\n  ref\n) {\n  const [domRoot, setDomRoot] = useState<HTMLElement>();\n\n  const nodeRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const forkedContentRef = useForkRef<HTMLDivElement>(ref, contentRef);\n\n  useSafeLayoutEffect(() => {\n    setDomRoot(document.body);\n  }, []);\n\n  useEffect(() => {\n    if (!open || !closeOnEsc || !onClose) {\n      return;\n    }\n    const onKeyDown = (event: KeyboardEvent) => {\n      // Only the topmost overlay layer reacts to Escape, and not to one handled inside\n      // it, e.g. by a menu closing on it.\n      if (event.key === \"Escape\" && !event.defaultPrevented && isTopOverlayLayer(nodeRef.current)) {\n        onClose();\n      }\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [open, closeOnEsc, onClose]);\n\n  if (!domRoot) {\n    return <></>;\n  }\n\n  const Component = (asForm ? \"form\" : \"div\") as \"div\";\n\n  return createPortal(\n    <CSSTransition\n      timeout={{\n        appear: 225,\n        enter: 225,\n        exit: 150,\n      }}\n      in={open}\n      classNames={{\n        appear: \"smwb-modal__overlay-appear\",\n        appearActive: \"smwb-modal__overlay-appear-active\",\n        appearDone: \"smwb-modal__overlay-appear-done\",\n        enter: \"smwb-modal__overlay-enter\",\n        enterActive: \"smwb-modal__overlay-enter-active\",\n        enterDone: \"smwb-modal__overlay-enter-done\",\n        exit: \"smwb-modal__overlay-exit\",\n        exitActive: \"smwb-modal__overlay-exit-active\",\n      }}\n      appear={!disableAppearAnimation}\n      mountOnEnter\n      unmountOnExit\n      nodeRef={nodeRef}\n    >\n      <div\n        ref={nodeRef}\n        data-smwb-overlay-layer=\"\"\n        className={cn(\"smwb-modal__overlay\", `smwb-${backdrop}`, `smwb-${size}`)}\n        onClick={closeOnOutsideClick && onClose ? onClose : undefined}\n      >\n        <Component\n          ref={forkedContentRef}\n          className={cn(\"smwb-modal\", `smwb-${size}`, `smwb-${animation}`, className)}\n          onClick={(e) => e.stopPropagation()}\n          role={role}\n          aria-modal=\"true\"\n          {...rest}\n        >\n          {children}\n        </Component>\n      </div>\n    </CSSTransition>,\n    domRoot\n  );\n});\n\nexport interface HeaderProps {\n  className?: string;\n}\n\nexport function Header({ className, children }: PropsWithChildren<HeaderProps>) {\n  return <div className={cn(\"smwb-modal__header\", className)}>{children}</div>;\n}\n\nexport interface ContentProps {\n  className?: string;\n}\n\nexport function Content({ className, children }: PropsWithChildren<ContentProps>) {\n  return <div className={cn(\"smwb-modal__content\", className)}>{children}</div>;\n}\n\nexport interface FooterProps {\n  className?: string;\n}\n\nexport function Footer({ className, children }: PropsWithChildren<FooterProps>) {\n  return <div className={cn(\"smwb-modal__footer\", className)}>{children}</div>;\n}\n\nexport const Modal = Object.assign(ModalBase, {\n  Footer,\n  Header,\n  Content,\n});\n\nexport default Modal;\n"],"names":["ModalBase","forwardRef","children","onClose","open","className","animation","backdrop","size","closeOnOutsideClick","asForm","disableAppearAnimation","role","closeOnEsc","rest","ref","domRoot","setDomRoot","useState","nodeRef","useRef","contentRef","forkedContentRef","useForkRef","useSafeLayoutEffect","useEffect","onKeyDown","event","isTopOverlayLayer","jsx","Fragment","Component","createPortal","CSSTransition","cn","e","Header","Content","Footer","Modal"],"mappings":"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"}

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/skeleton/skeleton.js

@@ -1,47 +1,50 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as u } from "react";
-import g from "clsx";
-const d = (e) => typeof e == "number" ? `${e}px` : e, $ = u(function({
-  className: f,
-  variant: k = "text",
-  width: c,
-  height: p,
-  animation: o = "pulse",
-  count: t = 1,
-  animationDelay: r,
-  component: h = "span",
-  style: w,
+import { jsx as p } from "react/jsx-runtime";
+import { forwardRef as S } from "react";
+import $ from "clsx";
+const w = (o) => typeof o == "number" ? `${o}px` : o, z = S(function({
+  className: c,
+  variant: d = "text",
+  width: b,
+  height: _,
+  animation: i = "pulse",
+  count: n = 1,
+  animationDelay: m,
+  component: g = "span",
+  style: e,
+  "data-testid": r,
   ...a
-}, l) {
-  const b = g(
+}, f) {
+  const u = $(
     "smwb-skeleton",
-    `smwb-skeleton_${k}`,
-    o === !1 ? "smwb-skeleton_no-animation" : `smwb-skeleton_${o}`,
-    f
-  ), _ = h, m = (s) => {
-    const n = {
-      ...w,
-      width: d(c),
-      height: d(p),
-      ...r ? { animationDelay: `${s * r}ms` } : {}
+    `smwb-skeleton_${d}`,
+    i === !1 ? "smwb-skeleton_no-animation" : `smwb-skeleton_${i}`,
+    c
+  ), x = g, h = (t) => {
+    var k, l;
+    const s = {
+      ...e,
+      // An unset prop keeps the width or height the caller set in `style`.
+      width: (k = w(b)) != null ? k : e == null ? void 0 : e.width,
+      height: (l = w(_)) != null ? l : e == null ? void 0 : e.height,
+      ...m ? { animationDelay: `${t * m}ms` } : {}
     };
-    return /* @__PURE__ */ i(
-      _,
+    return /* @__PURE__ */ p(
+      x,
       {
-        ref: t === 1 ? l : void 0,
-        ...t === 1 ? a : {},
-        "data-testid": "skeleton",
+        ref: n === 1 ? f : void 0,
+        ...n === 1 ? a : {},
+        "data-testid": n === 1 && r != null ? r : "skeleton",
         "aria-hidden": "true",
-        className: b,
-        style: n
+        className: u,
+        style: s
       },
-      s
+      t
     );
   };
-  return t === 1 ? m(0) : /* @__PURE__ */ i("span", { ref: l, ...a, className: "smwb-skeleton__group", "aria-hidden": "true", children: Array.from({ length: t }, (s, n) => m(n)) });
+  return n === 1 ? h(0) : /* @__PURE__ */ p("span", { ref: f, ...a, "data-testid": r, className: "smwb-skeleton__group", "aria-hidden": "true", children: Array.from({ length: n }, (t, s) => h(s)) });
 });
 export {
-  $ as Skeleton,
-  $ as default
+  z as Skeleton,
+  z as default
 };
 //# sourceMappingURL=skeleton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","sources":["../../../../../src/components/feedBack/skeleton/skeleton.tsx"],"sourcesContent":["import { CSSProperties, forwardRef, HTMLAttributes } from \"react\";\nimport cn from \"clsx\";\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLElement> {\n  className?: string;\n  /** Shape of the placeholder. */\n  variant?: \"text\" | \"circular\" | \"rounded\" | \"rectangular\";\n  /** Width — number (px) or any CSS length. */\n  width?: number | string;\n  /** Height — number (px) or any CSS length. */\n  height?: number | string;\n  /** Shimmer animation; pass false to disable. */\n  animation?: \"pulse\" | \"wave\" | false;\n  /** Render N stacked placeholders. */\n  count?: number;\n  /** Stagger consecutive items by N ms (with `count`). */\n  animationDelay?: number;\n  /** Root element. */\n  component?: \"span\" | \"div\";\n}\n\nconst toCssSize = (value?: number | string): string | undefined => (typeof value === \"number\" ? `${value}px` : value);\n\nexport const Skeleton = forwardRef<HTMLElement, SkeletonProps>(function Skeleton(\n  {\n    className,\n    variant = \"text\",\n    width,\n    height,\n    animation = \"pulse\",\n    count = 1,\n    animationDelay,\n    component = \"span\",\n    style,\n    ...props\n  },\n  ref\n) {\n  const skeletonClassName = cn(\n    \"smwb-skeleton\",\n    `smwb-skeleton_${variant}`,\n    animation === false ? \"smwb-skeleton_no-animation\" : `smwb-skeleton_${animation}`,\n    className\n  );\n\n  const Tag = component as \"span\";\n\n  const renderOne = (i: number) => {\n    const inlineStyle: CSSProperties = {\n      ...style,\n      width: toCssSize(width),\n      height: toCssSize(height),\n      ...(animationDelay ? { animationDelay: `${i * animationDelay}ms` } : {}),\n    };\n    return (\n      <Tag\n        key={i}\n        ref={count === 1 ? ref : undefined}\n        {...(count === 1 ? props : {})}\n        data-testid=\"skeleton\"\n        aria-hidden=\"true\"\n        className={skeletonClassName}\n        style={inlineStyle}\n      />\n    );\n  };\n\n  if (count === 1) {\n    return renderOne(0);\n  }\n\n  return (\n    <span ref={ref} {...props} className=\"smwb-skeleton__group\" aria-hidden=\"true\">\n      {Array.from({ length: count }, (_, i) => renderOne(i))}\n    </span>\n  );\n});\n\nexport default Skeleton;\n"],"names":["toCssSize","value","Skeleton","forwardRef","className","variant","width","height","animation","count","animationDelay","component","style","props","ref","skeletonClassName","cn","Tag","renderOne","i","inlineStyle","jsx","_"],"mappings":";;;AAqBA,MAAMA,IAAY,CAACC,MAAiD,OAAOA,KAAU,WAAW,GAAGA,CAAK,OAAOA,GAElGC,IAAWC,EAAuC,SAC7D;AAAA,EACE,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,gBAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAoBC;AAAA,IACxB;AAAA,IACA,iBAAiBX,CAAO;AAAA,IACxBG,MAAc,KAAQ,+BAA+B,iBAAiBA,CAAS;AAAA,IAC/EJ;AAAA,EAAA,GAGIa,IAAMN,GAENO,IAAY,CAACC,MAAc;AAC/B,UAAMC,IAA6B;AAAA,MACjC,GAAGR;AAAA,MACH,OAAOZ,EAAUM,CAAK;AAAA,MACtB,QAAQN,EAAUO,CAAM;AAAA,MACxB,GAAIG,IAAiB,EAAE,gBAAgB,GAAGS,IAAIT,CAAc,SAAS,CAAA;AAAA,IAAC;AAExE,WACE,gBAAAW;AAAA,MAACJ;AAAA,MAAA;AAAA,QAEC,KAAKR,MAAU,IAAIK,IAAM;AAAA,QACxB,GAAIL,MAAU,IAAII,IAAQ,CAAA;AAAA,QAC3B,eAAY;AAAA,QACZ,eAAY;AAAA,QACZ,WAAWE;AAAA,QACX,OAAOK;AAAA,MAAA;AAAA,MANFD;AAAA,IAAA;AAAA,EASX;AAEA,SAAIV,MAAU,IACLS,EAAU,CAAC,IAIlB,gBAAAG,EAAC,UAAK,KAAAP,GAAW,GAAGD,GAAO,WAAU,wBAAuB,eAAY,QACrE,UAAA,MAAM,KAAK,EAAE,QAAQJ,KAAS,CAACa,GAAGH,MAAMD,EAAUC,CAAC,CAAC,GACvD;AAEJ,CAAC;"}
+{"version":3,"file":"skeleton.js","sources":["../../../../../src/components/feedBack/skeleton/skeleton.tsx"],"sourcesContent":["import { CSSProperties, forwardRef, HTMLAttributes } from \"react\";\nimport cn from \"clsx\";\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLElement> {\n  className?: string;\n  /** Shape of the placeholder. */\n  variant?: \"text\" | \"circular\" | \"rounded\" | \"rectangular\";\n  /** Width — number (px) or any CSS length. */\n  width?: number | string;\n  /** Height — number (px) or any CSS length. */\n  height?: number | string;\n  /** Shimmer animation; pass false to disable. */\n  animation?: \"pulse\" | \"wave\" | false;\n  /**\n   * Render N stacked placeholders. With `count` > 1 they sit in a group `<span>`, which takes the `ref` and the\n   * other HTML attributes; `className` and `style` go on each placeholder.\n   */\n  count?: number;\n  /** Stagger consecutive items by N ms (with `count`). */\n  animationDelay?: number;\n  /** Element of each placeholder. */\n  component?: \"span\" | \"div\";\n  /**\n   * Test id of the placeholder; `skeleton` unless given. With `count` > 1 it\n   * marks the group, and each placeholder keeps `skeleton`.\n   */\n  \"data-testid\"?: string;\n}\n\nconst toCssSize = (value?: number | string): string | undefined => (typeof value === \"number\" ? `${value}px` : value);\n\nexport const Skeleton = forwardRef<HTMLElement, SkeletonProps>(function Skeleton(\n  {\n    className,\n    variant = \"text\",\n    width,\n    height,\n    animation = \"pulse\",\n    count = 1,\n    animationDelay,\n    component = \"span\",\n    style,\n    \"data-testid\": dataTestId,\n    ...props\n  },\n  ref\n) {\n  const skeletonClassName = cn(\n    \"smwb-skeleton\",\n    `smwb-skeleton_${variant}`,\n    animation === false ? \"smwb-skeleton_no-animation\" : `smwb-skeleton_${animation}`,\n    className\n  );\n\n  const Tag = component as \"span\";\n\n  const renderOne = (i: number) => {\n    const inlineStyle: CSSProperties = {\n      ...style,\n      // An unset prop keeps the width or height the caller set in `style`.\n      width: toCssSize(width) ?? style?.width,\n      height: toCssSize(height) ?? style?.height,\n      ...(animationDelay ? { animationDelay: `${i * animationDelay}ms` } : {}),\n    };\n    return (\n      <Tag\n        key={i}\n        ref={count === 1 ? ref : undefined}\n        {...(count === 1 ? props : {})}\n        data-testid={count === 1 ? (dataTestId ?? \"skeleton\") : \"skeleton\"}\n        aria-hidden=\"true\"\n        className={skeletonClassName}\n        style={inlineStyle}\n      />\n    );\n  };\n\n  if (count === 1) {\n    return renderOne(0);\n  }\n\n  return (\n    <span ref={ref} {...props} data-testid={dataTestId} className=\"smwb-skeleton__group\" aria-hidden=\"true\">\n      {Array.from({ length: count }, (_, i) => renderOne(i))}\n    </span>\n  );\n});\n\nexport default Skeleton;\n"],"names":["toCssSize","value","Skeleton","forwardRef","className","variant","width","height","animation","count","animationDelay","component","style","dataTestId","props","ref","skeletonClassName","cn","Tag","renderOne","i","inlineStyle","_a","_b","jsx","_"],"mappings":";;;AA6BA,MAAMA,IAAY,CAACC,MAAiD,OAAOA,KAAU,WAAW,GAAGA,CAAK,OAAOA,GAElGC,IAAWC,EAAuC,SAC7D;AAAA,EACE,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,gBAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,eAAeC;AAAA,EACf,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAoBC;AAAA,IACxB;AAAA,IACA,iBAAiBZ,CAAO;AAAA,IACxBG,MAAc,KAAQ,+BAA+B,iBAAiBA,CAAS;AAAA,IAC/EJ;AAAA,EAAA,GAGIc,IAAMP,GAENQ,IAAY,CAACC,MAAc;;AAC/B,UAAMC,IAA6B;AAAA,MACjC,GAAGT;AAAA;AAAA,MAEH,QAAOU,IAAAtB,EAAUM,CAAK,MAAf,OAAAgB,IAAoBV,KAAA,gBAAAA,EAAO;AAAA,MAClC,SAAQW,IAAAvB,EAAUO,CAAM,MAAhB,OAAAgB,IAAqBX,KAAA,gBAAAA,EAAO;AAAA,MACpC,GAAIF,IAAiB,EAAE,gBAAgB,GAAGU,IAAIV,CAAc,SAAS,CAAA;AAAA,IAAC;AAExE,WACE,gBAAAc;AAAA,MAACN;AAAA,MAAA;AAAA,QAEC,KAAKT,MAAU,IAAIM,IAAM;AAAA,QACxB,GAAIN,MAAU,IAAIK,IAAQ,CAAA;AAAA,QAC3B,eAAaL,MAAU,KAAKI,KAAA,OAAAA,IAA4B;AAAA,QACxD,eAAY;AAAA,QACZ,WAAWG;AAAA,QACX,OAAOK;AAAA,MAAA;AAAA,MANFD;AAAA,IAAA;AAAA,EASX;AAEA,SAAIX,MAAU,IACLU,EAAU,CAAC,IAIlB,gBAAAK,EAAC,UAAK,KAAAT,GAAW,GAAGD,GAAO,eAAaD,GAAY,WAAU,wBAAuB,eAAY,QAC9F,gBAAM,KAAK,EAAE,QAAQJ,EAAA,GAAS,CAACgB,GAAGL,MAAMD,EAAUC,CAAC,CAAC,EAAA,CACvD;AAEJ,CAAC;"}