@unoff/ui 1.21.0

package/dist/components/dialogs/dialog/Dialog.d.ts

@@ -0,0 +1,81 @@
+
+export interface DialogProps {
+    /**
+     * Title of the dialog
+     */
+    title: string;
+    /**
+     * Optional tag displayed next to the title
+     */
+    tag?: string;
+    /**
+     * Configuration for action buttons
+     */
+    actions?: {
+        /** Primary action button */
+        primary?: {
+            label: string;
+            state?: 'DEFAULT' | 'DISABLED' | 'LOADING';
+            feature?: string;
+            isAutofocus?: boolean;
+            action: React.ReactEventHandler | (() => void);
+        };
+        /** Destructive action button */
+        destructive?: {
+            label: string;
+            state?: 'DEFAULT' | 'DISABLED' | 'LOADING';
+            feature?: string;
+            isAutofocus?: boolean;
+            action: React.ReactEventHandler | (() => void);
+        };
+        /** Secondary action button */
+        secondary?: {
+            label: string;
+            state?: 'DEFAULT' | 'DISABLED' | 'LOADING';
+            feature?: string;
+            isAutofocus?: boolean;
+            action: React.ReactEventHandler | (() => void);
+        };
+    };
+    /**
+     * Select/checkbox configuration
+     */
+    select?: {
+        /** Label for the select */
+        label: string;
+        /** Current state */
+        state: boolean;
+        /** Change handler */
+        action: React.ChangeEventHandler<HTMLInputElement>;
+    };
+    /**
+     * Optional indicator text
+     */
+    indicator?: string;
+    /**
+     * Position of the dialog
+     * @default 'CENTER'
+     */
+    pin?: 'CENTER' | 'RIGHT';
+    /**
+     * Whether the dialog is in loading state
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Whether to use message layout
+     * @default false
+     */
+    isMessage?: boolean;
+    /**
+     * Dialog content
+     */
+    children?: React.ReactNode;
+    /**
+     * Close handler
+     */
+    onClose: React.ReactEventHandler;
+}
+declare const Dialog: (props: DialogProps) => import("react/jsx-runtime").JSX.Element;
+export default Dialog;
+//# sourceMappingURL=Dialog.d.ts.map

package/dist/components/dialogs/dialog/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/dialogs/dialog/Dialog.tsx"],"names":[],"mappings":";AAEA,OAAO,eAAe,CAAA;AAGtB,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,OAAO,CAAC,EAAE;QACR,4BAA4B;QAC5B,OAAO,CAAC,EAAE;YACR,KAAK,EAAE,MAAM,CAAA;YACb,KAAK,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAA;YAC1C,OAAO,CAAC,EAAE,MAAM,CAAA;YAChB,WAAW,CAAC,EAAE,OAAO,CAAA;YACrB,MAAM,EAAE,KAAK,CAAC,iBAAiB,GAAG,CAAC,MAAM,IAAI,CAAC,CAAA;SAC/C,CAAA;QACD,gCAAgC;QAChC,WAAW,CAAC,EAAE;YACZ,KAAK,EAAE,MAAM,CAAA;YACb,KAAK,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAA;YAC1C,OAAO,CAAC,EAAE,MAAM,CAAA;YAChB,WAAW,CAAC,EAAE,OAAO,CAAA;YACrB,MAAM,EAAE,KAAK,CAAC,iBAAiB,GAAG,CAAC,MAAM,IAAI,CAAC,CAAA;SAC/C,CAAA;QACD,8BAA8B;QAC9B,SAAS,CAAC,EAAE;YACV,KAAK,EAAE,MAAM,CAAA;YACb,KAAK,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAA;YAC1C,OAAO,CAAC,EAAE,MAAM,CAAA;YAChB,WAAW,CAAC,EAAE,OAAO,CAAA;YACrB,MAAM,EAAE,KAAK,CAAC,iBAAiB,GAAG,CAAC,MAAM,IAAI,CAAC,CAAA;SAC/C,CAAA;KACF,CAAA;IACD;;OAEG;IACH,MAAM,CAAC,EAAE;QACP,2BAA2B;QAC3B,KAAK,EAAE,MAAM,CAAA;QACb,oBAAoB;QACpB,KAAK,EAAE,OAAO,CAAA;QACd,qBAAqB;QACrB,MAAM,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAA;KACnD,CAAA;IACD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,GAAG,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAA;CACjC;AAED,QAAA,MAAM,MAAM,UAAW,WAAW,4CAqDjC,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/components/dialogs/dialog/Dialog.js

@@ -0,0 +1,58 @@
+import '../../../assets/Dialog.css';
+import { jsx as n } from "react/jsx-runtime";
+import { useEffect as u } from "react";
+import E from "../../slots/popin/Popin.js";
+import { t as y } from "../../../do-classnames-DSDFCvzy.js";
+const P = (i) => {
+  const {
+    title: t,
+    actions: s,
+    select: l,
+    indicator: d,
+    tag: c,
+    pin: a = "CENTER",
+    isLoading: m = !1,
+    isMessage: g = !1,
+    children: f,
+    onClose: o
+  } = i;
+  u(() => {
+    const e = (r) => r.key === "Escape" && o(r);
+    return document.addEventListener("keydown", e), () => {
+      document.removeEventListener("keydown", e);
+    };
+  }, [o]);
+  const p = (e) => {
+    e.currentTarget === e.target && o(e);
+  };
+  return /* @__PURE__ */ n(
+    "dialog",
+    {
+      className: y(["dialog", a === "RIGHT" && "dialog--right"]),
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": t,
+      tabIndex: -1,
+      onMouseDown: p,
+      children: /* @__PURE__ */ n(
+        E,
+        {
+          type: a === "RIGHT" ? "PANEL" : "POPIN",
+          title: t,
+          actions: s,
+          select: l,
+          indicator: d,
+          tag: c,
+          isLoading: m,
+          isMessage: g,
+          onClose: o,
+          children: f
+        }
+      )
+    }
+  );
+};
+export {
+  P as default
+};
+//# sourceMappingURL=Dialog.js.map

package/dist/components/dialogs/dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sources":["../../../../src/components/dialogs/dialog/Dialog.tsx"],"sourcesContent":["import { SyntheticEvent, useEffect } from 'react'\nimport PopIn from '@components/slots/popin/Popin'\nimport './dialog.scss'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\n\nexport interface DialogProps {\n  /**\n   * Title of the dialog\n   */\n  title: string\n  /**\n   * Optional tag displayed next to the title\n   */\n  tag?: string\n  /**\n   * Configuration for action buttons\n   */\n  actions?: {\n    /** Primary action button */\n    primary?: {\n      label: string\n      state?: 'DEFAULT' | 'DISABLED' | 'LOADING'\n      feature?: string\n      isAutofocus?: boolean\n      action: React.ReactEventHandler | (() => void)\n    }\n    /** Destructive action button */\n    destructive?: {\n      label: string\n      state?: 'DEFAULT' | 'DISABLED' | 'LOADING'\n      feature?: string\n      isAutofocus?: boolean\n      action: React.ReactEventHandler | (() => void)\n    }\n    /** Secondary action button */\n    secondary?: {\n      label: string\n      state?: 'DEFAULT' | 'DISABLED' | 'LOADING'\n      feature?: string\n      isAutofocus?: boolean\n      action: React.ReactEventHandler | (() => void)\n    }\n  }\n  /**\n   * Select/checkbox configuration\n   */\n  select?: {\n    /** Label for the select */\n    label: string\n    /** Current state */\n    state: boolean\n    /** Change handler */\n    action: React.ChangeEventHandler<HTMLInputElement>\n  }\n  /**\n   * Optional indicator text\n   */\n  indicator?: string\n  /**\n   * Position of the dialog\n   * @default 'CENTER'\n   */\n  pin?: 'CENTER' | 'RIGHT'\n  /**\n   * Whether the dialog is in loading state\n   * @default false\n   */\n  isLoading?: boolean\n  /**\n   * Whether to use message layout\n   * @default false\n   */\n  isMessage?: boolean\n  /**\n   * Dialog content\n   */\n  children?: React.ReactNode\n  /**\n   * Close handler\n   */\n  onClose: React.ReactEventHandler\n}\n\nconst Dialog = (props: DialogProps) => {\n  const {\n    title,\n    actions,\n    select,\n    indicator,\n    tag,\n    pin = 'CENTER',\n    isLoading = false,\n    isMessage = false,\n    children,\n    onClose,\n  } = props\n\n  useEffect(() => {\n    const handleEscapeKey = (event: KeyboardEvent) =>\n      event.key === 'Escape' && onClose(event as unknown as SyntheticEvent)\n\n    document.addEventListener('keydown', handleEscapeKey)\n\n    return () => {\n      document.removeEventListener('keydown', handleEscapeKey)\n    }\n  }, [onClose])\n\n  const closeHandler = (e: SyntheticEvent) => {\n    if (e.currentTarget === e.target) onClose(e)\n  }\n\n  return (\n    <dialog\n      className={doClassnames(['dialog', pin === 'RIGHT' && 'dialog--right'])}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label={title}\n      tabIndex={-1}\n      onMouseDown={closeHandler}\n    >\n      <PopIn\n        type={pin === 'RIGHT' ? 'PANEL' : 'POPIN'}\n        title={title}\n        actions={actions}\n        select={select}\n        indicator={indicator}\n        tag={tag}\n        isLoading={isLoading}\n        isMessage={isMessage}\n        onClose={onClose}\n      >\n        {children}\n      </PopIn>\n    </dialog>\n  )\n}\n\nexport default Dialog\n"],"names":["Dialog","props","title","actions","select","indicator","tag","pin","isLoading","isMessage","children","onClose","useEffect","handleEscapeKey","event","closeHandler","jsx","doClassnames","PopIn"],"mappings":";;;;AAmFA,MAAMA,IAAS,CAACC,MAAuB;AACrC,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,KAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,WAAAC,IAAY;AAAA,IACZ,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,SAAAC;AAAA,EAAA,IACEV;AAEJ,EAAAW,EAAU,MAAM;AACd,UAAMC,IAAkB,CAACC,MACvBA,EAAM,QAAQ,YAAYH,EAAQG,CAAkC;AAEtE,oBAAS,iBAAiB,WAAWD,CAAe,GAE7C,MAAM;AACX,eAAS,oBAAoB,WAAWA,CAAe;AAAA,IACzD;AAAA,EACF,GAAG,CAACF,CAAO,CAAC;AAEZ,QAAMI,IAAe,CAAC,MAAsB;AAC1C,IAAI,EAAE,kBAAkB,EAAE,YAAgB,CAAC;AAAA,EAC7C;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAa,CAAC,UAAUV,MAAQ,WAAW,eAAe,CAAC;AAAA,MACtE,MAAK;AAAA,MACL,cAAW;AAAA,MACX,cAAYL;AAAA,MACZ,UAAU;AAAA,MACV,aAAaa;AAAA,MAEb,UAAA,gBAAAC;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,MAAMX,MAAQ,UAAU,UAAU;AAAA,UAClC,OAAAL;AAAA,UACA,SAAAC;AAAA,UACA,QAAAC;AAAA,UACA,WAAAC;AAAA,UACA,KAAAC;AAAA,UACA,WAAAE;AAAA,UACA,WAAAC;AAAA,UACA,SAAAE;AAAA,UAEC,UAAAD;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;"}

package/dist/components/dialogs/message/Message.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { IconList } from '../../../types/icon.types';
+
+export interface MessageProps {
+    /**
+     * Icon to display with the message
+     */
+    icon: IconList;
+    /**
+     * Array of message strings to display
+     */
+    messages: Array<string>;
+    /**
+     * Whether the message is blocked
+     * @default false
+     */
+    isBlocked?: boolean;
+}
+export default class Message extends React.Component<MessageProps> {
+    static defaultProps: Partial<MessageProps>;
+    SingleMessage: () => import("react/jsx-runtime").JSX.Element;
+    MultipleMessages: () => import("react/jsx-runtime").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+//# sourceMappingURL=Message.d.ts.map

package/dist/components/dialogs/message/Message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../../src/components/dialogs/message/Message.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,gBAAgB,CAAA;AAEvB,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAA;IACd;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,KAAK,CAAC,SAAS,CAAC,YAAY,CAAC;IAChE,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,YAAY,CAAC,CAEzC;IAGD,aAAa,gDAuBZ;IAED,gBAAgB,gDAiFf;IAGD,MAAM;CAMP"}

package/dist/components/dialogs/message/Message.js

@@ -0,0 +1,141 @@
+import '../../../assets/Message.css';
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import l from "react";
+import n from "../../../styles/texts/texts.module.js";
+import { Icon as o } from "../../assets/icon/Icon.js";
+import { t as a } from "../../../do-classnames-DSDFCvzy.js";
+class _ extends l.Component {
+  static defaultProps = {
+    isBlocked: !1
+  };
+  // Templates
+  SingleMessage = () => {
+    const { icon: i, messages: s, isBlocked: t } = this.props;
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        className: a(["message", t && "message--blocked"]),
+        role: "status",
+        "aria-live": "polite",
+        children: [
+          /* @__PURE__ */ e(
+            o,
+            {
+              type: "PICTO",
+              iconName: i,
+              customClassName: "icon",
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: a([n.type, "message__msg"]),
+              role: "presentation",
+              children: s[0]
+            }
+          )
+        ]
+      }
+    );
+  };
+  MultipleMessages = () => {
+    const { icon: i, messages: s } = this.props;
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        className: "message message--multiple",
+        role: "status",
+        "aria-live": "polite",
+        children: [
+          /* @__PURE__ */ e(
+            o,
+            {
+              type: "PICTO",
+              iconName: i,
+              customClassName: "icon",
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: "message__ticker",
+              role: "marquee",
+              children: [
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: "message__tips",
+                    style: {
+                      animation: `ticker ${s.length * 5e3}ms 0ms linear infinite`
+                    },
+                    role: "presentation",
+                    children: s.map((t, m) => /* @__PURE__ */ r(l.Fragment, { children: [
+                      /* @__PURE__ */ e(
+                        "div",
+                        {
+                          className: a([n.type, "message__msg"]),
+                          role: "presentation",
+                          children: t
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        "div",
+                        {
+                          className: a([n.type, "message__msg"]),
+                          role: "presentation",
+                          "aria-hidden": "true",
+                          children: "﹒"
+                        }
+                      )
+                    ] }, `message-${m}`))
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: "message__tips",
+                    style: {
+                      animation: `ticker ${s.length * 5e3}ms 0ms linear infinite`
+                    },
+                    role: "presentation",
+                    "aria-hidden": "true",
+                    children: s.map((t, m) => /* @__PURE__ */ r(l.Fragment, { children: [
+                      /* @__PURE__ */ e(
+                        "div",
+                        {
+                          className: a([n.type, "message__msg"]),
+                          role: "presentation",
+                          children: t
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        "div",
+                        {
+                          className: a([n.type, "message__msg"]),
+                          role: "presentation",
+                          "aria-hidden": "true",
+                          children: "﹒"
+                        }
+                      )
+                    ] }, `message-${m}`))
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  };
+  // Render
+  render() {
+    const { messages: i } = this.props;
+    return i.length > 1 ? this.MultipleMessages() : this.SingleMessage();
+  }
+}
+export {
+  _ as default
+};
+//# sourceMappingURL=Message.js.map

package/dist/components/dialogs/message/Message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Message.js","sources":["../../../../src/components/dialogs/message/Message.tsx"],"sourcesContent":["import React from 'react'\nimport texts from '@styles/texts/texts.module.scss'\nimport Icon from '@components/assets/icon/Icon'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\nimport type { IconList } from '@tps/icon.types'\nimport './message.scss'\n\nexport interface MessageProps {\n  /**\n   * Icon to display with the message\n   */\n  icon: IconList\n  /**\n   * Array of message strings to display\n   */\n  messages: Array<string>\n  /**\n   * Whether the message is blocked\n   * @default false\n   */\n  isBlocked?: boolean\n}\n\nexport default class Message extends React.Component<MessageProps> {\n  static defaultProps: Partial<MessageProps> = {\n    isBlocked: false,\n  }\n\n  // Templates\n  SingleMessage = () => {\n    const { icon, messages, isBlocked } = this.props\n\n    return (\n      <div\n        className={doClassnames(['message', isBlocked && 'message--blocked'])}\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        <Icon\n          type=\"PICTO\"\n          iconName={icon}\n          customClassName=\"icon\"\n          aria-hidden=\"true\"\n        />\n        <div\n          className={doClassnames([texts.type, 'message__msg'])}\n          role=\"presentation\"\n        >\n          {messages[0]}\n        </div>\n      </div>\n    )\n  }\n\n  MultipleMessages = () => {\n    const { icon, messages } = this.props\n\n    return (\n      <div\n        className=\"message message--multiple\"\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        <Icon\n          type=\"PICTO\"\n          iconName={icon}\n          customClassName=\"icon\"\n          aria-hidden=\"true\"\n        />\n        <div\n          className=\"message__ticker\"\n          role=\"marquee\"\n        >\n          <div\n            className=\"message__tips\"\n            style={{\n              animation: `ticker ${\n                messages.length * 5000\n              }ms 0ms linear infinite`,\n            }}\n            role=\"presentation\"\n          >\n            {messages.map((message, index) => {\n              return (\n                <React.Fragment key={`message-${index}`}>\n                  <div\n                    className={doClassnames([texts.type, 'message__msg'])}\n                    role=\"presentation\"\n                  >\n                    {message}\n                  </div>\n                  <div\n                    className={doClassnames([texts.type, 'message__msg'])}\n                    role=\"presentation\"\n                    aria-hidden=\"true\"\n                  >\n                    ﹒\n                  </div>\n                </React.Fragment>\n              )\n            })}\n          </div>\n          <div\n            className=\"message__tips\"\n            style={{\n              animation: `ticker ${\n                messages.length * 5000\n              }ms 0ms linear infinite`,\n            }}\n            role=\"presentation\"\n            aria-hidden=\"true\"\n          >\n            {messages.map((message, index) => {\n              return (\n                <React.Fragment key={`message-${index}`}>\n                  <div\n                    className={doClassnames([texts.type, 'message__msg'])}\n                    role=\"presentation\"\n                  >\n                    {message}\n                  </div>\n                  <div\n                    className={doClassnames([texts.type, 'message__msg'])}\n                    role=\"presentation\"\n                    aria-hidden=\"true\"\n                  >\n                    ﹒\n                  </div>\n                </React.Fragment>\n              )\n            })}\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  // Render\n  render() {\n    const { messages } = this.props\n\n    if (messages.length > 1) return this.MultipleMessages()\n    return this.SingleMessage()\n  }\n}\n"],"names":["Message","React","icon","messages","isBlocked","jsxs","doClassnames","jsx","Icon","texts","message","index"],"mappings":"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"}

package/dist/components/dialogs/notification/Notification.d.ts

@@ -0,0 +1,22 @@
+
+export interface NotificationProps {
+    /**
+     * Type of notification determining its visual style
+     */
+    type: 'NEUTRAL' | 'INFO' | 'SUCCESS' | 'WARNING' | 'ERROR';
+    /**
+     * Message content to display
+     */
+    message: string;
+    /**
+     * Auto-close timer in milliseconds (0 or undefined for no auto-close)
+     */
+    timer?: number;
+    /**
+     * Close handler
+     */
+    onClose: React.ReactEventHandler;
+}
+declare const Notification: (props: NotificationProps) => import("react/jsx-runtime").JSX.Element;
+export default Notification;
+//# sourceMappingURL=Notification.d.ts.map

package/dist/components/dialogs/notification/Notification.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../../../src/components/dialogs/notification/Notification.tsx"],"names":[],"mappings":";AAGA,OAAO,qBAAqB,CAAA;AAE5B,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;IAC1D;;OAEG;IACH,OAAO,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAA;CACjC;AAED,QAAA,MAAM,YAAY,UAAW,iBAAiB,4CA4B7C,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/components/dialogs/notification/Notification.js

@@ -0,0 +1,38 @@
+import '../../../assets/Notification.css';
+import { jsx as t } from "react/jsx-runtime";
+import n from "../../actions/button/Button.js";
+import { t as s } from "../../../do-classnames-DSDFCvzy.js";
+import m from "../semantic-message/SemanticMessage.js";
+const d = (e) => {
+  const { type: r, message: a, timer: o, onClose: i } = e;
+  return o !== void 0 && o > 0 && setTimeout(() => {
+    i({});
+  }, o), /* @__PURE__ */ t(
+    "div",
+    {
+      className: s(["notification"]),
+      role: "alert",
+      "aria-live": "polite",
+      tabIndex: -1,
+      children: /* @__PURE__ */ t(
+        m,
+        {
+          type: r,
+          message: a,
+          actionsSlot: /* @__PURE__ */ t(
+            n,
+            {
+              type: "icon",
+              icon: "close",
+              action: i
+            }
+          )
+        }
+      )
+    }
+  );
+};
+export {
+  d as default
+};
+//# sourceMappingURL=Notification.js.map

package/dist/components/dialogs/notification/Notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.js","sources":["../../../../src/components/dialogs/notification/Notification.tsx"],"sourcesContent":["import Button from '@components/actions/button/Button'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\nimport SemanticMessage from '../semantic-message/SemanticMessage'\nimport './notification.scss'\n\nexport interface NotificationProps {\n  /**\n   * Type of notification determining its visual style\n   */\n  type: 'NEUTRAL' | 'INFO' | 'SUCCESS' | 'WARNING' | 'ERROR'\n  /**\n   * Message content to display\n   */\n  message: string\n  /**\n   * Auto-close timer in milliseconds (0 or undefined for no auto-close)\n   */\n  timer?: number\n  /**\n   * Close handler\n   */\n  onClose: React.ReactEventHandler\n}\n\nconst Notification = (props: NotificationProps) => {\n  const { type, message, timer, onClose } = props\n\n  if (timer !== undefined && timer > 0)\n    setTimeout(() => {\n      onClose({} as React.SyntheticEvent)\n    }, timer)\n\n  return (\n    <div\n      className={doClassnames(['notification'])}\n      role=\"alert\"\n      aria-live=\"polite\"\n      tabIndex={-1}\n    >\n      <SemanticMessage\n        type={type}\n        message={message}\n        actionsSlot={\n          <Button\n            type=\"icon\"\n            icon=\"close\"\n            action={onClose}\n          />\n        }\n      />\n    </div>\n  )\n}\n\nexport default Notification\n"],"names":["Notification","props","type","message","timer","onClose","jsx","doClassnames","SemanticMessage","Button"],"mappings":";;;;AAwBA,MAAMA,IAAe,CAACC,MAA6B;AACjD,QAAM,EAAE,MAAAC,GAAM,SAAAC,GAAS,OAAAC,GAAO,SAAAC,MAAYJ;AAE1C,SAAIG,MAAU,UAAaA,IAAQ,KACjC,WAAW,MAAM;AACf,IAAAC,EAAQ,CAAA,CAA0B;AAAA,EACpC,GAAGD,CAAK,GAGR,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAa,CAAC,cAAc,CAAC;AAAA,MACxC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,UAAU;AAAA,MAEV,UAAA,gBAAAD;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,MAAAN;AAAA,UACA,SAAAC;AAAA,UACA,aACE,gBAAAG;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAK;AAAA,cACL,QAAQJ;AAAA,YAAA;AAAA,UAAA;AAAA,QACV;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAGN;"}

package/dist/components/dialogs/semantic-message/SemanticMessage.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+import { IconList } from '../../../types/icon.types';
+
+export interface SemanticMessageProps {
+    /**
+     * Type of message determining its visual style and icon
+     */
+    type: 'NEUTRAL' | 'INFO' | 'SUCCESS' | 'WARNING' | 'ERROR';
+    /**
+     * Message content to display
+     */
+    message: string;
+    /**
+     * Whether the message is anchored to its position
+     * @default false
+     */
+    isAnchored?: boolean;
+    /**
+     * Layout orientation
+     * @default 'HORIZONTAL'
+     */
+    orientation?: 'HORIZONTAL' | 'VERTICAL';
+    /**
+     * Optional action buttons slot
+     */
+    actionsSlot?: React.ReactNode;
+}
+export interface SemanticMessageStates {
+    documentWidth: number;
+}
+export default class SemanticMessage extends React.Component<SemanticMessageProps, SemanticMessageStates> {
+    static defaultProps: Partial<SemanticMessageProps>;
+    constructor(props: SemanticMessageProps);
+    componentDidMount: () => void;
+    componentWillUnmount: () => void;
+    handleResize: () => void;
+    setIcon: (type: string) => IconList;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+//# sourceMappingURL=SemanticMessage.d.ts.map

package/dist/components/dialogs/semantic-message/SemanticMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SemanticMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/dialogs/semantic-message/SemanticMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAI1C,OAAO,yBAAyB,CAAA;AAEhC,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;IAC1D;;OAEG;IACH,OAAO,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC9B;AAED,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAC1D,oBAAoB,EACpB,qBAAqB,CACtB;IACC,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAGjD;gBAEW,KAAK,EAAE,oBAAoB;IAWvC,iBAAiB,aAEhB;IAED,oBAAoB,aAEnB;IAGD,YAAY,aAEX;IAED,OAAO,SAAU,MAAM,KAAG,QAAQ,CAMjC;IAGD,MAAM;CAuCP"}

package/dist/components/dialogs/semantic-message/SemanticMessage.js

@@ -0,0 +1,71 @@
+import '../../../assets/SemanticMessage.css';
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import l from "react";
+import s from "../../../styles/layouts.module.js";
+import { t as i } from "../../../do-classnames-DSDFCvzy.js";
+import u from "../message/Message.js";
+class w extends l.Component {
+  static defaultProps = {
+    orientation: "HORIZONTAL",
+    isAnchored: !1
+  };
+  constructor(e) {
+    super(e), this.state = {
+      documentWidth: typeof document < "u" ? document.documentElement.clientWidth : 1024
+    };
+  }
+  // Lifecycle
+  componentDidMount = () => {
+    window.addEventListener("resize", this.handleResize);
+  };
+  componentWillUnmount = () => {
+    window.removeEventListener("resize", this.handleResize);
+  };
+  // Handlers
+  handleResize = () => {
+    this.setState({ documentWidth: document.documentElement.clientWidth });
+  };
+  setIcon = (e) => e === "SUCCESS" ? "check" : e === "WARNING" ? "warning" : e === "ERROR" ? "alert" : "info";
+  // Render
+  render() {
+    const { type: e, message: o, isAnchored: a, orientation: r, actionsSlot: n } = this.props, { documentWidth: c } = this.state, m = c <= 460 ? "VERTICAL" : r;
+    return /* @__PURE__ */ d(
+      "div",
+      {
+        className: i([
+          "semantic-message",
+          `semantic-message--${e.toLowerCase()}`,
+          m === "VERTICAL" && "semantic-message--vertical",
+          a && "semantic-message--anchored"
+        ]),
+        role: "status",
+        children: [
+          /* @__PURE__ */ t("div", { className: "semantic-message__body", children: /* @__PURE__ */ t(
+            u,
+            {
+              icon: this.setIcon(e),
+              messages: [o]
+            }
+          ) }),
+          n !== void 0 && /* @__PURE__ */ t(
+            "div",
+            {
+              className: i([
+                s["snackbar--medium"],
+                s["snackbar--wrap"],
+                s["snackbar--center"],
+                "semantic-message__actions"
+              ]),
+              role: "toolbar",
+              children: n
+            }
+          )
+        ]
+      }
+    );
+  }
+}
+export {
+  w as default
+};
+//# sourceMappingURL=SemanticMessage.js.map

package/dist/components/dialogs/semantic-message/SemanticMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SemanticMessage.js","sources":["../../../../src/components/dialogs/semantic-message/SemanticMessage.tsx"],"sourcesContent":["import React from 'react'\nimport { IconList } from '@tps/icon.types'\nimport layouts from '@styles/layouts.module.scss'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\nimport Message from '../message/Message'\nimport './semantic-message.scss'\n\nexport interface SemanticMessageProps {\n  /**\n   * Type of message determining its visual style and icon\n   */\n  type: 'NEUTRAL' | 'INFO' | 'SUCCESS' | 'WARNING' | 'ERROR'\n  /**\n   * Message content to display\n   */\n  message: string\n  /**\n   * Whether the message is anchored to its position\n   * @default false\n   */\n  isAnchored?: boolean\n  /**\n   * Layout orientation\n   * @default 'HORIZONTAL'\n   */\n  orientation?: 'HORIZONTAL' | 'VERTICAL'\n  /**\n   * Optional action buttons slot\n   */\n  actionsSlot?: React.ReactNode\n}\n\nexport interface SemanticMessageStates {\n  documentWidth: number\n}\n\nexport default class SemanticMessage extends React.Component<\n  SemanticMessageProps,\n  SemanticMessageStates\n> {\n  static defaultProps: Partial<SemanticMessageProps> = {\n    orientation: 'HORIZONTAL',\n    isAnchored: false,\n  }\n\n  constructor(props: SemanticMessageProps) {\n    super(props)\n    this.state = {\n      documentWidth:\n        typeof document !== 'undefined'\n          ? document.documentElement.clientWidth\n          : 1024,\n    }\n  }\n\n  // Lifecycle\n  componentDidMount = () => {\n    window.addEventListener('resize', this.handleResize)\n  }\n\n  componentWillUnmount = () => {\n    window.removeEventListener('resize', this.handleResize)\n  }\n\n  // Handlers\n  handleResize = () => {\n    this.setState({ documentWidth: document.documentElement.clientWidth })\n  }\n\n  setIcon = (type: string): IconList => {\n    if (type === 'SUCCESS') return 'check'\n    else if (type === 'WARNING') return 'warning'\n    else if (type === 'ERROR') return 'alert'\n\n    return 'info'\n  }\n\n  // Render\n  render() {\n    const { type, message, isAnchored, orientation, actionsSlot } = this.props\n    const { documentWidth } = this.state\n\n    const isResponsiveVertical = documentWidth <= 460\n    const effectiveOrientation = isResponsiveVertical ? 'VERTICAL' : orientation\n\n    return (\n      <div\n        className={doClassnames([\n          'semantic-message',\n          `semantic-message--${type.toLowerCase()}`,\n          effectiveOrientation === 'VERTICAL' && 'semantic-message--vertical',\n          isAnchored && 'semantic-message--anchored',\n        ])}\n        role=\"status\"\n      >\n        <div className=\"semantic-message__body\">\n          <Message\n            icon={this.setIcon(type)}\n            messages={[message]}\n          />\n        </div>\n        {actionsSlot !== undefined && (\n          <div\n            className={doClassnames([\n              layouts['snackbar--medium'],\n              layouts['snackbar--wrap'],\n              layouts['snackbar--center'],\n              'semantic-message__actions',\n            ])}\n            role=\"toolbar\"\n          >\n            {actionsSlot}\n          </div>\n        )}\n      </div>\n    )\n  }\n}\n"],"names":["SemanticMessage","React","props","type","message","isAnchored","orientation","actionsSlot","documentWidth","effectiveOrientation","jsxs","doClassnames","jsx","Message","layouts"],"mappings":";;;;;AAoCA,MAAqBA,UAAwBC,EAAM,UAGjD;AAAA,EACA,OAAO,eAA8C;AAAA,IACnD,aAAa;AAAA,IACb,YAAY;AAAA,EAAA;AAAA,EAGd,YAAYC,GAA6B;AACvC,UAAMA,CAAK,GACX,KAAK,QAAQ;AAAA,MACX,eACE,OAAO,WAAa,MAChB,SAAS,gBAAgB,cACzB;AAAA,IAAA;AAAA,EAEV;AAAA;AAAA,EAGA,oBAAoB,MAAM;AACxB,WAAO,iBAAiB,UAAU,KAAK,YAAY;AAAA,EACrD;AAAA,EAEA,uBAAuB,MAAM;AAC3B,WAAO,oBAAoB,UAAU,KAAK,YAAY;AAAA,EACxD;AAAA;AAAA,EAGA,eAAe,MAAM;AACnB,SAAK,SAAS,EAAE,eAAe,SAAS,gBAAgB,aAAa;AAAA,EACvE;AAAA,EAEA,UAAU,CAACC,MACLA,MAAS,YAAkB,UACtBA,MAAS,YAAkB,YAC3BA,MAAS,UAAgB,UAE3B;AAAA;AAAA,EAIT,SAAS;AACP,UAAM,EAAE,MAAAA,GAAM,SAAAC,GAAS,YAAAC,GAAY,aAAAC,GAAa,aAAAC,EAAA,IAAgB,KAAK,OAC/D,EAAE,eAAAC,MAAkB,KAAK,OAGzBC,IADuBD,KAAiB,MACM,aAAaF;AAEjE,WACE,gBAAAI;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAa;AAAA,UACtB;AAAA,UACA,qBAAqBR,EAAK,YAAA,CAAa;AAAA,UACvCM,MAAyB,cAAc;AAAA,UACvCJ,KAAc;AAAA,QAAA,CACf;AAAA,QACD,MAAK;AAAA,QAEL,UAAA;AAAA,UAAA,gBAAAO,EAAC,OAAA,EAAI,WAAU,0BACb,UAAA,gBAAAA;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,MAAM,KAAK,QAAQV,CAAI;AAAA,cACvB,UAAU,CAACC,CAAO;AAAA,YAAA;AAAA,UAAA,GAEtB;AAAA,UACCG,MAAgB,UACf,gBAAAK;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,EAAa;AAAA,gBACtBG,EAAQ,kBAAkB;AAAA,gBAC1BA,EAAQ,gBAAgB;AAAA,gBACxBA,EAAQ,kBAAkB;AAAA,gBAC1B;AAAA,cAAA,CACD;AAAA,cACD,MAAK;AAAA,cAEJ,UAAAP;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;"}