@adamosuiteservices/ui 2.11.15 → 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 (40) hide show
  1. package/dist/colors.css +1 -1
  2. package/dist/styles.css +1 -1
  3. package/docs/AI-GUIDE.md +321 -321
  4. package/docs/components/layout/sidebar.md +399 -399
  5. package/docs/components/layout/toaster.md +436 -436
  6. package/docs/components/ui/accordion-rounded.md +584 -584
  7. package/docs/components/ui/accordion.md +269 -269
  8. package/docs/components/ui/button-group.md +984 -984
  9. package/docs/components/ui/button.md +1137 -1137
  10. package/docs/components/ui/calendar.md +1159 -1159
  11. package/docs/components/ui/card.md +1455 -1455
  12. package/docs/components/ui/checkbox.md +292 -292
  13. package/docs/components/ui/collapsible.md +323 -323
  14. package/docs/components/ui/command.md +454 -454
  15. package/docs/components/ui/context-menu.md +540 -540
  16. package/docs/components/ui/dialog.md +628 -628
  17. package/docs/components/ui/dropdown-menu.md +709 -709
  18. package/docs/components/ui/field.md +706 -706
  19. package/docs/components/ui/hover-card.md +446 -446
  20. package/docs/components/ui/input.md +362 -362
  21. package/docs/components/ui/kbd.md +434 -434
  22. package/docs/components/ui/label.md +359 -359
  23. package/docs/components/ui/pagination.md +650 -650
  24. package/docs/components/ui/popover.md +536 -536
  25. package/docs/components/ui/progress.md +182 -182
  26. package/docs/components/ui/radio-group.md +311 -311
  27. package/docs/components/ui/select.md +352 -352
  28. package/docs/components/ui/separator.md +214 -214
  29. package/docs/components/ui/sheet.md +142 -142
  30. package/docs/components/ui/skeleton.md +140 -140
  31. package/docs/components/ui/slider.md +341 -341
  32. package/docs/components/ui/spinner.md +170 -170
  33. package/docs/components/ui/switch.md +408 -408
  34. package/docs/components/ui/tabs-underline.md +106 -106
  35. package/docs/components/ui/tabs.md +122 -122
  36. package/docs/components/ui/textarea.md +243 -243
  37. package/docs/components/ui/toggle.md +237 -237
  38. package/docs/components/ui/tooltip.md +317 -317
  39. package/docs/components/ui/typography.md +280 -280
  40. 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>