@paciu/ui 0.0.49 → 0.0.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -13,8 +13,15 @@ export declare const Card: default_2.ForwardRefExoticComponent<CardProps & defau
13
13
  declare interface CardProps extends default_2.HTMLAttributes<HTMLDivElement>, Pick<Modifiers, 'size'> {
14
14
  }
15
15
 
16
+ declare interface CloseDialogOptions {
17
+ esc?: boolean;
18
+ outside?: boolean;
19
+ }
20
+
16
21
  export declare type ColorType = 'opposite' | 'accent' | 'error';
17
22
 
23
+ export declare const Dialog: React.FC<DialogProps>;
24
+
18
25
  export declare enum DialogPosition {
19
26
  TopCenter = "top-center",
20
27
  Center = "center",
@@ -27,6 +34,18 @@ export declare enum DialogPosition {
27
34
  RightBottom = "right-bottom"
28
35
  }
29
36
 
37
+ declare interface DialogProps extends React.PropsWithChildren {
38
+ header?: React.ReactNode;
39
+ footer?: React.ReactNode;
40
+ }
41
+
42
+ declare interface DialogQueueItem {
43
+ id: number;
44
+ status: DialogQueueItemStatus;
45
+ node: () => React.ReactNode;
46
+ options?: OpenDialogOptions;
47
+ }
48
+
30
49
  export declare enum DialogQueueItemStatus {
31
50
  Opening = "opening",
32
51
  Opened = "opened",
@@ -37,7 +56,7 @@ export declare enum DialogQueueItemStatus {
37
56
  export declare const Flex: default_2.ForwardRefExoticComponent<FlexProps & default_2.RefAttributes<HTMLDivElement>>;
38
57
 
39
58
  declare interface FlexProps extends default_2.HTMLAttributes<HTMLDivElement> {
40
- size?: Size | null;
59
+ size?: SizeType;
41
60
  direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
42
61
  align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
43
62
  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
@@ -54,20 +73,51 @@ export declare interface Modifiers {
54
73
  square?: boolean;
55
74
  rounded?: boolean;
56
75
  loading?: boolean;
57
- size?: Size;
76
+ size?: SizeType;
58
77
  color?: ColorType;
59
78
  }
60
79
 
80
+ declare interface OpenDialogOptions {
81
+ position?: DialogPosition;
82
+ unClosable?: boolean;
83
+ fullHeight?: boolean;
84
+ fullWidth?: boolean;
85
+ onClose?: () => boolean | void;
86
+ onClosed?: () => boolean | void;
87
+ onOpen?: () => boolean | void;
88
+ onOpened?: () => boolean | void;
89
+ }
90
+
91
+ declare interface PaciuContextType {
92
+ theme: Theme | null;
93
+ nextTheme: Theme | null;
94
+ systemTheme: Theme | null;
95
+ toggleTheme: (theme: Theme) => void;
96
+ dialogsQueue: DialogQueueItem[];
97
+ openDialog: (node: () => React.ReactNode, options?: OpenDialogOptions) => void;
98
+ closeDialog: (options?: CloseDialogOptions) => void;
99
+ }
100
+
61
101
  /** row */
62
102
  export declare const Row: default_2.ForwardRefExoticComponent<RowProps & default_2.RefAttributes<HTMLDivElement>>;
63
103
 
64
104
  declare interface RowProps extends Omit<default_2.ButtonHTMLAttributes<HTMLDivElement>, 'color'>, Pick<Modifiers, 'size'> {
65
105
  }
66
106
 
67
- export declare type Size = 'micro' | 'mini' | 'small' | 'medium' | 'large' | 'huge' | 'enormous';
107
+ export declare type SizeType = 'micro' | 'mini' | 'small' | 'medium' | 'large' | 'huge' | 'enormous';
108
+
109
+ export declare enum Theme {
110
+ Light = "light",
111
+ Dark = "dark",
112
+ System = "system"
113
+ }
114
+
115
+ export declare type ThemeType = 'light' | 'dark' | 'system';
68
116
 
69
117
  export declare const useEscape: (callback: () => void) => void;
70
118
 
119
+ export declare const usePaciu: () => PaciuContextType;
120
+
71
121
  export declare const useScroll: () => {
72
122
  isScrolled: boolean;
73
123
  };
package/dist/index.es.js CHANGED
@@ -1,7 +1,7 @@
1
- import { jsx as u } from "react/jsx-runtime";
2
- import c, { useState as N, useEffect as g, useRef as I } from "react";
3
- import { c as m } from "./index-CbbUQvJ6.js";
4
- import { D as M, a as T } from "./index-CbbUQvJ6.js";
1
+ import { jsx as a, jsxs as P } from "react/jsx-runtime";
2
+ import m, { useState as x, useEffect as w, useRef as L } from "react";
3
+ import { c as f, s as d, u as S } from "./provider-DBaw9HKy.js";
4
+ import { D as X, a as Z, T as ss } from "./provider-DBaw9HKy.js";
5
5
  import './index.css';const n = {
6
6
  "paciu-ui-button": "_paciu-ui-button_y249s_14",
7
7
  "size-micro": "_size-micro_y249s_23",
@@ -21,65 +21,65 @@ import './index.css';const n = {
21
21
  "color-opposite": "_color-opposite_y249s_139",
22
22
  "color-accent": "_color-accent_y249s_207",
23
23
  "color-error": "_color-error_y249s_275"
24
- }, L = c.forwardRef((i, e) => {
24
+ }, D = m.forwardRef((i, e) => {
25
25
  const {
26
26
  children: s,
27
27
  className: o,
28
28
  color: r,
29
29
  square: _,
30
- loading: t,
31
- link: d,
32
- soft: l,
33
- solid: f,
34
- outline: p,
30
+ loading: l,
31
+ link: c,
32
+ soft: u,
33
+ solid: p,
34
+ outline: z,
35
35
  // opaque,
36
- rounded: z,
37
- size: w,
36
+ rounded: g,
37
+ size: h,
38
38
  onClick: k,
39
- stopPropagation: P,
40
- stopImmediatePropagation: $,
41
- ...x
42
- } = i, [E, h] = N(!1), R = async (y) => {
43
- if (P && y?.stopPropagation(), $ && y?.nativeEvent?.stopImmediatePropagation(), k) {
44
- const b = k(y);
45
- if (b instanceof Promise) {
46
- h(!0);
39
+ stopPropagation: $,
40
+ stopImmediatePropagation: E,
41
+ ...R
42
+ } = i, [C, v] = x(!1), I = async (y) => {
43
+ if ($ && y?.stopPropagation(), E && y?.nativeEvent?.stopImmediatePropagation(), k) {
44
+ const N = k(y);
45
+ if (N instanceof Promise) {
46
+ v(!0);
47
47
  try {
48
- await b;
48
+ await N;
49
49
  } finally {
50
- h(!1);
50
+ v(!1);
51
51
  }
52
52
  }
53
53
  }
54
54
  };
55
- return /* @__PURE__ */ u(
55
+ return /* @__PURE__ */ a(
56
56
  "button",
57
57
  {
58
58
  ref: e,
59
- className: m(
59
+ className: f(
60
60
  n["paciu-ui-button"],
61
61
  {
62
62
  // [ styles.opaque ]: opaque,
63
- [n["modifier-loading"]]: E || t,
64
- [n["modifier-rounded"]]: z,
63
+ [n["modifier-loading"]]: C || l,
64
+ [n["modifier-rounded"]]: g,
65
65
  [n["modifier-square"]]: _,
66
- [n["modifier-link"]]: d,
67
- [n["modifier-soft"]]: l,
68
- [n["modifier-outline"]]: p,
69
- [n["modifier-solid"]]: f,
66
+ [n["modifier-link"]]: c,
67
+ [n["modifier-soft"]]: u,
68
+ [n["modifier-outline"]]: z,
69
+ [n["modifier-solid"]]: p,
70
70
  ...r && { [n[`color-${r}`]]: r }
71
71
  },
72
- w && n[`size-${w}`],
72
+ h && n[`size-${h}`],
73
73
  o
74
74
  ),
75
- onClick: R,
76
- ...x,
75
+ onClick: I,
76
+ ...R,
77
77
  children: s
78
78
  }
79
79
  );
80
80
  });
81
- L.displayName = "Button";
82
- const v = {
81
+ D.displayName = "Button";
82
+ const b = {
83
83
  "paciu-ui-row": "_paciu-ui-row_kd3dr_14",
84
84
  "size-micro": "_size-micro_kd3dr_23",
85
85
  "size-mini": "_size-mini_kd3dr_27",
@@ -88,15 +88,15 @@ const v = {
88
88
  "size-huge": "_size-huge_kd3dr_39",
89
89
  "size-enormous": "_size-enormous_kd3dr_43",
90
90
  "paciu-ui-blink-animation": "_paciu-ui-blink-animation_kd3dr_1"
91
- }, S = c.forwardRef((i, e) => {
91
+ }, q = m.forwardRef((i, e) => {
92
92
  const { className: s, size: o, children: r, ..._ } = i;
93
- return /* @__PURE__ */ u("div", { ref: e, className: m(v["paciu-ui-row"], o && v[`size-${o}`], s), ..._, children: r });
93
+ return /* @__PURE__ */ a("div", { ref: e, className: f(b["paciu-ui-row"], o && b[`size-${o}`], s), ..._, children: r });
94
94
  });
95
- S.displayName = "Row";
96
- const C = "_flex_ssd0s_14", q = "_inline_ssd0s_22", D = "_grow_ssd0s_25", a = {
97
- flex: C,
98
- inline: q,
99
- grow: D,
95
+ q.displayName = "Row";
96
+ const B = "_flex_ssd0s_14", F = "_inline_ssd0s_22", T = "_grow_ssd0s_25", t = {
97
+ flex: B,
98
+ inline: F,
99
+ grow: T,
100
100
  "direction-column": "_direction-column_ssd0s_28",
101
101
  "direction-row-reverse": "_direction-row-reverse_ssd0s_31",
102
102
  "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 = {
119
119
  "size-huge": "_size-huge_ssd0s_95",
120
120
  "size-enormous": "_size-enormous_ssd0s_99",
121
121
  "paciu-ui-blink-animation": "_paciu-ui-blink-animation_ssd0s_1"
122
- }, B = c.forwardRef((i, e) => {
123
- const { children: s, className: o, direction: r, align: _, justify: t, wrap: d, size: l, inline: f, grow: p, ...z } = i;
124
- return /* @__PURE__ */ u(
122
+ }, O = m.forwardRef((i, e) => {
123
+ const { children: s, className: o, direction: r, align: _, justify: l, wrap: c, size: u, inline: p, grow: z, ...g } = i;
124
+ return /* @__PURE__ */ a(
125
125
  "div",
126
126
  {
127
127
  ref: e,
128
- className: m(
129
- a.flex,
128
+ className: f(
129
+ t.flex,
130
130
  {
131
- [a.inline]: f,
132
- [a.grow]: p,
133
- [a[`direction-${r}`]]: r,
134
- [a[`align-${_}`]]: _,
135
- [a[`justify-${t}`]]: t,
136
- [a[`wrap-${d}`]]: d
131
+ [t.inline]: p,
132
+ [t.grow]: z,
133
+ [t[`direction-${r}`]]: r,
134
+ [t[`align-${_}`]]: _,
135
+ [t[`justify-${l}`]]: l,
136
+ [t[`wrap-${c}`]]: c
137
137
  },
138
- l && a[`size-${l}`],
138
+ u && t[`size-${u}`],
139
139
  o
140
140
  ),
141
- ...z,
141
+ ...g,
142
142
  children: s
143
143
  }
144
144
  );
145
145
  });
146
- B.displayName = "Flex";
146
+ O.displayName = "Flex";
147
147
  const j = {
148
148
  "paciu-ui-card": "_paciu-ui-card_a6huo_14",
149
149
  "size-micro": "_size-micro_a6huo_28",
@@ -153,44 +153,58 @@ const j = {
153
153
  "size-huge": "_size-huge_a6huo_48",
154
154
  "size-enormous": "_size-enormous_a6huo_53",
155
155
  "paciu-ui-blink-animation": "_paciu-ui-blink-animation_a6huo_1"
156
- }, F = c.forwardRef((i, e) => {
156
+ }, Q = m.forwardRef((i, e) => {
157
157
  const { children: s, className: o, size: r, ..._ } = i;
158
- return /* @__PURE__ */ u("div", { ref: e, className: m(j["paciu-ui-card"], r && j[`size-${r}`], o), ..._, children: s });
158
+ return /* @__PURE__ */ a("div", { ref: e, className: f(j["paciu-ui-card"], r && j[`size-${r}`], o), ..._, children: s });
159
159
  });
160
- F.displayName = "Card";
161
- const A = (i) => {
162
- g(() => {
160
+ Q.displayName = "Card";
161
+ const H = ({ header: i, children: e, footer: s }) => /* @__PURE__ */ P("div", { className: d["dialog-compose"], children: [
162
+ /* @__PURE__ */ a("div", { className: d["dialog-close"], children: /* @__PURE__ */ a("div", { className: d["dialog-close-cross"] }) }),
163
+ /* @__PURE__ */ P("div", { className: d["dialog-window"], onClick: (o) => o.stopPropagation(), children: [
164
+ i && /* @__PURE__ */ a("div", { className: d["dialog-window-header"], children: i }),
165
+ e && /* @__PURE__ */ a("div", { className: d["dialog-window-body"], children: e }),
166
+ s && /* @__PURE__ */ a("div", { className: d["dialog-window-footer"], children: s })
167
+ ] })
168
+ ] }), J = (i) => {
169
+ w(() => {
163
170
  const e = (s) => {
164
171
  s.key === "Escape" && (s.preventDefault(), s.stopPropagation(), s.stopImmediatePropagation(), i());
165
172
  };
166
173
  return document.addEventListener("keydown", e, !0), () => document.removeEventListener("keydown", e, !0);
167
174
  }, [i]);
168
- }, G = (i, e = [], s) => {
169
- const o = I(s?.count || 1);
170
- g(() => {
175
+ }, K = (i, e = [], s) => {
176
+ const o = L(s?.count || 1);
177
+ w(() => {
171
178
  if (o.current > 0) {
172
179
  o.current--;
173
180
  return;
174
181
  }
175
182
  return i();
176
183
  }, e);
177
- }, H = () => {
178
- const [i, e] = N(!1);
179
- return g(() => {
184
+ }, M = () => {
185
+ const [i, e] = x(!1);
186
+ return w(() => {
180
187
  const s = () => e(window.scrollY > 0);
181
188
  return s(), document.addEventListener("scroll", s), () => {
182
189
  document.removeEventListener("scroll", s);
183
190
  };
184
191
  }, []), { isScrolled: i };
192
+ }, U = () => {
193
+ const i = S();
194
+ if (!i) throw new Error("usePaciu must be used within PaciuProvider");
195
+ return i;
185
196
  };
186
197
  export {
187
- L as Button,
188
- F as Card,
189
- M as DialogPosition,
190
- T as DialogQueueItemStatus,
191
- B as Flex,
192
- S as Row,
193
- A as useEscape,
194
- H as useScroll,
195
- G as useSkipEffect
198
+ D as Button,
199
+ Q as Card,
200
+ H as Dialog,
201
+ X as DialogPosition,
202
+ Z as DialogQueueItemStatus,
203
+ O as Flex,
204
+ q as Row,
205
+ ss as Theme,
206
+ J as useEscape,
207
+ U as usePaciu,
208
+ M as useScroll,
209
+ K as useSkipEffect
196
210
  };
@@ -0,0 +1,152 @@
1
+ "use client";
2
+ import { jsxs as A, jsx as L } from "react/jsx-runtime";
3
+ import { createContext as $, useState as y, useRef as z, useCallback as w, useMemo as O, useEffect as _, useContext as H } from "react";
4
+ import { createPortal as I } from "react-dom";
5
+ import './provider.css';function k(t) {
6
+ var d, a, s = "";
7
+ if (typeof t == "string" || typeof t == "number") s += t;
8
+ else if (typeof t == "object") if (Array.isArray(t)) {
9
+ var p = t.length;
10
+ for (d = 0; d < p; d++) t[d] && (a = k(t[d])) && (s && (s += " "), s += a);
11
+ } else for (a in t) t[a] && (s && (s += " "), s += a);
12
+ return s;
13
+ }
14
+ function K() {
15
+ for (var t, d, a = 0, s = "", p = arguments.length; a < p; a++) (t = arguments[a]) && (d = k(t)) && (s && (s += " "), s += d);
16
+ return s;
17
+ }
18
+ const N = "_active_1u8dn_152", c = {
19
+ "dialog-overlay": "_dialog-overlay_1u8dn_33",
20
+ "dialog-compose": "_dialog-compose_1u8dn_50",
21
+ "dialog-close": "_dialog-close_1u8dn_56",
22
+ "dialog-close-cross": "_dialog-close-cross_1u8dn_73",
23
+ "dialog-window": "_dialog-window_1u8dn_97",
24
+ "dialog-window-header": "_dialog-window-header_1u8dn_111",
25
+ "dialog-window-body": "_dialog-window-body_1u8dn_124",
26
+ "dialog-window-footer": "_dialog-window-footer_1u8dn_130",
27
+ "full-height": "_full-height_1u8dn_143",
28
+ "full-width": "_full-width_1u8dn_146",
29
+ "un-closable": "_un-closable_1u8dn_149",
30
+ active: N,
31
+ "position-top-center": "_position-top-center_1u8dn_158",
32
+ "position-center": "_position-center_1u8dn_164",
33
+ "position-bottom-center": "_position-bottom-center_1u8dn_168",
34
+ "position-left-top": "_position-left-top_1u8dn_174",
35
+ "position-left-center": "_position-left-center_1u8dn_180",
36
+ "position-left-bottom": "_position-left-bottom_1u8dn_186",
37
+ "position-right-top": "_position-right-top_1u8dn_192",
38
+ "position-right-center": "_position-right-center_1u8dn_198",
39
+ "position-right-bottom": "_position-right-bottom_1u8dn_204",
40
+ "animated-opening": "_animated-opening_1u8dn_210",
41
+ "animated-opening-opacity": "_animated-opening-opacity_1u8dn_1",
42
+ "animated-opening-translate": "_animated-opening-translate_1u8dn_1",
43
+ "animated-closing": "_animated-closing_1u8dn_216",
44
+ "animated-closing-opacity": "_animated-closing-opacity_1u8dn_1",
45
+ "animated-closing-translate": "_animated-closing-translate_1u8dn_1"
46
+ };
47
+ var 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 || {}), u = /* @__PURE__ */ ((t) => (t.Light = "light", t.Dark = "dark", t.System = "system", t))(u || {});
48
+ const T = $(void 0), q = () => H(T), F = ({ children: t, initialTheme: d, defaultDialogPosition: a }) => {
49
+ const [s, p] = y(!1), [g, E] = y(d || null), [m, B] = y(d || null), [r, h] = y([]), R = z(0), C = w((n) => {
50
+ document.documentElement.dataset.theme = n || void 0, E(n);
51
+ }, []), b = w((n, o) => {
52
+ h((e) => {
53
+ if (e.length > 0) {
54
+ const l = [...e], M = l.length - 1;
55
+ if (l[M].status === i.Opening)
56
+ return e;
57
+ }
58
+ return [...e, { id: ++R.current, status: i.Opening, node: n, options: o }];
59
+ });
60
+ }, []), f = w((n) => {
61
+ h((o) => {
62
+ if (o.length === 0)
63
+ return o;
64
+ const e = [...o], l = e.length - 1;
65
+ return e[l].status === i.Closing || (n?.esc || n?.outside) && e[l]?.options?.unClosable ? o : (e[l] = { ...e[l], status: i.Closing }, e);
66
+ });
67
+ }, []), v = O(() => {
68
+ const n = g || m;
69
+ return n ? n === u.Light ? u.Dark : u.Light : null;
70
+ }, [g, m]), j = O(
71
+ () => ({ theme: g, nextTheme: v, systemTheme: m, toggleTheme: C, openDialog: b, closeDialog: f, dialogsQueue: r }),
72
+ [g, v, m, C, b, f, r]
73
+ );
74
+ return _(() => {
75
+ if (r.length) {
76
+ const n = r[r.length - 1];
77
+ n.status === i.Opening && (n?.options?.onOpen && n.options.onOpen(), setTimeout(() => {
78
+ h((o) => {
79
+ const e = [...o];
80
+ return e[e.length - 1].status = i.Opened, e;
81
+ }), n?.options?.onOpened && n.options.onOpened();
82
+ }, 240)), n.status === i.Closing && (n?.options?.onClose && n.options.onClose(), setTimeout(() => {
83
+ h((o) => o.slice(0, -1)), n?.options?.onClosed && n.options.onClosed();
84
+ }, 240));
85
+ }
86
+ }, [r]), _(() => {
87
+ const n = window.matchMedia("(prefers-color-scheme: dark)"), o = (e) => {
88
+ B(e.matches ? u.Dark : u.Light);
89
+ };
90
+ return o(n), n.addEventListener("change", o), () => n.removeEventListener("change", o);
91
+ }, []), _(() => {
92
+ document.body.style.overflowY = r.length ? "hidden" : "";
93
+ }, [r]), _(() => {
94
+ const n = (l) => {
95
+ l.key === "Escape" && (l.stopPropagation(), f({ esc: !0 }));
96
+ }, o = () => {
97
+ document.addEventListener("keydown", n);
98
+ }, e = () => {
99
+ document.removeEventListener("keydown", n);
100
+ };
101
+ return o(), () => {
102
+ e();
103
+ };
104
+ }, []), _(() => {
105
+ p(!0);
106
+ }), /* @__PURE__ */ A(T.Provider, { value: j, children: [
107
+ t,
108
+ s && I(
109
+ /* @__PURE__ */ L("div", { id: "paciu-ui-dialogs", children: r.map((n, o) => {
110
+ const e = n?.options?.position || a || x.Center;
111
+ return /* @__PURE__ */ L(
112
+ "div",
113
+ {
114
+ className: K(c["dialog-overlay"], {
115
+ [c["animated-opening"]]: [
116
+ i.Opening,
117
+ i.Opened
118
+ ].includes(n.status),
119
+ [c["animated-closing"]]: [
120
+ i.Closing,
121
+ i.Closed
122
+ ].includes(n.status),
123
+ [c.active]: o === r.length - 1,
124
+ [c["full-height"]]: n?.options?.fullHeight,
125
+ [c["full-width"]]: n?.options?.fullWidth,
126
+ [c["un-closable"]]: n?.options?.unClosable,
127
+ [c[`position-${e}`]]: !!e
128
+ }),
129
+ onClick: () => f({ outside: !0 }),
130
+ style: {
131
+ zIndex: o + 1e3,
132
+ transform: `scale(calc(1 - ${(r.length - o - 1) * 0.02}))`
133
+ },
134
+ children: n.node()
135
+ },
136
+ n.id
137
+ );
138
+ }) }),
139
+ document.body
140
+ )
141
+ ] });
142
+ };
143
+ export {
144
+ x as D,
145
+ T as P,
146
+ u as T,
147
+ i as a,
148
+ F as b,
149
+ K as c,
150
+ c as s,
151
+ q as u
152
+ };
@@ -1,21 +1,11 @@
1
- import { default as default_2 } from 'react';
1
+ import { Context } from 'react';
2
+ import { JSX } from 'react/jsx-runtime';
2
3
 
3
4
  export declare interface CloseDialogOptions {
4
5
  esc?: boolean;
5
6
  outside?: boolean;
6
7
  }
7
8
 
8
- export declare const Dialog: default_2.FC<DialogProps>;
9
-
10
- export declare const DialogContext: default_2.Context<DialogContextType | undefined>;
11
-
12
- export declare interface DialogContextType {
13
- providerProps: DialogProviderProps;
14
- queue: DialogQueueItem[];
15
- openDialog: (node: () => default_2.ReactNode, options?: OpenDialogOptions) => void;
16
- closeDialog: (options?: CloseDialogOptions) => void;
17
- }
18
-
19
9
  declare enum DialogPosition {
20
10
  TopCenter = "top-center",
21
11
  Center = "center",
@@ -28,21 +18,10 @@ declare enum DialogPosition {
28
18
  RightBottom = "right-bottom"
29
19
  }
30
20
 
31
- export declare interface DialogProps extends default_2.PropsWithChildren {
32
- header?: default_2.ReactNode;
33
- footer?: default_2.ReactNode;
34
- }
35
-
36
- export declare const DialogProvider: default_2.FC<DialogProviderProps & default_2.PropsWithChildren>;
37
-
38
- export declare interface DialogProviderProps {
39
- defaultPosition?: DialogPosition;
40
- }
41
-
42
21
  export declare interface DialogQueueItem {
43
22
  id: number;
44
23
  status: DialogQueueItemStatus;
45
- node: () => default_2.ReactNode;
24
+ node: () => React.ReactNode;
46
25
  options?: OpenDialogOptions;
47
26
  }
48
27
 
@@ -64,8 +43,31 @@ export declare interface OpenDialogOptions {
64
43
  onOpened?: () => boolean | void;
65
44
  }
66
45
 
67
- export declare const useDialog: () => DialogContextType;
46
+ export declare const PaciuContext: Context<PaciuContextType | undefined>;
47
+
48
+ export declare interface PaciuContextType {
49
+ theme: Theme | null;
50
+ nextTheme: Theme | null;
51
+ systemTheme: Theme | null;
52
+ toggleTheme: (theme: Theme) => void;
53
+ dialogsQueue: DialogQueueItem[];
54
+ openDialog: (node: () => React.ReactNode, options?: OpenDialogOptions) => void;
55
+ closeDialog: (options?: CloseDialogOptions) => void;
56
+ }
57
+
58
+ export declare const PaciuProvider: ({ children, initialTheme, defaultDialogPosition }: PaciuProviderProps) => JSX.Element;
59
+
60
+ export declare interface PaciuProviderProps extends React.PropsWithChildren {
61
+ initialTheme?: Theme;
62
+ defaultDialogPosition?: DialogPosition;
63
+ }
64
+
65
+ declare enum Theme {
66
+ Light = "light",
67
+ Dark = "dark",
68
+ System = "system"
69
+ }
68
70
 
69
- export declare const useDialogContext: () => DialogContextType | undefined;
71
+ export declare const usePaciuContext: () => PaciuContextType | undefined;
70
72
 
71
73
  export { }
@@ -0,0 +1,9 @@
1
+ import "react/jsx-runtime";
2
+ import "react";
3
+ import "react-dom";
4
+ import { P as e, b as u, u as P } from "./provider-DBaw9HKy.js";
5
+ export {
6
+ e as PaciuContext,
7
+ u as PaciuProvider,
8
+ P as usePaciuContext
9
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@paciu/ui",
3
- "version": "0.0.49",
3
+ "version": "0.0.50",
4
4
  "type": "module",
5
5
  "main": "./dist/index.umd.js",
6
6
  "module": "./dist/index.es.js",
@@ -10,13 +10,9 @@
10
10
  "types": "./dist/index.d.ts",
11
11
  "import": "./dist/index.es.js"
12
12
  },
13
- "./theme": {
14
- "types": "./dist/theme.d.ts",
15
- "import": "./dist/theme.es.js"
16
- },
17
- "./dialog": {
18
- "types": "./dist/dialog.d.ts",
19
- "import": "./dist/dialog.es.js"
13
+ "./provider": {
14
+ "types": "./dist/provider.d.ts",
15
+ "import": "./dist/provider.es.js"
20
16
  }
21
17
  },
22
18
  "files": [
package/dist/dialog.es.js DELETED
@@ -1,137 +0,0 @@
1
- "use client";
2
- import { jsxs as m, jsx as l } from "react/jsx-runtime";
3
- import { createContext as D, useState as f, useRef as x, useCallback as w, useEffect as _, useMemo as O, useContext as N } from "react";
4
- import { createPortal as k } from "react-dom";
5
- import { a as s, c as P, D as E } from "./index-CbbUQvJ6.js";
6
- import './dialog.css';const I = "_active_1u8dn_152", e = {
7
- "dialog-overlay": "_dialog-overlay_1u8dn_33",
8
- "dialog-compose": "_dialog-compose_1u8dn_50",
9
- "dialog-close": "_dialog-close_1u8dn_56",
10
- "dialog-close-cross": "_dialog-close-cross_1u8dn_73",
11
- "dialog-window": "_dialog-window_1u8dn_97",
12
- "dialog-window-header": "_dialog-window-header_1u8dn_111",
13
- "dialog-window-body": "_dialog-window-body_1u8dn_124",
14
- "dialog-window-footer": "_dialog-window-footer_1u8dn_130",
15
- "full-height": "_full-height_1u8dn_143",
16
- "full-width": "_full-width_1u8dn_146",
17
- "un-closable": "_un-closable_1u8dn_149",
18
- active: I,
19
- "position-top-center": "_position-top-center_1u8dn_158",
20
- "position-center": "_position-center_1u8dn_164",
21
- "position-bottom-center": "_position-bottom-center_1u8dn_168",
22
- "position-left-top": "_position-left-top_1u8dn_174",
23
- "position-left-center": "_position-left-center_1u8dn_180",
24
- "position-left-bottom": "_position-left-bottom_1u8dn_186",
25
- "position-right-top": "_position-right-top_1u8dn_192",
26
- "position-right-center": "_position-right-center_1u8dn_198",
27
- "position-right-bottom": "_position-right-bottom_1u8dn_204",
28
- "animated-opening": "_animated-opening_1u8dn_210",
29
- "animated-opening-opacity": "_animated-opening-opacity_1u8dn_1",
30
- "animated-opening-translate": "_animated-opening-translate_1u8dn_1",
31
- "animated-closing": "_animated-closing_1u8dn_216",
32
- "animated-closing-opacity": "_animated-closing-opacity_1u8dn_1",
33
- "animated-closing-translate": "_animated-closing-translate_1u8dn_1"
34
- }, C = D(void 0), L = () => N(C), $ = () => {
35
- const d = L();
36
- if (!d)
37
- throw new Error("useDialogContext must be used within DialogProvider");
38
- return d;
39
- }, q = ({ header: d, children: c, footer: u }) => /* @__PURE__ */ m("div", { className: e["dialog-compose"], children: [
40
- /* @__PURE__ */ l("div", { className: e["dialog-close"], children: /* @__PURE__ */ l("div", { className: e["dialog-close-cross"] }) }),
41
- /* @__PURE__ */ m("div", { className: e["dialog-window"], onClick: (p) => p.stopPropagation(), children: [
42
- d && /* @__PURE__ */ l("div", { className: e["dialog-window-header"], children: d }),
43
- c && /* @__PURE__ */ l("div", { className: e["dialog-window-body"], children: c }),
44
- u && /* @__PURE__ */ l("div", { className: e["dialog-window-footer"], children: u })
45
- ] })
46
- ] }), z = ({
47
- children: d,
48
- ...c
49
- }) => {
50
- const [u, p] = f(!1), [i, r] = f([]), y = x(0), h = w((o, n) => {
51
- r((t) => {
52
- if (t.length > 0) {
53
- const a = [...t], v = a.length - 1;
54
- if (a[v].status === s.Opening)
55
- return t;
56
- }
57
- return [...t, { id: ++y.current, status: s.Opening, node: o, options: n }];
58
- });
59
- }, []), g = w((o) => {
60
- r((n) => {
61
- if (n.length === 0)
62
- return n;
63
- const t = [...n], a = t.length - 1;
64
- return t[a].status === s.Closing || (o?.esc || o?.outside) && t[a]?.options?.unClosable ? n : (t[a] = { ...t[a], status: s.Closing }, t);
65
- });
66
- }, []);
67
- _(() => {
68
- if (i.length) {
69
- const o = i[i.length - 1];
70
- o.status === s.Opening && (o?.options?.onOpen && o.options.onOpen(), setTimeout(() => {
71
- r((n) => {
72
- const t = [...n];
73
- return t[t.length - 1].status = s.Opened, t;
74
- }), o?.options?.onOpened && o.options.onOpened();
75
- }, 240)), o.status === s.Closing && (o?.options?.onClose && o.options.onClose(), setTimeout(() => {
76
- r((n) => n.slice(0, -1)), o?.options?.onClosed && o.options.onClosed();
77
- }, 240));
78
- }
79
- }, [i]), _(() => {
80
- document.body.style.overflowY = i.length ? "hidden" : "";
81
- }, [i]), _(() => {
82
- const o = (a) => {
83
- a.key === "Escape" && (a.stopPropagation(), g({ esc: !0 }));
84
- }, n = () => {
85
- document.addEventListener("keydown", o);
86
- }, t = () => {
87
- document.removeEventListener("keydown", o);
88
- };
89
- return n(), () => {
90
- t();
91
- };
92
- }, []), _(() => {
93
- p(!0);
94
- });
95
- const b = O(
96
- () => ({ openDialog: h, closeDialog: g, queue: i, providerProps: c }),
97
- [h, g, i, c]
98
- );
99
- return /* @__PURE__ */ m(C.Provider, { value: b, children: [
100
- d,
101
- u && k(
102
- /* @__PURE__ */ l("div", { id: "paciu-ui-dialogs", children: i.map((o, n) => /* @__PURE__ */ l(
103
- "div",
104
- {
105
- className: P(e["dialog-overlay"], {
106
- [e["animated-opening"]]: [s.Opening, s.Opened].includes(
107
- o.status
108
- ),
109
- [e["animated-closing"]]: [s.Closing, s.Closed].includes(
110
- o.status
111
- ),
112
- [e.active]: n === i.length - 1,
113
- [e["full-height"]]: o?.options?.fullHeight,
114
- [e["full-width"]]: o?.options?.fullWidth,
115
- [e["un-closable"]]: o?.options?.unClosable,
116
- [e[`position-${o?.options?.position || c?.defaultPosition || E.Center}`]]: !0
117
- }),
118
- onClick: () => g({ outside: !0 }),
119
- style: {
120
- zIndex: n + 1e3,
121
- transform: `scale(calc(1 - ${(i.length - n - 1) * 0.02}))`
122
- },
123
- children: o.node()
124
- },
125
- o.id
126
- )) }),
127
- document.body
128
- )
129
- ] });
130
- };
131
- export {
132
- q as Dialog,
133
- C as DialogContext,
134
- z as DialogProvider,
135
- $ as useDialog,
136
- L as useDialogContext
137
- };
@@ -1,19 +0,0 @@
1
- function p(r) {
2
- var n, e, t = "";
3
- if (typeof r == "string" || typeof r == "number") t += r;
4
- else if (typeof r == "object") if (Array.isArray(r)) {
5
- var f = r.length;
6
- for (n = 0; n < f; n++) r[n] && (e = p(r[n])) && (t && (t += " "), t += e);
7
- } else for (e in r) r[e] && (t && (t += " "), t += e);
8
- return t;
9
- }
10
- function o() {
11
- for (var r, n, e = 0, t = "", f = arguments.length; e < f; e++) (r = arguments[e]) && (n = p(r)) && (t && (t += " "), t += n);
12
- return t;
13
- }
14
- 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 || {});
15
- export {
16
- h as D,
17
- c as a,
18
- o as c
19
- };
package/dist/theme.d.ts DELETED
@@ -1,29 +0,0 @@
1
- import { Context } from 'react';
2
- import { JSX } from 'react/jsx-runtime';
3
-
4
- export declare enum Theme {
5
- Light = "light",
6
- Dark = "dark",
7
- System = "system"
8
- }
9
-
10
- export declare const ThemeContext: Context<ThemeContextType | undefined>;
11
-
12
- export declare interface ThemeContextType {
13
- theme: Theme | null;
14
- nextTheme: Theme | null;
15
- systemTheme: Theme | null;
16
- toggleTheme: (theme: Theme) => void;
17
- }
18
-
19
- export declare const ThemeProvider: ({ children, initialTheme }: ThemeProviderProps) => JSX.Element;
20
-
21
- export declare interface ThemeProviderProps extends React.PropsWithChildren {
22
- initialTheme?: Theme;
23
- }
24
-
25
- export declare type ThemeType = 'light' | 'dark' | 'system';
26
-
27
- export declare const useTheme: () => ThemeContextType;
28
-
29
- export { }
package/dist/theme.es.js DELETED
@@ -1,33 +0,0 @@
1
- "use client";
2
- import { jsx as l } from "react/jsx-runtime";
3
- import { createContext as v, useState as m, useEffect as g, useMemo as T, useCallback as f, useContext as x } from "react";
4
- var y = /* @__PURE__ */ ((e) => (e.Light = "light", e.Dark = "dark", e.System = "system", e))(y || {});
5
- const c = v(void 0), w = ({ children: e, initialTheme: o }) => {
6
- const [r, u] = m(o || null), [n, h] = m(o || null);
7
- g(() => {
8
- const t = window.matchMedia("(prefers-color-scheme: dark)"), s = (d) => {
9
- h(
10
- d.matches ? "dark" : "light"
11
- /* Light */
12
- );
13
- };
14
- return s(t), t.addEventListener("change", s), () => t.removeEventListener("change", s);
15
- }, []);
16
- const a = T(() => {
17
- const t = r || n;
18
- return t ? t === "light" ? "dark" : "light" : null;
19
- }, [r, n]), i = f((t) => {
20
- document.documentElement.dataset.theme = t || void 0, u(t);
21
- }, []);
22
- return /* @__PURE__ */ l(c.Provider, { value: { theme: r, nextTheme: a, systemTheme: n, toggleTheme: i }, children: e });
23
- }, E = () => {
24
- const e = x(c);
25
- if (!e) throw new Error("useTheme must be used within ThemeProvider");
26
- return e;
27
- };
28
- export {
29
- y as Theme,
30
- c as ThemeContext,
31
- w as ThemeProvider,
32
- E as useTheme
33
- };
File without changes