@paciu/ui 0.0.50 → 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.
@@ -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,5 @@
1
+ export interface DialogProps extends React.PropsWithChildren {
2
+ header?: React.ReactNode;
3
+ footer?: React.ReactNode;
4
+ }
5
+ export declare const Dialog: React.FC<DialogProps>;
@@ -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,5 @@
1
+ export { Button } from './button/button.tsx';
2
+ export { Row } from './row/row.tsx';
3
+ export { Flex } from './flex/flex.tsx';
4
+ export { Card } from './card/card.tsx';
5
+ export { Dialog } from './dialog/dialog.tsx';
@@ -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 @@
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}
@@ -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
+ }
@@ -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,6 @@
1
+ export { useEscape } from './use-escape';
2
+ export { useSkipEffect } from './use-skip-effect';
3
+ export declare const useScroll: () => {
4
+ isScrolled: boolean;
5
+ };
6
+ export declare const usePaciu: () => import('../provider').PaciuContextType;
@@ -0,0 +1 @@
1
+ export declare const useEscape: (callback: () => void) => void;
@@ -0,0 +1,5 @@
1
+ import { default as React } from 'react';
2
+ export interface UseSkipEffectOptions {
3
+ count?: number;
4
+ }
5
+ export declare const useSkipEffect: (cb: React.EffectCallback, deps?: React.DependencyList, options?: UseSkipEffectOptions) => void;
@@ -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
- import { default as default_2 } from 'react';
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
- 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
- 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
+
@@ -1,73 +1,37 @@
1
- import { Context } from 'react';
2
- import { JSX } from 'react/jsx-runtime';
3
-
4
- export declare interface CloseDialogOptions {
5
- esc?: boolean;
6
- outside?: boolean;
7
- }
8
-
9
- declare enum DialogPosition {
10
- TopCenter = "top-center",
11
- Center = "center",
12
- BottomCenter = "bottom-center",
13
- LeftTop = "left-top",
14
- LeftCenter = "left-center",
15
- LeftBottom = "left-bottom",
16
- RightTop = "right-top",
17
- RightCenter = "right-center",
18
- RightBottom = "right-bottom"
19
- }
20
-
21
- export declare interface DialogQueueItem {
22
- id: number;
23
- status: DialogQueueItemStatus;
24
- node: () => React.ReactNode;
25
- options?: OpenDialogOptions;
26
- }
27
-
28
- declare enum DialogQueueItemStatus {
29
- Opening = "opening",
30
- Opened = "opened",
31
- Closing = "closing",
32
- Closed = "closed"
33
- }
34
-
35
- export declare interface OpenDialogOptions {
36
- position?: DialogPosition;
37
- unClosable?: boolean;
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;
@@ -1,9 +1,106 @@
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";
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
- e as PaciuContext,
7
- u as PaciuProvider,
8
- P as usePaciuContext
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
+ }
@@ -0,0 +1 @@
1
+
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@paciu/ui",
3
- "version": "0.0.50",
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,152 +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 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
- };
package/dist/provider.css DELETED
@@ -1 +0,0 @@
1
- @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}
File without changes