@3df-spa/ui 1.0.2 → 1.0.4
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 +8 -71
- package/package.json +5 -3
package/README.md
CHANGED
|
@@ -1,89 +1,26 @@
|
|
|
1
|
-
# @3df/ui
|
|
1
|
+
# @3df-spa/ui
|
|
2
2
|
|
|
3
|
-
>
|
|
3
|
+
> Vue 3 component library · TypeScript · Tailwind CSS v4
|
|
4
4
|
|
|
5
|
-
[](https://www.npmjs.com/package/@3df-spa/ui)
|
|
6
|
+
[](LICENSE)
|
|
6
7
|
|
|
7
|
-
##
|
|
8
|
+
## Installation
|
|
8
9
|
|
|
9
10
|
```bash
|
|
10
|
-
pnpm add @3df/ui
|
|
11
|
+
pnpm add @3df-spa/ui
|
|
11
12
|
```
|
|
12
13
|
|
|
13
|
-
**
|
|
14
|
+
**Optional peer dependencies:**
|
|
14
15
|
|
|
15
16
|
```bash
|
|
16
|
-
pnpm add class-variance-authority clsx tailwind-merge vue
|
|
17
|
-
# Opcionales:
|
|
18
17
|
pnpm add date-fns # Calendar / DatePicker
|
|
19
18
|
pnpm add embla-carousel # Carousel
|
|
20
19
|
```
|
|
21
20
|
|
|
22
21
|
## Setup
|
|
23
22
|
|
|
24
|
-
En tu CSS principal:
|
|
25
|
-
|
|
26
23
|
```css
|
|
27
24
|
@import "tailwindcss";
|
|
28
|
-
@import "@3df/ui/theme.css";
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
## Uso básico
|
|
32
|
-
|
|
33
|
-
```vue
|
|
34
|
-
<script setup lang="ts">
|
|
35
|
-
import { Button, Card, CardContent } from '@3df/ui';
|
|
36
|
-
</script>
|
|
37
|
-
|
|
38
|
-
<template>
|
|
39
|
-
<Card>
|
|
40
|
-
<CardContent>
|
|
41
|
-
<Button>Default</Button>
|
|
42
|
-
<Button variant="outline">Outline</Button>
|
|
43
|
-
<Button variant="destructive">Delete</Button>
|
|
44
|
-
</CardContent>
|
|
45
|
-
</Card>
|
|
46
|
-
</template>
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
## Temas
|
|
50
|
-
|
|
51
|
-
| Clase CSS | Descripción |
|
|
52
|
-
|---|---|
|
|
53
|
-
| *(sin clase)* | Light default |
|
|
54
|
-
| `.dark` | Dark default |
|
|
55
|
-
| `.light-3df` | Light 3DF (verde/dorado) |
|
|
56
|
-
| `.dark-3df` | Dark 3DF |
|
|
57
|
-
| `.light-coffe` | Light café cálido |
|
|
58
|
-
| `.dark-coffe` | Dark café |
|
|
59
|
-
|
|
60
|
-
```html
|
|
61
|
-
<body class="dark-3df">...</body>
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
### Personalizar bordes
|
|
65
|
-
|
|
66
|
-
```css
|
|
67
|
-
:root {
|
|
68
|
-
--ui-border-width: 1px; /* default: 2px */
|
|
69
|
-
--ui-radius: 1rem; /* default: 0.625rem */
|
|
70
|
-
}
|
|
25
|
+
@import "@3df-spa/ui/theme.css";
|
|
71
26
|
```
|
|
72
|
-
|
|
73
|
-
## Componentes
|
|
74
|
-
|
|
75
|
-
**Formularios** — `Button` · `Input` · `Textarea` · `Select` · `Checkbox` · `Radio` · `Switch` · `Toggle` · `Slider` · `Label` · `InputOTP` · `Calendar` · `DatePicker` · `DateRangePicker` · `Combobox`
|
|
76
|
-
|
|
77
|
-
**Layout** — `Card` · `Separator` · `ScrollArea` · `Table` · `Skeleton` · `Progress` · `Tabs` · `Accordion` · `Collapsible` · `Carousel` · `Banner` · `Item` · `EmptyState`
|
|
78
|
-
|
|
79
|
-
**Navegación** — `Sidebar` · `NavigationMenu` · `Menubar` · `Breadcrumb` · `Pagination` · `Command`
|
|
80
|
-
|
|
81
|
-
**Overlays** — `Dialog` · `Drawer` · `Sheet` · `AlertDialog` · `DropdownMenu` · `ContextMenu` · `Popover` · `HoverCard` · `Tooltip` · `Toaster`
|
|
82
|
-
|
|
83
|
-
**Feedback** — `Alert` · `Badge` · `Avatar`
|
|
84
|
-
|
|
85
|
-
**Marketing** — `Hero` (6 variantes) · `LogoCloud` · `LogoMarquee`
|
|
86
|
-
|
|
87
|
-
## Licencia
|
|
88
|
-
|
|
89
|
-
MIT © 2026 [3DF Space](https://github.com/3df-space)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@3df-spa/ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "Vue 3 component library — TypeScript strict, Tailwind CSS v4, accessible, zero-runtime",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"vue",
|
|
@@ -44,12 +44,14 @@
|
|
|
44
44
|
"README.md",
|
|
45
45
|
"LICENSE"
|
|
46
46
|
],
|
|
47
|
-
"
|
|
47
|
+
"dependencies": {
|
|
48
48
|
"class-variance-authority": "^0.7.1",
|
|
49
49
|
"clsx": "^2.1.1",
|
|
50
|
+
"tailwind-merge": "^3.4.0"
|
|
51
|
+
},
|
|
52
|
+
"peerDependencies": {
|
|
50
53
|
"date-fns": "^3.0.0 || ^4.0.0",
|
|
51
54
|
"embla-carousel": "^8.0.0",
|
|
52
|
-
"tailwind-merge": "^3.4.0",
|
|
53
55
|
"vue": "^3.0.0"
|
|
54
56
|
},
|
|
55
57
|
"devDependencies": {
|