@beweco/aurora-ui 1.0.0-beta.141 → 1.0.0-beta.145
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/assets/css/styles.css +34 -3
- package/dist/assets/css/theme.css +18 -0
- package/dist/index.cjs.js +617 -320
- package/dist/index.esm.js +514 -214
- package/dist/types/compat/heroui-v2-shims.d.ts.map +1 -1
- package/dist/types/components/alert/Alert.d.ts.map +1 -1
- package/dist/types/components/analytics-card/AnalyticsCard.d.ts.map +1 -1
- package/dist/types/components/autocomplete/AutoComplete.d.ts.map +1 -1
- package/dist/types/components/breadcrumbs/Breadcrumbs.d.ts.map +1 -1
- package/dist/types/components/button/Button.d.ts.map +1 -1
- package/dist/types/components/card/Card.d.ts.map +1 -1
- package/dist/types/components/checkbox/Checkbox.d.ts.map +1 -1
- package/dist/types/components/chip/Chip.d.ts.map +1 -1
- package/dist/types/components/color-picker/ColorPicker.d.ts.map +1 -1
- package/dist/types/components/copy-text/CopyText.d.ts.map +1 -1
- package/dist/types/components/datepicker/DatePicker.d.ts.map +1 -1
- package/dist/types/components/datepicker/calendar-slots.d.ts.map +1 -1
- package/dist/types/components/drawer/Drawer.d.ts.map +1 -1
- package/dist/types/components/drawer/_internal/DrawerBody.d.ts.map +1 -1
- package/dist/types/components/drawer/_internal/DrawerFooter.d.ts +3 -1
- package/dist/types/components/drawer/_internal/DrawerFooter.d.ts.map +1 -1
- package/dist/types/components/drawer/_internal/DrawerHeader.d.ts.map +1 -1
- package/dist/types/components/drawer-filters/DrawerFilters.d.ts.map +1 -1
- package/dist/types/components/drawer-filters/_internal/DayMonthPicker.d.ts +6 -0
- package/dist/types/components/drawer-filters/_internal/DayMonthPicker.d.ts.map +1 -1
- package/dist/types/components/drawer-filters/_internal/FilterSection.d.ts.map +1 -1
- package/dist/types/components/dropdown/Dropdown.d.ts.map +1 -1
- package/dist/types/components/dropdown/_internal/renderTrigger.d.ts.map +1 -1
- package/dist/types/components/h1/H1.d.ts.map +1 -1
- package/dist/types/components/h2/H2.d.ts.map +1 -1
- package/dist/types/components/h3/H3.d.ts.map +1 -1
- package/dist/types/components/h4/H4.d.ts.map +1 -1
- package/dist/types/components/input/Input.d.ts.map +1 -1
- package/dist/types/components/kanban/_internal/KanbanColumn.d.ts.map +1 -1
- package/dist/types/components/menu/_internal/menu-mobile-bottom-bar/MenuMobileBottomBar.d.ts.map +1 -1
- package/dist/types/components/menu/_internal/menu-nav-list/MenuNavList.d.ts.map +1 -1
- package/dist/types/components/menu-claw/MenuClaw.d.ts.map +1 -1
- package/dist/types/components/menu-claw/_internal/menu-claw-history/MenuClawHistoryPanel.d.ts.map +1 -1
- package/dist/types/components/menu-claw/_internal/menu-claw-nav/MenuClawNavItem.d.ts.map +1 -1
- package/dist/types/components/modal/Modal.d.ts.map +1 -1
- package/dist/types/components/modal/_internal/ModalBody.d.ts +1 -1
- package/dist/types/components/modal/_internal/ModalBody.d.ts.map +1 -1
- package/dist/types/components/modal/_internal/ModalFooter.d.ts +6 -0
- package/dist/types/components/modal/_internal/ModalFooter.d.ts.map +1 -1
- package/dist/types/components/modal/_internal/ModalHeader.d.ts.map +1 -1
- package/dist/types/components/multi-step-wizard/_internal/MultiStepSidebar.d.ts.map +1 -1
- package/dist/types/components/multi-step-wizard/_internal/MultistepNavigationButtons.d.ts.map +1 -1
- package/dist/types/components/p/P.d.ts.map +1 -1
- package/dist/types/components/pagination/Pagination.d.ts.map +1 -1
- package/dist/types/components/range-filter/RangeFilter.d.ts.map +1 -1
- package/dist/types/components/row-steps/RowSteps.d.ts.map +1 -1
- package/dist/types/components/select/Select.d.ts.map +1 -1
- package/dist/types/components/step-indicator/StepIndicator.d.ts.map +1 -1
- package/dist/types/components/switch/Switch.d.ts.map +1 -1
- package/dist/types/components/switch/Switch.types.d.ts +22 -0
- package/dist/types/components/switch/Switch.types.d.ts.map +1 -1
- package/dist/types/components/switch/index.d.ts +1 -1
- package/dist/types/components/switch/index.d.ts.map +1 -1
- package/dist/types/components/table/Table.d.ts.map +1 -1
- package/dist/types/components/table/TableContent.d.ts.map +1 -1
- package/dist/types/components/table/_internal/v2-compat.d.ts.map +1 -1
- package/dist/types/components/tabs/Tabs.d.ts.map +1 -1
- package/dist/types/components/textarea/Textarea.d.ts.map +1 -1
- package/dist/types/components/time-input/TimeInput.d.ts.map +1 -1
- package/dist/types/components/tooltip/Tooltip.d.ts.map +1 -1
- package/dist/types/components/vertical-steps/VerticalSteps.d.ts.map +1 -1
- package/dist/types/index.d.ts +2 -1
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/utils/cn.d.ts +46 -0
- package/dist/types/utils/cn.d.ts.map +1 -0
- package/package.json +3 -2
package/dist/index.esm.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { Card as Card$1, Breadcrumbs, ProgressBar,
|
|
2
|
-
export { Accordion, AccordionItem, Avatar, Breadcrumbs, CardFooter, CardHeader, CheckboxGroup, CloseButton, DropdownItem, DropdownMenu, DropdownTrigger, Link, Popover, PopoverContent, PopoverTrigger, Radio, RadioGroup, Skeleton, Slider, Spinner, TableBody, TableCell, TableColumn, TableHeader, TableRow
|
|
1
|
+
import { Card as Card$1, Breadcrumbs, ProgressBar, Label, ListBoxSection, ListBoxItem, Separator, RouterProvider, I18nProvider, useOverlayState, Spinner, buttonVariants, Button as Button$1, Chip as Chip$1, CloseButton, useLocale, Pagination as Pagination$1, Skeleton, Accordion, DatePicker as DatePicker$1, DateField, Description, Calendar, FieldError, DateRangePicker as DateRangePicker$1, RangeCalendar, TextField, InputGroup, RadioGroup, Radio, Tabs as Tabs$1, Dropdown as Dropdown$1, Header, ComboBox, Input as Input$1, ListBox, Tooltip as Tooltip$2, DropdownTrigger, DropdownPopover, DropdownMenu, DropdownSection as DropdownSection$1, DropdownItem, Badge as Badge$1, Popover, PopoverTrigger, PopoverContent, Avatar, Link, Switch as Switch$1, TimeField, useFilter, Autocomplete, Select as Select$1, SearchField, Checkbox as Checkbox$1, Table as Table$1, TextArea, toastVariants, WarningIcon, SuccessIcon, InfoIcon, DangerIcon, Modal as Modal$1, Slider, Drawer as Drawer$1, ModalHeader as ModalHeader$1, ModalBody as ModalBody$1, ModalFooter as ModalFooter$1, DrawerHeader as DrawerHeader$1, DrawerBody as DrawerBody$1, DrawerFooter as DrawerFooter$1, Alert as Alert$1 } from '@heroui/react';
|
|
2
|
+
export { Accordion, AccordionItem, Avatar, Breadcrumbs, CardFooter, CardHeader, CheckboxGroup, CloseButton, DropdownItem, DropdownMenu, DropdownTrigger, Link, Popover, PopoverContent, PopoverTrigger, Radio, RadioGroup, Skeleton, Slider, Spinner, TableBody, TableCell, TableColumn, TableHeader, TableRow } from '@heroui/react';
|
|
3
|
+
import { cnMerge } from 'tailwind-variants';
|
|
3
4
|
import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
|
|
4
5
|
import $8WNJc$react, { Children, isValidElement, Fragment, useState, useRef, useCallback, useEffect, createElement, useId, forwardRef, useMemo, cloneElement, useImperativeHandle, createContext, useContext, useLayoutEffect, memo, useReducer, version } from 'react';
|
|
5
6
|
import { Icon } from '@iconify/react';
|
|
@@ -8,6 +9,74 @@ import { ResponsiveContainer, AreaChart, CartesianGrid, XAxis, Tooltip as Toolti
|
|
|
8
9
|
import { createPortal } from 'react-dom';
|
|
9
10
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
10
11
|
|
|
12
|
+
/**
|
|
13
|
+
* `cn` de Aurora: el mismo `cn` de `tailwind-variants` que reexporta HeroUI v3, pero con
|
|
14
|
+
* `tailwind-merge` enseñado a reconocer el vocabulario de HeroUI v2.
|
|
15
|
+
*
|
|
16
|
+
* Por qué existe (TECH-2459): el `cn` de v3 corre sobre `tailwind-merge` 3, que no conoce la
|
|
17
|
+
* escala `tiny/small/medium/large` del plugin `heroui()` de v2. Sin esta configuración:
|
|
18
|
+
*
|
|
19
|
+
* - `cn("text-tiny text-default-500")` → `"text-default-500"`: lee `text-tiny` como un COLOR
|
|
20
|
+
* (`text-<cualquier cosa>` casa con el validador de color), ve otro color detrás y la BORRA
|
|
21
|
+
* del DOM. Medido en `P.tsx`: texto a 16px en vez de 12px.
|
|
22
|
+
* - `cn("border-medium border-default-200")` y `cn("shadow-small shadow-primary")` igual:
|
|
23
|
+
* `border-*` y `shadow-*` también caen en el validador de color.
|
|
24
|
+
* - `cn("rounded-medium rounded-none")` → conserva las dos: no la reconoce como radio, así
|
|
25
|
+
* que el conflicto real no se resuelve y gana la que venga después en la hoja.
|
|
26
|
+
*
|
|
27
|
+
* Las utilidades en sí (`.text-tiny`, `.rounded-medium`…) las genera el Tailwind de la app a
|
|
28
|
+
* partir de los tokens `--text-*`, `--radius-*`, `--border-width-*` y `--shadow-*` que publica
|
|
29
|
+
* `theme-tokens.generated.css` (export `./theme`). Esto solo cubre la otra mitad: que `cn` no
|
|
30
|
+
* las borre ni las deje sin resolver.
|
|
31
|
+
*
|
|
32
|
+
* La escala sale del plugin v2 (`@heroui/theme@2.4.15`, `corePlugin` → `theme.extend`):
|
|
33
|
+
* `fontSize` tiny/small/medium/large, `borderRadius` small/medium/large, `borderWidth`
|
|
34
|
+
* small/medium/large, `boxShadow` small/medium/large. Nada más: la escala `*-unit-*` NO existía
|
|
35
|
+
* en 2.4.15 (ya estaba muerta en v2) y no se repone.
|
|
36
|
+
*
|
|
37
|
+
* Se exporta como `cn` del paquete, así que el de las apps y el de las fachadas es el mismo.
|
|
38
|
+
* Las fachadas deben importarlo de aquí, nunca de `@heroui/react` (lo vigila `cn.test.ts`).
|
|
39
|
+
*/
|
|
40
|
+
const V2_TEXT = ["tiny", "small", "medium", "large"];
|
|
41
|
+
const V2_SIZES = ["small", "medium", "large"];
|
|
42
|
+
/**
|
|
43
|
+
* Extensión de `tailwind-merge` (formato `twMergeConfig` de tailwind-variants).
|
|
44
|
+
*
|
|
45
|
+
* `theme.text`/`radius`/`shadow` alimentan los grupos `font-size`, `rounded*` (todas las
|
|
46
|
+
* esquinas y lados) y `shadow`. El ancho de borde no lee del tema en tailwind-merge 3
|
|
47
|
+
* (`scaleBorderWidth` es fijo), así que se extienden sus grupos uno a uno.
|
|
48
|
+
*/
|
|
49
|
+
const BORDER_WIDTH_GROUPS = [
|
|
50
|
+
["border-w", "border"],
|
|
51
|
+
["border-w-x", "border-x"],
|
|
52
|
+
["border-w-y", "border-y"],
|
|
53
|
+
["border-w-s", "border-s"],
|
|
54
|
+
["border-w-e", "border-e"],
|
|
55
|
+
["border-w-bs", "border-bs"],
|
|
56
|
+
["border-w-be", "border-be"],
|
|
57
|
+
["border-w-t", "border-t"],
|
|
58
|
+
["border-w-r", "border-r"],
|
|
59
|
+
["border-w-b", "border-b"],
|
|
60
|
+
["border-w-l", "border-l"],
|
|
61
|
+
];
|
|
62
|
+
const AURORA_TW_MERGE_CONFIG = {
|
|
63
|
+
extend: {
|
|
64
|
+
theme: {
|
|
65
|
+
text: V2_TEXT,
|
|
66
|
+
radius: V2_SIZES,
|
|
67
|
+
shadow: V2_SIZES,
|
|
68
|
+
},
|
|
69
|
+
classGroups: Object.fromEntries(BORDER_WIDTH_GROUPS.map(([group, prefix]) => [
|
|
70
|
+
group,
|
|
71
|
+
[{ [prefix]: V2_SIZES }],
|
|
72
|
+
])),
|
|
73
|
+
},
|
|
74
|
+
};
|
|
75
|
+
// Referencia estable: tailwind-variants cachea el merger por igualdad con la última config.
|
|
76
|
+
const MERGE_OPTIONS = { twMergeConfig: AURORA_TW_MERGE_CONFIG };
|
|
77
|
+
/** Combina clases y resuelve conflictos de Tailwind, conociendo la escala de HeroUI v2. */
|
|
78
|
+
const cn = (...classnames) => cnMerge(...classnames)(MERGE_OPTIONS);
|
|
79
|
+
|
|
11
80
|
// ---------------------------------------------------------------------------
|
|
12
81
|
// Compound v2 → namespaced v3: símbolos que SÍ desaparecieron como export plano
|
|
13
82
|
// (verificado: no están en los `export { … }` de sus módulos v3, a diferencia
|
|
@@ -756,7 +825,7 @@ const SHAPE_BY_VARIANT = {
|
|
|
756
825
|
light: "transparent",
|
|
757
826
|
flat: "soft",
|
|
758
827
|
bordered: "outline",
|
|
759
|
-
faded: "
|
|
828
|
+
faded: "faded",
|
|
760
829
|
// `shadow` de v2 es `solid` + sombra teñida (ver `SHADOW_CLASS`).
|
|
761
830
|
shadow: "solid",
|
|
762
831
|
// `dot` de v2: chip neutro con un punto de color (ver `DOT_BASE_CLASS`).
|
|
@@ -911,6 +980,7 @@ const V3_VARIANT_BY_SHAPE = {
|
|
|
911
980
|
soft: "soft",
|
|
912
981
|
transparent: "tertiary",
|
|
913
982
|
outline: "tertiary",
|
|
983
|
+
faded: "tertiary",
|
|
914
984
|
dot: "tertiary",
|
|
915
985
|
};
|
|
916
986
|
/**
|
|
@@ -1018,6 +1088,48 @@ const CLOSE_ICON_SIZE_CLASS = {
|
|
|
1018
1088
|
md: "size-[18px]",
|
|
1019
1089
|
lg: "size-5",
|
|
1020
1090
|
};
|
|
1091
|
+
// ── `bordered` y `faded` (TECH-2459, 24-sep: el usuario ve «muy negro» el `bordered default`) ──
|
|
1092
|
+
//
|
|
1093
|
+
// Antes las dos variantes pintaban borde y texto con `tintFg` (`default-700` = rgb(63,63,70) para
|
|
1094
|
+
// `default`): en el selector de tallas del `addon-card` de beweossmbs el chip sin elegir se leía
|
|
1095
|
+
// como un bloque casi negro al lado del `solid primary` elegido. Y el mismo `tintFg` dejaba el
|
|
1096
|
+
// texto por debajo de AA en otros colores. Medido en `Custom Components/Chip → BorderedColors`
|
|
1097
|
+
// (texto contra el fondo real, blanco / tarjeta `content1` oscura):
|
|
1098
|
+
//
|
|
1099
|
+
// | color | antes claro | antes oscuro | ahora claro | ahora oscuro |
|
|
1100
|
+
// |-----------|-------------|--------------|-------------|--------------|
|
|
1101
|
+
// | default | 10.44 (borde casi negro) | 13.96 (borde casi blanco) | 17.93 | 15.11 |
|
|
1102
|
+
// | primary | 4.66 | 3.80 ✗ | 6.38 | 7.33 |
|
|
1103
|
+
// | secondary | 9.50 | 5.77 | 9.50 | 5.77 |
|
|
1104
|
+
// | success | 2.19 ✗ | 8.08 | 5.50 | 8.08 |
|
|
1105
|
+
// | warning | 2.04 ✗ | 8.68 | 5.20 | 8.68 |
|
|
1106
|
+
// | danger | 4.14 ✗ | 4.27 ✗ | 6.06 | 5.02 |
|
|
1107
|
+
//
|
|
1108
|
+
// Criterio (no es volver a v2 por volver, es que se vea bien dentro de los tokens de Aurora):
|
|
1109
|
+
//
|
|
1110
|
+
// - **Borde**: el color a secas (`border-<color>`). Para `default`, el gris neutro que ya usa el
|
|
1111
|
+
// resto de la familia (`dot` lleva `border-default`, y v2 también en `bordered`/`faded`):
|
|
1112
|
+
// `--color-default`, rgb(212,212,216) en claro y rgb(63,63,70) en oscuro. Se distingue del fondo
|
|
1113
|
+
// (medido: 1.48:1 sobre blanco, 1.70:1 sobre la tarjeta oscura, 2.01:1 sobre el fondo negro) sin
|
|
1114
|
+
// competir con el texto. Input/Select reposan en `default-200`, un paso más claro, porque su borde
|
|
1115
|
+
// enmarca un campo; en un chip el borde ES la forma, y `default-200` (≈1.27:1 sobre blanco,
|
|
1116
|
+
// calculado) la dejaba casi invisible. En oscuro los dos pasos son el mismo rgb(63,63,70).
|
|
1117
|
+
// - **Texto**: el mismo paso legible que ya usa `flat` (`flatFg` + su `dark:`), que es el que la
|
|
1118
|
+
// librería ya validó para texto tintado; `default` usa `foreground`.
|
|
1119
|
+
// - Van como CLASES y no como `borderColor` inline: un estilo inline le ganaba a cualquier
|
|
1120
|
+
// `border-*` de la app, y así `cn` (tailwind-merge) deja ganar la clase del consumidor.
|
|
1121
|
+
// - `faded` conserva lo que lo distinguía en v2 (borde neutro en todos los colores + relleno
|
|
1122
|
+
// `default-100`); hasta ahora era idéntico a `bordered`. Su texto es el `flatFg` SIN el `dark:`
|
|
1123
|
+
// de `flat` (ver `flatDarkFgClass`). Medido: ≥ 4.73:1 en claro y ≥ 4.85:1 en oscuro en los 6
|
|
1124
|
+
// colores. 0 usos en las apps.
|
|
1125
|
+
const OUTLINE_BORDER_CLASS = {
|
|
1126
|
+
default: "border-default",
|
|
1127
|
+
primary: "border-primary",
|
|
1128
|
+
secondary: "border-secondary",
|
|
1129
|
+
success: "border-success",
|
|
1130
|
+
warning: "border-warning",
|
|
1131
|
+
danger: "border-danger",
|
|
1132
|
+
};
|
|
1021
1133
|
function colorStyle(color, shape) {
|
|
1022
1134
|
if (shape === "dot") {
|
|
1023
1135
|
// `dot`: el chip es neutro para cualquier color (el color va solo en el punto).
|
|
@@ -1034,7 +1146,14 @@ function colorStyle(color, shape) {
|
|
|
1034
1146
|
// `flat` de v2: pastilla translúcida + texto del paso -600/-700 (P-08d).
|
|
1035
1147
|
return { "--chip-bg": t.flatBg, "--chip-fg": t.flatFg };
|
|
1036
1148
|
}
|
|
1037
|
-
|
|
1149
|
+
if (shape === "outline" || shape === "faded") {
|
|
1150
|
+
// `bordered`/`faded`: texto del paso legible de `flat`; `default` en `foreground`.
|
|
1151
|
+
return {
|
|
1152
|
+
"--chip-bg": shape === "faded" ? "var(--color-default-100)" : "transparent",
|
|
1153
|
+
"--chip-fg": color === "default" ? "var(--color-foreground)" : t.flatFg,
|
|
1154
|
+
};
|
|
1155
|
+
}
|
|
1156
|
+
// transparent (light): sin relleno, texto tinte del color.
|
|
1038
1157
|
return { "--chip-bg": "transparent", "--chip-fg": t.tintFg };
|
|
1039
1158
|
}
|
|
1040
1159
|
/**
|
|
@@ -1072,18 +1191,21 @@ const Chip = ({ color = "default", variant = "solid", size = "md", radius = "ful
|
|
|
1072
1191
|
: undefined;
|
|
1073
1192
|
// Con `dot` el color no tiñe el chip, tampoco el de los colores fijos.
|
|
1074
1193
|
const customClass = isStandard || isDot ? "" : CUSTOM_COLOR_CLASSES[color];
|
|
1075
|
-
const
|
|
1076
|
-
|
|
1077
|
-
|
|
1194
|
+
const hasBorder = shape === "outline" || shape === "faded";
|
|
1195
|
+
const outlineClass = hasBorder
|
|
1196
|
+
? cn("border-2", isStandard
|
|
1197
|
+
? OUTLINE_BORDER_CLASS[shape === "faded" ? "default" : color]
|
|
1198
|
+
: "")
|
|
1199
|
+
: "";
|
|
1200
|
+
// El `dark:text-*` que v2 declaraba para el texto de `flat` en success/warning/danger (P-08d),
|
|
1201
|
+
// reutilizado por `bordered`, que toma el mismo texto. `faded` NO: sobre su relleno
|
|
1202
|
+
// `default-100` oscuro el `danger-500` se quedaba en 4.22:1; con el paso `-600`/`-700` del
|
|
1203
|
+
// tema oscuro (más claro) todos los colores pasan AA. Va como clase porque `--chip-fg` es inline y no puede depender del tema; la capa
|
|
1078
1204
|
// `utilities` gana al `color: var(--chip-fg)` de `.chip`, que vive en `components`.
|
|
1079
|
-
const flatDarkFgClass = isStandard && shape === "soft"
|
|
1205
|
+
const flatDarkFgClass = isStandard && (shape === "soft" || shape === "outline")
|
|
1080
1206
|
? (COLOR_TOKENS[color].flatFgDarkClass ?? "")
|
|
1081
1207
|
: "";
|
|
1082
|
-
const baseStyle = vars
|
|
1083
|
-
? shape === "outline"
|
|
1084
|
-
? { ...vars, borderColor: vars["--chip-fg"] }
|
|
1085
|
-
: vars
|
|
1086
|
-
: undefined;
|
|
1208
|
+
const baseStyle = vars;
|
|
1087
1209
|
// El `style` del consumidor va DESPUÉS: pisa el relleno/texto calculados (uso real en
|
|
1088
1210
|
// beweossmbs: `style={{ backgroundColor, color }}` con el color del agente, 5 sitios).
|
|
1089
1211
|
const style = baseStyle || consumerStyle ? { ...baseStyle, ...consumerStyle } : undefined;
|
|
@@ -1202,6 +1324,20 @@ const STRIP_CLASS = "w-fit gap-0 rounded-[12px] shadow-xs";
|
|
|
1202
1324
|
const STRIP_LOOSE_CLASS = "w-fit gap-1";
|
|
1203
1325
|
/** Controles anterior/siguiente: celda cuadrada, sin el padding lateral de v3. */
|
|
1204
1326
|
const NAV_CLASS = "w-9 px-0";
|
|
1327
|
+
/**
|
|
1328
|
+
* TECH-2459 (beweossmbs, 24-sep) — anterior/siguiente deshabilitados por estar en un EXTREMO
|
|
1329
|
+
* (página 1 / última). v3 los apaga con `status-disabled` (`opacity: var(--disabled-opacity)`,
|
|
1330
|
+
* `@heroui/styles/dist/components/pagination.css:57`), que aquí deja el galón en el
|
|
1331
|
+
* `text-default-foreground` de `CELL_CLASS` al 50 %: medido `rgb(0,0,0)` a opacidad 0.5 sobre
|
|
1332
|
+
* `default-100`, que se lee como un control activo. Se pinta el galón en `default-300` y a
|
|
1333
|
+
* opacidad plena, el gris de «apagado» de la paleta (el mismo que usaba v2,
|
|
1334
|
+
* `data-[disabled=true]:text-default-300` de `@heroui/theme@2.4.15` `pagination.js:489`); el
|
|
1335
|
+
* cursor y el `pointer-events` de v3 se conservan.
|
|
1336
|
+
*
|
|
1337
|
+
* Solo en los extremos: con `isDisabled` en toda la paginación manda el apagado uniforme de v3
|
|
1338
|
+
* (todas las celdas al 50 %), y las flechas no deben verse distintas del resto.
|
|
1339
|
+
*/
|
|
1340
|
+
const NAV_AT_EDGE_CLASS = "disabled:text-default-300 disabled:opacity-100";
|
|
1205
1341
|
/**
|
|
1206
1342
|
* Radio de cada pieza según su posición en la tira.
|
|
1207
1343
|
*
|
|
@@ -1276,6 +1412,33 @@ const DEFAULT_TRANSLATIONS$g = {
|
|
|
1276
1412
|
jumpBackwardAriaLabel: "Retroceder {count} páginas",
|
|
1277
1413
|
jumpForwardAriaLabel: "Avanzar {count} páginas",
|
|
1278
1414
|
};
|
|
1415
|
+
/**
|
|
1416
|
+
* TECH-2459 (beweossmbs, 24-sep) — los mismos textos en inglés, para cuando el idioma de la app es
|
|
1417
|
+
* inglés. El defecto medido: con la interfaz en inglés, «anterior» se anunciaba «Página anterior».
|
|
1418
|
+
* La app SÍ comunica su idioma (`<HeroUIProvider locale="en-US">` → `I18nProvider` de react-aria,
|
|
1419
|
+
* `src/compat/heroui-v2-shims.tsx`), y es el mismo que ya siguen los textos propios de react-aria
|
|
1420
|
+
* (la casilla «Select all» de la tabla, los calendarios…); la fachada lo ignoraba porque solo
|
|
1421
|
+
* miraba `translations`. Ahora el idioma elige la base y `translations` sigue ganando encima.
|
|
1422
|
+
*/
|
|
1423
|
+
const EN_TRANSLATIONS = {
|
|
1424
|
+
previousPageAriaLabel: "Previous page",
|
|
1425
|
+
nextPageAriaLabel: "Next page",
|
|
1426
|
+
jumpBackwardAriaLabel: "Jump back {count} pages",
|
|
1427
|
+
jumpForwardAriaLabel: "Jump forward {count} pages",
|
|
1428
|
+
};
|
|
1429
|
+
/**
|
|
1430
|
+
* Base de textos según el idioma de react-aria (`useLocale`): inglés si el locale es `en*`,
|
|
1431
|
+
* español en cualquier otro caso (el default de la librería, regla `auraui-i18n`).
|
|
1432
|
+
*
|
|
1433
|
+
* Sin provider, react-aria resuelve el idioma del NAVEGADOR (`navigator.language`), igual que
|
|
1434
|
+
* para sus propios textos: una app que no declare `locale` sigue al navegador. Para fijarlo, la
|
|
1435
|
+
* app pasa `locale` a `HeroUIProvider` o los textos por `translations`.
|
|
1436
|
+
*/
|
|
1437
|
+
function baseTranslations(locale) {
|
|
1438
|
+
return locale.toLowerCase().startsWith("en")
|
|
1439
|
+
? EN_TRANSLATIONS
|
|
1440
|
+
: DEFAULT_TRANSLATIONS$g;
|
|
1441
|
+
}
|
|
1279
1442
|
/**
|
|
1280
1443
|
* TECH-2459 · elipsis navegable — páginas que salta la elipsis. Literal de v2:
|
|
1281
1444
|
* `dotsJump = 5`, default desestructurado en `@heroui/pagination@2.2.20`
|
|
@@ -1395,7 +1558,8 @@ function getPaginationRange(total, current) {
|
|
|
1395
1558
|
const Pagination = ({ total, page, initialPage = 1, onChange, size: _size = "sm", className, isDisabled, showControls = true, isCompact = true, showShadow = false, color = "primary", translations = {}, }) => {
|
|
1396
1559
|
const [internalPage, setInternalPage] = useState(initialPage);
|
|
1397
1560
|
const currentPage = page ?? internalPage;
|
|
1398
|
-
const
|
|
1561
|
+
const { locale } = useLocale();
|
|
1562
|
+
const t = { ...baseTranslations(locale), ...translations };
|
|
1399
1563
|
const goTo = (next) => {
|
|
1400
1564
|
const clamped = Math.min(Math.max(next, 1), total);
|
|
1401
1565
|
if (page === undefined) {
|
|
@@ -1428,7 +1592,7 @@ const Pagination = ({ total, page, initialPage = 1, onChange, size: _size = "sm"
|
|
|
1428
1592
|
// lo nombraba ("previous page button", `use-pagination.js:213`), pero en
|
|
1429
1593
|
// inglés y hardcodeado; aquí va por `translations` (regla obligatoria de
|
|
1430
1594
|
// i18n del repo, skill `auraui-i18n`).
|
|
1431
|
-
, { "aria-label": t.previousPageAriaLabel, className: cn(CELL_CLASS, NAV_CLASS, cellRadius(isCompact, { isFirst: true, isLast: false })), isDisabled: isDisabled || currentPage <= 1, onPress: () => goTo(currentPage - 1), children: jsx(Pagination$1.PreviousIcon, {}) }) })), items.map((item, index) => {
|
|
1595
|
+
, { "aria-label": t.previousPageAriaLabel, className: cn(CELL_CLASS, NAV_CLASS, isDisabled ? "" : NAV_AT_EDGE_CLASS, cellRadius(isCompact, { isFirst: true, isLast: false })), isDisabled: isDisabled || currentPage <= 1, onPress: () => goTo(currentPage - 1), children: jsx(Pagination$1.PreviousIcon, {}) }) })), items.map((item, index) => {
|
|
1432
1596
|
if (item === "ellipsis") {
|
|
1433
1597
|
const isBefore = index < activeIndex;
|
|
1434
1598
|
const label = isBefore
|
|
@@ -1443,7 +1607,7 @@ const Pagination = ({ total, page, initialPage = 1, onChange, size: _size = "sm"
|
|
|
1443
1607
|
return (jsx(Pagination$1.Item, { children: jsx(Pagination$1.Link, { className: cn(CELL_CLASS, cellRadius(isCompact, itemPosition(index)), item === currentPage ? activeClass : ""), isActive: item === currentPage, isDisabled: isDisabled, onPress: () => goTo(item), children: item }) }, item));
|
|
1444
1608
|
}), showControls && (jsx(Pagination$1.Item, { children: jsx(Pagination$1.Next
|
|
1445
1609
|
/* Mismo motivo que en `Previous`: el galón es `aria-hidden`. */
|
|
1446
|
-
, { "aria-label": t.nextPageAriaLabel, className: cn(CELL_CLASS, NAV_CLASS, cellRadius(isCompact, { isFirst: false, isLast: true })), isDisabled: isDisabled || currentPage >= total, onPress: () => goTo(currentPage + 1), children: jsx(Pagination$1.NextIcon, {}) }) }))] }) }));
|
|
1610
|
+
, { "aria-label": t.nextPageAriaLabel, className: cn(CELL_CLASS, NAV_CLASS, isDisabled ? "" : NAV_AT_EDGE_CLASS, cellRadius(isCompact, { isFirst: false, isLast: true })), isDisabled: isDisabled || currentPage >= total, onPress: () => goTo(currentPage + 1), children: jsx(Pagination$1.NextIcon, {}) }) }))] }) }));
|
|
1447
1611
|
};
|
|
1448
1612
|
|
|
1449
1613
|
// TECH-2459 · F5 · P-01 — Valores tomados del tema v2 REAL (`@heroui/theme@2.4.15`,
|
|
@@ -1719,7 +1883,12 @@ const ROOT_HELPER_SPACE_CLASS = {
|
|
|
1719
1883
|
};
|
|
1720
1884
|
const GROUP_PLACEMENT_CLASS = {
|
|
1721
1885
|
outside: undefined,
|
|
1722
|
-
|
|
1886
|
+
// `min-w-min` (TECH-2459, beweossmbs QA 24-sep, barra de la agenda por debajo de 1440px):
|
|
1887
|
+
// `.date-input-group` de v3 lleva `overflow-hidden`, y un ítem flex con overflow distinto de
|
|
1888
|
+
// `visible` tiene `min-width: auto` = 0. Con `flex-1` el grupo se quedaba con el hueco sobrante
|
|
1889
|
+
// y recortaba su propio botón de calendario (104px con 140 de contenido a 1280px). En v2 el
|
|
1890
|
+
// overflow era visible: el grupo conservaba su contenido y era la etiqueta la que se partía.
|
|
1891
|
+
"outside-left": "relative flex-1 min-w-min",
|
|
1723
1892
|
};
|
|
1724
1893
|
const HELPER_PLACEMENT_CLASS = {
|
|
1725
1894
|
outside: undefined,
|
|
@@ -2221,7 +2390,9 @@ labelPlacement: _labelPlacement, isInvalid = false, isRequired = false, isDisabl
|
|
|
2221
2390
|
// `undefined` y el campo dejaba de llenar su contenedor: en una fila flex se encogía al ancho
|
|
2222
2391
|
// de su contenido (medido por S2: 208px dentro de una fila de 592, 336px de hueco). En una
|
|
2223
2392
|
// columna no se notaba porque el `stretch` del flex lo tapaba — pero afecta a cualquier app.
|
|
2224
|
-
fullWidth = true, value, defaultValue, onChange, onValueChange, className, classNames, required, name, type = "text", onKeyDown,
|
|
2393
|
+
fullWidth = true, value, defaultValue, onChange, onValueChange, className, classNames, required, name, type = "text", onKeyDown,
|
|
2394
|
+
// Nombre y descripción accesibles: van al `TextField`, no al `<input>` (ver abajo).
|
|
2395
|
+
"aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }, ref) => {
|
|
2225
2396
|
// El `<input>` real, también para la fachada: v2 devolvía el foco al campo al limpiar
|
|
2226
2397
|
// (`domRef.current?.focus()` en `handleClear`). Se combina con el `ref` del consumidor.
|
|
2227
2398
|
const inputRef = useRef(null);
|
|
@@ -2264,6 +2435,19 @@ fullWidth = true, value, defaultValue, onChange, onValueChange, className, class
|
|
|
2264
2435
|
// Solo flota cuando hay label y NO hay placeholder: con placeholder, v2 ya mostraba el label
|
|
2265
2436
|
// arriba desde el primer render (ver el bloque de arriba).
|
|
2266
2437
|
const labelFlotante = Boolean(label) && !placeholder;
|
|
2438
|
+
// ── Nombre accesible sin `label` visible ─────────────────────────────────────────────────
|
|
2439
|
+
//
|
|
2440
|
+
// Quien llama a `useLabel` (y avisa «If you do not provide a visible label, you must specify
|
|
2441
|
+
// an aria-label…») es el `TextField` de react-aria, que se los pasa al `<input>` por contexto.
|
|
2442
|
+
// Dejarlos en el spread del `<input>` hacía que avisara AUNQUE la app diera nombre (medido en
|
|
2443
|
+
// beweossmbs: 14/16 avisos al cargar `/clients/table`, del buscador con solo placeholder).
|
|
2444
|
+
// Y `aria-describedby` en el `<input>` pisaba el id de la `Description` propia. v2 no avisaba
|
|
2445
|
+
// nunca: `"aria-label": label ? aria-label : safeAriaLabel(aria-label, placeholder)`
|
|
2446
|
+
// (`@heroui/input@2.4.33`, `dist/use-input.js:119`). Con `aria-labelledby` no se añade el
|
|
2447
|
+
// placeholder: react-aria lo concatenaría al nombre del elemento referido.
|
|
2448
|
+
const accessibleLabel = label || ariaLabelledBy
|
|
2449
|
+
? ariaLabel
|
|
2450
|
+
: ariaLabel?.trim() || placeholder?.trim() || undefined;
|
|
2267
2451
|
const handleChange = (event) => {
|
|
2268
2452
|
onChange?.(event);
|
|
2269
2453
|
onValueChange?.(event.target.value);
|
|
@@ -2296,7 +2480,7 @@ fullWidth = true, value, defaultValue, onChange, onValueChange, className, class
|
|
|
2296
2480
|
clearValue();
|
|
2297
2481
|
}
|
|
2298
2482
|
};
|
|
2299
|
-
return (jsxs(TextField, { id: inputId, value: currentValue,
|
|
2483
|
+
return (jsxs(TextField, { id: inputId, "aria-label": accessibleLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, value: currentValue,
|
|
2300
2484
|
// Solo el modo no controlado escribe aquí; en controlado manda el `value` del padre
|
|
2301
2485
|
// (que se entera por `onChange`/`onValueChange` del `<input>`).
|
|
2302
2486
|
onChange: isControlled ? undefined : setUncontrolledValue, name: name, isInvalid: isInvalid, isRequired: isRequired, isDisabled: isDisabled, isReadOnly: isReadOnly, className: cn(FIELD_STACK_CLASS$3[size], fullWidth ? "w-full" : "",
|
|
@@ -2313,7 +2497,15 @@ fullWidth = true, value, defaultValue, onChange, onValueChange, className, class
|
|
|
2313
2497
|
// pase el consumidor.
|
|
2314
2498
|
"w-full",
|
|
2315
2499
|
// v3 fusiona `innerWrapper` e `inputWrapper` de v2 en este único elemento.
|
|
2316
|
-
classNames?.innerWrapper, classNames?.inputWrapper), children: [startContent && (jsx(InputGroup.Prefix, { className: "border-none bg-transparent px-0", children: startContent })), jsx(InputGroup.Input, { ...rest, ref: setInputRef, onKeyDown: handleKeyDown, required: required, type: type, placeholder: labelFlotante ? " " : placeholder, onChange: handleChange, className: cn(
|
|
2500
|
+
classNames?.innerWrapper, classNames?.inputWrapper), children: [startContent && (jsx(InputGroup.Prefix, { className: "border-none bg-transparent px-0", children: startContent })), jsx(InputGroup.Input, { ...rest, ref: setInputRef, onKeyDown: handleKeyDown, required: required, type: type, placeholder: labelFlotante ? " " : placeholder, onChange: handleChange, className: cn(
|
|
2501
|
+
// `w-full min-w-0` (TECH-2459, beweossmbs QA 24-sep): `.input-group__input`
|
|
2502
|
+
// de v3 es `flex-1` sin ancho, así que el `<input>` aportaba su ancho
|
|
2503
|
+
// intrínseco (~151px) como min-content y el campo no encogía en una fila
|
|
2504
|
+
// flex estrecha (hex del color picker de Agenda → Colors: 180px y 35px
|
|
2505
|
+
// fuera de su fila; en v2, 132px). v2 ponía `w-full` en este slot
|
|
2506
|
+
// (`@heroui/theme@2.4.15`, `dist/components/input.js:111`), y un ancho
|
|
2507
|
+
// en porcentaje no cuenta para el min-content de un `<input>`.
|
|
2508
|
+
"w-full min-w-0 bg-transparent p-0", SIZE_TEXT_CLASS$2[size], isInvalid ? INVALID_TEXT_CLASS$2 : "", startContent ? "ps-1.5" : "", endContent || showClear ? "pe-1.5" : "", classNames?.input) }), showClear && (jsx(CloseButton, { "aria-label": "Limpiar", className: cn("h-4 w-4 min-h-0 p-0.5 mr-1", classNames?.clearButton), onPress: handleClear })), endContent && (jsx(InputGroup.Suffix, { className: "border-none bg-transparent px-0", children: endContent }))] }), description && !isInvalid && (jsx(Description, { className: cn(HELPER_CLASS$2, "text-left", classNames?.helperWrapper, classNames?.description), children: description })), isInvalid && errorMessage && (jsx(FieldError, { className: cn(HELPER_CLASS$2, "text-left", classNames?.helperWrapper, classNames?.errorMessage), children: errorMessage }))] }));
|
|
2317
2509
|
});
|
|
2318
2510
|
Input.displayName = "Input";
|
|
2319
2511
|
|
|
@@ -2435,18 +2627,36 @@ const SHADOW_CLASS = {
|
|
|
2435
2627
|
md: "shadow-[shadow:var(--aurora-shadow-medium)]",
|
|
2436
2628
|
lg: "shadow-[shadow:var(--aurora-shadow-large)]",
|
|
2437
2629
|
};
|
|
2630
|
+
// Geometría v2 de la raíz (slot `base` de `@heroui/theme@2.4.15`, `dist/components/card.js`):
|
|
2631
|
+
// `flex flex-col relative overflow-hidden`, SIN `gap`. v3 (`@heroui/styles/…/card.css:5`) pone
|
|
2632
|
+
// `gap-3 overflow-visible`, y eso ROMPE layouts de v2 (medido por beweossmbs con la .141): con
|
|
2633
|
+
// tres hijos la card crece 24px (Notificaciones automáticas: 220px frente a 192, y la última card
|
|
2634
|
+
// queda cortada por su contenedor), y el texto que no cabe se sale de la card en vez de
|
|
2635
|
+
// recortarse (cabecera de recurso de la agenda, vista Semana: 80px frente a 56 y los nombres
|
|
2636
|
+
// fuera). Va primero en el `cn`: un `gap-*`/`overflow-*` de la app lo retira por fusión.
|
|
2637
|
+
// `overflow-hidden` no quita nada que se viera: la onda ya se recorta en su propia capa
|
|
2638
|
+
// (`Card.css`), el anillo de foco es un `ring` (`box-shadow`, no lo recorta el `overflow` de su
|
|
2639
|
+
// propio nodo) y la sombra de la card se pinta fuera de su caja. Medido en la story `V2Geometry`: tres
|
|
2640
|
+
// hijos de 20px dan 108px (132 con el gap de v3) y el texto que desborda ya no asoma.
|
|
2641
|
+
const ROOT_V2_CLASS = "gap-0 overflow-hidden";
|
|
2438
2642
|
// Literales del `tv` de v2 (`@heroui/theme@2.4.15`, `dist/components/card.js`), con sus tokens
|
|
2439
2643
|
// traducidos a los que existen en Tailwind 4 + Aurora:
|
|
2440
2644
|
// isPressable → `cursor-pointer` + compound `data-[pressed=true]:scale-[0.97]
|
|
2441
2645
|
// tap-highlight-transparent` (el hundido lo hace aquí `:active`, que es lo que
|
|
2442
2646
|
// marcaba `data-pressed` en un botón nativo)
|
|
2443
2647
|
// disableAnimation=false → `transition-transform-background motion-reduce:transition-none`
|
|
2444
|
-
// foco → `dataFocusVisibleClasses` (`outline-2 outline-focus outline-offset-2`)
|
|
2648
|
+
// foco → `dataFocusVisibleClasses` (`outline-2 outline-focus outline-offset-2`). Aquí va con el
|
|
2649
|
+
// MISMO anillo que los botones de v3/Aurora (`status-focused` → `focus-ring`:
|
|
2650
|
+
// `ring-2 ring-focus ring-offset-background` + offset 2px), no con `outline`: en
|
|
2651
|
+
// Tailwind 4 `outline-none` fija `--tw-outline-style: none` y `focus-visible:outline-2`
|
|
2652
|
+
// hereda ese estilo, así que el anillo NO se pintaba (regresión de la .141, al pasar de
|
|
2653
|
+
// `<button>` a `<div role="button">`). El `ring` es `box-shadow` fuera de la caja: no lo
|
|
2654
|
+
// recorta el `overflow-hidden` de la raíz y se compone con la sombra de la card.
|
|
2445
2655
|
// isHoverable → `data-[hover=true]:bg-content2` (aquí `hover:`, react-aria ya no escribe
|
|
2446
2656
|
// `data-hover` — trampa 3 de la skill `auraui-components`)
|
|
2447
2657
|
// isDisabled → `opacity-disabled cursor-not-allowed` (`opacity-disabled` era 0.5 en v2)
|
|
2448
2658
|
// fullWidth → `w-full`
|
|
2449
|
-
const PRESSABLE_CLASS = "isolate cursor-pointer text-foreground outline-none focus-visible:z-10 focus-visible:
|
|
2659
|
+
const PRESSABLE_CLASS = "isolate cursor-pointer text-foreground outline-none focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background [-webkit-tap-highlight-color:transparent]";
|
|
2450
2660
|
const PRESS_ANIMATION_CLASS = "transition-[transform,background-color] motion-reduce:transition-none active:scale-[0.97]";
|
|
2451
2661
|
const HOVERABLE_CLASS = "hover:bg-content2";
|
|
2452
2662
|
const DISABLED_CLASS = "opacity-50 cursor-not-allowed";
|
|
@@ -2562,7 +2772,7 @@ const Card = forwardRef(({ children, className, shadow = "sm", radius = "sm", pa
|
|
|
2562
2772
|
event.preventDefault();
|
|
2563
2773
|
press(pressEventFromKey(event));
|
|
2564
2774
|
}, [onKeyUp, pulsable, press]);
|
|
2565
|
-
const combinedClassName = cn(paddingClasses[padding], RADIUS_CLASS$5[radius], SHADOW_CLASS[shadow], fullWidth ? "w-full" : "", isPressable ? PRESSABLE_CLASS : "", isPressable && !disableAnimation ? PRESS_ANIMATION_CLASS : "", isHoverable ? HOVERABLE_CLASS : "", isDisabled ? DISABLED_CLASS : "",
|
|
2775
|
+
const combinedClassName = cn(ROOT_V2_CLASS, paddingClasses[padding], RADIUS_CLASS$5[radius], SHADOW_CLASS[shadow], fullWidth ? "w-full" : "", isPressable ? PRESSABLE_CLASS : "", isPressable && !disableAnimation ? PRESS_ANIMATION_CLASS : "", isHoverable ? HOVERABLE_CLASS : "", isDisabled ? DISABLED_CLASS : "",
|
|
2566
2776
|
// El `className` de la app, último: gana por fusión (ver JSDoc).
|
|
2567
2777
|
className);
|
|
2568
2778
|
// v2 cambiaba el ELEMENTO a `<button>` con `isPressable`, y hasta la .140 esta fachada lo
|
|
@@ -3728,7 +3938,12 @@ const ColorPicker = forwardRef(({ value, onChange, label, required = false, disa
|
|
|
3728
3938
|
${error
|
|
3729
3939
|
? "border-danger dark:border-danger-400"
|
|
3730
3940
|
: "border-default-300 dark:border-default-700"}
|
|
3731
|
-
`, "aria-label": t.customColorLabel, title: t.customColorLabel }), jsx(Input, { type: "text", value: textValue, onValueChange: handleTextChange, onBlur: handleTextBlur, placeholder: t.placeholder, disabled: disabled, isDisabled: disabled, isInvalid: error || isInvalidFormat, size: "sm", variant: "bordered",
|
|
3941
|
+
`, "aria-label": t.customColorLabel, title: t.customColorLabel }), jsx(Input, { type: "text", value: textValue, onValueChange: handleTextChange, onBlur: handleTextBlur, placeholder: t.placeholder, disabled: disabled, isDisabled: disabled, isInvalid: error || isInvalidFormat, size: "sm", variant: "bordered",
|
|
3942
|
+
// `min-w-0` (TECH-2459, beweossmbs QA 24-sep): el campo es un ítem de la fila
|
|
3943
|
+
// flex de la muestra de color y tiene que poder encoger en huecos estrechos
|
|
3944
|
+
// (Agenda → Colors: 180px). El `w-full min-w-0` del `<input>` en la fachada
|
|
3945
|
+
// ya lo arregla; esto es el suelo explícito en la raíz del campo.
|
|
3946
|
+
className: "min-w-0", classNames: {
|
|
3732
3947
|
input: "uppercase font-mono text-sm",
|
|
3733
3948
|
inputWrapper: "min-h-8 h-8 focus-within:!border-primary-500",
|
|
3734
3949
|
}, startContent: textValue.startsWith("#") ? null : (jsx("span", { className: "text-default-400 text-sm", children: "#" })) })] }), (error || isInvalidFormat) && (jsx("p", { className: "text-xs text-danger", children: isInvalidFormat ? t.invalidColorFormat : errorText }))] }), showPredefinedColors && predefinedColors.length > 0 && (jsxs("div", { children: [jsx("p", { className: "text-xs font-medium text-default-600 mb-2", children: t.predefinedColorsLabel }), jsx("div", { className: "flex flex-wrap gap-2", children: predefinedColors.map((color) => renderColorCircle(color.value, color.name, normalizeHexColor(value) === normalizeHexColor(color.value))) })] })), enableRecentColors && recentColors.length > 0 && (jsxs("div", { children: [jsx("p", { className: "text-xs font-medium text-default-600 mb-2", children: t.recentColorsLabel }), jsx("div", { className: "flex flex-wrap gap-2", children: recentColors.map((color) => renderColorCircle(color, color, normalizeHexColor(value) === color)) })] }))] }));
|
|
@@ -6744,7 +6959,16 @@ const ITEM_COLLAPSED_CLASS = "w-11 h-11 gap-0 p-0 justify-center";
|
|
|
6744
6959
|
// `w-full flex-1`: el slot `title` de v2 era `flex-1 text-small font-normal w-full`, y su slot
|
|
6745
6960
|
// `wrapper` `w-full` — el título se comía el espacio libre y empujaba el `endContent` al borde.
|
|
6746
6961
|
// El `[data-slot="label"]` de v3 es `w-fit`, que es la otra mitad de P-14.
|
|
6747
|
-
|
|
6962
|
+
//
|
|
6963
|
+
// `min-w-0 truncate`: v2 le ponía `truncate` al slot `title` siempre que el título fuera texto
|
|
6964
|
+
// (`@heroui/theme@2.4.15`, `dist/components/listbox.js`, variante `hasTitleTextChild: { true:
|
|
6965
|
+
// { title: "truncate" } }`; en el menú el título es siempre un string). La migración copió el slot
|
|
6966
|
+
// base y se dejó la variante. Sin ella, una etiqueta que no cabe no se corta:
|
|
6967
|
+
// medido en beweossmbs y en la story `Menu › LongLabelTruncation`, «menu_automations» ocupaba sus
|
|
6968
|
+
// 126,8px enteros y empujaba la chip «AI» de x=204,7 a x=222,8, 6px FUERA del ítem. `truncate` solo
|
|
6969
|
+
// no basta: un flex item parte de `min-width: auto` (su ancho de contenido) y no encoge por debajo;
|
|
6970
|
+
// `min-w-0` es lo que le deja ceder el hueco a la chip, y entonces sí corta con elipsis.
|
|
6971
|
+
const ITEM_TITLE_CLASS = "w-full min-w-0 flex-1 truncate text-sm font-medium text-default-500 group-data-[selected=true]:text-default-600";
|
|
6748
6972
|
// TECH-2459 · G2 · fix de navegación — resolución de un ítem por su clave.
|
|
6749
6973
|
//
|
|
6750
6974
|
// `onSelectionChange` del `ListBox` entrega la CLAVE, no el ítem. v2 no necesitaba esto:
|
|
@@ -9086,52 +9310,23 @@ const COLOR_VAR = {
|
|
|
9086
9310
|
warning: "var(--warning)",
|
|
9087
9311
|
danger: "var(--danger)",
|
|
9088
9312
|
};
|
|
9089
|
-
|
|
9090
|
-
|
|
9091
|
-
|
|
9092
|
-
|
|
9093
|
-
|
|
9094
|
-
|
|
9095
|
-
|
|
9096
|
-
|
|
9097
|
-
|
|
9098
|
-
|
|
9099
|
-
|
|
9100
|
-
|
|
9101
|
-
|
|
9102
|
-
|
|
9103
|
-
|
|
9104
|
-
|
|
9105
|
-
|
|
9106
|
-
* pista v2 (`@heroui/theme@2.4.15`, `dist/components/toggle.js`, slot `wrapper`)
|
|
9107
|
-
* sm 40×24 · md 48×28 · lg 56×32, `rounded-full`, `bg-default-200`
|
|
9108
|
-
* v3 (`@heroui/styles/dist/components/switch.css`)
|
|
9109
|
-
* sm 32×16 · md 40×20 · lg 48×24, `rounded-lg`/`rounded-xl`, `--default`
|
|
9110
|
-
* thumb v2 círculo `bg-white` con `shadow-small`; sm 16 · md 20 · lg 24
|
|
9111
|
-
* v3 rectángulo redondeado; sm 16,5×12 · md 22×16 · lg 27,5×20
|
|
9112
|
-
*
|
|
9113
|
-
* Ya no se pisa NADA de eso: la pista, el thumb, su radio, su color y su desplazamiento salen de
|
|
9114
|
-
* v3. Por eso desaparecieron `TRACK_CLASS`, `THUMB_CLASS`, el `bg-white`/`shadow-small` del thumb
|
|
9115
|
-
* y el `--switch-control-bg` que forzaba el gris apagado de v2 — y con ellos la clase `group`,
|
|
9116
|
-
* que solo existía para que el thumb pudiera leer el `data-selected` de esta raíz.
|
|
9117
|
-
*
|
|
9118
|
-
* Lo que SÍ se conserva, y no es aspecto:
|
|
9119
|
-
*
|
|
9120
|
-
* · `--switch-control-bg-checked` (ver `COLOR_VAR`): sostiene la prop `color` de la API v2, que
|
|
9121
|
-
* v3 eliminó. Sin ella `color="success"` y compañía dejarían de pintar. El valor de
|
|
9122
|
-
* `primary` coincide con el de v3 (`--accent` = `--color-primary`), así que el aspecto por
|
|
9123
|
-
* defecto es el de v3 igualmente.
|
|
9124
|
-
* · `inline-flex flex-row items-center` en la raíz: es COLOCACIÓN, no aspecto del control. v3
|
|
9125
|
-
* usa `flex flex-col items-start` para poder apilar `description`/`field-error`, slots que
|
|
9126
|
-
* esta fachada no renderiza; al ser **inline**, la caja participa de la línea de texto, y eso
|
|
9127
|
-
* es lo que la sitúa donde la esperan los consumidores (medido: 1px de diferencia en un
|
|
9128
|
-
* contenedor de bloque, y `schedule-row` se apoya en ello). Dentro de un contenedor flex da
|
|
9129
|
-
* igual: un ítem flex se blockifica.
|
|
9130
|
-
*
|
|
9131
|
-
* Consecuencia asumida: la referencia v2 de las stories con Switch deja de coincidir. Declarado
|
|
9132
|
-
* como CAMBIO-V3 en `vrt/classification-overrides.json`, con las cifras en
|
|
9133
|
-
* `.bewe/epics/TECH-2459/findings/p6-switch-aspecto-v3.md`.
|
|
9134
|
-
*/
|
|
9313
|
+
// Literales COMPLETOS (sin interpolar): Tailwind de las apps los descubre escaneando `dist`.
|
|
9314
|
+
const SIZE_CLASSES = {
|
|
9315
|
+
sm: {
|
|
9316
|
+
control: "h-6 w-10 rounded-full",
|
|
9317
|
+
thumb: "h-4 w-5 ms-1 rounded-full group-data-[selected=true]/switch:ms-[calc(100%-1.5rem)]",
|
|
9318
|
+
},
|
|
9319
|
+
md: {
|
|
9320
|
+
control: "h-7 w-12 rounded-full",
|
|
9321
|
+
thumb: "h-5 w-6 ms-1 rounded-full group-data-[selected=true]/switch:ms-[calc(100%-1.75rem)]",
|
|
9322
|
+
},
|
|
9323
|
+
lg: {
|
|
9324
|
+
control: "h-8 w-14 rounded-full",
|
|
9325
|
+
thumb: "h-6 w-7 ms-1 rounded-full group-data-[selected=true]/switch:ms-[calc(100%-2rem)]",
|
|
9326
|
+
},
|
|
9327
|
+
};
|
|
9328
|
+
// Thumb ENCENDIDO blanco en cualquier pack y con cualquier `color` (defecto 1 del bloque de arriba).
|
|
9329
|
+
const THUMB_ON_CLASS = "group-data-[selected=true]/switch:bg-white";
|
|
9135
9330
|
// Los subcomponentes compound de v3, adjuntos como estáticos para que la API v3 siga funcionando a
|
|
9136
9331
|
// través de la fachada (`<Switch><Switch.Content><Switch.Control><Switch.Thumb/>…`). `Root` se deja
|
|
9137
9332
|
// FUERA a propósito (mismo criterio que `Alert` y `Checkbox`): la raíz de v3 es justo la pieza que
|
|
@@ -9158,12 +9353,32 @@ function hasCompoundChildren$2(children) {
|
|
|
9158
9353
|
*
|
|
9159
9354
|
* Dos modos, decididos por los `children`:
|
|
9160
9355
|
* - **API v2** (`children` como label, `isSelected`/`defaultSelected`, `onValueChange`, `color`,
|
|
9161
|
-
* `size`): la fachada compone `Switch.Content`/`Switch.Control`/`Switch.Thumb` por
|
|
9162
|
-
* repone `color` pisando `--switch-control-bg-checked
|
|
9356
|
+
* `size`, `classNames`): la fachada compone `Switch.Content`/`Switch.Control`/`Switch.Thumb` por
|
|
9357
|
+
* dentro, repone `color` pisando `--switch-control-bg-checked`, aplica su escala de tamaños y el
|
|
9358
|
+
* thumb encendido blanco (ver el bloque de la cabecera).
|
|
9163
9359
|
* - **API compound v3** (`<Switch><Switch.Content>…`): pasa los children tal cual a la raíz de
|
|
9164
|
-
* HeroUI, sin geometría ni colocación propias.
|
|
9165
|
-
|
|
9166
|
-
|
|
9360
|
+
* HeroUI, sin geometría ni colocación propias: ahí manda el JSX del consumidor.
|
|
9361
|
+
*
|
|
9362
|
+
* `classNames` (slots de v2 → nodo de v3; las clases de la app van al FINAL y ganan por `cn`):
|
|
9363
|
+
*
|
|
9364
|
+
* base → `Switch.Content`, la `<label>` que contiene la pista y la etiqueta: es el MISMO papel
|
|
9365
|
+
* que tenía `base` en v2 (una `<label>` con esos dos hijos directos, que la app
|
|
9366
|
+
* coloca con `flex-row-reverse justify-between`, y toda ella clicable). Pero la raíz
|
|
9367
|
+
* de v3 (`SwitchField`) la envuelve con una caja `inline-flex`, y un `w-full` de la
|
|
9368
|
+
* app se resolvería contra esa caja encogida. Así que con `base` la raíz pasa a
|
|
9369
|
+
* `display: contents` (se aparta de la maqueta) y `className` viaja con `base` a la
|
|
9370
|
+
* `<label>`, como en v2 (`cn(classNames.base, className)`). Lo único de la raíz que
|
|
9371
|
+
* `contents` pierde es la opacidad de `status-disabled` (el cursor y el
|
|
9372
|
+
* `pointer-events` se heredan; los tokens de color, también): se repone en la
|
|
9373
|
+
* `<label>` con su `data-disabled`. Medido en el navegador con el JSX de smbs: la
|
|
9374
|
+
* fila entera (390×52) conmuta, no solo el texto y la pista. Sin `base` no cambia
|
|
9375
|
+
* nada.
|
|
9376
|
+
* wrapper → la pista (`Switch.Control`).
|
|
9377
|
+
* thumb → el thumb (`Switch.Thumb`).
|
|
9378
|
+
* label → un `<span data-slot="label">` que envuelve los `children`; solo existe si se pasa
|
|
9379
|
+
* `classNames.label` (sin él los children siguen PELADOS, como hasta ahora).
|
|
9380
|
+
*/
|
|
9381
|
+
const SwitchFacade = ({ id, size = "md", color, children, onChange, onValueChange, className, classNames, style, ...props }) => {
|
|
9167
9382
|
const generatedId = useId();
|
|
9168
9383
|
const autoId = id || generatedId;
|
|
9169
9384
|
const handleChange = (isSelected) => {
|
|
@@ -9183,6 +9398,10 @@ const SwitchFacade = ({ id, size = "md", color, children, onChange, onValueChang
|
|
|
9183
9398
|
// a `status` también en compound). Sin `color`, el encendido es el `--accent` de v3.
|
|
9184
9399
|
style: color === undefined ? style : colorStyle, onChange: handleChange, children: children }));
|
|
9185
9400
|
}
|
|
9401
|
+
const sizeClasses = SIZE_CLASSES[size] ?? SIZE_CLASSES.md;
|
|
9402
|
+
// Con `classNames.base`, la `<label>` (`Switch.Content`) hace de `base` de v2 y la raíz se
|
|
9403
|
+
// aparta de la maqueta (ver `classNames` en el JSDoc de arriba).
|
|
9404
|
+
const hasBase = Boolean(classNames?.base);
|
|
9186
9405
|
return (jsx(Switch$1, { ...props, id: autoId, size: size,
|
|
9187
9406
|
// COLOCACIÓN, no aspecto (ver el bloque de arriba): v3 usa `flex flex-col items-start`
|
|
9188
9407
|
// para poder apilar `description`/`field-error`, slots que esta fachada no renderiza.
|
|
@@ -9190,10 +9409,12 @@ const SwitchFacade = ({ id, size = "md", color, children, onChange, onValueChang
|
|
|
9190
9409
|
// (Storybook centra con `#storybook-root` en `display: block`): con `flex` el widget cae
|
|
9191
9410
|
// en y=346 y con `inline-flex` en y=345, donde lo esperan los consumidores. Dentro de un
|
|
9192
9411
|
// contenedor flex (el uso real, p. ej. `schedule-row`) da igual: un ítem flex se
|
|
9193
|
-
// blockifica.
|
|
9194
|
-
className:
|
|
9195
|
-
|
|
9196
|
-
|
|
9412
|
+
// blockifica. `group/switch`: de aquí lee el thumb el `data-selected`.
|
|
9413
|
+
className: hasBase
|
|
9414
|
+
? "group/switch contents"
|
|
9415
|
+
: cn("group/switch inline-flex flex-row items-center", className), style: colorStyle, onChange: handleChange, children: jsxs(Switch$1.Content, { className: hasBase
|
|
9416
|
+
? cn("data-[disabled=true]:opacity-(--disabled-opacity)", classNames?.base, className)
|
|
9417
|
+
: undefined, children: [jsx(Switch$1.Control, { className: cn(sizeClasses.control, classNames?.wrapper), children: jsx(Switch$1.Thumb, { className: cn(sizeClasses.thumb, THUMB_ON_CLASS, classNames?.thumb) }) }), classNames?.label && children != null ? (jsx("span", { "data-slot": "label", className: classNames.label, children: children })) : (children)] }) }));
|
|
9197
9418
|
};
|
|
9198
9419
|
SwitchFacade.displayName = "Aurora.Switch";
|
|
9199
9420
|
/**
|
|
@@ -10919,6 +11140,46 @@ function transformBody(body) {
|
|
|
10919
11140
|
return cloneElement(body, undefined, ...spread(mapNodes(children, withSelectionCell)));
|
|
10920
11141
|
}
|
|
10921
11142
|
|
|
11143
|
+
/**
|
|
11144
|
+
* TECH-2459 (beweossmbs, 24-sep: «Sessions history» de finanzas) — la celda del ESTADO VACÍO.
|
|
11145
|
+
*
|
|
11146
|
+
* En v3 `renderEmptyState` es un render prop de react-aria que pinta lo que devuelva dentro de
|
|
11147
|
+
* `<tbody data-empty="true"><tr role="row"><td role="rowheader" colspan>`
|
|
11148
|
+
* (`react-aria-components/dist/private/Table.mjs:886-915`), y ese `<td>` NO lleva `.table__cell`:
|
|
11149
|
+
* se queda sin el `bg-surface`, el padding ni el color de las celdas. Medido en la story
|
|
11150
|
+
* `EmptyState` con la cadena pelada que devuelven 12 de las 13 tablas de beweossmbs: 20 px de
|
|
11151
|
+
* alto, `padding: 0`, `text-align: start` (el texto pegado arriba a la izquierda) y fondo
|
|
11152
|
+
* transparente, o sea el gris de la raíz `table-root--primary` asomando.
|
|
11153
|
+
*
|
|
11154
|
+
* No es una regresión de la librería: ni la fachada ni `Table.Content` pintaron nunca ese estado
|
|
11155
|
+
* (`git log -S renderEmptyState|data-empty|emptyContent -- src/components/table` → 0 commits); lo
|
|
11156
|
+
* que se había arreglado era backoffice, en su propia app (TECH-2298, `49f2b35`: cada
|
|
11157
|
+
* `renderEmptyState` devuelve `<div className="flex h-40 items-center justify-center
|
|
11158
|
+
* text-default-500">`). Aquí se resuelve para todas las apps, en la única pieza por la que pasan
|
|
11159
|
+
* todas las tablas.
|
|
11160
|
+
*
|
|
11161
|
+
* Qué se le da a la celda, con tokens de v3 (no se busca la métrica de v2):
|
|
11162
|
+
* - `h-40`: aire. En una celda de tabla `height` actúa de alto MÍNIMO, así que un nodo propio más
|
|
11163
|
+
* alto sigue mandando, y uno de `h-40` como el de backoffice mide lo mismo (no se suma: por
|
|
11164
|
+
* eso es alto y no padding vertical).
|
|
11165
|
+
* - `px-4 text-center align-middle`: centrado en los dos ejes; `px-4` es el lateral de `.table__cell`.
|
|
11166
|
+
* - `text-sm text-default-500`: el cuerpo de las celdas de v3 (`text-sm`) en el gris atenuado que
|
|
11167
|
+
* ya usan las apps para este texto (backoffice), legible sobre el blanco (contraste AA).
|
|
11168
|
+
* - `bg-surface`: el fondo del cuerpo (`.table__cell` de `table.css`), no el gris de la raíz. Las
|
|
11169
|
+
* esquinas redondeadas ya las pone `table.css` (primera/última celda de la primera/última fila).
|
|
11170
|
+
*
|
|
11171
|
+
* Selector por `data-empty`, que react-aria solo escribe con el cuerpo vacío. Cadenas literales
|
|
11172
|
+
* completas: Tailwind solo emite lo que encuentra escrito entero.
|
|
11173
|
+
*/
|
|
11174
|
+
const EMPTY_STATE_CLASS = [
|
|
11175
|
+
"[&>tbody[data-empty]>tr>td]:h-40",
|
|
11176
|
+
"[&>tbody[data-empty]>tr>td]:px-4",
|
|
11177
|
+
"[&>tbody[data-empty]>tr>td]:text-center",
|
|
11178
|
+
"[&>tbody[data-empty]>tr>td]:align-middle",
|
|
11179
|
+
"[&>tbody[data-empty]>tr>td]:text-sm",
|
|
11180
|
+
"[&>tbody[data-empty]>tr>td]:text-default-500",
|
|
11181
|
+
"[&>tbody[data-empty]>tr>td]:bg-surface",
|
|
11182
|
+
].join(" ");
|
|
10922
11183
|
/** Default de v2 (`use-table`, `@heroui/table@2.2.32`), sin reinterpretar. */
|
|
10923
11184
|
function defaultShowCheckboxes(props) {
|
|
10924
11185
|
const behavior = props.selectionBehavior ?? "toggle";
|
|
@@ -10961,7 +11222,8 @@ function TableContent({ children, isHeaderSticky, showSelectionCheckboxes, ...pr
|
|
|
10961
11222
|
return child;
|
|
10962
11223
|
});
|
|
10963
11224
|
// Esparcido y no `{content}`: ver `spread` (un array como hijo único exigiría claves).
|
|
10964
|
-
|
|
11225
|
+
// La clase del estado vacío va delante: la de la app, detrás, gana si pisa el mismo grupo.
|
|
11226
|
+
return createElement(Table$1.Content, { ...props, className: cn(EMPTY_STATE_CLASS, props.className) }, ...spread(content));
|
|
10965
11227
|
}
|
|
10966
11228
|
TableContent.displayName = "Aurora.Table.Content";
|
|
10967
11229
|
|
|
@@ -10992,6 +11254,24 @@ function isPart$2(node, parts) {
|
|
|
10992
11254
|
function withSticky(isHeaderSticky, root) {
|
|
10993
11255
|
return isHeaderSticky === undefined ? (root) : (jsx(TableStickyContext.Provider, { value: isHeaderSticky, children: root }));
|
|
10994
11256
|
}
|
|
11257
|
+
/**
|
|
11258
|
+
* TECH-2459 (beweossmbs, 24-sep) — barra de scroll NATIVA en el contenedor que inserta la fachada.
|
|
11259
|
+
*
|
|
11260
|
+
* `table.css:20` le aplica a `.table__scroll-container` la utilidad `scrollbar` de v3, que con los
|
|
11261
|
+
* tokens de `@heroui/styles` resuelve a `scrollbar-width: thin` y un pulgar al 15 % de opacidad
|
|
11262
|
+
* sobre carril transparente (medido en la story `Overflow`:
|
|
11263
|
+
* `oklch(0.2103 0.0059 285.89 / 0.15) rgba(0,0,0,0)`). Con barras clásicas (Windows, o macOS con
|
|
11264
|
+
* «mostrar barras: siempre») casi no se ve, y el usuario concluye que la tabla no tiene scroll
|
|
11265
|
+
* horizontal aunque lo tenga: es affordance, no estética. `scrollbar-default` (utilidad de la
|
|
11266
|
+
* propia v3, `utilities/index.css:71`) devuelve la barra del sistema; al ser capa `utilities`
|
|
11267
|
+
* gana a la regla de `components` sin `!important`.
|
|
11268
|
+
*
|
|
11269
|
+
* Solo en el contenedor que monta la fachada. Si la app monta su propio `Table.ScrollContainer`
|
|
11270
|
+
* (o un `ResizableContainer`), la fachada no toca nada y manda lo que la app escriba; y una clase
|
|
11271
|
+
* de la app sobre el root dirigida al contenedor (`[&_.table__scroll-container]:scrollbar-thin`)
|
|
11272
|
+
* gana por especificidad.
|
|
11273
|
+
*/
|
|
11274
|
+
const SCROLL_CONTAINER_CLASS = "scrollbar-default";
|
|
10995
11275
|
const TableFacade = ({ children, isHeaderSticky, ...props }) => {
|
|
10996
11276
|
const nodes = Children.toArray(children);
|
|
10997
11277
|
// Sin hijos, o con un contenedor de scroll ya montado a mano: el root tal cual.
|
|
@@ -11000,7 +11280,7 @@ const TableFacade = ({ children, isHeaderSticky, ...props }) => {
|
|
|
11000
11280
|
}
|
|
11001
11281
|
const scrollable = nodes.filter((node) => !isPart$2(node, OUTSIDE_SCROLL));
|
|
11002
11282
|
const outsideScroll = nodes.filter((node) => isPart$2(node, OUTSIDE_SCROLL));
|
|
11003
|
-
return withSticky(isHeaderSticky, jsxs(Table$1, { ...props, children: [jsx(Table$1.ScrollContainer, { children: scrollable }), outsideScroll] }));
|
|
11283
|
+
return withSticky(isHeaderSticky, jsxs(Table$1, { ...props, children: [jsx(Table$1.ScrollContainer, { className: SCROLL_CONTAINER_CLASS, children: scrollable }), outsideScroll] }));
|
|
11004
11284
|
};
|
|
11005
11285
|
TableFacade.displayName = "Aurora.Table";
|
|
11006
11286
|
/**
|
|
@@ -13405,111 +13685,6 @@ const DrawerFiltersHeader = ({ titleId, title, description, }) => {
|
|
|
13405
13685
|
return (jsxs("div", { className: "px-6 pt-10", children: [jsx(H2, { id: titleId, className: "text-xl font-semibold text-foreground mb-2", children: title }), jsx(P, { className: "text-default-500", children: description })] }));
|
|
13406
13686
|
};
|
|
13407
13687
|
|
|
13408
|
-
const NO_YEAR_CLASS = "[&_[data-type='year']]:hidden [&_[data-type='literal']:has(+[data-type='year'])]:hidden";
|
|
13409
|
-
// Year used to construct CalendarDate values. React Aria's onChange only fires when
|
|
13410
|
-
// ALL segments (including hidden year) are user-confirmed. Since users can't type year
|
|
13411
|
-
// (it's CSS-hidden), we read month+day directly from the DOM via data-placeholder
|
|
13412
|
-
// attributes when the picker loses focus, bypassing the year-confirmation requirement.
|
|
13413
|
-
const FILLER_YEAR = new Date().getFullYear();
|
|
13414
|
-
/**
|
|
13415
|
-
* Reads month and day from segment DOM elements.
|
|
13416
|
-
* Returns null if any segment is still in placeholder state (user hasn't typed it yet).
|
|
13417
|
-
* React Aria marks unconfirmed segments with data-placeholder="true".
|
|
13418
|
-
*/
|
|
13419
|
-
function readConfirmedMonthDay(container, monthSelector = '[data-type="month"]', daySelector = '[data-type="day"]') {
|
|
13420
|
-
const monthEl = container.querySelector(monthSelector);
|
|
13421
|
-
const dayEl = container.querySelector(daySelector);
|
|
13422
|
-
if (!monthEl || !dayEl)
|
|
13423
|
-
return null;
|
|
13424
|
-
if (monthEl.getAttribute("data-placeholder") === "true")
|
|
13425
|
-
return null;
|
|
13426
|
-
if (dayEl.getAttribute("data-placeholder") === "true")
|
|
13427
|
-
return null;
|
|
13428
|
-
const month = Number(monthEl.getAttribute("aria-valuenow"));
|
|
13429
|
-
const day = Number(dayEl.getAttribute("aria-valuenow"));
|
|
13430
|
-
if (month >= 1 && month <= 12 && day >= 1 && day <= 31)
|
|
13431
|
-
return { month, day };
|
|
13432
|
-
return null;
|
|
13433
|
-
}
|
|
13434
|
-
const DayMonthPicker = ({ value, onChange, translations, }) => {
|
|
13435
|
-
const t = {
|
|
13436
|
-
dayMonthAriaLabel: "Seleccionar mes y día",
|
|
13437
|
-
dayMonthRangeAriaLabel: "Seleccionar rango de mes y día",
|
|
13438
|
-
dayMonthSingleOption: "Día específico",
|
|
13439
|
-
dayMonthRangeOption: "Rango de fechas",
|
|
13440
|
-
...translations,
|
|
13441
|
-
};
|
|
13442
|
-
const [mode, setMode] = useState(value?.type === "dayMonthRange" ? "range" : "single");
|
|
13443
|
-
useEffect(() => {
|
|
13444
|
-
setMode(value?.type === "dayMonthRange" ? "range" : "single");
|
|
13445
|
-
}, [value?.type]);
|
|
13446
|
-
const pickerValue = value?.type === "dayMonth" ? value.dayMonth : null;
|
|
13447
|
-
const rangeValue = value?.type === "dayMonthRange" ? value.dayMonthRange : null;
|
|
13448
|
-
// Refs to DOM wrappers — used by the DOM-reading fallback for manual input.
|
|
13449
|
-
const singleRef = useRef(null);
|
|
13450
|
-
const rangeRef = useRef(null);
|
|
13451
|
-
// Stable refs so focus-change callbacks always read current values without
|
|
13452
|
-
// needing to be recreated on every render.
|
|
13453
|
-
const pickerValueRef = useRef(pickerValue);
|
|
13454
|
-
pickerValueRef.current = pickerValue;
|
|
13455
|
-
const rangeValueRef = useRef(rangeValue);
|
|
13456
|
-
rangeValueRef.current = rangeValue;
|
|
13457
|
-
const handleModeChange = (newMode) => {
|
|
13458
|
-
const nextMode = newMode === "range" ? "range" : "single";
|
|
13459
|
-
setMode(nextMode);
|
|
13460
|
-
if (nextMode === "single") {
|
|
13461
|
-
onChange({ type: "dayMonth", dayMonth: null, dayMonthRange: null });
|
|
13462
|
-
return;
|
|
13463
|
-
}
|
|
13464
|
-
onChange({ type: "dayMonthRange", dayMonth: null, dayMonthRange: null });
|
|
13465
|
-
};
|
|
13466
|
-
const handleSingleChange = (date) => {
|
|
13467
|
-
onChange({ type: "dayMonth", dayMonth: date, dayMonthRange: null });
|
|
13468
|
-
};
|
|
13469
|
-
const handleRangeChange = (range) => {
|
|
13470
|
-
onChange({ type: "dayMonthRange", dayMonth: null, dayMonthRange: range });
|
|
13471
|
-
};
|
|
13472
|
-
// Called by React Aria when the DatePicker gains/loses focus.
|
|
13473
|
-
// When value=null (placeholder mode) React Aria never fires onChange because the
|
|
13474
|
-
// hidden year segment is never user-confirmed. On blur we read the confirmed
|
|
13475
|
-
// month/day directly from the DOM as a workaround.
|
|
13476
|
-
const handleSingleFocusChange = (isFocused) => {
|
|
13477
|
-
if (isFocused || pickerValueRef.current)
|
|
13478
|
-
return;
|
|
13479
|
-
if (!singleRef.current)
|
|
13480
|
-
return;
|
|
13481
|
-
const result = readConfirmedMonthDay(singleRef.current);
|
|
13482
|
-
if (result) {
|
|
13483
|
-
handleSingleChange(new $2aaf608024c21ca1$export$99faa760c7908e4f(FILLER_YEAR, result.month, result.day));
|
|
13484
|
-
}
|
|
13485
|
-
};
|
|
13486
|
-
const handleRangeFocusChange = (isFocused) => {
|
|
13487
|
-
if (isFocused || rangeValueRef.current)
|
|
13488
|
-
return;
|
|
13489
|
-
if (!rangeRef.current)
|
|
13490
|
-
return;
|
|
13491
|
-
const monthEls = rangeRef.current.querySelectorAll('[data-type="month"]');
|
|
13492
|
-
const dayEls = rangeRef.current.querySelectorAll('[data-type="day"]');
|
|
13493
|
-
if (monthEls.length < 2 || dayEls.length < 2)
|
|
13494
|
-
return;
|
|
13495
|
-
const allConfirmed = [...monthEls, ...dayEls].every((el) => el.getAttribute("data-placeholder") !== "true");
|
|
13496
|
-
if (!allConfirmed)
|
|
13497
|
-
return;
|
|
13498
|
-
const startMonth = Number(monthEls[0].getAttribute("aria-valuenow"));
|
|
13499
|
-
const startDay = Number(dayEls[0].getAttribute("aria-valuenow"));
|
|
13500
|
-
const endMonth = Number(monthEls[1].getAttribute("aria-valuenow"));
|
|
13501
|
-
const endDay = Number(dayEls[1].getAttribute("aria-valuenow"));
|
|
13502
|
-
const valid = (m, d) => m >= 1 && m <= 12 && d >= 1 && d <= 31;
|
|
13503
|
-
if (valid(startMonth, startDay) && valid(endMonth, endDay)) {
|
|
13504
|
-
handleRangeChange({
|
|
13505
|
-
start: new $2aaf608024c21ca1$export$99faa760c7908e4f(FILLER_YEAR, startMonth, startDay),
|
|
13506
|
-
end: new $2aaf608024c21ca1$export$99faa760c7908e4f(FILLER_YEAR, endMonth, endDay),
|
|
13507
|
-
});
|
|
13508
|
-
}
|
|
13509
|
-
};
|
|
13510
|
-
return (jsxs("div", { className: "w-full flex flex-wrap xs:gap-5 justify-between items-center", children: [jsxs(RadioGroup, { orientation: "horizontal", value: mode, onChange: handleModeChange, children: [jsx(Radio, { value: "single", children: jsxs(Radio.Content, { children: [jsx(Radio.Control, { children: jsx(Radio.Indicator, {}) }), t.dayMonthSingleOption] }) }), jsx(Radio, { value: "range", children: jsxs(Radio.Content, { children: [jsx(Radio.Control, { children: jsx(Radio.Indicator, {}) }), t.dayMonthRangeOption] }) })] }), mode === "single" ? (jsx("div", { ref: singleRef, children: jsx(DatePicker, { value: pickerValue, onChange: handleSingleChange, onFocusChange: handleSingleFocusChange, "aria-label": t.dayMonthAriaLabel, endContent: jsx(IconComponent, { icon: "solar:calendar-outline" }), className: `w-full md:w-auto md:max-w-40 ${NO_YEAR_CLASS}` }, "dmp") })) : (jsx("div", { ref: rangeRef, children: jsx(DateRangePicker, { value: rangeValue, onChange: handleRangeChange, onFocusChange: handleRangeFocusChange, "aria-label": t.dayMonthRangeAriaLabel, endContent: jsx(IconComponent, { icon: "solar:calendar-outline" }), className: `w-full md:w-auto md:max-w-xs ${NO_YEAR_CLASS}` }, "dmpr") }))] }));
|
|
13511
|
-
};
|
|
13512
|
-
|
|
13513
13688
|
/**
|
|
13514
13689
|
* Las cuatro props de slider que v2 tenía y v3 eliminó, traducidas a clases. Los valores son los
|
|
13515
13690
|
* LITERALES del `tv` de v2 (`npm pack @heroui/theme@2.4.15` → `dist/components/slider.js`), no
|
|
@@ -13643,7 +13818,113 @@ const RangeFilter = ({ title, description, value, onChange, minValue, maxValue,
|
|
|
13643
13818
|
const [min, max] = newValue;
|
|
13644
13819
|
setCurrentValue([min, max]);
|
|
13645
13820
|
onChange([min, max]);
|
|
13646
|
-
}, className: "w-full", isDisabled: false,
|
|
13821
|
+
}, className: "w-full", isDisabled: false, "aria-label": restSliderProps["aria-label"] ??
|
|
13822
|
+
(restSliderProps["aria-labelledby"] ? undefined : t.title), ...restSliderProps, children: jsxs(Slider.Track, { children: [jsx(Slider.Fill, { className: fillClassName }), stepMarks.length > 0 ? (jsx(Slider.Marks, { children: stepMarks.map((left) => (jsx("span", { className: SLIDER_STEP_CLASS, style: { left: `${left}%` } }, left))) })) : null, jsx(Slider.Thumb, { index: 0, "aria-label": t.minLabel, className: thumbClassName }), jsx(Slider.Thumb, { index: 1, "aria-label": t.maxLabel, className: thumbClassName })] }) }) }), jsxs("div", { className: "flex justify-between items-center text-sm", children: [jsxs("div", { className: "flex flex-col items-start", children: [jsx("span", { className: "text-xs text-default-500", children: t.minLabel }), jsx("span", { className: "font-medium text-default-700", children: formatValue(currentValue[0]) })] }), jsxs("div", { className: "flex flex-col items-end", children: [jsx("span", { className: "text-xs text-default-500", children: t.maxLabel }), jsx("span", { className: "font-medium text-default-700", children: formatValue(currentValue[1]) })] })] })] }));
|
|
13823
|
+
};
|
|
13824
|
+
|
|
13825
|
+
const NO_YEAR_CLASS = "[&_[data-type='year']]:hidden [&_[data-type='literal']:has(+[data-type='year'])]:hidden";
|
|
13826
|
+
// Year used to construct CalendarDate values. React Aria's onChange only fires when
|
|
13827
|
+
// ALL segments (including hidden year) are user-confirmed. Since users can't type year
|
|
13828
|
+
// (it's CSS-hidden), we read month+day directly from the DOM via data-placeholder
|
|
13829
|
+
// attributes when the picker loses focus, bypassing the year-confirmation requirement.
|
|
13830
|
+
const FILLER_YEAR = new Date().getFullYear();
|
|
13831
|
+
/**
|
|
13832
|
+
* Reads month and day from segment DOM elements.
|
|
13833
|
+
* Returns null if any segment is still in placeholder state (user hasn't typed it yet).
|
|
13834
|
+
* React Aria marks unconfirmed segments with data-placeholder="true".
|
|
13835
|
+
*/
|
|
13836
|
+
function readConfirmedMonthDay(container, monthSelector = '[data-type="month"]', daySelector = '[data-type="day"]') {
|
|
13837
|
+
const monthEl = container.querySelector(monthSelector);
|
|
13838
|
+
const dayEl = container.querySelector(daySelector);
|
|
13839
|
+
if (!monthEl || !dayEl)
|
|
13840
|
+
return null;
|
|
13841
|
+
if (monthEl.getAttribute("data-placeholder") === "true")
|
|
13842
|
+
return null;
|
|
13843
|
+
if (dayEl.getAttribute("data-placeholder") === "true")
|
|
13844
|
+
return null;
|
|
13845
|
+
const month = Number(monthEl.getAttribute("aria-valuenow"));
|
|
13846
|
+
const day = Number(dayEl.getAttribute("aria-valuenow"));
|
|
13847
|
+
if (month >= 1 && month <= 12 && day >= 1 && day <= 31)
|
|
13848
|
+
return { month, day };
|
|
13849
|
+
return null;
|
|
13850
|
+
}
|
|
13851
|
+
const DayMonthPicker = ({ value, onChange, translations, ariaLabelledBy, }) => {
|
|
13852
|
+
const t = {
|
|
13853
|
+
dayMonthAriaLabel: "Seleccionar mes y día",
|
|
13854
|
+
dayMonthRangeAriaLabel: "Seleccionar rango de mes y día",
|
|
13855
|
+
dayMonthSingleOption: "Día específico",
|
|
13856
|
+
dayMonthRangeOption: "Rango de fechas",
|
|
13857
|
+
...translations,
|
|
13858
|
+
};
|
|
13859
|
+
const [mode, setMode] = useState(value?.type === "dayMonthRange" ? "range" : "single");
|
|
13860
|
+
useEffect(() => {
|
|
13861
|
+
setMode(value?.type === "dayMonthRange" ? "range" : "single");
|
|
13862
|
+
}, [value?.type]);
|
|
13863
|
+
const pickerValue = value?.type === "dayMonth" ? value.dayMonth : null;
|
|
13864
|
+
const rangeValue = value?.type === "dayMonthRange" ? value.dayMonthRange : null;
|
|
13865
|
+
// Refs to DOM wrappers — used by the DOM-reading fallback for manual input.
|
|
13866
|
+
const singleRef = useRef(null);
|
|
13867
|
+
const rangeRef = useRef(null);
|
|
13868
|
+
// Stable refs so focus-change callbacks always read current values without
|
|
13869
|
+
// needing to be recreated on every render.
|
|
13870
|
+
const pickerValueRef = useRef(pickerValue);
|
|
13871
|
+
pickerValueRef.current = pickerValue;
|
|
13872
|
+
const rangeValueRef = useRef(rangeValue);
|
|
13873
|
+
rangeValueRef.current = rangeValue;
|
|
13874
|
+
const handleModeChange = (newMode) => {
|
|
13875
|
+
const nextMode = newMode === "range" ? "range" : "single";
|
|
13876
|
+
setMode(nextMode);
|
|
13877
|
+
if (nextMode === "single") {
|
|
13878
|
+
onChange({ type: "dayMonth", dayMonth: null, dayMonthRange: null });
|
|
13879
|
+
return;
|
|
13880
|
+
}
|
|
13881
|
+
onChange({ type: "dayMonthRange", dayMonth: null, dayMonthRange: null });
|
|
13882
|
+
};
|
|
13883
|
+
const handleSingleChange = (date) => {
|
|
13884
|
+
onChange({ type: "dayMonth", dayMonth: date, dayMonthRange: null });
|
|
13885
|
+
};
|
|
13886
|
+
const handleRangeChange = (range) => {
|
|
13887
|
+
onChange({ type: "dayMonthRange", dayMonth: null, dayMonthRange: range });
|
|
13888
|
+
};
|
|
13889
|
+
// Called by React Aria when the DatePicker gains/loses focus.
|
|
13890
|
+
// When value=null (placeholder mode) React Aria never fires onChange because the
|
|
13891
|
+
// hidden year segment is never user-confirmed. On blur we read the confirmed
|
|
13892
|
+
// month/day directly from the DOM as a workaround.
|
|
13893
|
+
const handleSingleFocusChange = (isFocused) => {
|
|
13894
|
+
if (isFocused || pickerValueRef.current)
|
|
13895
|
+
return;
|
|
13896
|
+
if (!singleRef.current)
|
|
13897
|
+
return;
|
|
13898
|
+
const result = readConfirmedMonthDay(singleRef.current);
|
|
13899
|
+
if (result) {
|
|
13900
|
+
handleSingleChange(new $2aaf608024c21ca1$export$99faa760c7908e4f(FILLER_YEAR, result.month, result.day));
|
|
13901
|
+
}
|
|
13902
|
+
};
|
|
13903
|
+
const handleRangeFocusChange = (isFocused) => {
|
|
13904
|
+
if (isFocused || rangeValueRef.current)
|
|
13905
|
+
return;
|
|
13906
|
+
if (!rangeRef.current)
|
|
13907
|
+
return;
|
|
13908
|
+
const monthEls = rangeRef.current.querySelectorAll('[data-type="month"]');
|
|
13909
|
+
const dayEls = rangeRef.current.querySelectorAll('[data-type="day"]');
|
|
13910
|
+
if (monthEls.length < 2 || dayEls.length < 2)
|
|
13911
|
+
return;
|
|
13912
|
+
const allConfirmed = [...monthEls, ...dayEls].every((el) => el.getAttribute("data-placeholder") !== "true");
|
|
13913
|
+
if (!allConfirmed)
|
|
13914
|
+
return;
|
|
13915
|
+
const startMonth = Number(monthEls[0].getAttribute("aria-valuenow"));
|
|
13916
|
+
const startDay = Number(dayEls[0].getAttribute("aria-valuenow"));
|
|
13917
|
+
const endMonth = Number(monthEls[1].getAttribute("aria-valuenow"));
|
|
13918
|
+
const endDay = Number(dayEls[1].getAttribute("aria-valuenow"));
|
|
13919
|
+
const valid = (m, d) => m >= 1 && m <= 12 && d >= 1 && d <= 31;
|
|
13920
|
+
if (valid(startMonth, startDay) && valid(endMonth, endDay)) {
|
|
13921
|
+
handleRangeChange({
|
|
13922
|
+
start: new $2aaf608024c21ca1$export$99faa760c7908e4f(FILLER_YEAR, startMonth, startDay),
|
|
13923
|
+
end: new $2aaf608024c21ca1$export$99faa760c7908e4f(FILLER_YEAR, endMonth, endDay),
|
|
13924
|
+
});
|
|
13925
|
+
}
|
|
13926
|
+
};
|
|
13927
|
+
return (jsxs("div", { className: "w-full flex flex-wrap xs:gap-5 justify-between items-center", children: [jsxs(RadioGroup, { orientation: "horizontal", value: mode, onChange: handleModeChange, "aria-labelledby": ariaLabelledBy, children: [jsx(Radio, { value: "single", children: jsxs(Radio.Content, { children: [jsx(Radio.Control, { children: jsx(Radio.Indicator, {}) }), t.dayMonthSingleOption] }) }), jsx(Radio, { value: "range", children: jsxs(Radio.Content, { children: [jsx(Radio.Control, { children: jsx(Radio.Indicator, {}) }), t.dayMonthRangeOption] }) })] }), mode === "single" ? (jsx("div", { ref: singleRef, children: jsx(DatePicker, { value: pickerValue, onChange: handleSingleChange, onFocusChange: handleSingleFocusChange, "aria-label": t.dayMonthAriaLabel, endContent: jsx(IconComponent, { icon: "solar:calendar-outline" }), className: `w-full md:w-auto md:max-w-40 ${NO_YEAR_CLASS}` }, "dmp") })) : (jsx("div", { ref: rangeRef, children: jsx(DateRangePicker, { value: rangeValue, onChange: handleRangeChange, onFocusChange: handleRangeFocusChange, "aria-label": t.dayMonthRangeAriaLabel, endContent: jsx(IconComponent, { icon: "solar:calendar-outline" }), className: `w-full md:w-auto md:max-w-xs ${NO_YEAR_CLASS}` }, "dmpr") }))] }));
|
|
13647
13928
|
};
|
|
13648
13929
|
|
|
13649
13930
|
/**
|
|
@@ -13682,6 +13963,13 @@ const resolveSelectPlaceholder = (translations, title) => (translations?.selectP
|
|
|
13682
13963
|
// =========================================================================
|
|
13683
13964
|
const FilterSection = ({ filter, translations, value, onChange, isExpanded = false, onToggleExpanded, }) => {
|
|
13684
13965
|
const isDisabled = filter.disabled === true;
|
|
13966
|
+
// TECH-2459 · El título visible de la sección es el NOMBRE ACCESIBLE de su control. Sin él,
|
|
13967
|
+
// react-aria (`useLabel`, vía `useSelect`/`useSlider`/`useListBox`) avisaba en dev «If you do
|
|
13968
|
+
// not provide a visible label, you must specify an aria-label or aria-labelledby» cada vez que
|
|
13969
|
+
// se desplegaba una sección (medido por beweossmbs en el drawer del catálogo con la .141), y el
|
|
13970
|
+
// lector de pantalla anunciaba solo el placeholder («Seleccionar categoría»). El control se
|
|
13971
|
+
// asocia por `aria-labelledby` a este id: sin cambio visual.
|
|
13972
|
+
const titleId = useId();
|
|
13685
13973
|
const [internalExpanded, setInternalExpanded] = useState(isDisabled ? false : isExpanded);
|
|
13686
13974
|
const handleToggleExpanded = () => {
|
|
13687
13975
|
if (isDisabled)
|
|
@@ -13778,17 +14066,17 @@ const FilterSection = ({ filter, translations, value, onChange, isExpanded = fal
|
|
|
13778
14066
|
const renderFilterContent = () => {
|
|
13779
14067
|
switch (filter.type) {
|
|
13780
14068
|
case "select":
|
|
13781
|
-
return (jsx(SelectFilter, { filter: filter, value: value, onChange: onChange, translations: translations }));
|
|
14069
|
+
return (jsx(SelectFilter, { filter: filter, value: value, onChange: onChange, translations: translations, titleId: titleId }));
|
|
13782
14070
|
case "multiselect":
|
|
13783
|
-
return (jsx(MultiSelectFilter, { filter: filter, value: value, onChange: onChange, translations: translations }));
|
|
14071
|
+
return (jsx(MultiSelectFilter, { filter: filter, value: value, onChange: onChange, translations: translations, titleId: titleId }));
|
|
13784
14072
|
case "range":
|
|
13785
|
-
return (jsx(RangeFilterComponent, { filter: filter, value: value, onChange: onChange }));
|
|
14073
|
+
return (jsx(RangeFilterComponent, { filter: filter, value: value, onChange: onChange, titleId: titleId }));
|
|
13786
14074
|
case "date":
|
|
13787
|
-
return (jsx(DateFilter, { filter: filter, value: value, onChange: onChange, translations: translations }));
|
|
14075
|
+
return (jsx(DateFilter, { filter: filter, value: value, onChange: onChange, translations: translations, titleId: titleId }));
|
|
13788
14076
|
case "text":
|
|
13789
|
-
return (jsx(TextFilter, { filter: filter, value: value, onChange: onChange }));
|
|
14077
|
+
return (jsx(TextFilter, { filter: filter, value: value, onChange: onChange, titleId: titleId }));
|
|
13790
14078
|
case "number":
|
|
13791
|
-
return (jsx(NumberFilter, { filter: filter, value: value, onChange: onChange }));
|
|
14079
|
+
return (jsx(NumberFilter, { filter: filter, value: value, onChange: onChange, titleId: titleId }));
|
|
13792
14080
|
default:
|
|
13793
14081
|
return null;
|
|
13794
14082
|
}
|
|
@@ -13798,7 +14086,7 @@ const FilterSection = ({ filter, translations, value, onChange, isExpanded = fal
|
|
|
13798
14086
|
boxShadow: "var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)",
|
|
13799
14087
|
"--tw-shadow": "var(--aurora-shadow-medium)",
|
|
13800
14088
|
"--tw-shadow-colored": "var(--aurora-shadow-medium)",
|
|
13801
|
-
}, children: [jsxs("button", { type: "button", className: cn("flex items-center justify-between w-full text-left p-4", isDisabled && "cursor-not-allowed"), onClick: handleToggleExpanded, children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx(H2, { className: "text-base font-normal text-foreground", children: filter.title }), !isDisabled && hasActiveFilter() && (jsx("span", { className: "text-xs px-2 py-1 rounded-full text-black dark:text-white", style: {
|
|
14089
|
+
}, children: [jsxs("button", { type: "button", className: cn("flex items-center justify-between w-full text-left p-4", isDisabled && "cursor-not-allowed"), onClick: handleToggleExpanded, children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx(H2, { id: titleId, className: "text-base font-normal text-foreground", children: filter.title }), !isDisabled && hasActiveFilter() && (jsx("span", { className: "text-xs px-2 py-1 rounded-full text-black dark:text-white", style: {
|
|
13802
14090
|
backgroundColor: "var(--color-default)",
|
|
13803
14091
|
}, children: getActiveFilterCount() }))] }), jsx(IconComponent, { icon: internalExpanded
|
|
13804
14092
|
? "solar:alt-arrow-down-outline"
|
|
@@ -13807,10 +14095,10 @@ const FilterSection = ({ filter, translations, value, onChange, isExpanded = fal
|
|
|
13807
14095
|
// =========================================================================
|
|
13808
14096
|
// SELECT FILTER
|
|
13809
14097
|
// =========================================================================
|
|
13810
|
-
const SelectFilter = ({ filter, value, onChange, translations }) => {
|
|
14098
|
+
const SelectFilter = ({ filter, value, onChange, translations, titleId }) => {
|
|
13811
14099
|
const currentValue = value?.value || "";
|
|
13812
14100
|
const triggerPlaceholder = resolveSelectPlaceholder(translations, filter.title);
|
|
13813
|
-
return (jsx(Select, { placeholder: triggerPlaceholder, selectedKeys: new Set(currentValue ? [currentValue] : []), onSelectionChange: (keys) => {
|
|
14101
|
+
return (jsx(Select, { "aria-labelledby": titleId, placeholder: triggerPlaceholder, selectedKeys: new Set(currentValue ? [currentValue] : []), onSelectionChange: (keys) => {
|
|
13814
14102
|
const selectedKey = Array.from(keys)[0];
|
|
13815
14103
|
onChange({ value: selectedKey || "" });
|
|
13816
14104
|
}, className: "w-full", children: filter.data.map((item) => (
|
|
@@ -13824,7 +14112,8 @@ const SelectFilter = ({ filter, value, onChange, translations }) => {
|
|
|
13824
14112
|
// =========================================================================
|
|
13825
14113
|
// MULTISELECT FILTER
|
|
13826
14114
|
// =========================================================================
|
|
13827
|
-
const MultiSelectFilter = ({ filter, value, onChange, translations }) => {
|
|
14115
|
+
const MultiSelectFilter = ({ filter, value, onChange, translations, titleId }) => {
|
|
14116
|
+
const valueId = useId();
|
|
13828
14117
|
const triggerRef = useRef(null);
|
|
13829
14118
|
const [triggerWidthPx, setTriggerWidthPx] = useState(null);
|
|
13830
14119
|
const [isOpen, setIsOpen] = useState(false);
|
|
@@ -13918,11 +14207,11 @@ const MultiSelectFilter = ({ filter, value, onChange, translations }) => {
|
|
|
13918
14207
|
maxWidth: Math.max(triggerWidthPx, 220),
|
|
13919
14208
|
}
|
|
13920
14209
|
: undefined;
|
|
13921
|
-
return (jsxs(Popover, { isOpen: isOpen, onOpenChange: handleOpenChange, children: [jsx(PopoverTrigger, { children: jsxs("button", { ref: triggerRef, type: "button", className: cn(
|
|
14210
|
+
return (jsxs(Popover, { isOpen: isOpen, onOpenChange: handleOpenChange, children: [jsx(PopoverTrigger, { "aria-labelledby": titleId, "aria-describedby": valueId, children: jsxs("button", { ref: triggerRef, type: "button", "aria-labelledby": titleId, "aria-describedby": valueId, className: cn(
|
|
13922
14211
|
// TECH-2459 · `bg-transparent` y no `bg-background`: este disparador tiene pinta de campo y vive
|
|
13923
14212
|
// DENTRO de un drawer, o sea el escenario del relleno negro sobre tarjeta gris. En oscuro
|
|
13924
14213
|
// `--color-background` es negro puro, y el `bordered` de v2 no llevaba ninguna clase `bg-*`.
|
|
13925
|
-
"flex w-full min-h-12 items-center justify-between gap-2 rounded-[12px] border border-default-200 bg-transparent px-3 py-2.5 text-left text-sm transition-colors", "hover:border-default-300 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background", isOpen && "border-primary"), "aria-expanded": isOpen, "aria-haspopup": "dialog", children: [jsx("span", { className: "line-clamp-2 min-w-0 flex-1 text-sm font-medium leading-snug text-foreground", title: triggerSelectionTitle, children: triggerSelection.visible.length > 0 ? (jsxs(Fragment$1, { children: [triggerSelection.visible.map((item, index) => (jsxs(Fragment, { children: [index > 0 ? (jsx("span", { className: "font-normal text-default-400", children: ", " })) : null, jsx("span", { children: item.label })] }, item.value))), triggerSelection.overflow > 0 ? (jsxs("span", { className: "font-normal text-default-500", children: [" ", moreLabelTemplate.replace("{more}", String(triggerSelection.overflow))] })) : null] })) : (jsx("span", { className: "font-normal text-default-400", children: triggerPlaceholder })) }), jsx(IconComponent, { icon: isOpen
|
|
14214
|
+
"flex w-full min-h-12 items-center justify-between gap-2 rounded-[12px] border border-default-200 bg-transparent px-3 py-2.5 text-left text-sm transition-colors", "hover:border-default-300 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background", isOpen && "border-primary"), "aria-expanded": isOpen, "aria-haspopup": "dialog", children: [jsx("span", { id: valueId, className: "line-clamp-2 min-w-0 flex-1 text-sm font-medium leading-snug text-foreground", title: triggerSelectionTitle, children: triggerSelection.visible.length > 0 ? (jsxs(Fragment$1, { children: [triggerSelection.visible.map((item, index) => (jsxs(Fragment, { children: [index > 0 ? (jsx("span", { className: "font-normal text-default-400", children: ", " })) : null, jsx("span", { children: item.label })] }, item.value))), triggerSelection.overflow > 0 ? (jsxs("span", { className: "font-normal text-default-500", children: [" ", moreLabelTemplate.replace("{more}", String(triggerSelection.overflow))] })) : null] })) : (jsx("span", { className: "font-normal text-default-400", children: triggerPlaceholder })) }), jsx(IconComponent, { icon: isOpen
|
|
13926
14215
|
? "solar:alt-arrow-up-outline"
|
|
13927
14216
|
: "solar:alt-arrow-down-outline", className: "shrink-0 text-default-400", size: "sm", "aria-hidden": true })] }) }), jsx(PopoverContent, { placement: "bottom start", offset: 6, className: "w-full min-w-0 max-w-none box-border border border-default-200 bg-content1 p-0 shadow-medium", style: popoverWidthStyle, children: jsxs("div", { className: "flex w-full flex-col gap-0 p-2", children: [searchable && (jsx("div", { className: "border-b border-default-100 px-1 pb-2", children: jsx(Input, { type: "search", placeholder: searchPlaceholder, value: searchQuery, onValueChange: setSearchQuery, className: "w-full", size: "sm", variant: "flat", radius: "full",
|
|
13928
14217
|
// `InputClassNames` de G1-forms ya no tiene slot `base` (v3 no
|
|
@@ -13936,7 +14225,7 @@ const MultiSelectFilter = ({ filter, value, onChange, translations }) => {
|
|
|
13936
14225
|
// =========================================================================
|
|
13937
14226
|
// RANGE FILTER
|
|
13938
14227
|
// =========================================================================
|
|
13939
|
-
const RangeFilterComponent = ({ filter, value, onChange }) => {
|
|
14228
|
+
const RangeFilterComponent = ({ filter, value, onChange, titleId }) => {
|
|
13940
14229
|
const currentValue = value || { min: filter.data.min, max: filter.data.max };
|
|
13941
14230
|
const rangeValue = [currentValue.min, currentValue.max];
|
|
13942
14231
|
const handleChange = (newValue) => {
|
|
@@ -13951,12 +14240,12 @@ const RangeFilterComponent = ({ filter, value, onChange }) => {
|
|
|
13951
14240
|
const data = Array.from({
|
|
13952
14241
|
length: Math.ceil((filter.data.max - filter.data.min) / (filter.data.step || 1)) + 1,
|
|
13953
14242
|
}, (_, i) => filter.data.min + i * (filter.data.step || 1));
|
|
13954
|
-
return (jsx(RangeFilter, { title: `Rango de ${filter.title.toLowerCase()}`, minValue: filter.data.min, maxValue: filter.data.max, step: filter.data.step || 1, data: data, value: rangeValue, onChange: handleChange, formatValue: formatter, className: "w-full", showHistogramCount: filter.data.showHistogramCount }));
|
|
14243
|
+
return (jsx(RangeFilter, { title: `Rango de ${filter.title.toLowerCase()}`, minValue: filter.data.min, maxValue: filter.data.max, step: filter.data.step || 1, data: data, value: rangeValue, onChange: handleChange, formatValue: formatter, className: "w-full", showHistogramCount: filter.data.showHistogramCount, sliderProps: { "aria-labelledby": titleId } }));
|
|
13955
14244
|
};
|
|
13956
14245
|
// =========================================================================
|
|
13957
14246
|
// DATE FILTER
|
|
13958
14247
|
// =========================================================================
|
|
13959
|
-
const DateFilter = ({ filter, value, onChange, translations }) => {
|
|
14248
|
+
const DateFilter = ({ filter, value, onChange, translations, titleId }) => {
|
|
13960
14249
|
if (filter.granularity === "dayMonth") {
|
|
13961
14250
|
const rawDayMonth = value?.type === "dayMonth" && value.dayMonth && typeof value.dayMonth !== "string"
|
|
13962
14251
|
? value.dayMonth
|
|
@@ -13975,7 +14264,7 @@ const DateFilter = ({ filter, value, onChange, translations }) => {
|
|
|
13975
14264
|
dayMonthRange: value.type === "dayMonthRange" ? rawDayMonthRange : null,
|
|
13976
14265
|
}
|
|
13977
14266
|
: null;
|
|
13978
|
-
return (jsx(DayMonthPicker, { value: dayMonthValue, onChange: (v) => onChange({ date: null, dateRange: null, ...v }), translations: translations }));
|
|
14267
|
+
return (jsx(DayMonthPicker, { value: dayMonthValue, onChange: (v) => onChange({ date: null, dateRange: null, ...v }), translations: translations, ariaLabelledBy: titleId }));
|
|
13979
14268
|
}
|
|
13980
14269
|
const handleDateSelectorChange = (dateSelectorValue) => {
|
|
13981
14270
|
onChange({
|
|
@@ -14047,23 +14336,25 @@ const DateFilter = ({ filter, value, onChange, translations }) => {
|
|
|
14047
14336
|
dateSelectorTranslations.selectDateRangeAriaLabel =
|
|
14048
14337
|
translations.selectDateRangeAriaLabel;
|
|
14049
14338
|
}
|
|
14050
|
-
return (jsx(DateSelector, { initialType: getInitialType(), initialDate: getInitialDate(), initialDateRange: getInitialDateRange(), onChange: handleDateSelectorChange, translations: dateSelectorTranslations,
|
|
14339
|
+
return (jsx(DateSelector, { initialType: getInitialType(), initialDate: getInitialDate(), initialDateRange: getInitialDateRange(), onChange: handleDateSelectorChange, translations: dateSelectorTranslations,
|
|
14340
|
+
// El grupo «Día / Rango» se nombra con el título de la sección (ver `titleId`).
|
|
14341
|
+
radioGroupProps: { "aria-labelledby": titleId }, className: "w-full" }));
|
|
14051
14342
|
};
|
|
14052
14343
|
// =========================================================================
|
|
14053
14344
|
// TEXT FILTER
|
|
14054
14345
|
// =========================================================================
|
|
14055
|
-
const TextFilter = ({ filter, value, onChange }) => {
|
|
14346
|
+
const TextFilter = ({ filter, value, onChange, titleId }) => {
|
|
14056
14347
|
const currentValue = value?.value || "";
|
|
14057
|
-
return (jsx(Input, { type: "text", placeholder: filter.data.placeholder || `Ingrese ${filter.title.toLowerCase()}`, value: currentValue, onValueChange: (newValue) => {
|
|
14348
|
+
return (jsx(Input, { "aria-labelledby": titleId, type: "text", placeholder: filter.data.placeholder || `Ingrese ${filter.title.toLowerCase()}`, value: currentValue, onValueChange: (newValue) => {
|
|
14058
14349
|
onChange({ value: newValue });
|
|
14059
14350
|
}, className: "w-full" }));
|
|
14060
14351
|
};
|
|
14061
14352
|
// =========================================================================
|
|
14062
14353
|
// NUMBER FILTER
|
|
14063
14354
|
// =========================================================================
|
|
14064
|
-
const NumberFilter = ({ filter, value, onChange }) => {
|
|
14355
|
+
const NumberFilter = ({ filter, value, onChange, titleId }) => {
|
|
14065
14356
|
const currentValue = value?.value?.toString() || "";
|
|
14066
|
-
return (jsx(Input, { type: "number", placeholder: filter.data.placeholder || `Ingrese ${filter.title.toLowerCase()}`, value: currentValue, onValueChange: (newValue) => {
|
|
14357
|
+
return (jsx(Input, { "aria-labelledby": titleId, type: "number", placeholder: filter.data.placeholder || `Ingrese ${filter.title.toLowerCase()}`, value: currentValue, onValueChange: (newValue) => {
|
|
14067
14358
|
const numValue = newValue === "" ? null : Number(newValue);
|
|
14068
14359
|
onChange({ value: numValue });
|
|
14069
14360
|
}, min: filter.data.min, max: filter.data.max, step: filter.data.step, className: "w-full" }));
|
|
@@ -16350,13 +16641,19 @@ ModalBody.displayName = "ModalBody";
|
|
|
16350
16641
|
* v3 conserva `flex-row justify-end gap-2` pero pierde el padding, y añade un
|
|
16351
16642
|
* `.modal__body + .modal__footer { mt-5 }` que v2 no tenía (v2 separaba los slots solo
|
|
16352
16643
|
* con su propio padding) — de ahí el `mt-0`.
|
|
16644
|
+
*
|
|
16645
|
+
* `items-stretch`: v2 no declaraba `items-*` (`align-items: normal`, que en flex estira), y v3
|
|
16646
|
+
* pone `items-center`. En un footer en columna (`className="flex flex-col"`, «Register payment»
|
|
16647
|
+
* de beweossmbs) eso encogía cada fila a su contenido: medido con la .141, Total 83px frente a
|
|
16648
|
+
* 464 y botones `flex-1` 108px frente a 226. En la fila por defecto no cambia nada visible
|
|
16649
|
+
* (los `Button` tienen alto propio). Un `items-*` de la app lo retira por fusión.
|
|
16353
16650
|
*/
|
|
16354
16651
|
const ModalFooter = ({ className, ...props }) => {
|
|
16355
16652
|
const { classNames } = useContext(ModalFacadeContext);
|
|
16356
16653
|
return (jsx(ModalFooter$1, { ...props,
|
|
16357
16654
|
// v2 `classNames.footer` del `<Modal>` entre la fachada y el `className` propio, que
|
|
16358
16655
|
// gana (`clsx(classNames.footer, className)` en `@heroui/modal@2.2.19`).
|
|
16359
|
-
className: cn("mt-0 px-6 py-4", classNames?.footer, className) }));
|
|
16656
|
+
className: cn("mt-0 items-stretch px-6 py-4", classNames?.footer, className) }));
|
|
16360
16657
|
};
|
|
16361
16658
|
ModalFooter.displayName = "ModalFooter";
|
|
16362
16659
|
|
|
@@ -16453,7 +16750,8 @@ const DrawerFacade = ({ isOpen, defaultOpen, onOpenChange, onClose, placement =
|
|
|
16453
16750
|
// Sin `Drawer.Root` (el `DialogTrigger` de react-aria) a propósito: la fachada no tiene
|
|
16454
16751
|
// disparador propio —lo abre el `isOpen` de la app— y un `DialogTrigger` sin hijo pulsable
|
|
16455
16752
|
// avisa en consola en CADA montaje («A PressResponder was rendered without a pressable
|
|
16456
|
-
// child», medido en jsdom
|
|
16753
|
+
// child», medido en jsdom). `Modal` hace lo mismo desde 27958d2 (ya no monta `Modal.Root`) y
|
|
16754
|
+
// `Modal.v2.test.tsx` vigila 0 avisos con modales cerrados. `Drawer.Backdrop` (`ModalOverlay`)
|
|
16457
16755
|
// ya crea y publica su propio estado de overlay con `isOpen`/`onOpenChange`, y trae todos los
|
|
16458
16756
|
// slots de `drawerVariants()`, así que el root no aportaba nada.
|
|
16459
16757
|
return (jsx(Drawer$1.Backdrop, { isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: handleOpenChange, variant: backdrop, isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, children: jsx(Drawer$1.Content, { placement: placement, children: jsx(Drawer$1.Dialog, { "aria-labelledby": headerId, className: cn(sizeClass(size, placement), "p-0", scrollBehavior === "outside" && "overflow-y-auto", className), children: ({ close }) => (jsx(DrawerDialogBody, { close: close, headerId: headerId, scrollBehavior: scrollBehavior, hideCloseButton: hideCloseButton, children: children })) }) }) }));
|
|
@@ -16544,9 +16842,11 @@ DrawerBody.displayName = "Aurora.DrawerBody";
|
|
|
16544
16842
|
* Geometría v2 del slot `footer`: `flex flex-row gap-2 px-6 py-4 justify-end`
|
|
16545
16843
|
* (`@heroui/theme@2.4.15`, slot `footer`). v3 conserva `flex-row justify-end gap-2` pero pierde
|
|
16546
16844
|
* el padding y añade `.drawer__body + .drawer__footer { mt-5 }`, que v2 no tenía — de ahí el
|
|
16547
|
-
* `mt-0` (mismo arreglo que `ModalFooter`).
|
|
16845
|
+
* `mt-0` (mismo arreglo que `ModalFooter`). Y `items-stretch` en lugar del `items-center` de
|
|
16846
|
+
* v3: v2 no declaraba `items-*`, así que un footer en columna estiraba sus filas (en «Register
|
|
16847
|
+
* payment» de beweossmbs, Total 83px frente a 464 con la .141; detalle en `ModalFooter`).
|
|
16548
16848
|
*/
|
|
16549
|
-
const DrawerFooter = ({ className, children }) => (jsx(DrawerFooter$1, { className: cn("mt-0 px-6 py-4", className), children: children }));
|
|
16849
|
+
const DrawerFooter = ({ className, children }) => (jsx(DrawerFooter$1, { className: cn("mt-0 items-stretch px-6 py-4", className), children: children }));
|
|
16550
16850
|
DrawerFooter.displayName = "Aurora.DrawerFooter";
|
|
16551
16851
|
|
|
16552
16852
|
// TECH-2459 — Fachada `Alert` (hallazgo loginos 07-sep: `index.tsx` reexportaba el `Alert` CRUDO de
|
|
@@ -18567,4 +18867,4 @@ const NavigationLoadingProvider = ({ children, }) => {
|
|
|
18567
18867
|
return (jsxs(NavigationLoadingContext.Provider, { value: value, children: [children, jsx(NavigationLoadingOverlay, { isVisible: isVisible })] }));
|
|
18568
18868
|
};
|
|
18569
18869
|
|
|
18570
|
-
export { ALL_THEMES, AURORA_THEME_FAMILIES, AURORA_THEME_REGISTRY, AccordionList, AddHolidayForm, Alert, AnalyticsCard, AreaLineChart, AuraAutocomplete, AuraTable, AuraToastProvider, AuraAutocomplete as Autocomplete, AutocompleteItem, BEWEOS_THEME_MODE_COOKIE_NAME, Badge, BreadcrumbItem, BreadcrumbsComponent, Button, CONTAINER_ATTRIBUTE, Card, CardBody, Checkbox, Chip, ColorPicker, ColorSelector, ContentCarousel, Currency, DEFAULT_DONUT_COLORS, DEFAULT_PREDEFINED_COLORS, DEFAULT_RANKED_BAR_COLORS, DISMISS_CONTROL_ATTRIBUTE, DatePicker, DateRangePicker, DateSelector, Divider, DonutChart, Drawer, DrawerBody, DrawerContent, DrawerFilters, DrawerFooter, DrawerHeader, Dropdown, DropdownSection, EmailPreview, EnumMenuNavListItem, GlobalToast, H1, H2, H3, H4, HeaderComponent, HeroUIProvider, HolidayType, IconComponent, Image$1 as Image, ImagePreview, Input, InputPassword, Kanban, KanbanCard, KanbanColumn, LINDA_TONE_PROPERTIES, LindaIcon, MenuClaw, MenuComponent, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, MultiStepWizard, NavigationLoadingContext, NavigationLoadingOverlay, NavigationLoadingProvider, P, Pagination, Phone, Progress, PromotionalBanner, REGISTERED_THEME_COLORS, RangeFilter, RankedBarList, RowSteps, DEFAULT_TRANSLATIONS$2 as SEGMENTATION_DEFAULT_TRANSLATIONS, ScheduleRow, SearchInput, SegmentationBuilder, Select, SelectItem, SelectSection, SimpleLineChart, SocialMediaBar, SocialMediaCarousel, SocialMediaPreview, StatTile, StepIndicator, Switch, Switch as SwitchComponent, THEME_COLOR_HEX_MAP, Tab, Table, Tabs, TagsFilter, Textarea, ThemeContext, ThemePicker, ThemeProvider, TimeInput, TimeInputComponent, ToastContext, Tooltip, TwoColumnLayoutAgent, UploadFile, VerticalSteps, ViolinPlot, WhatsAppPreview, Wizard, WizardNavigation, WizardSidebar, applyCustomPrimaryColor, applyLindaTones, computeBars, computeMax, computeSlices, computeTotal, containerProps, createCurrencyFormatter, uniqueCountries as defaultCountries, defaultCurrencyOptions, defaultTranslations$5 as defaultTranslations, deriveLindaTones, dismissControlProps, forceLightOnlyThemeBeforeReact, formatAuroraThemeTooltip, formatDonutPercent, generateThemeColorScale, getContrastForeground, getRegisteredThemeColorBases, getSelectedKeyFromPath, hexToHsl, hexToThemeColor, hslToCssValue, isAuroraFullThemeId, isDismissControl, isDonutEmpty, isExactThemeColor, isGroupState, isHexColor, isRankedBarListEmpty, isSegmentationGroup, parseColorToHsl, removeCustomPrimaryColor, removeLindaTones, shouldClosePopoverOnInteractOutside, sizeMap, themeColors, useAuraToast, useCloseOnAncestorScroll, useDisclosure, useMediaQuery, useNavigationLoading, useThemeContext };
|
|
18870
|
+
export { ALL_THEMES, AURORA_THEME_FAMILIES, AURORA_THEME_REGISTRY, AccordionList, AddHolidayForm, Alert, AnalyticsCard, AreaLineChart, AuraAutocomplete, AuraTable, AuraToastProvider, AuraAutocomplete as Autocomplete, AutocompleteItem, BEWEOS_THEME_MODE_COOKIE_NAME, Badge, BreadcrumbItem, BreadcrumbsComponent, Button, CONTAINER_ATTRIBUTE, Card, CardBody, Checkbox, Chip, ColorPicker, ColorSelector, ContentCarousel, Currency, DEFAULT_DONUT_COLORS, DEFAULT_PREDEFINED_COLORS, DEFAULT_RANKED_BAR_COLORS, DISMISS_CONTROL_ATTRIBUTE, DatePicker, DateRangePicker, DateSelector, Divider, DonutChart, Drawer, DrawerBody, DrawerContent, DrawerFilters, DrawerFooter, DrawerHeader, Dropdown, DropdownSection, EmailPreview, EnumMenuNavListItem, GlobalToast, H1, H2, H3, H4, HeaderComponent, HeroUIProvider, HolidayType, IconComponent, Image$1 as Image, ImagePreview, Input, InputPassword, Kanban, KanbanCard, KanbanColumn, LINDA_TONE_PROPERTIES, LindaIcon, MenuClaw, MenuComponent, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, MultiStepWizard, NavigationLoadingContext, NavigationLoadingOverlay, NavigationLoadingProvider, P, Pagination, Phone, Progress, PromotionalBanner, REGISTERED_THEME_COLORS, RangeFilter, RankedBarList, RowSteps, DEFAULT_TRANSLATIONS$2 as SEGMENTATION_DEFAULT_TRANSLATIONS, ScheduleRow, SearchInput, SegmentationBuilder, Select, SelectItem, SelectSection, SimpleLineChart, SocialMediaBar, SocialMediaCarousel, SocialMediaPreview, StatTile, StepIndicator, Switch, Switch as SwitchComponent, THEME_COLOR_HEX_MAP, Tab, Table, Tabs, TagsFilter, Textarea, ThemeContext, ThemePicker, ThemeProvider, TimeInput, TimeInputComponent, ToastContext, Tooltip, TwoColumnLayoutAgent, UploadFile, VerticalSteps, ViolinPlot, WhatsAppPreview, Wizard, WizardNavigation, WizardSidebar, applyCustomPrimaryColor, applyLindaTones, cn, computeBars, computeMax, computeSlices, computeTotal, containerProps, createCurrencyFormatter, uniqueCountries as defaultCountries, defaultCurrencyOptions, defaultTranslations$5 as defaultTranslations, deriveLindaTones, dismissControlProps, forceLightOnlyThemeBeforeReact, formatAuroraThemeTooltip, formatDonutPercent, generateThemeColorScale, getContrastForeground, getRegisteredThemeColorBases, getSelectedKeyFromPath, hexToHsl, hexToThemeColor, hslToCssValue, isAuroraFullThemeId, isDismissControl, isDonutEmpty, isExactThemeColor, isGroupState, isHexColor, isRankedBarListEmpty, isSegmentationGroup, parseColorToHsl, removeCustomPrimaryColor, removeLindaTones, shouldClosePopoverOnInteractOutside, sizeMap, themeColors, useAuraToast, useCloseOnAncestorScroll, useDisclosure, useMediaQuery, useNavigationLoading, useThemeContext };
|