@jbpark/ui-kit 2.0.0 → 2.0.1
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/Menu.d.mts +2 -2
- package/dist/Menu.mjs +2 -2
- package/dist/Reveals.d.mts +1 -1
- package/dist/Typography.d.mts +1 -1
- package/dist/{index-BO7hcWjo.d.mts → index-CbElazGe.d.mts} +12 -10
- package/dist/{index-DS-PGSIg.d.mts → index-CbaWHQ3Y.d.mts} +4 -4
- package/dist/{index-BqaluEQ4.d.mts → index-DP36DulT.d.mts} +10 -10
- package/dist/index.d.mts +56 -44
- package/dist/index.mjs +2 -2
- package/dist/output.css +28 -30
- package/dist/{src-C3CveHCK.mjs → src-DbD2jnc4.mjs} +123 -124
- package/package.json +2 -1
package/dist/Menu.d.mts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { a as
|
|
2
|
-
export { ClickEventHandler, MenuItem, MenuProps, Menu as default, findKey };
|
|
1
|
+
import { a as MenuProps, c as buildSelectionMap, i as MenuItem, l as findKey, n as MENU_CLASSNAMES, o as Props, r as Menu, s as SelectionMap, t as ClickEventHandler } from "./index-CbElazGe.mjs";
|
|
2
|
+
export { ClickEventHandler, MENU_CLASSNAMES, MenuItem, MenuProps, Props, SelectionMap, buildSelectionMap, Menu as default, findKey };
|
package/dist/Menu.mjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
import { l as
|
|
3
|
+
import { d as buildSelectionMap, f as findKey, l as MENU_CLASSNAMES, u as Menu_default } from "./src-DbD2jnc4.mjs";
|
|
4
4
|
import "./utils-DEenfsJ-.mjs";
|
|
5
5
|
import "./Typography-LYvEW-c8.mjs";
|
|
6
6
|
import "./Reveals-BpnYZJUk.mjs";
|
|
7
7
|
|
|
8
|
-
export { Menu_default as default, findKey };
|
|
8
|
+
export { MENU_CLASSNAMES, buildSelectionMap, Menu_default as default, findKey };
|
package/dist/Reveals.d.mts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { a as Reveals, i as Props, n as DELAY, o as Item, r as DURATION, s as ItemProps, t as CASCADE } from "./index-
|
|
1
|
+
import { a as Reveals, i as Props, n as DELAY, o as Item, r as DURATION, s as ItemProps, t as CASCADE } from "./index-CbaWHQ3Y.mjs";
|
|
2
2
|
export { CASCADE, DELAY, DURATION, Item, ItemProps, Props as RevealsProps, Reveals as default };
|
package/dist/Typography.d.mts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { a as Paragraph, i as Text, n as TypographyProps, o as Link, r as Title, t as Typography } from "./index-
|
|
1
|
+
import { a as Paragraph, i as Text, n as TypographyProps, o as Link, r as Title, t as Typography } from "./index-DP36DulT.mjs";
|
|
2
2
|
export { Link, Paragraph, Text, Title, TypographyProps, Typography as default };
|
|
@@ -1,20 +1,18 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
2
|
|
|
3
3
|
//#region src/components/molecules/Menu/index.d.ts
|
|
4
4
|
interface MenuItem {
|
|
5
5
|
label: React.ReactNode;
|
|
6
6
|
key: React.Key;
|
|
7
7
|
type?: string;
|
|
8
|
-
itemKey?: React.Key;
|
|
9
|
-
keyPath?: React.Key[];
|
|
10
8
|
path?: string;
|
|
11
9
|
children?: MenuItem[];
|
|
12
10
|
}
|
|
13
11
|
interface Props {
|
|
14
|
-
fullSize?: boolean;
|
|
15
12
|
mode?: 'horizontal' | 'vertical' | 'inline';
|
|
16
13
|
selectedKeys?: React.Key[];
|
|
17
14
|
defaultSelectedKeys?: React.Key[];
|
|
15
|
+
selectionMap?: SelectionMap;
|
|
18
16
|
offset?: [number, number];
|
|
19
17
|
inlineOffset?: number;
|
|
20
18
|
classNames?: {
|
|
@@ -30,8 +28,9 @@ interface Props {
|
|
|
30
28
|
label?: React.CSSProperties;
|
|
31
29
|
};
|
|
32
30
|
onClick?: ClickEventHandler;
|
|
31
|
+
onSelect?: ClickEventHandler;
|
|
33
32
|
}
|
|
34
|
-
interface MenuProps extends Props, Omit<React.HTMLAttributes<HTMLElement>, 'onClick'> {
|
|
33
|
+
interface MenuProps extends Props, Omit<React.HTMLAttributes<HTMLElement>, 'onClick' | 'onSelect'> {
|
|
35
34
|
items?: MenuItem[];
|
|
36
35
|
}
|
|
37
36
|
type ClickEventHandler = (params: {
|
|
@@ -40,12 +39,14 @@ type ClickEventHandler = (params: {
|
|
|
40
39
|
keyPath: React.Key[];
|
|
41
40
|
item: MenuItem;
|
|
42
41
|
}) => void;
|
|
43
|
-
declare
|
|
42
|
+
declare const MENU_CLASSNAMES: string[];
|
|
43
|
+
type SelectionMap = ReadonlyMap<React.Key, boolean>;
|
|
44
|
+
declare function buildSelectionMap(items: MenuItem[], selectedKeysSet: ReadonlySet<React.Key>): SelectionMap;
|
|
45
|
+
declare function findKey(menu: MenuItem, targetKeys: ReadonlySet<React.Key>): boolean;
|
|
44
46
|
declare const Menu: ({
|
|
45
47
|
items,
|
|
46
48
|
mode,
|
|
47
|
-
|
|
48
|
-
defaultSelectedKeys: _defaultSelectedKeys,
|
|
49
|
+
defaultSelectedKeys,
|
|
49
50
|
selectedKeys: _selectedKeys,
|
|
50
51
|
className,
|
|
51
52
|
classNames,
|
|
@@ -53,7 +54,8 @@ declare const Menu: ({
|
|
|
53
54
|
offset,
|
|
54
55
|
inlineOffset,
|
|
55
56
|
onClick,
|
|
57
|
+
onSelect: _onSelect,
|
|
56
58
|
...props
|
|
57
|
-
}: MenuProps) =>
|
|
59
|
+
}: MenuProps) => react_jsx_runtime0.JSX.Element;
|
|
58
60
|
//#endregion
|
|
59
|
-
export {
|
|
61
|
+
export { MenuProps as a, buildSelectionMap as c, MenuItem as i, findKey as l, MENU_CLASSNAMES as n, Props as o, Menu as r, SelectionMap as s, ClickEventHandler as t };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime8 from "react/jsx-runtime";
|
|
2
2
|
import { MotionProps } from "motion/react";
|
|
3
3
|
|
|
4
4
|
//#region src/components/molecules/Reveals/Item/index.d.ts
|
|
@@ -54,7 +54,7 @@ declare const Item: ({
|
|
|
54
54
|
transition,
|
|
55
55
|
className,
|
|
56
56
|
...props
|
|
57
|
-
}: ItemProps) =>
|
|
57
|
+
}: ItemProps) => react_jsx_runtime8.JSX.Element;
|
|
58
58
|
//#endregion
|
|
59
59
|
//#region src/components/molecules/Reveals/index.d.ts
|
|
60
60
|
interface Props extends React.HTMLAttributes<HTMLDivElement>, ItemProps {
|
|
@@ -79,7 +79,7 @@ declare const Reveals: {
|
|
|
79
79
|
duration,
|
|
80
80
|
delay,
|
|
81
81
|
...props
|
|
82
|
-
}: Props):
|
|
82
|
+
}: Props): react_jsx_runtime8.JSX.Element;
|
|
83
83
|
Item: ({
|
|
84
84
|
effect,
|
|
85
85
|
children,
|
|
@@ -91,7 +91,7 @@ declare const Reveals: {
|
|
|
91
91
|
transition,
|
|
92
92
|
className,
|
|
93
93
|
...props
|
|
94
|
-
}: ItemProps) =>
|
|
94
|
+
}: ItemProps) => react_jsx_runtime8.JSX.Element;
|
|
95
95
|
};
|
|
96
96
|
//#endregion
|
|
97
97
|
export { Reveals as a, Props as i, DELAY as n, Item as o, DURATION as r, ItemProps as s, CASCADE as t };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime9 from "react/jsx-runtime";
|
|
2
2
|
|
|
3
3
|
//#region src/components/atoms/Typography/Link/index.d.ts
|
|
4
4
|
interface Props$3 extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
@@ -9,7 +9,7 @@ declare const Link: ({
|
|
|
9
9
|
className,
|
|
10
10
|
level,
|
|
11
11
|
...props
|
|
12
|
-
}: Props$3) =>
|
|
12
|
+
}: Props$3) => react_jsx_runtime9.JSX.Element;
|
|
13
13
|
//#endregion
|
|
14
14
|
//#region src/components/atoms/Typography/Paragraph/index.d.ts
|
|
15
15
|
interface Props$2 extends TypographyProps {}
|
|
@@ -18,7 +18,7 @@ declare const Paragraph: ({
|
|
|
18
18
|
className,
|
|
19
19
|
level,
|
|
20
20
|
...props
|
|
21
|
-
}: Props$2) =>
|
|
21
|
+
}: Props$2) => react_jsx_runtime9.JSX.Element;
|
|
22
22
|
//#endregion
|
|
23
23
|
//#region src/components/atoms/Typography/Text/index.d.ts
|
|
24
24
|
interface Props$1 extends TypographyProps {
|
|
@@ -32,7 +32,7 @@ declare const Text: ({
|
|
|
32
32
|
className,
|
|
33
33
|
level,
|
|
34
34
|
...props
|
|
35
|
-
}: Props$1) =>
|
|
35
|
+
}: Props$1) => react_jsx_runtime9.JSX.Element;
|
|
36
36
|
//#endregion
|
|
37
37
|
//#region src/components/atoms/Typography/Title/index.d.ts
|
|
38
38
|
interface Props extends TypographyProps {}
|
|
@@ -41,7 +41,7 @@ declare const Title: ({
|
|
|
41
41
|
level,
|
|
42
42
|
className,
|
|
43
43
|
...props
|
|
44
|
-
}: Props) =>
|
|
44
|
+
}: Props) => react_jsx_runtime9.JSX.Element;
|
|
45
45
|
//#endregion
|
|
46
46
|
//#region src/components/atoms/Typography/index.d.ts
|
|
47
47
|
interface TypographyProps extends React.HTMLAttributes<HTMLElement> {
|
|
@@ -51,19 +51,19 @@ declare const Typography: {
|
|
|
51
51
|
({
|
|
52
52
|
children,
|
|
53
53
|
...props
|
|
54
|
-
}: TypographyProps):
|
|
54
|
+
}: TypographyProps): react_jsx_runtime9.JSX.Element;
|
|
55
55
|
Link: ({
|
|
56
56
|
children,
|
|
57
57
|
className,
|
|
58
58
|
level,
|
|
59
59
|
...props
|
|
60
|
-
}: Props$3) =>
|
|
60
|
+
}: Props$3) => react_jsx_runtime9.JSX.Element;
|
|
61
61
|
Paragraph: ({
|
|
62
62
|
children,
|
|
63
63
|
className,
|
|
64
64
|
level,
|
|
65
65
|
...props
|
|
66
|
-
}: Props$2) =>
|
|
66
|
+
}: Props$2) => react_jsx_runtime9.JSX.Element;
|
|
67
67
|
Text: ({
|
|
68
68
|
children,
|
|
69
69
|
underline,
|
|
@@ -71,13 +71,13 @@ declare const Typography: {
|
|
|
71
71
|
className,
|
|
72
72
|
level,
|
|
73
73
|
...props
|
|
74
|
-
}: Props$1) =>
|
|
74
|
+
}: Props$1) => react_jsx_runtime9.JSX.Element;
|
|
75
75
|
Title: ({
|
|
76
76
|
children,
|
|
77
77
|
level,
|
|
78
78
|
className,
|
|
79
79
|
...props
|
|
80
|
-
}: Props) =>
|
|
80
|
+
}: Props) => react_jsx_runtime9.JSX.Element;
|
|
81
81
|
};
|
|
82
82
|
//#endregion
|
|
83
83
|
export { Paragraph as a, Text as i, TypographyProps as n, Link as o, Title as r, Typography as t };
|
package/dist/index.d.mts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { t as Typography } from "./index-
|
|
2
|
-
import {
|
|
3
|
-
import { a as Reveals } from "./index-
|
|
1
|
+
import { t as Typography } from "./index-DP36DulT.mjs";
|
|
2
|
+
import { a as MenuProps, r as Menu } from "./index-CbElazGe.mjs";
|
|
3
|
+
import { a as Reveals } from "./index-CbaWHQ3Y.mjs";
|
|
4
4
|
import * as React$2 from "react";
|
|
5
5
|
import React$1, { ChangeEvent, HTMLAttributes, InputHTMLAttributes, MouseEvent } from "react";
|
|
6
6
|
import { VariantProps } from "class-variance-authority";
|
|
7
|
-
import * as
|
|
7
|
+
import * as react_jsx_runtime20 from "react/jsx-runtime";
|
|
8
8
|
import * as swiper_react0 from "swiper/react";
|
|
9
9
|
import { SwiperProps } from "swiper/react";
|
|
10
10
|
import "swiper/css";
|
|
@@ -18,15 +18,15 @@ import { SwiperOptions } from "swiper/types";
|
|
|
18
18
|
//#region src/core/button.d.ts
|
|
19
19
|
declare const buttonVariants: (props?: ({
|
|
20
20
|
variant?: "outline" | "link" | "default" | "destructive" | "secondary" | "ghost" | null | undefined;
|
|
21
|
-
size?: "
|
|
21
|
+
size?: "icon" | "default" | "sm" | "lg" | null | undefined;
|
|
22
22
|
} & class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
23
|
-
type Props$
|
|
23
|
+
type Props$23 = React$2.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
|
|
24
24
|
asChild?: boolean;
|
|
25
25
|
};
|
|
26
26
|
//#endregion
|
|
27
27
|
//#region src/components/atoms/Button/index.d.ts
|
|
28
28
|
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
29
|
-
interface Props$
|
|
29
|
+
interface Props$22 extends Omit<Props$23, 'size' | 'variant'> {
|
|
30
30
|
icon?: React.ReactNode;
|
|
31
31
|
block?: boolean;
|
|
32
32
|
danger?: boolean;
|
|
@@ -51,7 +51,7 @@ declare const Button: ({
|
|
|
51
51
|
children,
|
|
52
52
|
onMouseDown,
|
|
53
53
|
...props
|
|
54
|
-
}: Props$
|
|
54
|
+
}: Props$22) => react_jsx_runtime20.JSX.Element;
|
|
55
55
|
//#endregion
|
|
56
56
|
//#region src/components/atoms/Checkbox/Group/index.d.ts
|
|
57
57
|
type Option = {
|
|
@@ -60,7 +60,7 @@ type Option = {
|
|
|
60
60
|
checked?: boolean;
|
|
61
61
|
};
|
|
62
62
|
type Options = string[] | number[] | boolean[] | Option[];
|
|
63
|
-
interface Props$
|
|
63
|
+
interface Props$21 extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
64
64
|
options?: Options;
|
|
65
65
|
direction?: string;
|
|
66
66
|
placement?: string;
|
|
@@ -70,7 +70,7 @@ interface Props$20 extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'
|
|
|
70
70
|
//#endregion
|
|
71
71
|
//#region src/components/atoms/Checkbox/index.d.ts
|
|
72
72
|
type OptionValue = string | number | boolean;
|
|
73
|
-
interface Props$
|
|
73
|
+
interface Props$20 extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
74
74
|
placement?: string;
|
|
75
75
|
checked?: boolean;
|
|
76
76
|
value?: OptionValue;
|
|
@@ -91,7 +91,7 @@ declare const Checkbox: {
|
|
|
91
91
|
checked: _checked,
|
|
92
92
|
onChange: _onChange,
|
|
93
93
|
...props
|
|
94
|
-
}: Props$
|
|
94
|
+
}: Props$20): react_jsx_runtime20.JSX.Element;
|
|
95
95
|
Group: ({
|
|
96
96
|
direction,
|
|
97
97
|
placement,
|
|
@@ -99,33 +99,33 @@ declare const Checkbox: {
|
|
|
99
99
|
classNames,
|
|
100
100
|
options: _options,
|
|
101
101
|
onChange
|
|
102
|
-
}: Props$
|
|
102
|
+
}: Props$21) => react_jsx_runtime20.JSX.Element;
|
|
103
103
|
};
|
|
104
104
|
//#endregion
|
|
105
105
|
//#region src/components/atoms/FloatButton/BackTop/index.d.ts
|
|
106
|
-
interface Props$
|
|
106
|
+
interface Props$19 extends Props$22 {
|
|
107
107
|
visibilityHeight?: number;
|
|
108
108
|
onClick?: (e: MouseEvent<HTMLElement>) => void;
|
|
109
109
|
}
|
|
110
110
|
//#endregion
|
|
111
111
|
//#region src/components/atoms/FloatButton/index.d.ts
|
|
112
|
-
interface Props$
|
|
112
|
+
interface Props$18 extends Props$22 {}
|
|
113
113
|
declare const FloatButton: {
|
|
114
114
|
({
|
|
115
115
|
className,
|
|
116
116
|
children,
|
|
117
117
|
...props
|
|
118
|
-
}: Props$
|
|
118
|
+
}: Props$18): react_jsx_runtime20.JSX.Element;
|
|
119
119
|
BackTop: ({
|
|
120
120
|
visibilityHeight,
|
|
121
121
|
className,
|
|
122
122
|
onClick,
|
|
123
123
|
...props
|
|
124
|
-
}: Props$
|
|
124
|
+
}: Props$19) => react_jsx_runtime20.JSX.Element;
|
|
125
125
|
};
|
|
126
126
|
//#endregion
|
|
127
127
|
//#region src/components/atoms/Input/Search/index.d.ts
|
|
128
|
-
interface Props$
|
|
128
|
+
interface Props$17 extends InputHTMLAttributes<HTMLInputElement> {
|
|
129
129
|
allowClear?: boolean;
|
|
130
130
|
onChange: (e: ChangeEvent<HTMLInputElement> | {
|
|
131
131
|
target: {
|
|
@@ -139,17 +139,29 @@ interface Props$16 extends InputHTMLAttributes<HTMLInputElement> {
|
|
|
139
139
|
declare const Input: {
|
|
140
140
|
({
|
|
141
141
|
...props
|
|
142
|
-
}: InputHTMLAttributes<HTMLInputElement>):
|
|
143
|
-
Search: React$2.ForwardRefExoticComponent<Props$
|
|
142
|
+
}: InputHTMLAttributes<HTMLInputElement>): react_jsx_runtime20.JSX.Element;
|
|
143
|
+
Search: React$2.ForwardRefExoticComponent<Props$17 & React$2.RefAttributes<HTMLInputElement>>;
|
|
144
144
|
TextArea: ({
|
|
145
145
|
className,
|
|
146
146
|
ref,
|
|
147
147
|
...props
|
|
148
148
|
}: React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
|
|
149
149
|
ref?: React.Ref<HTMLTextAreaElement>;
|
|
150
|
-
}) =>
|
|
150
|
+
}) => react_jsx_runtime20.JSX.Element;
|
|
151
151
|
};
|
|
152
152
|
//#endregion
|
|
153
|
+
//#region src/components/atoms/Popover/index.d.ts
|
|
154
|
+
interface Props$16 {
|
|
155
|
+
title?: React.ReactNode;
|
|
156
|
+
content: React.ReactNode;
|
|
157
|
+
children: React.ReactNode;
|
|
158
|
+
}
|
|
159
|
+
declare const Popover: ({
|
|
160
|
+
title,
|
|
161
|
+
content,
|
|
162
|
+
children
|
|
163
|
+
}: Props$16) => react_jsx_runtime20.JSX.Element;
|
|
164
|
+
//#endregion
|
|
153
165
|
//#region src/components/atoms/Progress/index.d.ts
|
|
154
166
|
interface Props$15 extends React.HTMLAttributes<HTMLElement> {
|
|
155
167
|
value: number;
|
|
@@ -164,7 +176,7 @@ declare const Progress: ({
|
|
|
164
176
|
className,
|
|
165
177
|
direction,
|
|
166
178
|
classNames
|
|
167
|
-
}: Props$15) =>
|
|
179
|
+
}: Props$15) => react_jsx_runtime20.JSX.Element;
|
|
168
180
|
//#endregion
|
|
169
181
|
//#region src/components/atoms/Skeleton/index.d.ts
|
|
170
182
|
interface Props$14 extends React.HTMLAttributes<HTMLDivElement> {
|
|
@@ -199,15 +211,15 @@ declare const Skeleton: {
|
|
|
199
211
|
height,
|
|
200
212
|
children,
|
|
201
213
|
...props
|
|
202
|
-
}: Props$14): string | number | bigint | boolean | Iterable<React$2.ReactNode> | Promise<string | number | bigint | boolean | React$2.ReactPortal | React$2.ReactElement<unknown, string | React$2.JSXElementConstructor<any>> | Iterable<React$2.ReactNode> | null | undefined> |
|
|
214
|
+
}: Props$14): string | number | bigint | boolean | react_jsx_runtime20.JSX.Element | Iterable<React$2.ReactNode> | Promise<string | number | bigint | boolean | React$2.ReactPortal | React$2.ReactElement<unknown, string | React$2.JSXElementConstructor<any>> | Iterable<React$2.ReactNode> | null | undefined> | null | undefined;
|
|
203
215
|
Button: ({
|
|
204
216
|
className,
|
|
205
217
|
...props
|
|
206
|
-
}: Props$14) =>
|
|
218
|
+
}: Props$14) => react_jsx_runtime20.JSX.Element;
|
|
207
219
|
Node: ({
|
|
208
220
|
className,
|
|
209
221
|
...props
|
|
210
|
-
}: Props$14) =>
|
|
222
|
+
}: Props$14) => react_jsx_runtime20.JSX.Element;
|
|
211
223
|
};
|
|
212
224
|
//#endregion
|
|
213
225
|
//#region src/components/atoms/Spin/index.d.ts
|
|
@@ -218,7 +230,7 @@ declare const Spin: ({
|
|
|
218
230
|
spinning,
|
|
219
231
|
className,
|
|
220
232
|
...props
|
|
221
|
-
}: Props$13) =>
|
|
233
|
+
}: Props$13) => react_jsx_runtime20.JSX.Element | null;
|
|
222
234
|
//#endregion
|
|
223
235
|
//#region src/components/atoms/Switch/index.d.ts
|
|
224
236
|
interface Props$12 extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
|
|
@@ -235,7 +247,7 @@ declare const Switch: ({
|
|
|
235
247
|
className,
|
|
236
248
|
classNames,
|
|
237
249
|
...props
|
|
238
|
-
}: Props$12) =>
|
|
250
|
+
}: Props$12) => react_jsx_runtime20.JSX.Element;
|
|
239
251
|
//#endregion
|
|
240
252
|
//#region src/components/molecules/Card/index.d.ts
|
|
241
253
|
interface Props$11 extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
|
|
@@ -253,7 +265,7 @@ declare const Card: ({
|
|
|
253
265
|
classNames,
|
|
254
266
|
variant,
|
|
255
267
|
...props
|
|
256
|
-
}: Props$11) =>
|
|
268
|
+
}: Props$11) => react_jsx_runtime20.JSX.Element;
|
|
257
269
|
//#endregion
|
|
258
270
|
//#region src/components/molecules/Collapse/index.d.ts
|
|
259
271
|
interface Item {
|
|
@@ -280,7 +292,7 @@ declare const Collapse: ({
|
|
|
280
292
|
className,
|
|
281
293
|
classNames,
|
|
282
294
|
defaultActiveKey
|
|
283
|
-
}: Props$10) =>
|
|
295
|
+
}: Props$10) => react_jsx_runtime20.JSX.Element;
|
|
284
296
|
//#endregion
|
|
285
297
|
//#region src/components/molecules/Dropdown/index.d.ts
|
|
286
298
|
type ChangeEventHandler = (open: boolean) => void;
|
|
@@ -298,7 +310,7 @@ declare const Dropdown: ({
|
|
|
298
310
|
open: _open,
|
|
299
311
|
onOpenChange,
|
|
300
312
|
...props
|
|
301
|
-
}: Props$9) =>
|
|
313
|
+
}: Props$9) => react_jsx_runtime20.JSX.Element;
|
|
302
314
|
//#endregion
|
|
303
315
|
//#region src/components/molecules/Marquees/Item/index.d.ts
|
|
304
316
|
interface ItemProps {
|
|
@@ -328,7 +340,7 @@ declare const Marquees: {
|
|
|
328
340
|
pauseOnHover,
|
|
329
341
|
autoFill,
|
|
330
342
|
...props
|
|
331
|
-
}: Props$7):
|
|
343
|
+
}: Props$7): react_jsx_runtime20.JSX.Element;
|
|
332
344
|
Item: ({
|
|
333
345
|
width: _width,
|
|
334
346
|
speed,
|
|
@@ -336,7 +348,7 @@ declare const Marquees: {
|
|
|
336
348
|
pause: _pause,
|
|
337
349
|
pauseOnHover,
|
|
338
350
|
children
|
|
339
|
-
}: Props$8) =>
|
|
351
|
+
}: Props$8) => react_jsx_runtime20.JSX.Element;
|
|
340
352
|
};
|
|
341
353
|
//#endregion
|
|
342
354
|
//#region src/components/molecules/Space/index.d.ts
|
|
@@ -367,7 +379,7 @@ declare const Space: ({
|
|
|
367
379
|
hidden,
|
|
368
380
|
style,
|
|
369
381
|
...props
|
|
370
|
-
}: Props$6) =>
|
|
382
|
+
}: Props$6) => react_jsx_runtime20.JSX.Element;
|
|
371
383
|
//#endregion
|
|
372
384
|
//#region src/components/organisms/Drawer/index.d.ts
|
|
373
385
|
interface Props$5 {
|
|
@@ -417,7 +429,7 @@ declare const Drawer: ({
|
|
|
417
429
|
container,
|
|
418
430
|
onClose,
|
|
419
431
|
...props
|
|
420
|
-
}: Props$5) =>
|
|
432
|
+
}: Props$5) => react_jsx_runtime20.JSX.Element | null;
|
|
421
433
|
//#endregion
|
|
422
434
|
//#region src/components/organisms/List/index.d.ts
|
|
423
435
|
interface Props$4<T> extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
@@ -456,12 +468,12 @@ declare const List: {
|
|
|
456
468
|
classNames,
|
|
457
469
|
renderItem,
|
|
458
470
|
...props
|
|
459
|
-
}: Props$4<T>): string | number | bigint | true | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined
|
|
471
|
+
}: Props$4<T>): string | number | bigint | true | react_jsx_runtime20.JSX.Element | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined>;
|
|
460
472
|
Item: ({
|
|
461
473
|
children,
|
|
462
474
|
className,
|
|
463
475
|
...props
|
|
464
|
-
}: React$1.HTMLAttributes<HTMLDivElement>) =>
|
|
476
|
+
}: React$1.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime20.JSX.Element;
|
|
465
477
|
};
|
|
466
478
|
//#endregion
|
|
467
479
|
//#region src/components/organisms/Modal/index.d.ts
|
|
@@ -515,7 +527,7 @@ declare const Modal: {
|
|
|
515
527
|
onOk,
|
|
516
528
|
onCancel,
|
|
517
529
|
...props
|
|
518
|
-
}: Props$3):
|
|
530
|
+
}: Props$3): react_jsx_runtime20.JSX.Element | null;
|
|
519
531
|
destroy(id?: string): void;
|
|
520
532
|
destroyAll(): void;
|
|
521
533
|
info(props: StaticProps): string | undefined;
|
|
@@ -544,13 +556,13 @@ declare const Swiper: {
|
|
|
544
556
|
renderItem,
|
|
545
557
|
loadingClassName,
|
|
546
558
|
...props
|
|
547
|
-
}: Props$2<T>):
|
|
559
|
+
}: Props$2<T>): react_jsx_runtime20.JSX.Element;
|
|
548
560
|
Slide: {
|
|
549
561
|
({
|
|
550
562
|
children,
|
|
551
563
|
className,
|
|
552
564
|
...props
|
|
553
|
-
}: swiper_react0.SwiperSlideProps):
|
|
565
|
+
}: swiper_react0.SwiperSlideProps): react_jsx_runtime20.JSX.Element;
|
|
554
566
|
displayName: string;
|
|
555
567
|
};
|
|
556
568
|
};
|
|
@@ -565,27 +577,27 @@ declare const Layout: {
|
|
|
565
577
|
children,
|
|
566
578
|
className,
|
|
567
579
|
...props
|
|
568
|
-
}: Props):
|
|
580
|
+
}: Props): react_jsx_runtime20.JSX.Element;
|
|
569
581
|
Content: ({
|
|
570
582
|
children,
|
|
571
583
|
className,
|
|
572
584
|
...props
|
|
573
|
-
}: React.HTMLAttributes<HTMLDivElement>) =>
|
|
585
|
+
}: React.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime20.JSX.Element;
|
|
574
586
|
Footer: ({
|
|
575
587
|
children,
|
|
576
588
|
className,
|
|
577
589
|
...props
|
|
578
|
-
}: React.HTMLAttributes<HTMLDivElement>) =>
|
|
590
|
+
}: React.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime20.JSX.Element;
|
|
579
591
|
Header: ({
|
|
580
592
|
children,
|
|
581
593
|
className,
|
|
582
594
|
...props
|
|
583
|
-
}: Props$1) =>
|
|
595
|
+
}: Props$1) => react_jsx_runtime20.JSX.Element;
|
|
584
596
|
Sider: ({
|
|
585
597
|
children,
|
|
586
598
|
className,
|
|
587
599
|
...props
|
|
588
|
-
}: React.HTMLAttributes<HTMLDivElement>) =>
|
|
600
|
+
}: React.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime20.JSX.Element;
|
|
589
601
|
};
|
|
590
602
|
//#endregion
|
|
591
|
-
export { Button, Card, Checkbox, Collapse, Drawer, Dropdown, FloatButton, Input, Layout, List, Marquees, Menu, Modal, Progress, Reveals, Skeleton, Space, Spin, Swiper, Switch, Typography };
|
|
603
|
+
export { Button, Card, Checkbox, Collapse, Drawer, Dropdown, FloatButton, Input, Layout, List, Marquees, Menu, Modal, Popover, Progress, Reveals, Skeleton, Space, Spin, Swiper, Switch, Typography };
|
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { C as Button_default, S as Checkbox_default, _ as Skeleton_default, a as Drawer_default, b as Input_default, c as Dropdown_default, g as Spin_default, h as Switch_default, i as List_default, m as Card_default, n as Swiper_default, o as Space_default, p as Collapse_default, r as Modal_default, s as Marquees_default, t as Layout_default, u as Menu_default, v as Progress_default, x as FloatButton_default, y as Popover_default } from "./src-DbD2jnc4.mjs";
|
|
2
2
|
import "./utils-DEenfsJ-.mjs";
|
|
3
3
|
import { t as Typography_default } from "./Typography-LYvEW-c8.mjs";
|
|
4
4
|
import { i as Reveals_default } from "./Reveals-BpnYZJUk.mjs";
|
|
5
5
|
|
|
6
|
-
export { Button_default as Button, Card_default as Card, Checkbox_default as Checkbox, Collapse_default as Collapse, Drawer_default as Drawer, Dropdown_default as Dropdown, FloatButton_default as FloatButton, Input_default as Input, Layout_default as Layout, List_default as List, Marquees_default as Marquees, Menu_default as Menu, Modal_default as Modal, Progress_default as Progress, Reveals_default as Reveals, Skeleton_default as Skeleton, Space_default as Space, Spin_default as Spin, Swiper_default as Swiper, Switch_default as Switch, Typography_default as Typography };
|
|
6
|
+
export { Button_default as Button, Card_default as Card, Checkbox_default as Checkbox, Collapse_default as Collapse, Drawer_default as Drawer, Dropdown_default as Dropdown, FloatButton_default as FloatButton, Input_default as Input, Layout_default as Layout, List_default as List, Marquees_default as Marquees, Menu_default as Menu, Modal_default as Modal, Popover_default as Popover, Progress_default as Progress, Reveals_default as Reveals, Skeleton_default as Skeleton, Space_default as Space, Spin_default as Spin, Swiper_default as Swiper, Switch_default as Switch, Typography_default as Typography };
|
package/dist/output.css
CHANGED
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
--color-yellow-400: oklch(85.2% 0.199 91.936);
|
|
12
12
|
--color-green-400: oklch(79.2% 0.209 151.711);
|
|
13
13
|
--color-blue-400: oklch(70.7% 0.165 254.624);
|
|
14
|
-
--color-gray-100: oklch(96.7% 0.003 264.542);
|
|
15
14
|
--color-gray-200: oklch(92.8% 0.006 264.531);
|
|
16
15
|
--color-black: #000;
|
|
17
16
|
--color-white: #fff;
|
|
@@ -232,12 +231,6 @@
|
|
|
232
231
|
.inset-0 {
|
|
233
232
|
inset: calc(var(--spacing) * 0);
|
|
234
233
|
}
|
|
235
|
-
.inset-x-0 {
|
|
236
|
-
inset-inline: calc(var(--spacing) * 0);
|
|
237
|
-
}
|
|
238
|
-
.inset-y-0 {
|
|
239
|
-
inset-block: calc(var(--spacing) * 0);
|
|
240
|
-
}
|
|
241
234
|
.top-0 {
|
|
242
235
|
top: calc(var(--spacing) * 0);
|
|
243
236
|
}
|
|
@@ -409,9 +402,6 @@
|
|
|
409
402
|
.h-full {
|
|
410
403
|
height: 100%;
|
|
411
404
|
}
|
|
412
|
-
.h-screen {
|
|
413
|
-
height: 100vh;
|
|
414
|
-
}
|
|
415
405
|
.min-h-\[60px\] {
|
|
416
406
|
min-height: 60px;
|
|
417
407
|
}
|
|
@@ -448,18 +438,12 @@
|
|
|
448
438
|
.w-full {
|
|
449
439
|
width: 100%;
|
|
450
440
|
}
|
|
451
|
-
.w-screen {
|
|
452
|
-
width: 100vw;
|
|
453
|
-
}
|
|
454
441
|
.max-w-\[calc\(100\%-2rem\)\] {
|
|
455
442
|
max-width: calc(100% - 2rem);
|
|
456
443
|
}
|
|
457
444
|
.min-w-80 {
|
|
458
445
|
min-width: calc(var(--spacing) * 80);
|
|
459
446
|
}
|
|
460
|
-
.min-w-\[180px\] {
|
|
461
|
-
min-width: 180px;
|
|
462
|
-
}
|
|
463
447
|
.min-w-\[200px\] {
|
|
464
448
|
min-width: 200px;
|
|
465
449
|
}
|
|
@@ -484,8 +468,8 @@
|
|
|
484
468
|
.basis-0 {
|
|
485
469
|
flex-basis: calc(var(--spacing) * 0);
|
|
486
470
|
}
|
|
487
|
-
.
|
|
488
|
-
|
|
471
|
+
.origin-\[--radix-popover-content-transform-origin\] {
|
|
472
|
+
transform-origin: --radix-popover-content-transform-origin;
|
|
489
473
|
}
|
|
490
474
|
.translate-x-\[-50\%\] {
|
|
491
475
|
--tw-translate-x: -50%;
|
|
@@ -604,9 +588,6 @@
|
|
|
604
588
|
.gap-y-0 {
|
|
605
589
|
row-gap: calc(var(--spacing) * 0);
|
|
606
590
|
}
|
|
607
|
-
.gap-y-4 {
|
|
608
|
-
row-gap: calc(var(--spacing) * 4);
|
|
609
|
-
}
|
|
610
591
|
.gap-y-5 {
|
|
611
592
|
row-gap: calc(var(--spacing) * 5);
|
|
612
593
|
}
|
|
@@ -728,15 +709,15 @@
|
|
|
728
709
|
.bg-destructive {
|
|
729
710
|
background-color: var(--destructive);
|
|
730
711
|
}
|
|
731
|
-
.bg-gray-100 {
|
|
732
|
-
background-color: var(--color-gray-100);
|
|
733
|
-
}
|
|
734
712
|
.bg-inherit {
|
|
735
713
|
background-color: inherit;
|
|
736
714
|
}
|
|
737
715
|
.bg-muted {
|
|
738
716
|
background-color: var(--muted);
|
|
739
717
|
}
|
|
718
|
+
.bg-popover {
|
|
719
|
+
background-color: var(--popover);
|
|
720
|
+
}
|
|
740
721
|
.bg-primary {
|
|
741
722
|
background-color: var(--primary);
|
|
742
723
|
}
|
|
@@ -770,9 +751,6 @@
|
|
|
770
751
|
.p-6 {
|
|
771
752
|
padding: calc(var(--spacing) * 6);
|
|
772
753
|
}
|
|
773
|
-
.p-8 {
|
|
774
|
-
padding: calc(var(--spacing) * 8);
|
|
775
|
-
}
|
|
776
754
|
.px-3 {
|
|
777
755
|
padding-inline: calc(var(--spacing) * 3);
|
|
778
756
|
}
|
|
@@ -894,9 +872,6 @@
|
|
|
894
872
|
.text-nowrap {
|
|
895
873
|
text-wrap: nowrap;
|
|
896
874
|
}
|
|
897
|
-
.text-wrap {
|
|
898
|
-
text-wrap: wrap;
|
|
899
|
-
}
|
|
900
875
|
.break-all {
|
|
901
876
|
word-break: break-all;
|
|
902
877
|
}
|
|
@@ -927,6 +902,9 @@
|
|
|
927
902
|
.text-muted-foreground {
|
|
928
903
|
color: var(--muted-foreground);
|
|
929
904
|
}
|
|
905
|
+
.text-popover-foreground {
|
|
906
|
+
color: var(--popover-foreground);
|
|
907
|
+
}
|
|
930
908
|
.text-primary {
|
|
931
909
|
color: var(--primary);
|
|
932
910
|
}
|
|
@@ -1328,6 +1306,26 @@
|
|
|
1328
1306
|
}
|
|
1329
1307
|
}
|
|
1330
1308
|
}
|
|
1309
|
+
.data-\[side\=bottom\]\:slide-in-from-top-2 {
|
|
1310
|
+
&[data-side="bottom"] {
|
|
1311
|
+
--tw-enter-translate-y: calc(2*var(--spacing)*-1);
|
|
1312
|
+
}
|
|
1313
|
+
}
|
|
1314
|
+
.data-\[side\=left\]\:slide-in-from-right-2 {
|
|
1315
|
+
&[data-side="left"] {
|
|
1316
|
+
--tw-enter-translate-x: calc(2*var(--spacing));
|
|
1317
|
+
}
|
|
1318
|
+
}
|
|
1319
|
+
.data-\[side\=right\]\:slide-in-from-left-2 {
|
|
1320
|
+
&[data-side="right"] {
|
|
1321
|
+
--tw-enter-translate-x: calc(2*var(--spacing)*-1);
|
|
1322
|
+
}
|
|
1323
|
+
}
|
|
1324
|
+
.data-\[side\=top\]\:slide-in-from-bottom-2 {
|
|
1325
|
+
&[data-side="top"] {
|
|
1326
|
+
--tw-enter-translate-y: calc(2*var(--spacing));
|
|
1327
|
+
}
|
|
1328
|
+
}
|
|
1331
1329
|
.data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\] {
|
|
1332
1330
|
&[data-state="checked"] {
|
|
1333
1331
|
--tw-translate-x: calc(100% - 2px);
|
|
@@ -2,13 +2,14 @@ import { t as cn } from "./utils-DEenfsJ-.mjs";
|
|
|
2
2
|
import { t as Typography_default } from "./Typography-LYvEW-c8.mjs";
|
|
3
3
|
import { ArrowUp, Check, ChevronDown, CircleQuestionMark, CircleX, Info, Loader2, LoaderCircle, OctagonAlert, OctagonX, Search, Square, SquareCheck, X, XIcon } from "lucide-react";
|
|
4
4
|
import * as React$1 from "react";
|
|
5
|
-
import React, { Children, createElement, forwardRef, useEffect, useId, useRef, useState } from "react";
|
|
5
|
+
import React, { Children, createElement, forwardRef, useEffect, useId, useMemo, useRef, useState } from "react";
|
|
6
6
|
import { Slot } from "@radix-ui/react-slot";
|
|
7
7
|
import { cva } from "class-variance-authority";
|
|
8
8
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
9
9
|
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
|
10
10
|
import * as LabelPrimitive from "@radix-ui/react-label";
|
|
11
11
|
import { useIntersectionObserver, useThrottle, useWindowScroll } from "@uidotdev/usehooks";
|
|
12
|
+
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
12
13
|
import * as ProgressPrimitive from "@radix-ui/react-progress";
|
|
13
14
|
import * as SwitchPrimitive from "@radix-ui/react-switch";
|
|
14
15
|
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
|
@@ -339,6 +340,44 @@ Input.Search = Search_default;
|
|
|
339
340
|
Input.TextArea = TextArea_default;
|
|
340
341
|
var Input_default = Input;
|
|
341
342
|
|
|
343
|
+
//#endregion
|
|
344
|
+
//#region src/core/popover.tsx
|
|
345
|
+
const Popover$1 = PopoverPrimitive.Root;
|
|
346
|
+
const PopoverTrigger = PopoverPrimitive.Trigger;
|
|
347
|
+
const PopoverAnchor = PopoverPrimitive.Anchor;
|
|
348
|
+
const PopoverContent = React$1.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
|
|
349
|
+
ref,
|
|
350
|
+
align,
|
|
351
|
+
sideOffset,
|
|
352
|
+
className: cn(`bg-popover text-popover-foreground data-[state=open]:animate-in
|
|
353
|
+
data-[state=closed]:animate-out data-[state=closed]:fade-out-0
|
|
354
|
+
data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95
|
|
355
|
+
data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2
|
|
356
|
+
data-[side=left]:slide-in-from-right-2
|
|
357
|
+
data-[side=right]:slide-in-from-left-2
|
|
358
|
+
data-[side=top]:slide-in-from-bottom-2 z-50 w-72
|
|
359
|
+
origin-[--radix-popover-content-transform-origin] rounded-md border p-4
|
|
360
|
+
shadow-md outline-none`, className),
|
|
361
|
+
...props
|
|
362
|
+
}) }));
|
|
363
|
+
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
|
|
364
|
+
|
|
365
|
+
//#endregion
|
|
366
|
+
//#region src/components/atoms/Popover/index.tsx
|
|
367
|
+
const Popover = ({ title, content, children }) => {
|
|
368
|
+
return /* @__PURE__ */ jsxs(Popover$1, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
|
|
369
|
+
asChild: true,
|
|
370
|
+
children
|
|
371
|
+
}), /* @__PURE__ */ jsxs(PopoverContent, {
|
|
372
|
+
align: "start",
|
|
373
|
+
children: [title && typeof title === "string" ? /* @__PURE__ */ jsx(Typography_default.Title, {
|
|
374
|
+
level: 5,
|
|
375
|
+
children: title
|
|
376
|
+
}) : title, content]
|
|
377
|
+
})] });
|
|
378
|
+
};
|
|
379
|
+
var Popover_default = Popover;
|
|
380
|
+
|
|
342
381
|
//#endregion
|
|
343
382
|
//#region src/core/progress.tsx
|
|
344
383
|
const Progress$1 = React$1.forwardRef(({ className, barClassName, barStyle, value, ...props }, ref) => /* @__PURE__ */ jsx(ProgressPrimitive.Root, {
|
|
@@ -574,24 +613,7 @@ const Collapse = ({ expandIcon, accordion = false, items: _items = [], className
|
|
|
574
613
|
var Collapse_default = Collapse;
|
|
575
614
|
|
|
576
615
|
//#endregion
|
|
577
|
-
//#region src/components/molecules/Menu/index.tsx
|
|
578
|
-
const MENU_CLASSNAMES = [
|
|
579
|
-
"p-0",
|
|
580
|
-
"bg-white",
|
|
581
|
-
"shadow-md",
|
|
582
|
-
"rounded-md"
|
|
583
|
-
];
|
|
584
|
-
const OPEN_CLASSNAMES = ["underline", "underline-offset-8"];
|
|
585
|
-
const HOVER_CLASSNAMES = ["hover:underline", "hover:underline-offset-8"];
|
|
586
|
-
const OFFSET = [8, 8];
|
|
587
|
-
const INLINE_OFFSET = 16;
|
|
588
|
-
function findKey(menu, targetKeys) {
|
|
589
|
-
if (targetKeys.includes(menu.key)) return true;
|
|
590
|
-
if (menu.children && Array.isArray(menu.children)) {
|
|
591
|
-
for (const child of menu.children) if (findKey(child, targetKeys)) return true;
|
|
592
|
-
}
|
|
593
|
-
return false;
|
|
594
|
-
}
|
|
616
|
+
//#region src/components/molecules/Menu/Item/Label/index.tsx
|
|
595
617
|
const Label = ({ children, level = 4, className, ...props }) => {
|
|
596
618
|
if (typeof children === "string") return /* @__PURE__ */ jsx(Typography_default.Text, {
|
|
597
619
|
level,
|
|
@@ -601,94 +623,39 @@ const Label = ({ children, level = 4, className, ...props }) => {
|
|
|
601
623
|
});
|
|
602
624
|
return children;
|
|
603
625
|
};
|
|
604
|
-
|
|
626
|
+
var Label_default = Label;
|
|
627
|
+
|
|
628
|
+
//#endregion
|
|
629
|
+
//#region src/components/molecules/Menu/Item/index.tsx
|
|
630
|
+
const OFFSET = [8, 8];
|
|
631
|
+
const INLINE_OFFSET = 16;
|
|
632
|
+
const STYLES = {
|
|
633
|
+
hover: { classes: ["hover:underline", "hover:underline-offset-8"] },
|
|
634
|
+
open: { classes: ["underline", "underline-offset-8"] }
|
|
635
|
+
};
|
|
636
|
+
const getItemClasses = (root, isHorizontal, isInline, hasChildren, customClasses) => cn("px-4 py-2", "cursor-pointer", "whitespace-nowrap", root && isHorizontal ? "inline-flex" : "flex", ...root ? [
|
|
637
|
+
"h-full",
|
|
638
|
+
"rounded-none border-transparent",
|
|
639
|
+
hasChildren && "hover:border-current",
|
|
640
|
+
isHorizontal ? "border-b-2" : "border-r-2",
|
|
641
|
+
isInline && "border-none"
|
|
642
|
+
] : ["rounded-md", ...STYLES.hover.classes], customClasses);
|
|
643
|
+
const Item$2 = ({ itemKey, keyPath, root = false, mode, label, children, selectedKeys = [], selectionMap, classNames, styles, offset = OFFSET, inlineOffset = INLINE_OFFSET, onClick, onSelect, ...props }) => {
|
|
605
644
|
const [open, setOpen] = useState(false);
|
|
606
|
-
const [position, setPosition] = useState({
|
|
607
|
-
top: 0,
|
|
608
|
-
left: 0
|
|
609
|
-
});
|
|
610
645
|
const itemRef = useRef(null);
|
|
611
646
|
const isHorizontal = mode === "horizontal";
|
|
612
647
|
const isInline = mode === "inline";
|
|
613
648
|
const [left, top] = offset;
|
|
649
|
+
const selected = selectionMap?.get(itemKey) ?? false;
|
|
614
650
|
const item = {
|
|
615
651
|
...props,
|
|
616
652
|
label,
|
|
617
653
|
key: itemKey,
|
|
618
654
|
children
|
|
619
655
|
};
|
|
620
|
-
const itemClassNames =
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
!!children?.length && "hover:border-current",
|
|
624
|
-
isHorizontal ? "border-b-2" : "border-r-2",
|
|
625
|
-
isInline && "border-none",
|
|
626
|
-
classNames?.rootItem
|
|
627
|
-
] : [
|
|
628
|
-
"rounded-md",
|
|
629
|
-
...HOVER_CLASSNAMES,
|
|
630
|
-
classNames?.item
|
|
631
|
-
]);
|
|
632
|
-
const childrenContainerClassNames = cn(isInline ? "relative overflow-hidden" : "absolute min-w-[200px]", !isInline && root && isHorizontal ? "left-0 top-full pt-2 pl-0" : !isInline ? "left-full top-0 pl-2 pt-0" : "pl-4", ...fullSize ? [
|
|
633
|
-
...MENU_CLASSNAMES,
|
|
634
|
-
"fixed flex justify-center items-start",
|
|
635
|
-
isHorizontal ? "inset-x-0 w-screen" : "inset-y-0 h-screen"
|
|
636
|
-
] : []);
|
|
637
|
-
const childrenContainerStyle = fullSize ? isHorizontal ? {
|
|
638
|
-
top: position.top,
|
|
639
|
-
marginTop: top
|
|
640
|
-
} : {
|
|
641
|
-
left: position.left,
|
|
642
|
-
marginLeft: left
|
|
643
|
-
} : isInline ? { paddingLeft: inlineOffset } : root && isHorizontal ? { paddingTop: top } : { paddingLeft: left };
|
|
644
|
-
useEffect(() => {
|
|
645
|
-
if (!itemRef.current) return;
|
|
646
|
-
const $item = itemRef.current;
|
|
647
|
-
const onResize = () => {
|
|
648
|
-
setPosition({
|
|
649
|
-
top: $item.offsetTop + $item.offsetHeight,
|
|
650
|
-
left: $item.offsetLeft + $item.offsetWidth
|
|
651
|
-
});
|
|
652
|
-
};
|
|
653
|
-
onResize();
|
|
654
|
-
window.addEventListener("resize", onResize);
|
|
655
|
-
return () => window.removeEventListener("resize", onResize);
|
|
656
|
-
}, []);
|
|
657
|
-
if (!root && fullSize) return /* @__PURE__ */ jsxs("li", {
|
|
658
|
-
className: cn("basis-1/6", "min-w-[180px]"),
|
|
659
|
-
children: [/* @__PURE__ */ jsx("div", {
|
|
660
|
-
className: cn(itemClassNames, "justify-center"),
|
|
661
|
-
onClick: (e) => {
|
|
662
|
-
e.stopPropagation();
|
|
663
|
-
onClick?.({
|
|
664
|
-
domEvent: e,
|
|
665
|
-
key: itemKey,
|
|
666
|
-
keyPath,
|
|
667
|
-
item
|
|
668
|
-
});
|
|
669
|
-
},
|
|
670
|
-
children: /* @__PURE__ */ jsx(Label, {
|
|
671
|
-
className: "font-semibold",
|
|
672
|
-
children: label
|
|
673
|
-
})
|
|
674
|
-
}), /* @__PURE__ */ jsx("ul", { children: children?.map((child) => /* @__PURE__ */ jsx("li", {
|
|
675
|
-
className: cn(itemClassNames, "justify-center", ...findKey(child, selectedKeys) ? [...OPEN_CLASSNAMES, ...HOVER_CLASSNAMES] : []),
|
|
676
|
-
onClick: (e) => {
|
|
677
|
-
e.stopPropagation();
|
|
678
|
-
onClick?.({
|
|
679
|
-
domEvent: e,
|
|
680
|
-
key: child.key,
|
|
681
|
-
keyPath: [...keyPath, child.key],
|
|
682
|
-
item: child
|
|
683
|
-
});
|
|
684
|
-
},
|
|
685
|
-
children: /* @__PURE__ */ jsx(Label, {
|
|
686
|
-
level: 5,
|
|
687
|
-
className: "text-center text-wrap",
|
|
688
|
-
children: child.label
|
|
689
|
-
})
|
|
690
|
-
}, child.key)) })]
|
|
691
|
-
});
|
|
656
|
+
const itemClassNames = getItemClasses(root, isHorizontal, isInline, !!children?.length, root ? classNames?.rootItem : classNames?.item);
|
|
657
|
+
const childrenContainerClassNames = cn(isInline ? "relative overflow-hidden" : "absolute min-w-[200px]", !isInline && root && isHorizontal ? "left-0 top-full pt-2 pl-0" : !isInline ? "left-full top-0 pl-2 pt-0" : "pl-4");
|
|
658
|
+
const childrenContainerStyle = isInline ? { paddingLeft: inlineOffset } : root && isHorizontal ? { paddingTop: top } : { paddingLeft: left };
|
|
692
659
|
return /* @__PURE__ */ jsxs("li", {
|
|
693
660
|
ref: itemRef,
|
|
694
661
|
className: cn("group", "relative", root && isHorizontal ? "inline-block" : "block"),
|
|
@@ -701,23 +668,29 @@ const Item$2 = ({ itemKey = "", keyPath = [], root = false, mode, label, childre
|
|
|
701
668
|
setOpen(false);
|
|
702
669
|
},
|
|
703
670
|
children: [/* @__PURE__ */ jsx("div", {
|
|
704
|
-
|
|
671
|
+
role: "menuitem",
|
|
672
|
+
"aria-expanded": children?.length ? open : void 0,
|
|
673
|
+
"aria-haspopup": children?.length ? "menu" : void 0,
|
|
674
|
+
"aria-selected": selected,
|
|
675
|
+
className: cn(itemClassNames, ...selected ? root ? ["border-current"] : [...STYLES.open.classes, ...STYLES.hover.classes] : root && !!children?.length ? ["group-hover:border-current"] : []),
|
|
705
676
|
style: root ? styles?.rootItem : styles?.item,
|
|
706
677
|
onClick: (e) => {
|
|
707
678
|
e.stopPropagation();
|
|
708
679
|
if (isInline) setOpen(!open);
|
|
709
|
-
|
|
680
|
+
const params = {
|
|
710
681
|
domEvent: e,
|
|
711
682
|
key: itemKey,
|
|
712
683
|
keyPath,
|
|
713
684
|
item
|
|
714
|
-
}
|
|
685
|
+
};
|
|
686
|
+
onClick?.(params);
|
|
687
|
+
if (!selected) onSelect?.(params);
|
|
715
688
|
},
|
|
716
689
|
children: /* @__PURE__ */ jsxs("div", {
|
|
717
690
|
className: cn("w-full", "inline-flex items-center justify-between"),
|
|
718
691
|
children: [
|
|
719
|
-
/* @__PURE__ */ jsx(
|
|
720
|
-
className: cn(classNames?.label
|
|
692
|
+
/* @__PURE__ */ jsx(Label_default, {
|
|
693
|
+
className: cn(classNames?.label),
|
|
721
694
|
style: styles?.label,
|
|
722
695
|
children: label
|
|
723
696
|
}),
|
|
@@ -742,59 +715,85 @@ const Item$2 = ({ itemKey = "", keyPath = [], root = false, mode, label, childre
|
|
|
742
715
|
} : { opacity: 0 },
|
|
743
716
|
transition: { duration: .2 },
|
|
744
717
|
children: /* @__PURE__ */ jsx("ul", {
|
|
745
|
-
className: cn(
|
|
746
|
-
"h-auto",
|
|
747
|
-
"flex flex-nowrap gap-y-4",
|
|
748
|
-
"p-8"
|
|
749
|
-
] : MENU_CLASSNAMES, isInline && "shadow-none", classNames?.subMenu),
|
|
718
|
+
className: cn(MENU_CLASSNAMES, isInline && "shadow-none", classNames?.subMenu),
|
|
750
719
|
style: styles?.subMenu,
|
|
751
720
|
children: children.map((child) => /* @__PURE__ */ createElement(Item$2, {
|
|
752
721
|
...child,
|
|
753
722
|
key: child.key,
|
|
754
723
|
itemKey: child.key,
|
|
755
724
|
keyPath: [...keyPath, child.key],
|
|
725
|
+
selectionMap,
|
|
756
726
|
mode,
|
|
757
727
|
selectedKeys,
|
|
758
|
-
fullSize,
|
|
759
728
|
classNames,
|
|
760
729
|
styles,
|
|
761
730
|
offset,
|
|
762
731
|
inlineOffset,
|
|
763
|
-
onClick
|
|
732
|
+
onClick,
|
|
733
|
+
onSelect
|
|
764
734
|
}))
|
|
765
735
|
})
|
|
766
736
|
}) })]
|
|
767
737
|
});
|
|
768
738
|
};
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
739
|
+
var Item_default$2 = Item$2;
|
|
740
|
+
|
|
741
|
+
//#endregion
|
|
742
|
+
//#region src/components/molecules/Menu/index.tsx
|
|
743
|
+
const MENU_CLASSNAMES = [
|
|
744
|
+
"p-0",
|
|
745
|
+
"bg-white",
|
|
746
|
+
"shadow-md",
|
|
747
|
+
"rounded-md"
|
|
748
|
+
];
|
|
749
|
+
function buildSelectionMap(items, selectedKeysSet) {
|
|
750
|
+
const map = /* @__PURE__ */ new Map();
|
|
751
|
+
const dfs = (node) => {
|
|
752
|
+
const self = selectedKeysSet.has(node.key);
|
|
753
|
+
const hasSelectedChild = node.children?.some((child) => dfs(child)) ?? false;
|
|
754
|
+
const isSelected = self || hasSelectedChild;
|
|
755
|
+
map.set(node.key, isSelected);
|
|
756
|
+
return isSelected;
|
|
757
|
+
};
|
|
758
|
+
items.forEach(dfs);
|
|
759
|
+
return map;
|
|
760
|
+
}
|
|
761
|
+
function findKey(menu, targetKeys) {
|
|
762
|
+
if (targetKeys.has(menu.key)) return true;
|
|
763
|
+
if (menu.children && Array.isArray(menu.children)) {
|
|
764
|
+
for (const child of menu.children) if (findKey(child, targetKeys)) return true;
|
|
765
|
+
}
|
|
766
|
+
return false;
|
|
767
|
+
}
|
|
768
|
+
const Menu = ({ items, mode = "vertical", defaultSelectedKeys = [], selectedKeys: _selectedKeys, className, classNames, styles, offset, inlineOffset, onClick, onSelect: _onSelect, ...props }) => {
|
|
769
|
+
const isControlled = _selectedKeys !== void 0;
|
|
770
|
+
const [uncontrolledSelectedKeys, setUncontrolledSelectedKeys] = useState(defaultSelectedKeys ?? []);
|
|
771
|
+
const selectedKeys = isControlled ? _selectedKeys : uncontrolledSelectedKeys;
|
|
772
|
+
const selectedKeysSet = useMemo(() => new Set(selectedKeys ?? []), [selectedKeys]);
|
|
773
|
+
const selectionMap = useMemo(() => buildSelectionMap(items ?? [], selectedKeysSet), [items, selectedKeysSet]);
|
|
774
|
+
const onSelect = (params) => {
|
|
775
|
+
if (!isControlled) setUncontrolledSelectedKeys([params.key]);
|
|
776
|
+
_onSelect?.(params);
|
|
777
|
+
};
|
|
781
778
|
return /* @__PURE__ */ jsx("ul", {
|
|
779
|
+
role: "menu",
|
|
782
780
|
className: cn(MENU_CLASSNAMES, mode === "horizontal" ? "flex" : "inline-block", className),
|
|
783
781
|
...props,
|
|
784
|
-
children: items?.map((item) => /* @__PURE__ */ createElement(
|
|
782
|
+
children: items?.map((item) => /* @__PURE__ */ createElement(Item_default$2, {
|
|
785
783
|
root: true,
|
|
786
784
|
...item,
|
|
787
785
|
key: item.key,
|
|
788
786
|
itemKey: item.key,
|
|
789
787
|
keyPath: [item.key],
|
|
790
788
|
selectedKeys,
|
|
789
|
+
selectionMap,
|
|
791
790
|
mode,
|
|
792
|
-
fullSize,
|
|
793
791
|
classNames,
|
|
794
792
|
styles,
|
|
795
793
|
offset,
|
|
796
794
|
inlineOffset,
|
|
797
|
-
onClick
|
|
795
|
+
onClick,
|
|
796
|
+
onSelect
|
|
798
797
|
}))
|
|
799
798
|
});
|
|
800
799
|
};
|
|
@@ -5277,4 +5276,4 @@ Layout.Sider = Sider_default;
|
|
|
5277
5276
|
var Layout_default = Layout;
|
|
5278
5277
|
|
|
5279
5278
|
//#endregion
|
|
5280
|
-
export {
|
|
5279
|
+
export { Button_default$1 as C, Checkbox_default as S, Skeleton_default as _, Drawer_default as a, Input_default as b, Dropdown_default as c, buildSelectionMap as d, findKey as f, Spin_default as g, Switch_default as h, List_default as i, MENU_CLASSNAMES as l, Card_default as m, Swiper_default as n, Space_default as o, Collapse_default as p, Modal_default as r, Marquees_default as s, Layout_default as t, Menu_default as u, Progress_default as v, FloatButton_default as x, Popover_default as y };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jbpark/ui-kit",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.1",
|
|
4
4
|
"description": "Modern React UI component library built with TypeScript, Tailwind CSS, and Radix UI. Featuring atoms, molecules, organisms and layout templates for building beautiful interfaces.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -88,6 +88,7 @@
|
|
|
88
88
|
"@radix-ui/react-checkbox": "^1.3.3",
|
|
89
89
|
"@radix-ui/react-dialog": "^1.1.15",
|
|
90
90
|
"@radix-ui/react-label": "^2.1.8",
|
|
91
|
+
"@radix-ui/react-popover": "^1.1.15",
|
|
91
92
|
"@radix-ui/react-progress": "^1.1.7",
|
|
92
93
|
"@radix-ui/react-slot": "^1.2.3",
|
|
93
94
|
"@radix-ui/react-switch": "^1.2.6",
|