@3df-spa/ui 1.0.3 → 1.0.5
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/LICENSE +1 -1
- package/README.md +8 -71
- package/dist/index.css +1 -0
- package/dist/index.d.ts +5093 -0
- package/dist/index.js +9740 -0
- package/dist/styles.css +4 -0
- package/package.json +4 -5
package/LICENSE
CHANGED
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/dist/index.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@keyframes progress-indeterminate-850a98d5{0%{transform:translate(-100%)}50%{transform:translate(0)}to{transform:translate(100%)}}.animate-progress-indeterminate[data-v-850a98d5]{animation:progress-indeterminate-850a98d5 1.5s var(--ease-snappy, cubic-bezier(.25, 0, 0, 1)) infinite}[data-scroll-area=viewport][data-v-40162483]::-webkit-scrollbar{display:none}.sidebar-overlay-enter-active[data-v-808aa99e]{transition:opacity .35s cubic-bezier(.22,1,.36,1)}.sidebar-overlay-leave-active[data-v-808aa99e]{transition:opacity .25s cubic-bezier(.4,0,.2,1)}.sidebar-overlay-enter-from[data-v-808aa99e],.sidebar-overlay-leave-to[data-v-808aa99e]{opacity:0}.sidebar-sheet-left-enter-active[data-v-808aa99e]{transition:transform .4s cubic-bezier(.22,1,.36,1)}.sidebar-sheet-left-leave-active[data-v-808aa99e]{transition:transform .3s cubic-bezier(.4,0,.6,1)}.sidebar-sheet-left-enter-from[data-v-808aa99e],.sidebar-sheet-left-leave-to[data-v-808aa99e]{transform:translate(-100%)}.sidebar-sheet-right-enter-active[data-v-808aa99e]{transition:transform .4s cubic-bezier(.22,1,.36,1)}.sidebar-sheet-right-leave-active[data-v-808aa99e]{transition:transform .3s cubic-bezier(.4,0,.6,1)}.sidebar-sheet-right-enter-from[data-v-808aa99e],.sidebar-sheet-right-leave-to[data-v-808aa99e]{transform:translate(100%)}.mask-fade[data-v-9288f860]{mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%)}
|