@smwb/ui-react 2.6.3 → 2.7.0

package/dist/components/feedBack/emptyState/emptyState.d.ts

@@ -0,0 +1,26 @@
+import React, { HTMLAttributes, ReactNode } from "react";
+export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    className?: string;
+    /** What is empty, e.g. "No works yet". */
+    title?: ReactNode;
+    /** An icon name, or an icon element. Decorative: the title and the message say it all. */
+    icon?: ReactNode | string;
+    /** What the reader can do about it: buttons or links. */
+    actions?: ReactNode;
+    /**
+     * `block` (default): centred, for an empty page, panel or card.
+     * `inline`: a muted line of text, for a list, a table or a column that came
+     * out empty; an action follows the last word.
+     */
+    variant?: "block" | "inline";
+    /** `small`: tighter, for a narrow column or a card. */
+    size?: "small" | "medium";
+}
+/**
+ * What a list, a table or a panel shows when it has nothing: an icon, a title,
+ * the message (the children) and actions.
+ */
+export declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & {
+    children?: ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default EmptyState;

package/dist/components/feedBack/emptyState/emptyState.js

@@ -0,0 +1,27 @@
+import { jsxs as c, jsx as m } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/emptyState/emptyState.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                               */
+import y from "react";
+import _ from "clsx";
+import { Icon as b } from "../../base/icon/icon.js";
+const f = { block: { medium: 32, small: 24 }, inline: { medium: 18, small: 16 } }, e = (t) => t != null && t !== !1 && t !== "" && !(Array.isArray(t) && t.length === 0), I = y.forwardRef(function({ className: p, title: a, icon: s, actions: r, variant: i = "block", size: l = "medium", children: n, ...o }, d) {
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      "data-testid": "empty-state",
+      ...o,
+      ref: d,
+      className: _("smwb-empty-state", `smwb-empty-state_${i}`, `smwb-empty-state_${l}`, p),
+      children: [
+        e(s) ? /* @__PURE__ */ m("span", { className: "smwb-empty-state__icon", "aria-hidden": "true", children: typeof s == "string" ? /* @__PURE__ */ m(b, { name: s, size: f[i][l] }) : s }) : null,
+        e(a) ? /* @__PURE__ */ m("div", { className: "smwb-empty-state__title", children: a }) : null,
+        e(n) ? /* @__PURE__ */ m("div", { className: "smwb-empty-state__description", children: n }) : null,
+        e(r) ? /* @__PURE__ */ m("div", { className: "smwb-empty-state__actions", children: r }) : null
+      ]
+    }
+  );
+});
+export {
+  I as EmptyState
+};
+//# sourceMappingURL=emptyState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"emptyState.js","sources":["../../../../src/components/feedBack/emptyState/emptyState.tsx"],"sourcesContent":["import React, { HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  className?: string;\n  /** What is empty, e.g. \"No works yet\". */\n  title?: ReactNode;\n  /** An icon name, or an icon element. Decorative: the title and the message say it all. */\n  icon?: ReactNode | string;\n  /** What the reader can do about it: buttons or links. */\n  actions?: ReactNode;\n  /**\n   * `block` (default): centred, for an empty page, panel or card.\n   * `inline`: a muted line of text, for a list, a table or a column that came\n   * out empty; an action follows the last word.\n   */\n  variant?: \"block\" | \"inline\";\n  /** `small`: tighter, for a narrow column or a card. */\n  size?: \"small\" | \"medium\";\n}\n\nconst ICON_SIZE = { block: { medium: 32, small: 24 }, inline: { medium: 18, small: 16 } } as const;\n\nconst present = (value: ReactNode): boolean =>\n  value !== undefined &&\n  value !== null &&\n  value !== false &&\n  value !== \"\" &&\n  !(Array.isArray(value) && value.length === 0);\n\n/**\n * What a list, a table or a panel shows when it has nothing: an icon, a title,\n * the message (the children) and actions.\n */\nexport const EmptyState = React.forwardRef<HTMLDivElement, PropsWithChildren<EmptyStateProps>>(function EmptyState(\n  { className, title, icon, actions, variant = \"block\", size = \"medium\", children, ...rest },\n  ref\n) {\n  return (\n    <div\n      data-testid=\"empty-state\"\n      {...rest}\n      ref={ref}\n      className={cn(\"smwb-empty-state\", `smwb-empty-state_${variant}`, `smwb-empty-state_${size}`, className)}\n    >\n      {present(icon) ? (\n        <span className=\"smwb-empty-state__icon\" aria-hidden=\"true\">\n          {typeof icon === \"string\" ? <Icon name={icon} size={ICON_SIZE[variant][size]} /> : icon}\n        </span>\n      ) : null}\n      {present(title) ? <div className=\"smwb-empty-state__title\">{title}</div> : null}\n      {present(children) ? <div className=\"smwb-empty-state__description\">{children}</div> : null}\n      {present(actions) ? <div className=\"smwb-empty-state__actions\">{actions}</div> : null}\n    </div>\n  );\n});\n\nexport default EmptyState;\n"],"names":["ICON_SIZE","present","value","EmptyState","React","className","title","icon","actions","variant","size","children","rest","ref","jsxs","cn","jsx","Icon"],"mappings":";;;;;;AAwBA,MAAMA,IAAY,EAAE,OAAO,EAAE,QAAQ,IAAI,OAAO,MAAM,QAAQ,EAAE,QAAQ,IAAI,OAAO,KAAG,GAEhFC,IAAU,CAACC,MAEfA,KAAU,QACVA,MAAU,MACVA,MAAU,MACV,EAAE,MAAM,QAAQA,CAAK,KAAKA,EAAM,WAAW,IAMhCC,IAAaC,EAAM,WAA+D,SAC7F,EAAE,WAAAC,GAAW,OAAAC,GAAO,MAAAC,GAAM,SAAAC,GAAS,SAAAC,IAAU,SAAS,MAAAC,IAAO,UAAU,UAAAC,GAAU,GAAGC,EAAA,GACpFC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACX,GAAGF;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAG,oBAAoB,oBAAoBN,CAAO,IAAI,oBAAoBC,CAAI,IAAIL,CAAS;AAAA,MAErG,UAAA;AAAA,QAAAJ,EAAQM,CAAI,IACX,gBAAAS,EAAC,QAAA,EAAK,WAAU,0BAAyB,eAAY,QAClD,UAAA,OAAOT,KAAS,6BAAYU,GAAA,EAAK,MAAMV,GAAM,MAAMP,EAAUS,CAAO,EAAEC,CAAI,EAAA,CAAG,IAAKH,EAAA,CACrF,IACE;AAAA,QACHN,EAAQK,CAAK,IAAI,gBAAAU,EAAC,SAAI,WAAU,2BAA2B,aAAM,IAAS;AAAA,QAC1Ef,EAAQU,CAAQ,IAAI,gBAAAK,EAAC,SAAI,WAAU,iCAAiC,UAAAL,GAAS,IAAS;AAAA,QACtFV,EAAQO,CAAO,IAAI,gBAAAQ,EAAC,SAAI,WAAU,6BAA6B,aAAQ,IAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvF,CAAC;"}

package/dist/components/feedBack/emptyState/index.d.ts

@@ -0,0 +1,2 @@
+export { EmptyState, default } from "./emptyState";
+export type { EmptyStateProps } from "./emptyState";

package/dist/components/feedBack/message/message.js

@@ -1,11 +1,12 @@
 import { jsxs as g, jsx as o } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/message/message.entry.css';/* empty css                                                         */
+import '../../../assets/styles/less/components/message/message.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                         */
 import { forwardRef as b } from "react";
-import f from "clsx";
-import { Icon as p } from "../../base/icon/icon.js";
+import p from "clsx";
+import { Icon as f } from "../../base/icon/icon.js";
 const w = b(
   ({ className: e, children: m, type: t, severity: s, variant: l = "filled", onClose: r, closeAriaLabel: n = "Close", ...i }, c) => {
-    const a = s != null ? s : t, d = f("smwb-message", `smwb-message_${l}`, e, {
+    const a = s != null ? s : t, d = p("smwb-message", `smwb-message_${l}`, e, {
       [`smwb-message_${a}`]: !!a
     });
     return /* @__PURE__ */ g(
@@ -19,14 +20,14 @@ const w = b(
         ref: c,
         children: [
           m,
-          r && /* @__PURE__ */ o("button", { className: "smwb-message__close-btn", onClick: r, "aria-label": n, type: "button", children: /* @__PURE__ */ o(p, { name: "close", weight: 1e3 }) })
+          r && /* @__PURE__ */ o("button", { className: "smwb-message__close-btn", onClick: r, "aria-label": n, type: "button", children: /* @__PURE__ */ o(f, { name: "close", weight: 1e3 }) })
         ]
       }
     );
   }
-), _ = ({ children: e }) => /* @__PURE__ */ o("div", { className: "smwb-message__header", children: e }), N = Object.assign(w, { Header: _ });
+), _ = ({ children: e }) => /* @__PURE__ */ o("div", { className: "smwb-message__header", children: e }), v = Object.assign(w, { Header: _ });
 export {
   w as MessageContainer,
-  N as default
+  v as default
 };
 //# sourceMappingURL=message.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"message.js","sources":["../../../../src/components/feedBack/message/message.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport type MessageSeverity = \"success\" | \"error\" | \"warning\" | \"info\";\n\nexport interface MessageProps extends React.HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  variant?: \"outlined\" | \"filled\" | \"left-accent\";\n  onClose?: () => void; // или с событием, если нужно\n  /** @deprecated use `severity`. */\n  type?: MessageSeverity;\n  /** Semantic severity of the message. */\n  severity?: MessageSeverity;\n  /** Accessible label for the close button. */\n  closeAriaLabel?: string;\n}\n\nexport const MessageContainer = forwardRef<HTMLDivElement, PropsWithChildren<MessageProps>>(\n  ({ className, children, type, severity, variant = \"filled\", onClose, closeAriaLabel = \"Close\", ...props }, ref) => {\n    const resolvedSeverity = severity ?? type;\n    const messageClassnames = cn(\"smwb-message\", `smwb-message_${variant}`, className, {\n      [`smwb-message_${resolvedSeverity}`]: Boolean(resolvedSeverity),\n    });\n\n    return (\n      <div\n        data-testid=\"message\"\n        role=\"alert\"\n        aria-live={resolvedSeverity === \"error\" ? \"assertive\" : \"polite\"}\n        {...props}\n        className={messageClassnames}\n        ref={ref}\n      >\n        {children}\n        {onClose && (\n          <button className=\"smwb-message__close-btn\" onClick={onClose} aria-label={closeAriaLabel} type=\"button\">\n            <Icon name=\"close\" weight={1000} />\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n\nconst Header = ({ children }: PropsWithChildren) => {\n  return <div className=\"smwb-message__header\">{children}</div>;\n};\n\nconst Message = Object.assign(MessageContainer, { Header });\n\nexport default Message;\n"],"names":["MessageContainer","forwardRef","className","children","type","severity","variant","onClose","closeAriaLabel","props","ref","resolvedSeverity","messageClassnames","cn","jsxs","jsx","Icon","Header","Message"],"mappings":";;;;;AAmBO,MAAMA,IAAmBC;AAAA,EAC9B,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,MAAAC,GAAM,UAAAC,GAAU,SAAAC,IAAU,UAAU,SAAAC,GAAS,gBAAAC,IAAiB,SAAS,GAAGC,EAAA,GAASC,MAAQ;AACjH,UAAMC,IAAmBN,KAAA,OAAAA,IAAYD,GAC/BQ,IAAoBC,EAAG,gBAAgB,gBAAgBP,CAAO,IAAIJ,GAAW;AAAA,MACjF,CAAC,gBAAgBS,CAAgB,EAAE,GAAG,EAAQA;AAAA,IAAgB,CAC/D;AAED,WACE,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,MAAK;AAAA,QACL,aAAWH,MAAqB,UAAU,cAAc;AAAA,QACvD,GAAGF;AAAA,QACJ,WAAWG;AAAA,QACX,KAAAF;AAAA,QAEC,UAAA;AAAA,UAAAP;AAAA,UACAI,KACC,gBAAAQ,EAAC,UAAA,EAAO,WAAU,2BAA0B,SAASR,GAAS,cAAYC,GAAgB,MAAK,UAC7F,UAAA,gBAAAO,EAACC,GAAA,EAAK,MAAK,SAAQ,QAAQ,KAAM,EAAA,CACnC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF,GAEMC,IAAS,CAAC,EAAE,UAAAd,QACT,gBAAAY,EAAC,OAAA,EAAI,WAAU,wBAAwB,UAAAZ,EAAA,CAAS,GAGnDe,IAAU,OAAO,OAAOlB,GAAkB,EAAE,QAAAiB,GAAQ;"}
+{"version":3,"file":"message.js","sources":["../../../../src/components/feedBack/message/message.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport type MessageSeverity = \"success\" | \"error\" | \"warning\" | \"info\";\n\nexport interface MessageProps extends React.HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  variant?: \"outlined\" | \"filled\" | \"left-accent\";\n  onClose?: () => void; // или с событием, если нужно\n  /** @deprecated use `severity`. */\n  type?: MessageSeverity;\n  /** Semantic severity of the message. */\n  severity?: MessageSeverity;\n  /** Accessible label for the close button. */\n  closeAriaLabel?: string;\n}\n\nexport const MessageContainer = forwardRef<HTMLDivElement, PropsWithChildren<MessageProps>>(\n  ({ className, children, type, severity, variant = \"filled\", onClose, closeAriaLabel = \"Close\", ...props }, ref) => {\n    const resolvedSeverity = severity ?? type;\n    const messageClassnames = cn(\"smwb-message\", `smwb-message_${variant}`, className, {\n      [`smwb-message_${resolvedSeverity}`]: Boolean(resolvedSeverity),\n    });\n\n    return (\n      <div\n        data-testid=\"message\"\n        role=\"alert\"\n        aria-live={resolvedSeverity === \"error\" ? \"assertive\" : \"polite\"}\n        {...props}\n        className={messageClassnames}\n        ref={ref}\n      >\n        {children}\n        {onClose && (\n          <button className=\"smwb-message__close-btn\" onClick={onClose} aria-label={closeAriaLabel} type=\"button\">\n            <Icon name=\"close\" weight={1000} />\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n\nconst Header = ({ children }: PropsWithChildren) => {\n  return <div className=\"smwb-message__header\">{children}</div>;\n};\n\nconst Message = Object.assign(MessageContainer, { Header });\n\nexport default Message;\n"],"names":["MessageContainer","forwardRef","className","children","type","severity","variant","onClose","closeAriaLabel","props","ref","resolvedSeverity","messageClassnames","cn","jsxs","jsx","Icon","Header","Message"],"mappings":";;;;;;AAoBO,MAAMA,IAAmBC;AAAA,EAC9B,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,MAAAC,GAAM,UAAAC,GAAU,SAAAC,IAAU,UAAU,SAAAC,GAAS,gBAAAC,IAAiB,SAAS,GAAGC,EAAA,GAASC,MAAQ;AACjH,UAAMC,IAAmBN,KAAA,OAAAA,IAAYD,GAC/BQ,IAAoBC,EAAG,gBAAgB,gBAAgBP,CAAO,IAAIJ,GAAW;AAAA,MACjF,CAAC,gBAAgBS,CAAgB,EAAE,GAAG,EAAQA;AAAA,IAAgB,CAC/D;AAED,WACE,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,MAAK;AAAA,QACL,aAAWH,MAAqB,UAAU,cAAc;AAAA,QACvD,GAAGF;AAAA,QACJ,WAAWG;AAAA,QACX,KAAAF;AAAA,QAEC,UAAA;AAAA,UAAAP;AAAA,UACAI,KACC,gBAAAQ,EAAC,UAAA,EAAO,WAAU,2BAA0B,SAASR,GAAS,cAAYC,GAAgB,MAAK,UAC7F,UAAA,gBAAAO,EAACC,GAAA,EAAK,MAAK,SAAQ,QAAQ,KAAM,EAAA,CACnC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF,GAEMC,IAAS,CAAC,EAAE,UAAAd,QACT,gBAAAY,EAAC,OAAA,EAAI,WAAU,wBAAwB,UAAAZ,EAAA,CAAS,GAGnDe,IAAU,OAAO,OAAOlB,GAAkB,EAAE,QAAAiB,GAAQ;"}

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

@@ -1,5 +1,6 @@
 import { jsx as o, Fragment as D } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/modal/modal.entry.css';/* empty css                                                     */
+import '../../../assets/styles/less/components/modal/modal.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                     */
 import { forwardRef as L, useState as S, useRef as c, useEffect as $ } from "react";
 import { CSSTransition as h } from "react-transition-group";
 import { createPortal as A } from "react-dom";
@@ -94,7 +95,7 @@ function P({ className: t, children: e }) {
 function T({ className: t, children: e }) {
   return /* @__PURE__ */ o("div", { className: a("smwb-modal__footer", t), children: e });
 }
-const V = Object.assign(j, {
+const W = Object.assign(j, {
   Footer: T,
   Header: C,
   Content: P
@@ -103,7 +104,7 @@ export {
   P as Content,
   T as Footer,
   C as Header,
-  V as Modal,
-  V as default
+  W as Modal,
+  W as default
 };
 //# sourceMappingURL=modal.js.map

package/dist/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":";;;;;;;;;AA4BA,MAAMA,IAAYC,EAA0D,SAC1E;AAAA,EACE,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,qBAAAC,IAAsB;AAAA,EACtB,QAAAC,IAAS;AAAA,EACT,wBAAAC,IAAyB;AAAA,EACzB,MAAAC,IAAO;AAAA,EACP,YAAAC,IAAa;AAAA,EACb,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAA,GAExBC,IAAUC,EAAuB,IAAI,GACrCC,IAAaD,EAAuB,IAAI,GACxCE,IAAmBC,EAA2BR,GAAKM,CAAU;AAqBnE,MAnBAG,EAAoB,MAAM;AACxB,IAAAP,EAAW,SAAS,IAAI;AAAA,EAC1B,GAAG,CAAA,CAAE,GAELQ,EAAU,MAAM;AACd,QAAI,CAACrB,KAAQ,CAACS,KAAc,CAACV;AAC3B;AAEF,UAAMuB,IAAY,CAACC,MAAyB;AAE1C,MAAIA,EAAM,QAAQ,YAAYC,EAAkBT,EAAQ,OAAO,KAC7DhB,EAAA;AAAA,IAEJ;AACA,oBAAS,iBAAiB,WAAWuB,CAAS,GAEvC,MAAM,SAAS,oBAAoB,WAAWA,CAAS;AAAA,EAChE,GAAG,CAACtB,GAAMS,GAAYV,CAAO,CAAC,GAE1B,CAACa;AACH,WAAO,gBAAAa,EAAAC,GAAA,EAAE;AAGX,QAAMC,IAAarB,IAAS,SAAS;AAErC,SAAOsB;AAAA,IACL,gBAAAH;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,UACP,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,MAAM;AAAA,QAAA;AAAA,QAER,IAAI7B;AAAA,QACJ,YAAY;AAAA,UACV,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,YAAY;AAAA,UACZ,OAAO;AAAA,UACP,aAAa;AAAA,UACb,WAAW;AAAA,UACX,MAAM;AAAA,UACN,YAAY;AAAA,QAAA;AAAA,QAEd,QAAQ,CAACO;AAAA,QACT,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,SAAAQ;AAAA,QAEA,UAAA,gBAAAU;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKV;AAAA,YACL,2BAAwB;AAAA,YACxB,WAAWe,EAAG,uBAAuB,QAAQ3B,CAAQ,IAAI,QAAQC,CAAI,EAAE;AAAA,YACvE,SAASC,KAAuBN,IAAUA,IAAU;AAAA,YAEpD,UAAA,gBAAA0B;AAAA,cAACE;AAAA,cAAA;AAAA,gBACC,KAAKT;AAAA,gBACL,WAAWY,EAAG,cAAc,QAAQ1B,CAAI,IAAI,QAAQF,CAAS,IAAID,CAAS;AAAA,gBAC1E,SAAS,CAAC8B,MAAMA,EAAE,gBAAA;AAAA,gBAClB,MAAAvB;AAAA,gBACA,cAAW;AAAA,gBACV,GAAGE;AAAA,gBAEH,UAAAZ;AAAA,cAAA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,IAEFc;AAAA,EAAA;AAEJ,CAAC;AAMM,SAASoB,EAAO,EAAE,WAAA/B,GAAW,UAAAH,KAA4C;AAC9E,2BAAQ,OAAA,EAAI,WAAWgC,EAAG,sBAAsB7B,CAAS,GAAI,UAAAH,GAAS;AACxE;AAMO,SAASmC,EAAQ,EAAE,WAAAhC,GAAW,UAAAH,KAA6C;AAChF,2BAAQ,OAAA,EAAI,WAAWgC,EAAG,uBAAuB7B,CAAS,GAAI,UAAAH,GAAS;AACzE;AAMO,SAASoC,EAAO,EAAE,WAAAjC,GAAW,UAAAH,KAA4C;AAC9E,2BAAQ,OAAA,EAAI,WAAWgC,EAAG,sBAAsB7B,CAAS,GAAI,UAAAH,GAAS;AACxE;AAEO,MAAMqC,IAAQ,OAAO,OAAOvC,GAAW;AAAA,EAC5C,QAAAsC;AAAA,EACA,QAAAF;AAAA,EACA,SAAAC;AACF,CAAC;"}
+{"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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"}

package/dist/components/feedBack/progressIndicator/progressIndicator.d.ts

@@ -1,20 +1,33 @@
-import React from "react";
+import React, { type ReactNode } from "react";
 export type ProgressColor = "primary" | "secondary" | "error" | "success" | "warning" | "info";
 export interface ProgressIndicatorProps {
     className?: string;
     variant: "circular" | "linear";
     type: "determinate" | "indeterminate";
     progressValue?: number;
+    /** Upper bound of `progressValue` (100 by default): with `max={14}`, `progressValue={3}` is 3 of 14. */
+    max?: number;
     /** Semantic color. */
     color?: ProgressColor;
     /** Circular size preset. */
     size?: "small" | "medium" | "large";
+    /** Linear: fill the container's width instead of the fixed 240px track. */
+    fullWidth?: boolean;
+    /** Linear: the width, in px or any CSS length. */
+    width?: number | string;
+    /**
+     * Linear, determinate: the value as text beside the bar. `true` shows a
+     * percentage — or "3 / 14" with a custom `max`; a function formats it, e.g.
+     * `(value, max) => <>{value} of {max}</>`.
+     */
+    valueLabel?: boolean | ((value: number, max: number) => ReactNode);
     /** Accessible name for the progress bar. */
     "aria-label"?: string;
     id?: string;
 }
 export declare const ProgressIndicator: React.ForwardRefExoticComponent<ProgressIndicatorProps & React.RefAttributes<HTMLDivElement>>;
 export interface CircularProgressProps {
+    /** Percent, 0–100. */
     progressValue?: number;
 }
 export declare function CircularProgress({ progressValue }: CircularProgressProps): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/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":";;;;AAoBO,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":";;;;;AAiCO,MAAMA,IAAoBC,EAAmD,SAClF;AAAA,EACE,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,KAAAC,IAAM;AAAA,EACN,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,IAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAY;AAAA,IAChB,MAAM;AAAA,IACN,cAAcF,EAAK,YAAY;AAAA,IAC/B,IAAAD;AAAA,IACA,GAAIV,MAAS,gBAAgB,EAAE,iBAAiBG,GAAe,iBAAiB,GAAG,iBAAiBC,MAAQ,CAAA;AAAA,EAAC,GAEzGU,IAAaT,MAAU,YAAY,wBAAwBA,CAAK,KAAK,MACrEU,IAAU,KAAK,IAAI,KAAK,KAAK,IAAI,GAAGX,IAAM,IAAKD,IAAgBC,IAAO,MAAM,CAAC,CAAC;AAEpF,MAAIH,MAAY;AACd,WACE,gBAAAe;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAJ;AAAA,QACA,WAAWK,EAAG,2BAA2B,QAAQjB,CAAI,IAAIc,GAAY,uBAAuBR,CAAI,IAAIJ,CAAS;AAAA,QAC5G,GAAGW;AAAA,QAEH,gBAAS,gBACR,gBAAAG,EAACE,KAAiB,eAAeH,EAAA,CAAS,IAE1C,gBAAAI,EAAAC,GAAA,EACE,UAAA;AAAA,UAAA,gBAAAJ,EAAC,OAAA,EAAI,WAAU,iCAAA,CAAiC;AAAA,4BAC/C,OAAA,EAAI;AAAA,4BACJ,OAAA,EAAI;AAAA,4BACJ,OAAA,CAAA,CAAI;AAAA,QAAA,EAAA,CACP;AAAA,MAAA;AAAA,IAAA;AAQR,QAAMK,IAAY,EAAE,6BAA6Bd,EAAA,GAC3Ce,IACJd,MAAU,SAAY,EAAE,OAAO,OAAOA,KAAU,WAAW,GAAGA,CAAK,OAAOA,EAAA,IAAU,QAChFe,IAAM,CAACC,MACX,gBAAAR;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKQ,IAAQZ,IAAM;AAAA,MACnB,WAAWK,EAAG,yBAAyB,QAAQjB,CAAI,IAAIc,GAAYU,KAASH,GAAWG,KAAStB,CAAS;AAAA,MACzG,OAAOsB,IAAQF,IAAY;AAAA,MAC1B,GAAGT;AAAA,MAEJ,UAAA,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAOhB,MAAS,gBAAgB,EAAE,OAAO,GAAGe,CAAO,QAAQ,CAAA;AAAA,QAAC;AAAA,MAAA;AAAA,IAC7D;AAAA,EAAA;AAIL,MAAI,CAACN,KAAcT,MAAS;AAC1B,WAAOuB,EAAI,EAAI;AAEjB,QAAME,IAAcrB,MAAQ,MAAM,GAAG,KAAK,MAAMD,CAAa,CAAC,MAAM,GAAGA,CAAa,MAAMC,CAAG;AAC7F,SACE,gBAAAe,EAAC,OAAA,EAAI,KAAAP,GAAU,WAAWK,EAAG,0BAA0BI,GAAWnB,CAAS,GAAG,OAAOoB,GAClF,UAAA;AAAA,IAAAC,EAAI,EAAK;AAAA,IACV,gBAAAP,EAAC,QAAA,EAAK,WAAU,yBACb,UAAA,OAAOP,KAAe,aAAaA,EAAWN,GAAeC,CAAG,IAAIqB,EAAA,CACvE;AAAA,EAAA,GACF;AAEJ,CAAC;AAOM,SAASP,EAAiB,EAAE,eAAAf,IAAgB,KAA4B;AAC7E,QAAMuB,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,IAAgB5B,IAAgB,MAAO4B;AACtD,MAAAL,EAAU,QAAQ,MAAM,mBAAmB,GAAGM,CAAM;AAAA,IACtD;AAAA,EACF,GAAG,CAACN,GAAWvB,CAAa,CAAC,qBAG1B,OAAA,EAAI,WAAU,gCACb,UAAA,gBAAAa,EAAC,YAAO,WAAU,mCAAkC,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,KAAKU,GAAW,GAC7F;AAEJ;"}

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

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

package/dist/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":";;;;;;AAmCO,SAASA,EAAgB;AAAA,EAC9B,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAA6C;AAC3C,QAAMC,IAAgBX,MAAiB,UAAaD,MAAS;AAE7D,SACE,gBAAAa,EAACC,GAAA,EAAM,MAAAjB,GAAY,SAAAY,GAAkB,MAAK,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":";;;;;;;AAoCO,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/components/feedBack/skeleton/skeleton.js

@@ -1,36 +1,37 @@
-import { jsx as i } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/skeleton/skeleton.entry.css';/* empty css                                                           */
+import { jsx as l } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/skeleton/skeleton.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                           */
 import { forwardRef as u } from "react";
 import g from "clsx";
-const d = (e) => typeof e == "number" ? `${e}px` : e, N = u(function({
+const d = (e) => typeof e == "number" ? `${e}px` : e, C = u(function({
   className: f,
-  variant: k = "text",
-  width: p,
+  variant: p = "text",
+  width: k,
   height: c,
   animation: o = "pulse",
   count: t = 1,
   animationDelay: r,
   component: h = "span",
   style: w,
-  ...a
-}, l) {
+  ...m
+}, a) {
   const b = g(
     "smwb-skeleton",
-    `smwb-skeleton_${k}`,
+    `smwb-skeleton_${p}`,
     o === !1 ? "smwb-skeleton_no-animation" : `smwb-skeleton_${o}`,
     f
-  ), _ = h, m = (s) => {
+  ), _ = h, i = (s) => {
     const n = {
       ...w,
-      width: d(p),
+      width: d(k),
       height: d(c),
       ...r ? { animationDelay: `${s * r}ms` } : {}
     };
-    return /* @__PURE__ */ i(
+    return /* @__PURE__ */ l(
       _,
       {
-        ref: t === 1 ? l : void 0,
-        ...t === 1 ? a : {},
+        ref: t === 1 ? a : void 0,
+        ...t === 1 ? m : {},
         "data-testid": "skeleton",
         "aria-hidden": "true",
         className: b,
@@ -39,10 +40,10 @@ const d = (e) => typeof e == "number" ? `${e}px` : e, N = u(function({
       s
     );
   };
-  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 t === 1 ? i(0) : /* @__PURE__ */ l("span", { ref: a, ...m, className: "smwb-skeleton__group", "aria-hidden": "true", children: Array.from({ length: t }, (s, n) => i(n)) });
 });
 export {
-  N as Skeleton,
-  N as default
+  C as Skeleton,
+  C as default
 };
 //# sourceMappingURL=skeleton.js.map

package/dist/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":";;;;AAsBA,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  /** 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":";;;;;AAuBA,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;"}