@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 CHANGED
@@ -1,2 +1,2 @@
1
- import { a as findKey, i as MenuProps, n as Menu, r as MenuItem, t as ClickEventHandler } from "./index-BO7hcWjo.mjs";
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 Menu_default, u as findKey } from "./src-C3CveHCK.mjs";
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 };
@@ -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-DS-PGSIg.mjs";
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 };
@@ -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-BqaluEQ4.mjs";
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 react_jsx_runtime6 from "react/jsx-runtime";
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 function findKey(menu: MenuItem, targetKeys: React.Key[]): boolean;
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
- fullSize,
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) => react_jsx_runtime6.JSX.Element;
59
+ }: MenuProps) => react_jsx_runtime0.JSX.Element;
58
60
  //#endregion
59
- export { findKey as a, MenuProps as i, Menu as n, MenuItem as r, ClickEventHandler as t };
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 react_jsx_runtime11 from "react/jsx-runtime";
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) => react_jsx_runtime11.JSX.Element;
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): react_jsx_runtime11.JSX.Element;
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) => react_jsx_runtime11.JSX.Element;
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 react_jsx_runtime8 from "react/jsx-runtime";
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) => react_jsx_runtime8.JSX.Element;
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) => react_jsx_runtime8.JSX.Element;
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) => react_jsx_runtime8.JSX.Element;
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) => react_jsx_runtime8.JSX.Element;
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): react_jsx_runtime8.JSX.Element;
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) => react_jsx_runtime8.JSX.Element;
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) => react_jsx_runtime8.JSX.Element;
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) => react_jsx_runtime8.JSX.Element;
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) => react_jsx_runtime8.JSX.Element;
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-BqaluEQ4.mjs";
2
- import { i as MenuProps, n as Menu } from "./index-BO7hcWjo.mjs";
3
- import { a as Reveals } from "./index-DS-PGSIg.mjs";
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 react_jsx_runtime18 from "react/jsx-runtime";
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?: "default" | "icon" | "sm" | "lg" | null | undefined;
21
+ size?: "icon" | "default" | "sm" | "lg" | null | undefined;
22
22
  } & class_variance_authority_types0.ClassProp) | undefined) => string;
23
- type Props$22 = React$2.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
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$21 extends Omit<Props$22, 'size' | 'variant'> {
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$21) => react_jsx_runtime18.JSX.Element;
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$20 extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
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$19 extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
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$19): react_jsx_runtime18.JSX.Element;
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$20) => react_jsx_runtime18.JSX.Element;
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$18 extends Props$21 {
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$17 extends Props$21 {}
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$17): react_jsx_runtime18.JSX.Element;
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$18) => react_jsx_runtime18.JSX.Element;
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$16 extends InputHTMLAttributes<HTMLInputElement> {
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>): react_jsx_runtime18.JSX.Element;
143
- Search: React$2.ForwardRefExoticComponent<Props$16 & React$2.RefAttributes<HTMLInputElement>>;
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
- }) => react_jsx_runtime18.JSX.Element;
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) => react_jsx_runtime18.JSX.Element;
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> | react_jsx_runtime18.JSX.Element | 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) => react_jsx_runtime18.JSX.Element;
218
+ }: Props$14) => react_jsx_runtime20.JSX.Element;
207
219
  Node: ({
208
220
  className,
209
221
  ...props
210
- }: Props$14) => react_jsx_runtime18.JSX.Element;
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) => react_jsx_runtime18.JSX.Element | null;
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) => react_jsx_runtime18.JSX.Element;
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) => react_jsx_runtime18.JSX.Element;
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) => react_jsx_runtime18.JSX.Element;
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) => react_jsx_runtime18.JSX.Element;
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): react_jsx_runtime18.JSX.Element;
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) => react_jsx_runtime18.JSX.Element;
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) => react_jsx_runtime18.JSX.Element;
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) => react_jsx_runtime18.JSX.Element | null;
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> | react_jsx_runtime18.JSX.Element;
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>) => react_jsx_runtime18.JSX.Element;
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): react_jsx_runtime18.JSX.Element | null;
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>): react_jsx_runtime18.JSX.Element;
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): react_jsx_runtime18.JSX.Element;
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): react_jsx_runtime18.JSX.Element;
580
+ }: Props): react_jsx_runtime20.JSX.Element;
569
581
  Content: ({
570
582
  children,
571
583
  className,
572
584
  ...props
573
- }: React.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime18.JSX.Element;
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>) => react_jsx_runtime18.JSX.Element;
590
+ }: React.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime20.JSX.Element;
579
591
  Header: ({
580
592
  children,
581
593
  className,
582
594
  ...props
583
- }: Props$1) => react_jsx_runtime18.JSX.Element;
595
+ }: Props$1) => react_jsx_runtime20.JSX.Element;
584
596
  Sider: ({
585
597
  children,
586
598
  className,
587
599
  ...props
588
- }: React.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime18.JSX.Element;
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 { _ as Input_default, a as Drawer_default, b as Button_default, c as Dropdown_default, d as Collapse_default, f as Card_default, g as Progress_default, h as Skeleton_default, i as List_default, l as Menu_default, m as Spin_default, n as Swiper_default, o as Space_default, p as Switch_default, r as Modal_default, s as Marquees_default, t as Layout_default, v as FloatButton_default, y as Checkbox_default } from "./src-C3CveHCK.mjs";
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
- .basis-1\/6 {
488
- flex-basis: calc(1/6 * 100%);
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
- const Item$2 = ({ itemKey = "", keyPath = [], root = false, mode, label, children, selectedKeys = [], fullSize, classNames, styles, offset = OFFSET, inlineOffset = INLINE_OFFSET, onClick, ...props }) => {
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 = cn("px-4 py-2", "cursor-pointer", "whitespace-nowrap", root && isHorizontal ? "inline-flex" : "flex", ...root ? [
621
- "h-full",
622
- "rounded-none border-transparent",
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
- className: cn(itemClassNames, ...findKey(item, selectedKeys) ? root ? ["border-current"] : [...OPEN_CLASSNAMES, ...HOVER_CLASSNAMES] : root && !!children?.length ? ["group-hover:border-current"] : []),
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
- onClick?.({
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(Label, {
720
- className: cn(classNames?.label, root && classNames?.rootItem, ...findKey(item, selectedKeys) ? root ? [] : [...OPEN_CLASSNAMES, ...HOVER_CLASSNAMES] : []),
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(fullSize ? [
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
- const Menu = ({ items, mode = "vertical", fullSize = false, defaultSelectedKeys: _defaultSelectedKeys = [], selectedKeys: _selectedKeys = [], className, classNames, styles, offset, inlineOffset, onClick = () => {}, ...props }) => {
770
- const [selectedKeys, setSelectedKeys] = useState(_defaultSelectedKeys);
771
- useEffect(() => {
772
- if (!_defaultSelectedKeys.length) return;
773
- setSelectedKeys(_defaultSelectedKeys);
774
- return () => setSelectedKeys([]);
775
- }, [_defaultSelectedKeys]);
776
- useEffect(() => {
777
- if (!_selectedKeys.length) return;
778
- setSelectedKeys(_selectedKeys);
779
- return () => setSelectedKeys([]);
780
- }, [_selectedKeys]);
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(Item$2, {
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 { Input_default as _, Drawer_default as a, Button_default$1 as b, Dropdown_default as c, Collapse_default as d, Card_default as f, Progress_default as g, Skeleton_default as h, List_default as i, Menu_default as l, Spin_default as m, Swiper_default as n, Space_default as o, Switch_default as p, Modal_default as r, Marquees_default as s, Layout_default as t, findKey as u, FloatButton_default as v, Checkbox_default as y };
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.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",