@paciu/ui 0.0.51 → 0.0.52
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/components/button/button.d.ts +9 -0
- package/dist/components/card/card.d.ts +6 -0
- package/dist/components/dialog/dialog.d.ts +5 -0
- package/dist/components/flex/flex.d.ts +13 -0
- package/dist/components/index.d.ts +5 -0
- package/dist/components/row/row.d.ts +7 -0
- package/dist/components.es.js +174 -0
- package/dist/dialog.module-1l9Pt9kh.js +47 -0
- package/dist/enums/index.d.ts +22 -0
- package/dist/enums.es.js +6 -0
- package/dist/hooks/index.d.ts +6 -0
- package/dist/hooks/use-escape.d.ts +1 -0
- package/dist/hooks/use-skip-effect.d.ts +5 -0
- package/dist/hooks.es.js +37 -0
- package/dist/index.d.ts +1 -131
- package/dist/index.es.js +1 -210
- package/dist/provider.d.ts +37 -73
- package/dist/provider.es.js +104 -7
- package/dist/types/index.d.ts +14 -0
- package/dist/types.es.js +1 -0
- package/package.json +17 -1
- package/dist/provider-Kkk4KMCp.js +0 -153
- /package/dist/{index.css → components.css} +0 -0
- /package/dist/{provider.css → dialog.css} +0 -0
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { Modifiers } from '../../types';
|
|
3
|
+
interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, Modifiers {
|
|
4
|
+
stopPropagation?: boolean;
|
|
5
|
+
stopImmediatePropagation?: boolean;
|
|
6
|
+
}
|
|
7
|
+
/** button */
|
|
8
|
+
export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { Modifiers } from '../../types';
|
|
3
|
+
interface CardProps extends React.HTMLAttributes<HTMLDivElement>, Pick<Modifiers, 'size'> {
|
|
4
|
+
}
|
|
5
|
+
export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
|
|
6
|
+
export {};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { SizeType } from '../../types';
|
|
3
|
+
interface FlexProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
size?: SizeType;
|
|
5
|
+
direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
|
|
6
|
+
align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
|
|
7
|
+
justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
|
|
8
|
+
wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
|
|
9
|
+
grow?: boolean;
|
|
10
|
+
inline?: boolean;
|
|
11
|
+
}
|
|
12
|
+
export declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { Modifiers } from '../../types';
|
|
3
|
+
interface RowProps extends Omit<React.ButtonHTMLAttributes<HTMLDivElement>, 'color'>, Pick<Modifiers, 'size'> {
|
|
4
|
+
}
|
|
5
|
+
/** row */
|
|
6
|
+
export declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLDivElement>>;
|
|
7
|
+
export {};
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
import { jsx as a, jsxs as v } from "react/jsx-runtime";
|
|
2
|
+
import m, { useState as q } from "react";
|
|
3
|
+
import { c as f, s as l } from "./dialog.module-1l9Pt9kh.js";
|
|
4
|
+
import './components.css';const _ = {
|
|
5
|
+
"paciu-ui-button": "_paciu-ui-button_y249s_14",
|
|
6
|
+
"size-micro": "_size-micro_y249s_23",
|
|
7
|
+
"size-mini": "_size-mini_y249s_31",
|
|
8
|
+
"size-small": "_size-small_y249s_39",
|
|
9
|
+
"size-large": "_size-large_y249s_47",
|
|
10
|
+
"size-huge": "_size-huge_y249s_55",
|
|
11
|
+
"size-enormous": "_size-enormous_y249s_63",
|
|
12
|
+
"modifier-soft": "_modifier-soft_y249s_98",
|
|
13
|
+
"modifier-solid": "_modifier-solid_y249s_101",
|
|
14
|
+
"modifier-outline": "_modifier-outline_y249s_106",
|
|
15
|
+
"modifier-rounded": "_modifier-rounded_y249s_109",
|
|
16
|
+
"modifier-loading": "_modifier-loading_y249s_112",
|
|
17
|
+
"paciu-ui-blink-animation": "_paciu-ui-blink-animation_y249s_1",
|
|
18
|
+
"modifier-square": "_modifier-square_y249s_116",
|
|
19
|
+
"modifier-link": "_modifier-link_y249s_125",
|
|
20
|
+
"color-opposite": "_color-opposite_y249s_139",
|
|
21
|
+
"color-accent": "_color-accent_y249s_207",
|
|
22
|
+
"color-error": "_color-error_y249s_275"
|
|
23
|
+
}, I = m.forwardRef((s, e) => {
|
|
24
|
+
const {
|
|
25
|
+
children: o,
|
|
26
|
+
className: r,
|
|
27
|
+
color: i,
|
|
28
|
+
square: n,
|
|
29
|
+
loading: t,
|
|
30
|
+
link: c,
|
|
31
|
+
soft: u,
|
|
32
|
+
solid: z,
|
|
33
|
+
outline: p,
|
|
34
|
+
// opaque,
|
|
35
|
+
rounded: g,
|
|
36
|
+
size: w,
|
|
37
|
+
onClick: h,
|
|
38
|
+
stopPropagation: $,
|
|
39
|
+
stopImmediatePropagation: x,
|
|
40
|
+
...P
|
|
41
|
+
} = s, [R, k] = q(!1), C = async (y) => {
|
|
42
|
+
if ($ && y?.stopPropagation(), x && y?.nativeEvent?.stopImmediatePropagation(), h) {
|
|
43
|
+
const N = h(y);
|
|
44
|
+
if (N instanceof Promise) {
|
|
45
|
+
k(!0);
|
|
46
|
+
try {
|
|
47
|
+
await N;
|
|
48
|
+
} finally {
|
|
49
|
+
k(!1);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
return /* @__PURE__ */ a(
|
|
55
|
+
"button",
|
|
56
|
+
{
|
|
57
|
+
ref: e,
|
|
58
|
+
className: f(
|
|
59
|
+
_["paciu-ui-button"],
|
|
60
|
+
{
|
|
61
|
+
// [ styles.opaque ]: opaque,
|
|
62
|
+
[_["modifier-loading"]]: R || t,
|
|
63
|
+
[_["modifier-rounded"]]: g,
|
|
64
|
+
[_["modifier-square"]]: n,
|
|
65
|
+
[_["modifier-link"]]: c,
|
|
66
|
+
[_["modifier-soft"]]: u,
|
|
67
|
+
[_["modifier-outline"]]: p,
|
|
68
|
+
[_["modifier-solid"]]: z,
|
|
69
|
+
...i && { [_[`color-${i}`]]: i }
|
|
70
|
+
},
|
|
71
|
+
w && _[`size-${w}`],
|
|
72
|
+
r
|
|
73
|
+
),
|
|
74
|
+
onClick: C,
|
|
75
|
+
...P,
|
|
76
|
+
children: o
|
|
77
|
+
}
|
|
78
|
+
);
|
|
79
|
+
});
|
|
80
|
+
I.displayName = "Button";
|
|
81
|
+
const b = {
|
|
82
|
+
"paciu-ui-row": "_paciu-ui-row_kd3dr_14",
|
|
83
|
+
"size-micro": "_size-micro_kd3dr_23",
|
|
84
|
+
"size-mini": "_size-mini_kd3dr_27",
|
|
85
|
+
"size-small": "_size-small_kd3dr_31",
|
|
86
|
+
"size-large": "_size-large_kd3dr_35",
|
|
87
|
+
"size-huge": "_size-huge_kd3dr_39",
|
|
88
|
+
"size-enormous": "_size-enormous_kd3dr_43",
|
|
89
|
+
"paciu-ui-blink-animation": "_paciu-ui-blink-animation_kd3dr_1"
|
|
90
|
+
}, B = m.forwardRef((s, e) => {
|
|
91
|
+
const { className: o, size: r, children: i, ...n } = s;
|
|
92
|
+
return /* @__PURE__ */ a("div", { ref: e, className: f(b["paciu-ui-row"], r && b[`size-${r}`], o), ...n, children: i });
|
|
93
|
+
});
|
|
94
|
+
B.displayName = "Row";
|
|
95
|
+
const F = "_flex_ssd0s_14", L = "_inline_ssd0s_22", D = "_grow_ssd0s_25", d = {
|
|
96
|
+
flex: F,
|
|
97
|
+
inline: L,
|
|
98
|
+
grow: D,
|
|
99
|
+
"direction-column": "_direction-column_ssd0s_28",
|
|
100
|
+
"direction-row-reverse": "_direction-row-reverse_ssd0s_31",
|
|
101
|
+
"direction-column-reverse": "_direction-column-reverse_ssd0s_34",
|
|
102
|
+
"align-start": "_align-start_ssd0s_37",
|
|
103
|
+
"align-center": "_align-center_ssd0s_40",
|
|
104
|
+
"align-end": "_align-end_ssd0s_43",
|
|
105
|
+
"align-baseline": "_align-baseline_ssd0s_46",
|
|
106
|
+
"justify-center": "_justify-center_ssd0s_49",
|
|
107
|
+
"justify-end": "_justify-end_ssd0s_52",
|
|
108
|
+
"justify-between": "_justify-between_ssd0s_55",
|
|
109
|
+
"justify-around": "_justify-around_ssd0s_58",
|
|
110
|
+
"justify-evenly": "_justify-evenly_ssd0s_61",
|
|
111
|
+
"wrap-wrap": "_wrap-wrap_ssd0s_64",
|
|
112
|
+
"wrap-wrap-reverse": "_wrap-wrap-reverse_ssd0s_67",
|
|
113
|
+
"size-micro": "_size-micro_ssd0s_75",
|
|
114
|
+
"size-mini": "_size-mini_ssd0s_79",
|
|
115
|
+
"size-small": "_size-small_ssd0s_83",
|
|
116
|
+
"size-medium": "_size-medium_ssd0s_87",
|
|
117
|
+
"size-large": "_size-large_ssd0s_91",
|
|
118
|
+
"size-huge": "_size-huge_ssd0s_95",
|
|
119
|
+
"size-enormous": "_size-enormous_ssd0s_99",
|
|
120
|
+
"paciu-ui-blink-animation": "_paciu-ui-blink-animation_ssd0s_1"
|
|
121
|
+
}, E = m.forwardRef((s, e) => {
|
|
122
|
+
const { children: o, className: r, direction: i, align: n, justify: t, wrap: c, size: u, inline: z, grow: p, ...g } = s;
|
|
123
|
+
return /* @__PURE__ */ a(
|
|
124
|
+
"div",
|
|
125
|
+
{
|
|
126
|
+
ref: e,
|
|
127
|
+
className: f(
|
|
128
|
+
d.flex,
|
|
129
|
+
{
|
|
130
|
+
[d.inline]: z,
|
|
131
|
+
[d.grow]: p,
|
|
132
|
+
[d[`direction-${i}`]]: i,
|
|
133
|
+
[d[`align-${n}`]]: n,
|
|
134
|
+
[d[`justify-${t}`]]: t,
|
|
135
|
+
[d[`wrap-${c}`]]: c
|
|
136
|
+
},
|
|
137
|
+
u && d[`size-${u}`],
|
|
138
|
+
r
|
|
139
|
+
),
|
|
140
|
+
...g,
|
|
141
|
+
children: o
|
|
142
|
+
}
|
|
143
|
+
);
|
|
144
|
+
});
|
|
145
|
+
E.displayName = "Flex";
|
|
146
|
+
const j = {
|
|
147
|
+
"paciu-ui-card": "_paciu-ui-card_a6huo_14",
|
|
148
|
+
"size-micro": "_size-micro_a6huo_28",
|
|
149
|
+
"size-mini": "_size-mini_a6huo_33",
|
|
150
|
+
"size-small": "_size-small_a6huo_38",
|
|
151
|
+
"size-large": "_size-large_a6huo_43",
|
|
152
|
+
"size-huge": "_size-huge_a6huo_48",
|
|
153
|
+
"size-enormous": "_size-enormous_a6huo_53",
|
|
154
|
+
"paciu-ui-blink-animation": "_paciu-ui-blink-animation_a6huo_1"
|
|
155
|
+
}, O = m.forwardRef((s, e) => {
|
|
156
|
+
const { children: o, className: r, size: i, ...n } = s;
|
|
157
|
+
return /* @__PURE__ */ a("div", { ref: e, className: f(j["paciu-ui-card"], i && j[`size-${i}`], r), ...n, children: o });
|
|
158
|
+
});
|
|
159
|
+
O.displayName = "Card";
|
|
160
|
+
const H = ({ header: s, children: e, footer: o }) => /* @__PURE__ */ v("div", { className: l["dialog-compose"], children: [
|
|
161
|
+
/* @__PURE__ */ a("div", { className: l["dialog-close"], children: /* @__PURE__ */ a("div", { className: l["dialog-close-cross"] }) }),
|
|
162
|
+
/* @__PURE__ */ v("div", { className: l["dialog-window"], onClick: (r) => r.stopPropagation(), children: [
|
|
163
|
+
s && /* @__PURE__ */ a("div", { className: l["dialog-window-header"], children: s }),
|
|
164
|
+
e && /* @__PURE__ */ a("div", { className: l["dialog-window-body"], children: e }),
|
|
165
|
+
o && /* @__PURE__ */ a("div", { className: l["dialog-window-footer"], children: o })
|
|
166
|
+
] })
|
|
167
|
+
] });
|
|
168
|
+
export {
|
|
169
|
+
I as Button,
|
|
170
|
+
O as Card,
|
|
171
|
+
H as Dialog,
|
|
172
|
+
E as Flex,
|
|
173
|
+
B as Row
|
|
174
|
+
};
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import './dialog.css';function s(o) {
|
|
2
|
+
var n, t, i = "";
|
|
3
|
+
if (typeof o == "string" || typeof o == "number") i += o;
|
|
4
|
+
else if (typeof o == "object") if (Array.isArray(o)) {
|
|
5
|
+
var _ = o.length;
|
|
6
|
+
for (n = 0; n < _; n++) o[n] && (t = s(o[n])) && (i && (i += " "), i += t);
|
|
7
|
+
} else for (t in o) o[t] && (i && (i += " "), i += t);
|
|
8
|
+
return i;
|
|
9
|
+
}
|
|
10
|
+
function e() {
|
|
11
|
+
for (var o, n, t = 0, i = "", _ = arguments.length; t < _; t++) (o = arguments[t]) && (n = s(o)) && (i && (i += " "), i += n);
|
|
12
|
+
return i;
|
|
13
|
+
}
|
|
14
|
+
const a = "_active_1rsd6_164", r = {
|
|
15
|
+
"dialog-overlay": "_dialog-overlay_1rsd6_45",
|
|
16
|
+
"dialog-compose": "_dialog-compose_1rsd6_62",
|
|
17
|
+
"dialog-close": "_dialog-close_1rsd6_68",
|
|
18
|
+
"dialog-close-cross": "_dialog-close-cross_1rsd6_85",
|
|
19
|
+
"dialog-window": "_dialog-window_1rsd6_109",
|
|
20
|
+
"dialog-window-header": "_dialog-window-header_1rsd6_123",
|
|
21
|
+
"dialog-window-body": "_dialog-window-body_1rsd6_136",
|
|
22
|
+
"dialog-window-footer": "_dialog-window-footer_1rsd6_142",
|
|
23
|
+
"full-height": "_full-height_1rsd6_155",
|
|
24
|
+
"full-width": "_full-width_1rsd6_158",
|
|
25
|
+
"un-closable": "_un-closable_1rsd6_161",
|
|
26
|
+
active: a,
|
|
27
|
+
"position-top-center": "_position-top-center_1rsd6_170",
|
|
28
|
+
"position-center": "_position-center_1rsd6_176",
|
|
29
|
+
"position-bottom-center": "_position-bottom-center_1rsd6_180",
|
|
30
|
+
"position-left-top": "_position-left-top_1rsd6_186",
|
|
31
|
+
"position-left-center": "_position-left-center_1rsd6_192",
|
|
32
|
+
"position-left-bottom": "_position-left-bottom_1rsd6_198",
|
|
33
|
+
"position-right-top": "_position-right-top_1rsd6_204",
|
|
34
|
+
"position-right-center": "_position-right-center_1rsd6_210",
|
|
35
|
+
"position-right-bottom": "_position-right-bottom_1rsd6_216",
|
|
36
|
+
"animated-opening": "_animated-opening_1rsd6_222",
|
|
37
|
+
"animated-opening-opacity": "_animated-opening-opacity_1rsd6_1",
|
|
38
|
+
"animated-opening-translate": "_animated-opening-translate_1rsd6_1",
|
|
39
|
+
"animated-closing": "_animated-closing_1rsd6_228",
|
|
40
|
+
"animated-closing-opacity": "_animated-closing-opacity_1rsd6_1",
|
|
41
|
+
"animated-closing-translate": "_animated-closing-translate_1rsd6_1",
|
|
42
|
+
"paciu-ui-blink-animation": "_paciu-ui-blink-animation_1rsd6_1"
|
|
43
|
+
};
|
|
44
|
+
export {
|
|
45
|
+
e as c,
|
|
46
|
+
r as s
|
|
47
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export declare enum Theme {
|
|
2
|
+
Light = "light",
|
|
3
|
+
Dark = "dark",
|
|
4
|
+
System = "system"
|
|
5
|
+
}
|
|
6
|
+
export declare enum DialogQueueItemStatus {
|
|
7
|
+
Opening = "opening",
|
|
8
|
+
Opened = "opened",
|
|
9
|
+
Closing = "closing",
|
|
10
|
+
Closed = "closed"
|
|
11
|
+
}
|
|
12
|
+
export declare enum DialogPosition {
|
|
13
|
+
TopCenter = "top-center",
|
|
14
|
+
Center = "center",
|
|
15
|
+
BottomCenter = "bottom-center",
|
|
16
|
+
LeftTop = "left-top",
|
|
17
|
+
LeftCenter = "left-center",
|
|
18
|
+
LeftBottom = "left-bottom",
|
|
19
|
+
RightTop = "right-top",
|
|
20
|
+
RightCenter = "right-center",
|
|
21
|
+
RightBottom = "right-bottom"
|
|
22
|
+
}
|
package/dist/enums.es.js
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
var e = /* @__PURE__ */ ((t) => (t.Light = "light", t.Dark = "dark", t.System = "system", t))(e || {}), r = /* @__PURE__ */ ((t) => (t.Opening = "opening", t.Opened = "opened", t.Closing = "closing", t.Closed = "closed", t))(r || {}), n = /* @__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))(n || {});
|
|
2
|
+
export {
|
|
3
|
+
n as DialogPosition,
|
|
4
|
+
r as DialogQueueItemStatus,
|
|
5
|
+
e as Theme
|
|
6
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const useEscape: (callback: () => void) => void;
|
package/dist/hooks.es.js
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { usePaciuContext as s } from "./provider.es.js";
|
|
2
|
+
import { useEffect as o, useRef as u, useState as c } from "react";
|
|
3
|
+
const l = (t) => {
|
|
4
|
+
o(() => {
|
|
5
|
+
const r = (e) => {
|
|
6
|
+
e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation(), t());
|
|
7
|
+
};
|
|
8
|
+
return document.addEventListener("keydown", r, !0), () => document.removeEventListener("keydown", r, !0);
|
|
9
|
+
}, [t]);
|
|
10
|
+
}, a = (t, r = [], e) => {
|
|
11
|
+
const n = u(e?.count || 1);
|
|
12
|
+
o(() => {
|
|
13
|
+
if (n.current > 0) {
|
|
14
|
+
n.current--;
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
return t();
|
|
18
|
+
}, r);
|
|
19
|
+
}, m = () => {
|
|
20
|
+
const [t, r] = c(!1);
|
|
21
|
+
return o(() => {
|
|
22
|
+
const e = () => r(window.scrollY > 0);
|
|
23
|
+
return e(), document.addEventListener("scroll", e), () => {
|
|
24
|
+
document.removeEventListener("scroll", e);
|
|
25
|
+
};
|
|
26
|
+
}, []), { isScrolled: t };
|
|
27
|
+
}, f = () => {
|
|
28
|
+
const t = s();
|
|
29
|
+
if (!t) throw new Error("usePaciu must be used within PaciuProvider");
|
|
30
|
+
return t;
|
|
31
|
+
};
|
|
32
|
+
export {
|
|
33
|
+
l as useEscape,
|
|
34
|
+
f as usePaciu,
|
|
35
|
+
m as useScroll,
|
|
36
|
+
a as useSkipEffect
|
|
37
|
+
};
|
package/dist/index.d.ts
CHANGED
|
@@ -1,131 +1 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
/** button */
|
|
4
|
-
export declare const Button: default_2.ForwardRefExoticComponent<ButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
|
|
5
|
-
|
|
6
|
-
declare interface ButtonProps extends Omit<default_2.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, Modifiers {
|
|
7
|
-
stopPropagation?: boolean;
|
|
8
|
-
stopImmediatePropagation?: boolean;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export declare const Card: default_2.ForwardRefExoticComponent<CardProps & default_2.RefAttributes<HTMLDivElement>>;
|
|
12
|
-
|
|
13
|
-
declare interface CardProps extends default_2.HTMLAttributes<HTMLDivElement>, Pick<Modifiers, 'size'> {
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
declare interface CloseDialogOptions {
|
|
17
|
-
esc?: boolean;
|
|
18
|
-
outside?: boolean;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
export declare type ColorType = 'opposite' | 'accent' | 'error';
|
|
22
|
-
|
|
23
|
-
export declare const Dialog: React.FC<DialogProps>;
|
|
24
|
-
|
|
25
|
-
export declare enum DialogPosition {
|
|
26
|
-
TopCenter = "top-center",
|
|
27
|
-
Center = "center",
|
|
28
|
-
BottomCenter = "bottom-center",
|
|
29
|
-
LeftTop = "left-top",
|
|
30
|
-
LeftCenter = "left-center",
|
|
31
|
-
LeftBottom = "left-bottom",
|
|
32
|
-
RightTop = "right-top",
|
|
33
|
-
RightCenter = "right-center",
|
|
34
|
-
RightBottom = "right-bottom"
|
|
35
|
-
}
|
|
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
|
-
|
|
49
|
-
export declare enum DialogQueueItemStatus {
|
|
50
|
-
Opening = "opening",
|
|
51
|
-
Opened = "opened",
|
|
52
|
-
Closing = "closing",
|
|
53
|
-
Closed = "closed"
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
export declare const Flex: default_2.ForwardRefExoticComponent<FlexProps & default_2.RefAttributes<HTMLDivElement>>;
|
|
57
|
-
|
|
58
|
-
declare interface FlexProps extends default_2.HTMLAttributes<HTMLDivElement> {
|
|
59
|
-
size?: SizeType;
|
|
60
|
-
direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
|
|
61
|
-
align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
|
|
62
|
-
justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
|
|
63
|
-
wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
|
|
64
|
-
grow?: boolean;
|
|
65
|
-
inline?: boolean;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
export declare interface Modifiers {
|
|
69
|
-
link?: boolean;
|
|
70
|
-
soft?: boolean;
|
|
71
|
-
outline?: boolean;
|
|
72
|
-
solid?: boolean;
|
|
73
|
-
square?: boolean;
|
|
74
|
-
rounded?: boolean;
|
|
75
|
-
loading?: boolean;
|
|
76
|
-
size?: SizeType;
|
|
77
|
-
color?: ColorType;
|
|
78
|
-
}
|
|
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
|
-
|
|
101
|
-
/** row */
|
|
102
|
-
export declare const Row: default_2.ForwardRefExoticComponent<RowProps & default_2.RefAttributes<HTMLDivElement>>;
|
|
103
|
-
|
|
104
|
-
declare interface RowProps extends Omit<default_2.ButtonHTMLAttributes<HTMLDivElement>, 'color'>, Pick<Modifiers, 'size'> {
|
|
105
|
-
}
|
|
106
|
-
|
|
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';
|
|
116
|
-
|
|
117
|
-
export declare const useEscape: (callback: () => void) => void;
|
|
118
|
-
|
|
119
|
-
export declare const usePaciu: () => PaciuContextType;
|
|
120
|
-
|
|
121
|
-
export declare const useScroll: () => {
|
|
122
|
-
isScrolled: boolean;
|
|
123
|
-
};
|
|
124
|
-
|
|
125
|
-
export declare const useSkipEffect: (cb: default_2.EffectCallback, deps?: default_2.DependencyList, options?: UseSkipEffectOptions) => void;
|
|
126
|
-
|
|
127
|
-
declare interface UseSkipEffectOptions {
|
|
128
|
-
count?: number;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
export { }
|
|
1
|
+
export {};
|
package/dist/index.es.js
CHANGED
|
@@ -1,210 +1 @@
|
|
|
1
|
-
|
|
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-Kkk4KMCp.js";
|
|
4
|
-
import { D as X, a as Z, T as ss } from "./provider-Kkk4KMCp.js";
|
|
5
|
-
import './index.css';const n = {
|
|
6
|
-
"paciu-ui-button": "_paciu-ui-button_y249s_14",
|
|
7
|
-
"size-micro": "_size-micro_y249s_23",
|
|
8
|
-
"size-mini": "_size-mini_y249s_31",
|
|
9
|
-
"size-small": "_size-small_y249s_39",
|
|
10
|
-
"size-large": "_size-large_y249s_47",
|
|
11
|
-
"size-huge": "_size-huge_y249s_55",
|
|
12
|
-
"size-enormous": "_size-enormous_y249s_63",
|
|
13
|
-
"modifier-soft": "_modifier-soft_y249s_98",
|
|
14
|
-
"modifier-solid": "_modifier-solid_y249s_101",
|
|
15
|
-
"modifier-outline": "_modifier-outline_y249s_106",
|
|
16
|
-
"modifier-rounded": "_modifier-rounded_y249s_109",
|
|
17
|
-
"modifier-loading": "_modifier-loading_y249s_112",
|
|
18
|
-
"paciu-ui-blink-animation": "_paciu-ui-blink-animation_y249s_1",
|
|
19
|
-
"modifier-square": "_modifier-square_y249s_116",
|
|
20
|
-
"modifier-link": "_modifier-link_y249s_125",
|
|
21
|
-
"color-opposite": "_color-opposite_y249s_139",
|
|
22
|
-
"color-accent": "_color-accent_y249s_207",
|
|
23
|
-
"color-error": "_color-error_y249s_275"
|
|
24
|
-
}, D = m.forwardRef((i, e) => {
|
|
25
|
-
const {
|
|
26
|
-
children: s,
|
|
27
|
-
className: o,
|
|
28
|
-
color: r,
|
|
29
|
-
square: _,
|
|
30
|
-
loading: l,
|
|
31
|
-
link: c,
|
|
32
|
-
soft: u,
|
|
33
|
-
solid: p,
|
|
34
|
-
outline: z,
|
|
35
|
-
// opaque,
|
|
36
|
-
rounded: g,
|
|
37
|
-
size: h,
|
|
38
|
-
onClick: k,
|
|
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
|
-
try {
|
|
48
|
-
await N;
|
|
49
|
-
} finally {
|
|
50
|
-
v(!1);
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
};
|
|
55
|
-
return /* @__PURE__ */ a(
|
|
56
|
-
"button",
|
|
57
|
-
{
|
|
58
|
-
ref: e,
|
|
59
|
-
className: f(
|
|
60
|
-
n["paciu-ui-button"],
|
|
61
|
-
{
|
|
62
|
-
// [ styles.opaque ]: opaque,
|
|
63
|
-
[n["modifier-loading"]]: C || l,
|
|
64
|
-
[n["modifier-rounded"]]: g,
|
|
65
|
-
[n["modifier-square"]]: _,
|
|
66
|
-
[n["modifier-link"]]: c,
|
|
67
|
-
[n["modifier-soft"]]: u,
|
|
68
|
-
[n["modifier-outline"]]: z,
|
|
69
|
-
[n["modifier-solid"]]: p,
|
|
70
|
-
...r && { [n[`color-${r}`]]: r }
|
|
71
|
-
},
|
|
72
|
-
h && n[`size-${h}`],
|
|
73
|
-
o
|
|
74
|
-
),
|
|
75
|
-
onClick: I,
|
|
76
|
-
...R,
|
|
77
|
-
children: s
|
|
78
|
-
}
|
|
79
|
-
);
|
|
80
|
-
});
|
|
81
|
-
D.displayName = "Button";
|
|
82
|
-
const b = {
|
|
83
|
-
"paciu-ui-row": "_paciu-ui-row_kd3dr_14",
|
|
84
|
-
"size-micro": "_size-micro_kd3dr_23",
|
|
85
|
-
"size-mini": "_size-mini_kd3dr_27",
|
|
86
|
-
"size-small": "_size-small_kd3dr_31",
|
|
87
|
-
"size-large": "_size-large_kd3dr_35",
|
|
88
|
-
"size-huge": "_size-huge_kd3dr_39",
|
|
89
|
-
"size-enormous": "_size-enormous_kd3dr_43",
|
|
90
|
-
"paciu-ui-blink-animation": "_paciu-ui-blink-animation_kd3dr_1"
|
|
91
|
-
}, q = m.forwardRef((i, e) => {
|
|
92
|
-
const { className: s, size: o, children: r, ..._ } = i;
|
|
93
|
-
return /* @__PURE__ */ a("div", { ref: e, className: f(b["paciu-ui-row"], o && b[`size-${o}`], s), ..._, children: r });
|
|
94
|
-
});
|
|
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
|
-
"direction-column": "_direction-column_ssd0s_28",
|
|
101
|
-
"direction-row-reverse": "_direction-row-reverse_ssd0s_31",
|
|
102
|
-
"direction-column-reverse": "_direction-column-reverse_ssd0s_34",
|
|
103
|
-
"align-start": "_align-start_ssd0s_37",
|
|
104
|
-
"align-center": "_align-center_ssd0s_40",
|
|
105
|
-
"align-end": "_align-end_ssd0s_43",
|
|
106
|
-
"align-baseline": "_align-baseline_ssd0s_46",
|
|
107
|
-
"justify-center": "_justify-center_ssd0s_49",
|
|
108
|
-
"justify-end": "_justify-end_ssd0s_52",
|
|
109
|
-
"justify-between": "_justify-between_ssd0s_55",
|
|
110
|
-
"justify-around": "_justify-around_ssd0s_58",
|
|
111
|
-
"justify-evenly": "_justify-evenly_ssd0s_61",
|
|
112
|
-
"wrap-wrap": "_wrap-wrap_ssd0s_64",
|
|
113
|
-
"wrap-wrap-reverse": "_wrap-wrap-reverse_ssd0s_67",
|
|
114
|
-
"size-micro": "_size-micro_ssd0s_75",
|
|
115
|
-
"size-mini": "_size-mini_ssd0s_79",
|
|
116
|
-
"size-small": "_size-small_ssd0s_83",
|
|
117
|
-
"size-medium": "_size-medium_ssd0s_87",
|
|
118
|
-
"size-large": "_size-large_ssd0s_91",
|
|
119
|
-
"size-huge": "_size-huge_ssd0s_95",
|
|
120
|
-
"size-enormous": "_size-enormous_ssd0s_99",
|
|
121
|
-
"paciu-ui-blink-animation": "_paciu-ui-blink-animation_ssd0s_1"
|
|
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
|
-
"div",
|
|
126
|
-
{
|
|
127
|
-
ref: e,
|
|
128
|
-
className: f(
|
|
129
|
-
t.flex,
|
|
130
|
-
{
|
|
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
|
-
},
|
|
138
|
-
u && t[`size-${u}`],
|
|
139
|
-
o
|
|
140
|
-
),
|
|
141
|
-
...g,
|
|
142
|
-
children: s
|
|
143
|
-
}
|
|
144
|
-
);
|
|
145
|
-
});
|
|
146
|
-
O.displayName = "Flex";
|
|
147
|
-
const j = {
|
|
148
|
-
"paciu-ui-card": "_paciu-ui-card_a6huo_14",
|
|
149
|
-
"size-micro": "_size-micro_a6huo_28",
|
|
150
|
-
"size-mini": "_size-mini_a6huo_33",
|
|
151
|
-
"size-small": "_size-small_a6huo_38",
|
|
152
|
-
"size-large": "_size-large_a6huo_43",
|
|
153
|
-
"size-huge": "_size-huge_a6huo_48",
|
|
154
|
-
"size-enormous": "_size-enormous_a6huo_53",
|
|
155
|
-
"paciu-ui-blink-animation": "_paciu-ui-blink-animation_a6huo_1"
|
|
156
|
-
}, Q = m.forwardRef((i, e) => {
|
|
157
|
-
const { children: s, className: o, size: r, ..._ } = i;
|
|
158
|
-
return /* @__PURE__ */ a("div", { ref: e, className: f(j["paciu-ui-card"], r && j[`size-${r}`], o), ..._, children: s });
|
|
159
|
-
});
|
|
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(() => {
|
|
170
|
-
const e = (s) => {
|
|
171
|
-
s.key === "Escape" && (s.preventDefault(), s.stopPropagation(), s.stopImmediatePropagation(), i());
|
|
172
|
-
};
|
|
173
|
-
return document.addEventListener("keydown", e, !0), () => document.removeEventListener("keydown", e, !0);
|
|
174
|
-
}, [i]);
|
|
175
|
-
}, K = (i, e = [], s) => {
|
|
176
|
-
const o = L(s?.count || 1);
|
|
177
|
-
w(() => {
|
|
178
|
-
if (o.current > 0) {
|
|
179
|
-
o.current--;
|
|
180
|
-
return;
|
|
181
|
-
}
|
|
182
|
-
return i();
|
|
183
|
-
}, e);
|
|
184
|
-
}, M = () => {
|
|
185
|
-
const [i, e] = x(!1);
|
|
186
|
-
return w(() => {
|
|
187
|
-
const s = () => e(window.scrollY > 0);
|
|
188
|
-
return s(), document.addEventListener("scroll", s), () => {
|
|
189
|
-
document.removeEventListener("scroll", s);
|
|
190
|
-
};
|
|
191
|
-
}, []), { isScrolled: i };
|
|
192
|
-
}, U = () => {
|
|
193
|
-
const i = S();
|
|
194
|
-
if (!i) throw new Error("usePaciu must be used within PaciuProvider");
|
|
195
|
-
return i;
|
|
196
|
-
};
|
|
197
|
-
export {
|
|
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
|
|
210
|
-
};
|
|
1
|
+
|
package/dist/provider.d.ts
CHANGED
|
@@ -1,73 +1,37 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
fullHeight?: boolean;
|
|
39
|
-
fullWidth?: boolean;
|
|
40
|
-
onClose?: () => boolean | void;
|
|
41
|
-
onClosed?: () => boolean | void;
|
|
42
|
-
onOpen?: () => boolean | void;
|
|
43
|
-
onOpened?: () => boolean | void;
|
|
44
|
-
}
|
|
45
|
-
|
|
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
|
-
}
|
|
70
|
-
|
|
71
|
-
export declare const usePaciuContext: () => PaciuContextType | undefined;
|
|
72
|
-
|
|
73
|
-
export { }
|
|
1
|
+
import { DialogPosition, DialogQueueItemStatus, Theme } from './enums';
|
|
2
|
+
export interface DialogQueueItem {
|
|
3
|
+
id: number;
|
|
4
|
+
status: DialogQueueItemStatus;
|
|
5
|
+
node: () => React.ReactNode;
|
|
6
|
+
options?: OpenDialogOptions;
|
|
7
|
+
}
|
|
8
|
+
export interface PaciuContextType {
|
|
9
|
+
theme: Theme | null;
|
|
10
|
+
nextTheme: Theme | null;
|
|
11
|
+
systemTheme: Theme | null;
|
|
12
|
+
toggleTheme: (theme: Theme) => void;
|
|
13
|
+
dialogsQueue: DialogQueueItem[];
|
|
14
|
+
openDialog: (node: () => React.ReactNode, options?: OpenDialogOptions) => void;
|
|
15
|
+
closeDialog: (options?: CloseDialogOptions) => void;
|
|
16
|
+
}
|
|
17
|
+
export interface OpenDialogOptions {
|
|
18
|
+
position?: DialogPosition;
|
|
19
|
+
unClosable?: boolean;
|
|
20
|
+
fullHeight?: boolean;
|
|
21
|
+
fullWidth?: boolean;
|
|
22
|
+
onClose?: () => boolean | void;
|
|
23
|
+
onClosed?: () => boolean | void;
|
|
24
|
+
onOpen?: () => boolean | void;
|
|
25
|
+
onOpened?: () => boolean | void;
|
|
26
|
+
}
|
|
27
|
+
export interface CloseDialogOptions {
|
|
28
|
+
esc?: boolean;
|
|
29
|
+
outside?: boolean;
|
|
30
|
+
}
|
|
31
|
+
export declare const PaciuContext: import('react').Context<PaciuContextType | undefined>;
|
|
32
|
+
export declare const usePaciuContext: () => PaciuContextType | undefined;
|
|
33
|
+
export interface PaciuProviderProps extends React.PropsWithChildren {
|
|
34
|
+
initialTheme?: Theme;
|
|
35
|
+
defaultDialogPosition?: DialogPosition;
|
|
36
|
+
}
|
|
37
|
+
export declare const PaciuProvider: ({ children, initialTheme, defaultDialogPosition }: PaciuProviderProps) => import("react/jsx-runtime").JSX.Element;
|
package/dist/provider.es.js
CHANGED
|
@@ -1,9 +1,106 @@
|
|
|
1
|
-
|
|
2
|
-
import "react";
|
|
3
|
-
import "react
|
|
4
|
-
import {
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsxs as S, jsx as x } from "react/jsx-runtime";
|
|
3
|
+
import { createContext as M, useState as m, useRef as j, useCallback as p, useMemo as O, useEffect as a, useContext as Q } from "react";
|
|
4
|
+
import { createPortal as $ } from "react-dom";
|
|
5
|
+
import { DialogQueueItemStatus as s, Theme as u, DialogPosition as z } from "./enums.es.js";
|
|
6
|
+
import { c as B, s as l } from "./dialog.module-1l9Pt9kh.js";
|
|
7
|
+
const v = M(void 0), Y = () => Q(v), q = ({ children: L, initialTheme: h, defaultDialogPosition: T }) => {
|
|
8
|
+
const [k, D] = m(!1), [c, P] = m(h || null), [r, w] = m(h || null), [o, d] = m([]), E = j(0), f = p((e) => {
|
|
9
|
+
document.documentElement.dataset.theme = e || void 0, P(e);
|
|
10
|
+
}, []), C = p((e, n) => {
|
|
11
|
+
d((t) => {
|
|
12
|
+
if (t.length > 0) {
|
|
13
|
+
const i = [...t], I = i.length - 1;
|
|
14
|
+
if (i[I].status === s.Opening)
|
|
15
|
+
return t;
|
|
16
|
+
}
|
|
17
|
+
return [...t, { id: ++E.current, status: s.Opening, node: e, options: n }];
|
|
18
|
+
});
|
|
19
|
+
}, []), g = p((e) => {
|
|
20
|
+
d((n) => {
|
|
21
|
+
if (n.length === 0)
|
|
22
|
+
return n;
|
|
23
|
+
const t = [...n], i = t.length - 1;
|
|
24
|
+
return t[i].status === s.Closing || (e?.esc || e?.outside) && t[i]?.options?.unClosable ? n : (t[i] = { ...t[i], status: s.Closing }, t);
|
|
25
|
+
});
|
|
26
|
+
}, []), y = O(() => {
|
|
27
|
+
const e = c || r;
|
|
28
|
+
return e ? e === u.Light ? u.Dark : u.Light : null;
|
|
29
|
+
}, [c, r]), b = O(
|
|
30
|
+
() => ({ theme: c, nextTheme: y, systemTheme: r, toggleTheme: f, openDialog: C, closeDialog: g, dialogsQueue: o }),
|
|
31
|
+
[c, y, r, f, C, g, o]
|
|
32
|
+
);
|
|
33
|
+
return a(() => {
|
|
34
|
+
if (o.length) {
|
|
35
|
+
const e = o[o.length - 1];
|
|
36
|
+
e.status === s.Opening && (e?.options?.onOpen && e.options.onOpen(), setTimeout(() => {
|
|
37
|
+
d((n) => {
|
|
38
|
+
const t = [...n];
|
|
39
|
+
return t[t.length - 1].status = s.Opened, t;
|
|
40
|
+
}), e?.options?.onOpened && e.options.onOpened();
|
|
41
|
+
}, 240)), e.status === s.Closing && (e?.options?.onClose && e.options.onClose(), setTimeout(() => {
|
|
42
|
+
d((n) => n.slice(0, -1)), e?.options?.onClosed && e.options.onClosed();
|
|
43
|
+
}, 240));
|
|
44
|
+
}
|
|
45
|
+
}, [o]), a(() => {
|
|
46
|
+
const e = window.matchMedia("(prefers-color-scheme: dark)"), n = (t) => {
|
|
47
|
+
w(t.matches ? u.Dark : u.Light);
|
|
48
|
+
};
|
|
49
|
+
return n(e), e.addEventListener("change", n), () => e.removeEventListener("change", n);
|
|
50
|
+
}, []), a(() => {
|
|
51
|
+
document.body.style.overflowY = o.length ? "hidden" : "";
|
|
52
|
+
}, [o]), a(() => {
|
|
53
|
+
const e = (i) => {
|
|
54
|
+
i.key === "Escape" && (i.stopPropagation(), g({ esc: !0 }));
|
|
55
|
+
}, n = () => {
|
|
56
|
+
document.addEventListener("keydown", e);
|
|
57
|
+
}, t = () => {
|
|
58
|
+
document.removeEventListener("keydown", e);
|
|
59
|
+
};
|
|
60
|
+
return n(), () => {
|
|
61
|
+
t();
|
|
62
|
+
};
|
|
63
|
+
}, []), a(() => {
|
|
64
|
+
D(!0);
|
|
65
|
+
}), /* @__PURE__ */ S(v.Provider, { value: b, children: [
|
|
66
|
+
L,
|
|
67
|
+
k && $(
|
|
68
|
+
/* @__PURE__ */ x("div", { id: "paciu-ui-dialogs", children: o.map((e, n) => {
|
|
69
|
+
const t = e?.options?.position || T || z.Center;
|
|
70
|
+
return /* @__PURE__ */ x(
|
|
71
|
+
"div",
|
|
72
|
+
{
|
|
73
|
+
className: B(l["dialog-overlay"], {
|
|
74
|
+
[l["animated-opening"]]: [
|
|
75
|
+
s.Opening,
|
|
76
|
+
s.Opened
|
|
77
|
+
].includes(e.status),
|
|
78
|
+
[l["animated-closing"]]: [
|
|
79
|
+
s.Closing,
|
|
80
|
+
s.Closed
|
|
81
|
+
].includes(e.status),
|
|
82
|
+
[l.active]: n === o.length - 1,
|
|
83
|
+
[l["full-height"]]: e?.options?.fullHeight,
|
|
84
|
+
[l["full-width"]]: e?.options?.fullWidth,
|
|
85
|
+
[l["un-closable"]]: e?.options?.unClosable,
|
|
86
|
+
[l[`position-${t}`]]: !!t
|
|
87
|
+
}),
|
|
88
|
+
onClick: () => g({ outside: !0 }),
|
|
89
|
+
style: {
|
|
90
|
+
zIndex: n + 1e3,
|
|
91
|
+
transform: `scale(calc(1 - ${(o.length - n - 1) * 0.02}))`
|
|
92
|
+
},
|
|
93
|
+
children: e.node()
|
|
94
|
+
},
|
|
95
|
+
e.id
|
|
96
|
+
);
|
|
97
|
+
}) }),
|
|
98
|
+
document.body
|
|
99
|
+
)
|
|
100
|
+
] });
|
|
101
|
+
};
|
|
5
102
|
export {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
103
|
+
v as PaciuContext,
|
|
104
|
+
q as PaciuProvider,
|
|
105
|
+
Y as usePaciuContext
|
|
9
106
|
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export type ThemeType = 'light' | 'dark' | 'system';
|
|
2
|
+
export type ColorType = 'opposite' | 'accent' | 'error';
|
|
3
|
+
export type SizeType = 'micro' | 'mini' | 'small' | 'medium' | 'large' | 'huge' | 'enormous';
|
|
4
|
+
export interface Modifiers {
|
|
5
|
+
link?: boolean;
|
|
6
|
+
soft?: boolean;
|
|
7
|
+
outline?: boolean;
|
|
8
|
+
solid?: boolean;
|
|
9
|
+
square?: boolean;
|
|
10
|
+
rounded?: boolean;
|
|
11
|
+
loading?: boolean;
|
|
12
|
+
size?: SizeType;
|
|
13
|
+
color?: ColorType;
|
|
14
|
+
}
|
package/dist/types.es.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@paciu/ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.52",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.umd.js",
|
|
6
6
|
"module": "./dist/index.es.js",
|
|
@@ -13,6 +13,22 @@
|
|
|
13
13
|
"./provider": {
|
|
14
14
|
"types": "./dist/provider.d.ts",
|
|
15
15
|
"import": "./dist/provider.es.js"
|
|
16
|
+
},
|
|
17
|
+
"./enums": {
|
|
18
|
+
"types": "./dist/enums.d.ts",
|
|
19
|
+
"import": "./dist/enums.es.js"
|
|
20
|
+
},
|
|
21
|
+
"./types": {
|
|
22
|
+
"types": "./dist/types.d.ts",
|
|
23
|
+
"import": "./dist/types.es.js"
|
|
24
|
+
},
|
|
25
|
+
"./hooks": {
|
|
26
|
+
"types": "./dist/hooks.d.ts",
|
|
27
|
+
"import": "./dist/hooks.es.js"
|
|
28
|
+
},
|
|
29
|
+
"./components": {
|
|
30
|
+
"types": "./dist/components.d.ts",
|
|
31
|
+
"import": "./dist/components.es.js"
|
|
16
32
|
}
|
|
17
33
|
},
|
|
18
34
|
"files": [
|
|
@@ -1,153 +0,0 @@
|
|
|
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 k, useEffect as u, useContext as H } from "react";
|
|
4
|
-
import { createPortal as I } from "react-dom";
|
|
5
|
-
import './provider.css';function O(t) {
|
|
6
|
-
var r, a, s = "";
|
|
7
|
-
if (typeof t == "string" || typeof t == "number") s += t;
|
|
8
|
-
else if (typeof t == "object") if (Array.isArray(t)) {
|
|
9
|
-
var _ = t.length;
|
|
10
|
-
for (r = 0; r < _; r++) t[r] && (a = O(t[r])) && (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, r, a = 0, s = "", _ = arguments.length; a < _; a++) (t = arguments[a]) && (r = O(t)) && (s && (s += " "), s += r);
|
|
16
|
-
return s;
|
|
17
|
-
}
|
|
18
|
-
const N = "_active_1rsd6_164", c = {
|
|
19
|
-
"dialog-overlay": "_dialog-overlay_1rsd6_45",
|
|
20
|
-
"dialog-compose": "_dialog-compose_1rsd6_62",
|
|
21
|
-
"dialog-close": "_dialog-close_1rsd6_68",
|
|
22
|
-
"dialog-close-cross": "_dialog-close-cross_1rsd6_85",
|
|
23
|
-
"dialog-window": "_dialog-window_1rsd6_109",
|
|
24
|
-
"dialog-window-header": "_dialog-window-header_1rsd6_123",
|
|
25
|
-
"dialog-window-body": "_dialog-window-body_1rsd6_136",
|
|
26
|
-
"dialog-window-footer": "_dialog-window-footer_1rsd6_142",
|
|
27
|
-
"full-height": "_full-height_1rsd6_155",
|
|
28
|
-
"full-width": "_full-width_1rsd6_158",
|
|
29
|
-
"un-closable": "_un-closable_1rsd6_161",
|
|
30
|
-
active: N,
|
|
31
|
-
"position-top-center": "_position-top-center_1rsd6_170",
|
|
32
|
-
"position-center": "_position-center_1rsd6_176",
|
|
33
|
-
"position-bottom-center": "_position-bottom-center_1rsd6_180",
|
|
34
|
-
"position-left-top": "_position-left-top_1rsd6_186",
|
|
35
|
-
"position-left-center": "_position-left-center_1rsd6_192",
|
|
36
|
-
"position-left-bottom": "_position-left-bottom_1rsd6_198",
|
|
37
|
-
"position-right-top": "_position-right-top_1rsd6_204",
|
|
38
|
-
"position-right-center": "_position-right-center_1rsd6_210",
|
|
39
|
-
"position-right-bottom": "_position-right-bottom_1rsd6_216",
|
|
40
|
-
"animated-opening": "_animated-opening_1rsd6_222",
|
|
41
|
-
"animated-opening-opacity": "_animated-opening-opacity_1rsd6_1",
|
|
42
|
-
"animated-opening-translate": "_animated-opening-translate_1rsd6_1",
|
|
43
|
-
"animated-closing": "_animated-closing_1rsd6_228",
|
|
44
|
-
"animated-closing-opacity": "_animated-closing-opacity_1rsd6_1",
|
|
45
|
-
"animated-closing-translate": "_animated-closing-translate_1rsd6_1",
|
|
46
|
-
"paciu-ui-blink-animation": "_paciu-ui-blink-animation_1rsd6_1"
|
|
47
|
-
};
|
|
48
|
-
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 || {});
|
|
49
|
-
const T = $(void 0), q = () => H(T), F = ({ children: t, initialTheme: r, defaultDialogPosition: a }) => {
|
|
50
|
-
const [s, _] = y(!1), [g, E] = y(r || null), [m, B] = y(r || null), [d, h] = y([]), R = z(0), C = w((e) => {
|
|
51
|
-
document.documentElement.dataset.theme = e || void 0, E(e);
|
|
52
|
-
}, []), b = w((e, n) => {
|
|
53
|
-
h((o) => {
|
|
54
|
-
if (o.length > 0) {
|
|
55
|
-
const l = [...o], M = l.length - 1;
|
|
56
|
-
if (l[M].status === i.Opening)
|
|
57
|
-
return o;
|
|
58
|
-
}
|
|
59
|
-
return [...o, { id: ++R.current, status: i.Opening, node: e, options: n }];
|
|
60
|
-
});
|
|
61
|
-
}, []), f = w((e) => {
|
|
62
|
-
h((n) => {
|
|
63
|
-
if (n.length === 0)
|
|
64
|
-
return n;
|
|
65
|
-
const o = [...n], l = o.length - 1;
|
|
66
|
-
return o[l].status === i.Closing || (e?.esc || e?.outside) && o[l]?.options?.unClosable ? n : (o[l] = { ...o[l], status: i.Closing }, o);
|
|
67
|
-
});
|
|
68
|
-
}, []), v = k(() => {
|
|
69
|
-
const e = g || m;
|
|
70
|
-
return e ? e === p.Light ? p.Dark : p.Light : null;
|
|
71
|
-
}, [g, m]), j = k(
|
|
72
|
-
() => ({ theme: g, nextTheme: v, systemTheme: m, toggleTheme: C, openDialog: b, closeDialog: f, dialogsQueue: d }),
|
|
73
|
-
[g, v, m, C, b, f, d]
|
|
74
|
-
);
|
|
75
|
-
return u(() => {
|
|
76
|
-
if (d.length) {
|
|
77
|
-
const e = d[d.length - 1];
|
|
78
|
-
e.status === i.Opening && (e?.options?.onOpen && e.options.onOpen(), setTimeout(() => {
|
|
79
|
-
h((n) => {
|
|
80
|
-
const o = [...n];
|
|
81
|
-
return o[o.length - 1].status = i.Opened, o;
|
|
82
|
-
}), e?.options?.onOpened && e.options.onOpened();
|
|
83
|
-
}, 240)), e.status === i.Closing && (e?.options?.onClose && e.options.onClose(), setTimeout(() => {
|
|
84
|
-
h((n) => n.slice(0, -1)), e?.options?.onClosed && e.options.onClosed();
|
|
85
|
-
}, 240));
|
|
86
|
-
}
|
|
87
|
-
}, [d]), u(() => {
|
|
88
|
-
const e = window.matchMedia("(prefers-color-scheme: dark)"), n = (o) => {
|
|
89
|
-
B(o.matches ? p.Dark : p.Light);
|
|
90
|
-
};
|
|
91
|
-
return n(e), e.addEventListener("change", n), () => e.removeEventListener("change", n);
|
|
92
|
-
}, []), u(() => {
|
|
93
|
-
document.body.style.overflowY = d.length ? "hidden" : "";
|
|
94
|
-
}, [d]), u(() => {
|
|
95
|
-
const e = (l) => {
|
|
96
|
-
l.key === "Escape" && (l.stopPropagation(), f({ esc: !0 }));
|
|
97
|
-
}, n = () => {
|
|
98
|
-
document.addEventListener("keydown", e);
|
|
99
|
-
}, o = () => {
|
|
100
|
-
document.removeEventListener("keydown", e);
|
|
101
|
-
};
|
|
102
|
-
return n(), () => {
|
|
103
|
-
o();
|
|
104
|
-
};
|
|
105
|
-
}, []), u(() => {
|
|
106
|
-
_(!0);
|
|
107
|
-
}), /* @__PURE__ */ A(T.Provider, { value: j, children: [
|
|
108
|
-
t,
|
|
109
|
-
s && I(
|
|
110
|
-
/* @__PURE__ */ L("div", { id: "paciu-ui-dialogs", children: d.map((e, n) => {
|
|
111
|
-
const o = e?.options?.position || a || x.Center;
|
|
112
|
-
return /* @__PURE__ */ L(
|
|
113
|
-
"div",
|
|
114
|
-
{
|
|
115
|
-
className: K(c["dialog-overlay"], {
|
|
116
|
-
[c["animated-opening"]]: [
|
|
117
|
-
i.Opening,
|
|
118
|
-
i.Opened
|
|
119
|
-
].includes(e.status),
|
|
120
|
-
[c["animated-closing"]]: [
|
|
121
|
-
i.Closing,
|
|
122
|
-
i.Closed
|
|
123
|
-
].includes(e.status),
|
|
124
|
-
[c.active]: n === d.length - 1,
|
|
125
|
-
[c["full-height"]]: e?.options?.fullHeight,
|
|
126
|
-
[c["full-width"]]: e?.options?.fullWidth,
|
|
127
|
-
[c["un-closable"]]: e?.options?.unClosable,
|
|
128
|
-
[c[`position-${o}`]]: !!o
|
|
129
|
-
}),
|
|
130
|
-
onClick: () => f({ outside: !0 }),
|
|
131
|
-
style: {
|
|
132
|
-
zIndex: n + 1e3,
|
|
133
|
-
transform: `scale(calc(1 - ${(d.length - n - 1) * 0.02}))`
|
|
134
|
-
},
|
|
135
|
-
children: e.node()
|
|
136
|
-
},
|
|
137
|
-
e.id
|
|
138
|
-
);
|
|
139
|
-
}) }),
|
|
140
|
-
document.body
|
|
141
|
-
)
|
|
142
|
-
] });
|
|
143
|
-
};
|
|
144
|
-
export {
|
|
145
|
-
x as D,
|
|
146
|
-
T as P,
|
|
147
|
-
p as T,
|
|
148
|
-
i as a,
|
|
149
|
-
F as b,
|
|
150
|
-
K as c,
|
|
151
|
-
c as s,
|
|
152
|
-
q as u
|
|
153
|
-
};
|
|
File without changes
|
|
File without changes
|