@paciu/ui 0.0.46 → 0.0.48

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