@solibo/solibo-ui 0.2.15 → 0.2.17
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/README.md +17 -2
- package/dist/assets/index.css +1 -1
- package/dist/assets/index10.css +1 -0
- package/dist/assets/index12.css +1 -1
- package/dist/assets/index13.css +1 -1
- package/dist/assets/index15.css +1 -1
- package/dist/assets/index16.css +1 -1
- package/dist/assets/index17.css +1 -1
- package/dist/assets/index18.css +1 -1
- package/dist/assets/index19.css +1 -1
- package/dist/assets/index2.css +1 -1
- package/dist/assets/index20.css +1 -1
- package/dist/assets/index21.css +1 -1
- package/dist/assets/index22.css +1 -1
- package/dist/assets/index23.css +1 -1
- package/dist/assets/index24.css +1 -1
- package/dist/assets/index3.css +1 -1
- package/dist/assets/index4.css +1 -1
- package/dist/assets/index5.css +1 -1
- package/dist/assets/index6.css +1 -1
- package/dist/assets/index7.css +1 -1
- package/dist/assets/index8.css +1 -1
- package/dist/assets/index9.css +0 -1
- package/dist/components/accordion/index.cjs +1 -1
- package/dist/components/accordion/index.js +6 -6
- package/dist/components/aside/index.cjs +1 -1
- package/dist/components/aside/index.cjs.map +1 -1
- package/dist/components/aside/index.js +16 -16
- package/dist/components/aside/index.js.map +1 -1
- package/dist/components/banner/index.cjs +1 -1
- package/dist/components/banner/index.cjs.map +1 -1
- package/dist/components/banner/index.js +14 -35
- package/dist/components/banner/index.js.map +1 -1
- package/dist/components/branding/index.cjs +1 -1
- package/dist/components/branding/index.js +1 -1
- package/dist/components/button/index.cjs +1 -1
- package/dist/components/button/index.cjs.map +1 -1
- package/dist/components/button/index.js +22 -53
- package/dist/components/button/index.js.map +1 -1
- package/dist/components/card/index.cjs +1 -1
- package/dist/components/card/index.cjs.map +1 -1
- package/dist/components/card/index.js +11 -37
- package/dist/components/card/index.js.map +1 -1
- package/dist/components/checkbox/index.cjs +1 -1
- package/dist/components/checkbox/index.cjs.map +1 -1
- package/dist/components/checkbox/index.js +19 -22
- package/dist/components/checkbox/index.js.map +1 -1
- package/dist/components/dialog/index.cjs +1 -1
- package/dist/components/dialog/index.cjs.map +1 -1
- package/dist/components/dialog/index.js +8 -52
- package/dist/components/dialog/index.js.map +1 -1
- package/dist/components/dropdown/index.cjs +1 -1
- package/dist/components/dropdown/index.js +3 -3
- package/dist/components/editor/index.cjs +1 -1
- package/dist/components/editor/index.js +1 -1
- package/dist/components/file/index.cjs +2 -0
- package/dist/components/file/index.cjs.map +1 -0
- package/dist/components/file/index.js +27 -0
- package/dist/components/file/index.js.map +1 -0
- package/dist/components/footer/index.cjs +1 -1
- package/dist/components/footer/index.js +1 -1
- package/dist/components/form/index.cjs +1 -1
- package/dist/components/form/index.js +1 -1
- package/dist/components/header/index.cjs +1 -1
- package/dist/components/header/index.js +4 -4
- package/dist/components/icon/index.cjs +1 -1
- package/dist/components/icon/index.cjs.map +1 -1
- package/dist/components/icon/index.js +26 -44
- package/dist/components/icon/index.js.map +1 -1
- package/dist/components/input/index.cjs +1 -1
- package/dist/components/input/index.js +13 -13
- package/dist/components/layout/index.cjs +1 -1
- package/dist/components/layout/index.js +1 -1
- package/dist/components/link/index.cjs +1 -1
- package/dist/components/link/index.js +1 -1
- package/dist/components/list/index.cjs +1 -1
- package/dist/components/list/index.js +1 -1
- package/dist/components/nav/index.cjs +1 -1
- package/dist/components/nav/index.js +42 -42
- package/dist/components/nav/index.js.map +1 -1
- package/dist/components/toggle/index.cjs +1 -1
- package/dist/components/toggle/index.cjs.map +1 -1
- package/dist/components/toggle/index.js +11 -20
- package/dist/components/toggle/index.js.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +27 -99
- package/dist/index.js +32 -38
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/assets/index25.css +0 -1
- package/dist/assets/index26.css +0 -1
- package/dist/assets/index27.css +0 -1
- package/dist/assets/styles.css +0 -1
- package/dist/components/component/index.cjs +0 -2
- package/dist/components/component/index.cjs.map +0 -1
- package/dist/components/component/index.js +0 -30
- package/dist/components/component/index.js.map +0 -1
- package/dist/components/document/index.cjs +0 -2
- package/dist/components/document/index.cjs.map +0 -1
- package/dist/components/document/index.js +0 -53
- package/dist/components/document/index.js.map +0 -1
- package/dist/components/grid/index.cjs +0 -2
- package/dist/components/grid/index.cjs.map +0 -1
- package/dist/components/grid/index.js +0 -140
- package/dist/components/grid/index.js.map +0 -1
- package/dist/components/loading/index.cjs +0 -2
- package/dist/components/loading/index.cjs.map +0 -1
- package/dist/components/loading/index.js +0 -99
- package/dist/components/loading/index.js.map +0 -1
- package/dist/components/picture/index.cjs +0 -2
- package/dist/components/picture/index.cjs.map +0 -1
- package/dist/components/picture/index.js +0 -150
- package/dist/components/picture/index.js.map +0 -1
- package/dist/styles.module-B_pXIacc.cjs +0 -2
- package/dist/styles.module-B_pXIacc.cjs.map +0 -1
- package/dist/styles.module-BhmNqlYd.js +0 -7
- package/dist/styles.module-BhmNqlYd.js.map +0 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,7 @@
|
|
|
1
|
-
import { default as default_2 } from 'react';
|
|
2
1
|
import { DetailedHTMLProps } from 'react';
|
|
3
|
-
import { DragEvent as DragEvent_2 } from 'react';
|
|
4
2
|
import { ForwardRefExoticComponent } from 'react';
|
|
5
3
|
import { InputHTMLAttributes } from 'react';
|
|
6
4
|
import { JSX } from 'react/jsx-runtime';
|
|
7
|
-
import { ReactNode } from 'react';
|
|
8
5
|
import { RefAttributes } from 'react';
|
|
9
6
|
|
|
10
7
|
export declare const Accordion: ({ children, icon, label, open }: AccordionProps) => JSX.Element;
|
|
@@ -36,7 +33,7 @@ declare type AsideProps = {
|
|
|
36
33
|
variant?: keyof typeof variants;
|
|
37
34
|
};
|
|
38
35
|
|
|
39
|
-
export declare const Banner: ({ button, message, onClick, onDismiss, visible
|
|
36
|
+
export declare const Banner: ({ button, message, onClick, onDismiss, visible }: BannerProps) => JSX.Element;
|
|
40
37
|
|
|
41
38
|
declare type BannerProps = {
|
|
42
39
|
button: string;
|
|
@@ -58,64 +55,39 @@ declare const brandingSVG: {
|
|
|
58
55
|
logo: string;
|
|
59
56
|
};
|
|
60
57
|
|
|
61
|
-
export declare const Button: ({ children, className, disabled,
|
|
58
|
+
export declare const Button: ({ children, className, disabled, onClick, variant, ...props }: ButtonProps) => JSX.Element;
|
|
62
59
|
|
|
63
60
|
declare type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
64
|
-
children
|
|
61
|
+
children: React.ReactNode;
|
|
65
62
|
className?: string;
|
|
66
63
|
disabled?: boolean;
|
|
67
|
-
icon?: IconName;
|
|
68
|
-
label?: string;
|
|
69
64
|
onClick?: React.MouseEventHandler<HTMLButtonElement>;
|
|
70
|
-
loading?: boolean;
|
|
71
|
-
title?: string;
|
|
72
|
-
type?: 'button' | 'submit' | 'reset';
|
|
73
65
|
variant?: keyof typeof variants_3;
|
|
74
66
|
};
|
|
75
67
|
|
|
76
|
-
export declare const Card: ({ children,
|
|
68
|
+
export declare const Card: ({ children, draft, image, onClick }: CardProps) => JSX.Element;
|
|
77
69
|
|
|
78
70
|
declare type CardProps = {
|
|
79
|
-
children
|
|
80
|
-
contentHtml?: string;
|
|
81
|
-
contentText?: string;
|
|
71
|
+
children: React.ReactNode;
|
|
82
72
|
draft?: boolean;
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
onClick?: () => void;
|
|
86
|
-
onDrop?: (event: DragEvent_2<HTMLElement>) => void;
|
|
87
|
-
subHeaderText?: string;
|
|
73
|
+
image?: React.ReactNode;
|
|
74
|
+
onClick?: React.MouseEventHandler<HTMLElement>;
|
|
88
75
|
};
|
|
89
76
|
|
|
90
|
-
export declare const Checkbox: ({
|
|
77
|
+
export declare const Checkbox: ({ checked, disabled, isLoading, label, onChange, ...props }: CheckboxProps) => JSX.Element;
|
|
91
78
|
|
|
92
79
|
declare type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
isDisabled?: boolean;
|
|
80
|
+
checked?: boolean;
|
|
81
|
+
disabled?: boolean;
|
|
96
82
|
isLoading?: boolean;
|
|
97
83
|
label?: string;
|
|
98
84
|
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
99
85
|
};
|
|
100
86
|
|
|
101
|
-
export declare const Dialog: ({
|
|
87
|
+
export declare const Dialog: ({ children, ...props }: DialogProps) => JSX.Element;
|
|
102
88
|
|
|
103
89
|
declare type DialogProps = React.DialogHTMLAttributes<HTMLDialogElement> & {
|
|
104
|
-
|
|
105
|
-
children?: React.ReactNode;
|
|
106
|
-
message?: string;
|
|
107
|
-
title?: string;
|
|
108
|
-
};
|
|
109
|
-
|
|
110
|
-
declare type DivProps = Omit<default_2.HTMLAttributes<HTMLDivElement>, 'children'>;
|
|
111
|
-
|
|
112
|
-
declare const Document_2: ({ name, onClick, onDelete }: DocumentProps) => JSX.Element;
|
|
113
|
-
export { Document_2 as Document }
|
|
114
|
-
|
|
115
|
-
declare type DocumentProps = {
|
|
116
|
-
name: string;
|
|
117
|
-
onClick?: () => void;
|
|
118
|
-
onDelete?: () => void;
|
|
90
|
+
children: React.ReactNode;
|
|
119
91
|
};
|
|
120
92
|
|
|
121
93
|
export declare const Dropdown: ({ children, inline, label, placeholder, ...props }: DropdownProps) => JSX.Element;
|
|
@@ -156,6 +128,14 @@ declare type FigureProps = {
|
|
|
156
128
|
label?: string;
|
|
157
129
|
};
|
|
158
130
|
|
|
131
|
+
declare const File_2: ({ name, url }: FileProps) => JSX.Element;
|
|
132
|
+
export { File_2 as File }
|
|
133
|
+
|
|
134
|
+
declare type FileProps = {
|
|
135
|
+
name: string;
|
|
136
|
+
url: string;
|
|
137
|
+
};
|
|
138
|
+
|
|
159
139
|
export declare const Footer: ({ children, ...props }: FooterProps) => JSX.Element;
|
|
160
140
|
|
|
161
141
|
declare type FooterProps = {
|
|
@@ -170,23 +150,6 @@ declare type FormProps = React.FormHTMLAttributes<HTMLFormElement> & {
|
|
|
170
150
|
inline?: boolean;
|
|
171
151
|
};
|
|
172
152
|
|
|
173
|
-
export declare const Grid: ({ canRearrange, className, columns, items, onRearrange, ...props }: GridProps) => JSX.Element;
|
|
174
|
-
|
|
175
|
-
declare type GridItem = {
|
|
176
|
-
component: default_2.ReactNode;
|
|
177
|
-
id: number;
|
|
178
|
-
};
|
|
179
|
-
|
|
180
|
-
declare type GridProps = DivProps & {
|
|
181
|
-
canRearrange?: boolean;
|
|
182
|
-
columns?: number;
|
|
183
|
-
items: GridItem[];
|
|
184
|
-
onRearrange?: (items: Array<{
|
|
185
|
-
id: number;
|
|
186
|
-
index: number;
|
|
187
|
-
}>) => void;
|
|
188
|
-
};
|
|
189
|
-
|
|
190
153
|
export declare const Header: ({ children, size, label, ...props }: HeaderProps) => JSX.Element;
|
|
191
154
|
|
|
192
155
|
declare type HeaderProps = {
|
|
@@ -197,7 +160,7 @@ declare type HeaderProps = {
|
|
|
197
160
|
subHeader?: string;
|
|
198
161
|
};
|
|
199
162
|
|
|
200
|
-
export declare const Icon: ({ name, size, variant
|
|
163
|
+
export declare const Icon: ({ name, size, variant }: IconProps) => JSX.Element;
|
|
201
164
|
|
|
202
165
|
declare type IconName = keyof typeof iconPaths;
|
|
203
166
|
|
|
@@ -231,22 +194,6 @@ declare type IconProps = {
|
|
|
231
194
|
loading?: boolean;
|
|
232
195
|
};
|
|
233
196
|
|
|
234
|
-
declare type ImageProps = {
|
|
235
|
-
alt: string;
|
|
236
|
-
canEdit: boolean;
|
|
237
|
-
caption?: string;
|
|
238
|
-
handleUpload?: (imageFile: File) => void;
|
|
239
|
-
inputId?: string;
|
|
240
|
-
isUploading?: boolean;
|
|
241
|
-
minimumImagePixelHeight?: number;
|
|
242
|
-
minimumImagePixelWidth?: number;
|
|
243
|
-
placeholderSrc?: string;
|
|
244
|
-
sizes?: string;
|
|
245
|
-
source?: string;
|
|
246
|
-
srcSet?: string;
|
|
247
|
-
variant?: keyof typeof variants_6;
|
|
248
|
-
};
|
|
249
|
-
|
|
250
197
|
export declare const Input: ForwardRefExoticComponent<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
|
|
251
198
|
disabled?: boolean;
|
|
252
199
|
label?: string;
|
|
@@ -289,26 +236,17 @@ declare type NavProps = {
|
|
|
289
236
|
variant?: keyof typeof variants_5;
|
|
290
237
|
};
|
|
291
238
|
|
|
292
|
-
export declare const PageLoader: ({ size }: PageLoaderProps) => JSX.Element;
|
|
293
|
-
|
|
294
|
-
declare type PageLoaderProps = {
|
|
295
|
-
size?: number;
|
|
296
|
-
};
|
|
297
|
-
|
|
298
|
-
export declare const Picture: ({ source, alt, variant, ...props }: ImageProps) => JSX.Element;
|
|
299
|
-
|
|
300
239
|
declare const sizes: {
|
|
301
240
|
large: string;
|
|
302
241
|
medium: string;
|
|
303
242
|
small: string;
|
|
304
243
|
};
|
|
305
244
|
|
|
306
|
-
export declare const Toggle: ({
|
|
245
|
+
export declare const Toggle: ({ checked, disabled, isLoading, label, onChange }: ToggleProps) => JSX.Element;
|
|
307
246
|
|
|
308
247
|
declare type ToggleProps = {
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
isDisabled?: boolean;
|
|
248
|
+
checked?: boolean;
|
|
249
|
+
disabled?: boolean;
|
|
312
250
|
isLoading?: boolean;
|
|
313
251
|
label?: string;
|
|
314
252
|
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
@@ -316,8 +254,8 @@ declare type ToggleProps = {
|
|
|
316
254
|
|
|
317
255
|
declare const variants: {
|
|
318
256
|
default: string;
|
|
319
|
-
|
|
320
|
-
|
|
257
|
+
nav: string;
|
|
258
|
+
meta: string;
|
|
321
259
|
};
|
|
322
260
|
|
|
323
261
|
declare const variants_2: {
|
|
@@ -328,18 +266,13 @@ declare const variants_2: {
|
|
|
328
266
|
|
|
329
267
|
declare const variants_3: {
|
|
330
268
|
default: string;
|
|
331
|
-
destructive: string;
|
|
332
269
|
minimal: string;
|
|
333
270
|
primary: string;
|
|
334
|
-
secondary: string;
|
|
335
|
-
white: string;
|
|
336
271
|
};
|
|
337
272
|
|
|
338
273
|
declare const variants_4: {
|
|
339
|
-
clickable: string;
|
|
340
274
|
default: string;
|
|
341
|
-
|
|
342
|
-
dialog: string;
|
|
275
|
+
primary: string;
|
|
343
276
|
white: string;
|
|
344
277
|
};
|
|
345
278
|
|
|
@@ -349,9 +282,4 @@ declare const variants_5: {
|
|
|
349
282
|
tabs: string;
|
|
350
283
|
};
|
|
351
284
|
|
|
352
|
-
declare const variants_6: {
|
|
353
|
-
default: string;
|
|
354
|
-
profile: string;
|
|
355
|
-
};
|
|
356
|
-
|
|
357
285
|
export { }
|
package/dist/index.js
CHANGED
|
@@ -3,27 +3,24 @@ import { Aside as m } from "./components/aside/index.js";
|
|
|
3
3
|
import { Banner as f } from "./components/banner/index.js";
|
|
4
4
|
import { Branding as i } from "./components/branding/index.js";
|
|
5
5
|
import { Button as a } from "./components/button/index.js";
|
|
6
|
-
import { Card as
|
|
7
|
-
import { Checkbox as
|
|
6
|
+
import { Card as g } from "./components/card/index.js";
|
|
7
|
+
import { Checkbox as F } from "./components/checkbox/index.js";
|
|
8
8
|
import { Dialog as A } from "./components/dialog/index.js";
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import { Editor as I } from "./components/editor/index.js";
|
|
9
|
+
import { Dropdown as D } from "./components/dropdown/index.js";
|
|
10
|
+
import { Dropzone as k } from "./components/dropzone/index.js";
|
|
11
|
+
import { Editor as C } from "./components/editor/index.js";
|
|
13
12
|
import { Figure as b } from "./components/figure/index.js";
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import { Header as
|
|
18
|
-
import { Icon as
|
|
19
|
-
import { Input as
|
|
20
|
-
import { Layout as
|
|
21
|
-
import { Link as
|
|
22
|
-
import { List as
|
|
23
|
-
import { Nav as
|
|
24
|
-
import {
|
|
25
|
-
import { Picture as Z } from "./components/picture/index.js";
|
|
26
|
-
import { Toggle as $ } from "./components/toggle/index.js";
|
|
13
|
+
import { File as v } from "./components/file/index.js";
|
|
14
|
+
import { Footer as y } from "./components/footer/index.js";
|
|
15
|
+
import { Form as E } from "./components/form/index.js";
|
|
16
|
+
import { Header as H } from "./components/header/index.js";
|
|
17
|
+
import { Icon as T } from "./components/icon/index.js";
|
|
18
|
+
import { Input as q } from "./components/input/index.js";
|
|
19
|
+
import { Layout as K } from "./components/layout/index.js";
|
|
20
|
+
import { Link as O } from "./components/link/index.js";
|
|
21
|
+
import { List as Q } from "./components/list/index.js";
|
|
22
|
+
import { Nav as S } from "./components/nav/index.js";
|
|
23
|
+
import { Toggle as V } from "./components/toggle/index.js";
|
|
27
24
|
import './assets/index.css';export {
|
|
28
25
|
e as Accordion,
|
|
29
26
|
t as AccordionGroup,
|
|
@@ -31,26 +28,23 @@ import './assets/index.css';export {
|
|
|
31
28
|
f as Banner,
|
|
32
29
|
i as Branding,
|
|
33
30
|
a as Button,
|
|
34
|
-
|
|
35
|
-
|
|
31
|
+
g as Card,
|
|
32
|
+
F as Checkbox,
|
|
36
33
|
A as Dialog,
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
C as
|
|
40
|
-
I as Editor,
|
|
34
|
+
D as Dropdown,
|
|
35
|
+
k as Dropzone,
|
|
36
|
+
C as Editor,
|
|
41
37
|
b as Figure,
|
|
42
|
-
v as
|
|
43
|
-
y as
|
|
44
|
-
E as
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
Z as Picture,
|
|
54
|
-
$ as Toggle
|
|
38
|
+
v as File,
|
|
39
|
+
y as Footer,
|
|
40
|
+
E as Form,
|
|
41
|
+
H as Header,
|
|
42
|
+
T as Icon,
|
|
43
|
+
q as Input,
|
|
44
|
+
K as Layout,
|
|
45
|
+
O as Link,
|
|
46
|
+
Q as List,
|
|
47
|
+
S as Nav,
|
|
48
|
+
V as Toggle
|
|
55
49
|
};
|
|
56
50
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
package/dist/assets/index25.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
._aside_16h63_1{background-color:var(--color-white)}._right_16h63_5{height:100vh;padding:var(--unit);width:100%}._right_16h63_5 figure{height:400px;left:calc(-2 * var(--unit));position:absolute;width:336px}._right_16h63_5 figure img{border-radius:var(--border-radius)}._sticky_16h63_22{position:-webkit-sticky;position:sticky;top:0}._site-wide_16h63_27{background:var(--gradient-green);border-radius:var(--border-radius);margin:var(--unit);overflow-y:auto;padding:var(--unit);padding-top:var(--unit-large);position:relative;transition:all var(--transition-duration)}._site-wide_16h63_27 figure{display:flex;justify-self:center}._site-wide_16h63_27 figure figcaption{display:none}._site-wide_16h63_27 footer{bottom:var(--unit);position:absolute}._site-wide_16h63_27 nav{flex:1 1 auto;padding-bottom:var(--unit-large)}._site-wide_16h63_27 nav a,._site-wide_16h63_27 nav summary{color:var(--color-white);padding:var(--unit-small) 0;text-decoration:none;font-weight:var(--font-weight-normal)}._site-wide_16h63_27 nav a span,._site-wide_16h63_27 nav summary span{background-color:var(--color-white);margin-bottom:var(--unit-tiny);margin-right:var(--unit-small)}._site-wide_16h63_27 nav a[aria-current=page],._site-wide_16h63_27 nav summary[aria-current=page]{font-weight:var(--font-weight-bold)}._site-wide_16h63_27 nav details a{margin-left:var(--unit);padding-left:var(--unit);position:relative;width:100%}._site-wide_16h63_27 nav details a:before{background-color:var(--color-white);border-radius:4px;content:"";display:inline-block;height:100%;left:calc(-1 * var(--unit-tiny) - 1px);position:absolute;top:0;transition:width var(--transition-duration);width:2px}._site-wide_16h63_27 nav details a[aria-current=page]:before{left:calc(-1 * var(--unit-tiny) - 2px);width:4px}._site-wide_16h63_27 nav details a:hover{color:var(--color-white)}._site-wide_16h63_27 nav details a:last-child{margin-bottom:var(--unit)}._site-wide_16h63_27 nav[data-orientation=horizontal]{align-items:center;display:flex;justify-self:center;padding-bottom:var(--unit-large)}._site-wide_16h63_27 nav[data-orientation=horizontal] a{font-size:var(--font-size-small);padding:var(--unit) var(--unit-small);transition:all}._site-wide_16h63_27 nav[data-orientation=horizontal] a[data-active]{border-bottom:solid 2px var(--color-white);font-size:var(--font-size)}._site-wide_16h63_27 nav[data-orientation=horizontal] a:hover{color:var(--color-white);text-decoration:none}@media all and (width <= 550px){._portal_16h63_135{animation:calc(var(--transition-duration) * 2) ease-out 0ms 1 _portal-slide-in_16h63_1;border-top-left-radius:0;border-bottom-left-radius:0;margin:0}}@keyframes _portal-slide-in_16h63_1{0%{opacity:0;scale:.9;transform:translate(-100%)}to{opacity:1;scale:1;transform:translate(0)}}
|
package/dist/assets/index26.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
._accordion_g1krd_1 details>:not(summary){max-height:0;opacity:0;transition:max-height var(--transition-duration) var(--transition-function),opacity var(--transition-duration) var(--transition-function)}._accordion_g1krd_1 details[open]>*{max-height:100vh;opacity:1}._accordion_g1krd_1 summary{cursor:pointer;list-style:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}._accordion_g1krd_1 summary::marker{display:none}
|
package/dist/assets/index27.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
._icon_d115m_1{display:inline-block;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;vertical-align:middle}._small_d115m_8{height:var(--unit);width:var(--unit)}._medium_d115m_13{height:calc(var(--unit) * 1.5);width:calc(var(--unit) * 1.5)}._large_d115m_18{height:calc(var(--unit) * 2);width:calc(var(--unit) * 2)}._default_d115m_23{background-color:var(--color-icon)}._clickable_d115m_27{background-color:var(--color-primary)}._deletable_d115m_31{background-color:var(--color-text-error)}._dialog_d115m_35{background-color:var(--color-green)}._white_d115m_39{background-color:var(--color-white)}._wrapper_d115m_43{--size-dialog: calc(var(--unit) * 5)}._wrapper_d115m_43:has(>._dialog_d115m_35){align-content:center;background-color:var(--color-green-light);border-radius:var(--size-dialog);display:inline-block;height:var(--size-dialog);text-align:center;width:var(--size-dialog)}._wrapper_d115m_43 ._dialog_d115m_35{height:calc(var(--unit) * 3);width:calc(var(--unit) * 3)}
|
package/dist/assets/styles.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
._spinner_gsv2s_1{color:#0000!important;position:relative}._spinner_gsv2s_1:before{animation:_spin_gsv2s_1 .8s linear infinite;aspect-ratio:1 / 1;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAxMjAgMTIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPGRlZnM+CiAgICAgICAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkWSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgICAgICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoOTAgMzUgMjQ1KSIvPgogICAgICAgICAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0icmdiKDI1NSAyNTUgMjU1KSIvPgogICAgICAgICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYig5MCAzNSAyNDUpIi8+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KCiAgICAgICAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkWCIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgICAgICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1IDI1NSAyNTUpIiBzdG9wLW9wYWNpdHk9IjAuNiIvPgogICAgICAgICAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0icmdiKDkwIDM1IDI0NSkiIHN0b3Atb3BhY2l0eT0iMC4yIi8+CiAgICAgICAgICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDI1NSAyNTUgMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjYiLz4KICAgICAgICA8L2xpbmVhckdyYWRpZW50PgoKICAgICAgICA8ZmlsdGVyIGlkPSJibGVuZCI+CiAgICAgICAgICAgIDxmZUltYWdlIGhyZWY9IiNncmFkWSIgcmVzdWx0PSJncmFkWSIvPgogICAgICAgICAgICA8ZmVJbWFnZSBocmVmPSIjZ3JhZFgiIHJlc3VsdD0iZ3JhZFgiLz4KICAgICAgICAgICAgPGZlQmxlbmQgaW49ImdyYWRZIiBpbjI9ImdyYWRYIiBtb2RlPSJvdmVybGF5Ii8+CiAgICAgICAgPC9maWx0ZXI+CgogICAgICAgIDxtYXNrIGlkPSJyaW5nTWFzayI+CiAgICAgICAgICAgIDxjaXJjbGUgY3g9IjYwIiBjeT0iNjAiIHI9IjYwIiBmaWxsPSJ3aGl0ZSIvPgogICAgICAgICAgICA8Y2lyY2xlIGN4PSI2MCIgY3k9IjYwIiByPSIzNSIgZmlsbD0iYmxhY2siLz4KICAgICAgICA8L21hc2s+CiAgICA8L2RlZnM+CgogICAgPGNpcmNsZQogICAgICAgICAgICBjeD0iNjAiIGN5PSI2MCIgcj0iNTAiCiAgICAgICAgICAgIHN0cm9rZT0idXJsKCNncmFkWSkiCiAgICAgICAgICAgIHN0cm9rZS13aWR0aD0iMTUiCiAgICAgICAgICAgIGZpbGw9Im5vbmUiCiAgICAgICAgICAgIG1hc2s9InVybCgjcmluZ01hc2spIgogICAgLz4KICAgIDxjaXJjbGUKICAgICAgICAgICAgY3g9IjYwIiBjeT0iNjAiIHI9IjUwIgogICAgICAgICAgICBzdHJva2U9InVybCgjZ3JhZFgpIgogICAgICAgICAgICBzdHJva2Utd2lkdGg9IjE1IgogICAgICAgICAgICBmaWxsPSJub25lIgogICAgICAgICAgICBtYXNrPSJ1cmwoI3JpbmdNYXNrKSIKICAgICAgICAgICAgb3BhY2l0eT0iMC42IgogICAgLz4KPC9zdmc+);background-position:center;background-repeat:no-repeat;background-size:contain;content:"";height:100%;top:0;right:0;bottom:0;left:0;min-height:var(--unit);min-width:var(--unit);opacity:1;position:absolute;width:100%}@keyframes _spin_gsv2s_1{to{transform:rotate(360deg)}}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index18.css');const e=require("react/jsx-runtime"),n=require("../icon/index.cjs"),i="_component_l8zgx_1",t={component:i},s=({...o})=>e.jsx("div",{className:t.component,...o,children:e.jsxs("article",{children:[e.jsx("h1",{children:"Hello world"}),e.jsxs("p",{children:["Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad doloribus odio, aperiam enim provident voluptates, eos illum, error nihil amet iste necessitatibus ab unde accusantium in. ",e.jsx("b",{children:"Explicabo quod eius numquam?"})]}),e.jsx("a",{href:"/?path=/docs/introduction--docs",children:e.jsx(n.Icon,{name:"home",variant:"dialog"})}),e.jsx("p",{children:"Feel free to copy this folder to have a bare minimum component."})]})});exports.Component=s;
|
|
2
|
-
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/component/index.tsx"],"sourcesContent":["import { Icon } from '../icon';\nimport styles from './styles.module.css';\n\nexport const Component = ({ ...props }) => {\n return (\n <div\n className={styles.component}\n {...props}\n >\n <article>\n <h1>Hello world</h1>\n\n <p>\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad doloribus odio, aperiam enim\n provident voluptates, eos illum, error nihil amet iste necessitatibus ab unde accusantium\n in. <b>Explicabo quod eius numquam?</b>\n </p>\n\n <a href='/?path=/docs/introduction--docs'>\n <Icon\n name='home'\n variant='dialog'\n />\n </a>\n\n <p>Feel free to copy this folder to have a bare minimum component.</p>\n </article>\n </div>\n );\n};\n"],"names":["Component","props","jsx","styles","Icon"],"mappings":"2LAGaA,EAAY,CAAC,CAAE,GAAGC,KAE3BC,EAAAA,IAAC,MAAA,CACC,UAAWC,EAAO,UACjB,GAAGF,EAEJ,gBAAC,UAAA,CACC,SAAA,CAAAC,EAAAA,IAAC,MAAG,SAAA,aAAA,CAAW,SAEd,IAAA,CAAE,SAAA,CAAA,0LAGGA,EAAAA,IAAC,KAAE,SAAA,8BAAA,CAA4B,CAAA,EACrC,EAEAA,EAAAA,IAAC,IAAA,CAAE,KAAK,kCACN,SAAAA,EAAAA,IAACE,EAAAA,KAAA,CACC,KAAK,OACL,QAAQ,QAAA,CAAA,EAEZ,EAEAF,EAAAA,IAAC,KAAE,SAAA,iEAAA,CAA+D,CAAA,CAAA,CACpE,CAAA,CAAA"}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { jsx as o, jsxs as e } from "react/jsx-runtime";
|
|
2
|
-
import { Icon as n } from "../icon/index.js";
|
|
3
|
-
import '../../assets/index18.css';const t = "_component_l8zgx_1", r = {
|
|
4
|
-
component: t
|
|
5
|
-
}, s = ({ ...i }) => /* @__PURE__ */ o(
|
|
6
|
-
"div",
|
|
7
|
-
{
|
|
8
|
-
className: r.component,
|
|
9
|
-
...i,
|
|
10
|
-
children: /* @__PURE__ */ e("article", { children: [
|
|
11
|
-
/* @__PURE__ */ o("h1", { children: "Hello world" }),
|
|
12
|
-
/* @__PURE__ */ e("p", { children: [
|
|
13
|
-
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad doloribus odio, aperiam enim provident voluptates, eos illum, error nihil amet iste necessitatibus ab unde accusantium in. ",
|
|
14
|
-
/* @__PURE__ */ o("b", { children: "Explicabo quod eius numquam?" })
|
|
15
|
-
] }),
|
|
16
|
-
/* @__PURE__ */ o("a", { href: "/?path=/docs/introduction--docs", children: /* @__PURE__ */ o(
|
|
17
|
-
n,
|
|
18
|
-
{
|
|
19
|
-
name: "home",
|
|
20
|
-
variant: "dialog"
|
|
21
|
-
}
|
|
22
|
-
) }),
|
|
23
|
-
/* @__PURE__ */ o("p", { children: "Feel free to copy this folder to have a bare minimum component." })
|
|
24
|
-
] })
|
|
25
|
-
}
|
|
26
|
-
);
|
|
27
|
-
export {
|
|
28
|
-
s as Component
|
|
29
|
-
};
|
|
30
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/component/index.tsx"],"sourcesContent":["import { Icon } from '../icon';\nimport styles from './styles.module.css';\n\nexport const Component = ({ ...props }) => {\n return (\n <div\n className={styles.component}\n {...props}\n >\n <article>\n <h1>Hello world</h1>\n\n <p>\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad doloribus odio, aperiam enim\n provident voluptates, eos illum, error nihil amet iste necessitatibus ab unde accusantium\n in. <b>Explicabo quod eius numquam?</b>\n </p>\n\n <a href='/?path=/docs/introduction--docs'>\n <Icon\n name='home'\n variant='dialog'\n />\n </a>\n\n <p>Feel free to copy this folder to have a bare minimum component.</p>\n </article>\n </div>\n );\n};\n"],"names":["Component","props","jsx","styles","Icon"],"mappings":";;;;GAGaA,IAAY,CAAC,EAAE,GAAGC,QAE3B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAO;AAAA,IACjB,GAAGF;AAAA,IAEJ,4BAAC,WAAA,EACC,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAG,UAAA,cAAA,CAAW;AAAA,wBAEd,KAAA,EAAE,UAAA;AAAA,QAAA;AAAA,QAGG,gBAAAA,EAAC,OAAE,UAAA,+BAAA,CAA4B;AAAA,MAAA,GACrC;AAAA,MAEA,gBAAAA,EAAC,KAAA,EAAE,MAAK,mCACN,UAAA,gBAAAA;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,QAAA;AAAA,MAAA,GAEZ;AAAA,MAEA,gBAAAF,EAAC,OAAE,UAAA,kEAAA,CAA+D;AAAA,IAAA,EAAA,CACpE;AAAA,EAAA;AAAA;"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index16.css');const e=require("react/jsx-runtime"),s=require("../button/index.cjs"),r=require("../header/index.cjs"),t=require("../icon/index.cjs"),m="_document_5rt2n_1",u={document:m},a=({name:o,onClick:c,onDelete:n})=>e.jsxs("article",{onClick:c,className:u.document,children:[e.jsxs("section",{children:[e.jsx(t.Icon,{name:"document",size:"medium"}),e.jsx(r.Header,{label:o,size:3})]}),e.jsx(s.Button,{variant:"minimal",onClick:n?i=>{i.stopPropagation(),n()}:void 0,"aria-label":n?"Delete document":"Open document",children:e.jsx(t.Icon,{name:n?"x":"toDocument",size:"medium",variant:n?"deletable":"clickable"})})]});exports.Document=a;
|
|
2
|
-
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/document/index.tsx"],"sourcesContent":["import { Button } from '@/components/button';\nimport { Header } from '@/components/header';\nimport { Icon } from '@/components/icon';\n\nimport styles from './styles.module.css';\n\nexport type DocumentProps = {\n name: string;\n onClick?: () => void;\n onDelete?: () => void;\n};\n\nexport const Document = ({ name, onClick, onDelete }: DocumentProps) => {\n return (\n <article\n onClick={onClick}\n className={styles.document}\n >\n <section>\n <Icon\n name={'document'}\n size={'medium'}\n />\n <Header\n label={name}\n size={3}\n />\n </section>\n <Button\n variant={'minimal'}\n onClick={\n onDelete\n ? (e) => {\n e.stopPropagation();\n onDelete();\n }\n : undefined\n }\n aria-label={onDelete ? 'Delete document' : 'Open document'}\n >\n <Icon\n name={onDelete ? 'x' : 'toDocument'}\n size={'medium'}\n variant={onDelete ? 'deletable' : 'clickable'}\n />\n </Button>\n </article>\n );\n};\n"],"names":["Document","name","onClick","onDelete","jsxs","styles","jsx","Icon","Header","Button","e"],"mappings":"2PAYaA,EAAW,CAAC,CAAE,KAAAC,EAAM,QAAAC,EAAS,SAAAC,KAEtCC,EAAAA,KAAC,UAAA,CACC,QAAAF,EACA,UAAWG,EAAO,SAElB,SAAA,CAAAD,OAAC,UAAA,CACC,SAAA,CAAAE,EAAAA,IAACC,EAAAA,KAAA,CACC,KAAM,WACN,KAAM,QAAA,CAAA,EAERD,EAAAA,IAACE,EAAAA,OAAA,CACC,MAAOP,EACP,KAAM,CAAA,CAAA,CACR,EACF,EACAK,EAAAA,IAACG,EAAAA,OAAA,CACC,QAAS,UACT,QACEN,EACKO,GAAM,CACLA,EAAE,gBAAA,EACFP,EAAA,CACF,EACA,OAEN,aAAYA,EAAW,kBAAoB,gBAE3C,SAAAG,EAAAA,IAACC,EAAAA,KAAA,CACC,KAAMJ,EAAW,IAAM,aACvB,KAAM,SACN,QAASA,EAAW,YAAc,WAAA,CAAA,CACpC,CAAA,CACF,CAAA,CAAA"}
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import { jsxs as o, jsx as m } from "react/jsx-runtime";
|
|
2
|
-
import { Button as r } from "../button/index.js";
|
|
3
|
-
import { Header as a } from "../header/index.js";
|
|
4
|
-
import { Icon as e } from "../icon/index.js";
|
|
5
|
-
import '../../assets/index16.css';const d = "_document_5rt2n_1", s = {
|
|
6
|
-
document: d
|
|
7
|
-
}, f = ({ name: n, onClick: i, onDelete: t }) => /* @__PURE__ */ o(
|
|
8
|
-
"article",
|
|
9
|
-
{
|
|
10
|
-
onClick: i,
|
|
11
|
-
className: s.document,
|
|
12
|
-
children: [
|
|
13
|
-
/* @__PURE__ */ o("section", { children: [
|
|
14
|
-
/* @__PURE__ */ m(
|
|
15
|
-
e,
|
|
16
|
-
{
|
|
17
|
-
name: "document",
|
|
18
|
-
size: "medium"
|
|
19
|
-
}
|
|
20
|
-
),
|
|
21
|
-
/* @__PURE__ */ m(
|
|
22
|
-
a,
|
|
23
|
-
{
|
|
24
|
-
label: n,
|
|
25
|
-
size: 3
|
|
26
|
-
}
|
|
27
|
-
)
|
|
28
|
-
] }),
|
|
29
|
-
/* @__PURE__ */ m(
|
|
30
|
-
r,
|
|
31
|
-
{
|
|
32
|
-
variant: "minimal",
|
|
33
|
-
onClick: t ? (c) => {
|
|
34
|
-
c.stopPropagation(), t();
|
|
35
|
-
} : void 0,
|
|
36
|
-
"aria-label": t ? "Delete document" : "Open document",
|
|
37
|
-
children: /* @__PURE__ */ m(
|
|
38
|
-
e,
|
|
39
|
-
{
|
|
40
|
-
name: t ? "x" : "toDocument",
|
|
41
|
-
size: "medium",
|
|
42
|
-
variant: t ? "deletable" : "clickable"
|
|
43
|
-
}
|
|
44
|
-
)
|
|
45
|
-
}
|
|
46
|
-
)
|
|
47
|
-
]
|
|
48
|
-
}
|
|
49
|
-
);
|
|
50
|
-
export {
|
|
51
|
-
f as Document
|
|
52
|
-
};
|
|
53
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/document/index.tsx"],"sourcesContent":["import { Button } from '@/components/button';\nimport { Header } from '@/components/header';\nimport { Icon } from '@/components/icon';\n\nimport styles from './styles.module.css';\n\nexport type DocumentProps = {\n name: string;\n onClick?: () => void;\n onDelete?: () => void;\n};\n\nexport const Document = ({ name, onClick, onDelete }: DocumentProps) => {\n return (\n <article\n onClick={onClick}\n className={styles.document}\n >\n <section>\n <Icon\n name={'document'}\n size={'medium'}\n />\n <Header\n label={name}\n size={3}\n />\n </section>\n <Button\n variant={'minimal'}\n onClick={\n onDelete\n ? (e) => {\n e.stopPropagation();\n onDelete();\n }\n : undefined\n }\n aria-label={onDelete ? 'Delete document' : 'Open document'}\n >\n <Icon\n name={onDelete ? 'x' : 'toDocument'}\n size={'medium'}\n variant={onDelete ? 'deletable' : 'clickable'}\n />\n </Button>\n </article>\n );\n};\n"],"names":["Document","name","onClick","onDelete","jsxs","styles","jsx","Icon","Header","Button","e"],"mappings":";;;;;;GAYaA,IAAW,CAAC,EAAE,MAAAC,GAAM,SAAAC,GAAS,UAAAC,QAEtC,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,SAAAF;AAAA,IACA,WAAWG,EAAO;AAAA,IAElB,UAAA;AAAA,MAAA,gBAAAD,EAAC,WAAA,EACC,UAAA;AAAA,QAAA,gBAAAE;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAER,gBAAAD;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,OAAOP;AAAA,YACP,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MACR,GACF;AAAA,MACA,gBAAAK;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,SACEN,IACI,CAACO,MAAM;AACL,YAAAA,EAAE,gBAAA,GACFP,EAAA;AAAA,UACF,IACA;AAAA,UAEN,cAAYA,IAAW,oBAAoB;AAAA,UAE3C,UAAA,gBAAAG;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,MAAMJ,IAAW,MAAM;AAAA,cACvB,MAAM;AAAA,cACN,SAASA,IAAW,cAAc;AAAA,YAAA;AAAA,UAAA;AAAA,QACpC;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAAA;"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index8.css');const i=require("react/jsx-runtime"),g=require("../../classix-5H4IWnMA.cjs"),c=require("react"),D=require("../button/index.cjs"),S="_grid_1x08g_1",q="_items_1x08g_8",E="_controls_1x08g_19",O="_item_1x08g_8",d={grid:S,items:q,"item-container":"_item-container_1x08g_14",controls:E,"active-controls":"_active-controls_1x08g_27",item:O,"arrow-button-up":"_arrow-button-up_1x08g_59"},I=({canRearrange:o=!1,className:j,columns:p,items:a=[],onRearrange:r,...C})=>{const[b,h]=c.useState(a),m=c.useRef(null),v=c.useRef(null);c.useEffect(()=>{const t=a.map(n=>n.id),e=v.current;e&&e.length===t.length&&e.every((n,s)=>n===t[s])||(v.current=t,h(a))},[a]);const k=c.useCallback(t=>e=>{!o||!e.dataTransfer||(m.current=t,e.dataTransfer.effectAllowed="move")},[o]),w=c.useCallback(t=>{!o||!t.dataTransfer||(t.preventDefault(),t.dataTransfer.dropEffect="move")},[o]),y=c.useCallback(t=>e=>{if(!o)return;e.preventDefault();const n=m.current;n===null||n===t||(h(s=>{if(n<0||n>=s.length||t<0||t>s.length)return s;const l=[...s],[u]=l.splice(n,1);if(!u)return s;const f=Math.max(0,Math.min(t,l.length)),_=n<t?Math.min(f,l.length):f;return l.splice(_,0,u),r==null||r(l.map((T,N)=>({id:T.id,index:N}))),l}),m.current=null)},[o,r]),M=c.useCallback(()=>m.current=null,[]),x=c.useCallback((t,e)=>{h(n=>{const s=e==="up"?t-1:t+1;if(s<0||s>=n.length)return n;const l=[...n],[u]=l.splice(t,1);return u?(l.splice(s,0,u),r==null||r(l.map((f,_)=>({id:f.id,index:_}))),l):n})},[r]);return i.jsx("div",{className:g.t(d.grid,j),...C,children:i.jsx("div",{className:d.items,style:p?{gridTemplateColumns:`repeat(${p}, 1fr)`}:{},children:b.map((t,e)=>i.jsxs("div",{className:d["item-container"],children:[i.jsx("div",{className:d.item,"data-grid-id":t.id,draggable:o,onDragEnd:M,onDragOver:w,onDragStart:k(e),onDrop:y(e),children:t.component}),i.jsxs("div",{className:g.t(d.controls,o&&d["active-controls"]),children:[e>0&&i.jsx(D.Button,{"aria-label":"Move item up",variant:"minimal",className:d["arrow-button-up"],"data-direction":"up",type:"button",icon:"chevron",onClick:()=>x(e,"up")}),e<b.length-1&&i.jsx(D.Button,{"aria-label":"Move item down",variant:"minimal","data-direction":"down",type:"button",icon:"chevron",onClick:()=>x(e,"down")})]})]},t.id))})})};exports.Grid=I;
|
|
2
|
-
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/grid/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { Button } from '@/components/button';\n\nimport styles from './styles.module.css';\n\nexport type GridItem = {\n component: React.ReactNode;\n id: number;\n};\n\ntype DivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;\n\nexport type GridProps = DivProps & {\n canRearrange?: boolean;\n columns?: number;\n items: GridItem[];\n onRearrange?: (items: Array<{ id: number; index: number }>) => void;\n};\n\nexport const Grid = ({\n canRearrange = false,\n className,\n columns,\n items = [],\n onRearrange,\n ...props\n}: GridProps) => {\n const [orderedItems, setOrderedItems] = useState<GridItem[]>(items);\n const dragIndexRef = useRef<number | null>(null);\n const previousItemIdsRef = useRef<number[]>(null);\n\n useEffect(() => {\n const nextItemIds = items.map((item) => item.id);\n const previousItemIds = previousItemIdsRef.current;\n\n if (\n previousItemIds &&\n previousItemIds.length === nextItemIds.length &&\n previousItemIds.every((id, index) => id === nextItemIds[index])\n ) {\n return;\n }\n\n previousItemIdsRef.current = nextItemIds;\n setOrderedItems(items);\n }, [items]);\n\n const handleDragStart = useCallback(\n (index: number) => (event: React.DragEvent<HTMLDivElement>) => {\n if (!canRearrange || !event.dataTransfer) {\n return;\n }\n\n dragIndexRef.current = index;\n event.dataTransfer.effectAllowed = 'move';\n },\n [canRearrange]\n );\n\n const handleDragOver = useCallback(\n (event: React.DragEvent<HTMLDivElement>) => {\n if (!canRearrange || !event.dataTransfer) {\n return;\n }\n\n event.preventDefault();\n event.dataTransfer.dropEffect = 'move';\n },\n [canRearrange]\n );\n\n const handleDrop = useCallback(\n (targetIndex: number) => (event: React.DragEvent<HTMLDivElement>) => {\n if (!canRearrange) {\n return;\n }\n\n event.preventDefault();\n\n const fromIndex = dragIndexRef.current;\n\n if (fromIndex === null || fromIndex === targetIndex) {\n return;\n }\n\n setOrderedItems((previousItems) => {\n if (\n fromIndex < 0 ||\n fromIndex >= previousItems.length ||\n targetIndex < 0 ||\n targetIndex > previousItems.length\n ) {\n return previousItems;\n }\n\n const nextItems = [...previousItems];\n const [movedItem] = nextItems.splice(fromIndex, 1);\n\n if (!movedItem) {\n return previousItems;\n }\n\n const boundedTarget = Math.max(0, Math.min(targetIndex, nextItems.length));\n const nextIndex =\n fromIndex < targetIndex ? Math.min(boundedTarget, nextItems.length) : boundedTarget;\n\n nextItems.splice(nextIndex, 0, movedItem);\n\n onRearrange?.(\n nextItems.map((item, index) => ({\n id: item.id,\n index,\n }))\n );\n\n return nextItems;\n });\n\n dragIndexRef.current = null;\n },\n [canRearrange, onRearrange]\n );\n\n const handleDragEnd = useCallback(() => (dragIndexRef.current = null), []);\n\n const handleMove = useCallback(\n (fromIndex: number, direction: 'up' | 'down') => {\n setOrderedItems((previousItems) => {\n const targetIndex = direction === 'up' ? fromIndex - 1 : fromIndex + 1;\n\n if (targetIndex < 0 || targetIndex >= previousItems.length) {\n return previousItems;\n }\n\n const nextItems = [...previousItems];\n const [movedItem] = nextItems.splice(fromIndex, 1);\n\n if (!movedItem) {\n return previousItems;\n }\n\n nextItems.splice(targetIndex, 0, movedItem);\n\n onRearrange?.(\n nextItems.map((item, index) => ({\n id: item.id,\n index,\n }))\n );\n\n return nextItems;\n });\n },\n [onRearrange]\n );\n\n return (\n <div\n className={cx(styles.grid, className)}\n {...props}\n >\n <div\n className={styles.items}\n style={columns ? { gridTemplateColumns: `repeat(${columns}, 1fr)` } : {}}\n >\n {orderedItems.map((item, index) => (\n <div\n key={item.id}\n className={styles['item-container']}\n >\n <div\n className={styles.item}\n data-grid-id={item.id}\n draggable={canRearrange}\n onDragEnd={handleDragEnd}\n onDragOver={handleDragOver}\n onDragStart={handleDragStart(index)}\n onDrop={handleDrop(index)}\n >\n {item.component}\n </div>\n\n <div className={cx(styles.controls, canRearrange && styles['active-controls'])}>\n {index > 0 && (\n <Button\n aria-label='Move item up'\n variant='minimal'\n className={styles['arrow-button-up']}\n data-direction='up'\n type='button'\n icon='chevron'\n onClick={() => handleMove(index, 'up')}\n />\n )}\n {index < orderedItems.length - 1 && (\n <Button\n aria-label='Move item down'\n variant='minimal'\n data-direction='down'\n type='button'\n icon='chevron'\n onClick={() => handleMove(index, 'down')}\n />\n )}\n </div>\n </div>\n ))}\n </div>\n </div>\n );\n};\n"],"names":["Grid","canRearrange","className","columns","items","onRearrange","props","orderedItems","setOrderedItems","useState","dragIndexRef","useRef","previousItemIdsRef","useEffect","nextItemIds","item","previousItemIds","id","index","handleDragStart","useCallback","event","handleDragOver","handleDrop","targetIndex","fromIndex","previousItems","nextItems","movedItem","boundedTarget","nextIndex","handleDragEnd","handleMove","direction","jsx","cx","styles","jsxs","Button"],"mappings":"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"}
|