@paciu/ui 0.0.49 → 0.0.51

package/dist/index.d.ts

@@ -13,8 +13,15 @@ export declare const Card: default_2.ForwardRefExoticComponent<CardProps & defau
 declare interface CardProps extends default_2.HTMLAttributes<HTMLDivElement>, Pick<Modifiers, 'size'> {
 }
 
+declare interface CloseDialogOptions {
+    esc?: boolean;
+    outside?: boolean;
+}
+
 export declare type ColorType = 'opposite' | 'accent' | 'error';
 
+export declare const Dialog: React.FC<DialogProps>;
+
 export declare enum DialogPosition {
     TopCenter = "top-center",
     Center = "center",
@@ -27,6 +34,18 @@ export declare enum DialogPosition {
     RightBottom = "right-bottom"
 }
 
+declare interface DialogProps extends React.PropsWithChildren {
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+}
+
+declare interface DialogQueueItem {
+    id: number;
+    status: DialogQueueItemStatus;
+    node: () => React.ReactNode;
+    options?: OpenDialogOptions;
+}
+
 export declare enum DialogQueueItemStatus {
     Opening = "opening",
     Opened = "opened",
@@ -37,7 +56,7 @@ export declare enum DialogQueueItemStatus {
 export declare const Flex: default_2.ForwardRefExoticComponent<FlexProps & default_2.RefAttributes<HTMLDivElement>>;
 
 declare interface FlexProps extends default_2.HTMLAttributes<HTMLDivElement> {
-    size?: Size | null;
+    size?: SizeType;
     direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
     align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
     justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
@@ -54,20 +73,51 @@ export declare interface Modifiers {
     square?: boolean;
     rounded?: boolean;
     loading?: boolean;
-    size?: Size;
+    size?: SizeType;
     color?: ColorType;
 }
 
+declare interface OpenDialogOptions {
+    position?: DialogPosition;
+    unClosable?: boolean;
+    fullHeight?: boolean;
+    fullWidth?: boolean;
+    onClose?: () => boolean | void;
+    onClosed?: () => boolean | void;
+    onOpen?: () => boolean | void;
+    onOpened?: () => boolean | void;
+}
+
+declare interface PaciuContextType {
+    theme: Theme | null;
+    nextTheme: Theme | null;
+    systemTheme: Theme | null;
+    toggleTheme: (theme: Theme) => void;
+    dialogsQueue: DialogQueueItem[];
+    openDialog: (node: () => React.ReactNode, options?: OpenDialogOptions) => void;
+    closeDialog: (options?: CloseDialogOptions) => void;
+}
+
 /** row */
 export declare const Row: default_2.ForwardRefExoticComponent<RowProps & default_2.RefAttributes<HTMLDivElement>>;
 
 declare interface RowProps extends Omit<default_2.ButtonHTMLAttributes<HTMLDivElement>, 'color'>, Pick<Modifiers, 'size'> {
 }
 
-export declare type Size = 'micro' | 'mini' | 'small' | 'medium' | 'large' | 'huge' | 'enormous';
+export declare type SizeType = 'micro' | 'mini' | 'small' | 'medium' | 'large' | 'huge' | 'enormous';
+
+export declare enum Theme {
+    Light = "light",
+    Dark = "dark",
+    System = "system"
+}
+
+export declare type ThemeType = 'light' | 'dark' | 'system';
 
 export declare const useEscape: (callback: () => void) => void;
 
+export declare const usePaciu: () => PaciuContextType;
+
 export declare const useScroll: () => {
     isScrolled: boolean;
 };

package/dist/index.es.js

@@ -1,7 +1,7 @@
-import { jsx as u } from "react/jsx-runtime";
-import c, { useState as N, useEffect as g, useRef as I } from "react";
-import { c as m } from "./index-CbbUQvJ6.js";
-import { D as M, a as T } from "./index-CbbUQvJ6.js";
+import { jsx as a, jsxs as P } from "react/jsx-runtime";
+import m, { useState as x, useEffect as w, useRef as L } from "react";
+import { c as f, s as d, u as S } from "./provider-Kkk4KMCp.js";
+import { D as X, a as Z, T as ss } from "./provider-Kkk4KMCp.js";
 import './index.css';const n = {
   "paciu-ui-button": "_paciu-ui-button_y249s_14",
   "size-micro": "_size-micro_y249s_23",
@@ -21,65 +21,65 @@ import './index.css';const n = {
   "color-opposite": "_color-opposite_y249s_139",
   "color-accent": "_color-accent_y249s_207",
   "color-error": "_color-error_y249s_275"
-}, L = c.forwardRef((i, e) => {
+}, D = m.forwardRef((i, e) => {
   const {
     children: s,
     className: o,
     color: r,
     square: _,
-    loading: t,
-    link: d,
-    soft: l,
-    solid: f,
-    outline: p,
+    loading: l,
+    link: c,
+    soft: u,
+    solid: p,
+    outline: z,
     // opaque,
-    rounded: z,
-    size: w,
+    rounded: g,
+    size: h,
     onClick: k,
-    stopPropagation: P,
-    stopImmediatePropagation: $,
-    ...x
-  } = i, [E, h] = N(!1), R = async (y) => {
-    if (P && y?.stopPropagation(), $ && y?.nativeEvent?.stopImmediatePropagation(), k) {
-      const b = k(y);
-      if (b instanceof Promise) {
-        h(!0);
+    stopPropagation: $,
+    stopImmediatePropagation: E,
+    ...R
+  } = i, [C, v] = x(!1), I = async (y) => {
+    if ($ && y?.stopPropagation(), E && y?.nativeEvent?.stopImmediatePropagation(), k) {
+      const N = k(y);
+      if (N instanceof Promise) {
+        v(!0);
         try {
-          await b;
+          await N;
         } finally {
-          h(!1);
+          v(!1);
         }
       }
     }
   };
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ a(
     "button",
     {
       ref: e,
-      className: m(
+      className: f(
         n["paciu-ui-button"],
         {
           // [ styles.opaque ]: opaque,
-          [n["modifier-loading"]]: E || t,
-          [n["modifier-rounded"]]: z,
+          [n["modifier-loading"]]: C || l,
+          [n["modifier-rounded"]]: g,
           [n["modifier-square"]]: _,
-          [n["modifier-link"]]: d,
-          [n["modifier-soft"]]: l,
-          [n["modifier-outline"]]: p,
-          [n["modifier-solid"]]: f,
+          [n["modifier-link"]]: c,
+          [n["modifier-soft"]]: u,
+          [n["modifier-outline"]]: z,
+          [n["modifier-solid"]]: p,
           ...r && { [n[`color-${r}`]]: r }
         },
-        w && n[`size-${w}`],
+        h && n[`size-${h}`],
         o
       ),
-      onClick: R,
-      ...x,
+      onClick: I,
+      ...R,
       children: s
     }
   );
 });
-L.displayName = "Button";
-const v = {
+D.displayName = "Button";
+const b = {
   "paciu-ui-row": "_paciu-ui-row_kd3dr_14",
   "size-micro": "_size-micro_kd3dr_23",
   "size-mini": "_size-mini_kd3dr_27",
@@ -88,15 +88,15 @@ const v = {
   "size-huge": "_size-huge_kd3dr_39",
   "size-enormous": "_size-enormous_kd3dr_43",
   "paciu-ui-blink-animation": "_paciu-ui-blink-animation_kd3dr_1"
-}, S = c.forwardRef((i, e) => {
+}, q = m.forwardRef((i, e) => {
   const { className: s, size: o, children: r, ..._ } = i;
-  return /* @__PURE__ */ u("div", { ref: e, className: m(v["paciu-ui-row"], o && v[`size-${o}`], s), ..._, children: r });
+  return /* @__PURE__ */ a("div", { ref: e, className: f(b["paciu-ui-row"], o && b[`size-${o}`], s), ..._, children: r });
 });
-S.displayName = "Row";
-const C = "_flex_ssd0s_14", q = "_inline_ssd0s_22", D = "_grow_ssd0s_25", a = {
-  flex: C,
-  inline: q,
-  grow: D,
+q.displayName = "Row";
+const B = "_flex_ssd0s_14", F = "_inline_ssd0s_22", T = "_grow_ssd0s_25", t = {
+  flex: B,
+  inline: F,
+  grow: T,
   "direction-column": "_direction-column_ssd0s_28",
   "direction-row-reverse": "_direction-row-reverse_ssd0s_31",
   "direction-column-reverse": "_direction-column-reverse_ssd0s_34",
@@ -119,31 +119,31 @@ const C = "_flex_ssd0s_14", q = "_inline_ssd0s_22", D = "_grow_ssd0s_25", a = {
   "size-huge": "_size-huge_ssd0s_95",
   "size-enormous": "_size-enormous_ssd0s_99",
   "paciu-ui-blink-animation": "_paciu-ui-blink-animation_ssd0s_1"
-}, B = c.forwardRef((i, e) => {
-  const { children: s, className: o, direction: r, align: _, justify: t, wrap: d, size: l, inline: f, grow: p, ...z } = i;
-  return /* @__PURE__ */ u(
+}, O = m.forwardRef((i, e) => {
+  const { children: s, className: o, direction: r, align: _, justify: l, wrap: c, size: u, inline: p, grow: z, ...g } = i;
+  return /* @__PURE__ */ a(
     "div",
     {
       ref: e,
-      className: m(
-        a.flex,
+      className: f(
+        t.flex,
         {
-          [a.inline]: f,
-          [a.grow]: p,
-          [a[`direction-${r}`]]: r,
-          [a[`align-${_}`]]: _,
-          [a[`justify-${t}`]]: t,
-          [a[`wrap-${d}`]]: d
+          [t.inline]: p,
+          [t.grow]: z,
+          [t[`direction-${r}`]]: r,
+          [t[`align-${_}`]]: _,
+          [t[`justify-${l}`]]: l,
+          [t[`wrap-${c}`]]: c
         },
-        l && a[`size-${l}`],
+        u && t[`size-${u}`],
         o
       ),
-      ...z,
+      ...g,
       children: s
     }
   );
 });
-B.displayName = "Flex";
+O.displayName = "Flex";
 const j = {
   "paciu-ui-card": "_paciu-ui-card_a6huo_14",
   "size-micro": "_size-micro_a6huo_28",
@@ -153,44 +153,58 @@ const j = {
   "size-huge": "_size-huge_a6huo_48",
   "size-enormous": "_size-enormous_a6huo_53",
   "paciu-ui-blink-animation": "_paciu-ui-blink-animation_a6huo_1"
-}, F = c.forwardRef((i, e) => {
+}, Q = m.forwardRef((i, e) => {
   const { children: s, className: o, size: r, ..._ } = i;
-  return /* @__PURE__ */ u("div", { ref: e, className: m(j["paciu-ui-card"], r && j[`size-${r}`], o), ..._, children: s });
+  return /* @__PURE__ */ a("div", { ref: e, className: f(j["paciu-ui-card"], r && j[`size-${r}`], o), ..._, children: s });
 });
-F.displayName = "Card";
-const A = (i) => {
-  g(() => {
+Q.displayName = "Card";
+const H = ({ header: i, children: e, footer: s }) => /* @__PURE__ */ P("div", { className: d["dialog-compose"], children: [
+  /* @__PURE__ */ a("div", { className: d["dialog-close"], children: /* @__PURE__ */ a("div", { className: d["dialog-close-cross"] }) }),
+  /* @__PURE__ */ P("div", { className: d["dialog-window"], onClick: (o) => o.stopPropagation(), children: [
+    i && /* @__PURE__ */ a("div", { className: d["dialog-window-header"], children: i }),
+    e && /* @__PURE__ */ a("div", { className: d["dialog-window-body"], children: e }),
+    s && /* @__PURE__ */ a("div", { className: d["dialog-window-footer"], children: s })
+  ] })
+] }), J = (i) => {
+  w(() => {
     const e = (s) => {
       s.key === "Escape" && (s.preventDefault(), s.stopPropagation(), s.stopImmediatePropagation(), i());
     };
     return document.addEventListener("keydown", e, !0), () => document.removeEventListener("keydown", e, !0);
   }, [i]);
-}, G = (i, e = [], s) => {
-  const o = I(s?.count || 1);
-  g(() => {
+}, K = (i, e = [], s) => {
+  const o = L(s?.count || 1);
+  w(() => {
     if (o.current > 0) {
       o.current--;
       return;
     }
     return i();
   }, e);
-}, H = () => {
-  const [i, e] = N(!1);
-  return g(() => {
+}, M = () => {
+  const [i, e] = x(!1);
+  return w(() => {
     const s = () => e(window.scrollY > 0);
     return s(), document.addEventListener("scroll", s), () => {
       document.removeEventListener("scroll", s);
     };
   }, []), { isScrolled: i };
+}, U = () => {
+  const i = S();
+  if (!i) throw new Error("usePaciu must be used within PaciuProvider");
+  return i;
 };
 export {
-  L as Button,
-  F as Card,
-  M as DialogPosition,
-  T as DialogQueueItemStatus,
-  B as Flex,
-  S as Row,
-  A as useEscape,
-  H as useScroll,
-  G as useSkipEffect
+  D as Button,
+  Q as Card,
+  H as Dialog,
+  X as DialogPosition,
+  Z as DialogQueueItemStatus,
+  O as Flex,
+  q as Row,
+  ss as Theme,
+  J as useEscape,
+  U as usePaciu,
+  M as useScroll,
+  K as useSkipEffect
 };

package/dist/provider-Kkk4KMCp.js

@@ -0,0 +1,153 @@
+"use client";
+import { jsxs as A, jsx as L } from "react/jsx-runtime";
+import { createContext as $, useState as y, useRef as z, useCallback as w, useMemo as k, useEffect as u, useContext as H } from "react";
+import { createPortal as I } from "react-dom";
+import './provider.css';function O(t) {
+  var r, a, s = "";
+  if (typeof t == "string" || typeof t == "number") s += t;
+  else if (typeof t == "object") if (Array.isArray(t)) {
+    var _ = t.length;
+    for (r = 0; r < _; r++) t[r] && (a = O(t[r])) && (s && (s += " "), s += a);
+  } else for (a in t) t[a] && (s && (s += " "), s += a);
+  return s;
+}
+function K() {
+  for (var t, r, a = 0, s = "", _ = arguments.length; a < _; a++) (t = arguments[a]) && (r = O(t)) && (s && (s += " "), s += r);
+  return s;
+}
+const N = "_active_1rsd6_164", c = {
+  "dialog-overlay": "_dialog-overlay_1rsd6_45",
+  "dialog-compose": "_dialog-compose_1rsd6_62",
+  "dialog-close": "_dialog-close_1rsd6_68",
+  "dialog-close-cross": "_dialog-close-cross_1rsd6_85",
+  "dialog-window": "_dialog-window_1rsd6_109",
+  "dialog-window-header": "_dialog-window-header_1rsd6_123",
+  "dialog-window-body": "_dialog-window-body_1rsd6_136",
+  "dialog-window-footer": "_dialog-window-footer_1rsd6_142",
+  "full-height": "_full-height_1rsd6_155",
+  "full-width": "_full-width_1rsd6_158",
+  "un-closable": "_un-closable_1rsd6_161",
+  active: N,
+  "position-top-center": "_position-top-center_1rsd6_170",
+  "position-center": "_position-center_1rsd6_176",
+  "position-bottom-center": "_position-bottom-center_1rsd6_180",
+  "position-left-top": "_position-left-top_1rsd6_186",
+  "position-left-center": "_position-left-center_1rsd6_192",
+  "position-left-bottom": "_position-left-bottom_1rsd6_198",
+  "position-right-top": "_position-right-top_1rsd6_204",
+  "position-right-center": "_position-right-center_1rsd6_210",
+  "position-right-bottom": "_position-right-bottom_1rsd6_216",
+  "animated-opening": "_animated-opening_1rsd6_222",
+  "animated-opening-opacity": "_animated-opening-opacity_1rsd6_1",
+  "animated-opening-translate": "_animated-opening-translate_1rsd6_1",
+  "animated-closing": "_animated-closing_1rsd6_228",
+  "animated-closing-opacity": "_animated-closing-opacity_1rsd6_1",
+  "animated-closing-translate": "_animated-closing-translate_1rsd6_1",
+  "paciu-ui-blink-animation": "_paciu-ui-blink-animation_1rsd6_1"
+};
+var p = /* @__PURE__ */ ((t) => (t.Light = "light", t.Dark = "dark", t.System = "system", t))(p || {}), i = /* @__PURE__ */ ((t) => (t.Opening = "opening", t.Opened = "opened", t.Closing = "closing", t.Closed = "closed", t))(i || {}), x = /* @__PURE__ */ ((t) => (t.TopCenter = "top-center", t.Center = "center", t.BottomCenter = "bottom-center", t.LeftTop = "left-top", t.LeftCenter = "left-center", t.LeftBottom = "left-bottom", t.RightTop = "right-top", t.RightCenter = "right-center", t.RightBottom = "right-bottom", t))(x || {});
+const T = $(void 0), q = () => H(T), F = ({ children: t, initialTheme: r, defaultDialogPosition: a }) => {
+  const [s, _] = y(!1), [g, E] = y(r || null), [m, B] = y(r || null), [d, h] = y([]), R = z(0), C = w((e) => {
+    document.documentElement.dataset.theme = e || void 0, E(e);
+  }, []), b = w((e, n) => {
+    h((o) => {
+      if (o.length > 0) {
+        const l = [...o], M = l.length - 1;
+        if (l[M].status === i.Opening)
+          return o;
+      }
+      return [...o, { id: ++R.current, status: i.Opening, node: e, options: n }];
+    });
+  }, []), f = w((e) => {
+    h((n) => {
+      if (n.length === 0)
+        return n;
+      const o = [...n], l = o.length - 1;
+      return o[l].status === i.Closing || (e?.esc || e?.outside) && o[l]?.options?.unClosable ? n : (o[l] = { ...o[l], status: i.Closing }, o);
+    });
+  }, []), v = k(() => {
+    const e = g || m;
+    return e ? e === p.Light ? p.Dark : p.Light : null;
+  }, [g, m]), j = k(
+    () => ({ theme: g, nextTheme: v, systemTheme: m, toggleTheme: C, openDialog: b, closeDialog: f, dialogsQueue: d }),
+    [g, v, m, C, b, f, d]
+  );
+  return u(() => {
+    if (d.length) {
+      const e = d[d.length - 1];
+      e.status === i.Opening && (e?.options?.onOpen && e.options.onOpen(), setTimeout(() => {
+        h((n) => {
+          const o = [...n];
+          return o[o.length - 1].status = i.Opened, o;
+        }), e?.options?.onOpened && e.options.onOpened();
+      }, 240)), e.status === i.Closing && (e?.options?.onClose && e.options.onClose(), setTimeout(() => {
+        h((n) => n.slice(0, -1)), e?.options?.onClosed && e.options.onClosed();
+      }, 240));
+    }
+  }, [d]), u(() => {
+    const e = window.matchMedia("(prefers-color-scheme: dark)"), n = (o) => {
+      B(o.matches ? p.Dark : p.Light);
+    };
+    return n(e), e.addEventListener("change", n), () => e.removeEventListener("change", n);
+  }, []), u(() => {
+    document.body.style.overflowY = d.length ? "hidden" : "";
+  }, [d]), u(() => {
+    const e = (l) => {
+      l.key === "Escape" && (l.stopPropagation(), f({ esc: !0 }));
+    }, n = () => {
+      document.addEventListener("keydown", e);
+    }, o = () => {
+      document.removeEventListener("keydown", e);
+    };
+    return n(), () => {
+      o();
+    };
+  }, []), u(() => {
+    _(!0);
+  }), /* @__PURE__ */ A(T.Provider, { value: j, children: [
+    t,
+    s && I(
+      /* @__PURE__ */ L("div", { id: "paciu-ui-dialogs", children: d.map((e, n) => {
+        const o = e?.options?.position || a || x.Center;
+        return /* @__PURE__ */ L(
+          "div",
+          {
+            className: K(c["dialog-overlay"], {
+              [c["animated-opening"]]: [
+                i.Opening,
+                i.Opened
+              ].includes(e.status),
+              [c["animated-closing"]]: [
+                i.Closing,
+                i.Closed
+              ].includes(e.status),
+              [c.active]: n === d.length - 1,
+              [c["full-height"]]: e?.options?.fullHeight,
+              [c["full-width"]]: e?.options?.fullWidth,
+              [c["un-closable"]]: e?.options?.unClosable,
+              [c[`position-${o}`]]: !!o
+            }),
+            onClick: () => f({ outside: !0 }),
+            style: {
+              zIndex: n + 1e3,
+              transform: `scale(calc(1 - ${(d.length - n - 1) * 0.02}))`
+            },
+            children: e.node()
+          },
+          e.id
+        );
+      }) }),
+      document.body
+    )
+  ] });
+};
+export {
+  x as D,
+  T as P,
+  p as T,
+  i as a,
+  F as b,
+  K as c,
+  c as s,
+  q as u
+};

package/dist/provider.css

@@ -0,0 +1 @@
+@keyframes _paciu-ui-blink-animation_1rsd6_1{0%{opacity:1}50%{opacity:.32}to{opacity:1}}@keyframes _animated-opening-translate_1rsd6_1{0%{transform:translate(var(--animated-from-x, 0),var(--animated-from-y, 0))}to{transform:translate(0)}}@keyframes _animated-opening-opacity_1rsd6_1{0%{opacity:0}to{opacity:1}}@keyframes _animated-closing-translate_1rsd6_1{0%{transform:translate(0)}to{transform:translate(var(--animated-from-x, 0),var(--animated-from-y, 0))}}@keyframes _animated-closing-opacity_1rsd6_1{0%{opacity:1}to{opacity:0}}._dialog-overlay_1rsd6_45{--window-background-color: var(--base-color-100);--window-shadow: var(--dialog-shadow, rgba(12, 12, 12, .06) 0px 0px 12px 0px);--window-width: var(--dialog-width, 768px);cursor:pointer;position:fixed;width:100%;height:100%;display:flex;flex-direction:column;opacity:0;left:0;top:0;padding:24px;transition:var(--transition-normal) transform;background:none}._dialog-overlay_1rsd6_45 ._dialog-compose_1rsd6_62{position:relative;max-height:100%;width:100%;max-width:var(--window-width)}._dialog-overlay_1rsd6_45 ._dialog-compose_1rsd6_62 ._dialog-close_1rsd6_68{width:32px;height:32px;background:var(--window-background-color);box-shadow:var(--window-shadow);border-radius:16px;position:fixed;top:-6px;right:-6px;z-index:2;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:var(--transition-normal)}._dialog-overlay_1rsd6_45 ._dialog-compose_1rsd6_62 ._dialog-close_1rsd6_68 ._dialog-close-cross_1rsd6_85{position:relative;width:16px;height:16px;cursor:pointer}._dialog-overlay_1rsd6_45 ._dialog-compose_1rsd6_62 ._dialog-close_1rsd6_68 ._dialog-close-cross_1rsd6_85:before,._dialog-overlay_1rsd6_45 ._dialog-compose_1rsd6_62 ._dialog-close_1rsd6_68 ._dialog-close-cross_1rsd6_85:after{content:"";position:absolute;top:50%;left:0;width:100%;height:2px;background-color:var(--base-color-900);transition:var(--transition-normal) background;border-radius:2px}._dialog-overlay_1rsd6_45 ._dialog-compose_1rsd6_62 ._dialog-close_1rsd6_68 ._dialog-close-cross_1rsd6_85:before{transform:translateY(-50%) rotate(45deg)}._dialog-overlay_1rsd6_45 ._dialog-compose_1rsd6_62 ._dialog-close_1rsd6_68 ._dialog-close-cross_1rsd6_85:after{transform:translateY(-50%) rotate(-45deg)}._dialog-overlay_1rsd6_45 ._dialog-compose_1rsd6_62 ._dialog-window_1rsd6_109{position:relative;cursor:default;width:100%;height:100%;border-radius:32px;background:var(--window-background-color);transition:var(--transition-normal) background;display:flex;flex-direction:column;box-shadow:var(--window-shadow);overflow:auto;filter:blur(2px)}._dialog-overlay_1rsd6_45 ._dialog-compose_1rsd6_62 ._dialog-window_1rsd6_109 ._dialog-window-header_1rsd6_123{position:sticky;top:0;z-index:1;background:var(--window-background-color);transition:var(--transition-normal) background;padding:12px;border-radius:inherit;box-shadow:var(--window-shadow);display:flex;flex-direction:column;justify-content:center}._dialog-overlay_1rsd6_45 ._dialog-compose_1rsd6_62 ._dialog-window_1rsd6_109 ._dialog-window-body_1rsd6_136{flex-grow:1;padding:12px;position:relative;z-index:0}._dialog-overlay_1rsd6_45 ._dialog-compose_1rsd6_62 ._dialog-window_1rsd6_109 ._dialog-window-footer_1rsd6_142{position:sticky;bottom:0;z-index:1;background:var(--window-background-color);transition:var(--transition-normal) background;padding:12px;border-radius:inherit;box-shadow:var(--window-shadow);display:flex;flex-direction:column;justify-content:center}._dialog-overlay_1rsd6_45._full-height_1rsd6_155 ._dialog-compose_1rsd6_62{height:100%}._dialog-overlay_1rsd6_45._full-width_1rsd6_158 ._dialog-compose_1rsd6_62{max-width:unset}._dialog-overlay_1rsd6_45._un-closable_1rsd6_161 ._dialog-compose_1rsd6_62 ._dialog-close_1rsd6_68{display:none}._dialog-overlay_1rsd6_45._active_1rsd6_164 ._dialog-compose_1rsd6_62 ._dialog-close_1rsd6_68{opacity:1}._dialog-overlay_1rsd6_45._active_1rsd6_164 ._dialog-compose_1rsd6_62 ._dialog-window_1rsd6_109{filter:unset}._dialog-overlay_1rsd6_45._position-top-center_1rsd6_170{--animated-from-x: 0;--animated-from-y: -24px;justify-content:start;align-items:center}._dialog-overlay_1rsd6_45._position-center_1rsd6_176{justify-content:center;align-items:center}._dialog-overlay_1rsd6_45._position-bottom-center_1rsd6_180{--animated-from-x: 0;--animated-from-y: 24px;justify-content:end;align-items:center}._dialog-overlay_1rsd6_45._position-left-top_1rsd6_186{--animated-from-x: -24px;--animated-from-y: -24px;justify-content:start;align-items:start}._dialog-overlay_1rsd6_45._position-left-center_1rsd6_192{--animated-from-x: -24px;--animated-from-y: 0;justify-content:center;align-items:start}._dialog-overlay_1rsd6_45._position-left-bottom_1rsd6_198{--animated-from-x: -24px;--animated-from-y: 24px;justify-content:end;align-items:start}._dialog-overlay_1rsd6_45._position-right-top_1rsd6_204{--animated-from-x: 24px;--animated-from-y: -24px;justify-content:start;align-items:end}._dialog-overlay_1rsd6_45._position-right-center_1rsd6_210{--animated-from-x: 24px;--animated-from-y: 0;justify-content:center;align-items:end}._dialog-overlay_1rsd6_45._position-right-bottom_1rsd6_216{--animated-from-x: 24px;--animated-from-y: 24px;justify-content:end;align-items:end}._dialog-overlay_1rsd6_45._animated-opening_1rsd6_222{animation:_animated-opening-opacity_1rsd6_1 .24s linear forwards}._dialog-overlay_1rsd6_45._animated-opening_1rsd6_222 ._dialog-compose_1rsd6_62{animation:_animated-opening-translate_1rsd6_1 .24s linear forwards}._dialog-overlay_1rsd6_45._animated-closing_1rsd6_228{pointer-events:none;animation:_animated-closing-opacity_1rsd6_1 .24s linear forwards}._dialog-overlay_1rsd6_45._animated-closing_1rsd6_228 ._dialog-compose_1rsd6_62{animation:_animated-closing-translate_1rsd6_1 .24s linear forwards}

package/dist/{dialog.d.ts → provider.d.ts}

@@ -1,21 +1,11 @@
-import { default as default_2 } from 'react';
+import { Context } from 'react';
+import { JSX } from 'react/jsx-runtime';
 
 export declare interface CloseDialogOptions {
     esc?: boolean;
     outside?: boolean;
 }
 
-export declare const Dialog: default_2.FC<DialogProps>;
-
-export declare const DialogContext: default_2.Context<DialogContextType | undefined>;
-
-export declare interface DialogContextType {
-    providerProps: DialogProviderProps;
-    queue: DialogQueueItem[];
-    openDialog: (node: () => default_2.ReactNode, options?: OpenDialogOptions) => void;
-    closeDialog: (options?: CloseDialogOptions) => void;
-}
-
 declare enum DialogPosition {
     TopCenter = "top-center",
     Center = "center",
@@ -28,21 +18,10 @@ declare enum DialogPosition {
     RightBottom = "right-bottom"
 }
 
-export declare interface DialogProps extends default_2.PropsWithChildren {
-    header?: default_2.ReactNode;
-    footer?: default_2.ReactNode;
-}
-
-export declare const DialogProvider: default_2.FC<DialogProviderProps & default_2.PropsWithChildren>;
-
-export declare interface DialogProviderProps {
-    defaultPosition?: DialogPosition;
-}
-
 export declare interface DialogQueueItem {
     id: number;
     status: DialogQueueItemStatus;
-    node: () => default_2.ReactNode;
+    node: () => React.ReactNode;
     options?: OpenDialogOptions;
 }
 
@@ -64,8 +43,31 @@ export declare interface OpenDialogOptions {
     onOpened?: () => boolean | void;
 }
 
-export declare const useDialog: () => DialogContextType;
+export declare const PaciuContext: Context<PaciuContextType | undefined>;
+
+export declare interface PaciuContextType {
+    theme: Theme | null;
+    nextTheme: Theme | null;
+    systemTheme: Theme | null;
+    toggleTheme: (theme: Theme) => void;
+    dialogsQueue: DialogQueueItem[];
+    openDialog: (node: () => React.ReactNode, options?: OpenDialogOptions) => void;
+    closeDialog: (options?: CloseDialogOptions) => void;
+}
+
+export declare const PaciuProvider: ({ children, initialTheme, defaultDialogPosition }: PaciuProviderProps) => JSX.Element;
+
+export declare interface PaciuProviderProps extends React.PropsWithChildren {
+    initialTheme?: Theme;
+    defaultDialogPosition?: DialogPosition;
+}
+
+declare enum Theme {
+    Light = "light",
+    Dark = "dark",
+    System = "system"
+}
 
-export declare const useDialogContext: () => DialogContextType | undefined;
+export declare const usePaciuContext: () => PaciuContextType | undefined;
 
 export { }

package/dist/provider.es.js

@@ -0,0 +1,9 @@
+import "react/jsx-runtime";
+import "react";
+import "react-dom";
+import { P as e, b as u, u as P } from "./provider-Kkk4KMCp.js";
+export {
+  e as PaciuContext,
+  u as PaciuProvider,
+  P as usePaciuContext
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paciu/ui",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "type": "module",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
@@ -10,13 +10,9 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.es.js"
     },
-    "./theme": {
-      "types": "./dist/theme.d.ts",
-      "import": "./dist/theme.es.js"
-    },
-    "./dialog": {
-      "types": "./dist/dialog.d.ts",
-      "import": "./dist/dialog.es.js"
+    "./provider": {
+      "types": "./dist/provider.d.ts",
+      "import": "./dist/provider.es.js"
     }
   },
   "files": [

package/dist/dialog.css

@@ -1 +0,0 @@
-@keyframes _animated-opening-translate_1u8dn_1{0%{transform:translate(var(--animated-from-x, 0),var(--animated-from-y, 0))}to{transform:translate(0)}}@keyframes _animated-opening-opacity_1u8dn_1{0%{opacity:0}to{opacity:1}}@keyframes _animated-closing-translate_1u8dn_1{0%{transform:translate(0)}to{transform:translate(var(--animated-from-x, 0),var(--animated-from-y, 0))}}@keyframes _animated-closing-opacity_1u8dn_1{0%{opacity:1}to{opacity:0}}._dialog-overlay_1u8dn_33{--window-background-color: var(--base-color-100);--window-shadow: var(--dialog-shadow, rgba(12, 12, 12, .06) 0px 0px 12px 0px);--window-width: var(--dialog-width, 768px);cursor:pointer;position:fixed;width:100%;height:100%;display:flex;flex-direction:column;opacity:0;left:0;top:0;padding:24px;transition:var(--transition-normal) transform;background:none}._dialog-overlay_1u8dn_33 ._dialog-compose_1u8dn_50{position:relative;max-height:100%;width:100%;max-width:var(--window-width)}._dialog-overlay_1u8dn_33 ._dialog-compose_1u8dn_50 ._dialog-close_1u8dn_56{width:32px;height:32px;background:var(--window-background-color);box-shadow:var(--window-shadow);border-radius:16px;position:fixed;top:-6px;right:-6px;z-index:2;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:var(--transition-normal)}._dialog-overlay_1u8dn_33 ._dialog-compose_1u8dn_50 ._dialog-close_1u8dn_56 ._dialog-close-cross_1u8dn_73{position:relative;width:16px;height:16px;cursor:pointer}._dialog-overlay_1u8dn_33 ._dialog-compose_1u8dn_50 ._dialog-close_1u8dn_56 ._dialog-close-cross_1u8dn_73:before,._dialog-overlay_1u8dn_33 ._dialog-compose_1u8dn_50 ._dialog-close_1u8dn_56 ._dialog-close-cross_1u8dn_73:after{content:"";position:absolute;top:50%;left:0;width:100%;height:2px;background-color:var(--base-color-900);transition:var(--transition-normal) background;border-radius:2px}._dialog-overlay_1u8dn_33 ._dialog-compose_1u8dn_50 ._dialog-close_1u8dn_56 ._dialog-close-cross_1u8dn_73:before{transform:translateY(-50%) rotate(45deg)}._dialog-overlay_1u8dn_33 ._dialog-compose_1u8dn_50 ._dialog-close_1u8dn_56 ._dialog-close-cross_1u8dn_73:after{transform:translateY(-50%) rotate(-45deg)}._dialog-overlay_1u8dn_33 ._dialog-compose_1u8dn_50 ._dialog-window_1u8dn_97{position:relative;cursor:default;width:100%;height:100%;border-radius:32px;background:var(--window-background-color);transition:var(--transition-normal) background;display:flex;flex-direction:column;box-shadow:var(--window-shadow);overflow:auto;filter:blur(2px)}._dialog-overlay_1u8dn_33 ._dialog-compose_1u8dn_50 ._dialog-window_1u8dn_97 ._dialog-window-header_1u8dn_111{position:sticky;top:0;z-index:1;background:var(--window-background-color);transition:var(--transition-normal) background;padding:12px;border-radius:inherit;box-shadow:var(--window-shadow);display:flex;flex-direction:column;justify-content:center}._dialog-overlay_1u8dn_33 ._dialog-compose_1u8dn_50 ._dialog-window_1u8dn_97 ._dialog-window-body_1u8dn_124{flex-grow:1;padding:12px;position:relative;z-index:0}._dialog-overlay_1u8dn_33 ._dialog-compose_1u8dn_50 ._dialog-window_1u8dn_97 ._dialog-window-footer_1u8dn_130{position:sticky;bottom:0;z-index:1;background:var(--window-background-color);transition:var(--transition-normal) background;padding:12px;border-radius:inherit;box-shadow:var(--window-shadow);display:flex;flex-direction:column;justify-content:center}._dialog-overlay_1u8dn_33._full-height_1u8dn_143 ._dialog-compose_1u8dn_50{height:100%}._dialog-overlay_1u8dn_33._full-width_1u8dn_146 ._dialog-compose_1u8dn_50{max-width:unset}._dialog-overlay_1u8dn_33._un-closable_1u8dn_149 ._dialog-compose_1u8dn_50 ._dialog-close_1u8dn_56{display:none}._dialog-overlay_1u8dn_33._active_1u8dn_152 ._dialog-compose_1u8dn_50 ._dialog-close_1u8dn_56{opacity:1}._dialog-overlay_1u8dn_33._active_1u8dn_152 ._dialog-compose_1u8dn_50 ._dialog-window_1u8dn_97{filter:unset}._dialog-overlay_1u8dn_33._position-top-center_1u8dn_158{--animated-from-x: 0;--animated-from-y: -24px;justify-content:start;align-items:center}._dialog-overlay_1u8dn_33._position-center_1u8dn_164{justify-content:center;align-items:center}._dialog-overlay_1u8dn_33._position-bottom-center_1u8dn_168{--animated-from-x: 0;--animated-from-y: 24px;justify-content:end;align-items:center}._dialog-overlay_1u8dn_33._position-left-top_1u8dn_174{--animated-from-x: -24px;--animated-from-y: -24px;justify-content:start;align-items:start}._dialog-overlay_1u8dn_33._position-left-center_1u8dn_180{--animated-from-x: -24px;--animated-from-y: 0;justify-content:center;align-items:start}._dialog-overlay_1u8dn_33._position-left-bottom_1u8dn_186{--animated-from-x: -24px;--animated-from-y: 24px;justify-content:end;align-items:start}._dialog-overlay_1u8dn_33._position-right-top_1u8dn_192{--animated-from-x: 24px;--animated-from-y: -24px;justify-content:start;align-items:end}._dialog-overlay_1u8dn_33._position-right-center_1u8dn_198{--animated-from-x: 24px;--animated-from-y: 0;justify-content:center;align-items:end}._dialog-overlay_1u8dn_33._position-right-bottom_1u8dn_204{--animated-from-x: 24px;--animated-from-y: 24px;justify-content:end;align-items:end}._dialog-overlay_1u8dn_33._animated-opening_1u8dn_210{animation:_animated-opening-opacity_1u8dn_1 .24s linear forwards}._dialog-overlay_1u8dn_33._animated-opening_1u8dn_210 ._dialog-compose_1u8dn_50{animation:_animated-opening-translate_1u8dn_1 .24s linear forwards}._dialog-overlay_1u8dn_33._animated-closing_1u8dn_216{pointer-events:none;animation:_animated-closing-opacity_1u8dn_1 .24s linear forwards}._dialog-overlay_1u8dn_33._animated-closing_1u8dn_216 ._dialog-compose_1u8dn_50{animation:_animated-closing-translate_1u8dn_1 .24s linear forwards}

package/dist/dialog.es.js

@@ -1,137 +0,0 @@
-"use client";
-import { jsxs as m, jsx as l } from "react/jsx-runtime";
-import { createContext as D, useState as f, useRef as x, useCallback as w, useEffect as _, useMemo as O, useContext as N } from "react";
-import { createPortal as k } from "react-dom";
-import { a as s, c as P, D as E } from "./index-CbbUQvJ6.js";
-import './dialog.css';const I = "_active_1u8dn_152", e = {
-  "dialog-overlay": "_dialog-overlay_1u8dn_33",
-  "dialog-compose": "_dialog-compose_1u8dn_50",
-  "dialog-close": "_dialog-close_1u8dn_56",
-  "dialog-close-cross": "_dialog-close-cross_1u8dn_73",
-  "dialog-window": "_dialog-window_1u8dn_97",
-  "dialog-window-header": "_dialog-window-header_1u8dn_111",
-  "dialog-window-body": "_dialog-window-body_1u8dn_124",
-  "dialog-window-footer": "_dialog-window-footer_1u8dn_130",
-  "full-height": "_full-height_1u8dn_143",
-  "full-width": "_full-width_1u8dn_146",
-  "un-closable": "_un-closable_1u8dn_149",
-  active: I,
-  "position-top-center": "_position-top-center_1u8dn_158",
-  "position-center": "_position-center_1u8dn_164",
-  "position-bottom-center": "_position-bottom-center_1u8dn_168",
-  "position-left-top": "_position-left-top_1u8dn_174",
-  "position-left-center": "_position-left-center_1u8dn_180",
-  "position-left-bottom": "_position-left-bottom_1u8dn_186",
-  "position-right-top": "_position-right-top_1u8dn_192",
-  "position-right-center": "_position-right-center_1u8dn_198",
-  "position-right-bottom": "_position-right-bottom_1u8dn_204",
-  "animated-opening": "_animated-opening_1u8dn_210",
-  "animated-opening-opacity": "_animated-opening-opacity_1u8dn_1",
-  "animated-opening-translate": "_animated-opening-translate_1u8dn_1",
-  "animated-closing": "_animated-closing_1u8dn_216",
-  "animated-closing-opacity": "_animated-closing-opacity_1u8dn_1",
-  "animated-closing-translate": "_animated-closing-translate_1u8dn_1"
-}, C = D(void 0), L = () => N(C), $ = () => {
-  const d = L();
-  if (!d)
-    throw new Error("useDialogContext must be used within DialogProvider");
-  return d;
-}, q = ({ header: d, children: c, footer: u }) => /* @__PURE__ */ m("div", { className: e["dialog-compose"], children: [
-  /* @__PURE__ */ l("div", { className: e["dialog-close"], children: /* @__PURE__ */ l("div", { className: e["dialog-close-cross"] }) }),
-  /* @__PURE__ */ m("div", { className: e["dialog-window"], onClick: (p) => p.stopPropagation(), children: [
-    d && /* @__PURE__ */ l("div", { className: e["dialog-window-header"], children: d }),
-    c && /* @__PURE__ */ l("div", { className: e["dialog-window-body"], children: c }),
-    u && /* @__PURE__ */ l("div", { className: e["dialog-window-footer"], children: u })
-  ] })
-] }), z = ({
-  children: d,
-  ...c
-}) => {
-  const [u, p] = f(!1), [i, r] = f([]), y = x(0), h = w((o, n) => {
-    r((t) => {
-      if (t.length > 0) {
-        const a = [...t], v = a.length - 1;
-        if (a[v].status === s.Opening)
-          return t;
-      }
-      return [...t, { id: ++y.current, status: s.Opening, node: o, options: n }];
-    });
-  }, []), g = w((o) => {
-    r((n) => {
-      if (n.length === 0)
-        return n;
-      const t = [...n], a = t.length - 1;
-      return t[a].status === s.Closing || (o?.esc || o?.outside) && t[a]?.options?.unClosable ? n : (t[a] = { ...t[a], status: s.Closing }, t);
-    });
-  }, []);
-  _(() => {
-    if (i.length) {
-      const o = i[i.length - 1];
-      o.status === s.Opening && (o?.options?.onOpen && o.options.onOpen(), setTimeout(() => {
-        r((n) => {
-          const t = [...n];
-          return t[t.length - 1].status = s.Opened, t;
-        }), o?.options?.onOpened && o.options.onOpened();
-      }, 240)), o.status === s.Closing && (o?.options?.onClose && o.options.onClose(), setTimeout(() => {
-        r((n) => n.slice(0, -1)), o?.options?.onClosed && o.options.onClosed();
-      }, 240));
-    }
-  }, [i]), _(() => {
-    document.body.style.overflowY = i.length ? "hidden" : "";
-  }, [i]), _(() => {
-    const o = (a) => {
-      a.key === "Escape" && (a.stopPropagation(), g({ esc: !0 }));
-    }, n = () => {
-      document.addEventListener("keydown", o);
-    }, t = () => {
-      document.removeEventListener("keydown", o);
-    };
-    return n(), () => {
-      t();
-    };
-  }, []), _(() => {
-    p(!0);
-  });
-  const b = O(
-    () => ({ openDialog: h, closeDialog: g, queue: i, providerProps: c }),
-    [h, g, i, c]
-  );
-  return /* @__PURE__ */ m(C.Provider, { value: b, children: [
-    d,
-    u && k(
-      /* @__PURE__ */ l("div", { id: "paciu-ui-dialogs", children: i.map((o, n) => /* @__PURE__ */ l(
-        "div",
-        {
-          className: P(e["dialog-overlay"], {
-            [e["animated-opening"]]: [s.Opening, s.Opened].includes(
-              o.status
-            ),
-            [e["animated-closing"]]: [s.Closing, s.Closed].includes(
-              o.status
-            ),
-            [e.active]: n === i.length - 1,
-            [e["full-height"]]: o?.options?.fullHeight,
-            [e["full-width"]]: o?.options?.fullWidth,
-            [e["un-closable"]]: o?.options?.unClosable,
-            [e[`position-${o?.options?.position || c?.defaultPosition || E.Center}`]]: !0
-          }),
-          onClick: () => g({ outside: !0 }),
-          style: {
-            zIndex: n + 1e3,
-            transform: `scale(calc(1 - ${(i.length - n - 1) * 0.02}))`
-          },
-          children: o.node()
-        },
-        o.id
-      )) }),
-      document.body
-    )
-  ] });
-};
-export {
-  q as Dialog,
-  C as DialogContext,
-  z as DialogProvider,
-  $ as useDialog,
-  L as useDialogContext
-};

package/dist/index-CbbUQvJ6.js

@@ -1,19 +0,0 @@
-function p(r) {
-  var n, e, t = "";
-  if (typeof r == "string" || typeof r == "number") t += r;
-  else if (typeof r == "object") if (Array.isArray(r)) {
-    var f = r.length;
-    for (n = 0; n < f; n++) r[n] && (e = p(r[n])) && (t && (t += " "), t += e);
-  } else for (e in r) r[e] && (t && (t += " "), t += e);
-  return t;
-}
-function o() {
-  for (var r, n, e = 0, t = "", f = arguments.length; e < f; e++) (r = arguments[e]) && (n = p(r)) && (t && (t += " "), t += n);
-  return t;
-}
-var c = /* @__PURE__ */ ((r) => (r.Opening = "opening", r.Opened = "opened", r.Closing = "closing", r.Closed = "closed", r))(c || {}), h = /* @__PURE__ */ ((r) => (r.TopCenter = "top-center", r.Center = "center", r.BottomCenter = "bottom-center", r.LeftTop = "left-top", r.LeftCenter = "left-center", r.LeftBottom = "left-bottom", r.RightTop = "right-top", r.RightCenter = "right-center", r.RightBottom = "right-bottom", r))(h || {});
-export {
-  h as D,
-  c as a,
-  o as c
-};

package/dist/theme.d.ts

@@ -1,29 +0,0 @@
-import { Context } from 'react';
-import { JSX } from 'react/jsx-runtime';
-
-export declare enum Theme {
-    Light = "light",
-    Dark = "dark",
-    System = "system"
-}
-
-export declare const ThemeContext: Context<ThemeContextType | undefined>;
-
-export declare interface ThemeContextType {
-    theme: Theme | null;
-    nextTheme: Theme | null;
-    systemTheme: Theme | null;
-    toggleTheme: (theme: Theme) => void;
-}
-
-export declare const ThemeProvider: ({ children, initialTheme }: ThemeProviderProps) => JSX.Element;
-
-export declare interface ThemeProviderProps extends React.PropsWithChildren {
-    initialTheme?: Theme;
-}
-
-export declare type ThemeType = 'light' | 'dark' | 'system';
-
-export declare const useTheme: () => ThemeContextType;
-
-export { }

package/dist/theme.es.js

@@ -1,33 +0,0 @@
-"use client";
-import { jsx as l } from "react/jsx-runtime";
-import { createContext as v, useState as m, useEffect as g, useMemo as T, useCallback as f, useContext as x } from "react";
-var y = /* @__PURE__ */ ((e) => (e.Light = "light", e.Dark = "dark", e.System = "system", e))(y || {});
-const c = v(void 0), w = ({ children: e, initialTheme: o }) => {
-  const [r, u] = m(o || null), [n, h] = m(o || null);
-  g(() => {
-    const t = window.matchMedia("(prefers-color-scheme: dark)"), s = (d) => {
-      h(
-        d.matches ? "dark" : "light"
-        /* Light */
-      );
-    };
-    return s(t), t.addEventListener("change", s), () => t.removeEventListener("change", s);
-  }, []);
-  const a = T(() => {
-    const t = r || n;
-    return t ? t === "light" ? "dark" : "light" : null;
-  }, [r, n]), i = f((t) => {
-    document.documentElement.dataset.theme = t || void 0, u(t);
-  }, []);
-  return /* @__PURE__ */ l(c.Provider, { value: { theme: r, nextTheme: a, systemTheme: n, toggleTheme: i }, children: e });
-}, E = () => {
-  const e = x(c);
-  if (!e) throw new Error("useTheme must be used within ThemeProvider");
-  return e;
-};
-export {
-  y as Theme,
-  c as ThemeContext,
-  w as ThemeProvider,
-  E as useTheme
-};