fictoan-react 2.0.0-beta.17 → 2.0.0-beta.18

package/dist/components/Form/TextArea/TextArea.js

@@ -0,0 +1,111 @@
+"use client";
+import { jsx as o, jsxs as w, Fragment as K } from "react/jsx-runtime";
+import $, { useRef as O } from "react";
+import { separateWrapperProps as Q } from "../../../utils/propSeparation.js";
+/* empty css             */
+import { deriveAriaIds as U, FormItem as V } from "../FormItem/FormItem.js";
+import { Element as X } from "../../Element/Element.js";
+const I = (s, a) => s > a ? "exceeded" : s >= a * 0.9 ? "warning" : "normal", m = (s, a, i) => Math.abs(s) === 1 ? a : i, Y = $.forwardRef(
+  ({
+    // FormItem props
+    label: s,
+    hideLabel: a,
+    helpText: i,
+    errorText: h,
+    size: N,
+    required: f,
+    // TextArea-specific
+    onChange: u,
+    value: x = "",
+    characterLimit: l,
+    wordLimit: d,
+    // Input props
+    id: R,
+    name: b,
+    rows: y,
+    cols: F,
+    minLength: M,
+    maxLength: A,
+    placeholder: B,
+    readOnly: E,
+    disabled: P,
+    autoComplete: S,
+    // Validation (unused but destructured to not pass to DOM)
+    validateThis: Z,
+    valid: _,
+    invalid: W,
+    ...j
+  }, p) => {
+    const H = O(null), T = (t) => {
+      u == null || u(t.target.value);
+    }, k = () => {
+      const t = [];
+      if (l) {
+        const r = x.length, n = I(r, l), e = Math.max(0, r - l), c = l - r;
+        t.push(
+          /* @__PURE__ */ o("span", { className: `limit-${n}`, children: e > 0 ? `${e} ${m(e, "char", "chars")} over limit` : `${c} ${m(c, "char", "chars")} left` }, "char-limit")
+        );
+      }
+      if (d) {
+        const r = x.trim().split(/\s+/).filter(Boolean).length, n = I(r, d), e = Math.max(0, r - d), c = d - r;
+        t.push(
+          /* @__PURE__ */ o("span", { className: `limit-${n}`, children: e > 0 ? `${e} ${m(e, "word", "words")} over limit` : `${c} ${m(c, "word", "words")} left` }, "word-limit")
+        );
+      }
+      if (!(!t.length && !i))
+        return /* @__PURE__ */ w(K, { children: [
+          i,
+          i && t.length > 0 && /* @__PURE__ */ o("span", { className: "separator", children: " • " }),
+          t.map((r, n) => /* @__PURE__ */ w($.Fragment, { children: [
+            n > 0 && /* @__PURE__ */ o("span", { className: "separator", children: " • " }),
+            r
+          ] }, n))
+        ] });
+    }, z = (t) => {
+      H.current = t, typeof p == "function" ? p(t) : p && (p.current = t);
+    }, { wrapperProps: C, inputProps: D } = Q(j), G = $.useId(), g = R || `textarea-${G.replace(/:/g, "")}`, v = k(), { describedBy: J } = U(g, v, h);
+    return /* @__PURE__ */ o(
+      V,
+      {
+        label: s,
+        hideLabel: a,
+        htmlFor: g,
+        helpText: v,
+        errorText: h,
+        required: f,
+        size: N,
+        ...C,
+        children: /* @__PURE__ */ o(
+          X,
+          {
+            as: "textarea",
+            ref: z,
+            "data-textarea": !0,
+            id: g,
+            name: b,
+            value: x,
+            rows: y,
+            cols: F,
+            minLength: M,
+            maxLength: A,
+            placeholder: B,
+            readOnly: E,
+            disabled: P,
+            required: f,
+            autoComplete: S,
+            "aria-invalid": !!h || W || void 0,
+            "aria-required": f,
+            "aria-describedby": J,
+            onChange: T,
+            ...D
+          }
+        )
+      }
+    );
+  }
+);
+Y.displayName = "TextArea";
+export {
+  Y as TextArea
+};
+//# sourceMappingURL=TextArea.js.map

package/dist/components/Form/TextArea/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","sources":["../../../../src/components/Form/TextArea/TextArea.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React, { useRef } from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { CommonAndHTMLProps, SpacingTypes } from \"../../Element/constants\";\nimport { Element } from \"$element\";\n\n// UTILS ===============================================================================================================\nimport { separateWrapperProps } from \"../../../utils/propSeparation\";\n\n// STYLES ==============================================================================================================\nimport \"./textarea.css\";\n\n// OTHER ===============================================================================================================\nimport { FormItem, deriveAriaIds } from \"../FormItem/FormItem\";\nimport { InputLabelCustomProps } from \"../InputLabel/InputLabel\";\n\n// TODO Add minimumWordLength prop\n\n// Common input types\nexport interface InputCommonProps {\n    label        ? : string;\n    helpText     ? : string | React.ReactNode;\n    errorText    ? : string;\n    validateThis ? : boolean;\n    valid        ? : boolean;\n    invalid      ? : boolean;\n    required     ? : boolean;\n    disabled     ? : boolean;\n}\n\nexport type TextareaElementType = HTMLTextAreaElement;\nexport type TextareaProps =\n    Omit<CommonAndHTMLProps<TextareaElementType>, \"onChange\" | \"size\"> &\n    InputLabelCustomProps &\n    Omit<InputCommonProps, \"validationState\"> & {\n    id             ? : string;\n    name           ? : string;\n    onChange       ? : (value : string) => void;\n    value          ? : string;\n    rows           ? : number;\n    cols           ? : number;\n    minLength      ? : number;\n    maxLength      ? : number;\n    placeholder    ? : string;\n    readOnly       ? : boolean;\n    required       ? : boolean;\n    disabled       ? : boolean;\n    autoComplete   ? : string;\n    characterLimit ? : number;\n    wordLimit      ? : number;\n    size           ? : Exclude<SpacingTypes, \"nano\" | \"huge\">;\n};\n\n// Helper functions to determine limit states\nconst getLimitState = (current : number, limit : number) : \"normal\" | \"warning\" | \"exceeded\" => {\n    if (current > limit) return \"exceeded\";\n    if (current >= limit * 0.9) return \"warning\";\n    return \"normal\";\n};\n\nconst pluralise = (count : number, singular : string, plural : string) : string => {\n    return Math.abs(count) === 1 ? singular : plural;\n};\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const TextArea = React.forwardRef(\n    (\n        {\n            // FormItem props\n            label,\n            hideLabel,\n            helpText,\n            errorText,\n            size,\n            required,\n            // TextArea-specific\n            onChange,\n            value = \"\",\n            characterLimit,\n            wordLimit,\n            // Input props\n            id,\n            name,\n            rows,\n            cols,\n            minLength,\n            maxLength,\n            placeholder,\n            readOnly,\n            disabled,\n            autoComplete,\n            // Validation (unused but destructured to not pass to DOM)\n            validateThis,\n            valid,\n            invalid,\n            ...props\n        } : TextareaProps,\n        ref : React.Ref<TextareaElementType>,\n    ) => {\n        const textareaRef = useRef<HTMLTextAreaElement | null>(null);\n\n        const handleChange = (e : React.ChangeEvent<HTMLTextAreaElement>) => {\n            onChange?.(e.target.value);\n        };\n\n        const constructHelpText = () : React.ReactNode => {\n            const limitsMessages : React.ReactNode[] = [];\n\n            if (characterLimit) {\n                const currentChars = value.length;\n                const limitState = getLimitState(currentChars, characterLimit);\n                const excessChars = Math.max(0, currentChars - characterLimit);\n                const remaining = characterLimit - currentChars;\n\n                limitsMessages.push(\n                    <span key=\"char-limit\" className={`limit-${limitState}`}>\n                        {excessChars > 0\n                            ? `${excessChars} ${pluralise(excessChars, \"char\", \"chars\")} over limit`\n                            : `${remaining} ${pluralise(remaining, \"char\", \"chars\")} left`}\n                    </span>,\n                );\n            }\n\n            if (wordLimit) {\n                const currentWords = value.trim().split(/\\s+/).filter(Boolean).length;\n                const limitState = getLimitState(currentWords, wordLimit);\n                const excessWords = Math.max(0, currentWords - wordLimit);\n                const remaining = wordLimit - currentWords;\n\n                limitsMessages.push(\n                    <span key=\"word-limit\" className={`limit-${limitState}`}>\n                        {excessWords > 0\n                            ? `${excessWords} ${pluralise(excessWords, \"word\", \"words\")} over limit`\n                            : `${remaining} ${pluralise(remaining, \"word\", \"words\")} left`}\n                    </span>,\n                );\n            }\n\n            if (!limitsMessages.length && !helpText) return undefined;\n\n            return (\n                <>\n                    {helpText}\n                    {helpText && limitsMessages.length > 0 && <span className=\"separator\"> • </span>}\n                    {limitsMessages.map((msg, i) => (\n                        <React.Fragment key={i}>\n                            {i > 0 && <span className=\"separator\"> • </span>}\n                            {msg}\n                        </React.Fragment>\n                    ))}\n                </>\n            );\n        };\n\n        const setRefs = (element : HTMLTextAreaElement | null) => {\n            textareaRef.current = element;\n            if (typeof ref === \"function\") {\n                ref(element);\n            } else if (ref) {\n                (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = element;\n            }\n        };\n\n        // Separate wrapper-level props (margin, padding, etc.) from input-specific props\n        const {wrapperProps, inputProps} = separateWrapperProps(props);\n\n        const reactId = React.useId();\n        const finalId = id || `textarea-${reactId.replace(/:/g, \"\")}`;\n        const constructedHelpText = constructHelpText();\n        const { describedBy } = deriveAriaIds(finalId, constructedHelpText, errorText);\n        const hasError = Boolean(errorText) || invalid;\n\n        return (\n            <FormItem\n                label={label}\n                hideLabel={hideLabel}\n                htmlFor={finalId}\n                helpText={constructedHelpText}\n                errorText={errorText}\n                required={required}\n                size={size}\n                {...wrapperProps}\n            >\n                <Element<TextareaElementType>\n                    as=\"textarea\"\n                    ref={setRefs}\n                    data-textarea\n                    id={finalId}\n                    name={name}\n                    value={value}\n                    rows={rows}\n                    cols={cols}\n                    minLength={minLength}\n                    maxLength={maxLength}\n                    placeholder={placeholder}\n                    readOnly={readOnly}\n                    disabled={disabled}\n                    required={required}\n                    autoComplete={autoComplete}\n                    aria-invalid={hasError || undefined}\n                    aria-required={required}\n                    aria-describedby={describedBy}\n                    onChange={handleChange}\n                    {...inputProps}\n                />\n            </FormItem>\n        );\n    },\n);\nTextArea.displayName = \"TextArea\";\n"],"names":["getLimitState","current","limit","pluralise","count","singular","plural","TextArea","React","label","hideLabel","helpText","errorText","size","required","onChange","value","characterLimit","wordLimit","id","name","rows","cols","minLength","maxLength","placeholder","readOnly","disabled","autoComplete","validateThis","valid","invalid","props","ref","textareaRef","useRef","handleChange","e","constructHelpText","limitsMessages","currentChars","limitState","excessChars","remaining","jsx","currentWords","excessWords","jsxs","Fragment","msg","i","setRefs","element","wrapperProps","inputProps","separateWrapperProps","reactId","finalId","constructedHelpText","describedBy","deriveAriaIds","FormItem","Element"],"mappings":"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"}

package/dist/components/Meter/Meter.js

@@ -0,0 +1,110 @@
+"use client";
+import { jsxs as i, jsx as d } from "react/jsx-runtime";
+import L from "react";
+import { separateWrapperProps as M } from "../../utils/propSeparation.js";
+/* empty css          */
+import { Text as g } from "../Typography/Text.js";
+import { Element as p } from "../Element/Element.js";
+const j = L.forwardRef(
+  ({
+    label: e,
+    value: r,
+    height: h,
+    suffix: c,
+    showOptimumMarker: f,
+    ariaLabel: m,
+    description: n,
+    min: t,
+    max: s,
+    low: $,
+    high: w,
+    optimum: o,
+    ...u
+  }, v) => {
+    const P = o ? (o - t) / (s - t) * 100 : 0, l = () => {
+      const C = (r - t) / (s - t) * 100;
+      let a;
+      return r <= $ ? a = "Low" : r >= w ? a = "High" : a = "Normal", `Current value is ${r}${c || ""} (${C.toFixed(1)}%). Status: ${a}`;
+    }, { wrapperProps: y, inputProps: N } = M(u);
+    return /* @__PURE__ */ i(
+      p,
+      {
+        as: "div",
+        role: "region",
+        "aria-label": m || "Meter indicator",
+        ...y,
+        children: [
+          e && /* @__PURE__ */ i(
+            p,
+            {
+              as: "div",
+              "data-meter-meta": !0,
+              id: `meter-label-${e.toLowerCase().replace(/\s+/g, "-")}`,
+              children: [
+                /* @__PURE__ */ d(g, { children: e }),
+                /* @__PURE__ */ i(g, { children: [
+                  r,
+                  c && c
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ i(
+            "div",
+            {
+              className: "meter-wrapper",
+              role: "presentation",
+              children: [
+                /* @__PURE__ */ d(
+                  p,
+                  {
+                    as: "meter",
+                    "data-meter": !0,
+                    ref: v,
+                    value: r,
+                    min: t,
+                    max: s,
+                    low: $,
+                    high: w,
+                    optimum: o,
+                    ...N,
+                    style: { height: h },
+                    "aria-label": e || m || "Progress meter",
+                    "aria-valuemin": t,
+                    "aria-valuemax": s,
+                    "aria-valuenow": r,
+                    "aria-valuetext": l(),
+                    "aria-describedby": n ? `meter-description-${e == null ? void 0 : e.toLowerCase().replace(/\s+/g, "-")}` : void 0
+                  }
+                ),
+                f && o && /* @__PURE__ */ d(
+                  "div",
+                  {
+                    className: "optimum-marker",
+                    style: { left: `calc(${P}% - var(--meter-border-width))` },
+                    title: `Optimum: ${o}`,
+                    role: "presentation",
+                    "aria-hidden": "true"
+                  }
+                )
+              ]
+            }
+          ),
+          n && /* @__PURE__ */ d(
+            "div",
+            {
+              id: `meter-description-${e == null ? void 0 : e.toLowerCase().replace(/\s+/g, "-")}`,
+              className: "sr-only",
+              children: n
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+j.displayName = "Meter";
+export {
+  j as Meter
+};
+//# sourceMappingURL=Meter.js.map

package/dist/components/Meter/Meter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Meter.js","sources":["../../../src/components/Meter/Meter.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { CommonAndHTMLProps, CommonProps } from \"../Element/constants\";\nimport { Element } from \"$element\";\n\n// UTILS ===============================================================================================================\nimport { separateWrapperProps } from \"../../utils/propSeparation\";\n\n// STYLES ==============================================================================================================\nimport \"./meter.css\";\n\n// OTHER ===============================================================================================================\nimport { Text } from \"../Typography/Text\";\n\nexport interface MeterLabelCustomProps {\n    suffix ? : string;\n}\n\nexport interface MeterCustomProps {\n    min                 : number;\n    max                 : number;\n    low                 : number;\n    high                : number;\n    value               : number;\n    optimum           ? : number;\n    showOptimumMarker ? : boolean;\n    suffix            ? : string;\n    height            ? : string;\n    label             ? : string;\n    ariaLabel         ? : string;\n    description       ? : string;\n}\n\nexport type MeterElementType = HTMLMeterElement;\nexport type MeterProps = MeterCustomProps & CommonProps;\nexport type MeterMetaProps = Omit<CommonAndHTMLProps<HTMLDivElement>, keyof MeterLabelCustomProps> &\n                             MeterLabelCustomProps;\n\n// TODO: Add size for label\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const Meter = React.forwardRef(\n    ({\n        label,\n        value,\n        height,\n        suffix,\n        showOptimumMarker,\n        ariaLabel,\n        description,\n        min,\n        max,\n        low,\n        high,\n        optimum,\n        ...props\n    } : MeterProps, ref : React.Ref<MeterElementType>) => {\n        const optimumPositionPercent = optimum ? (\n            (optimum - min) / (max - min)\n        ) * 100 : 0;\n\n        const getValueDescription = () => {\n            const percentage = (\n                (value - min) / (max - min)\n            ) * 100;\n            let status : string;\n\n            if (value <= low) {\n                status = \"Low\";\n            } else if (value >= high) {\n                status = \"High\";\n            } else {\n                status = \"Normal\";\n            }\n\n            return `Current value is ${value}${suffix || \"\"} (${percentage.toFixed(1)}%). Status: ${status}`;\n        };\n\n        // Separate wrapper-level props (margin, padding, etc.) from meter-specific props\n        const {wrapperProps, inputProps} = separateWrapperProps(props);\n\n        return (\n            <Element<HTMLDivElement>\n                as=\"div\"\n                role=\"region\"\n                aria-label={ariaLabel || \"Meter indicator\"}\n                {...wrapperProps}\n            >\n                {label && (\n                    <Element<HTMLDivElement>\n                        as=\"div\"\n                        data-meter-meta\n                        id={`meter-label-${label.toLowerCase().replace(/\\s+/g, \"-\")}`}\n                    >\n                        <Text>{label}</Text>\n                        <Text>\n                            {value}\n                            {suffix && suffix}\n                        </Text>\n                    </Element>\n                )}\n\n                <div\n                    className=\"meter-wrapper\"\n                    role=\"presentation\"\n                >\n                    <Element<MeterElementType>\n                        as=\"meter\"\n                        data-meter\n                        ref={ref}\n                        value={value}\n                        min={min}\n                        max={max}\n                        low={low}\n                        high={high}\n                        optimum={optimum}\n                        {...inputProps}\n                        style={{height}}\n                        aria-label={label || ariaLabel || \"Progress meter\"}\n                        aria-valuemin={min}\n                        aria-valuemax={max}\n                        aria-valuenow={value}\n                        aria-valuetext={getValueDescription()}\n                        aria-describedby={description ? `meter-description-${label?.toLowerCase()\n                            .replace(/\\s+/g, \"-\")}` : undefined}\n                    />\n\n                    {showOptimumMarker && optimum && (\n                        <div\n                            className=\"optimum-marker\"\n                            style={{left : `calc(${optimumPositionPercent}% - var(--meter-border-width))`}}\n                            title={`Optimum: ${optimum}`}\n                            role=\"presentation\"\n                            aria-hidden=\"true\"\n                        />\n                    )}\n                </div>\n\n                {description && (\n                    <div\n                        id={`meter-description-${label?.toLowerCase().replace(/\\s+/g, \"-\")}`}\n                        className=\"sr-only\"\n                    >\n                        {description}\n                    </div>\n                )}\n            </Element>\n        );\n    },\n);\nMeter.displayName = \"Meter\";"],"names":["Meter","React","label","value","height","suffix","showOptimumMarker","ariaLabel","description","min","max","low","high","optimum","props","ref","optimumPositionPercent","getValueDescription","percentage","status","wrapperProps","inputProps","separateWrapperProps","jsxs","Element","jsx","Text"],"mappings":"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"}

package/dist/components/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAGzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAI1D,OAAO,aAAa,CAAC;AAKrB,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC;AAE9C,MAAM,WAAW,gBAAgB;IACzB,EAAE,EAAgB,MAAM,CAAC;IACzB,MAAc,CAAC,EAAG,OAAO,CAAC;IAC1B,OAAc,CAAC,EAAG,MAAM,IAAI,CAAC;IAC7B,aAAc,CAAC,EAAG,OAAO,CAAC;IAC1B,YAAc,CAAC,EAAG,OAAO,CAAC;IAC1B,YAAc,CAAC,EAAG,OAAO,CAAC;IAC1B,KAAc,CAAC,EAAG,MAAM,CAAC;IACzB,WAAc,CAAC,EAAG,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,EAAE,MAAM,gBAAgB,CAAC,GAAG,gBAAgB,CAAC;AAG/G,eAAO,MAAM,KAAK,4JAyGjB,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAGzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAI1D,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC;AAE9C,MAAM,WAAW,gBAAgB;IACzB,EAAE,EAAgB,MAAM,CAAC;IACzB,MAAc,CAAC,EAAG,OAAO,CAAC;IAC1B,OAAc,CAAC,EAAG,MAAM,IAAI,CAAC;IAC7B,aAAc,CAAC,EAAG,OAAO,CAAC;IAC1B,YAAc,CAAC,EAAG,OAAO,CAAC;IAC1B,YAAc,CAAC,EAAG,OAAO,CAAC;IAC1B,KAAc,CAAC,EAAG,MAAM,CAAC;IACzB,WAAc,CAAC,EAAG,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,EAAE,MAAM,gBAAgB,CAAC,GAAG,gBAAgB,CAAC;AAG/G,eAAO,MAAM,KAAK,4JAwGjB,CAAC"}

package/dist/components/Modal/Modal.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsxs as E, jsx as n } from "react/jsx-runtime";
+import y, { useEffect as m } from "react";
+/* empty css          */
+import { Element as x } from "../Element/Element.js";
+const M = y.forwardRef(
+  ({
+    id: u,
+    children: s,
+    classNames: l = [],
+    isOpen: r = !1,
+    onClose: o,
+    isDismissible: i = !0,
+    showBackdrop: f,
+    blurBackdrop: p,
+    label: g,
+    description: d,
+    ...b
+  }, h) => {
+    const t = `${u}`, c = d ? `${t}-description` : void 0;
+    return f && l.push("show-backdrop"), p && l.push("blur-backdrop"), m(() => {
+      const e = document.querySelector(`#${t}[data-modal]`);
+      if (!(!e || !(e instanceof HTMLElement)))
+        if (r) {
+          e.showPopover();
+          const a = e.querySelectorAll(
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+          );
+          a.length && a[0].focus();
+        } else
+          e.matches(":popover-open") && e.hidePopover();
+    }, [r, t]), m(() => {
+      const e = document.querySelector(`#${t}[data-modal]`);
+      if (!e || !(e instanceof HTMLElement)) return;
+      const a = (v) => {
+        v.newState === "closed" && r && o && o();
+      };
+      return e.addEventListener("toggle", a), () => e.removeEventListener("toggle", a);
+    }, [t, r, o]), /* @__PURE__ */ E(
+      x,
+      {
+        as: "dialog",
+        id: t,
+        "data-modal": !0,
+        popover: i ? "auto" : "manual",
+        ref: h,
+        classNames: l,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": g || "Modal dialog",
+        "aria-describedby": c,
+        ...b,
+        children: [
+          i && o && /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              className: "dismiss-button",
+              onClick: o,
+              "aria-label": "Close modal",
+              children: "×"
+            }
+          ),
+          d && /* @__PURE__ */ n("div", { id: c, className: "sr-only", children: d }),
+          /* @__PURE__ */ n("div", { role: "document", children: s })
+        ]
+      }
+    );
+  }
+);
+M.displayName = "Modal";
+export {
+  M as Modal
+};
+//# sourceMappingURL=Modal.js.map

package/dist/components/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React, { useEffect } from \"react\";\n\n// ELEMENT =============================================================================================================\nimport { CommonAndHTMLProps } from \"../Element/constants\";\nimport { Element } from \"$element\";\n\n// STYLES ==============================================================================================================\nimport \"./modal.css\";\n\nexport type ModalElementType = HTMLDivElement;\n\nexport interface ModalCustomProps {\n        id              : string;\n        isOpen        ? : boolean;\n        onClose       ? : () => void;\n        isDismissible ? : boolean;\n        showBackdrop  ? : boolean;\n        blurBackdrop  ? : boolean;\n        label         ? : string;\n        description   ? : string;\n}\n\nexport type ModalProps = Omit<CommonAndHTMLProps<ModalElementType>, keyof ModalCustomProps> & ModalCustomProps;\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const Modal = React.forwardRef(\n    (\n        {\n            id,\n            children,\n            classNames = [],\n            isOpen = false,\n            onClose,\n            isDismissible = true,\n            showBackdrop,\n            blurBackdrop,\n            label,\n            description,\n            ...props\n        }: ModalProps, ref: React.Ref<ModalElementType>,\n    ) => {\n        const modalId       = `${id}`;\n        const descriptionId = description ? `${modalId}-description` : undefined;\n\n        if (showBackdrop) {\n            classNames.push(\"show-backdrop\");\n        }\n\n        if (blurBackdrop) {\n            classNames.push(\"blur-backdrop\");\n        }\n\n        // Handle open/close state declaratively\n        useEffect(() => {\n            const modal = document.querySelector(`#${modalId}[data-modal]`);\n            if (!modal || !(modal instanceof HTMLElement)) return;\n\n            if (isOpen) {\n                // Show modal\n                modal.showPopover();\n\n                // Focus first focusable element\n                const focusableElements = modal.querySelectorAll(\n                    \"button, [href], input, select, textarea, [tabindex]:not([tabindex=\\\"-1\\\"])\",\n                );\n                if (focusableElements.length) {\n                    (focusableElements[0] as HTMLElement).focus();\n                }\n            } else {\n                // Hide modal\n                if (modal.matches(\":popover-open\")) {\n                    modal.hidePopover();\n                }\n            }\n        }, [isOpen, modalId]);\n\n        // Listen for popover toggle events to sync React state when closed externally\n        // (e.g., clicking outside with popover=\"auto\", or pressing Escape)\n        useEffect(() => {\n            const modal = document.querySelector(`#${modalId}[data-modal]`);\n            if (!modal || !(modal instanceof HTMLElement)) return;\n\n            const handleToggle = (e: Event) => {\n                const toggleEvent = e as ToggleEvent;\n                // If popover was closed externally and React still thinks it's open, sync state\n                if (toggleEvent.newState === \"closed\" && isOpen && onClose) {\n                    onClose();\n                }\n            };\n\n            modal.addEventListener(\"toggle\", handleToggle);\n            return () => modal.removeEventListener(\"toggle\", handleToggle);\n        }, [modalId, isOpen, onClose]);\n\n        return (\n            <Element<ModalElementType>\n                as=\"dialog\"\n                id={modalId}\n                data-modal\n                popover={isDismissible ? \"auto\" : \"manual\"}\n                ref={ref}\n                classNames={classNames}\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-label={label || \"Modal dialog\"}\n                aria-describedby={descriptionId}\n                {...props}\n            >\n                {isDismissible && onClose && (\n                    <button\n                        type=\"button\"\n                        className=\"dismiss-button\"\n                        onClick={onClose}\n                        aria-label=\"Close modal\"\n                    >\n                        &times;\n                    </button>\n                )}\n                {description && (\n                    <div id={descriptionId} className=\"sr-only\">\n                        {description}\n                    </div>\n                )}\n                <div role=\"document\">\n                    {children}\n                </div>\n            </Element>\n        );\n    },\n);\nModal.displayName = \"Modal\";\n\n"],"names":["Modal","React","id","children","classNames","isOpen","onClose","isDismissible","showBackdrop","blurBackdrop","label","description","props","ref","modalId","descriptionId","useEffect","modal","focusableElements","handleToggle","e","jsxs","Element","jsx"],"mappings":";;;;AA0BO,MAAMA,IAAQC,EAAM;AAAA,EACvB,CACI;AAAA,IACI,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC,IAAa,CAAA;AAAA,IACb,QAAAC,IAAS;AAAA,IACT,SAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GACQC,MACd;AACD,UAAMC,IAAgB,GAAGZ,CAAE,IACrBa,IAAgBJ,IAAc,GAAGG,CAAO,iBAAiB;AAE/D,WAAIN,KACAJ,EAAW,KAAK,eAAe,GAG/BK,KACAL,EAAW,KAAK,eAAe,GAInCY,EAAU,MAAM;AACZ,YAAMC,IAAQ,SAAS,cAAc,IAAIH,CAAO,cAAc;AAC9D,UAAI,GAACG,KAAS,EAAEA,aAAiB;AAEjC,YAAIZ,GAAQ;AAER,UAAAY,EAAM,YAAA;AAGN,gBAAMC,IAAoBD,EAAM;AAAA,YAC5B;AAAA,UAAA;AAEJ,UAAIC,EAAkB,UACjBA,EAAkB,CAAC,EAAkB,MAAA;AAAA,QAE9C;AAEI,UAAID,EAAM,QAAQ,eAAe,KAC7BA,EAAM,YAAA;AAAA,IAGlB,GAAG,CAACZ,GAAQS,CAAO,CAAC,GAIpBE,EAAU,MAAM;AACZ,YAAMC,IAAQ,SAAS,cAAc,IAAIH,CAAO,cAAc;AAC9D,UAAI,CAACG,KAAS,EAAEA,aAAiB,aAAc;AAE/C,YAAME,IAAe,CAACC,MAAa;AAG/B,QAFoBA,EAEJ,aAAa,YAAYf,KAAUC,KAC/CA,EAAA;AAAA,MAER;AAEA,aAAAW,EAAM,iBAAiB,UAAUE,CAAY,GACtC,MAAMF,EAAM,oBAAoB,UAAUE,CAAY;AAAA,IACjE,GAAG,CAACL,GAAST,GAAQC,CAAO,CAAC,GAGzB,gBAAAe;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,IAAG;AAAA,QACH,IAAIR;AAAA,QACJ,cAAU;AAAA,QACV,SAASP,IAAgB,SAAS;AAAA,QAClC,KAAAM;AAAA,QACA,YAAAT;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,cAAYM,KAAS;AAAA,QACrB,oBAAkBK;AAAA,QACjB,GAAGH;AAAA,QAEH,UAAA;AAAA,UAAAL,KAAiBD,KACd,gBAAAiB;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,MAAK;AAAA,cACL,WAAU;AAAA,cACV,SAASjB;AAAA,cACT,cAAW;AAAA,cACd,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAIJK,KACG,gBAAAY,EAAC,OAAA,EAAI,IAAIR,GAAe,WAAU,WAC7B,UAAAJ,GACL;AAAA,UAEJ,gBAAAY,EAAC,OAAA,EAAI,MAAK,YACL,UAAApB,EAAA,CACL;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AACJ;AACAH,EAAM,cAAc;"}

package/dist/components/Notification/NotificationItem/NotificationItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Notification/NotificationItem/NotificationItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,OAAO,yBAAyB,CAAC;AAMjC,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAEpF,MAAM,WAAW,qBAAqB;IAClC,EAAE,EAAgB,MAAM,CAAC;IACzB,IAAc,CAAC,EAAG,gBAAgB,CAAC;IACnC,QAAc,CAAC,EAAG,MAAM,CAAC;IACzB,aAAc,CAAC,EAAG,OAAO,CAAC;IAC1B,OAAO,EAAW,MAAM,IAAI,CAAC;IAC7B,QAAQ,EAAU,KAAK,CAAC,SAAS,CAAC;CACrC;AAED,MAAM,MAAM,2BAA2B,GAAG,cAAc,CAAC;AAYzD,eAAO,MAAM,gBAAgB;gEAO1B,qBAAqB;;CA0EvB,CAAC"}
+{"version":3,"file":"NotificationItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Notification/NotificationItem/NotificationItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,OAAO,yBAAyB,CAAC;AAMjC,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAEpF,MAAM,WAAW,qBAAqB;IAClC,EAAE,EAAgB,MAAM,CAAC;IACzB,IAAc,CAAC,EAAG,gBAAgB,CAAC;IACnC,QAAc,CAAC,EAAG,MAAM,CAAC;IACzB,aAAc,CAAC,EAAG,OAAO,CAAC;IAC1B,OAAO,EAAW,MAAM,IAAI,CAAC;IAC7B,QAAQ,EAAU,KAAK,CAAC,SAAS,CAAC;CACrC;AAED,MAAM,MAAM,2BAA2B,GAAG,cAAc,CAAC;AAYzD,eAAO,MAAM,gBAAgB;gEAO1B,qBAAqB;;CAkEvB,CAAC"}

package/dist/components/Notification/NotificationItem/NotificationItem.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import { useState as h, useEffect as l } from "react";
+/* empty css                      */
+import { Element as N } from "../../Element/Element.js";
+const T = {
+  generic: "status",
+  info: "status",
+  warning: "alert",
+  error: "alert",
+  success: "status"
+}, g = ({
+  id: m,
+  kind: i = "generic",
+  duration: s = 4,
+  isDismissible: o = !0,
+  onClose: r,
+  children: u
+}) => {
+  const [e, c] = h(!1);
+  l(() => {
+    if (s === 0) return;
+    const t = setTimeout(() => {
+      c(!0);
+    }, s * 1e3);
+    return () => clearTimeout(t);
+  }, [s]), l(() => {
+    if (!e) return;
+    const t = setTimeout(() => {
+      r();
+    }, 500);
+    return () => clearTimeout(t);
+  }, [e, r]);
+  const f = (t) => {
+    t.preventDefault(), c(!0);
+  }, p = () => {
+    e && r();
+  }, n = [i];
+  return o && n.push("dismissible"), e && n.push("dismissed"), /* @__PURE__ */ d(
+    N,
+    {
+      as: "div",
+      "data-notification-item": !0,
+      id: m,
+      classNames: n,
+      onTransitionEnd: p,
+      role: T[i],
+      "aria-live": i === "error" || i === "warning" ? "assertive" : "polite",
+      "aria-atomic": "true",
+      children: [
+        /* @__PURE__ */ a("div", { className: "notification-content", children: u }),
+        o && /* @__PURE__ */ a(
+          "button",
+          {
+            type: "button",
+            className: "dismiss-button",
+            onClick: f,
+            "aria-label": "Dismiss notification",
+            children: /* @__PURE__ */ a("span", { className: "sr-only", children: "Close notification" })
+          }
+        )
+      ]
+    }
+  );
+};
+g.displayName = "NotificationItem";
+export {
+  g as NotificationItem
+};
+//# sourceMappingURL=NotificationItem.js.map

package/dist/components/Notification/NotificationItem/NotificationItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationItem.js","sources":["../../../../src/components/Notification/NotificationItem/NotificationItem.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React, { useState, useEffect } from \"react\";\n\n// ELEMENT =============================================================================================================\nimport { Div } from \"../../Element/Tags\";\n\n// STYLES ==============================================================================================================\nimport \"./notification-item.css\";\n\n// OTHER ===============================================================================================================\nimport { Element } from \"$element\";\n\n// TYPES ===============================================================================================================\nexport type NotificationKind = \"generic\" | \"info\" | \"warning\" | \"error\" | \"success\";\n\nexport interface NotificationItemProps {\n    id              : string;\n    kind          ? : NotificationKind;\n    duration      ? : number;\n    isDismissible ? : boolean;\n    onClose         : () => void;\n    children        : React.ReactNode;\n}\n\nexport type NotificationItemElementType = HTMLDivElement;\n\n// Map notification types to ARIA roles\nconst roleMap: Record<NotificationKind, string> = {\n    generic : \"status\",\n    info    : \"status\",\n    warning : \"alert\",\n    error   : \"alert\",\n    success : \"status\",\n};\n\n// COMPONENT ===========================================================================================================\nexport const NotificationItem = ({\n    id,\n    kind = \"generic\",\n    duration = 4,\n    isDismissible = true,\n    onClose,\n    children,\n}: NotificationItemProps) => {\n    const [isExiting, setIsExiting] = useState(false);\n\n    useEffect(() => {\n        if (duration === 0) return; // No auto-dismiss\n\n        const timer = setTimeout(() => {\n            setIsExiting(true);\n        }, duration * 1000);\n\n        return () => clearTimeout(timer);\n    }, [duration]);\n\n    // Fallback: if transition doesn't fire, remove after animation duration\n    useEffect(() => {\n        if (!isExiting) return;\n\n        const fallbackTimer = setTimeout(() => {\n            onClose();\n        }, 500); // slightly longer than the 0.4s transition\n\n        return () => clearTimeout(fallbackTimer);\n    }, [isExiting, onClose]);\n\n    const handleDismissClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        event.preventDefault();\n        setIsExiting(true);\n    };\n\n    const handleTransitionEnd = () => {\n        if (isExiting) {\n            onClose();\n        }\n    };\n\n    const classNames: string[] = [kind];\n    if (isDismissible) classNames.push(\"dismissible\");\n    if (isExiting) classNames.push(\"dismissed\");\n\n    return (\n        <Element<NotificationItemElementType>\n            as=\"div\"\n            data-notification-item\n            id={id}\n            classNames={classNames}\n            onTransitionEnd={handleTransitionEnd}\n            role={roleMap[kind]}\n            aria-live={kind === \"error\" || kind === \"warning\" ? \"assertive\" : \"polite\"}\n            aria-atomic=\"true\"\n        >\n            <div className=\"notification-content\">\n                {children}\n            </div>\n\n            {isDismissible && (\n                <button\n                    type=\"button\"\n                    className=\"dismiss-button\"\n                    onClick={handleDismissClick}\n                    aria-label=\"Dismiss notification\"\n                >\n                    <span className=\"sr-only\">Close notification</span>\n                </button>\n            )}\n        </Element>\n    );\n};\nNotificationItem.displayName = \"NotificationItem\";\n"],"names":["roleMap","NotificationItem","id","kind","duration","isDismissible","onClose","children","isExiting","setIsExiting","useState","useEffect","timer","fallbackTimer","handleDismissClick","event","handleTransitionEnd","classNames","jsxs","Element","jsx"],"mappings":";;;;AA2BA,MAAMA,IAA4C;AAAA,EAC9C,SAAU;AAAA,EACV,MAAU;AAAA,EACV,SAAU;AAAA,EACV,OAAU;AAAA,EACV,SAAU;AACd,GAGaC,IAAmB,CAAC;AAAA,EAC7B,IAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,eAAAC,IAAgB;AAAA,EAChB,SAAAC;AAAA,EACA,UAAAC;AACJ,MAA6B;AACzB,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK;AAEhD,EAAAC,EAAU,MAAM;AACZ,QAAIP,MAAa,EAAG;AAEpB,UAAMQ,IAAQ,WAAW,MAAM;AAC3B,MAAAH,EAAa,EAAI;AAAA,IACrB,GAAGL,IAAW,GAAI;AAElB,WAAO,MAAM,aAAaQ,CAAK;AAAA,EACnC,GAAG,CAACR,CAAQ,CAAC,GAGbO,EAAU,MAAM;AACZ,QAAI,CAACH,EAAW;AAEhB,UAAMK,IAAgB,WAAW,MAAM;AACnC,MAAAP,EAAA;AAAA,IACJ,GAAG,GAAG;AAEN,WAAO,MAAM,aAAaO,CAAa;AAAA,EAC3C,GAAG,CAACL,GAAWF,CAAO,CAAC;AAEvB,QAAMQ,IAAqB,CAACC,MAA+C;AACvE,IAAAA,EAAM,eAAA,GACNN,EAAa,EAAI;AAAA,EACrB,GAEMO,IAAsB,MAAM;AAC9B,IAAIR,KACAF,EAAA;AAAA,EAER,GAEMW,IAAuB,CAACd,CAAI;AAClC,SAAIE,KAAeY,EAAW,KAAK,aAAa,GAC5CT,KAAWS,EAAW,KAAK,WAAW,GAGtC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,IAAG;AAAA,MACH,0BAAsB;AAAA,MACtB,IAAAjB;AAAA,MACA,YAAAe;AAAA,MACA,iBAAiBD;AAAA,MACjB,MAAMhB,EAAQG,CAAI;AAAA,MAClB,aAAWA,MAAS,WAAWA,MAAS,YAAY,cAAc;AAAA,MAClE,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAiB,EAAC,OAAA,EAAI,WAAU,wBACV,UAAAb,EAAA,CACL;AAAA,QAECF,KACG,gBAAAe;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,WAAU;AAAA,YACV,SAASN;AAAA,YACT,cAAW;AAAA,YAEX,UAAA,gBAAAM,EAAC,QAAA,EAAK,WAAU,WAAU,UAAA,qBAAA,CAAkB;AAAA,UAAA;AAAA,QAAA;AAAA,MAChD;AAAA,IAAA;AAAA,EAAA;AAIhB;AACAnB,EAAiB,cAAc;"}

package/dist/components/Notification/NotificationsProvider/NotificationsProvider.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsxs as b, jsx as d } from "react/jsx-runtime";
+import { useState as v, useCallback as c, createContext as k, useContext as C } from "react";
+import { NotificationsWrapper as P } from "../NotificationsWrapper/NotificationsWrapper.js";
+import { NotificationItem as j } from "../NotificationItem/NotificationItem.js";
+const l = k(null), g = ({
+  children: r,
+  position: N = "right",
+  anchor: m = "top",
+  order: p = "new-on-top",
+  kind: h = "list"
+}) => {
+  const [w, f] = v([]), a = c((t) => {
+    f((i) => i.filter((n) => n.id !== t));
+  }, []), o = c((t, i = "generic", n = 4, s = !0) => {
+    const e = `notification-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+    return f((y) => [...y, {
+      id: e,
+      content: t,
+      kind: i,
+      duration: n,
+      isDismissible: s
+    }]), e;
+  }, []), u = c((t) => {
+    if (typeof t == "string") {
+      o(t);
+      return;
+    }
+    if (t !== null && typeof t == "object" && "content" in t) {
+      const i = t;
+      o(
+        i.content,
+        i.kind ?? "generic",
+        i.duration ?? 4,
+        i.isDismissible ?? !0
+      );
+      return;
+    }
+    o(t);
+  }, [o]), x = c(() => {
+    const t = u;
+    return t.success = (i) => {
+      o(i, "success");
+    }, t.error = (i) => {
+      o(i, "error");
+    }, t.warning = (i) => {
+      o(i, "warning");
+    }, t.info = (i) => {
+      o(i, "info");
+    }, t;
+  }, [u, o])();
+  return /* @__PURE__ */ b(l.Provider, { value: { notify: x }, children: [
+    r,
+    /* @__PURE__ */ d(
+      P,
+      {
+        position: N,
+        anchor: m,
+        order: p,
+        kind: h,
+        children: w.map(({ id: t, content: i, kind: n, duration: s, isDismissible: e }) => /* @__PURE__ */ d(
+          j,
+          {
+            id: t,
+            kind: n,
+            duration: s,
+            isDismissible: e,
+            onClose: () => a(t),
+            children: typeof i == "function" ? i({ close: () => a(t) }) : i
+          },
+          t
+        ))
+      }
+    )
+  ] });
+};
+g.displayName = "NotificationsProvider";
+const I = () => {
+  const r = C(l);
+  if (!r)
+    throw new Error("useNotifications must be used within a NotificationsProvider");
+  return r.notify;
+};
+export {
+  g as NotificationsProvider,
+  I as useNotifications
+};
+//# sourceMappingURL=NotificationsProvider.js.map

package/dist/components/Notification/NotificationsProvider/NotificationsProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationsProvider.js","sources":["../../../../src/components/Notification/NotificationsProvider/NotificationsProvider.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React, { createContext, useContext, useState, useCallback, ReactNode } from \"react\";\n\n// INTERNAL ============================================================================================================\nimport { NotificationsWrapper } from \"../NotificationsWrapper/NotificationsWrapper\";\nimport { NotificationItem, NotificationKind } from \"../NotificationItem/NotificationItem\";\n\n// TYPES ===============================================================================================================\nexport interface NotificationOptions {\n    content         : ReactNode | ((helpers: { close: () => void }) => ReactNode);\n    kind          ? : NotificationKind;\n    duration      ? : number;  // seconds, 0 = no auto-dismiss\n    isDismissible ? : boolean;\n}\n\ninterface InternalNotification {\n    id            : string;\n    content       : ReactNode | ((helpers: { close: () => void }) => ReactNode);\n    kind          : NotificationKind;\n    duration      : number;\n    isDismissible : boolean;\n}\n\n// prettier-ignore\nexport interface NotificationsProviderProps {\n    children     : ReactNode;\n    position   ? : \"left\" | \"right\";\n    anchor     ? : \"top\" | \"bottom\";\n    order      ? : \"new-on-top\" | \"new-on-bottom\";\n    kind       ? : \"list\" | \"stack\";\n}\n\n// NOTIFY FUNCTION TYPE ================================================================================================\nexport interface NotifyFunction {\n    (message: string): void;\n    (content: ReactNode): void;\n    (options: NotificationOptions): void;\n    success : (message: string | ReactNode) => void;\n    error   : (message: string | ReactNode) => void;\n    warning : (message: string | ReactNode) => void;\n    info    : (message: string | ReactNode) => void;\n}\n\ninterface NotificationsContextValue {\n    notify: NotifyFunction;\n}\n\n// CONTEXT =============================================================================================================\nconst NotificationsContext = createContext<NotificationsContextValue | null>(null);\n\n// PROVIDER ============================================================================================================\nexport const NotificationsProvider = ({\n    children,\n    position = \"right\",\n    anchor = \"top\",\n    order = \"new-on-top\",\n    kind = \"list\",\n}: NotificationsProviderProps) => {\n    const [notifications, setNotifications] = useState<InternalNotification[]>([]);\n\n    // Remove a notification by ID\n    const removeNotification = useCallback((id: string) => {\n        setNotifications(prev => prev.filter(n => n.id !== id));\n    }, []);\n\n    // Add a notification\n    const addNotification = useCallback((\n        content: ReactNode | ((helpers: { close: () => void }) => ReactNode),\n        kind: NotificationKind = \"generic\",\n        duration: number = 4,\n        isDismissible: boolean = true\n    ) => {\n        const id = `notification-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\n\n        setNotifications(prev => [...prev, {\n            id,\n            content,\n            kind,\n            duration,\n            isDismissible,\n        }]);\n\n        return id;\n    }, []);\n\n    // Main notify function\n    const baseNotify = useCallback((\n        messageOrOptions: string | ReactNode | NotificationOptions\n    ) => {\n        // String message\n        if (typeof messageOrOptions === \"string\") {\n            addNotification(messageOrOptions);\n            return;\n        }\n\n        // Options object (has 'content' property)\n        if (\n            messageOrOptions !== null &&\n            typeof messageOrOptions === \"object\" &&\n            \"content\" in messageOrOptions\n        ) {\n            const opts = messageOrOptions as NotificationOptions;\n            addNotification(\n                opts.content,\n                opts.kind ?? \"generic\",\n                opts.duration ?? 4,\n                opts.isDismissible ?? true\n            );\n            return;\n        }\n\n        // ReactNode\n        addNotification(messageOrOptions as ReactNode);\n    }, [addNotification]);\n\n    // Create the notify function with shorthand methods\n    const notify = useCallback(() => {\n        const fn = baseNotify as NotifyFunction;\n\n        fn.success = (message: string | ReactNode) => {\n            addNotification(message, \"success\");\n        };\n\n        fn.error = (message: string | ReactNode) => {\n            addNotification(message, \"error\");\n        };\n\n        fn.warning = (message: string | ReactNode) => {\n            addNotification(message, \"warning\");\n        };\n\n        fn.info = (message: string | ReactNode) => {\n            addNotification(message, \"info\");\n        };\n\n        return fn;\n    }, [baseNotify, addNotification])();\n\n    return (\n        <NotificationsContext.Provider value={{ notify }}>\n            {children}\n\n            <NotificationsWrapper\n                position={position}\n                anchor={anchor}\n                order={order}\n                kind={kind}\n            >\n                {notifications.map(({ id, content, kind, duration, isDismissible }) => (\n                    <NotificationItem\n                        key={id}\n                        id={id}\n                        kind={kind}\n                        duration={duration}\n                        isDismissible={isDismissible}\n                        onClose={() => removeNotification(id)}\n                    >\n                        {typeof content === \"function\"\n                            ? content({ close: () => removeNotification(id) })\n                            : content\n                        }\n                    </NotificationItem>\n                ))}\n            </NotificationsWrapper>\n        </NotificationsContext.Provider>\n    );\n};\nNotificationsProvider.displayName = \"NotificationsProvider\";\n\n// HOOK ================================================================================================================\nexport const useNotifications = (): NotifyFunction => {\n    const context = useContext(NotificationsContext);\n\n    if (!context) {\n        throw new Error(\"useNotifications must be used within a NotificationsProvider\");\n    }\n\n    return context.notify;\n};\n"],"names":["NotificationsContext","createContext","NotificationsProvider","children","position","anchor","order","kind","notifications","setNotifications","useState","removeNotification","useCallback","id","prev","addNotification","content","duration","isDismissible","baseNotify","messageOrOptions","opts","notify","fn","message","jsx","NotificationsWrapper","NotificationItem","useNotifications","context","useContext"],"mappings":"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"}

package/dist/components/Notification/NotificationsWrapper/NotificationsWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationsWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/Notification/NotificationsWrapper/NotificationsWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAG7D,OAAO,6BAA6B,CAAC;AAMrC,MAAM,WAAW,+BAA+B;IACxC,QAAS,CAAC,EAAG,MAAM,GAAG,OAAO,CAAC;IAC9B,MAAS,CAAC,EAAG,KAAK,GAAG,QAAQ,CAAC;IAC9B,KAAS,CAAC,EAAG,YAAY,GAAG,eAAe,CAAC;IAC5C,IAAS,CAAC,EAAG,MAAM,GAAG,OAAO,CAAC;IAC9B,KAAS,CAAC,EAAG,MAAM,CAAC;CAC3B;AAED,MAAM,MAAM,+BAA+B,GAAG,cAAc,CAAC;AAC7D,MAAM,MAAM,yBAAyB,GAAG,kBAAkB,CAAC,+BAA+B,CAAC,GACvF,+BAA+B,CAAC;AAGpC,eAAO,MAAM,oBAAoB,6IAqChC,CAAC"}
+{"version":3,"file":"NotificationsWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/Notification/NotificationsWrapper/NotificationsWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAG7D,OAAO,6BAA6B,CAAC;AAMrC,MAAM,WAAW,+BAA+B;IACxC,QAAS,CAAC,EAAG,MAAM,GAAG,OAAO,CAAC;IAC9B,MAAS,CAAC,EAAG,KAAK,GAAG,QAAQ,CAAC;IAC9B,KAAS,CAAC,EAAG,YAAY,GAAG,eAAe,CAAC;IAC5C,IAAS,CAAC,EAAG,MAAM,GAAG,OAAO,CAAC;IAC9B,KAAS,CAAC,EAAG,MAAM,CAAC;CAC3B;AAED,MAAM,MAAM,+BAA+B,GAAG,cAAc,CAAC;AAC7D,MAAM,MAAM,yBAAyB,GAAG,kBAAkB,CAAC,+BAA+B,CAAC,GACvF,+BAA+B,CAAC;AAGpC,eAAO,MAAM,oBAAoB,6IAmChC,CAAC"}

package/dist/components/Notification/NotificationsWrapper/NotificationsWrapper.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as l } from "react/jsx-runtime";
+import p from "react";
+/* empty css                          */
+import { Element as u } from "../../Element/Element.js";
+const c = p.forwardRef(
+  ({
+    position: i = "right",
+    anchor: o = "top",
+    order: r = "new-on-top",
+    kind: a = "list",
+    children: e,
+    label: s,
+    ...n
+  }, f) => {
+    let t = [];
+    return i && t.push(i), o && t.push(o), r && t.push(r), a && t.push(a), p.Children.count(e) === 0 ? null : /* @__PURE__ */ l(
+      u,
+      {
+        as: "section",
+        "data-notifications-wrapper": !0,
+        ref: f,
+        classNames: t,
+        "aria-label": s || "Notifications",
+        ...n,
+        children: e
+      }
+    );
+  }
+);
+c.displayName = "NotificationsWrapper";
+export {
+  c as NotificationsWrapper
+};
+//# sourceMappingURL=NotificationsWrapper.js.map

package/dist/components/Notification/NotificationsWrapper/NotificationsWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationsWrapper.js","sources":["../../../../src/components/Notification/NotificationsWrapper/NotificationsWrapper.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React from \"react\";\n\n// ELEMENT =============================================================================================================\nimport { CommonAndHTMLProps } from \"../../Element/constants\";\n\n// STYLES ==============================================================================================================\nimport \"./notifications-wrapper.css\";\n\n// OTHER ===============================================================================================================\nimport { Element } from \"$element\";\n\n// prettier-ignore\nexport interface NotificationsWrapperCustomProps {\n        position ? : \"left\" | \"right\";\n        anchor   ? : \"top\" | \"bottom\";\n        order    ? : \"new-on-top\" | \"new-on-bottom\";\n        kind     ? : \"list\" | \"stack\";\n        label    ? : string;\n}\n\nexport type NotificationsWrapperElementType = HTMLDivElement;\nexport type NotificationsWrapperProps = CommonAndHTMLProps<NotificationsWrapperElementType> &\n    NotificationsWrapperCustomProps;\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const NotificationsWrapper = React.forwardRef(\n    (\n        {\n            position = \"right\",\n            anchor = \"top\",\n            order = \"new-on-top\",\n            kind = \"list\",\n            children,\n            label,\n            ...props\n        }: NotificationsWrapperProps,\n        ref: React.Ref<NotificationsWrapperElementType>\n    ) => {\n        let classNames = [];\n        if (position) classNames.push(position);\n        if (anchor) classNames.push(anchor);\n        if (order) classNames.push(order);\n        if (kind) classNames.push(kind);\n\n        const childrenCount = React.Children.count(children);\n        if (childrenCount === 0) return null;\n\n        return (\n            <Element<NotificationsWrapperElementType>\n                as=\"section\"\n                data-notifications-wrapper\n                ref={ref}\n                classNames={classNames}\n                aria-label={label || \"Notifications\"}\n                {...props}\n            >\n                {children}\n            </Element>\n        );\n    }\n);\nNotificationsWrapper.displayName = \"NotificationsWrapper\";\n"],"names":["NotificationsWrapper","React","position","anchor","order","kind","children","label","props","ref","classNames","jsx","Element"],"mappings":";;;;AA0BO,MAAMA,IAAuBC,EAAM;AAAA,EACtC,CACI;AAAA,IACI,UAAAC,IAAW;AAAA,IACX,QAAAC,IAAS;AAAA,IACT,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEPC,MACC;AACD,QAAIC,IAAa,CAAA;AAOjB,WANIR,KAAUQ,EAAW,KAAKR,CAAQ,GAClCC,KAAQO,EAAW,KAAKP,CAAM,GAC9BC,KAAOM,EAAW,KAAKN,CAAK,GAC5BC,KAAMK,EAAW,KAAKL,CAAI,GAERJ,EAAM,SAAS,MAAMK,CAAQ,MAC7B,IAAU,OAG5B,gBAAAK;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,IAAG;AAAA,QACH,8BAA0B;AAAA,QAC1B,KAAAH;AAAA,QACA,YAAAC;AAAA,QACA,cAAYH,KAAS;AAAA,QACpB,GAAGC;AAAA,QAEH,UAAAF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb;AACJ;AACAN,EAAqB,cAAc;"}