@rovula/ui 0.0.23 → 0.0.24
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/cjs/bundle.css +113 -0
- package/dist/cjs/bundle.js.map +1 -1
- package/dist/cjs/types/components/DropdownMenu/DropdownMenu.d.ts +27 -0
- package/dist/cjs/types/components/DropdownMenu/DropdownMenu.stories.d.ts +54 -0
- package/dist/components/DropdownMenu/DropdownMenu.js +74 -0
- package/dist/components/DropdownMenu/DropdownMenu.stories.js +116 -0
- package/dist/components/Tabs/Tabs.js +0 -1
- package/dist/components/Text/Text.js +2 -0
- package/dist/esm/bundle.css +113 -0
- package/dist/esm/bundle.js.map +1 -1
- package/dist/esm/types/components/DropdownMenu/DropdownMenu.d.ts +27 -0
- package/dist/esm/types/components/DropdownMenu/DropdownMenu.stories.d.ts +54 -0
- package/dist/src/theme/global.css +189 -1
- package/dist/theme/themes/xspector/baseline.css +2 -1
- package/dist/theme/themes/xspector/color.css +2 -1
- package/dist/theme/themes/xspector/components/dropdown-menu.css +28 -0
- package/dist/theme/tokens/baseline.css +2 -1
- package/dist/theme/tokens/components/dropdown-menu.css +27 -0
- package/package.json +8 -3
- package/src/components/DropdownMenu/DropdownMenu.stories.tsx +394 -0
- package/src/components/DropdownMenu/DropdownMenu.tsx +222 -0
- package/src/components/Tabs/Tabs.tsx +0 -1
- package/src/components/Text/Text.tsx +2 -0
- package/src/theme/themes/xspector/baseline.css +2 -1
- package/src/theme/themes/xspector/color.css +2 -1
- package/src/theme/themes/xspector/components/dropdown-menu.css +28 -0
- package/src/theme/tokens/baseline.css +2 -1
- package/src/theme/tokens/components/dropdown-menu.css +27 -0
|
@@ -0,0 +1,394 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
3
|
+
import {
|
|
4
|
+
DropdownMenu,
|
|
5
|
+
DropdownMenuCheckboxItem,
|
|
6
|
+
DropdownMenuContent,
|
|
7
|
+
DropdownMenuGroup,
|
|
8
|
+
DropdownMenuItem,
|
|
9
|
+
DropdownMenuLabel,
|
|
10
|
+
DropdownMenuPortal,
|
|
11
|
+
DropdownMenuSeparator,
|
|
12
|
+
DropdownMenuSub,
|
|
13
|
+
DropdownMenuSubContent,
|
|
14
|
+
DropdownMenuSubTrigger,
|
|
15
|
+
DropdownMenuTrigger,
|
|
16
|
+
} from "./DropdownMenu";
|
|
17
|
+
import Button from "../Button/Button";
|
|
18
|
+
import { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu";
|
|
19
|
+
import Icon from "../Icon/Icon";
|
|
20
|
+
import ActionButton from "../ActionButton/ActionButton";
|
|
21
|
+
|
|
22
|
+
const meta = {
|
|
23
|
+
title: "Components/DropdownMenu",
|
|
24
|
+
component: DropdownMenu,
|
|
25
|
+
// tags: ["autodocs"],
|
|
26
|
+
parameters: {
|
|
27
|
+
layout: "fullscreen",
|
|
28
|
+
},
|
|
29
|
+
decorators: [
|
|
30
|
+
(Story) => (
|
|
31
|
+
<div className="p-5 flex w-full">
|
|
32
|
+
<Story />
|
|
33
|
+
</div>
|
|
34
|
+
),
|
|
35
|
+
],
|
|
36
|
+
} satisfies Meta<typeof DropdownMenu>;
|
|
37
|
+
|
|
38
|
+
export default meta;
|
|
39
|
+
|
|
40
|
+
export const Default = {
|
|
41
|
+
args: {
|
|
42
|
+
// DropdownMenu: "Lorem Ipsum",
|
|
43
|
+
// value: "Lorem Ipsum",
|
|
44
|
+
// fullwidth: true,
|
|
45
|
+
},
|
|
46
|
+
render: (args) => {
|
|
47
|
+
console.log("args ", args);
|
|
48
|
+
const props: typeof args = {
|
|
49
|
+
...args,
|
|
50
|
+
};
|
|
51
|
+
return (
|
|
52
|
+
<div className="flex flex-row gap-4 w-full">
|
|
53
|
+
<div className="flex flex-1 justify-center items-center space-x-2">
|
|
54
|
+
<DropdownMenu>
|
|
55
|
+
<DropdownMenuTrigger>Open</DropdownMenuTrigger>
|
|
56
|
+
<DropdownMenuContent>
|
|
57
|
+
<DropdownMenuItem>Option Description</DropdownMenuItem>
|
|
58
|
+
<DropdownMenuItem>Option Description</DropdownMenuItem>
|
|
59
|
+
<DropdownMenuItem disabled>Option Description</DropdownMenuItem>
|
|
60
|
+
<DropdownMenuItem>
|
|
61
|
+
<Icon type="heroicons" name="check" className="size-4" />
|
|
62
|
+
Option Description
|
|
63
|
+
</DropdownMenuItem>
|
|
64
|
+
<DropdownMenuItem>Option Description</DropdownMenuItem>
|
|
65
|
+
</DropdownMenuContent>
|
|
66
|
+
</DropdownMenu>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
);
|
|
70
|
+
},
|
|
71
|
+
} satisfies StoryObj;
|
|
72
|
+
|
|
73
|
+
export const WithIcon = {
|
|
74
|
+
args: {
|
|
75
|
+
// DropdownMenu: "Lorem Ipsum",
|
|
76
|
+
// value: "Lorem Ipsum",
|
|
77
|
+
// fullwidth: true,
|
|
78
|
+
},
|
|
79
|
+
render: (args) => {
|
|
80
|
+
console.log("args ", args);
|
|
81
|
+
const props: typeof args = {
|
|
82
|
+
...args,
|
|
83
|
+
};
|
|
84
|
+
return (
|
|
85
|
+
<div className="flex flex-row gap-4 w-full">
|
|
86
|
+
<div className="flex flex-1 justify-center items-center space-x-2">
|
|
87
|
+
<DropdownMenu>
|
|
88
|
+
<DropdownMenuTrigger asChild>
|
|
89
|
+
<Button variant="outline">Open</Button>
|
|
90
|
+
</DropdownMenuTrigger>
|
|
91
|
+
<DropdownMenuContent>
|
|
92
|
+
<DropdownMenuItem>
|
|
93
|
+
<Icon
|
|
94
|
+
type="heroicons"
|
|
95
|
+
name="rocket-launch"
|
|
96
|
+
className="size-4"
|
|
97
|
+
/>
|
|
98
|
+
<span>Option Description</span>
|
|
99
|
+
</DropdownMenuItem>
|
|
100
|
+
<DropdownMenuItem>
|
|
101
|
+
<Icon
|
|
102
|
+
type="heroicons"
|
|
103
|
+
name="rocket-launch"
|
|
104
|
+
className="size-4"
|
|
105
|
+
/>
|
|
106
|
+
<span>Option Description</span>
|
|
107
|
+
</DropdownMenuItem>
|
|
108
|
+
<DropdownMenuItem disabled>
|
|
109
|
+
<Icon
|
|
110
|
+
type="heroicons"
|
|
111
|
+
name="rocket-launch"
|
|
112
|
+
className="size-4"
|
|
113
|
+
/>
|
|
114
|
+
<span>Option Description</span>
|
|
115
|
+
</DropdownMenuItem>
|
|
116
|
+
</DropdownMenuContent>
|
|
117
|
+
</DropdownMenu>
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
);
|
|
121
|
+
},
|
|
122
|
+
} satisfies StoryObj;
|
|
123
|
+
|
|
124
|
+
export const WithLabel = {
|
|
125
|
+
args: {
|
|
126
|
+
// DropdownMenu: "Lorem Ipsum",
|
|
127
|
+
// value: "Lorem Ipsum",
|
|
128
|
+
// fullwidth: true,
|
|
129
|
+
},
|
|
130
|
+
render: (args) => {
|
|
131
|
+
console.log("args ", args);
|
|
132
|
+
const props: typeof args = {
|
|
133
|
+
...args,
|
|
134
|
+
};
|
|
135
|
+
return (
|
|
136
|
+
<div className="flex flex-row gap-4 w-full">
|
|
137
|
+
<div className="flex flex-1 justify-center items-center space-x-2">
|
|
138
|
+
<DropdownMenu>
|
|
139
|
+
<DropdownMenuTrigger asChild>
|
|
140
|
+
<Button variant="outline">Open</Button>
|
|
141
|
+
</DropdownMenuTrigger>
|
|
142
|
+
<DropdownMenuContent>
|
|
143
|
+
<DropdownMenuItem>Option Description</DropdownMenuItem>
|
|
144
|
+
<DropdownMenuItem>Option Description</DropdownMenuItem>
|
|
145
|
+
<DropdownMenuItem>Option Description</DropdownMenuItem>
|
|
146
|
+
<DropdownMenuItem>Option Description</DropdownMenuItem>
|
|
147
|
+
<DropdownMenuItem>Option Description</DropdownMenuItem>
|
|
148
|
+
<DropdownMenuSeparator />
|
|
149
|
+
<DropdownMenuLabel>Sort by</DropdownMenuLabel>
|
|
150
|
+
<DropdownMenuItem>Option Description</DropdownMenuItem>
|
|
151
|
+
<DropdownMenuItem>Option Description</DropdownMenuItem>
|
|
152
|
+
<DropdownMenuItem>Option Description</DropdownMenuItem>
|
|
153
|
+
<DropdownMenuItem>Option Description</DropdownMenuItem>
|
|
154
|
+
<DropdownMenuItem>Option Description</DropdownMenuItem>
|
|
155
|
+
</DropdownMenuContent>
|
|
156
|
+
</DropdownMenu>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
);
|
|
160
|
+
},
|
|
161
|
+
} satisfies StoryObj;
|
|
162
|
+
|
|
163
|
+
export const Checkboxes = {
|
|
164
|
+
args: {
|
|
165
|
+
// DropdownMenu: "Lorem Ipsum",
|
|
166
|
+
// value: "Lorem Ipsum",
|
|
167
|
+
// fullwidth: true,
|
|
168
|
+
},
|
|
169
|
+
render: (args) => {
|
|
170
|
+
type Checked = DropdownMenuCheckboxItemProps["checked"];
|
|
171
|
+
console.log("args ", args);
|
|
172
|
+
const props: typeof args = {
|
|
173
|
+
...args,
|
|
174
|
+
};
|
|
175
|
+
return (
|
|
176
|
+
<div className="flex flex-row gap-4 w-full">
|
|
177
|
+
<div className="flex flex-1 justify-center items-center space-x-2">
|
|
178
|
+
<DropdownMenu>
|
|
179
|
+
<DropdownMenuTrigger asChild>
|
|
180
|
+
<Button variant="outline">Open</Button>
|
|
181
|
+
</DropdownMenuTrigger>
|
|
182
|
+
<DropdownMenuContent>
|
|
183
|
+
<DropdownMenuCheckboxItem>
|
|
184
|
+
Option Description
|
|
185
|
+
</DropdownMenuCheckboxItem>
|
|
186
|
+
<DropdownMenuCheckboxItem checked>
|
|
187
|
+
Option Description
|
|
188
|
+
</DropdownMenuCheckboxItem>
|
|
189
|
+
<DropdownMenuCheckboxItem disabled>
|
|
190
|
+
Option Description
|
|
191
|
+
</DropdownMenuCheckboxItem>
|
|
192
|
+
<DropdownMenuCheckboxItem checked disabled>
|
|
193
|
+
Option Description
|
|
194
|
+
</DropdownMenuCheckboxItem>
|
|
195
|
+
<DropdownMenuCheckboxItem>
|
|
196
|
+
<Icon
|
|
197
|
+
type="heroicons"
|
|
198
|
+
name="rocket-launch"
|
|
199
|
+
className="size-4"
|
|
200
|
+
/>
|
|
201
|
+
<span>Option Description</span>
|
|
202
|
+
</DropdownMenuCheckboxItem>
|
|
203
|
+
<DropdownMenuCheckboxItem checked>
|
|
204
|
+
<Icon
|
|
205
|
+
type="heroicons"
|
|
206
|
+
name="rocket-launch"
|
|
207
|
+
className="size-4"
|
|
208
|
+
/>
|
|
209
|
+
<span>Option Description</span>
|
|
210
|
+
</DropdownMenuCheckboxItem>
|
|
211
|
+
<DropdownMenuCheckboxItem disabled>
|
|
212
|
+
<Icon
|
|
213
|
+
type="heroicons"
|
|
214
|
+
name="rocket-launch"
|
|
215
|
+
className="size-4"
|
|
216
|
+
/>
|
|
217
|
+
<span>Option Description</span>
|
|
218
|
+
</DropdownMenuCheckboxItem>
|
|
219
|
+
<DropdownMenuCheckboxItem checked disabled>
|
|
220
|
+
<Icon
|
|
221
|
+
type="heroicons"
|
|
222
|
+
name="rocket-launch"
|
|
223
|
+
className="size-4"
|
|
224
|
+
/>
|
|
225
|
+
<span>Option Description</span>
|
|
226
|
+
</DropdownMenuCheckboxItem>
|
|
227
|
+
</DropdownMenuContent>
|
|
228
|
+
</DropdownMenu>
|
|
229
|
+
</div>
|
|
230
|
+
</div>
|
|
231
|
+
);
|
|
232
|
+
},
|
|
233
|
+
} satisfies StoryObj;
|
|
234
|
+
|
|
235
|
+
export const SubMenu = {
|
|
236
|
+
args: {
|
|
237
|
+
// DropdownMenu: "Lorem Ipsum",
|
|
238
|
+
// value: "Lorem Ipsum",
|
|
239
|
+
// fullwidth: true,
|
|
240
|
+
},
|
|
241
|
+
render: (args) => {
|
|
242
|
+
console.log("args ", args);
|
|
243
|
+
const props: typeof args = {
|
|
244
|
+
...args,
|
|
245
|
+
};
|
|
246
|
+
return (
|
|
247
|
+
<div className="flex flex-row gap-4 w-full">
|
|
248
|
+
<div className="flex flex-1 justify-center items-center space-x-2">
|
|
249
|
+
<DropdownMenu>
|
|
250
|
+
<DropdownMenuTrigger>Open</DropdownMenuTrigger>
|
|
251
|
+
<DropdownMenuContent>
|
|
252
|
+
<DropdownMenuLabel>My Account</DropdownMenuLabel>
|
|
253
|
+
<DropdownMenuSeparator />
|
|
254
|
+
<DropdownMenuItem>Profile</DropdownMenuItem>
|
|
255
|
+
<DropdownMenuItem>Billing</DropdownMenuItem>
|
|
256
|
+
<DropdownMenuItem>Team</DropdownMenuItem>
|
|
257
|
+
<DropdownMenuItem>Subscription</DropdownMenuItem>
|
|
258
|
+
<DropdownMenuSeparator />
|
|
259
|
+
<DropdownMenuGroup>
|
|
260
|
+
<DropdownMenuSub>
|
|
261
|
+
<DropdownMenuSubTrigger>
|
|
262
|
+
<span>Invite users</span>
|
|
263
|
+
</DropdownMenuSubTrigger>
|
|
264
|
+
<DropdownMenuPortal>
|
|
265
|
+
<DropdownMenuSubContent>
|
|
266
|
+
<DropdownMenuItem>
|
|
267
|
+
<span>Email</span>
|
|
268
|
+
</DropdownMenuItem>
|
|
269
|
+
<DropdownMenuItem>
|
|
270
|
+
<span>Message</span>
|
|
271
|
+
</DropdownMenuItem>
|
|
272
|
+
<DropdownMenuSeparator />
|
|
273
|
+
<DropdownMenuItem>
|
|
274
|
+
<span>More...</span>
|
|
275
|
+
</DropdownMenuItem>
|
|
276
|
+
</DropdownMenuSubContent>
|
|
277
|
+
</DropdownMenuPortal>
|
|
278
|
+
</DropdownMenuSub>
|
|
279
|
+
<DropdownMenuCheckboxItem>Panel</DropdownMenuCheckboxItem>
|
|
280
|
+
</DropdownMenuGroup>
|
|
281
|
+
</DropdownMenuContent>
|
|
282
|
+
</DropdownMenu>
|
|
283
|
+
</div>
|
|
284
|
+
</div>
|
|
285
|
+
);
|
|
286
|
+
},
|
|
287
|
+
} satisfies StoryObj;
|
|
288
|
+
|
|
289
|
+
export const OnIcon = {
|
|
290
|
+
args: {
|
|
291
|
+
// DropdownMenu: "Lorem Ipsum",
|
|
292
|
+
// value: "Lorem Ipsum",
|
|
293
|
+
// fullwidth: true,
|
|
294
|
+
},
|
|
295
|
+
render: (args) => {
|
|
296
|
+
console.log("args ", args);
|
|
297
|
+
const props: typeof args = {
|
|
298
|
+
...args,
|
|
299
|
+
};
|
|
300
|
+
return (
|
|
301
|
+
<div className="flex flex-row gap-4 w-full">
|
|
302
|
+
<div className="flex flex-1 justify-center items-center space-x-2">
|
|
303
|
+
<DropdownMenu>
|
|
304
|
+
<DropdownMenuTrigger>
|
|
305
|
+
<Icon type="heroicons" name="ellipsis-vertical" />
|
|
306
|
+
</DropdownMenuTrigger>
|
|
307
|
+
<DropdownMenuContent>
|
|
308
|
+
<DropdownMenuItem>Option Description</DropdownMenuItem>
|
|
309
|
+
<DropdownMenuItem>Option Description</DropdownMenuItem>
|
|
310
|
+
<DropdownMenuItem>Option Description</DropdownMenuItem>
|
|
311
|
+
<DropdownMenuItem>Option Description</DropdownMenuItem>
|
|
312
|
+
<DropdownMenuItem>Option Description</DropdownMenuItem>
|
|
313
|
+
</DropdownMenuContent>
|
|
314
|
+
</DropdownMenu>
|
|
315
|
+
</div>
|
|
316
|
+
</div>
|
|
317
|
+
);
|
|
318
|
+
},
|
|
319
|
+
} satisfies StoryObj;
|
|
320
|
+
|
|
321
|
+
export const AsChild = {
|
|
322
|
+
args: {
|
|
323
|
+
// DropdownMenu: "Lorem Ipsum",
|
|
324
|
+
// value: "Lorem Ipsum",
|
|
325
|
+
// fullwidth: true,
|
|
326
|
+
},
|
|
327
|
+
render: (args) => {
|
|
328
|
+
console.log("args ", args);
|
|
329
|
+
const props: typeof args = {
|
|
330
|
+
...args,
|
|
331
|
+
};
|
|
332
|
+
return (
|
|
333
|
+
<div className="flex flex-row gap-4 w-full">
|
|
334
|
+
<div className="flex flex-1 justify-center items-center space-x-2">
|
|
335
|
+
<DropdownMenu>
|
|
336
|
+
<DropdownMenuTrigger asChild>
|
|
337
|
+
<ActionButton variant="icon">
|
|
338
|
+
<Icon type="heroicons" name="ellipsis-vertical" />
|
|
339
|
+
</ActionButton>
|
|
340
|
+
</DropdownMenuTrigger>
|
|
341
|
+
<DropdownMenuContent>
|
|
342
|
+
<DropdownMenuItem>Option Description</DropdownMenuItem>
|
|
343
|
+
<DropdownMenuItem>Option Description</DropdownMenuItem>
|
|
344
|
+
<DropdownMenuItem>Option Description</DropdownMenuItem>
|
|
345
|
+
<DropdownMenuItem>Option Description</DropdownMenuItem>
|
|
346
|
+
<DropdownMenuItem>Option Description</DropdownMenuItem>
|
|
347
|
+
</DropdownMenuContent>
|
|
348
|
+
</DropdownMenu>
|
|
349
|
+
</div>
|
|
350
|
+
</div>
|
|
351
|
+
);
|
|
352
|
+
},
|
|
353
|
+
} satisfies StoryObj;
|
|
354
|
+
|
|
355
|
+
export const Position = {
|
|
356
|
+
args: {
|
|
357
|
+
side: "bottom",
|
|
358
|
+
align: "center",
|
|
359
|
+
sideOffset: 5,
|
|
360
|
+
alignOffset: 0,
|
|
361
|
+
},
|
|
362
|
+
render: (args) => {
|
|
363
|
+
console.log("args ", args);
|
|
364
|
+
const props: typeof args = {
|
|
365
|
+
...args,
|
|
366
|
+
};
|
|
367
|
+
return (
|
|
368
|
+
<div className="flex flex-row gap-4 w-full">
|
|
369
|
+
<div className="flex flex-1 justify-center items-center space-x-2">
|
|
370
|
+
<DropdownMenu>
|
|
371
|
+
<DropdownMenuTrigger asChild>
|
|
372
|
+
<ActionButton variant="icon">
|
|
373
|
+
<Icon type="heroicons" name="ellipsis-vertical" />
|
|
374
|
+
</ActionButton>
|
|
375
|
+
</DropdownMenuTrigger>
|
|
376
|
+
<DropdownMenuContent
|
|
377
|
+
{...args}
|
|
378
|
+
side="bottom" // controls the side (top, bottom, left, right)
|
|
379
|
+
align="start" // controls the alignment (start, center, end)
|
|
380
|
+
sideOffset={5} // offset from the side
|
|
381
|
+
alignOffset={0} // offset from the alignment
|
|
382
|
+
>
|
|
383
|
+
<DropdownMenuItem>Option Description</DropdownMenuItem>
|
|
384
|
+
<DropdownMenuItem>Option Description</DropdownMenuItem>
|
|
385
|
+
<DropdownMenuItem>Option Description</DropdownMenuItem>
|
|
386
|
+
<DropdownMenuItem>Option Description</DropdownMenuItem>
|
|
387
|
+
<DropdownMenuItem>Option Description</DropdownMenuItem>
|
|
388
|
+
</DropdownMenuContent>
|
|
389
|
+
</DropdownMenu>
|
|
390
|
+
</div>
|
|
391
|
+
</div>
|
|
392
|
+
);
|
|
393
|
+
},
|
|
394
|
+
} satisfies StoryObj;
|
|
@@ -0,0 +1,222 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
|
5
|
+
|
|
6
|
+
import { cn } from "@/utils/cn";
|
|
7
|
+
import Icon from "../Icon/Icon";
|
|
8
|
+
|
|
9
|
+
const DropdownMenu = DropdownMenuPrimitive.Root;
|
|
10
|
+
|
|
11
|
+
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
|
|
12
|
+
|
|
13
|
+
const DropdownMenuGroup = DropdownMenuPrimitive.Group;
|
|
14
|
+
|
|
15
|
+
const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
|
|
16
|
+
|
|
17
|
+
const DropdownMenuSub = DropdownMenuPrimitive.Sub;
|
|
18
|
+
|
|
19
|
+
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
|
|
20
|
+
|
|
21
|
+
const DropdownMenuSubTrigger = React.forwardRef<
|
|
22
|
+
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
|
|
23
|
+
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
|
|
24
|
+
inset?: boolean;
|
|
25
|
+
}
|
|
26
|
+
>(({ className, inset, children, ...props }, ref) => (
|
|
27
|
+
<DropdownMenuPrimitive.SubTrigger
|
|
28
|
+
ref={ref}
|
|
29
|
+
className={cn(
|
|
30
|
+
// "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-primary data-[state=open]:bg-primary",
|
|
31
|
+
"relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-4 typography-subtitile4 outline-none transition-colors data-[disabled]:pointer-events-none",
|
|
32
|
+
"bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
|
|
33
|
+
"active:opacity-75",
|
|
34
|
+
"focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]",
|
|
35
|
+
"data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]",
|
|
36
|
+
inset && "pl-8",
|
|
37
|
+
className
|
|
38
|
+
)}
|
|
39
|
+
{...props}
|
|
40
|
+
>
|
|
41
|
+
{children}
|
|
42
|
+
<Icon type="heroicons" name="chevron-right" className="ml-auto h-4 w-4" />
|
|
43
|
+
</DropdownMenuPrimitive.SubTrigger>
|
|
44
|
+
));
|
|
45
|
+
DropdownMenuSubTrigger.displayName =
|
|
46
|
+
DropdownMenuPrimitive.SubTrigger.displayName;
|
|
47
|
+
|
|
48
|
+
const DropdownMenuSubContent = React.forwardRef<
|
|
49
|
+
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
|
|
50
|
+
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
|
|
51
|
+
>(({ className, ...props }, ref) => (
|
|
52
|
+
<DropdownMenuPrimitive.SubContent
|
|
53
|
+
ref={ref}
|
|
54
|
+
className={cn(
|
|
55
|
+
"z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground shadow-[var(--dropdown-menu-shadow)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
56
|
+
className
|
|
57
|
+
)}
|
|
58
|
+
{...props}
|
|
59
|
+
/>
|
|
60
|
+
));
|
|
61
|
+
DropdownMenuSubContent.displayName =
|
|
62
|
+
DropdownMenuPrimitive.SubContent.displayName;
|
|
63
|
+
|
|
64
|
+
const DropdownMenuContent = React.forwardRef<
|
|
65
|
+
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
|
66
|
+
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
|
|
67
|
+
>(({ className, sideOffset = 4, ...props }, ref) => (
|
|
68
|
+
<DropdownMenuPrimitive.Portal>
|
|
69
|
+
<DropdownMenuPrimitive.Content
|
|
70
|
+
ref={ref}
|
|
71
|
+
sideOffset={sideOffset}
|
|
72
|
+
className={cn(
|
|
73
|
+
"z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground shadow-[0px_2px_24px_0px_rgba(145,_158,_171,_0.24)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
74
|
+
className
|
|
75
|
+
)}
|
|
76
|
+
{...props}
|
|
77
|
+
/>
|
|
78
|
+
</DropdownMenuPrimitive.Portal>
|
|
79
|
+
));
|
|
80
|
+
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
|
|
81
|
+
|
|
82
|
+
const DropdownMenuItem = React.forwardRef<
|
|
83
|
+
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
|
|
84
|
+
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
|
|
85
|
+
inset?: boolean;
|
|
86
|
+
}
|
|
87
|
+
>(({ className, inset, ...props }, ref) => (
|
|
88
|
+
<DropdownMenuPrimitive.Item
|
|
89
|
+
ref={ref}
|
|
90
|
+
className={cn(
|
|
91
|
+
"relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitile4 outline-none transition-colors data-[disabled]:pointer-events-none",
|
|
92
|
+
"bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
|
|
93
|
+
"active:opacity-75",
|
|
94
|
+
"focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]",
|
|
95
|
+
"data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]",
|
|
96
|
+
inset && "pl-8",
|
|
97
|
+
className
|
|
98
|
+
)}
|
|
99
|
+
{...props}
|
|
100
|
+
/>
|
|
101
|
+
));
|
|
102
|
+
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
|
|
103
|
+
|
|
104
|
+
const DropdownMenuCheckboxItem = React.forwardRef<
|
|
105
|
+
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
|
|
106
|
+
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
|
|
107
|
+
>(({ className, children, checked, ...props }, ref) => (
|
|
108
|
+
<DropdownMenuPrimitive.CheckboxItem
|
|
109
|
+
ref={ref}
|
|
110
|
+
className={cn(
|
|
111
|
+
"relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitile4 outline-none transition-colors data-[disabled]:pointer-events-none",
|
|
112
|
+
"bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
|
|
113
|
+
"active:opacity-75",
|
|
114
|
+
"focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]",
|
|
115
|
+
"data-[state='checked']:bg-[var(--dropdown-menu-selected-bg)] data-[state='checked']:text-[var(--dropdown-menu-selected-text)] data-[state='checked']:typography-subtitile5",
|
|
116
|
+
"data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]",
|
|
117
|
+
className
|
|
118
|
+
)}
|
|
119
|
+
checked={checked}
|
|
120
|
+
{...props}
|
|
121
|
+
>
|
|
122
|
+
<span className="absolute left-4 flex items-center justify-center">
|
|
123
|
+
<DropdownMenuPrimitive.ItemIndicator>
|
|
124
|
+
<Icon type="heroicons" name="check" className="size-4" />
|
|
125
|
+
</DropdownMenuPrimitive.ItemIndicator>
|
|
126
|
+
</span>
|
|
127
|
+
{children}
|
|
128
|
+
</DropdownMenuPrimitive.CheckboxItem>
|
|
129
|
+
));
|
|
130
|
+
DropdownMenuCheckboxItem.displayName =
|
|
131
|
+
DropdownMenuPrimitive.CheckboxItem.displayName;
|
|
132
|
+
|
|
133
|
+
const DropdownMenuRadioItem = React.forwardRef<
|
|
134
|
+
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
|
|
135
|
+
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
|
|
136
|
+
>(({ className, children, ...props }, ref) => (
|
|
137
|
+
<DropdownMenuPrimitive.RadioItem
|
|
138
|
+
ref={ref}
|
|
139
|
+
className={cn(
|
|
140
|
+
"relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitile4 outline-none transition-colors data-[disabled]:pointer-events-none",
|
|
141
|
+
"bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
|
|
142
|
+
"active:opacity-75",
|
|
143
|
+
"focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]",
|
|
144
|
+
"data-[state='checked']:bg-[var(--dropdown-menu-selected-bg)] data-[state='checked']:text-[var(--dropdown-menu-selected-text)] data-[state='checked']:typography-subtitile5",
|
|
145
|
+
"data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]",
|
|
146
|
+
className
|
|
147
|
+
)}
|
|
148
|
+
{...props}
|
|
149
|
+
>
|
|
150
|
+
<span className="absolute left-4 flex items-center justify-center">
|
|
151
|
+
<DropdownMenuPrimitive.ItemIndicator>
|
|
152
|
+
<Icon type="heroicons" name="circle" className="h-2 w-2 fill-current" />
|
|
153
|
+
</DropdownMenuPrimitive.ItemIndicator>
|
|
154
|
+
</span>
|
|
155
|
+
{children}
|
|
156
|
+
</DropdownMenuPrimitive.RadioItem>
|
|
157
|
+
));
|
|
158
|
+
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
|
|
159
|
+
|
|
160
|
+
const DropdownMenuLabel = React.forwardRef<
|
|
161
|
+
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
|
|
162
|
+
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
|
|
163
|
+
inset?: boolean;
|
|
164
|
+
}
|
|
165
|
+
>(({ className, inset, ...props }, ref) => (
|
|
166
|
+
<DropdownMenuPrimitive.Label
|
|
167
|
+
ref={ref}
|
|
168
|
+
className={cn(
|
|
169
|
+
"px-3 py-2 typography-small4 text-text-grey-medium",
|
|
170
|
+
inset && "pl-8",
|
|
171
|
+
className
|
|
172
|
+
)}
|
|
173
|
+
{...props}
|
|
174
|
+
/>
|
|
175
|
+
));
|
|
176
|
+
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
|
|
177
|
+
|
|
178
|
+
const DropdownMenuSeparator = React.forwardRef<
|
|
179
|
+
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
|
|
180
|
+
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
|
|
181
|
+
>(({ className, ...props }, ref) => (
|
|
182
|
+
<DropdownMenuPrimitive.Separator
|
|
183
|
+
ref={ref}
|
|
184
|
+
className={cn(
|
|
185
|
+
"-mx-2 my-2 h-px bg-[var(--dropdown-menu-seperator-bg)]",
|
|
186
|
+
className
|
|
187
|
+
)}
|
|
188
|
+
{...props}
|
|
189
|
+
/>
|
|
190
|
+
));
|
|
191
|
+
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
|
|
192
|
+
|
|
193
|
+
const DropdownMenuShortcut = ({
|
|
194
|
+
className,
|
|
195
|
+
...props
|
|
196
|
+
}: React.HTMLAttributes<HTMLSpanElement>) => {
|
|
197
|
+
return (
|
|
198
|
+
<span
|
|
199
|
+
className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
|
|
200
|
+
{...props}
|
|
201
|
+
/>
|
|
202
|
+
);
|
|
203
|
+
};
|
|
204
|
+
DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
|
|
205
|
+
|
|
206
|
+
export {
|
|
207
|
+
DropdownMenu,
|
|
208
|
+
DropdownMenuTrigger,
|
|
209
|
+
DropdownMenuContent,
|
|
210
|
+
DropdownMenuItem,
|
|
211
|
+
DropdownMenuCheckboxItem,
|
|
212
|
+
DropdownMenuRadioItem,
|
|
213
|
+
DropdownMenuLabel,
|
|
214
|
+
DropdownMenuSeparator,
|
|
215
|
+
DropdownMenuShortcut,
|
|
216
|
+
DropdownMenuGroup,
|
|
217
|
+
DropdownMenuPortal,
|
|
218
|
+
DropdownMenuSub,
|
|
219
|
+
DropdownMenuSubContent,
|
|
220
|
+
DropdownMenuSubTrigger,
|
|
221
|
+
DropdownMenuRadioGroup,
|
|
222
|
+
};
|
|
@@ -63,6 +63,8 @@ const textVariants = cva(["text-foreground"], {
|
|
|
63
63
|
},
|
|
64
64
|
});
|
|
65
65
|
|
|
66
|
+
// montserrat: ["Montserrat", "sans-serif"],
|
|
67
|
+
// poppins: ["Poppins", "sans-serif"], font-montserrat, font-poppins
|
|
66
68
|
// TODO font, fontBold, elipt
|
|
67
69
|
const Text = <T extends React.ElementType = "p">(
|
|
68
70
|
{
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
--base-color-bg2: #282c31;
|
|
24
24
|
--base-color-bg3: #d8d8d8;
|
|
25
25
|
--base-color-workspace-stroke: #e2e2e2;
|
|
26
|
+
--base-color-guideline-stroke: #c5c5c5;
|
|
26
27
|
--base-color-popup: #2d2e30;
|
|
27
28
|
--base-color-popup-hightlight: #343638;
|
|
28
29
|
--base-color-popup-curtain: rgba(0 0 0 / 0.6);
|
|
@@ -63,5 +64,5 @@
|
|
|
63
64
|
--primary-foreground: var(--common-white);
|
|
64
65
|
--secondary-foreground: var(--common-white);
|
|
65
66
|
|
|
66
|
-
--base-color-popup-foreground: var(--
|
|
67
|
+
--base-color-popup-foreground: var(--text-grey-light);
|
|
67
68
|
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
:root[data-theme="xspector"] {
|
|
2
|
+
/* ------------------------------------------------------------------ */
|
|
3
|
+
/* DropdownMenu Component Tokens */
|
|
4
|
+
/* ------------------------------------------------------------------ */
|
|
5
|
+
/* Naming Convention: --[component]-[state]-[property] */
|
|
6
|
+
/* Element: [default, hover, selected, disabled] */
|
|
7
|
+
/* ------------------------------------------------------------------ */
|
|
8
|
+
|
|
9
|
+
--dropdown-menu-seperator-bg: var(--other-transparency-white-08);
|
|
10
|
+
--dropdown-menu-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.12);
|
|
11
|
+
|
|
12
|
+
/* Default State */
|
|
13
|
+
--dropdown-menu-default-bg: transparent;
|
|
14
|
+
--dropdown-menu-default-text: inherit;
|
|
15
|
+
|
|
16
|
+
/* Hover State */
|
|
17
|
+
--dropdown-menu-hover-bg: var(--other-transparency-white-08);
|
|
18
|
+
--dropdown-menu-hover-text: inherit;
|
|
19
|
+
|
|
20
|
+
/* Selected State */
|
|
21
|
+
--dropdown-menu-selected-bg: var(--grey-grey-150);
|
|
22
|
+
--dropdown-menu-selected-text: inherit;
|
|
23
|
+
|
|
24
|
+
/* Disabled State */
|
|
25
|
+
--dropdown-menu-disabled-bg: transparent;
|
|
26
|
+
--dropdown-menu-disabled-text: var(--grey-grey-140);
|
|
27
|
+
|
|
28
|
+
}
|