@smwb/ui-react 2.0.0

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

@@ -0,0 +1,39 @@
+import React, { PropsWithChildren } from "react";
+export interface ModalProps {
+    size?: "small" | "medium" | "large" | "fullscreen";
+    closeOnOutsideClick?: boolean;
+    onClose?: () => void;
+    open: boolean;
+    animation?: "fade" | "scale" | "drop";
+    className?: string;
+    backdrop?: "blured" | "dark" | "transparent" | "darkBlured";
+    asForm?: boolean;
+    disableAppearAnimation?: boolean;
+    /** ARIA role of the dialog. */
+    role?: "dialog" | "alertdialog";
+    /** Close the modal when Escape is pressed. */
+    closeOnEsc?: boolean;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+}
+export interface HeaderProps {
+    className?: string;
+}
+export declare function Header({ className, children }: PropsWithChildren<HeaderProps>): import("react/jsx-runtime").JSX.Element;
+export interface ContentProps {
+    className?: string;
+}
+export declare function Content({ className, children }: PropsWithChildren<ContentProps>): import("react/jsx-runtime").JSX.Element;
+export interface FooterProps {
+    className?: string;
+}
+export declare function Footer({ className, children }: PropsWithChildren<FooterProps>): import("react/jsx-runtime").JSX.Element;
+export declare const Modal: React.ForwardRefExoticComponent<ModalProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>> & {
+    Footer: typeof Footer;
+    Header: typeof Header;
+    Content: typeof Content;
+};
+export default Modal;

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

@@ -0,0 +1,107 @@
+import { jsx as t, Fragment as D } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/modal/modal.entry.css';/* empty css                                                     */
+import { forwardRef as S, useState as $, useRef as c, useEffect as h } from "react";
+import { CSSTransition as A } from "react-transition-group";
+import { createPortal as F } from "react-dom";
+import a from "clsx";
+import { useSafeLayoutEffect as L } from "../../../hooks/useSafeLayoutEffect.js";
+import { useForkRef as M } from "../../../hooks/useForkRef.js";
+const j = S(function({
+  children: e,
+  onClose: r,
+  open: m,
+  className: f,
+  animation: u = "fade",
+  backdrop: p = "dark",
+  size: s = "large",
+  closeOnOutsideClick: v = !0,
+  asForm: _ = !1,
+  disableAppearAnimation: w = !1,
+  role: b = "dialog",
+  closeOnEsc: i = !0,
+  ...y
+}, k) {
+  const [d, x] = $(), l = c(null), R = c(null), E = M(k, R);
+  if (L(() => {
+    x(document.body);
+  }, []), h(() => {
+    if (!m || !i || !r)
+      return;
+    const n = (g) => {
+      g.key === "Escape" && r();
+    };
+    return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
+  }, [m, i, r]), !d)
+    return /* @__PURE__ */ t(D, {});
+  const N = _ ? "form" : "div";
+  return F(
+    /* @__PURE__ */ t(
+      A,
+      {
+        timeout: {
+          appear: 225,
+          enter: 225,
+          exit: 150
+        },
+        in: m,
+        classNames: {
+          appear: "smwb-modal__overlay-appear",
+          appearActive: "smwb-modal__overlay-appear-active",
+          appearDone: "smwb-modal__overlay-appear-done",
+          enter: "smwb-modal__overlay-enter",
+          enterActive: "smwb-modal__overlay-enter-active",
+          enterDone: "smwb-modal__overlay-enter-done",
+          exit: "smwb-modal__overlay-exit",
+          exitActive: "smwb-modal__overlay-exit-active"
+        },
+        appear: !w,
+        mountOnEnter: !0,
+        unmountOnExit: !0,
+        nodeRef: l,
+        children: /* @__PURE__ */ t(
+          "div",
+          {
+            ref: l,
+            className: a("smwb-modal__overlay", `smwb-${p}`, `smwb-${s}`),
+            onClick: v && r ? r : void 0,
+            children: /* @__PURE__ */ t(
+              N,
+              {
+                ref: E,
+                className: a("smwb-modal", `smwb-${s}`, `smwb-${u}`, f),
+                onClick: (n) => n.stopPropagation(),
+                role: b,
+                "aria-modal": "true",
+                ...y,
+                children: e
+              }
+            )
+          }
+        )
+      }
+    ),
+    d
+  );
+});
+function C({ className: o, children: e }) {
+  return /* @__PURE__ */ t("div", { className: a("smwb-modal__header", o), children: e });
+}
+function O({ className: o, children: e }) {
+  return /* @__PURE__ */ t("div", { className: a("smwb-modal__content", o), children: e });
+}
+function P({ className: o, children: e }) {
+  return /* @__PURE__ */ t("div", { className: a("smwb-modal__footer", o), children: e });
+}
+const Q = Object.assign(j, {
+  Footer: P,
+  Header: C,
+  Content: O
+});
+export {
+  O as Content,
+  P as Footer,
+  C as Header,
+  Q as Modal,
+  Q as default
+};
+//# sourceMappingURL=modal.js.map

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

@@ -0,0 +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\";\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      if (event.key === \"Escape\") {\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        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","jsx","Fragment","Component","createPortal","CSSTransition","cn","e","Header","Content","Footer","Modal"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export { default as ProgressIndicator, CircularProgress } from "./progressIndicator";
+export type { ProgressIndicatorProps, ProgressColor } from "./progressIndicator";

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

@@ -0,0 +1,21 @@
+import React from "react";
+export type ProgressColor = "primary" | "secondary" | "error" | "success" | "warning" | "info";
+export interface ProgressIndicatorProps {
+    className?: string;
+    variant: "circular" | "linear";
+    type: "determinate" | "indeterminate";
+    progressValue?: number;
+    /** Semantic color. */
+    color?: ProgressColor;
+    /** Circular size preset. */
+    size?: "small" | "medium" | "large";
+    /** Accessible name for the progress bar. */
+    "aria-label"?: string;
+    id?: string;
+}
+export declare const ProgressIndicator: React.ForwardRefExoticComponent<ProgressIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+export interface CircularProgressProps {
+    progressValue?: number;
+}
+export declare function CircularProgress({ progressValue }: CircularProgressProps): import("react/jsx-runtime").JSX.Element;
+export default ProgressIndicator;

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

@@ -0,0 +1,52 @@
+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 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 = {
+    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(
+    "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", {})
+      ] })
+    }
+  ) : /* @__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}%` } : {}
+    }
+  ) });
+});
+function $({ progressValue: t = 0 }) {
+  const r = v(null);
+  return w(() => {
+    var c;
+    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}`;
+    }
+  }, [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 }) });
+}
+export {
+  $ as CircularProgress,
+  y as ProgressIndicator,
+  y as default
+};
+//# sourceMappingURL=progressIndicator.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,2 @@
+export { default as Skeleton } from "./skeleton";
+export type { SkeletonProps } from "./skeleton";

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

@@ -0,0 +1,20 @@
+import { HTMLAttributes } from "react";
+export interface SkeletonProps extends HTMLAttributes<HTMLElement> {
+    className?: string;
+    /** Shape of the placeholder. */
+    variant?: "text" | "circular" | "rounded" | "rectangular";
+    /** Width — number (px) or any CSS length. */
+    width?: number | string;
+    /** Height — number (px) or any CSS length. */
+    height?: number | string;
+    /** Shimmer animation; pass false to disable. */
+    animation?: "pulse" | "wave" | false;
+    /** Render N stacked placeholders. */
+    count?: number;
+    /** Stagger consecutive items by N ms (with `count`). */
+    animationDelay?: number;
+    /** Root element. */
+    component?: "span" | "div";
+}
+export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLElement>>;
+export default Skeleton;

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

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

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,2 @@
+export { SnackbarProvider, useSnackbar } from "./snackbar";
+export type { AddSnackbarOptions, SnackbarsProviderProps, SnackbarOptions } from "./snackbar";

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

@@ -0,0 +1,40 @@
+import React from "react";
+export declare const variants: readonly ["dark", "light", "danger", "success", "warning", "info"];
+export declare const positions: readonly ["top", "bottom", "top-left", "top-right", "bottom-right", "bottom-left"];
+export type Variants = (typeof variants)[number];
+export type Position = (typeof positions)[number];
+export interface SnackbarsProviderProps extends React.HTMLAttributes<HTMLElement> {
+    variant?: Variants;
+    position?: Position;
+    autoCloseTime?: number;
+    closeOnClick?: boolean;
+    autoClose?: boolean;
+    component?: React.ElementType;
+}
+export interface AddSnackbarOptions extends SnackbarsProviderProps {
+    key?: string;
+    message: React.ReactNode;
+}
+export type AddSnackbar = (options: AddSnackbarOptions) => string;
+export interface SnackbarOptions {
+    addSnackbar: AddSnackbar;
+    clearAllSnackbars: () => void;
+    clearFirstSnackbar: () => void;
+    clearLastSnackbar: () => void;
+    clearByIdSnackbar: (id: string) => void;
+}
+export declare function SnackbarProvider(props: SnackbarsProviderProps): import("react/jsx-runtime").JSX.Element;
+export interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {
+    message?: React.ReactNode;
+    variant?: Variants;
+    position?: Position;
+    component?: React.ElementType;
+    isAutoClose?: boolean;
+    autoCloseTime?: number;
+    onClose?: () => void;
+    /** Optional action node rendered after the message (e.g. an Undo button). */
+    action?: React.ReactNode;
+}
+export declare const Snackbar: React.ForwardRefExoticComponent<SnackbarProps & React.RefAttributes<unknown>>;
+export declare function useSnackbar(): SnackbarOptions;
+export default SnackbarProvider;

package/dist/components/feedBack/snackbar/snackbar.js

@@ -0,0 +1,195 @@
+import { jsx as k, jsxs as g } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/snackbar/snackbar.entry.css';/* empty css                                                           */
+import F, { useState as L, useCallback as G, useContext as q, useRef as E, createContext as y, useEffect as z } from "react";
+import { v4 as H } from "uuid";
+import { createPortal as J } from "react-dom";
+import N from "clsx";
+import { TransitionGroup as K, CSSTransition as M } from "react-transition-group";
+import { useSnackbarsPortal as Q } from "./useSnackbarsPortal.js";
+import { useEventCallback as U } from "../../../hooks/useEventCallback.js";
+function V({
+  snack: r,
+  position: l,
+  variant: f,
+  className: m,
+  component: v,
+  autoClose: S,
+  autoCloseTime: w,
+  snackRest: o,
+  onSnackRemove: u,
+  onClose: b
+}) {
+  var d, a, n, i, C;
+  const c = E(null);
+  return /* @__PURE__ */ k(
+    M,
+    {
+      appear: !0,
+      timeout: 125,
+      classNames: {
+        appear: "smwb-snackbar-enter",
+        appearActive: "smwb-snackbar-enter-active",
+        appearDone: "smwb-snackbar-enter-done",
+        enter: "smwb-snackbar-enter",
+        enterActive: "smwb-snackbar-enter-active",
+        enterDone: "smwb-snackbar-enter-done",
+        exitActive: "smwb-snackbar-exit-active"
+      },
+      unmountOnExit: !0,
+      in: !0,
+      nodeRef: c,
+      children: /* @__PURE__ */ k(
+        W,
+        {
+          ref: c,
+          component: (d = r.component) != null ? d : v,
+          message: r.message,
+          position: (a = r.position) != null ? a : l,
+          variant: (n = r.variant) != null ? n : f,
+          onClick: u(r.id),
+          className: N(m, r.className),
+          isAutoClose: (i = r.autoClose) != null ? i : S,
+          autoCloseTime: (C = r.autoCloseTime) != null ? C : w,
+          onClose: b(r.id),
+          ...o
+        }
+      )
+    }
+  );
+}
+const I = y({
+  addSnackbar: () => "",
+  clearAllSnackbars: () => {
+  },
+  clearFirstSnackbar: () => {
+  },
+  clearLastSnackbar: () => {
+  },
+  clearByIdSnackbar: () => {
+  }
+});
+function oe(r) {
+  const {
+    position: l = "top-right",
+    variant: f = "dark",
+    className: m,
+    autoClose: v = !0,
+    autoCloseTime: S = 5e3,
+    closeOnClick: w = !0,
+    onClick: o,
+    component: u = "div",
+    children: b,
+    ...c
+  } = r, [d, a] = L([]), { snackbarDomRoot: n } = Q(), i = G((e) => {
+    const { key: t, ...s } = e, p = t != null ? t : H(), x = { id: p, ...s };
+    return a((T) => {
+      const A = T.findIndex((B) => B.id === p);
+      if (A === -1)
+        return [...T, x];
+      const P = [...T];
+      return P[A] = x, P;
+    }), p;
+  }, []), C = () => {
+    a([]);
+  }, _ = () => {
+    a((e) => e.slice(1));
+  }, $ = () => {
+    a((e) => e.slice(0, -1));
+  }, h = (e) => {
+    a((t) => t.filter((s) => s.id !== e));
+  }, j = (e) => (t) => {
+    o == null || o(t), w && h(e);
+  }, D = (e) => () => {
+    h(e);
+  }, R = d.reduce(
+    (e, t) => {
+      var p, x;
+      const s = (p = t.position) != null ? p : l;
+      return e[s] = [...(x = e[s]) != null ? x : [], t], e;
+    },
+    {}
+  ), O = Object.keys(R).map((e) => {
+    const t = R[e];
+    return /* @__PURE__ */ k(
+      K,
+      {
+        className: N("smwb-snackbars", `smwb-${e}`),
+        "data-testid": `snackbars-${e}`,
+        appear: !0,
+        children: t.map((s) => /* @__PURE__ */ k(
+          V,
+          {
+            snack: s,
+            position: l,
+            variant: f,
+            className: m,
+            component: u,
+            autoClose: v,
+            autoCloseTime: S,
+            snackRest: c,
+            onSnackRemove: j,
+            onClose: D
+          },
+          s.id
+        ))
+      },
+      e
+    );
+  });
+  return /* @__PURE__ */ g(
+    I.Provider,
+    {
+      value: { addSnackbar: i, clearAllSnackbars: C, clearFirstSnackbar: _, clearLastSnackbar: $, clearByIdSnackbar: h },
+      children: [
+        b,
+        n && J(O, n)
+      ]
+    }
+  );
+}
+const W = F.forwardRef(function({
+  className: l,
+  message: f,
+  variant: m = "dark",
+  position: v = "top-right",
+  onClick: S,
+  component: w = "div",
+  isAutoClose: o,
+  autoCloseTime: u,
+  onClose: b,
+  action: c,
+  ...d
+}, a) {
+  const n = E(), i = U(() => {
+    !b || !o || !u || (n.current && clearTimeout(n.current), n.current = setTimeout(() => {
+      b();
+    }, u));
+  });
+  return z(() => (i(), () => {
+    n.current && clearTimeout(n.current);
+  }), [i]), /* @__PURE__ */ g(
+    w,
+    {
+      ref: a,
+      className: N("smwb-snackbar", l, `smwb-${m}`, `smwb-${v}`),
+      onClick: S,
+      role: "alert",
+      "aria-live": m === "danger" ? "assertive" : "polite",
+      "aria-atomic": "true",
+      ...d,
+      children: [
+        /* @__PURE__ */ k("div", { className: "smwb-snackbar__body", children: f }),
+        c != null ? /* @__PURE__ */ k("div", { className: "smwb-snackbar__action", children: c }) : null
+      ]
+    }
+  );
+});
+function ce() {
+  return q(I);
+}
+export {
+  W as Snackbar,
+  oe as SnackbarProvider,
+  ce as useSnackbar
+};
+//# sourceMappingURL=snackbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"snackbar.js","sources":["../../../../src/components/feedBack/snackbar/snackbar.tsx"],"sourcesContent":["import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from \"react\";\nimport { v4 } from \"uuid\";\nimport { createPortal } from \"react-dom\";\nimport cn from \"clsx\";\nimport { CSSTransition, TransitionGroup } from \"react-transition-group\";\nimport { useSnackbarsPortal } from \"./useSnackbarsPortal\";\nimport { useEventCallback } from \"../../../hooks/useEventCallback\";\n\nexport const variants = [\"dark\", \"light\", \"danger\", \"success\", \"warning\", \"info\"] as const;\nexport const positions = [\"top\", \"bottom\", \"top-left\", \"top-right\", \"bottom-right\", \"bottom-left\"] as const;\n\nexport type Variants = (typeof variants)[number];\nexport type Position = (typeof positions)[number];\n\nexport interface SnackbarsProviderProps extends React.HTMLAttributes<HTMLElement> {\n  variant?: Variants;\n  position?: Position;\n  autoCloseTime?: number;\n  closeOnClick?: boolean;\n  autoClose?: boolean;\n  component?: React.ElementType;\n}\n\ninterface Snack extends SnackbarsProviderProps {\n  id: string;\n  message: React.ReactNode;\n}\n\ninterface SnackTransitionProps {\n  snack: Snack;\n  position: Position;\n  variant: Variants;\n  className?: string;\n  component: React.ElementType;\n  autoClose: boolean;\n  autoCloseTime: number;\n  snackRest: Omit<\n    SnackbarsProviderProps,\n    \"variant\" | \"position\" | \"autoCloseTime\" | \"autoClose\" | \"closeOnClick\" | \"onClick\" | \"component\" | \"children\"\n  >;\n  onSnackRemove: (id: string) => (event: React.MouseEvent<HTMLElement>) => void;\n  onClose: (id: string) => () => void;\n}\n\nfunction SnackTransition({\n  snack,\n  position,\n  variant,\n  className,\n  component,\n  autoClose,\n  autoCloseTime,\n  snackRest,\n  onSnackRemove,\n  onClose,\n}: SnackTransitionProps) {\n  const nodeRef = useRef<HTMLDivElement>(null);\n\n  return (\n    <CSSTransition\n      appear\n      timeout={125}\n      classNames={{\n        appear: \"smwb-snackbar-enter\",\n        appearActive: \"smwb-snackbar-enter-active\",\n        appearDone: \"smwb-snackbar-enter-done\",\n        enter: \"smwb-snackbar-enter\",\n        enterActive: \"smwb-snackbar-enter-active\",\n        enterDone: \"smwb-snackbar-enter-done\",\n        exitActive: \"smwb-snackbar-exit-active\",\n      }}\n      unmountOnExit\n      in\n      nodeRef={nodeRef}\n    >\n      <Snackbar\n        ref={nodeRef}\n        component={snack.component ?? component}\n        message={snack.message}\n        position={snack.position ?? position}\n        variant={snack.variant ?? variant}\n        onClick={onSnackRemove(snack.id)}\n        className={cn(className, snack.className)}\n        isAutoClose={snack.autoClose ?? autoClose}\n        autoCloseTime={snack.autoCloseTime ?? autoCloseTime}\n        onClose={onClose(snack.id)}\n        {...snackRest}\n      />\n    </CSSTransition>\n  );\n}\n\nexport interface AddSnackbarOptions extends SnackbarsProviderProps {\n  key?: string;\n  message: React.ReactNode;\n}\n\nexport type AddSnackbar = (options: AddSnackbarOptions) => string;\n\nexport interface SnackbarOptions {\n  addSnackbar: AddSnackbar;\n  clearAllSnackbars: () => void;\n  clearFirstSnackbar: () => void;\n  clearLastSnackbar: () => void;\n  clearByIdSnackbar: (id: string) => void;\n}\n\nconst SnackbarContext = createContext<SnackbarOptions>({\n  addSnackbar: () => \"\",\n  clearAllSnackbars: () => undefined,\n  clearFirstSnackbar: () => undefined,\n  clearLastSnackbar: () => undefined,\n  clearByIdSnackbar: () => undefined,\n});\n\nexport function SnackbarProvider(props: SnackbarsProviderProps) {\n  const {\n    position = \"top-right\",\n    variant = \"dark\",\n    className,\n    autoClose = true,\n    autoCloseTime = 5000,\n    closeOnClick = true,\n    onClick,\n    component = \"div\",\n    children,\n    ...rest\n  } = props;\n\n  const [snacks, setSnacks] = useState<Snack[]>([]);\n  const { snackbarDomRoot } = useSnackbarsPortal();\n\n  const addSnackbar: AddSnackbar = useCallback((options) => {\n    const { key, ...rest } = options;\n\n    const id = key ?? v4();\n    const snack: Snack = { id, ...rest };\n\n    setSnacks((prevState) => {\n      const index = prevState.findIndex((item) => item.id === id);\n      if (index === -1) {\n        return [...prevState, snack];\n      }\n      const next = [...prevState];\n      next[index] = snack;\n      return next;\n    });\n\n    return id;\n  }, []);\n\n  const clearAllSnackbars = () => {\n    setSnacks([]);\n  };\n\n  const clearFirstSnackbar = () => {\n    setSnacks((prevState) => prevState.slice(1));\n  };\n\n  const clearLastSnackbar = () => {\n    setSnacks((prevState) => prevState.slice(0, -1));\n  };\n\n  const clearByIdSnackbar = (id: string) => {\n    setSnacks((prevState) => prevState.filter((value) => value.id !== id));\n  };\n\n  const onSnackRemove = (id: string) => (event: React.MouseEvent<HTMLElement>) => {\n    onClick?.(event);\n\n    if (closeOnClick) {\n      clearByIdSnackbar(id);\n    }\n  };\n\n  const onClose = (id: string) => () => {\n    clearByIdSnackbar(id);\n  };\n\n  const currentPositions = snacks.reduce(\n    (acc, snack) => {\n      const currentPosition = snack.position ?? position;\n\n      acc[currentPosition] = [...(acc[currentPosition] ?? []), snack];\n\n      return acc;\n    },\n    {} as Record<Position, Snack[]>\n  );\n\n  const snackbars = (Object.keys(currentPositions) as unknown as typeof positions).map((key) => {\n    const snacks = currentPositions[key];\n\n    return (\n      <TransitionGroup\n        key={key}\n        className={cn(\"smwb-snackbars\", `smwb-${key}`)}\n        data-testid={`snackbars-${key}`}\n        appear\n      >\n        {snacks.map((snack) => (\n          <SnackTransition\n            key={snack.id}\n            snack={snack}\n            position={position}\n            variant={variant}\n            className={className}\n            component={component}\n            autoClose={autoClose}\n            autoCloseTime={autoCloseTime}\n            snackRest={rest}\n            onSnackRemove={onSnackRemove}\n            onClose={onClose}\n          />\n        ))}\n      </TransitionGroup>\n    );\n  });\n\n  return (\n    <SnackbarContext.Provider\n      value={{ addSnackbar, clearAllSnackbars, clearFirstSnackbar, clearLastSnackbar, clearByIdSnackbar }}\n    >\n      {children}\n      {snackbarDomRoot && createPortal(snackbars, snackbarDomRoot)}\n    </SnackbarContext.Provider>\n  );\n}\n\nexport interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {\n  message?: React.ReactNode;\n  variant?: Variants;\n  position?: Position;\n  component?: React.ElementType;\n  isAutoClose?: boolean;\n  autoCloseTime?: number;\n  onClose?: () => void;\n  /** Optional action node rendered after the message (e.g. an Undo button). */\n  action?: React.ReactNode;\n}\n\nexport const Snackbar = React.forwardRef(function SnackbarInner(\n  {\n    className,\n    message,\n    variant = \"dark\",\n    position = \"top-right\",\n    onClick,\n    component = \"div\",\n    isAutoClose,\n    autoCloseTime,\n    onClose,\n    action,\n    ...rest\n  }: SnackbarProps,\n  ref\n) {\n  const timerClose = useRef<ReturnType<typeof setTimeout>>();\n\n  const setCloseTimer = useEventCallback(() => {\n    if (!onClose || !isAutoClose || !autoCloseTime) {\n      return;\n    }\n\n    if (timerClose.current) {\n      clearTimeout(timerClose.current);\n    }\n\n    timerClose.current = setTimeout(() => {\n      onClose();\n    }, autoCloseTime);\n  });\n\n  useEffect(() => {\n    setCloseTimer();\n\n    return () => {\n      if (timerClose.current) {\n        clearTimeout(timerClose.current);\n      }\n    };\n  }, [setCloseTimer]);\n\n  const Element = component;\n\n  return (\n    <Element\n      ref={ref}\n      className={cn(\"smwb-snackbar\", className, `smwb-${variant}`, `smwb-${position}`)}\n      onClick={onClick}\n      role=\"alert\"\n      aria-live={variant === \"danger\" ? \"assertive\" : \"polite\"}\n      aria-atomic=\"true\"\n      {...rest}\n    >\n      <div className=\"smwb-snackbar__body\">{message}</div>\n      {action != null ? <div className=\"smwb-snackbar__action\">{action}</div> : null}\n    </Element>\n  );\n});\n\nexport function useSnackbar() {\n  return useContext(SnackbarContext);\n}\n\nexport default SnackbarProvider;\n"],"names":["SnackTransition","snack","position","variant","className","component","autoClose","autoCloseTime","snackRest","onSnackRemove","onClose","nodeRef","useRef","jsx","CSSTransition","Snackbar","_a","_b","_c","cn","_d","_e","SnackbarContext","createContext","SnackbarProvider","props","closeOnClick","onClick","children","rest","snacks","setSnacks","useState","snackbarDomRoot","useSnackbarsPortal","addSnackbar","useCallback","options","key","id","v4","prevState","index","item","next","clearAllSnackbars","clearFirstSnackbar","clearLastSnackbar","clearByIdSnackbar","value","event","currentPositions","acc","currentPosition","snackbars","TransitionGroup","jsxs","createPortal","React","message","isAutoClose","action","ref","timerClose","setCloseTimer","useEventCallback","useEffect","useSnackbar","useContext"],"mappings":";;;;;;;;;AA6CA,SAASA,EAAgB;AAAA,EACvB,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,SAAAC;AACF,GAAyB;;AACvB,QAAMC,IAAUC,EAAuB,IAAI;AAE3C,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAM;AAAA,MACN,SAAS;AAAA,MACT,YAAY;AAAA,QACV,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,YAAY;AAAA,QACZ,OAAO;AAAA,QACP,aAAa;AAAA,QACb,WAAW;AAAA,QACX,YAAY;AAAA,MAAA;AAAA,MAEd,eAAa;AAAA,MACb,IAAE;AAAA,MACF,SAAAH;AAAA,MAEA,UAAA,gBAAAE;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,KAAKJ;AAAA,UACL,YAAWK,IAAAf,EAAM,cAAN,OAAAe,IAAmBX;AAAA,UAC9B,SAASJ,EAAM;AAAA,UACf,WAAUgB,IAAAhB,EAAM,aAAN,OAAAgB,IAAkBf;AAAA,UAC5B,UAASgB,IAAAjB,EAAM,YAAN,OAAAiB,IAAiBf;AAAA,UAC1B,SAASM,EAAcR,EAAM,EAAE;AAAA,UAC/B,WAAWkB,EAAGf,GAAWH,EAAM,SAAS;AAAA,UACxC,cAAamB,IAAAnB,EAAM,cAAN,OAAAmB,IAAmBd;AAAA,UAChC,gBAAee,IAAApB,EAAM,kBAAN,OAAAoB,IAAuBd;AAAA,UACtC,SAASG,EAAQT,EAAM,EAAE;AAAA,UACxB,GAAGO;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN;AAiBA,MAAMc,IAAkBC,EAA+B;AAAA,EACrD,aAAa,MAAM;AAAA,EACnB,mBAAmB,MAAA;AAAA;AAAA,EACnB,oBAAoB,MAAA;AAAA;AAAA,EACpB,mBAAmB,MAAA;AAAA;AAAA,EACnB,mBAAmB,MAAA;AAAA;AACrB,CAAC;AAEM,SAASC,GAAiBC,GAA+B;AAC9D,QAAM;AAAA,IACJ,UAAAvB,IAAW;AAAA,IACX,SAAAC,IAAU;AAAA,IACV,WAAAC;AAAA,IACA,WAAAE,IAAY;AAAA,IACZ,eAAAC,IAAgB;AAAA,IAChB,cAAAmB,IAAe;AAAA,IACf,SAAAC;AAAA,IACA,WAAAtB,IAAY;AAAA,IACZ,UAAAuB;AAAA,IACA,GAAGC;AAAA,EAAA,IACDJ,GAEE,CAACK,GAAQC,CAAS,IAAIC,EAAkB,CAAA,CAAE,GAC1C,EAAE,iBAAAC,EAAA,IAAoBC,EAAA,GAEtBC,IAA2BC,EAAY,CAACC,MAAY;AACxD,UAAM,EAAE,KAAAC,GAAK,GAAGT,EAAAA,IAASQ,GAEnBE,IAAKD,KAAA,OAAAA,IAAOE,EAAA,GACZvC,IAAe,EAAE,IAAAsC,GAAI,GAAGV,EAAAA;AAE9B,WAAAE,EAAU,CAACU,MAAc;AACvB,YAAMC,IAAQD,EAAU,UAAU,CAACE,MAASA,EAAK,OAAOJ,CAAE;AAC1D,UAAIG,MAAU;AACZ,eAAO,CAAC,GAAGD,GAAWxC,CAAK;AAE7B,YAAM2C,IAAO,CAAC,GAAGH,CAAS;AAC1B,aAAAG,EAAKF,CAAK,IAAIzC,GACP2C;AAAA,IACT,CAAC,GAEML;AAAA,EACT,GAAG,CAAA,CAAE,GAECM,IAAoB,MAAM;AAC9B,IAAAd,EAAU,CAAA,CAAE;AAAA,EACd,GAEMe,IAAqB,MAAM;AAC/B,IAAAf,EAAU,CAACU,MAAcA,EAAU,MAAM,CAAC,CAAC;AAAA,EAC7C,GAEMM,IAAoB,MAAM;AAC9B,IAAAhB,EAAU,CAACU,MAAcA,EAAU,MAAM,GAAG,EAAE,CAAC;AAAA,EACjD,GAEMO,IAAoB,CAACT,MAAe;AACxC,IAAAR,EAAU,CAACU,MAAcA,EAAU,OAAO,CAACQ,MAAUA,EAAM,OAAOV,CAAE,CAAC;AAAA,EACvE,GAEM9B,IAAgB,CAAC8B,MAAe,CAACW,MAAyC;AAC9E,IAAAvB,KAAA,QAAAA,EAAUuB,IAENxB,KACFsB,EAAkBT,CAAE;AAAA,EAExB,GAEM7B,IAAU,CAAC6B,MAAe,MAAM;AACpC,IAAAS,EAAkBT,CAAE;AAAA,EACtB,GAEMY,IAAmBrB,EAAO;AAAA,IAC9B,CAACsB,GAAKnD,MAAU;;AACd,YAAMoD,KAAkBrC,IAAAf,EAAM,aAAN,OAAAe,IAAkBd;AAE1C,aAAAkD,EAAIC,CAAe,IAAI,CAAC,IAAIpC,IAAAmC,EAAIC,CAAe,MAAnB,OAAApC,IAAwB,CAAA,GAAKhB,CAAK,GAEvDmD;AAAA,IACT;AAAA,IACA,CAAA;AAAA,EAAC,GAGGE,IAAa,OAAO,KAAKH,CAAgB,EAAkC,IAAI,CAACb,MAAQ;AAC5F,UAAMR,IAASqB,EAAiBb,CAAG;AAEnC,WACE,gBAAAzB;AAAA,MAAC0C;AAAA,MAAA;AAAA,QAEC,WAAWpC,EAAG,kBAAkB,QAAQmB,CAAG,EAAE;AAAA,QAC7C,eAAa,aAAaA,CAAG;AAAA,QAC7B,QAAM;AAAA,QAEL,UAAAR,EAAO,IAAI,CAAC7B,MACX,gBAAAY;AAAA,UAACb;AAAA,UAAA;AAAA,YAEC,OAAAC;AAAA,YACA,UAAAC;AAAA,YACA,SAAAC;AAAA,YACA,WAAAC;AAAA,YACA,WAAAC;AAAA,YACA,WAAAC;AAAA,YACA,eAAAC;AAAA,YACA,WAAWsB;AAAA,YACX,eAAApB;AAAA,YACA,SAAAC;AAAA,UAAA;AAAA,UAVKT,EAAM;AAAA,QAAA,CAYd;AAAA,MAAA;AAAA,MAnBIqC;AAAA,IAAA;AAAA,EAsBX,CAAC;AAED,SACE,gBAAAkB;AAAA,IAAClC,EAAgB;AAAA,IAAhB;AAAA,MACC,OAAO,EAAE,aAAAa,GAAa,mBAAAU,GAAmB,oBAAAC,GAAoB,mBAAAC,GAAmB,mBAAAC,EAAA;AAAA,MAE/E,UAAA;AAAA,QAAApB;AAAA,QACAK,KAAmBwB,EAAaH,GAAWrB,CAAe;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGjE;AAcO,MAAMlB,IAAW2C,EAAM,WAAW,SACvC;AAAA,EACE,WAAAtD;AAAA,EACA,SAAAuD;AAAA,EACA,SAAAxD,IAAU;AAAA,EACV,UAAAD,IAAW;AAAA,EACX,SAAAyB;AAAA,EACA,WAAAtB,IAAY;AAAA,EACZ,aAAAuD;AAAA,EACA,eAAArD;AAAA,EACA,SAAAG;AAAA,EACA,QAAAmD;AAAA,EACA,GAAGhC;AACL,GACAiC,GACA;AACA,QAAMC,IAAanD,EAAA,GAEboD,IAAgBC,EAAiB,MAAM;AAC3C,IAAI,CAACvD,KAAW,CAACkD,KAAe,CAACrD,MAI7BwD,EAAW,WACb,aAAaA,EAAW,OAAO,GAGjCA,EAAW,UAAU,WAAW,MAAM;AACpC,MAAArD,EAAA;AAAA,IACF,GAAGH,CAAa;AAAA,EAClB,CAAC;AAED,SAAA2D,EAAU,OACRF,EAAA,GAEO,MAAM;AACX,IAAID,EAAW,WACb,aAAaA,EAAW,OAAO;AAAA,EAEnC,IACC,CAACC,CAAa,CAAC,GAKhB,gBAAAR;AAAA,IAHcnD;AAAA,IAGb;AAAA,MACC,KAAAyD;AAAA,MACA,WAAW3C,EAAG,iBAAiBf,GAAW,QAAQD,CAAO,IAAI,QAAQD,CAAQ,EAAE;AAAA,MAC/E,SAAAyB;AAAA,MACA,MAAK;AAAA,MACL,aAAWxB,MAAY,WAAW,cAAc;AAAA,MAChD,eAAY;AAAA,MACX,GAAG0B;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAhB,EAAC,OAAA,EAAI,WAAU,uBAAuB,UAAA8C,GAAQ;AAAA,QAC7CE,KAAU,OAAO,gBAAAhD,EAAC,SAAI,WAAU,yBAAyB,aAAO,IAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhF,CAAC;AAEM,SAASsD,KAAc;AAC5B,SAAOC,EAAW9C,CAAe;AACnC;"}

package/dist/components/feedBack/snackbar/useSnackbarsPortal.d.ts

@@ -0,0 +1,3 @@
+export declare function useSnackbarsPortal(): {
+    snackbarDomRoot: HTMLElement | null;
+};

package/dist/components/feedBack/snackbar/useSnackbarsPortal.js

@@ -0,0 +1,16 @@
+import { useState as r } from "react";
+import { v4 as n } from "uuid";
+import { useSafeLayoutEffect as m } from "../../../hooks/useSafeLayoutEffect.js";
+function d() {
+  const [t, o] = r(null);
+  return m(() => {
+    const e = document.createElement("div");
+    return e.id = `snackbar-portal-${n()}`, document.body.prepend(e), o(e), () => {
+      document.body.removeChild(e);
+    };
+  }, []), { snackbarDomRoot: t };
+}
+export {
+  d as useSnackbarsPortal
+};
+//# sourceMappingURL=useSnackbarsPortal.js.map

package/dist/components/feedBack/snackbar/useSnackbarsPortal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSnackbarsPortal.js","sources":["../../../../src/components/feedBack/snackbar/useSnackbarsPortal.ts"],"sourcesContent":["import { useState } from \"react\";\nimport { v4 } from \"uuid\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\n\nexport function useSnackbarsPortal() {\n  const [domElement, setDomElement] = useState<HTMLElement | null>(null);\n\n  useSafeLayoutEffect(() => {\n    const element = document.createElement(\"div\");\n    element.id = `snackbar-portal-${v4()}`;\n    document.body.prepend(element);\n\n    setDomElement(element);\n\n    return () => {\n      document.body.removeChild(element);\n    };\n  }, []);\n\n  return { snackbarDomRoot: domElement };\n}\n"],"names":["useSnackbarsPortal","domElement","setDomElement","useState","useSafeLayoutEffect","element","v4"],"mappings":";;;AAIO,SAASA,IAAqB;AACnC,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAA6B,IAAI;AAErE,SAAAC,EAAoB,MAAM;AACxB,UAAMC,IAAU,SAAS,cAAc,KAAK;AAC5C,WAAAA,EAAQ,KAAK,mBAAmBC,EAAA,CAAI,IACpC,SAAS,KAAK,QAAQD,CAAO,GAE7BH,EAAcG,CAAO,GAEd,MAAM;AACX,eAAS,KAAK,YAAYA,CAAO;AAAA,IACnC;AAAA,EACF,GAAG,CAAA,CAAE,GAEE,EAAE,iBAAiBJ,EAAA;AAC5B;"}

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

@@ -0,0 +1,2 @@
+export { default as Tooltip } from "./tooltip";
+export type { TooltipProps, TooltipTrigger } from "./tooltip";