flysoft-react-ui 0.4.0 → 0.5.2

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 (178) hide show
  1. package/dist/App.d.ts.map +1 -1
  2. package/dist/App.js +20 -4
  3. package/dist/components/form-controls/AutocompleteInput.d.ts +11 -3
  4. package/dist/components/form-controls/AutocompleteInput.d.ts.map +1 -1
  5. package/dist/components/form-controls/AutocompleteInput.js +410 -31
  6. package/dist/components/form-controls/Button.js +1 -1
  7. package/dist/components/form-controls/Checkbox.d.ts +14 -0
  8. package/dist/components/form-controls/Checkbox.d.ts.map +1 -0
  9. package/dist/components/form-controls/Checkbox.js +77 -0
  10. package/dist/components/form-controls/DateInput.d.ts +20 -4
  11. package/dist/components/form-controls/DateInput.d.ts.map +1 -1
  12. package/dist/components/form-controls/DateInput.js +425 -70
  13. package/dist/components/form-controls/DatePicker.d.ts +4 -3
  14. package/dist/components/form-controls/DatePicker.d.ts.map +1 -1
  15. package/dist/components/form-controls/DatePicker.js +26 -30
  16. package/dist/components/form-controls/Input.d.ts +10 -1
  17. package/dist/components/form-controls/Input.d.ts.map +1 -1
  18. package/dist/components/form-controls/Input.js +16 -10
  19. package/dist/components/form-controls/Pagination.d.ts +1 -0
  20. package/dist/components/form-controls/Pagination.d.ts.map +1 -1
  21. package/dist/components/form-controls/Pagination.js +3 -40
  22. package/dist/components/form-controls/RadioButtonGroup.d.ts +62 -0
  23. package/dist/components/form-controls/RadioButtonGroup.d.ts.map +1 -0
  24. package/dist/components/form-controls/RadioButtonGroup.js +220 -0
  25. package/dist/components/form-controls/SearchSelectInput-OLD.d.ts +68 -0
  26. package/dist/components/form-controls/SearchSelectInput-OLD.d.ts.map +1 -0
  27. package/dist/components/form-controls/SearchSelectInput-OLD.js +962 -0
  28. package/dist/components/form-controls/SearchSelectInput.d.ts +70 -0
  29. package/dist/components/form-controls/SearchSelectInput.d.ts.map +1 -0
  30. package/dist/components/form-controls/SearchSelectInput.js +335 -0
  31. package/dist/components/form-controls/index.d.ts +7 -1
  32. package/dist/components/form-controls/index.d.ts.map +1 -1
  33. package/dist/components/form-controls/index.js +3 -0
  34. package/dist/components/layout/AppLayout.d.ts +3 -2
  35. package/dist/components/layout/AppLayout.d.ts.map +1 -1
  36. package/dist/components/layout/AppLayout.js +104 -31
  37. package/dist/components/layout/Card.d.ts +4 -1
  38. package/dist/components/layout/Card.d.ts.map +1 -1
  39. package/dist/components/layout/Card.js +30 -1
  40. package/dist/components/layout/Collection.js +1 -1
  41. package/dist/components/layout/DataTable.d.ts +29 -0
  42. package/dist/components/layout/DataTable.d.ts.map +1 -0
  43. package/dist/components/layout/DataTable.js +165 -0
  44. package/dist/components/layout/index.d.ts +2 -0
  45. package/dist/components/layout/index.d.ts.map +1 -1
  46. package/dist/components/layout/index.js +1 -0
  47. package/dist/components/utils/Avatar.d.ts +49 -0
  48. package/dist/components/utils/Avatar.d.ts.map +1 -0
  49. package/dist/components/utils/Avatar.js +93 -0
  50. package/dist/components/utils/Badge.d.ts +3 -0
  51. package/dist/components/utils/Badge.d.ts.map +1 -1
  52. package/dist/components/utils/Badge.js +130 -26
  53. package/dist/components/utils/Dialog.d.ts.map +1 -1
  54. package/dist/components/utils/Dialog.js +5 -1
  55. package/dist/components/utils/DropdownMenu.d.ts +25 -0
  56. package/dist/components/utils/DropdownMenu.d.ts.map +1 -0
  57. package/dist/components/utils/DropdownMenu.js +145 -0
  58. package/dist/components/utils/Filter.d.ts +57 -0
  59. package/dist/components/utils/Filter.d.ts.map +1 -0
  60. package/dist/components/utils/Filter.js +580 -0
  61. package/dist/components/utils/FiltersDialog.d.ts +21 -0
  62. package/dist/components/utils/FiltersDialog.d.ts.map +1 -0
  63. package/dist/components/utils/FiltersDialog.js +104 -0
  64. package/dist/components/utils/Loader.js +1 -1
  65. package/dist/components/utils/RoadMap.d.ts +59 -0
  66. package/dist/components/utils/RoadMap.d.ts.map +1 -0
  67. package/dist/components/utils/RoadMap.js +138 -0
  68. package/dist/components/utils/Snackbar.d.ts +13 -0
  69. package/dist/components/utils/Snackbar.d.ts.map +1 -0
  70. package/dist/components/utils/Snackbar.js +121 -0
  71. package/dist/components/utils/SnackbarContainer.d.ts +7 -0
  72. package/dist/components/utils/SnackbarContainer.d.ts.map +1 -0
  73. package/dist/components/utils/SnackbarContainer.js +25 -0
  74. package/dist/components/utils/index.d.ts +12 -0
  75. package/dist/components/utils/index.d.ts.map +1 -1
  76. package/dist/components/utils/index.js +6 -0
  77. package/dist/contexts/AppLayoutContext.d.ts +40 -0
  78. package/dist/contexts/AppLayoutContext.d.ts.map +1 -0
  79. package/dist/contexts/AppLayoutContext.js +98 -0
  80. package/dist/contexts/ListCrudContext.d.ts +29 -0
  81. package/dist/contexts/ListCrudContext.d.ts.map +1 -0
  82. package/dist/contexts/ListCrudContext.js +209 -0
  83. package/dist/contexts/SnackbarContext.d.ts +26 -0
  84. package/dist/contexts/SnackbarContext.d.ts.map +1 -0
  85. package/dist/contexts/SnackbarContext.js +34 -0
  86. package/dist/contexts/index.d.ts +6 -0
  87. package/dist/contexts/index.d.ts.map +1 -1
  88. package/dist/contexts/index.js +6 -0
  89. package/dist/contexts/presets.js +6 -6
  90. package/dist/docs/AuthDocs.tsx/AuthDocsContent.js +3 -1
  91. package/dist/docs/AvatarDocs.d.ts +4 -0
  92. package/dist/docs/AvatarDocs.d.ts.map +1 -0
  93. package/dist/docs/AvatarDocs.js +7 -0
  94. package/dist/docs/BadgeDocs.d.ts.map +1 -1
  95. package/dist/docs/BadgeDocs.js +4 -2
  96. package/dist/docs/CardDocs.d.ts.map +1 -1
  97. package/dist/docs/CardDocs.js +7 -1
  98. package/dist/docs/CheckboxDocs.d.ts +4 -0
  99. package/dist/docs/CheckboxDocs.d.ts.map +1 -0
  100. package/dist/docs/CheckboxDocs.js +7 -0
  101. package/dist/docs/DataTableDocs.d.ts +4 -0
  102. package/dist/docs/DataTableDocs.d.ts.map +1 -0
  103. package/dist/docs/DataTableDocs.js +244 -0
  104. package/dist/docs/DateInputDocs.d.ts +1 -0
  105. package/dist/docs/DateInputDocs.d.ts.map +1 -1
  106. package/dist/docs/DateInputDocs.js +7 -9
  107. package/dist/docs/DatePickerDocs.d.ts +1 -0
  108. package/dist/docs/DatePickerDocs.d.ts.map +1 -1
  109. package/dist/docs/DatePickerDocs.js +6 -8
  110. package/dist/docs/DocAdmin.d.ts +4 -0
  111. package/dist/docs/DocAdmin.d.ts.map +1 -0
  112. package/dist/docs/DocAdmin.js +68 -0
  113. package/dist/docs/DocsMenu.d.ts.map +1 -1
  114. package/dist/docs/DocsMenu.js +1 -1
  115. package/dist/docs/DocsRouter.d.ts.map +1 -1
  116. package/dist/docs/DocsRouter.js +13 -1
  117. package/dist/docs/DropdownMenuDocs.d.ts +4 -0
  118. package/dist/docs/DropdownMenuDocs.d.ts.map +1 -0
  119. package/dist/docs/DropdownMenuDocs.js +66 -0
  120. package/dist/docs/ExampleFormDocs.d.ts +4 -0
  121. package/dist/docs/ExampleFormDocs.d.ts.map +1 -0
  122. package/dist/docs/ExampleFormDocs.js +148 -0
  123. package/dist/docs/FilterDocs.d.ts +4 -0
  124. package/dist/docs/FilterDocs.d.ts.map +1 -0
  125. package/dist/docs/FilterDocs.js +112 -0
  126. package/dist/docs/InputDocs.d.ts.map +1 -1
  127. package/dist/docs/InputDocs.js +11 -1
  128. package/dist/docs/ListCrudDocs.tsx/ListCrudDocs.d.ts +11 -0
  129. package/dist/docs/ListCrudDocs.tsx/ListCrudDocs.d.ts.map +1 -0
  130. package/dist/docs/ListCrudDocs.tsx/ListCrudDocs.js +25 -0
  131. package/dist/docs/ListCrudDocs.tsx/ListCrudDocsContentPersonas.d.ts +2 -0
  132. package/dist/docs/ListCrudDocs.tsx/ListCrudDocsContentPersonas.d.ts.map +1 -0
  133. package/dist/docs/ListCrudDocs.tsx/ListCrudDocsContentPersonas.js +51 -0
  134. package/dist/docs/PaginationDocs.js +6 -6
  135. package/dist/docs/RadioButtonGroupDocs.d.ts +4 -0
  136. package/dist/docs/RadioButtonGroupDocs.d.ts.map +1 -0
  137. package/dist/docs/RadioButtonGroupDocs.js +46 -0
  138. package/dist/docs/RoadMapDocs.d.ts +4 -0
  139. package/dist/docs/RoadMapDocs.d.ts.map +1 -0
  140. package/dist/docs/RoadMapDocs.js +171 -0
  141. package/dist/docs/SearchSelectInputDocs.d.ts +4 -0
  142. package/dist/docs/SearchSelectInputDocs.d.ts.map +1 -0
  143. package/dist/docs/SearchSelectInputDocs.js +168 -0
  144. package/dist/docs/SnackbarDocs.d.ts +4 -0
  145. package/dist/docs/SnackbarDocs.d.ts.map +1 -0
  146. package/dist/docs/SnackbarDocs.js +50 -0
  147. package/dist/docs/TabsGroupDocs.d.ts.map +1 -1
  148. package/dist/docs/TabsGroupDocs.js +12 -1
  149. package/dist/docs/docMockServices/empresaService.d.ts +38 -0
  150. package/dist/docs/docMockServices/empresaService.d.ts.map +1 -0
  151. package/dist/docs/docMockServices/empresaService.js +116 -0
  152. package/dist/docs/docMockServices/index.d.ts +9 -0
  153. package/dist/docs/docMockServices/index.d.ts.map +1 -0
  154. package/dist/docs/docMockServices/index.js +8 -0
  155. package/dist/docs/docMockServices/initialData.d.ts +6 -0
  156. package/dist/docs/docMockServices/initialData.d.ts.map +1 -0
  157. package/dist/docs/docMockServices/initialData.js +132 -0
  158. package/dist/docs/docMockServices/interfaces.d.ts +26 -0
  159. package/dist/docs/docMockServices/interfaces.d.ts.map +1 -0
  160. package/dist/docs/docMockServices/interfaces.js +1 -0
  161. package/dist/docs/docMockServices/personaEmpresaService.d.ts +43 -0
  162. package/dist/docs/docMockServices/personaEmpresaService.d.ts.map +1 -0
  163. package/dist/docs/docMockServices/personaEmpresaService.js +113 -0
  164. package/dist/docs/docMockServices/personaService.d.ts +39 -0
  165. package/dist/docs/docMockServices/personaService.d.ts.map +1 -0
  166. package/dist/docs/docMockServices/personaService.js +180 -0
  167. package/dist/hooks/index.d.ts +2 -0
  168. package/dist/hooks/index.d.ts.map +1 -1
  169. package/dist/hooks/index.js +1 -0
  170. package/dist/hooks/useAsyncRequest.d.ts +17 -0
  171. package/dist/hooks/useAsyncRequest.d.ts.map +1 -0
  172. package/dist/hooks/useAsyncRequest.js +70 -0
  173. package/dist/index.css +1 -1
  174. package/dist/index.d.ts +22 -0
  175. package/dist/index.d.ts.map +1 -1
  176. package/dist/index.js +11 -0
  177. package/dist/index.js.map +1 -1
  178. package/package.json +5 -2
@@ -0,0 +1,104 @@
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import React, { useState, useEffect } from "react";
3
+ import { useSearchParams } from "react-router-dom";
4
+ import { Button } from "../form-controls/Button";
5
+ import { Dialog } from "./Dialog";
6
+ import { Filter } from "./Filter";
7
+ import { Collection } from "../layout/Collection";
8
+ export const FiltersDialog = ({ filters }) => {
9
+ const [searchParams, setSearchParams] = useSearchParams();
10
+ const [isOpen, setIsOpen] = useState(false);
11
+ const [filterValues, setFilterValues] = useState({});
12
+ // Inicializar filterValues con los valores actuales de la URL
13
+ useEffect(() => {
14
+ const initialValues = {};
15
+ filters.forEach((filter) => {
16
+ const urlValue = searchParams.get(filter.paramName);
17
+ initialValues[filter.paramName] = urlValue || undefined;
18
+ });
19
+ setFilterValues(initialValues);
20
+ }, []); // Solo al montar el componente
21
+ // Sincronizar filterValues cuando se abre el dialog con los valores actuales de la URL
22
+ useEffect(() => {
23
+ if (isOpen) {
24
+ const currentValues = {};
25
+ filters.forEach((filter) => {
26
+ const urlValue = searchParams.get(filter.paramName);
27
+ currentValues[filter.paramName] = urlValue || undefined;
28
+ });
29
+ setFilterValues(currentValues);
30
+ }
31
+ }, [isOpen, filters, searchParams]);
32
+ const handleFilterChange = (paramName, value) => {
33
+ setFilterValues((prev) => ({
34
+ ...prev,
35
+ [paramName]: value,
36
+ }));
37
+ };
38
+ const handleApplyFilters = () => {
39
+ const newSearchParams = new URLSearchParams(searchParams);
40
+ // Aplicar todos los filtros a la URL
41
+ filters.forEach((filter) => {
42
+ const value = filterValues[filter.paramName];
43
+ if (value) {
44
+ newSearchParams.set(filter.paramName, value);
45
+ }
46
+ else {
47
+ newSearchParams.delete(filter.paramName);
48
+ }
49
+ });
50
+ setSearchParams(newSearchParams, { replace: true });
51
+ setIsOpen(false);
52
+ };
53
+ const handleClose = () => {
54
+ setIsOpen(false);
55
+ };
56
+ const handleOpen = () => {
57
+ setIsOpen(true);
58
+ };
59
+ // Construir las props de Filter para cada filtro
60
+ const getFilterProps = (filterConfig) => {
61
+ const baseProps = {
62
+ label: filterConfig.label,
63
+ staticOptions: filterConfig.staticOptions,
64
+ inputWidth: filterConfig.inputWidth,
65
+ value: filterValues[filterConfig.paramName],
66
+ onChange: (value) => handleFilterChange(filterConfig.paramName, value),
67
+ };
68
+ switch (filterConfig.filterType) {
69
+ case "text":
70
+ return {
71
+ ...baseProps,
72
+ filterType: "text",
73
+ };
74
+ case "number":
75
+ return {
76
+ ...baseProps,
77
+ filterType: "number",
78
+ min: filterConfig.min,
79
+ max: filterConfig.max,
80
+ };
81
+ case "date":
82
+ return {
83
+ ...baseProps,
84
+ filterType: "date",
85
+ };
86
+ case "autocomplete":
87
+ return {
88
+ ...baseProps,
89
+ filterType: "autocomplete",
90
+ options: filterConfig.options || [],
91
+ getOptionLabel: filterConfig.getOptionLabel,
92
+ getOptionValue: filterConfig.getOptionValue,
93
+ renderOption: filterConfig.renderOption,
94
+ noResultsText: filterConfig.noResultsText,
95
+ };
96
+ default:
97
+ return {
98
+ ...baseProps,
99
+ filterType: "text",
100
+ };
101
+ }
102
+ };
103
+ return (_jsxs(_Fragment, { children: [_jsx(Button, { icon: "fa-filter", variant: "outline", size: "sm", onClick: handleOpen, "aria-label": "Abrir filtros", children: "Filtrar" }), _jsx(Dialog, { isOpen: isOpen, title: "Filtros", dialogBody: _jsx("div", { className: "space-y-4", children: _jsx(Collection, { direction: "column", gap: "1rem", children: filters.map((filter) => (_jsx(Filter, { ...getFilterProps(filter) }, filter.paramName))) }) }), dialogActions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: handleClose, children: "Cerrar" }), _jsx(Button, { variant: "primary", onClick: handleApplyFilters, children: "Aplicar filtros" })] }), onClose: handleClose, closeOnOverlayClick: false })] }));
104
+ };
@@ -34,7 +34,7 @@ export const Loader = ({ isLoading = false, text, children, keepContentWhileLoad
34
34
  if (children) {
35
35
  // Si keepContentWhileLoading es true, mostrar children con overlay
36
36
  if (keepContentWhileLoading) {
37
- return (_jsxs("div", { className: "relative", children: [_jsx("div", { className: "pointer-events-none select-none", children: children }), _jsx("div", { className: `absolute inset-0 flex items-center justify-center z-10 pointer-events-auto px-4 ${overlayClasses}`, children: _jsx("div", { className: "bg-[var(--color-bg-default)] rounded-lg p-6 shadow-lg border border-[var(--color-border-default)] w-full", children: _jsx(ProgressBar, {}) }) })] }));
37
+ return (_jsxs("div", { className: "relative", children: [_jsx("div", { className: "pointer-events-none select-none", children: children }), _jsx("div", { className: `absolute inset-0 flex items-center justify-center z-10 pointer-events-auto px-4 ${overlayClasses}`, children: _jsx("div", { className: "bg-[var(--color-bg-default)] rounded-lg p-6 shadow-lg border border-[var(--color-border-default)] w-full max-w-2xl", children: _jsx(ProgressBar, {}) }) })] }));
38
38
  }
39
39
  // Si no tiene keepContentWhileLoading, ocultar children y mostrar solo loader básico
40
40
  return (_jsx("div", { className: "flex items-center justify-center p-6 w-full", children: _jsx("div", { className: "w-full max-w-2xl", children: _jsx(ProgressBar, {}) }) }));
@@ -0,0 +1,59 @@
1
+ import React from "react";
2
+ export interface RoadMapStage {
3
+ /**
4
+ * Name of the stage
5
+ */
6
+ name: string;
7
+ /**
8
+ * Optional description shown below the name
9
+ */
10
+ description?: string;
11
+ /**
12
+ * Optional FontAwesome 5 icon class (e.g., "fa-check", "fa-user")
13
+ */
14
+ icon?: string;
15
+ /**
16
+ * Whether the stage is disabled (shown with 0.5 opacity)
17
+ */
18
+ disabled?: boolean;
19
+ /**
20
+ * Color variant for the stage circle
21
+ */
22
+ variant?: "primary" | "secondary" | "success" | "warning" | "danger" | "info";
23
+ /**
24
+ * Custom background color (hexadecimal, rgb, or color name)
25
+ * Takes precedence over variant if provided
26
+ */
27
+ bg?: string;
28
+ }
29
+ export interface RoadMapProps {
30
+ /**
31
+ * Array of stages to display
32
+ */
33
+ stages: RoadMapStage[];
34
+ /**
35
+ * Optional additional CSS classes
36
+ */
37
+ className?: string;
38
+ }
39
+ /**
40
+ * RoadMap component displays a series of stages like metro stations
41
+ *
42
+ * @example
43
+ * // Basic usage
44
+ * <RoadMap stages={[
45
+ * { name: "Start", variant: "primary" },
46
+ * { name: "Middle", variant: "success" },
47
+ * { name: "End", variant: "info" }
48
+ * ]} />
49
+ *
50
+ * @example
51
+ * // With icons and descriptions
52
+ * <RoadMap stages={[
53
+ * { name: "Planning", description: "Define requirements", icon: "fa-clipboard", variant: "primary" },
54
+ * { name: "Development", description: "Build the feature", icon: "fa-code", variant: "success" },
55
+ * { name: "Testing", description: "Test thoroughly", icon: "fa-check-circle", variant: "warning" }
56
+ * ]} />
57
+ */
58
+ export declare const RoadMap: React.FC<RoadMapProps>;
59
+ //# sourceMappingURL=RoadMap.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"RoadMap.d.ts","sourceRoot":"","sources":["../../../src/components/utils/RoadMap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA4E1B,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC9E;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAgH1C,CAAC"}
@@ -0,0 +1,138 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import React from "react";
3
+ /**
4
+ * Helper function to convert color names to CSS values
5
+ */
6
+ const getColorValue = (color) => {
7
+ if (!color)
8
+ return undefined;
9
+ // If already a valid CSS value (hex, rgb, rgba, hsl, etc.), return it
10
+ if (color.startsWith("#") ||
11
+ color.startsWith("rgb") ||
12
+ color.startsWith("hsl")) {
13
+ return color;
14
+ }
15
+ // Map common color names
16
+ const colorMap = {
17
+ white: "#ffffff",
18
+ black: "#000000",
19
+ "gray-800": "#1f2937",
20
+ "gray-700": "#374151",
21
+ "gray-600": "#4b5563",
22
+ "gray-500": "#6b7280",
23
+ "gray-400": "#9ca3af",
24
+ "gray-300": "#d1d5db",
25
+ "gray-200": "#e5e7eb",
26
+ "gray-100": "#f3f4f6",
27
+ "gray-50": "#f9fafb",
28
+ };
29
+ return colorMap[color.toLowerCase()] || color;
30
+ };
31
+ /**
32
+ * Get the CSS variable name for a variant color
33
+ */
34
+ const getVariantColorVar = (variant) => {
35
+ if (!variant)
36
+ return "var(--color-primary)";
37
+ const variantMap = {
38
+ primary: "var(--color-primary)",
39
+ secondary: "var(--color-secondary)",
40
+ success: "var(--color-success)",
41
+ warning: "var(--color-warning)",
42
+ danger: "var(--color-danger)",
43
+ info: "var(--color-info)",
44
+ };
45
+ return variantMap[variant];
46
+ };
47
+ /**
48
+ * Get the actual color value for a variant (for gradients)
49
+ * This reads the CSS variable value from the computed styles
50
+ */
51
+ const getVariantColorValue = (variant) => {
52
+ if (!variant)
53
+ return "#007aff"; // default primary color
54
+ const variantColorMap = {
55
+ primary: "#007aff",
56
+ secondary: "#6b7280",
57
+ success: "#10b981",
58
+ warning: "#f59e0b",
59
+ danger: "#ef4444",
60
+ info: "#06b6d4",
61
+ };
62
+ return variantColorMap[variant];
63
+ };
64
+ /**
65
+ * RoadMap component displays a series of stages like metro stations
66
+ *
67
+ * @example
68
+ * // Basic usage
69
+ * <RoadMap stages={[
70
+ * { name: "Start", variant: "primary" },
71
+ * { name: "Middle", variant: "success" },
72
+ * { name: "End", variant: "info" }
73
+ * ]} />
74
+ *
75
+ * @example
76
+ * // With icons and descriptions
77
+ * <RoadMap stages={[
78
+ * { name: "Planning", description: "Define requirements", icon: "fa-clipboard", variant: "primary" },
79
+ * { name: "Development", description: "Build the feature", icon: "fa-code", variant: "success" },
80
+ * { name: "Testing", description: "Test thoroughly", icon: "fa-check-circle", variant: "warning" }
81
+ * ]} />
82
+ */
83
+ export const RoadMap = ({ stages, className = "", }) => {
84
+ if (!stages || stages.length === 0) {
85
+ return null;
86
+ }
87
+ /**
88
+ * Get the background color for a stage
89
+ */
90
+ const getStageBgColor = (stage) => {
91
+ if (stage.bg) {
92
+ return getColorValue(stage.bg) || stage.bg;
93
+ }
94
+ return getVariantColorVar(stage.variant || "primary");
95
+ };
96
+ /**
97
+ * Get the color value for gradient calculations
98
+ */
99
+ const getStageColorValue = (stage) => {
100
+ if (stage.bg) {
101
+ return getColorValue(stage.bg) || stage.bg;
102
+ }
103
+ return getVariantColorValue(stage.variant || "primary");
104
+ };
105
+ /**
106
+ * Create a gradient string for the connector line
107
+ * The line transitions smoothly from the source color to the destination color
108
+ */
109
+ const getConnectorGradient = (fromStage, toStage) => {
110
+ const fromColor = getStageColorValue(fromStage);
111
+ const toColor = getStageColorValue(toStage);
112
+ // Create a smooth gradient that transitions from source to destination
113
+ return `linear-gradient(to bottom, ${fromColor}, ${toColor})`;
114
+ };
115
+ return (_jsx("div", { className: `roadmap-container ${className}`, children: stages.map((stage, index) => {
116
+ const isLast = index === stages.length - 1;
117
+ const isDisabled = stage.disabled;
118
+ const bgColor = getStageBgColor(stage);
119
+ const connectorGradient = !isLast
120
+ ? getConnectorGradient(stage, stages[index + 1])
121
+ : null;
122
+ return (_jsxs("div", { className: "relative flex items-start gap-3", children: [_jsxs("div", { className: "flex flex-col items-center", children: [_jsx("div", { className: `
123
+ w-6 h-6 rounded-full
124
+ flex items-center justify-center
125
+ flex-shrink-0
126
+ ${isDisabled ? "opacity-50" : ""}
127
+ `, style: {
128
+ backgroundColor: bgColor,
129
+ color: "#ffffff",
130
+ }, children: stage.icon ? (_jsx("i", { className: `fa ${stage.icon} text-xs` })) : null }), !isLast && (_jsx("div", { className: "w-0.5 h-4 flex-shrink-0", style: {
131
+ background: connectorGradient || undefined,
132
+ } }))] }), _jsxs("div", { className: `
133
+ flex-1
134
+ ${isDisabled ? "opacity-50" : ""}
135
+ `, children: [_jsx("h3", { className: "text-sm font-semibold font-[var(--font-default)] mb-0.5", style: { color: "var(--color-text-primary)" }, children: stage.name }), stage.description && (_jsx("p", { className: "text-xs font-[var(--font-default)]", style: { color: "var(--color-text-secondary)" }, children: stage.description }))] })] }, index));
136
+ }) }));
137
+ };
138
+ RoadMap.displayName = "RoadMap";
@@ -0,0 +1,13 @@
1
+ import React from "react";
2
+ import type { SnackbarVariant } from "../../contexts/SnackbarContext";
3
+ export interface SnackbarProps {
4
+ id: string;
5
+ message: string;
6
+ variant: SnackbarVariant;
7
+ duration?: number;
8
+ icon?: string;
9
+ iconLabel?: string;
10
+ onClose: (id: string) => void;
11
+ }
12
+ export declare const Snackbar: React.FC<SnackbarProps>;
13
+ //# sourceMappingURL=Snackbar.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../src/components/utils/Snackbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEtE,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,eAAe,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqM5C,CAAC"}
@@ -0,0 +1,121 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import React, { useEffect, useState, useRef, useCallback } from "react";
3
+ export const Snackbar = ({ id, message, variant, duration = 3000, icon, iconLabel, onClose, }) => {
4
+ const [progress, setProgress] = useState(100);
5
+ const [isClosing, setIsClosing] = useState(false);
6
+ const intervalRef = useRef(null);
7
+ const startTimeRef = useRef(Date.now());
8
+ const remainingTimeRef = useRef(duration);
9
+ // Mapeo de variantes a colores y clases
10
+ const variantConfig = {
11
+ primary: {
12
+ bg: "bg-[var(--color-primary-light)]",
13
+ border: "border-[var(--color-primary)]",
14
+ text: "text-gray-800",
15
+ progressColor: "var(--color-primary)",
16
+ },
17
+ secondary: {
18
+ bg: "bg-[var(--color-secondary-light)]",
19
+ border: "border-[var(--color-secondary)]",
20
+ text: "text-gray-800",
21
+ progressColor: "var(--color-secondary)",
22
+ },
23
+ success: {
24
+ bg: "bg-[var(--color-success-light)]",
25
+ border: "border-[var(--color-success)]",
26
+ text: "text-gray-800",
27
+ progressColor: "var(--color-success)",
28
+ },
29
+ warning: {
30
+ bg: "bg-[var(--color-warning-light)]",
31
+ border: "border-[var(--color-warning)]",
32
+ text: "text-gray-800",
33
+ progressColor: "var(--color-warning)",
34
+ },
35
+ danger: {
36
+ bg: "bg-[var(--color-danger-light)]",
37
+ border: "border-[var(--color-danger)]",
38
+ text: "text-gray-800",
39
+ progressColor: "var(--color-danger)",
40
+ },
41
+ info: {
42
+ bg: "bg-[var(--color-info-light)]",
43
+ border: "border-[var(--color-info)]",
44
+ text: "text-gray-800",
45
+ progressColor: "var(--color-info)",
46
+ },
47
+ };
48
+ const config = variantConfig[variant];
49
+ // Función para cerrar el snackbar
50
+ const handleClose = useCallback(() => {
51
+ setIsClosing(true);
52
+ // Esperar a que termine la animación antes de remover
53
+ setTimeout(() => {
54
+ onClose(id);
55
+ }, 300); // Duración de la animación de salida
56
+ }, [id, onClose]);
57
+ // Efecto para la barra de progreso
58
+ useEffect(() => {
59
+ if (duration <= 0) {
60
+ // Si duration es 0 o negativo, no se cierra automáticamente
61
+ return;
62
+ }
63
+ const updateProgress = () => {
64
+ const elapsed = Date.now() - startTimeRef.current;
65
+ const newProgress = Math.max(0, 100 - (elapsed / duration) * 100);
66
+ setProgress(newProgress);
67
+ if (newProgress <= 0) {
68
+ handleClose();
69
+ }
70
+ };
71
+ // Actualizar cada 50ms para una animación suave
72
+ intervalRef.current = setInterval(updateProgress, 50);
73
+ return () => {
74
+ if (intervalRef.current) {
75
+ clearInterval(intervalRef.current);
76
+ }
77
+ };
78
+ }, [duration, handleClose]);
79
+ // Pausar el progreso cuando el mouse está sobre el snackbar
80
+ const handleMouseEnter = () => {
81
+ if (intervalRef.current) {
82
+ clearInterval(intervalRef.current);
83
+ intervalRef.current = null;
84
+ }
85
+ const elapsed = Date.now() - startTimeRef.current;
86
+ remainingTimeRef.current = duration - elapsed;
87
+ };
88
+ // Reanudar el progreso cuando el mouse sale del snackbar
89
+ const handleMouseLeave = () => {
90
+ if (remainingTimeRef.current > 0) {
91
+ startTimeRef.current = Date.now();
92
+ const updateProgress = () => {
93
+ const elapsed = Date.now() - startTimeRef.current;
94
+ const newProgress = Math.max(0, ((remainingTimeRef.current - elapsed) / duration) * 100);
95
+ setProgress(newProgress);
96
+ if (newProgress <= 0) {
97
+ handleClose();
98
+ }
99
+ };
100
+ intervalRef.current = setInterval(updateProgress, 50);
101
+ }
102
+ };
103
+ // Íconos por defecto según la variante
104
+ const defaultIcons = {
105
+ primary: "fa-info-circle",
106
+ secondary: "fa-info-circle",
107
+ success: "fa-check-circle",
108
+ warning: "fa-exclamation-triangle",
109
+ danger: "fa-times-circle",
110
+ info: "fa-info-circle",
111
+ };
112
+ const displayIcon = icon || defaultIcons[variant];
113
+ return (_jsx("div", { className: `
114
+ relative w-[18rem] bg-white rounded-md shadow-lg border border-gray-200
115
+ overflow-hidden transition-all duration-300 ease-in-out
116
+ ${isClosing ? "opacity-0 translate-x-full" : "opacity-100 translate-x-0"}
117
+ `, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, role: "alert", "aria-live": "polite", children: _jsxs("div", { className: `${config.bg} ${config.text} p-4 flex items-start gap-3 relative`, children: [duration > 0 && (_jsx("div", { className: "absolute bottom-0 left-0 right-0 h-[3px] overflow-hidden", children: _jsx("div", { className: "h-full transition-all duration-50 ease-linear", style: {
118
+ width: `${progress}%`,
119
+ backgroundColor: "#00000050",
120
+ } }) })), displayIcon && (_jsx("div", { className: "flex-shrink-0 -mt-0.5", children: _jsx("i", { className: `fa ${displayIcon} text-base`, "aria-hidden": !iconLabel, "aria-label": iconLabel }) })), _jsx("div", { className: "flex-1 min-w-0", children: _jsx("p", { className: "text-sm font-medium break-words max-w-full", children: message }) }), _jsx("button", { onClick: handleClose, className: "flex-shrink-0 ml-2 text-gray-600 hover:text-gray-800 transition-colors cursor-pointer", "aria-label": "Cerrar notificaci\u00F3n", type: "button", children: _jsx("i", { className: "fa fa-times text-sm" }) })] }) }));
121
+ };
@@ -0,0 +1,7 @@
1
+ import React from "react";
2
+ export interface SnackbarContainerProps {
3
+ position?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center" | "bottom-center";
4
+ maxSnackbars?: number;
5
+ }
6
+ export declare const SnackbarContainer: React.FC<SnackbarContainerProps>;
7
+ //# sourceMappingURL=SnackbarContainer.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SnackbarContainer.d.ts","sourceRoot":"","sources":["../../../src/components/utils/SnackbarContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,GAAG,YAAY,GAAG,eAAe,CAAC;IACtG,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAgD9D,CAAC"}
@@ -0,0 +1,25 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import React from "react";
3
+ import { useSnackbar } from "../../contexts/SnackbarContext";
4
+ import { Snackbar } from "./Snackbar";
5
+ export const SnackbarContainer = ({ position = "top-right", maxSnackbars = 5, }) => {
6
+ const { snackbars, removeSnackbar } = useSnackbar();
7
+ // Limitar el número de snackbars visibles
8
+ const visibleSnackbars = snackbars.slice(-maxSnackbars);
9
+ // Clases de posición
10
+ const positionClasses = {
11
+ "top-right": "top-4 right-4",
12
+ "top-left": "top-4 left-4",
13
+ "bottom-right": "bottom-4 right-4",
14
+ "bottom-left": "bottom-4 left-4",
15
+ "top-center": "top-4 left-1/2 -translate-x-1/2",
16
+ "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
17
+ };
18
+ if (snackbars.length === 0) {
19
+ return null;
20
+ }
21
+ return (_jsx("div", { className: `
22
+ fixed z-50 pointer-events-none
23
+ ${positionClasses[position]}
24
+ `, "aria-live": "polite", "aria-atomic": "true", children: _jsx("div", { className: "flex flex-col gap-3 pointer-events-auto", children: visibleSnackbars.map((snackbar) => (_jsx(Snackbar, { id: snackbar.id, message: snackbar.message, variant: snackbar.variant, duration: snackbar.duration, icon: snackbar.icon, iconLabel: snackbar.iconLabel, onClose: removeSnackbar }, snackbar.id))) }) }));
25
+ };
@@ -1,7 +1,19 @@
1
1
  export { Badge } from "./Badge";
2
2
  export type { BadgeProps } from "./Badge";
3
+ export { Avatar } from "./Avatar";
4
+ export type { AvatarProps } from "./Avatar";
5
+ export { RoadMap } from "./RoadMap";
6
+ export type { RoadMapProps, RoadMapStage } from "./RoadMap";
3
7
  export { Dialog } from "./Dialog";
4
8
  export type { DialogProps } from "./Dialog";
5
9
  export { Loader } from "./Loader";
6
10
  export type { LoaderProps } from "./Loader";
11
+ export { Filter } from "./Filter";
12
+ export type { FilterProps } from "./Filter";
13
+ export { FiltersDialog } from "./FiltersDialog";
14
+ export type { FiltersDialogProps, FilterConfig } from "./FiltersDialog";
15
+ export { Snackbar } from "./Snackbar";
16
+ export type { SnackbarProps } from "./Snackbar";
17
+ export { SnackbarContainer } from "./SnackbarContainer";
18
+ export type { SnackbarContainerProps } from "./SnackbarContainer";
7
19
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC"}
@@ -1,3 +1,9 @@
1
1
  export { Badge } from "./Badge";
2
+ export { Avatar } from "./Avatar";
3
+ export { RoadMap } from "./RoadMap";
2
4
  export { Dialog } from "./Dialog";
3
5
  export { Loader } from "./Loader";
6
+ export { Filter } from "./Filter";
7
+ export { FiltersDialog } from "./FiltersDialog";
8
+ export { Snackbar } from "./Snackbar";
9
+ export { SnackbarContainer } from "./SnackbarContainer";
@@ -0,0 +1,40 @@
1
+ import React, { type ReactNode, type Dispatch, type SetStateAction } from "react";
2
+ import type { Theme, ThemeContextType } from "./types";
3
+ export interface NavbarInterface {
4
+ navBarLeftNode?: string | ReactNode;
5
+ navBarRightNode?: string | ReactNode;
6
+ fullWidthNavbar: boolean;
7
+ height?: string;
8
+ className?: string;
9
+ }
10
+ export interface LeftDrawerInterface {
11
+ headerNode?: ReactNode;
12
+ contentNode?: ReactNode;
13
+ footerNode?: ReactNode;
14
+ className?: string;
15
+ width?: string;
16
+ }
17
+ export interface AppLayoutContextType extends ThemeContextType {
18
+ navbar: NavbarInterface | undefined;
19
+ leftDrawer: LeftDrawerInterface | undefined;
20
+ className: string;
21
+ setNavbar: Dispatch<SetStateAction<NavbarInterface | undefined>>;
22
+ setLeftDrawer: Dispatch<SetStateAction<LeftDrawerInterface | undefined>>;
23
+ setClassName: (className: string) => void;
24
+ setNavBarLeftNode: (node: string | ReactNode | undefined) => void;
25
+ setNavbarRightNode: (node: string | ReactNode | undefined) => void;
26
+ }
27
+ interface AppLayoutProviderProps {
28
+ children: ReactNode;
29
+ initialTheme?: string | Theme;
30
+ storageKey?: string;
31
+ forceInitialTheme?: boolean;
32
+ initialNavbar?: NavbarInterface;
33
+ initialLeftDrawer?: LeftDrawerInterface;
34
+ className?: string;
35
+ }
36
+ export declare const AppLayoutProvider: React.FC<AppLayoutProviderProps>;
37
+ export declare const useAppLayout: () => AppLayoutContextType;
38
+ export declare const useAppLayoutContext: () => boolean;
39
+ export {};
40
+ //# sourceMappingURL=AppLayoutContext.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AppLayoutContext.d.ts","sourceRoot":"","sources":["../../src/contexts/AppLayoutContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAIZ,KAAK,SAAS,EAEd,KAAK,QAAQ,EACb,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAKvD,MAAM,WAAW,eAAe;IAC9B,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,eAAe,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAE5D,MAAM,EAAE,eAAe,GAAG,SAAS,CAAC;IACpC,UAAU,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC5C,SAAS,EAAE,MAAM,CAAC;IAGlB,SAAS,EAAE,QAAQ,CAAC,cAAc,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC,CAAC;IACjE,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,mBAAmB,GAAG,SAAS,CAAC,CAAC,CAAC;IACzE,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAClE,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;CACpE;AAMD,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,SAAS,CAAC;IAEpB,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,iBAAiB,CAAC,EAAE,mBAAmB,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyHD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA2B9D,CAAC;AAIF,eAAO,MAAM,YAAY,QAAO,oBAM/B,CAAC;AAIF,eAAO,MAAM,mBAAmB,eAG/B,CAAC"}