ui-ingredients 0.1.0 → 0.1.1
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +98 -94
- package/package.json +53 -51
package/README.md
CHANGED
@@ -1,94 +1,98 @@
|
|
1
|
-
# UI Ingredients
|
2
|
-
|
3
|
-
Headless component library for [Svelte](https://svelte.dev/) powered by [zag](https://zagjs.com/)
|
4
|
-
|
5
|
-
## Installation
|
6
|
-
|
7
|
-
```bash
|
8
|
-
npm install ui-ingredients
|
9
|
-
# yarn add ui-ingredients
|
10
|
-
# pnpm add ui-ingredients
|
11
|
-
```
|
12
|
-
|
13
|
-
## Usage
|
14
|
-
|
15
|
-
```svelte
|
16
|
-
<script>
|
17
|
-
import {Dialog, Portal} from 'ui-ingredients';
|
18
|
-
import {XCloseIcon} from '$lib
|
19
|
-
</script>
|
20
|
-
|
21
|
-
<Dialog.Root>
|
22
|
-
<Dialog.Trigger>
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
</Dialog.
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
</Dialog.
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
- [
|
46
|
-
- [
|
47
|
-
- [
|
48
|
-
- [
|
49
|
-
- [
|
50
|
-
- [
|
51
|
-
- [
|
52
|
-
- [
|
53
|
-
- [
|
54
|
-
- [
|
55
|
-
- [
|
56
|
-
- [
|
57
|
-
- [
|
58
|
-
- [
|
59
|
-
- [
|
60
|
-
- [
|
61
|
-
- [
|
62
|
-
- [
|
63
|
-
- [
|
64
|
-
- [
|
65
|
-
- [
|
66
|
-
- [
|
67
|
-
- [
|
68
|
-
- [
|
69
|
-
- [
|
70
|
-
- [
|
71
|
-
- [
|
72
|
-
- [
|
73
|
-
- [
|
74
|
-
- [
|
75
|
-
- [
|
76
|
-
- [
|
77
|
-
- [
|
78
|
-
- [
|
79
|
-
- [
|
80
|
-
- [
|
81
|
-
- [
|
82
|
-
- [
|
83
|
-
- [
|
84
|
-
- [
|
85
|
-
- [
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
- [
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
1
|
+
# UI Ingredients
|
2
|
+
|
3
|
+
Headless component library for [Svelte](https://svelte.dev/) powered by [zag](https://zagjs.com/)
|
4
|
+
|
5
|
+
## Installation
|
6
|
+
|
7
|
+
```bash
|
8
|
+
npm install ui-ingredients
|
9
|
+
# yarn add ui-ingredients
|
10
|
+
# pnpm add ui-ingredients
|
11
|
+
```
|
12
|
+
|
13
|
+
## Usage
|
14
|
+
|
15
|
+
```svelte
|
16
|
+
<script>
|
17
|
+
import {Dialog, Portal} from 'ui-ingredients';
|
18
|
+
import {XCloseIcon, Button} from '$lib';
|
19
|
+
</script>
|
20
|
+
|
21
|
+
<Dialog.Root lazyMount keepMounted>
|
22
|
+
<Dialog.Trigger>
|
23
|
+
{#snippet asChild(attrs)}
|
24
|
+
<Button {...attrs}>Open</Button>
|
25
|
+
{/snippet}
|
26
|
+
</Dialog.Trigger>
|
27
|
+
|
28
|
+
<Portal>
|
29
|
+
<Dialog.Backdrop />
|
30
|
+
<Dialog.Positioner>
|
31
|
+
<Dialog.Content>
|
32
|
+
<Dialog.Title>Title</Dialog.Title>
|
33
|
+
<Dialog.Description>Description</Dialog.Description>
|
34
|
+
<Dialog.CloseTrigger>
|
35
|
+
<XCloseIcon />
|
36
|
+
</Dialog.CloseTrigger>
|
37
|
+
</Dialog.Content>
|
38
|
+
</Dialog.Positioner>
|
39
|
+
</Portal>
|
40
|
+
</Dialog.Root>
|
41
|
+
```
|
42
|
+
|
43
|
+
## Documentation
|
44
|
+
|
45
|
+
- [Accordion](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/accordion.md)
|
46
|
+
- [Avatar](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/avatar.md)
|
47
|
+
- [Carousel](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/carousel.md)
|
48
|
+
- [Checkbox](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/checkbox.md)
|
49
|
+
- [Clipboard](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/clipboard.md)
|
50
|
+
- [Collapsible](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/collapsible.md)
|
51
|
+
- [ColorPicker](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/color-picker.md)
|
52
|
+
- [Combobox](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/combobox.md)
|
53
|
+
- [DatePicker](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/date-picker.md)
|
54
|
+
- [Dialog](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/dialog.md)
|
55
|
+
- [Editable](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/editable.md)
|
56
|
+
- [Field](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/field.md)
|
57
|
+
- [FileUpload](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/file-upload.md)
|
58
|
+
- [FloatingPanel](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/floating-panel.md)
|
59
|
+
- [Highlight](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/highlight.md)
|
60
|
+
- [HoverCard](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/hover-card.md)
|
61
|
+
- [Menu](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/menu.md)
|
62
|
+
- [NumberInput](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/number-input.md)
|
63
|
+
- [Pagination](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/pagination.md)
|
64
|
+
- [PinInput](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/pin-input.md)
|
65
|
+
- [Popover](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/popover.md)
|
66
|
+
- [Portal](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/portal.md)
|
67
|
+
- [Presence](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/presence.md)
|
68
|
+
- [Progress](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/progress.md)
|
69
|
+
- [QrCode](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/qr-code.md)
|
70
|
+
- [RadioGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/radio-group.md)
|
71
|
+
- [RatingGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/rating-group.md)
|
72
|
+
- [Select](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/select.md)
|
73
|
+
- [SegmentGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/segment-group.md)
|
74
|
+
- [SignaturePad](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/signature-pad.md)
|
75
|
+
- [Slider](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/slider.md)
|
76
|
+
- [Splitter](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/splitter.md)
|
77
|
+
- [Steps](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/steps.md)
|
78
|
+
- [Switch](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/switch.md)
|
79
|
+
- [Tabs](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tabs.md)
|
80
|
+
- [TagsInput](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tags-input.md)
|
81
|
+
- [TimePicker](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/time-picker.md)
|
82
|
+
- [Timer](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/timer.md)
|
83
|
+
- [Toast](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/toast.md)
|
84
|
+
- [ToggleGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/toggle-group.md)
|
85
|
+
- [Tooltip](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tooltip.md)
|
86
|
+
- [TreeView](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tree-view.md)
|
87
|
+
- [Tour](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tour.md)
|
88
|
+
- [The `asChild` prop](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/aschild.md)
|
89
|
+
- [Styling](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/styling.md)
|
90
|
+
|
91
|
+
## Credits
|
92
|
+
|
93
|
+
- [zag](https://zagjs.com/) - The fantastic library that powers UI ingredients
|
94
|
+
- [ark](https://ark-ui.com/) - The outstanding headless component library that greatly inspired this one
|
95
|
+
|
96
|
+
## Demo
|
97
|
+
|
98
|
+
View components demo [here](https://ui-ingredients.vercel.app/)
|
package/package.json
CHANGED
@@ -2,7 +2,7 @@
|
|
2
2
|
"name": "ui-ingredients",
|
3
3
|
"type": "module",
|
4
4
|
"license": "MIT",
|
5
|
-
"version": "0.1.
|
5
|
+
"version": "0.1.1",
|
6
6
|
"packageManager": "pnpm@9.7.0",
|
7
7
|
"svelte": "./dist/index.js",
|
8
8
|
"types": "./dist/index.d.ts",
|
@@ -270,52 +270,52 @@
|
|
270
270
|
"release": "release-it"
|
271
271
|
},
|
272
272
|
"dependencies": {
|
273
|
-
"@zag-js/accordion": "0.73.
|
274
|
-
"@zag-js/anatomy": "0.73.
|
275
|
-
"@zag-js/avatar": "0.73.
|
276
|
-
"@zag-js/carousel": "0.73.
|
277
|
-
"@zag-js/checkbox": "0.73.
|
278
|
-
"@zag-js/clipboard": "0.73.
|
279
|
-
"@zag-js/collapsible": "0.73.
|
280
|
-
"@zag-js/color-picker": "0.73.
|
281
|
-
"@zag-js/combobox": "0.73.
|
282
|
-
"@zag-js/core": "0.73.
|
283
|
-
"@zag-js/date-picker": "0.73.
|
284
|
-
"@zag-js/dialog": "0.73.
|
285
|
-
"@zag-js/dom-query": "0.73.
|
286
|
-
"@zag-js/editable": "0.73.
|
287
|
-
"@zag-js/file-upload": "0.73.
|
288
|
-
"@zag-js/floating-panel": "0.73.
|
289
|
-
"@zag-js/highlight-word": "0.73.
|
290
|
-
"@zag-js/hover-card": "0.73.
|
291
|
-
"@zag-js/i18n-utils": "0.73.
|
292
|
-
"@zag-js/menu": "0.73.
|
293
|
-
"@zag-js/number-input": "0.73.
|
294
|
-
"@zag-js/pagination": "0.73.
|
295
|
-
"@zag-js/pin-input": "0.73.
|
296
|
-
"@zag-js/popover": "0.73.
|
297
|
-
"@zag-js/presence": "0.73.
|
298
|
-
"@zag-js/progress": "0.73.
|
299
|
-
"@zag-js/qr-code": "0.73.
|
300
|
-
"@zag-js/radio-group": "0.73.
|
301
|
-
"@zag-js/rating-group": "0.73.
|
302
|
-
"@zag-js/select": "0.73.
|
303
|
-
"@zag-js/signature-pad": "0.73.
|
304
|
-
"@zag-js/slider": "0.73.
|
305
|
-
"@zag-js/splitter": "0.73.
|
306
|
-
"@zag-js/steps": "0.73.
|
307
|
-
"@zag-js/svelte": "0.73.
|
308
|
-
"@zag-js/switch": "0.73.
|
309
|
-
"@zag-js/tabs": "0.73.
|
310
|
-
"@zag-js/tags-input": "0.73.
|
311
|
-
"@zag-js/time-picker": "0.73.
|
312
|
-
"@zag-js/timer": "0.73.
|
313
|
-
"@zag-js/toast": "0.73.
|
314
|
-
"@zag-js/toggle-group": "0.73.
|
315
|
-
"@zag-js/tooltip": "0.73.
|
316
|
-
"@zag-js/tour": "0.73.
|
317
|
-
"@zag-js/tree-view": "0.73.
|
318
|
-
"@zag-js/utils": "0.73.
|
273
|
+
"@zag-js/accordion": "0.73.1",
|
274
|
+
"@zag-js/anatomy": "0.73.1",
|
275
|
+
"@zag-js/avatar": "0.73.1",
|
276
|
+
"@zag-js/carousel": "0.73.1",
|
277
|
+
"@zag-js/checkbox": "0.73.1",
|
278
|
+
"@zag-js/clipboard": "0.73.1",
|
279
|
+
"@zag-js/collapsible": "0.73.1",
|
280
|
+
"@zag-js/color-picker": "0.73.1",
|
281
|
+
"@zag-js/combobox": "0.73.1",
|
282
|
+
"@zag-js/core": "0.73.1",
|
283
|
+
"@zag-js/date-picker": "0.73.1",
|
284
|
+
"@zag-js/dialog": "0.73.1",
|
285
|
+
"@zag-js/dom-query": "0.73.1",
|
286
|
+
"@zag-js/editable": "0.73.1",
|
287
|
+
"@zag-js/file-upload": "0.73.1",
|
288
|
+
"@zag-js/floating-panel": "0.73.1",
|
289
|
+
"@zag-js/highlight-word": "0.73.1",
|
290
|
+
"@zag-js/hover-card": "0.73.1",
|
291
|
+
"@zag-js/i18n-utils": "0.73.1",
|
292
|
+
"@zag-js/menu": "0.73.1",
|
293
|
+
"@zag-js/number-input": "0.73.1",
|
294
|
+
"@zag-js/pagination": "0.73.1",
|
295
|
+
"@zag-js/pin-input": "0.73.1",
|
296
|
+
"@zag-js/popover": "0.73.1",
|
297
|
+
"@zag-js/presence": "0.73.1",
|
298
|
+
"@zag-js/progress": "0.73.1",
|
299
|
+
"@zag-js/qr-code": "0.73.1",
|
300
|
+
"@zag-js/radio-group": "0.73.1",
|
301
|
+
"@zag-js/rating-group": "0.73.1",
|
302
|
+
"@zag-js/select": "0.73.1",
|
303
|
+
"@zag-js/signature-pad": "0.73.1",
|
304
|
+
"@zag-js/slider": "0.73.1",
|
305
|
+
"@zag-js/splitter": "0.73.1",
|
306
|
+
"@zag-js/steps": "0.73.1",
|
307
|
+
"@zag-js/svelte": "0.73.1",
|
308
|
+
"@zag-js/switch": "0.73.1",
|
309
|
+
"@zag-js/tabs": "0.73.1",
|
310
|
+
"@zag-js/tags-input": "0.73.1",
|
311
|
+
"@zag-js/time-picker": "0.73.1",
|
312
|
+
"@zag-js/timer": "0.73.1",
|
313
|
+
"@zag-js/toast": "0.73.1",
|
314
|
+
"@zag-js/toggle-group": "0.73.1",
|
315
|
+
"@zag-js/tooltip": "0.73.1",
|
316
|
+
"@zag-js/tour": "0.73.1",
|
317
|
+
"@zag-js/tree-view": "0.73.1",
|
318
|
+
"@zag-js/utils": "0.73.1",
|
319
319
|
"uid": "2.0.2"
|
320
320
|
},
|
321
321
|
"peerDependencies": {
|
@@ -329,10 +329,11 @@
|
|
329
329
|
"@sveltejs/vite-plugin-svelte": "4.0.0-next.6",
|
330
330
|
"@testing-library/jest-dom": "6.5.0",
|
331
331
|
"@testing-library/svelte": "5.2.3",
|
332
|
+
"@testing-library/user-event": "14.5.2",
|
332
333
|
"@types/jsdom": "21.1.7",
|
333
334
|
"@untitled-theme/icons-svelte": "0.10.9",
|
334
335
|
"autoprefixer": "10.4.20",
|
335
|
-
"globals": "15.
|
336
|
+
"globals": "15.10.0",
|
336
337
|
"jsdom": "25.0.1",
|
337
338
|
"postcss": "8.4.47",
|
338
339
|
"publint": "0.2.11",
|
@@ -340,12 +341,12 @@
|
|
340
341
|
"resize-observer-polyfill": "1.5.1",
|
341
342
|
"svelte": "5.0.0-next.260",
|
342
343
|
"svelte-check": "4.0.4",
|
343
|
-
"tailwind-merge": "2.5.
|
344
|
+
"tailwind-merge": "2.5.3",
|
344
345
|
"tailwind-variants": "0.2.1",
|
345
346
|
"tailwindcss": "3.4.13",
|
346
347
|
"typescript": "5.6.2",
|
347
348
|
"vite": "5.4.8",
|
348
|
-
"vitest": "2.1.
|
349
|
+
"vitest": "2.1.2",
|
349
350
|
"vitest-axe": "1.0.0-pre.3",
|
350
351
|
"vitest-canvas-mock": "0.3.3"
|
351
352
|
},
|
@@ -359,7 +360,8 @@
|
|
359
360
|
},
|
360
361
|
"hooks": {
|
361
362
|
"before:init": [
|
362
|
-
"pnpm check"
|
363
|
+
"pnpm check",
|
364
|
+
"pnpm test"
|
363
365
|
],
|
364
366
|
"after:bump": [
|
365
367
|
"pnpm package"
|