siesa-ui-kit 1.0.10 → 1.0.12
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/dist/components/Button/icons.d.ts +6 -5
- package/dist/components/Button/icons.d.ts.map +1 -1
- package/dist/components/Dropdown/Dropdown.d.ts +68 -9
- package/dist/components/Dropdown/Dropdown.d.ts.map +1 -1
- package/dist/components/Dropdown/Dropdown.types.d.ts +18 -0
- package/dist/components/Dropdown/Dropdown.types.d.ts.map +1 -1
- package/dist/components/Dropdown/icons.d.ts +3 -0
- package/dist/components/Dropdown/icons.d.ts.map +1 -1
- package/dist/components/DropdownItemCollapsible/DropdownItemCollapsible.d.ts.map +1 -1
- package/dist/components/DropdownItemCollapsible/DropdownItemCollapsible.types.d.ts +21 -0
- package/dist/components/DropdownItemCollapsible/DropdownItemCollapsible.types.d.ts.map +1 -1
- package/dist/components/Navbar/Navbar.d.ts.map +1 -1
- package/dist/components/Navbar/Navbar.types.d.ts +46 -1
- package/dist/components/Navbar/Navbar.types.d.ts.map +1 -1
- package/dist/components/NavigationRailGroup/NavigationRailGroup.d.ts +122 -0
- package/dist/components/NavigationRailGroup/NavigationRailGroup.d.ts.map +1 -0
- package/dist/components/NavigationRailGroup/NavigationRailGroup.types.d.ts +139 -0
- package/dist/components/NavigationRailGroup/NavigationRailGroup.types.d.ts.map +1 -0
- package/dist/components/NavigationRailGroup/icons.d.ts +33 -0
- package/dist/components/NavigationRailGroup/icons.d.ts.map +1 -0
- package/dist/components/NavigationRailGroup/index.d.ts +4 -0
- package/dist/components/NavigationRailGroup/index.d.ts.map +1 -0
- package/dist/components/NavigationRailItem/NavigationRailItem.d.ts.map +1 -1
- package/dist/components/NavigationRailItem/NavigationRailItem.types.d.ts +14 -0
- package/dist/components/NavigationRailItem/NavigationRailItem.types.d.ts.map +1 -1
- package/dist/components/NavigationRailTypes/NavigationRailTypes.d.ts.map +1 -1
- package/dist/components/NavigationRailTypes/NavigationRailTypes.types.d.ts +49 -0
- package/dist/components/NavigationRailTypes/NavigationRailTypes.types.d.ts.map +1 -1
- package/dist/components/NavigationRailTypes/icons.d.ts +15 -29
- package/dist/components/NavigationRailTypes/icons.d.ts.map +1 -1
- package/dist/components/Select/Select.d.ts.map +1 -1
- package/dist/components/Select/icons.d.ts +6 -2
- package/dist/components/Select/icons.d.ts.map +1 -1
- package/dist/index.d.ts +32 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/siesa-ui-kit.cjs +483 -235
- package/dist/siesa-ui-kit.cjs.map +1 -1
- package/dist/siesa-ui-kit.mjs +6718 -1640
- package/dist/siesa-ui-kit.mjs.map +1 -1
- package/dist/style.css +1 -1
- package/dist/views/LayoutBase/LayoutBase.d.ts +73 -0
- package/dist/views/LayoutBase/LayoutBase.d.ts.map +1 -0
- package/dist/views/LayoutBase/LayoutBase.types.d.ts +99 -0
- package/dist/views/LayoutBase/LayoutBase.types.d.ts.map +1 -0
- package/dist/views/LayoutBase/index.d.ts +3 -0
- package/dist/views/LayoutBase/index.d.ts.map +1 -0
- package/dist/views/ListView/ListView.d.ts +18 -12
- package/dist/views/ListView/ListView.d.ts.map +1 -1
- package/dist/views/ListView/ListView.types.d.ts +31 -94
- package/dist/views/ListView/ListView.types.d.ts.map +1 -1
- package/dist/views/ListView/index.d.ts +1 -1
- package/dist/views/ListView/index.d.ts.map +1 -1
- package/package.json +6 -1
|
@@ -3,23 +3,24 @@ interface IconProps {
|
|
|
3
3
|
className?: string;
|
|
4
4
|
}
|
|
5
5
|
/**
|
|
6
|
-
* Icono Plus (heroicons
|
|
6
|
+
* Icono Plus (heroicons/plus)
|
|
7
7
|
*/
|
|
8
8
|
export declare const PlusIcon: React.FC<IconProps>;
|
|
9
9
|
/**
|
|
10
|
-
* Icono ChevronDown (heroicons
|
|
10
|
+
* Icono ChevronDown (heroicons/chevron-down)
|
|
11
11
|
*/
|
|
12
12
|
export declare const ChevronDownIcon: React.FC<IconProps>;
|
|
13
13
|
/**
|
|
14
|
-
* Icono ArrowRight (heroicons
|
|
14
|
+
* Icono ArrowRight (heroicons/arrow-right)
|
|
15
|
+
* @param {string} className Clases de Tailwind
|
|
15
16
|
*/
|
|
16
17
|
export declare const ArrowRightIcon: React.FC<IconProps>;
|
|
17
18
|
/**
|
|
18
|
-
* Icono Check (heroicons
|
|
19
|
+
* Icono Check (heroicons/check)
|
|
19
20
|
*/
|
|
20
21
|
export declare const CheckIcon: React.FC<IconProps>;
|
|
21
22
|
/**
|
|
22
|
-
* Icono X (heroicons
|
|
23
|
+
* Icono X (heroicons/x-mark)
|
|
23
24
|
*/
|
|
24
25
|
export declare const XIcon: React.FC<IconProps>;
|
|
25
26
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/Button/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/Button/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,UAAU,SAAS;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAExC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAE/C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAE9C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAEzC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAErC,CAAC"}
|
|
@@ -2,32 +2,91 @@ import React from 'react';
|
|
|
2
2
|
import type { DropdownProps, DropdownItemProps, DropdownHeadingProps, DropdownDividerProps } from './Dropdown.types';
|
|
3
3
|
/**
|
|
4
4
|
* Componente Dropdown del sistema de diseño Siesa
|
|
5
|
-
*
|
|
5
|
+
*
|
|
6
|
+
* Menú desplegable implementado pixel-perfect según especificaciones de Figma (node 4194-15135).
|
|
7
|
+
* Soporta múltiples tipos de items: básicos, con iconos, con descripciones, con shortcuts, con headings y dividers.
|
|
8
|
+
*
|
|
9
|
+
* **Especificaciones de Figma:**
|
|
10
|
+
* - Trigger button: bg-white, border-border-primary, rounded-lg (8px), gap-2 (8px)
|
|
11
|
+
* - Menu: bg-background-secondary (#f4f4f5), shadow-lg, rounded-lg (8px), padding 4px, min-width 182px
|
|
12
|
+
* - Items: padding 16px horizontal, 8px vertical, rounded-lg, gap-3 (12px)
|
|
13
|
+
* - Typography: Label/Small (14px Bold) para trigger, Paragraph/Small (14px Regular) para items
|
|
14
|
+
* - Typography: Paragraph/Tiny (12px Regular) para headings y descripciones
|
|
15
|
+
*
|
|
16
|
+
* **Variantes:**
|
|
17
|
+
* - `default`: Botón con texto + icono chevron
|
|
18
|
+
* - `icon-only`: Solo icono chevron (36x36px) - ideal para espacios reducidos
|
|
19
|
+
*
|
|
20
|
+
* **Estados del trigger:**
|
|
21
|
+
* - Default: bg-white, text-content-secondary, border-border-primary
|
|
22
|
+
* - Hover: bg-background-secondary (#fafafa)
|
|
23
|
+
* - Focus: ring-2 ring-primary-custom-400 con offset-2
|
|
24
|
+
* - Disabled: opacity-50 con pointer-events-none
|
|
25
|
+
*
|
|
26
|
+
* **Estados de items:**
|
|
27
|
+
* - Default: text-content-primary
|
|
28
|
+
* - Hover: bg-background-secondary (#fafafa)
|
|
29
|
+
* - Selected: bg-primary-custom-100 (light) / bg-primary-custom-600/20 (dark)
|
|
30
|
+
*
|
|
31
|
+
* **Dark Mode:**
|
|
32
|
+
* - Trigger: dark:bg-dark-bg-primary, dark:hover:bg-gray-800
|
|
33
|
+
* - Menu: bg-background-secondary → dark:bg-dark-bg-primary
|
|
34
|
+
* - Items hover: dark:hover:bg-gray-800
|
|
35
|
+
* - Shadow: shadow-lg funciona en ambos modos
|
|
36
|
+
*
|
|
37
|
+
* **Funcionalidad:**
|
|
38
|
+
* - Cierre automático al hacer click fuera del dropdown
|
|
39
|
+
* - Cierre con tecla Escape
|
|
40
|
+
* - Modo controlado/no controlado (prop `open` + `onOpenChange`)
|
|
41
|
+
* - Callback `onClick` por item individual
|
|
6
42
|
*
|
|
7
43
|
* Mejores prácticas implementadas:
|
|
8
44
|
* - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
|
|
9
45
|
* - Dark mode con estrategia 'class' (darkMode: 'class')
|
|
10
46
|
* - Tokens de color consistentes con la documentación
|
|
11
47
|
* - Type safety con TypeScript estricto
|
|
12
|
-
* - Accesibilidad con ARIA labels
|
|
13
|
-
* -
|
|
48
|
+
* - Accesibilidad con ARIA labels (aria-haspopup, aria-expanded)
|
|
49
|
+
* - Keyboard navigation (Escape para cerrar)
|
|
14
50
|
*
|
|
15
51
|
* @see docs/colors.md - Sistema de colores
|
|
16
|
-
* @see docs/typography.md - Sistema tipográfico
|
|
52
|
+
* @see docs/typography.md - Sistema tipográfico (Label/Small, Paragraph/Small, Paragraph/Tiny)
|
|
17
53
|
* @see docs/spacing.md - Sistema de espaciado
|
|
18
|
-
* @see docs/shadows.md - Sistema de sombras
|
|
54
|
+
* @see docs/shadows.md - Sistema de sombras (shadow-lg)
|
|
55
|
+
* @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4194-15135 - Diseño Figma
|
|
19
56
|
*
|
|
20
57
|
* @example
|
|
21
58
|
* ```tsx
|
|
59
|
+
* // Dropdown básico
|
|
22
60
|
* <Dropdown
|
|
23
|
-
* placeholder="
|
|
61
|
+
* placeholder="Opciones"
|
|
24
62
|
* items={[
|
|
25
|
-
* { children: '
|
|
26
|
-
* { children: '
|
|
63
|
+
* { children: 'Cuenta', icon: <UserIcon /> },
|
|
64
|
+
* { children: 'Configuración', icon: <CogIcon /> },
|
|
27
65
|
* { isDivider: true },
|
|
28
|
-
* { children: '
|
|
66
|
+
* { children: 'Cerrar sesión' },
|
|
29
67
|
* ]}
|
|
30
68
|
* />
|
|
69
|
+
*
|
|
70
|
+
* // Dropdown con headings y descripciones
|
|
71
|
+
* <Dropdown
|
|
72
|
+
* placeholder="Menú"
|
|
73
|
+
* items={[
|
|
74
|
+
* { isHeading: true, children: 'Cuenta' },
|
|
75
|
+
* { children: 'Perfil', icon: <UserIcon />, description: 'Administra tu perfil' },
|
|
76
|
+
* { isDivider: true },
|
|
77
|
+
* { children: 'Deshacer', shortcut: '⌘ Z' },
|
|
78
|
+
* ]}
|
|
79
|
+
* />
|
|
80
|
+
*
|
|
81
|
+
* // Dropdown solo icono
|
|
82
|
+
* <Dropdown variant="icon-only" items={[...]} />
|
|
83
|
+
*
|
|
84
|
+
* // Dropdown controlado
|
|
85
|
+
* <Dropdown
|
|
86
|
+
* open={isOpen}
|
|
87
|
+
* onOpenChange={setIsOpen}
|
|
88
|
+
* items={[...]}
|
|
89
|
+
* />
|
|
31
90
|
* ```
|
|
32
91
|
*/
|
|
33
92
|
export declare const Dropdown: React.FC<DropdownProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EACV,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EACpB,oBAAoB,EACrB,MAAM,kBAAkB,CAAC;AAK1B
|
|
1
|
+
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EACV,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EACpB,oBAAoB,EACrB,MAAM,kBAAkB,CAAC;AAK1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwFG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA6Q5C,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAoFpD,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA2B1D,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAsB1D,CAAC"}
|
|
@@ -48,6 +48,24 @@ export interface DropdownProps {
|
|
|
48
48
|
* @default 'Options'
|
|
49
49
|
*/
|
|
50
50
|
placeholder?: string;
|
|
51
|
+
/**
|
|
52
|
+
* Función para renderizar un trigger personalizado
|
|
53
|
+
* Recibe el estado isOpen y debe retornar un ReactNode
|
|
54
|
+
* Útil para casos de uso avanzados como menús de usuario con avatar
|
|
55
|
+
*
|
|
56
|
+
* @example
|
|
57
|
+
* ```tsx
|
|
58
|
+
* <Dropdown
|
|
59
|
+
* renderTrigger={(isOpen) => (
|
|
60
|
+
* <button className={isOpen ? 'active' : ''}>
|
|
61
|
+
* Custom Trigger
|
|
62
|
+
* </button>
|
|
63
|
+
* )}
|
|
64
|
+
* items={[...]}
|
|
65
|
+
* />
|
|
66
|
+
* ```
|
|
67
|
+
*/
|
|
68
|
+
renderTrigger?: (isOpen: boolean) => ReactNode;
|
|
51
69
|
}
|
|
52
70
|
/**
|
|
53
71
|
* Props del componente DropdownItem
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.types.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAElC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAE3B;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Dropdown.types.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAElC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAE3B;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;;;;;;;;;;OAgBG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,SAAS,CAAC;CAChD;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
|
|
@@ -7,4 +7,7 @@ export declare const CogIcon: () => import("react/jsx-runtime").JSX.Element;
|
|
|
7
7
|
export declare const UserIcon: () => import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
export declare const BellIcon: () => import("react/jsx-runtime").JSX.Element;
|
|
9
9
|
export declare const CreditCardIcon: () => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare const MoonIcon: () => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare const DocumentTextIcon: () => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export declare const ArrowRightStartOnRectangleIcon: () => import("react/jsx-runtime").JSX.Element;
|
|
10
13
|
//# sourceMappingURL=icons.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/icons.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,eAAe,+CAa3B,CAAC;AAEF,eAAO,MAAM,OAAO,+CAanB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CASpB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAapB,CAAC;AAEF,eAAO,MAAM,cAAc,+CAU1B,CAAC"}
|
|
1
|
+
{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/icons.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,eAAe,+CAa3B,CAAC;AAEF,eAAO,MAAM,OAAO,+CAanB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CASpB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAapB,CAAC;AAEF,eAAO,MAAM,cAAc,+CAU1B,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAapB,CAAC;AAEF,eAAO,MAAM,gBAAgB,+CAa5B,CAAC;AAEF,eAAO,MAAM,8BAA8B,+CAa1C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownItemCollapsible.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownItemCollapsible/DropdownItemCollapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EACV,4BAA4B,EAE7B,MAAM,iCAAiC,CAAC;
|
|
1
|
+
{"version":3,"file":"DropdownItemCollapsible.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownItemCollapsible/DropdownItemCollapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EACV,4BAA4B,EAE7B,MAAM,iCAAiC,CAAC;AAIzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+FG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAwM1E,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
|
|
@@ -61,6 +61,27 @@ export interface DropdownItemCollapsibleProps {
|
|
|
61
61
|
* @default true
|
|
62
62
|
*/
|
|
63
63
|
showDivider?: boolean;
|
|
64
|
+
/**
|
|
65
|
+
* Si el item está seleccionado (activo)
|
|
66
|
+
* Útil para NavigationRailTypes en modo expandido
|
|
67
|
+
* @default false
|
|
68
|
+
*/
|
|
69
|
+
selected?: boolean;
|
|
70
|
+
/**
|
|
71
|
+
* Si mostrar un badge de notificación (dot rojo)
|
|
72
|
+
* @default false
|
|
73
|
+
*/
|
|
74
|
+
badge?: boolean;
|
|
75
|
+
/**
|
|
76
|
+
* Número a mostrar en el badge (máximo 99+)
|
|
77
|
+
* Si se proporciona, se muestra en lugar del dot rojo
|
|
78
|
+
*/
|
|
79
|
+
badgeCount?: number;
|
|
80
|
+
/**
|
|
81
|
+
* Color del badge ('red', 'blue', etc.)
|
|
82
|
+
* @default 'red'
|
|
83
|
+
*/
|
|
84
|
+
badgeColor?: 'red' | 'blue' | 'amber' | 'green' | 'purple';
|
|
64
85
|
/**
|
|
65
86
|
* Clases CSS adicionales
|
|
66
87
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownItemCollapsible.types.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownItemCollapsible/DropdownItemCollapsible.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;GAIG;AACH,MAAM,WAAW,4BAA4B;IAC3C;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,iCAAiC,EAAE,CAAC;IAE/C;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAE3D;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,iCAAiC;IAChD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAExD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
|
|
1
|
+
{"version":3,"file":"DropdownItemCollapsible.types.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownItemCollapsible/DropdownItemCollapsible.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;GAIG;AACH,MAAM,WAAW,4BAA4B;IAC3C;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,iCAAiC,EAAE,CAAC;IAE/C;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAE3D;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;IAE3D;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,iCAAiC;IAChD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAExD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/Navbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/Navbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAalD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAk1BxC,CAAC"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
|
+
import type { DropdownItemProps } from '../Dropdown/Dropdown.types';
|
|
3
|
+
import type { ButtonProps } from '../Button/Button.types';
|
|
2
4
|
/**
|
|
3
5
|
* Variante de dispositivo del Navbar
|
|
4
6
|
* - `responsive`: Se adapta automáticamente al viewport (por defecto)
|
|
@@ -18,7 +20,12 @@ export type NavbarVariant = 'responsive' | 'desktop' | 'tablet' | 'mobile';
|
|
|
18
20
|
* avatar: '/path/to/avatar.jpg',
|
|
19
21
|
* name: 'Juan Pérez',
|
|
20
22
|
* email: 'juan@ejemplo.com',
|
|
21
|
-
*
|
|
23
|
+
* menuItems: [
|
|
24
|
+
* { children: 'Account', icon: <UserIcon />, onClick: () => {} },
|
|
25
|
+
* { children: 'Settings', icon: <CogIcon />, onClick: () => {} },
|
|
26
|
+
* { isDivider: true },
|
|
27
|
+
* { children: 'Sign Out', onClick: () => {} },
|
|
28
|
+
* ],
|
|
22
29
|
* };
|
|
23
30
|
* ```
|
|
24
31
|
*/
|
|
@@ -40,10 +47,36 @@ export interface UserDropdownProps {
|
|
|
40
47
|
* Rol del usuario (alternativa a email, ej: "Administrador")
|
|
41
48
|
*/
|
|
42
49
|
role?: string;
|
|
50
|
+
/**
|
|
51
|
+
* Items del menú dropdown de usuario
|
|
52
|
+
* Si no se proporciona, se usa un menú por defecto con Account, Notifications, Billing, Dark mode y Sign Out
|
|
53
|
+
*/
|
|
54
|
+
menuItems?: DropdownItemProps[];
|
|
43
55
|
/**
|
|
44
56
|
* Handler para click en el dropdown de usuario
|
|
57
|
+
* @deprecated Usar menuItems con onClick individuales en su lugar
|
|
45
58
|
*/
|
|
46
59
|
onMenuClick?: () => void;
|
|
60
|
+
/**
|
|
61
|
+
* Handler para la opción "Account" del menú por defecto
|
|
62
|
+
*/
|
|
63
|
+
onAccountClick?: () => void;
|
|
64
|
+
/**
|
|
65
|
+
* Handler para la opción "Notifications" del menú por defecto
|
|
66
|
+
*/
|
|
67
|
+
onNotificationsClick?: () => void;
|
|
68
|
+
/**
|
|
69
|
+
* Handler para la opción "Billing" del menú por defecto
|
|
70
|
+
*/
|
|
71
|
+
onBillingClick?: () => void;
|
|
72
|
+
/**
|
|
73
|
+
* Handler para la opción "Dark mode" del menú por defecto
|
|
74
|
+
*/
|
|
75
|
+
onDarkModeClick?: () => void;
|
|
76
|
+
/**
|
|
77
|
+
* Handler para la opción "Sign Out" del menú por defecto
|
|
78
|
+
*/
|
|
79
|
+
onSignOutClick?: () => void;
|
|
47
80
|
}
|
|
48
81
|
/**
|
|
49
82
|
* Configuración de badges de notificación
|
|
@@ -146,6 +179,18 @@ export interface NavbarProps {
|
|
|
146
179
|
* @default false
|
|
147
180
|
*/
|
|
148
181
|
hideActionButtons?: boolean;
|
|
182
|
+
/**
|
|
183
|
+
* Mostrar el botón de navegación en el leading (lado izquierdo)
|
|
184
|
+
* Solo visible en desktop/tablet
|
|
185
|
+
*
|
|
186
|
+
* @default false
|
|
187
|
+
*/
|
|
188
|
+
showNavigationButton?: boolean;
|
|
189
|
+
/**
|
|
190
|
+
* Props adicionales para el botón de navegación
|
|
191
|
+
* Permite personalizar el botón usando las props del componente Button
|
|
192
|
+
*/
|
|
193
|
+
navigationButtonProps?: Partial<ButtonProps>;
|
|
149
194
|
/**
|
|
150
195
|
* Elemento leading personalizado (reemplaza el botón de navegación por defecto)
|
|
151
196
|
* Solo visible en desktop/tablet
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Navbar.types.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/Navbar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Navbar.types.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/Navbar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAE1D;;;;;;;;GAQG;AACH,MAAM,MAAM,aAAa,GAAG,YAAY,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE3E;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,SAAS,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAEhC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAElC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAE7B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED;;;;;;;;;;GAUG;AACH,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,WAAW,WAAW;IAC1B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,YAAY,CAAC,EAAE,iBAAiB,CAAC;IAEjC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IAEnC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAE7C;;;OAGG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAE/B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAE3B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;CACnC"}
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { NavigationRailGroupProps } from './NavigationRailGroup.types';
|
|
3
|
+
/**
|
|
4
|
+
* NavigationRailGroup del sistema de diseño Siesa
|
|
5
|
+
*
|
|
6
|
+
* Componente de navegación lateral agrupado que combina NavigationRailTypes
|
|
7
|
+
* y NavigationRailPanel para crear una experiencia de navegación completa
|
|
8
|
+
* con múltiples estados:
|
|
9
|
+
*
|
|
10
|
+
* - **Collapsed**: Barra compacta de 80px con solo iconos
|
|
11
|
+
* - **Expanded**: Barra expandida de 215px con labels
|
|
12
|
+
* - **Hover**: Panel lateral con submenú del item (se muestra al hacer hover)
|
|
13
|
+
* - **Searcher**: Panel lateral con búsqueda y recientes
|
|
14
|
+
*
|
|
15
|
+
* **Características:**
|
|
16
|
+
* - Reutiliza NavigationRailTypes para la barra lateral principal
|
|
17
|
+
* - Reutiliza NavigationRailPanel para los paneles de hover y búsqueda
|
|
18
|
+
* - Gestión de estado integrada (collapsed, expanded, hover, searcher)
|
|
19
|
+
* - Dark mode completo en todos los elementos
|
|
20
|
+
* - Focus rings adaptativos
|
|
21
|
+
* - Transiciones suaves entre estados
|
|
22
|
+
*
|
|
23
|
+
* **Especificaciones de Figma:**
|
|
24
|
+
* - NavigationRailTypes: 80px (collapsed) / 215px (expanded)
|
|
25
|
+
* - NavigationRailPanel: 248px width, altura variable
|
|
26
|
+
* - Posición panel: left 80px desde el rail
|
|
27
|
+
* - Transiciones: 300ms ease-in-out
|
|
28
|
+
*
|
|
29
|
+
* **Estructura:**
|
|
30
|
+
* ```
|
|
31
|
+
* ┌────────────────────────────────────┐
|
|
32
|
+
* │ NavigationRailGroup │
|
|
33
|
+
* │ ┌──────────┬─────────────────┐ │
|
|
34
|
+
* │ │ Rail │ Panel │ │
|
|
35
|
+
* │ │ Types │ (hover/search) │ │
|
|
36
|
+
* │ │ (base) │ (opcional) │ │
|
|
37
|
+
* │ └──────────┴─────────────────┘ │
|
|
38
|
+
* └────────────────────────────────────┘
|
|
39
|
+
* ```
|
|
40
|
+
*
|
|
41
|
+
* **Estados de Items:**
|
|
42
|
+
* - `default`: Sin interacción
|
|
43
|
+
* - `hover`: Muestra panel con submenú (si tiene children)
|
|
44
|
+
* - `active`: Item seleccionado, fondo custom-primary
|
|
45
|
+
* - `disabled`: Opacity 50%, sin interacción
|
|
46
|
+
*
|
|
47
|
+
* **Colores (Light Mode):**
|
|
48
|
+
* - Background rail: #ffffff (bg-primary)
|
|
49
|
+
* - Background panel: #ffffff (bg-primary)
|
|
50
|
+
* - Borders: #e4e4e7 (border-primary)
|
|
51
|
+
* - Text: #18181b (content-primary)
|
|
52
|
+
* - Icons: #a1a1aa (content-secondary)
|
|
53
|
+
* - Search button: #0e79fd (primary-custom-600)
|
|
54
|
+
*
|
|
55
|
+
* **Colores (Dark Mode):**
|
|
56
|
+
* - Background rail: #18181b (dark-bg-primary)
|
|
57
|
+
* - Background panel: #18181b (dark-bg-primary)
|
|
58
|
+
* - Borders: #71717a (dark-border-primary)
|
|
59
|
+
* - Text: #f4f4f5 (dark-content-primary)
|
|
60
|
+
* - Icons: #a1a1aa (content-secondary)
|
|
61
|
+
*
|
|
62
|
+
* **Tipografía:**
|
|
63
|
+
* - Items: Paragraph/Small (14px Regular, line-height 20px)
|
|
64
|
+
* - Panel heading: Label/Small (14px Bold)
|
|
65
|
+
* - Section headings: Paragraph/Tiny (12px Regular)
|
|
66
|
+
*
|
|
67
|
+
* **Implementación de Estados:**
|
|
68
|
+
* - `collapsed` + hover en item → state='hover' + muestra panel
|
|
69
|
+
* - `collapsed` + click en search → state='searcher' + muestra panel búsqueda
|
|
70
|
+
* - `expanded` → NavigationRailTypes expandido con Input integrado
|
|
71
|
+
* - Click en "Colapsar" → vuelve a collapsed
|
|
72
|
+
*
|
|
73
|
+
* @see docs/colors.md - Sistema de colores
|
|
74
|
+
* @see docs/typography.md - Sistema tipográfico
|
|
75
|
+
* @see docs/spacing.md - Sistema de espaciado
|
|
76
|
+
* @see ../NavigationRailTypes - Componente reutilizado para barra lateral
|
|
77
|
+
* @see ../NavigationRailPanel - Componente reutilizado para paneles
|
|
78
|
+
* @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6146-34487
|
|
79
|
+
*
|
|
80
|
+
* @example
|
|
81
|
+
* ```tsx
|
|
82
|
+
* // Uso básico en modo collapsed
|
|
83
|
+
* const items = [
|
|
84
|
+
* {
|
|
85
|
+
* id: 'admin',
|
|
86
|
+
* label: 'Administración',
|
|
87
|
+
* icon: <Cog6ToothIcon />,
|
|
88
|
+
* isCollapsible: true,
|
|
89
|
+
* children: [
|
|
90
|
+
* { id: 'users', label: 'Usuarios' },
|
|
91
|
+
* { id: 'roles', label: 'Roles' },
|
|
92
|
+
* ],
|
|
93
|
+
* },
|
|
94
|
+
* {
|
|
95
|
+
* id: 'sales',
|
|
96
|
+
* label: 'Ventas',
|
|
97
|
+
* icon: <ShoppingCartIcon />,
|
|
98
|
+
* },
|
|
99
|
+
* ];
|
|
100
|
+
*
|
|
101
|
+
* <NavigationRailGroup
|
|
102
|
+
* state="collapsed"
|
|
103
|
+
* items={items}
|
|
104
|
+
* onItemClick={(item) => console.log('Clicked:', item.label)}
|
|
105
|
+
* onItemHover={(item) => console.log('Hover:', item.label)}
|
|
106
|
+
* />
|
|
107
|
+
*
|
|
108
|
+
* // Uso con control de estado externo
|
|
109
|
+
* const [state, setState] = useState('collapsed');
|
|
110
|
+
*
|
|
111
|
+
* <NavigationRailGroup
|
|
112
|
+
* state={state}
|
|
113
|
+
* items={items}
|
|
114
|
+
* onStateChange={setState}
|
|
115
|
+
* />
|
|
116
|
+
* ```
|
|
117
|
+
*
|
|
118
|
+
* @see NavigationRailGroup.types.ts - Props e interfaces
|
|
119
|
+
*/
|
|
120
|
+
export declare const NavigationRailGroup: React.ForwardRefExoticComponent<NavigationRailGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
121
|
+
export default NavigationRailGroup;
|
|
122
|
+
//# sourceMappingURL=NavigationRailGroup.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NavigationRailGroup.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRailGroup/NavigationRailGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,EACV,wBAAwB,EAEzB,MAAM,6BAA6B,CAAC;AAKrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoHG;AACH,eAAO,MAAM,mBAAmB,iGA0N/B,CAAC;AAIF,eAAe,mBAAmB,CAAC"}
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Definición de un item de menú para el NavigationRailGroup
|
|
4
|
+
*/
|
|
5
|
+
export interface NavigationRailGroupMenuItem {
|
|
6
|
+
/**
|
|
7
|
+
* Identificador único del item
|
|
8
|
+
*/
|
|
9
|
+
id: string;
|
|
10
|
+
/**
|
|
11
|
+
* Etiqueta/texto del item (visible en modo expanded)
|
|
12
|
+
*/
|
|
13
|
+
label: string;
|
|
14
|
+
/**
|
|
15
|
+
* Icono del item (16x16px recomendado)
|
|
16
|
+
*/
|
|
17
|
+
icon: ReactNode;
|
|
18
|
+
/**
|
|
19
|
+
* Si el item es colapsable (tiene submenu)
|
|
20
|
+
* @default false
|
|
21
|
+
*/
|
|
22
|
+
isCollapsible?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Items hijos (solo si isCollapsible es true)
|
|
25
|
+
*/
|
|
26
|
+
children?: NavigationRailGroupMenuItem[];
|
|
27
|
+
/**
|
|
28
|
+
* Si el item colapsable está abierto por defecto (solo si isCollapsible es true)
|
|
29
|
+
* @default false
|
|
30
|
+
*/
|
|
31
|
+
defaultOpen?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Si el item está seleccionado/activo
|
|
34
|
+
* @default false
|
|
35
|
+
*/
|
|
36
|
+
active?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Si el item está deshabilitado
|
|
39
|
+
* @default false
|
|
40
|
+
*/
|
|
41
|
+
disabled?: boolean;
|
|
42
|
+
/**
|
|
43
|
+
* Callback cuando se hace click en el item
|
|
44
|
+
*/
|
|
45
|
+
onClick?: () => void;
|
|
46
|
+
/**
|
|
47
|
+
* Badge de notificación
|
|
48
|
+
* @default false
|
|
49
|
+
*/
|
|
50
|
+
badge?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* Contador de notificaciones (si badge es true)
|
|
53
|
+
*/
|
|
54
|
+
badgeCount?: number;
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* Props del componente NavigationRailGroup
|
|
58
|
+
*
|
|
59
|
+
* @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6146-34487
|
|
60
|
+
*/
|
|
61
|
+
export interface NavigationRailGroupProps {
|
|
62
|
+
/**
|
|
63
|
+
* Estado del rail:
|
|
64
|
+
* - `collapsed`: 80px width, solo iconos
|
|
65
|
+
* - `expanded`: 215px width, con labels
|
|
66
|
+
* - `hover`: muestra panel lateral con submenu (estado temporal)
|
|
67
|
+
* - `searcher`: muestra panel lateral con búsqueda (estado temporal)
|
|
68
|
+
* @default 'collapsed'
|
|
69
|
+
*/
|
|
70
|
+
state?: 'collapsed' | 'expanded' | 'hover' | 'searcher';
|
|
71
|
+
/**
|
|
72
|
+
* Items de menú a mostrar en la barra
|
|
73
|
+
*/
|
|
74
|
+
items?: NavigationRailGroupMenuItem[];
|
|
75
|
+
/**
|
|
76
|
+
* Panel lateral que se muestra en estados hover/searcher
|
|
77
|
+
* Contiene el menú detallado del item seleccionado
|
|
78
|
+
*/
|
|
79
|
+
panelContent?: {
|
|
80
|
+
/**
|
|
81
|
+
* Título del panel (ej: "Administración")
|
|
82
|
+
*/
|
|
83
|
+
heading?: string;
|
|
84
|
+
/**
|
|
85
|
+
* Items del panel
|
|
86
|
+
*/
|
|
87
|
+
items?: NavigationRailGroupMenuItem[];
|
|
88
|
+
};
|
|
89
|
+
/**
|
|
90
|
+
* Callback cuando cambia el estado del rail
|
|
91
|
+
* @param state - nuevo estado
|
|
92
|
+
*/
|
|
93
|
+
onStateChange?: (state: NavigationRailGroupProps['state']) => void;
|
|
94
|
+
/**
|
|
95
|
+
* Callback cuando se hace click en un item
|
|
96
|
+
* @param item - item clickeado
|
|
97
|
+
*/
|
|
98
|
+
onItemClick?: (item: NavigationRailGroupMenuItem) => void;
|
|
99
|
+
/**
|
|
100
|
+
* Callback cuando se hace hover en un item (para mostrar panel)
|
|
101
|
+
* @param item - item con hover
|
|
102
|
+
*/
|
|
103
|
+
onItemHover?: (item: NavigationRailGroupMenuItem) => void;
|
|
104
|
+
/**
|
|
105
|
+
* Labels de internacionalización
|
|
106
|
+
*/
|
|
107
|
+
labels?: {
|
|
108
|
+
/**
|
|
109
|
+
* Placeholder del input de búsqueda
|
|
110
|
+
* @default 'Buscar módulo'
|
|
111
|
+
*/
|
|
112
|
+
searchPlaceholder?: string;
|
|
113
|
+
/**
|
|
114
|
+
* Label del botón colapsar
|
|
115
|
+
* @default 'Colapsar'
|
|
116
|
+
*/
|
|
117
|
+
collapseButton?: string;
|
|
118
|
+
/**
|
|
119
|
+
* Label sección recientes (panel búsqueda)
|
|
120
|
+
* @default 'Recientes'
|
|
121
|
+
*/
|
|
122
|
+
recentSection?: string;
|
|
123
|
+
/**
|
|
124
|
+
* Label sección opciones frecuentes (panel búsqueda)
|
|
125
|
+
* @default 'Opciones frecuentes'
|
|
126
|
+
*/
|
|
127
|
+
frequentSection?: string;
|
|
128
|
+
};
|
|
129
|
+
/**
|
|
130
|
+
* Clases CSS adicionales
|
|
131
|
+
*/
|
|
132
|
+
className?: string;
|
|
133
|
+
/**
|
|
134
|
+
* Si mostrar el botón de búsqueda (en modo collapsed)
|
|
135
|
+
* @default true
|
|
136
|
+
*/
|
|
137
|
+
showSearchButton?: boolean;
|
|
138
|
+
}
|
|
139
|
+
//# sourceMappingURL=NavigationRailGroup.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NavigationRailGroup.types.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRailGroup/NavigationRailGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAEhB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,2BAA2B,EAAE,CAAC;IAEzC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;GAIG;AACH,MAAM,WAAW,wBAAwB;IACvC;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;IAExD;;OAEG;IACH,KAAK,CAAC,EAAE,2BAA2B,EAAE,CAAC;IAEtC;;;OAGG;IACH,YAAY,CAAC,EAAE;QACb;;WAEG;QACH,OAAO,CAAC,EAAE,MAAM,CAAC;QAEjB;;WAEG;QACH,KAAK,CAAC,EAAE,2BAA2B,EAAE,CAAC;KACvC,CAAC;IAEF;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAEnE;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,2BAA2B,KAAK,IAAI,CAAC;IAE1D;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,2BAA2B,KAAK,IAAI,CAAC;IAE1D;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;;WAGG;QACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAE3B;;;WAGG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QAExB;;;WAGG;QACH,aAAa,CAAC,EAAE,MAAM,CAAC;QAEvB;;;WAGG;QACH,eAAe,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC;IAEF;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Iconos estándar para NavigationRailGroup
|
|
4
|
+
* Basados en Heroicons 20x20 solid (excepto ClockIcon que es 24x24 outline)
|
|
5
|
+
* Consistente con NavigationRailTypes
|
|
6
|
+
*
|
|
7
|
+
* @see docs/icons.md - Sistema de iconos del proyecto
|
|
8
|
+
*/
|
|
9
|
+
export declare const MagnifyingGlassIcon: React.FC<{
|
|
10
|
+
className?: string;
|
|
11
|
+
}>;
|
|
12
|
+
export declare const ChevronRightIcon: React.FC<{
|
|
13
|
+
className?: string;
|
|
14
|
+
}>;
|
|
15
|
+
export declare const ChevronLeftIcon: React.FC<{
|
|
16
|
+
className?: string;
|
|
17
|
+
}>;
|
|
18
|
+
export declare const Cog6ToothIcon: React.FC<{
|
|
19
|
+
className?: string;
|
|
20
|
+
}>;
|
|
21
|
+
export declare const ShoppingCartIcon: React.FC<{
|
|
22
|
+
className?: string;
|
|
23
|
+
}>;
|
|
24
|
+
export declare const CubeIcon: React.FC<{
|
|
25
|
+
className?: string;
|
|
26
|
+
}>;
|
|
27
|
+
export declare const DocumentIcon: React.FC<{
|
|
28
|
+
className?: string;
|
|
29
|
+
}>;
|
|
30
|
+
export declare const ClockIcon: React.FC<{
|
|
31
|
+
className?: string;
|
|
32
|
+
}>;
|
|
33
|
+
//# sourceMappingURL=icons.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRailGroup/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B;;;;;;GAMG;AAEH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAEhE,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAE7D,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAE5D,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAE1D,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAE7D,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAErD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAEzD,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAEtD,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRailGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EACV,wBAAwB,EACxB,2BAA2B,GAC5B,MAAM,6BAA6B,CAAC;AACrC,cAAc,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationRailItem.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRailItem/NavigationRailItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAE1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqFG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,
|
|
1
|
+
{"version":3,"file":"NavigationRailItem.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRailItem/NavigationRailItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAE1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqFG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAgOhE,CAAC"}
|