@adamosuiteservices/ui 2.11.14 → 2.11.16

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.
Files changed (41) hide show
  1. package/dist/colors.css +1 -1
  2. package/dist/styles.css +1 -1
  3. package/dist/themes.css +1 -1
  4. package/docs/AI-GUIDE.md +321 -321
  5. package/docs/components/layout/sidebar.md +399 -399
  6. package/docs/components/layout/toaster.md +436 -436
  7. package/docs/components/ui/accordion-rounded.md +584 -584
  8. package/docs/components/ui/accordion.md +269 -269
  9. package/docs/components/ui/button-group.md +984 -984
  10. package/docs/components/ui/button.md +1137 -1137
  11. package/docs/components/ui/calendar.md +1159 -1159
  12. package/docs/components/ui/card.md +1455 -1455
  13. package/docs/components/ui/checkbox.md +292 -292
  14. package/docs/components/ui/collapsible.md +323 -323
  15. package/docs/components/ui/command.md +454 -454
  16. package/docs/components/ui/context-menu.md +540 -540
  17. package/docs/components/ui/dialog.md +628 -628
  18. package/docs/components/ui/dropdown-menu.md +709 -709
  19. package/docs/components/ui/field.md +706 -706
  20. package/docs/components/ui/hover-card.md +446 -446
  21. package/docs/components/ui/input.md +362 -362
  22. package/docs/components/ui/kbd.md +434 -434
  23. package/docs/components/ui/label.md +359 -359
  24. package/docs/components/ui/pagination.md +650 -650
  25. package/docs/components/ui/popover.md +536 -536
  26. package/docs/components/ui/progress.md +182 -182
  27. package/docs/components/ui/radio-group.md +311 -311
  28. package/docs/components/ui/select.md +352 -352
  29. package/docs/components/ui/separator.md +214 -214
  30. package/docs/components/ui/sheet.md +142 -142
  31. package/docs/components/ui/skeleton.md +140 -140
  32. package/docs/components/ui/slider.md +341 -341
  33. package/docs/components/ui/spinner.md +170 -170
  34. package/docs/components/ui/switch.md +408 -408
  35. package/docs/components/ui/tabs-underline.md +106 -106
  36. package/docs/components/ui/tabs.md +122 -122
  37. package/docs/components/ui/textarea.md +243 -243
  38. package/docs/components/ui/toggle.md +237 -237
  39. package/docs/components/ui/tooltip.md +317 -317
  40. package/docs/components/ui/typography.md +280 -280
  41. package/package.json +1 -1
package/docs/components/ui/tabs-underline.md CHANGED
@@ -1,106 +1,106 @@
1
- # Tabs Underline
2
-
3
- Pestañas con underline. Variante de tabs sin background.
4
-
5
- ## Descripción
6
-
7
- Variante del componente Tabs con estilo de subrayado en lugar de fondo.
8
-
9
- ## Importación
10
-
11
- ```typescript
12
- import {
13
- TabsUnderline,
14
- TabsUnderlineList,
15
- TabsUnderlineTrigger,
16
- TabsUnderlineContent,
17
- } from "@adamosuiteservices/ui/tabs-underline";
18
- ```
19
-
20
- ## Anatomía
21
-
22
- ```tsx
23
- <TabsUnderline defaultValue="account">
24
- <TabsUnderlineList>
25
- <TabsUnderlineTrigger value="account">Account</TabsUnderlineTrigger>
26
- <TabsUnderlineTrigger value="password">Password</TabsUnderlineTrigger>
27
- </TabsUnderlineList>
28
- <TabsUnderlineContent value="account">Account content</TabsUnderlineContent>
29
- <TabsUnderlineContent value="password">Password content</TabsUnderlineContent>
30
- </TabsUnderline>
31
- ```
32
-
33
- **Componentes**: 4 (TabsUnderline, TabsUnderlineList, TabsUnderlineTrigger, TabsUnderlineContent)
34
-
35
- ## Props
36
-
37
- Idéntico a `tabs` component. Ver documentación de tabs para props completas.
38
-
39
- ## Patrones de Uso
40
-
41
- ### Básico
42
-
43
- ```tsx
44
- <TabsUnderline defaultValue="overview">
45
- <TabsUnderlineList>
46
- <TabsUnderlineTrigger value="overview">Overview</TabsUnderlineTrigger>
47
- <TabsUnderlineTrigger value="analytics">Analytics</TabsUnderlineTrigger>
48
- <TabsUnderlineTrigger value="reports">Reports</TabsUnderlineTrigger>
49
- </TabsUnderlineList>
50
- <TabsUnderlineContent value="overview">Overview content</TabsUnderlineContent>
51
- <TabsUnderlineContent value="analytics">
52
- Analytics content
53
- </TabsUnderlineContent>
54
- <TabsUnderlineContent value="reports">Reports content</TabsUnderlineContent>
55
- </TabsUnderline>
56
- ```
57
-
58
- ### Con Iconos
59
-
60
- ```tsx
61
- import { Icon } from "@adamosuiteservices/ui/icon";
62
-
63
- <TabsUnderlineList>
64
- <TabsUnderlineTrigger value="charts">
65
- <Icon symbol="bar_chart" />
66
- Charts
67
- </TabsUnderlineTrigger>
68
- <TabsUnderlineTrigger value="table">
69
- <Icon symbol="table" />
70
- Table
71
- </TabsUnderlineTrigger>
72
- <TabsUnderlineTrigger value="report">
73
- <Icon symbol="description" />
74
- Report
75
- </TabsUnderlineTrigger>
76
- </TabsUnderlineList>;
77
- ```
78
-
79
- ## Diferencias con Tabs Regular
80
-
81
- - Subrayado animado en lugar de fondo
82
- - Estilo más minimalista
83
- - API idéntica a Tabs regular
84
-
85
- ## Diferencia vs Tabs
86
-
87
- **tabs**: Background `bg-muted` con `rounded-lg`, active usa `bg-primary`
88
- **tabs-underline**: Sin background, active usa `border-b-2 border-b-primary`
89
-
90
- ## Casos de Uso
91
-
92
- **Navigation**: Navegación principal
93
- **Content sections**: Secciones de contenido
94
- **Data views**: Diferentes visualizaciones
95
-
96
- ## Estilos Base
97
-
98
- - **List**: Sin background, `h-9`
99
- - **Trigger active**: `border-b-2 border-b-primary text-primary`
100
- - **Trigger inactive**: `border-b-2 border-b-transparent`
101
-
102
- ## Referencias
103
-
104
- - Ver [Tabs](./tabs.md) para documentación completa
105
- - **Radix UI Tabs**: <https://www.radix-ui.com/primitives/docs/components/tabs>
106
- - **shadcn/ui Tabs**: <https://ui.shadcn.com/docs/components/tabs>
1
+ # Tabs Underline
2
+
3
+ Pestañas con underline. Variante de tabs sin background.
4
+
5
+ ## Descripción
6
+
7
+ Variante del componente Tabs con estilo de subrayado en lugar de fondo.
8
+
9
+ ## Importación
10
+
11
+ ```typescript
12
+ import {
13
+ TabsUnderline,
14
+ TabsUnderlineList,
15
+ TabsUnderlineTrigger,
16
+ TabsUnderlineContent,
17
+ } from "@adamosuiteservices/ui/tabs-underline";
18
+ ```
19
+
20
+ ## Anatomía
21
+
22
+ ```tsx
23
+ <TabsUnderline defaultValue="account">
24
+ <TabsUnderlineList>
25
+ <TabsUnderlineTrigger value="account">Account</TabsUnderlineTrigger>
26
+ <TabsUnderlineTrigger value="password">Password</TabsUnderlineTrigger>
27
+ </TabsUnderlineList>
28
+ <TabsUnderlineContent value="account">Account content</TabsUnderlineContent>
29
+ <TabsUnderlineContent value="password">Password content</TabsUnderlineContent>
30
+ </TabsUnderline>
31
+ ```
32
+
33
+ **Componentes**: 4 (TabsUnderline, TabsUnderlineList, TabsUnderlineTrigger, TabsUnderlineContent)
34
+
35
+ ## Props
36
+
37
+ Idéntico a `tabs` component. Ver documentación de tabs para props completas.
38
+
39
+ ## Patrones de Uso
40
+
41
+ ### Básico
42
+
43
+ ```tsx
44
+ <TabsUnderline defaultValue="overview">
45
+ <TabsUnderlineList>
46
+ <TabsUnderlineTrigger value="overview">Overview</TabsUnderlineTrigger>
47
+ <TabsUnderlineTrigger value="analytics">Analytics</TabsUnderlineTrigger>
48
+ <TabsUnderlineTrigger value="reports">Reports</TabsUnderlineTrigger>
49
+ </TabsUnderlineList>
50
+ <TabsUnderlineContent value="overview">Overview content</TabsUnderlineContent>
51
+ <TabsUnderlineContent value="analytics">
52
+ Analytics content
53
+ </TabsUnderlineContent>
54
+ <TabsUnderlineContent value="reports">Reports content</TabsUnderlineContent>
55
+ </TabsUnderline>
56
+ ```
57
+
58
+ ### Con Iconos
59
+
60
+ ```tsx
61
+ import { Icon } from "@adamosuiteservices/ui/icon";
62
+
63
+ <TabsUnderlineList>
64
+ <TabsUnderlineTrigger value="charts">
65
+ <Icon symbol="bar_chart" />
66
+ Charts
67
+ </TabsUnderlineTrigger>
68
+ <TabsUnderlineTrigger value="table">
69
+ <Icon symbol="table" />
70
+ Table
71
+ </TabsUnderlineTrigger>
72
+ <TabsUnderlineTrigger value="report">
73
+ <Icon symbol="description" />
74
+ Report
75
+ </TabsUnderlineTrigger>
76
+ </TabsUnderlineList>;
77
+ ```
78
+
79
+ ## Diferencias con Tabs Regular
80
+
81
+ - Subrayado animado en lugar de fondo
82
+ - Estilo más minimalista
83
+ - API idéntica a Tabs regular
84
+
85
+ ## Diferencia vs Tabs
86
+
87
+ **tabs**: Background `bg-muted` con `rounded-lg`, active usa `bg-primary`
88
+ **tabs-underline**: Sin background, active usa `border-b-2 border-b-primary`
89
+
90
+ ## Casos de Uso
91
+
92
+ **Navigation**: Navegación principal
93
+ **Content sections**: Secciones de contenido
94
+ **Data views**: Diferentes visualizaciones
95
+
96
+ ## Estilos Base
97
+
98
+ - **List**: Sin background, `h-9`
99
+ - **Trigger active**: `border-b-2 border-b-primary text-primary`
100
+ - **Trigger inactive**: `border-b-2 border-b-transparent`
101
+
102
+ ## Referencias
103
+
104
+ - Ver [Tabs](./tabs.md) para documentación completa
105
+ - **Radix UI Tabs**: <https://www.radix-ui.com/primitives/docs/components/tabs>
106
+ - **shadcn/ui Tabs**: <https://ui.shadcn.com/docs/components/tabs>
package/docs/components/ui/tabs.md CHANGED
@@ -1,122 +1,122 @@
1
- # Tabs
2
-
3
- Pestañas con background. Basado en Radix UI.
4
-
5
- ## Descripción
6
-
7
- El componente `Tabs` permite organizar contenido en secciones que se pueden alternar.
8
-
9
- ## Importación
10
-
11
- ```typescript
12
- import {
13
- Tabs,
14
- TabsList,
15
- TabsTrigger,
16
- TabsContent,
17
- } from "@adamosuiteservices/ui/tabs";
18
- ```
19
-
20
- ## Anatomía
21
-
22
- ```tsx
23
- <Tabs defaultValue="account">
24
- <TabsList>
25
- <TabsTrigger value="account">Account</TabsTrigger>
26
- <TabsTrigger value="password">Password</TabsTrigger>
27
- </TabsList>
28
- <TabsContent value="account">Account settings content</TabsContent>
29
- <TabsContent value="password">Password settings content</TabsContent>
30
- </Tabs>
31
- ```
32
-
33
- **Componentes**: 4 (Tabs, TabsList, TabsTrigger, TabsContent)
34
-
35
- ## Props
36
-
37
- ### Tabs (Root)
38
-
39
- | Prop | Tipo | Descripción |
40
- | --------------- | ------------------------- | -------------------------- |
41
- | `defaultValue` | `string` | Tab inicial (uncontrolled) |
42
- | `value` | `string` | Tab controlado |
43
- | `onValueChange` | `(value: string) => void` | Callback al cambiar |
44
-
45
- ### TabsTrigger
46
-
47
- | Prop | Tipo | Descripción |
48
- | ---------- | --------- | ------------------- |
49
- | `value` | `string` | Valor único del tab |
50
- | `disabled` | `boolean` | Deshabilitar tab |
51
-
52
- ## Patrones de Uso
53
-
54
- ### Básico
55
-
56
- ```tsx
57
- <Tabs defaultValue="account">
58
- <TabsList>
59
- <TabsTrigger value="account">Account</TabsTrigger>
60
- <TabsTrigger value="password">Password</TabsTrigger>
61
- </TabsList>
62
- <TabsContent value="account">Account settings content</TabsContent>
63
- <TabsContent value="password">Password settings content</TabsContent>
64
- </Tabs>
65
- ```
66
-
67
- ### Controlado
68
-
69
- ```tsx
70
- const [activeTab, setActiveTab] = useState("overview");
71
-
72
- <Tabs value={activeTab} onValueChange={setActiveTab}>
73
- <TabsList>
74
- <TabsTrigger value="overview">Overview</TabsTrigger>
75
- <TabsTrigger value="analytics">Analytics</TabsTrigger>
76
- </TabsList>
77
- <TabsContent value="overview">Overview content</TabsContent>
78
- <TabsContent value="analytics">Analytics content</TabsContent>
79
- </Tabs>;
80
- ```
81
-
82
- ### Con Iconos
83
-
84
- ```tsx
85
- import { Icon } from "@adamosuiteservices/ui/icon";
86
-
87
- <TabsList>
88
- <TabsTrigger value="home">
89
- <Icon symbol="home" />
90
- Home
91
- </TabsTrigger>
92
- <TabsTrigger value="settings">
93
- <Icon symbol="settings" />
94
- Settings
95
- </TabsTrigger>
96
- <TabsTrigger value="profile">
97
- <Icon symbol="person" />
98
- Profile
99
- </TabsTrigger>
100
- <TabsTrigger value="security">
101
- <Icon symbol="key" />
102
- Security
103
- </TabsTrigger>
104
- </TabsList>;
105
- ```
106
-
107
- ## Casos de Uso
108
-
109
- **Settings**: Secciones de configuración
110
- **Navigation**: Navegación por secciones
111
- **Data views**: Diferentes vistas de datos
112
-
113
- ## Estilos Base
114
-
115
- - **List**: `bg-muted rounded-lg h-9`
116
- - **Trigger active**: `bg-primary text-primary-foreground shadow-sm`
117
- - **Trigger**: `rounded-md px-2 py-1 font-semibold`
118
-
119
- ## Referencias
120
-
121
- - **Radix UI Tabs**: <https://www.radix-ui.com/primitives/docs/components/tabs>
122
- - **shadcn/ui Tabs**: <https://ui.shadcn.com/docs/components/tabs>
1
+ # Tabs
2
+
3
+ Pestañas con background. Basado en Radix UI.
4
+
5
+ ## Descripción
6
+
7
+ El componente `Tabs` permite organizar contenido en secciones que se pueden alternar.
8
+
9
+ ## Importación
10
+
11
+ ```typescript
12
+ import {
13
+ Tabs,
14
+ TabsList,
15
+ TabsTrigger,
16
+ TabsContent,
17
+ } from "@adamosuiteservices/ui/tabs";
18
+ ```
19
+
20
+ ## Anatomía
21
+
22
+ ```tsx
23
+ <Tabs defaultValue="account">
24
+ <TabsList>
25
+ <TabsTrigger value="account">Account</TabsTrigger>
26
+ <TabsTrigger value="password">Password</TabsTrigger>
27
+ </TabsList>
28
+ <TabsContent value="account">Account settings content</TabsContent>
29
+ <TabsContent value="password">Password settings content</TabsContent>
30
+ </Tabs>
31
+ ```
32
+
33
+ **Componentes**: 4 (Tabs, TabsList, TabsTrigger, TabsContent)
34
+
35
+ ## Props
36
+
37
+ ### Tabs (Root)
38
+
39
+ | Prop | Tipo | Descripción |
40
+ | --------------- | ------------------------- | -------------------------- |
41
+ | `defaultValue` | `string` | Tab inicial (uncontrolled) |
42
+ | `value` | `string` | Tab controlado |
43
+ | `onValueChange` | `(value: string) => void` | Callback al cambiar |
44
+
45
+ ### TabsTrigger
46
+
47
+ | Prop | Tipo | Descripción |
48
+ | ---------- | --------- | ------------------- |
49
+ | `value` | `string` | Valor único del tab |
50
+ | `disabled` | `boolean` | Deshabilitar tab |
51
+
52
+ ## Patrones de Uso
53
+
54
+ ### Básico
55
+
56
+ ```tsx
57
+ <Tabs defaultValue="account">
58
+ <TabsList>
59
+ <TabsTrigger value="account">Account</TabsTrigger>
60
+ <TabsTrigger value="password">Password</TabsTrigger>
61
+ </TabsList>
62
+ <TabsContent value="account">Account settings content</TabsContent>
63
+ <TabsContent value="password">Password settings content</TabsContent>
64
+ </Tabs>
65
+ ```
66
+
67
+ ### Controlado
68
+
69
+ ```tsx
70
+ const [activeTab, setActiveTab] = useState("overview");
71
+
72
+ <Tabs value={activeTab} onValueChange={setActiveTab}>
73
+ <TabsList>
74
+ <TabsTrigger value="overview">Overview</TabsTrigger>
75
+ <TabsTrigger value="analytics">Analytics</TabsTrigger>
76
+ </TabsList>
77
+ <TabsContent value="overview">Overview content</TabsContent>
78
+ <TabsContent value="analytics">Analytics content</TabsContent>
79
+ </Tabs>;
80
+ ```
81
+
82
+ ### Con Iconos
83
+
84
+ ```tsx
85
+ import { Icon } from "@adamosuiteservices/ui/icon";
86
+
87
+ <TabsList>
88
+ <TabsTrigger value="home">
89
+ <Icon symbol="home" />
90
+ Home
91
+ </TabsTrigger>
92
+ <TabsTrigger value="settings">
93
+ <Icon symbol="settings" />
94
+ Settings
95
+ </TabsTrigger>
96
+ <TabsTrigger value="profile">
97
+ <Icon symbol="person" />
98
+ Profile
99
+ </TabsTrigger>
100
+ <TabsTrigger value="security">
101
+ <Icon symbol="key" />
102
+ Security
103
+ </TabsTrigger>
104
+ </TabsList>;
105
+ ```
106
+
107
+ ## Casos de Uso
108
+
109
+ **Settings**: Secciones de configuración
110
+ **Navigation**: Navegación por secciones
111
+ **Data views**: Diferentes vistas de datos
112
+
113
+ ## Estilos Base
114
+
115
+ - **List**: `bg-muted rounded-lg h-9`
116
+ - **Trigger active**: `bg-primary text-primary-foreground shadow-sm`
117
+ - **Trigger**: `rounded-md px-2 py-1 font-semibold`
118
+
119
+ ## Referencias
120
+
121
+ - **Radix UI Tabs**: <https://www.radix-ui.com/primitives/docs/components/tabs>
122
+ - **shadcn/ui Tabs**: <https://ui.shadcn.com/docs/components/tabs>