@beweco/aurora-ui 1.0.0-beta.142 → 1.0.0-beta.147
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 +1 -1
- package/dist/assets/css/theme.css +18 -0
- package/dist/index.cjs.js +314 -232
- package/dist/index.esm.js +198 -113
- 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/copy-text/CopyText.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/Drawer.types.d.ts +11 -0
- package/dist/types/components/drawer/Drawer.types.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.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/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/Modal.types.d.ts +11 -0
- package/dist/types/components/modal/Modal.types.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.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/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/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.cjs.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var react = require('@heroui/react');
|
|
4
|
+
var tailwindVariants = require('tailwind-variants');
|
|
4
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
6
|
var $8WNJc$react = require('react');
|
|
6
7
|
var react$1 = require('@iconify/react');
|
|
@@ -8,6 +9,74 @@ var recharts = require('recharts');
|
|
|
8
9
|
var $3wX5A$reactdom = require('react-dom');
|
|
9
10
|
var framerMotion = require('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) => tailwindVariants.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
|
|
@@ -94,7 +163,7 @@ function flattenChildren(children) {
|
|
|
94
163
|
*/
|
|
95
164
|
function ProgressFacade({ label, showValueLabel = false, size = "md", color = "primary", classNames, className, children, ...props }) {
|
|
96
165
|
if (typeof children === "function") {
|
|
97
|
-
return (jsxRuntime.jsx(react.ProgressBar, { ...props, size: size, color: PROGRESS_V3_COLOR[color], className:
|
|
166
|
+
return (jsxRuntime.jsx(react.ProgressBar, { ...props, size: size, color: PROGRESS_V3_COLOR[color], className: cn(PROGRESS_FILL_OVERRIDE[color], classNames?.base, className), children: children }));
|
|
98
167
|
}
|
|
99
168
|
const own = flattenChildren(children);
|
|
100
169
|
const hasTrack = own.some((c) => c.type === react.ProgressBar.Track || c.type === react.ProgressBar.Fill);
|
|
@@ -103,7 +172,7 @@ function ProgressFacade({ label, showValueLabel = false, size = "md", color = "p
|
|
|
103
172
|
return (jsxRuntime.jsxs(react.ProgressBar, { ...props, size: size, color: PROGRESS_V3_COLOR[color],
|
|
104
173
|
// v2: `cn(classNames?.base, className)` en la raíz (`use-progress.mjs`). La variable del
|
|
105
174
|
// color va primero para que un `[--progress-bar-fill:…]` del consumidor la sustituya.
|
|
106
|
-
className:
|
|
175
|
+
className: cn(PROGRESS_FILL_OVERRIDE[color], classNames?.base, className), children: [label != null && label !== false && !hasLabel && (jsxRuntime.jsx(react.Label, { className: classNames?.label, children: label })), showValueLabel && !hasOutput && (jsxRuntime.jsx(react.ProgressBar.Output, { className: classNames?.value })), children, !hasTrack && (jsxRuntime.jsx(react.ProgressBar.Track, { className: classNames?.track, children: jsxRuntime.jsx(react.ProgressBar.Fill, { className: classNames?.indicator }) }))] }));
|
|
107
176
|
}
|
|
108
177
|
/**
|
|
109
178
|
* `Progress` de v2 con la anatomía de v3 dentro, y con los estáticos del compound colgados
|
|
@@ -171,7 +240,7 @@ const IMAGE_RADIUS_CLASS = {
|
|
|
171
240
|
function Image$1({ radius = "lg", classNames, removeWrapper: _removeWrapper, className, ...props }) {
|
|
172
241
|
return (
|
|
173
242
|
// biome-ignore lint/a11y/useAltText: passthrough genérico, `alt` lo exige ComponentProps<'img'>
|
|
174
|
-
jsxRuntime.jsx("img", { ...props, className:
|
|
243
|
+
jsxRuntime.jsx("img", { ...props, className: cn(IMAGE_RADIUS_CLASS[radius], className, classNames?.img) }));
|
|
175
244
|
}
|
|
176
245
|
// ---------------------------------------------------------------------------
|
|
177
246
|
// Hooks
|
|
@@ -697,7 +766,7 @@ const Button = ({ color = "primary", size = "md", variant = "solid", radius = "s
|
|
|
697
766
|
};
|
|
698
767
|
return (jsxRuntime.jsx("a", { ...propsDeEnlace(rest), "data-slot": "button", "data-disabled": deshabilitado || undefined, "aria-disabled": deshabilitado || undefined,
|
|
699
768
|
// Deshabilitado, sin `href`: un `<a>` no tiene `disabled` y seguiría navegando.
|
|
700
|
-
href: deshabilitado ? undefined : href, target: target, rel: rel, download: download, hrefLang: hrefLang, referrerPolicy: referrerPolicy, className:
|
|
769
|
+
href: deshabilitado ? undefined : href, target: target, rel: rel, download: download, hrefLang: hrefLang, referrerPolicy: referrerPolicy, className: cn(react.buttonVariants({
|
|
701
770
|
variant: v3Variant,
|
|
702
771
|
size,
|
|
703
772
|
isIconOnly,
|
|
@@ -1124,7 +1193,7 @@ const Chip = ({ color = "default", variant = "solid", size = "md", radius = "ful
|
|
|
1124
1193
|
const customClass = isStandard || isDot ? "" : CUSTOM_COLOR_CLASSES[color];
|
|
1125
1194
|
const hasBorder = shape === "outline" || shape === "faded";
|
|
1126
1195
|
const outlineClass = hasBorder
|
|
1127
|
-
?
|
|
1196
|
+
? cn("border-2", isStandard
|
|
1128
1197
|
? OUTLINE_BORDER_CLASS[shape === "faded" ? "default" : color]
|
|
1129
1198
|
: "")
|
|
1130
1199
|
: "";
|
|
@@ -1158,10 +1227,10 @@ const Chip = ({ color = "default", variant = "solid", size = "md", radius = "ful
|
|
|
1158
1227
|
// Con una cadena suelta ambas clases llegan al DOM y gana la que Tailwind emita más
|
|
1159
1228
|
// tarde, no la del consumidor. Todas las clases de aquí son vocabulario v3 válido, así
|
|
1160
1229
|
// que tailwind-merge las resuelve bien (la trampa de F1 era con clases v2 muertas).
|
|
1161
|
-
className:
|
|
1230
|
+
className: cn(SIZE_CLASS$6[size],
|
|
1162
1231
|
// Después de `SIZE_CLASS` a propósito: el cuadrado de un carácter ENCOGE la caja
|
|
1163
1232
|
// respecto al tamaño normal y tiene que ganar en tailwind-merge.
|
|
1164
|
-
isSquare ? ONE_CHAR_CLASS[size] : "", RADIUS_CLASS$9[radius], outlineClass, isDot ? DOT_BASE_CLASS : "", shadowClass, flatDarkFgClass, customClass, isDisabled ? "opacity-50 pointer-events-none" : "", classNames?.base, className), style: style, children: [startContent, isDot && !startContent && (jsxRuntime.jsx("span", { "aria-hidden": "true", "data-slot": "dot", className:
|
|
1233
|
+
isSquare ? ONE_CHAR_CLASS[size] : "", RADIUS_CLASS$9[radius], outlineClass, isDot ? DOT_BASE_CLASS : "", shadowClass, flatDarkFgClass, customClass, isDisabled ? "opacity-50 pointer-events-none" : "", classNames?.base, className), style: style, children: [startContent, isDot && !startContent && (jsxRuntime.jsx("span", { "aria-hidden": "true", "data-slot": "dot", className: cn(DOT_SLOT_CLASS, DOT_COLOR_CLASS[color]) })), jsxRuntime.jsx("span", { className: cn("flex-1 text-inherit font-normal", startContent
|
|
1165
1234
|
? CONTENT_PADDING[size].leftWithContent
|
|
1166
1235
|
: CONTENT_PADDING[size].left, hasEndContent
|
|
1167
1236
|
? CONTENT_PADDING[size].rightWithContent
|
|
@@ -1174,7 +1243,7 @@ const Chip = ({ color = "default", variant = "solid", size = "md", radius = "ful
|
|
|
1174
1243
|
// `.close-button` de v3 impone caja de 24px, `bg-default` y `text-muted`; v2 no
|
|
1175
1244
|
// pintaba fondo ni caja: el glifo ERA el botón. Se anulan con utilidades (capa
|
|
1176
1245
|
// `utilities` gana a `components`, incluido el `& svg { size-4 -mx-0.5 my-0.5 }`).
|
|
1177
|
-
className:
|
|
1246
|
+
className: cn("h-auto w-auto min-h-0 rounded-full bg-transparent p-0 text-current opacity-70 transition-opacity hover:bg-transparent hover:opacity-100", classNames?.closeButton), onPress: onClose, isDisabled: isDisabled, children: jsxRuntime.jsx("svg", { "aria-hidden": "true", focusable: "false", role: "presentation", viewBox: "0 0 24 24", className: `m-0 shrink-0 ${CLOSE_ICON_SIZE_CLASS[size]}`, children: jsxRuntime.jsx("path", { d: CLOSE_FILLED_PATH, fill: "currentColor" }) }) }))] }));
|
|
1178
1247
|
};
|
|
1179
1248
|
|
|
1180
1249
|
const sizeMap = {
|
|
@@ -1511,19 +1580,19 @@ const Pagination = ({ total, page, initialPage = 1, onChange, size: _size = "sm"
|
|
|
1511
1580
|
isFirst: !showControls && index === 0,
|
|
1512
1581
|
isLast: !showControls && index === lastItemIndex,
|
|
1513
1582
|
});
|
|
1514
|
-
const activeClass =
|
|
1583
|
+
const activeClass = cn(ACTIVE_COLOR_CLASS[color], showShadow ? ACTIVE_SHADOW_CLASS[color] : "", ACTIVE_LINK_CLASS);
|
|
1515
1584
|
return (
|
|
1516
1585
|
// `w-fit` reproduce el `max-w-fit` del wrapper de v2: `.pagination` de v3 es `w-full` +
|
|
1517
1586
|
// `justify-between`, así que dentro de un `flex justify-center` (como el de AccordionList) la
|
|
1518
1587
|
// tira se quedaba pegada a la izquierda en vez de centrarse.
|
|
1519
|
-
jsxRuntime.jsx(react.Pagination, { className:
|
|
1588
|
+
jsxRuntime.jsx(react.Pagination, { className: cn("w-fit", className), children: jsxRuntime.jsxs(react.Pagination.Content, { className: isCompact ? STRIP_CLASS : STRIP_LOOSE_CLASS, children: [showControls && (jsxRuntime.jsx(react.Pagination.Item, { children: jsxRuntime.jsx(react.Pagination.Previous
|
|
1520
1589
|
// v3 mete el galón en un `<span aria-hidden="true">`
|
|
1521
1590
|
// (`pagination.js:165`), así que sin esto el botón se queda SIN nombre
|
|
1522
1591
|
// accesible: un lector de pantalla lo anuncia como "botón" a secas. v2 sí
|
|
1523
1592
|
// lo nombraba ("previous page button", `use-pagination.js:213`), pero en
|
|
1524
1593
|
// inglés y hardcodeado; aquí va por `translations` (regla obligatoria de
|
|
1525
1594
|
// i18n del repo, skill `auraui-i18n`).
|
|
1526
|
-
, { "aria-label": t.previousPageAriaLabel, className:
|
|
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: jsxRuntime.jsx(react.Pagination.PreviousIcon, {}) }) })), items.map((item, index) => {
|
|
1527
1596
|
if (item === "ellipsis") {
|
|
1528
1597
|
const isBefore = index < activeIndex;
|
|
1529
1598
|
const label = isBefore
|
|
@@ -1531,14 +1600,14 @@ const Pagination = ({ total, page, initialPage = 1, onChange, size: _size = "sm"
|
|
|
1531
1600
|
: t.jumpForwardAriaLabel;
|
|
1532
1601
|
return (
|
|
1533
1602
|
// biome-ignore lint/suspicious/noArrayIndexKey: solo hay como máximo 2 elipsis, posición estable
|
|
1534
|
-
jsxRuntime.jsx(react.Pagination.Item, { children: jsxRuntime.jsxs(react.Pagination.Link, { "aria-label": label.replace("{count}", String(DOTS_JUMP)), className:
|
|
1603
|
+
jsxRuntime.jsx(react.Pagination.Item, { children: jsxRuntime.jsxs(react.Pagination.Link, { "aria-label": label.replace("{count}", String(DOTS_JUMP)), className: cn("group", CELL_CLASS, cellRadius(isCompact, itemPosition(index))), isDisabled: isDisabled, onPress: () => goTo(isBefore
|
|
1535
1604
|
? currentPage - DOTS_JUMP
|
|
1536
1605
|
: currentPage + DOTS_JUMP), children: [jsxRuntime.jsx(EllipsisDotsIcon, {}), jsxRuntime.jsx(JumpIcon, { isBefore: isBefore })] }) }, `ellipsis-${index}`));
|
|
1537
1606
|
}
|
|
1538
|
-
return (jsxRuntime.jsx(react.Pagination.Item, { children: jsxRuntime.jsx(react.Pagination.Link, { className:
|
|
1607
|
+
return (jsxRuntime.jsx(react.Pagination.Item, { children: jsxRuntime.jsx(react.Pagination.Link, { className: cn(CELL_CLASS, cellRadius(isCompact, itemPosition(index)), item === currentPage ? activeClass : ""), isActive: item === currentPage, isDisabled: isDisabled, onPress: () => goTo(item), children: item }) }, item));
|
|
1539
1608
|
}), showControls && (jsxRuntime.jsx(react.Pagination.Item, { children: jsxRuntime.jsx(react.Pagination.Next
|
|
1540
1609
|
/* Mismo motivo que en `Previous`: el galón es `aria-hidden`. */
|
|
1541
|
-
, { "aria-label": t.nextPageAriaLabel, className:
|
|
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: jsxRuntime.jsx(react.Pagination.NextIcon, {}) }) }))] }) }));
|
|
1542
1611
|
};
|
|
1543
1612
|
|
|
1544
1613
|
// TECH-2459 · F5 · P-01 — Valores tomados del tema v2 REAL (`@heroui/theme@2.4.15`,
|
|
@@ -1719,7 +1788,7 @@ exports.HolidayType = void 0;
|
|
|
1719
1788
|
*/
|
|
1720
1789
|
function withConsumerClass(own, consumer) {
|
|
1721
1790
|
const base = own.filter(Boolean).join(" ");
|
|
1722
|
-
return consumer ?
|
|
1791
|
+
return consumer ? cn(base, consumer) : base;
|
|
1723
1792
|
}
|
|
1724
1793
|
/**
|
|
1725
1794
|
* `calendarWidth` de v2 → estilo en línea del `Calendar`. v3 fija `.calendar { w-63 max-w-63 }`
|
|
@@ -2414,7 +2483,7 @@ fullWidth = true, value, defaultValue, onChange, onValueChange, className, class
|
|
|
2414
2483
|
return (jsxRuntime.jsxs(react.TextField, { id: inputId, "aria-label": accessibleLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, value: currentValue,
|
|
2415
2484
|
// Solo el modo no controlado escribe aquí; en controlado manda el `value` del padre
|
|
2416
2485
|
// (que se entera por `onChange`/`onValueChange` del `<input>`).
|
|
2417
|
-
onChange: isControlled ? undefined : setUncontrolledValue, name: name, isInvalid: isInvalid, isRequired: isRequired, isDisabled: isDisabled, isReadOnly: isReadOnly, className:
|
|
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" : "",
|
|
2418
2487
|
// `mainWrapper` de v2 no tiene nodo propio aquí (ver tabla en `Input.types.ts`):
|
|
2419
2488
|
// se fusiona en la raíz antes que `base`, que es el slot más externo.
|
|
2420
2489
|
classNames?.mainWrapper,
|
|
@@ -2422,13 +2491,13 @@ fullWidth = true, value, defaultValue, onChange, onValueChange, className, class
|
|
|
2422
2491
|
classNames?.base,
|
|
2423
2492
|
// El `className` del consumidor, en la raíz y en último lugar: el slot `base` de
|
|
2424
2493
|
// v2 y la posición que le deja ganar en tailwind-merge (ver bloque de arriba).
|
|
2425
|
-
className), children: [label && (jsxRuntime.jsx(react.Label, { className:
|
|
2494
|
+
className), children: [label && (jsxRuntime.jsx(react.Label, { className: cn(LABEL_CLASS$4, LABEL_LEFT_CLASS[variant], variant === "underlined" ? "top-0" : LABEL_OFFSET_CLASS$1[size], isInvalid ? INVALID_LABEL_CLASS$2 : "", labelFlotante ? LABEL_INSIDE_CLASS[size] : "", labelFlotante ? LABEL_FLOAT_CLASS : "", classNames?.label), children: label })), jsxRuntime.jsxs(react.InputGroup, { isInvalid: isInvalid, isDisabled: isDisabled, isReadOnly: isReadOnly, className: cn(SIZE_CLASS$3[size], radius === "full" ? PADDING_FULL_CLASS$1[size] : PADDING_CLASS$2[size], variant === "underlined" ? UNDERLINED_INNER_CLASS$1[size] : "", RADIUS_CLASS$6[radius], VARIANT_CLASS$3[variant], FIELD_FOCUS_CLASS$3, FIELD_SHADOW_CLASS$2,
|
|
2426
2495
|
// Incondicional, como el `inputWrapper` de v2: la caja del campo llena
|
|
2427
2496
|
// siempre su raíz, y es la raíz la que responde a `fullWidth` y al ancho que
|
|
2428
2497
|
// pase el consumidor.
|
|
2429
2498
|
"w-full",
|
|
2430
2499
|
// v3 fusiona `innerWrapper` e `inputWrapper` de v2 en este único elemento.
|
|
2431
|
-
classNames?.innerWrapper, classNames?.inputWrapper), children: [startContent && (jsxRuntime.jsx(react.InputGroup.Prefix, { className: "border-none bg-transparent px-0", children: startContent })), jsxRuntime.jsx(react.InputGroup.Input, { ...rest, ref: setInputRef, onKeyDown: handleKeyDown, required: required, type: type, placeholder: labelFlotante ? " " : placeholder, onChange: handleChange, className:
|
|
2500
|
+
classNames?.innerWrapper, classNames?.inputWrapper), children: [startContent && (jsxRuntime.jsx(react.InputGroup.Prefix, { className: "border-none bg-transparent px-0", children: startContent })), jsxRuntime.jsx(react.InputGroup.Input, { ...rest, ref: setInputRef, onKeyDown: handleKeyDown, required: required, type: type, placeholder: labelFlotante ? " " : placeholder, onChange: handleChange, className: cn(
|
|
2432
2501
|
// `w-full min-w-0` (TECH-2459, beweossmbs QA 24-sep): `.input-group__input`
|
|
2433
2502
|
// de v3 es `flex-1` sin ancho, así que el `<input>` aportaba su ancho
|
|
2434
2503
|
// intrínseco (~151px) como min-content y el campo no encogía en una fila
|
|
@@ -2436,7 +2505,7 @@ fullWidth = true, value, defaultValue, onChange, onValueChange, className, class
|
|
|
2436
2505
|
// fuera de su fila; en v2, 132px). v2 ponía `w-full` en este slot
|
|
2437
2506
|
// (`@heroui/theme@2.4.15`, `dist/components/input.js:111`), y un ancho
|
|
2438
2507
|
// en porcentaje no cuenta para el min-content de un `<input>`.
|
|
2439
|
-
"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 && (jsxRuntime.jsx(react.CloseButton, { "aria-label": "Limpiar", className:
|
|
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 && (jsxRuntime.jsx(react.CloseButton, { "aria-label": "Limpiar", className: cn("h-4 w-4 min-h-0 p-0.5 mr-1", classNames?.clearButton), onPress: handleClear })), endContent && (jsxRuntime.jsx(react.InputGroup.Suffix, { className: "border-none bg-transparent px-0", children: endContent }))] }), description && !isInvalid && (jsxRuntime.jsx(react.Description, { className: cn(HELPER_CLASS$2, "text-left", classNames?.helperWrapper, classNames?.description), children: description })), isInvalid && errorMessage && (jsxRuntime.jsx(react.FieldError, { className: cn(HELPER_CLASS$2, "text-left", classNames?.helperWrapper, classNames?.errorMessage), children: errorMessage }))] }));
|
|
2440
2509
|
});
|
|
2441
2510
|
Input.displayName = "Input";
|
|
2442
2511
|
|
|
@@ -2703,7 +2772,7 @@ const Card = $8WNJc$react.forwardRef(({ children, className, shadow = "sm", radi
|
|
|
2703
2772
|
event.preventDefault();
|
|
2704
2773
|
press(pressEventFromKey(event));
|
|
2705
2774
|
}, [onKeyUp, pulsable, press]);
|
|
2706
|
-
const combinedClassName =
|
|
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 : "",
|
|
2707
2776
|
// El `className` de la app, último: gana por fusión (ver JSDoc).
|
|
2708
2777
|
className);
|
|
2709
2778
|
// v2 cambiaba el ELEMENTO a `<button>` con `isPressable`, y hasta la .140 esta fachada lo
|
|
@@ -2728,11 +2797,11 @@ const Card = $8WNJc$react.forwardRef(({ children, className, shadow = "sm", radi
|
|
|
2728
2797
|
Card.displayName = "Card";
|
|
2729
2798
|
|
|
2730
2799
|
const H2 = ({ children, className, ...props }) => {
|
|
2731
|
-
return (jsxRuntime.jsx("h2", { className:
|
|
2800
|
+
return (jsxRuntime.jsx("h2", { className: cn("text-lg font-semibold", className), ...props, children: children }));
|
|
2732
2801
|
};
|
|
2733
2802
|
|
|
2734
2803
|
const P = ({ children, className, ...props }) => {
|
|
2735
|
-
return (jsxRuntime.jsx("p", { className:
|
|
2804
|
+
return (jsxRuntime.jsx("p", { className: cn("text-xs text-default-500 font-normal", className), ...props, children: children }));
|
|
2736
2805
|
};
|
|
2737
2806
|
|
|
2738
2807
|
const defaultTranslations$f = {
|
|
@@ -2816,9 +2885,9 @@ const AnalyticsCard = ({ data, showTimePeriods = true, showDropdownMenu = true,
|
|
|
2816
2885
|
// Card.types.ts) — se pierde el `as="dl"` semántico de v2. No había `<dt>`/`<dd>` reales dentro
|
|
2817
2886
|
// (siempre fue un `<dl>` "vacío" de esa semántica), así que el cambio a `<div>` no pierde
|
|
2818
2887
|
// estructura real.
|
|
2819
|
-
return (jsxRuntime.jsx(Card, { className: "dark:border-default-100 border border-transparent", ...props, children: jsxRuntime.jsxs("section", { className: "flex flex-col flex-nowrap", children: [jsxRuntime.jsx("div", { className: "flex flex-col justify-between gap-y-2", children: jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-2", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-0", children: [jsxRuntime.jsx(H2, { children: t.title }), jsxRuntime.jsx(P, { children: t.description })] }), jsxRuntime.jsx("div", { className: "h-2", "aria-hidden": "true" }), showTimePeriods && (jsxRuntime.jsx(react.Tabs, { className: "self-end", onSelectionChange: (key) => handleTimePeriodChange(String(key)), children: jsxRuntime.jsx(react.Tabs.ListContainer, { className: "bg-default-100", children: jsxRuntime.jsxs(react.Tabs.List, { "aria-label": t.title, children: [jsxRuntime.jsxs(react.Tabs.Tab, { id: "6-months", className: "whitespace-nowrap", children: [t.months6, jsxRuntime.jsx(react.Tabs.Indicator, {})] }), jsxRuntime.jsxs(react.Tabs.Tab, { id: "3-months", className: "whitespace-nowrap", children: [t.months3, jsxRuntime.jsx(react.Tabs.Indicator, {})] }), jsxRuntime.jsxs(react.Tabs.Tab, { id: "30-days", className: "whitespace-nowrap", children: [t.days30, jsxRuntime.jsx(react.Tabs.Indicator, {})] }), jsxRuntime.jsxs(react.Tabs.Tab, { id: "7-days", className: "whitespace-nowrap", children: [t.days7, jsxRuntime.jsx(react.Tabs.Indicator, {})] }), jsxRuntime.jsxs(react.Tabs.Tab, { id: "24-hours", className: "whitespace-nowrap", children: [t.hours24, jsxRuntime.jsx(react.Tabs.Indicator, {})] })] }) }) })), showMetricCards && (jsxRuntime.jsx("div", { className: "mt-2 flex w-full items-center", children: jsxRuntime.jsx("div", { className: "-my-3 flex w-full max-w-[800px] items-center gap-x-3 overflow-x-auto py-3", children: data.map(({ key, change, changeType, type, value, title }) => (jsxRuntime.jsxs("button", { type: "button", className:
|
|
2888
|
+
return (jsxRuntime.jsx(Card, { className: "dark:border-default-100 border border-transparent", ...props, children: jsxRuntime.jsxs("section", { className: "flex flex-col flex-nowrap", children: [jsxRuntime.jsx("div", { className: "flex flex-col justify-between gap-y-2", children: jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-2", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-0", children: [jsxRuntime.jsx(H2, { children: t.title }), jsxRuntime.jsx(P, { children: t.description })] }), jsxRuntime.jsx("div", { className: "h-2", "aria-hidden": "true" }), showTimePeriods && (jsxRuntime.jsx(react.Tabs, { className: "self-end", onSelectionChange: (key) => handleTimePeriodChange(String(key)), children: jsxRuntime.jsx(react.Tabs.ListContainer, { className: "bg-default-100", children: jsxRuntime.jsxs(react.Tabs.List, { "aria-label": t.title, children: [jsxRuntime.jsxs(react.Tabs.Tab, { id: "6-months", className: "whitespace-nowrap", children: [t.months6, jsxRuntime.jsx(react.Tabs.Indicator, {})] }), jsxRuntime.jsxs(react.Tabs.Tab, { id: "3-months", className: "whitespace-nowrap", children: [t.months3, jsxRuntime.jsx(react.Tabs.Indicator, {})] }), jsxRuntime.jsxs(react.Tabs.Tab, { id: "30-days", className: "whitespace-nowrap", children: [t.days30, jsxRuntime.jsx(react.Tabs.Indicator, {})] }), jsxRuntime.jsxs(react.Tabs.Tab, { id: "7-days", className: "whitespace-nowrap", children: [t.days7, jsxRuntime.jsx(react.Tabs.Indicator, {})] }), jsxRuntime.jsxs(react.Tabs.Tab, { id: "24-hours", className: "whitespace-nowrap", children: [t.hours24, jsxRuntime.jsx(react.Tabs.Indicator, {})] })] }) }) })), showMetricCards && (jsxRuntime.jsx("div", { className: "mt-2 flex w-full items-center", children: jsxRuntime.jsx("div", { className: "-my-3 flex w-full max-w-[800px] items-center gap-x-3 overflow-x-auto py-3", children: data.map(({ key, change, changeType, type, value, title }) => (jsxRuntime.jsxs("button", { type: "button", className: cn("rounded-[12px] flex w-full flex-col gap-2 p-3 transition-colors", {
|
|
2820
2889
|
"bg-default-100": activeChart === key,
|
|
2821
|
-
}), onClick: () => handleChartChange(key), children: [jsxRuntime.jsx("span", { className:
|
|
2890
|
+
}), onClick: () => handleChartChange(key), children: [jsxRuntime.jsx("span", { className: cn("text-sm text-default-500 font-medium transition-colors", {
|
|
2822
2891
|
"text-primary": activeChart === key,
|
|
2823
2892
|
}), children: title }), jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [jsxRuntime.jsx("span", { className: "text-foreground text-2xl font-bold", children: formatValue(value, type) }), jsxRuntime.jsx(Chip, { color: changeType === "positive"
|
|
2824
2893
|
? "success"
|
|
@@ -2859,7 +2928,7 @@ const AnalyticsCard = ({ data, showTimePeriods = true, showDropdownMenu = true,
|
|
|
2859
2928
|
};
|
|
2860
2929
|
|
|
2861
2930
|
const H3 = ({ children, className, ...props }) => {
|
|
2862
|
-
return (jsxRuntime.jsx("h3", { className:
|
|
2931
|
+
return (jsxRuntime.jsx("h3", { className: cn("text-base font-medium", className), ...props, children: children }));
|
|
2863
2932
|
};
|
|
2864
2933
|
|
|
2865
2934
|
function ChartTooltip({ active, payload, label, series, formatValue, }) {
|
|
@@ -3054,18 +3123,18 @@ function translateItem(element) {
|
|
|
3054
3123
|
classNames?.description);
|
|
3055
3124
|
if (onlyBase || typeof children === "function") {
|
|
3056
3125
|
return $8WNJc$react.cloneElement(element, {
|
|
3057
|
-
className:
|
|
3126
|
+
className: cn(classNames?.base, className) || undefined,
|
|
3058
3127
|
description: undefined,
|
|
3059
3128
|
startContent: undefined,
|
|
3060
3129
|
endContent: undefined,
|
|
3061
3130
|
classNames: undefined,
|
|
3062
3131
|
});
|
|
3063
3132
|
}
|
|
3064
|
-
const title = (jsxRuntime.jsx("span", { className:
|
|
3065
|
-
const next = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasStart && (jsxRuntime.jsx("span", { "data-slot": "start-content", [ITEM_EXTRA_ATTR]: "", className: ITEM_SIDE_CLASS, children: startContent })), hasDescription ? (jsxRuntime.jsxs("div", { className:
|
|
3133
|
+
const title = (jsxRuntime.jsx("span", { className: cn(ITEM_TITLE_CLASS$1, classNames?.title), children: children }));
|
|
3134
|
+
const next = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasStart && (jsxRuntime.jsx("span", { "data-slot": "start-content", [ITEM_EXTRA_ATTR]: "", className: ITEM_SIDE_CLASS, children: startContent })), hasDescription ? (jsxRuntime.jsxs("div", { className: cn(ITEM_WRAPPER_CLASS, classNames?.wrapper), children: [title, jsxRuntime.jsx(react.Description, { className: cn(ITEM_DESCRIPTION_CLASS, classNames?.description), children: description })] })) : (title), hasEnd && (jsxRuntime.jsx("span", { "data-slot": "end-content", [ITEM_EXTRA_ATTR]: "", className: ITEM_SIDE_CLASS, children: endContent }))] }));
|
|
3066
3135
|
return $8WNJc$react.cloneElement(element, {
|
|
3067
3136
|
// v2: `cn(classNames?.base, className)` (`use-listbox-item.mjs`), así que `className` gana.
|
|
3068
|
-
className:
|
|
3137
|
+
className: cn(classNames?.base, className) || undefined,
|
|
3069
3138
|
description: undefined,
|
|
3070
3139
|
startContent: undefined,
|
|
3071
3140
|
endContent: undefined,
|
|
@@ -3086,14 +3155,14 @@ function translateSection(element) {
|
|
|
3086
3155
|
// items de la sección se quedarían sin checkmark.
|
|
3087
3156
|
const parts = [];
|
|
3088
3157
|
if (hasTitle) {
|
|
3089
|
-
parts.push(jsxRuntime.jsx(react.Header, { className:
|
|
3158
|
+
parts.push(jsxRuntime.jsx(react.Header, { className: cn(SECTION_HEADING_CLASS$1, classNames?.heading), children: title }, "aura-section-header"));
|
|
3090
3159
|
}
|
|
3091
3160
|
parts.push(...(Array.isArray(inner) ? inner : [inner]));
|
|
3092
3161
|
if (showDivider) {
|
|
3093
|
-
parts.push(jsxRuntime.jsx(react.Separator, { className:
|
|
3162
|
+
parts.push(jsxRuntime.jsx(react.Separator, { className: cn(SECTION_DIVIDER_CLASS, classNames?.divider) }, "aura-section-divider"));
|
|
3094
3163
|
}
|
|
3095
3164
|
return $8WNJc$react.cloneElement(element, {
|
|
3096
|
-
className:
|
|
3165
|
+
className: cn(classNames?.base, className) || undefined,
|
|
3097
3166
|
// `title` en v3 es el atributo global de HTML: sin retirarlo sale como *tooltip*
|
|
3098
3167
|
// nativo sobre toda la sección (el mismo motivo por el que v2 lo quitaba del spread,
|
|
3099
3168
|
// `chunk-Q2EVG7SO.mjs`: «removed title from props to avoid browsers showing a tooltip»).
|
|
@@ -3617,7 +3686,7 @@ labelPlacement: _labelPlacement, scrollShadowProps, ...props }) => {
|
|
|
3617
3686
|
// de la app va al final y gana por `cn`, y `overflow-y-auto` para que un
|
|
3618
3687
|
// `max-h-*` recorte desplazando y no desbordando.
|
|
3619
3688
|
className: scrollShadowProps?.className
|
|
3620
|
-
?
|
|
3689
|
+
? cn(OPCIONES_CLASS, "overflow-y-auto", scrollShadowProps.className)
|
|
3621
3690
|
: OPCIONES_CLASS, style: scrollShadowProps?.style, renderEmptyState: hideEmptyContent
|
|
3622
3691
|
? undefined
|
|
3623
3692
|
: () => jsxRuntime.jsx("div", { className: EMPTY_CONTENT_CLASS$1, children: emptyContent }), children: withV2ItemContent(
|
|
@@ -6159,11 +6228,11 @@ const DonutChart = ({ data, height = 220, innerRadiusRatio = 0.65, showLegend =
|
|
|
6159
6228
|
};
|
|
6160
6229
|
|
|
6161
6230
|
const H1 = ({ children, className, ...props }) => {
|
|
6162
|
-
return (jsxRuntime.jsx("h1", { className:
|
|
6231
|
+
return (jsxRuntime.jsx("h1", { className: cn("text-xl font-bold", className), ...props, children: children }));
|
|
6163
6232
|
};
|
|
6164
6233
|
|
|
6165
6234
|
const H4 = ({ children, className, ...props }) => {
|
|
6166
|
-
return (jsxRuntime.jsx("h4", { className:
|
|
6235
|
+
return (jsxRuntime.jsx("h4", { className: cn("text-sm font-medium ", className), ...props, children: children }));
|
|
6167
6236
|
};
|
|
6168
6237
|
|
|
6169
6238
|
/**
|
|
@@ -6189,7 +6258,7 @@ const H4 = ({ children, className, ...props }) => {
|
|
|
6189
6258
|
* igual para la vía `items` que para la vía `children`. Ganan por CAPA
|
|
6190
6259
|
* (`@layer utilities` va después de `@layer components`), no por especificidad.
|
|
6191
6260
|
*/
|
|
6192
|
-
const V2_INK_CLASS =
|
|
6261
|
+
const V2_INK_CLASS = cn(
|
|
6193
6262
|
// `[data-slot=link]` y no `a`: el breadcrumb ACTUAL de v3 no es un `<a>` (sin `href`,
|
|
6194
6263
|
// react-aria lo renderiza como `<span role="link" aria-current="page">`), así que un
|
|
6195
6264
|
// selector por etiqueta se lo dejaba fuera. Verificado en el DOM.
|
|
@@ -6238,7 +6307,7 @@ const V2_INK_CLASS = react.cn(
|
|
|
6238
6307
|
* Va desde la RAÍZ y por el mismo motivo que `V2_INK_CLASS`: `Breadcrumbs.Item` de v3 pisa las
|
|
6239
6308
|
* clases de sus partes internas, así que un `className` en el item no sobrevive.
|
|
6240
6309
|
*/
|
|
6241
|
-
const V2_SPACING_CLASS =
|
|
6310
|
+
const V2_SPACING_CLASS = cn(
|
|
6242
6311
|
// v2: `item: "flex gap-1 items-center"` → 4px entre la etiqueta y el separador.
|
|
6243
6312
|
"[&_[data-slot=breadcrumbs-item]]:gap-1",
|
|
6244
6313
|
// v2: ni el item ni el enlace tenían padding → el primer glifo caía en el canto del rastro…
|
|
@@ -6287,7 +6356,7 @@ const BreadcrumbsComponent = ({ items, children, onItemClick,
|
|
|
6287
6356
|
// lleguen como atributo DOM desconocido al `<nav>` subyacente, aceptadas solo por
|
|
6288
6357
|
// compatibilidad de tipos con quien ya las pasaba en v2.
|
|
6289
6358
|
size: _size, radius: _radius, variant: _variant, className, ...heroUIProps }) => {
|
|
6290
|
-
return (jsxRuntime.jsx(react.Breadcrumbs, { ...heroUIProps, className:
|
|
6359
|
+
return (jsxRuntime.jsx(react.Breadcrumbs, { ...heroUIProps, className: cn(V2_INK_CLASS, V2_SPACING_CLASS, className), children: items
|
|
6291
6360
|
? items.map((item, index) => (jsxRuntime.jsx(react.Breadcrumbs.Item, { ...(onItemClick && item.href && !item.isCurrent
|
|
6292
6361
|
? { onPress: () => onItemClick(item.href) }
|
|
6293
6362
|
: { href: item.href }), children: item.label }, `${item.href || item.label}-${index}`)))
|
|
@@ -6382,7 +6451,7 @@ const KanbanCardComponent = ({ item, columnId, index, renderContent, onCardClick
|
|
|
6382
6451
|
onDragEnd?.();
|
|
6383
6452
|
}, [onDragEnd]);
|
|
6384
6453
|
const isInteractive = isClickable && onCardClick;
|
|
6385
|
-
return (jsxRuntime.jsx("div", { className:
|
|
6454
|
+
return (jsxRuntime.jsx("div", { className: cn("bg-content1 border border-default-200 rounded-lg p-4 transition-all", isInteractive && "cursor-pointer hover:border-default-400", isDraggable && "cursor-grab active:cursor-grabbing", isDragging && "opacity-50 scale-95 shadow-lg", className), onClick: isInteractive ? handleClick : undefined, onKeyDown: isInteractive ? handleKeyDown : undefined, role: isInteractive ? "button" : undefined, tabIndex: isInteractive ? 0 : undefined, draggable: isDraggable, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: renderContent(item) }));
|
|
6386
6455
|
};
|
|
6387
6456
|
const KanbanCard = $8WNJc$react.memo(KanbanCardComponent);
|
|
6388
6457
|
KanbanCard.displayName = "KanbanCard";
|
|
@@ -6577,7 +6646,7 @@ const KanbanColumnComponent = ({ column, renderItem, onCardClick, cardClassName,
|
|
|
6577
6646
|
const newDropIndex = e.clientY < midpoint ? itemIndex : itemIndex + 1;
|
|
6578
6647
|
setDropIndex(newDropIndex);
|
|
6579
6648
|
}, []);
|
|
6580
|
-
return (jsxRuntime.jsxs("div", { className:
|
|
6649
|
+
return (jsxRuntime.jsxs("div", { className: cn("flex flex-col bg-default-50 rounded-lg border border-default-200 transition-colors", isDragOver && isDragging && "border-primary-400 bg-primary-50/30", className), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [renderColumnHeader ? (renderColumnHeader(column)) : (jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-default-200", children: [jsxRuntime.jsx("h3", { className: "font-semibold text-foreground", children: column.title }), showItemCount && (jsxRuntime.jsx(Badge, { color: V3_BADGE_COLOR[column.countBadgeColor ?? "default"], variant: "soft", size: "lg",
|
|
6581
6650
|
// `static transform-none`: el Badge de v3 se posiciona ABSOLUTO por
|
|
6582
6651
|
// `placement` (`.badge--top-right { absolute top-0 right-0 }` +
|
|
6583
6652
|
// `translate(25%,-25%)`), pensado para vivir dentro de un `Badge.Anchor`.
|
|
@@ -6587,7 +6656,7 @@ const KanbanColumnComponent = ({ column, renderItem, onCardClick, cardClassName,
|
|
|
6587
6656
|
// siempre visible pero la story lo tapaba, y ahora queda apagado por defecto.
|
|
6588
6657
|
className: "static text-xs font-medium transform-none", style: column.countBadgeColor === "secondary"
|
|
6589
6658
|
? SECONDARY_BADGE_STYLE
|
|
6590
|
-
: undefined, "aria-label": `${itemCount} ${t.itemsLabel}`, children: itemCount }))] })), jsxRuntime.jsx("div", { ref: scrollContainerRef, className:
|
|
6659
|
+
: undefined, "aria-label": `${itemCount} ${t.itemsLabel}`, children: itemCount }))] })), jsxRuntime.jsx("div", { ref: scrollContainerRef, className: cn("flex-1 overflow-y-auto p-3 space-y-3", isDragOver && isEmpty && "min-h-24"), style: { maxHeight }, children: isEmpty ? (isDragOver && isDragging ? (jsxRuntime.jsx("div", { className: "h-24 border-2 border-dashed border-primary-300 rounded-lg bg-primary-50/50 flex items-center justify-center", children: jsxRuntime.jsx("span", { className: "text-primary-500 text-sm", children: t.dropHere }) })) : renderEmptyState ? (renderEmptyState(column)) : (jsxRuntime.jsx("div", { className: "flex items-center justify-center h-24 text-default-400 text-sm", children: column.emptyMessage || t.emptyMessage }))) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [column.items.map((item, index) => (jsxRuntime.jsxs("div", { onDragOver: (e) => handleDragOverItem(e, index), children: [isDragOver && dropIndex === index && (jsxRuntime.jsx("div", { className: "h-1 bg-primary-400 rounded-full mb-3 animate-pulse" })), jsxRuntime.jsx(KanbanCard, { item: item, columnId: column.id, index: index, renderContent: renderItem, onCardClick: onCardClick, className: cardClassName, isClickable: isCardClickable, isDraggable: isDraggable, onDragStart: onDragStart, onDragEnd: onDragEnd })] }, item.id))), isDragOver && dropIndex === column.items.length && (jsxRuntime.jsx("div", { className: "h-1 bg-primary-400 rounded-full mt-3 animate-pulse" })), column.isLoading && (jsxRuntime.jsx("div", { className: "flex items-center justify-center py-4", children: jsxRuntime.jsx(react.Spinner, { size: "sm", color: "accent" }) }))] })) })] }));
|
|
6591
6660
|
};
|
|
6592
6661
|
const KanbanColumn = $8WNJc$react.memo(KanbanColumnComponent);
|
|
6593
6662
|
KanbanColumn.displayName = "KanbanColumn";
|
|
@@ -6672,7 +6741,7 @@ const KanbanComponent = ({ columns, renderItem, onCardClick, onItemMove, isDragg
|
|
|
6672
6741
|
});
|
|
6673
6742
|
handleDragEnd();
|
|
6674
6743
|
}, [onItemMove, handleDragEnd]);
|
|
6675
|
-
return (jsxRuntime.jsx("div", { className:
|
|
6744
|
+
return (jsxRuntime.jsx("div", { className: cn("flex", columnGapClasses[columnGap], horizontalScroll && "overflow-x-auto pb-4", className), children: columns.map((column) => (jsxRuntime.jsx("div", { className: "flex-shrink-0", style: { width: columnWidth }, children: jsxRuntime.jsx(KanbanColumn, { column: column, renderItem: renderItem, onCardClick: onCardClick, cardClassName: cardClassName, isCardClickable: isCardClickable, maxHeight: columnMaxHeight, renderColumnHeader: renderColumnHeader, renderEmptyState: renderEmptyState, isDraggable: dragEnabled, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDrop: handleDrop, isDragging: isDragging, translations: t, onLoadMore: onLoadMore ? () => onLoadMore(column.id) : undefined, showItemCount: showItemCount }) }, column.id))) }));
|
|
6676
6745
|
};
|
|
6677
6746
|
const Kanban = $8WNJc$react.memo(KanbanComponent);
|
|
6678
6747
|
Kanban.displayName = "Kanban";
|
|
@@ -6848,9 +6917,9 @@ const MenuMobileBottomBar = $8WNJc$react.memo(function MenuMobileBottomBar({ ite
|
|
|
6848
6917
|
const handleItemPress = $8WNJc$react.useCallback((key, href) => {
|
|
6849
6918
|
onSelect?.(key, href);
|
|
6850
6919
|
}, [onSelect]);
|
|
6851
|
-
return (jsxRuntime.jsx("nav", { className:
|
|
6920
|
+
return (jsxRuntime.jsx("nav", { className: cn("menu-mobile-bottom-bar", forceVisible && "menu-mobile-bottom-bar--force-visible"), "aria-label": navAriaLabel, children: jsxRuntime.jsxs("div", { className: "menu-mobile-bottom-bar__container", children: [visibleItems.map((item) => {
|
|
6852
6921
|
const isSelected = selectedKey === item.key;
|
|
6853
|
-
return (jsxRuntime.jsxs("button", { type: "button", className:
|
|
6922
|
+
return (jsxRuntime.jsxs("button", { type: "button", className: cn("menu-mobile-bottom-bar__item", isSelected && "menu-mobile-bottom-bar__item--active"), onClick: () => handleItemPress(item.key, item.href), "aria-current": isSelected ? "page" : undefined, "aria-label": item.title, children: [item.icon && (jsxRuntime.jsx(IconComponent, { icon: item.icon, size: "md", className: "menu-mobile-bottom-bar__icon" })), jsxRuntime.jsx("span", { className: "menu-mobile-bottom-bar__label", children: item.title })] }, item.key));
|
|
6854
6923
|
}), jsxRuntime.jsxs("button", { type: "button", className: "menu-mobile-bottom-bar__item", onClick: onMenuPress, "aria-label": menuLabel, children: [jsxRuntime.jsx(IconComponent, { icon: "solar:hamburger-menu-linear", size: "md", className: "menu-mobile-bottom-bar__icon" }), jsxRuntime.jsx("span", { className: "menu-mobile-bottom-bar__label", children: menuLabel })] })] }) }));
|
|
6855
6924
|
});
|
|
6856
6925
|
|
|
@@ -7026,7 +7095,7 @@ const MenuNavList = $8WNJc$react.forwardRef(({ items, isCollapsed, defaultSelect
|
|
|
7026
7095
|
// `MenuClawNavItem` (HTML semántico + `onClick`, sin `ListBox`).
|
|
7027
7096
|
const renderSubItem = $8WNJc$react.useCallback((item) => {
|
|
7028
7097
|
const isSelected = item.key === selectedKey;
|
|
7029
|
-
return (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs("button", { type: "button", "data-menu-subitem-selected": isSelected ? "true" : "false", "aria-current": isSelected ? "page" : undefined, className:
|
|
7098
|
+
return (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs("button", { type: "button", "data-menu-subitem-selected": isSelected ? "true" : "false", "aria-current": isSelected ? "page" : undefined, className: cn("flex w-full items-center justify-between gap-2 min-h-9 rounded-[14px] px-3 py-2 menu-nav-list__sub-item text-left", "text-default-500 hover:text-default-700 transition-colors outline-none", "focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-focus focus-visible:outline-offset-2", isSelected && "selected"), onClick: () => handleItemPress(item), children: [jsxRuntime.jsx(react.Label, { className: "text-sm font-normal text-inherit", children: item.title }), item.endContent ?? null] }) }, item.key));
|
|
7030
7099
|
}, [handleItemPress, selectedKey]);
|
|
7031
7100
|
// Renders a nested item, i.e., an item that has sub-items.
|
|
7032
7101
|
// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
|
|
@@ -7038,16 +7107,16 @@ const MenuNavList = $8WNJc$react.forwardRef(({ items, isCollapsed, defaultSelect
|
|
|
7038
7107
|
const isSelectedKeyInThisNest = Boolean(selectedKey && item.items?.length) &&
|
|
7039
7108
|
(item.items?.some((child) => child.key === selectedKey) ?? false);
|
|
7040
7109
|
const isItemSelected = selectedKey === item.key;
|
|
7041
|
-
return (jsxRuntime.jsxs(react.ListBoxItem, { id: item.key, textValue: item.title, "aria-selected": isItemSelected, className:
|
|
7110
|
+
return (jsxRuntime.jsxs(react.ListBoxItem, { id: item.key, textValue: item.title, "aria-selected": isItemSelected, className: cn(ITEM_BASE_CLASS, isCollapsed && ITEM_COLLAPSED_CLASS, {
|
|
7042
7111
|
"h-auto p-0": !isCollapsed && isNestType,
|
|
7043
7112
|
}, {
|
|
7044
7113
|
"inline-block w-11": isCollapsed && isNestType,
|
|
7045
7114
|
}, {
|
|
7046
7115
|
"data-[selected=true]:bg-primary-100 h-11 justify-center items-center flex": isCollapsed && isNestType,
|
|
7047
|
-
}), children: [isCollapsed || isNestType ? null : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item.icon ? (jsxRuntime.jsx(IconComponent, { className:
|
|
7116
|
+
}), children: [isCollapsed || isNestType ? null : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item.icon ? (jsxRuntime.jsx(IconComponent, { className: cn("text-default-500 group-data-[selected=true]:text-foreground", iconClassName), icon: item.icon, size: "lg" })) : ((item.startContent ?? null)), jsxRuntime.jsx(react.Label, { className: ITEM_TITLE_CLASS, children: item.title }), hideEndContent ? null : (item.endContent ?? null)] })), isCollapsed && isNestType ? (
|
|
7048
7117
|
// `placement`/`offset` viven en `PopoverContent` en v3, no en la raíz
|
|
7049
7118
|
// `Popover` (a diferencia de v2) — mismo patrón que Tooltip.Content.
|
|
7050
|
-
jsxRuntime.jsxs(react.Popover, { children: [jsxRuntime.jsx(react.PopoverTrigger, { children: jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-center gap-1", children: [jsxRuntime.jsxs(react.Tooltip, { delay: 0, children: [jsxRuntime.jsx(react.Tooltip.Trigger, { children: jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: item.icon ? (jsxRuntime.jsx(IconComponent, { className:
|
|
7119
|
+
jsxRuntime.jsxs(react.Popover, { children: [jsxRuntime.jsx(react.PopoverTrigger, { children: jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-center gap-1", children: [jsxRuntime.jsxs(react.Tooltip, { delay: 0, children: [jsxRuntime.jsx(react.Tooltip.Trigger, { children: jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: item.icon ? (jsxRuntime.jsx(IconComponent, { className: cn("text-default-500 group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : ((item.startContent ?? null)) }) }), jsxRuntime.jsx(react.Tooltip.Content, { placement: "right", className: "text-default-500", children: item.title })] }), jsxRuntime.jsx(IconComponent, { className: "text-default-400 shrink-0", icon: "solar:alt-arrow-right-outline", size: "sm", "aria-hidden": true })] }) }), jsxRuntime.jsx(react.PopoverContent, { placement: "right", offset: 10, className: "border border-default-200 bg-white p-0 shadow-md", children: jsxRuntime.jsxs("div", { className: "min-w-[200px] rounded-[14px] p-2", children: [jsxRuntime.jsx("div", { className: "px-3 py-2 text-sm font-semibold text-default-500", children: item.title }), jsxRuntime.jsx("ul", { className: "mt-0.5 flex flex-col gap-0.5 border-l border-default-200 pl-4 ml-2", children: (item.items?.length ? item.items : [item]).map((child) => renderSubItem(child)) })] }) })] })) : null, !isCollapsed && isNestType ? (jsxRuntime.jsxs("details", { className: "group/details w-full p-0", "aria-label": item.title, open: isSelectedKeyInThisNest, children: [jsxRuntime.jsx("summary", { className: cn("flex h-11 list-none cursor-pointer items-center gap-2 rounded-[14px] px-3 py-1.5 pr-3", "text-default-500 hover:bg-default-100 [&::-webkit-details-marker]:hidden [&::marker]:hidden"), children: item.icon ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(IconComponent, { className: cn("text-default-500 group-open/details:text-default-600", iconClassName), icon: item.icon, size: "lg" }), jsxRuntime.jsx("span", { className: "text-sm font-medium text-default-500 group-open/details:text-default-600 flex-1", children: item.title }), jsxRuntime.jsxs("span", { className: "flex shrink-0 items-center text-default-400", children: [jsxRuntime.jsx(IconComponent, { className: "hidden group-open/details:inline-block", icon: "solar:alt-arrow-down-outline", size: "sm", "aria-hidden": true }), jsxRuntime.jsx(IconComponent, { className: "inline-block group-open/details:hidden", icon: "solar:alt-arrow-right-outline", size: "sm", "aria-hidden": true })] })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item.startContent ?? null, jsxRuntime.jsxs("span", { className: "ml-auto flex shrink-0 items-center text-default-400", children: [jsxRuntime.jsx(IconComponent, { className: "hidden group-open/details:inline-block", icon: "solar:alt-arrow-down-outline", size: "sm", "aria-hidden": true }), jsxRuntime.jsx(IconComponent, { className: "inline-block group-open/details:hidden", icon: "solar:alt-arrow-right-outline", size: "sm", "aria-hidden": true })] })] })) }), jsxRuntime.jsx("div", { className: "py-0 pl-4", children: item.items && item.items?.length > 0 ? (jsxRuntime.jsx("ul", { className: "mt-0.5 flex flex-col gap-0.5 border-l border-default-200 pl-4 ml-2", children: item.items.map((child) => renderSubItem(child)) })) : (renderItem(item)) })] })) : null] }, item.key));
|
|
7051
7120
|
}, [isCollapsed, hideEndContent, iconClassName, selectedKey, renderSubItem]);
|
|
7052
7121
|
// Renders a simple item (without children) in the navigation list.
|
|
7053
7122
|
// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
|
|
@@ -7059,11 +7128,11 @@ const MenuNavList = $8WNJc$react.forwardRef(({ items, isCollapsed, defaultSelect
|
|
|
7059
7128
|
return renderNestItem(item);
|
|
7060
7129
|
}
|
|
7061
7130
|
const isItemSelected = selectedKey === item.key;
|
|
7062
|
-
return (jsxRuntime.jsx(react.ListBoxItem, { id: item.key, textValue: item.title, "aria-selected": isItemSelected, "aria-label": item.title || `Menu item ${item.key}`, className:
|
|
7131
|
+
return (jsxRuntime.jsx(react.ListBoxItem, { id: item.key, textValue: item.title, "aria-selected": isItemSelected, "aria-label": item.title || `Menu item ${item.key}`, className: cn(ITEM_BASE_CLASS, isCollapsed && ITEM_COLLAPSED_CLASS), children: isCollapsed ? (jsxRuntime.jsxs(react.Tooltip, { delay: 0, closeDelay: 200, children: [jsxRuntime.jsx(react.Tooltip.Trigger, { children: jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center", "aria-hidden": "true", children: item.icon ? (jsxRuntime.jsx(IconComponent, { className: cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : ((item.startContent ?? null)) }) }), jsxRuntime.jsx(react.Tooltip.Content, { placement: "right", className: "text-default-500", children: item.title })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item.icon ? (jsxRuntime.jsx(IconComponent, { className: cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : ((item.startContent ?? null)), jsxRuntime.jsx(react.Label, { className: ITEM_TITLE_CLASS, children: item.title }), hideEndContent ? null : (item.endContent ?? null)] })) }, item.key));
|
|
7063
7132
|
}, [isCollapsed, hideEndContent, iconClassName, selectedKey, renderNestItem]);
|
|
7064
7133
|
// `ListBox` de v3 ya no es polimórfico via `as` (a diferencia de Breadcrumbs/Pagination) —
|
|
7065
7134
|
// renderiza siempre su propio contenedor; el landmark de navegación se envuelve por fuera.
|
|
7066
|
-
return (jsxRuntime.jsx("nav", { "aria-label": "Menu navigation", ref: ref, children: jsxRuntime.jsx(react.ListBox, { "aria-label": "Menu navigation", className:
|
|
7135
|
+
return (jsxRuntime.jsx("nav", { "aria-label": "Menu navigation", ref: ref, children: jsxRuntime.jsx(react.ListBox, { "aria-label": "Menu navigation", className: cn("list-none items-center", className), items: items, selectedKeys: selectedKeys, selectionMode: "single", onSelectionChange: handleSelectionChange,
|
|
7067
7136
|
// Neutraliza el Escape del `ListBox`: con el valor por defecto
|
|
7068
7137
|
// (`clearSelection`) vaciaría la selección y `handleSelectionChange` leería ese
|
|
7069
7138
|
// conjunto vacío como un reclic, navegando a la ruta actual sin que nadie haya
|
|
@@ -7110,10 +7179,10 @@ const MenuNavList = $8WNJc$react.forwardRef(({ items, isCollapsed, defaultSelect
|
|
|
7110
7179
|
// porque es lo correcto en 6 de las 8 stories y las dos que quedan
|
|
7111
7180
|
// pasan de sobra; anotado por si alguien mide `malformed-menu` a solas
|
|
7112
7181
|
// y cree haber encontrado una mejora.
|
|
7113
|
-
className:
|
|
7182
|
+
className: cn("w-full", {
|
|
7114
7183
|
"p-0 max-w-[44px] gap-1": isCollapsed,
|
|
7115
7184
|
"mb-[9px]": !isCollapsed,
|
|
7116
|
-
}), children: [jsxRuntime.jsx(react.Header, { className:
|
|
7185
|
+
}), children: [jsxRuntime.jsx(react.Header, { className: cn("pl-1 text-xs font-normal text-foreground-500",
|
|
7117
7186
|
// El relleno vertical SOLO cuando la sección tiene título, que
|
|
7118
7187
|
// es la semántica del `data-[has-title=true]:pt-1` de v2. Con
|
|
7119
7188
|
// título el bloque mide 29px; sin título, v2 dejaba solo la
|
|
@@ -7364,7 +7433,7 @@ const MenuClawHistoryPanel = $8WNJc$react.memo(function MenuClawHistoryPanel({ i
|
|
|
7364
7433
|
if (isCollapsed && !onNewConversation) {
|
|
7365
7434
|
return null;
|
|
7366
7435
|
}
|
|
7367
|
-
return (jsxRuntime.jsxs("div", { className: "flex max-h-[40%] min-h-0 flex-col gap-2 pb-3", children: [onNewConversation ? (jsxRuntime.jsxs("button", { type: "button", title: newLabel, onClick: onNewConversation, className:
|
|
7436
|
+
return (jsxRuntime.jsxs("div", { className: "flex max-h-[40%] min-h-0 flex-col gap-2 pb-3", children: [onNewConversation ? (jsxRuntime.jsxs("button", { type: "button", title: newLabel, onClick: onNewConversation, className: cn("flex h-9 shrink-0 items-center gap-3 rounded-xl bg-foreground px-2 text-sm font-medium text-background transition-opacity hover:opacity-90", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus", isCollapsed && "justify-center"), children: [jsxRuntime.jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: jsxRuntime.jsx(IconComponent, { icon: "solar:pen-new-square-linear", size: "md", "aria-hidden": true }) }), !isCollapsed ? (jsxRuntime.jsx("span", { className: "menu-claw-collapsible truncate", children: newLabel })) : null] })) : null, !isCollapsed && items.length > 0 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("p", { className: "shrink-0 px-2 pb-1 pt-2 text-xs font-medium uppercase tracking-wide text-default-400", children: title }), jsxRuntime.jsx("ul", { "aria-label": title, className: "flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: visibleItems.map((item) => (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs("button", { type: "button", disabled: item.disabled, "aria-disabled": item.disabled, title: item.title, onClick: () => handleItemPress(item), className: cn("flex min-h-9 w-full items-center gap-3 rounded-lg px-2 py-1.5 text-left text-sm text-default-600 transition-colors", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus", item.disabled
|
|
7368
7437
|
? "cursor-not-allowed opacity-50"
|
|
7369
7438
|
: "hover:bg-default-100"), children: [jsxRuntime.jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-default-400", children: jsxRuntime.jsx(IconComponent, { icon: "solar:chat-round-dots-linear", size: "md", "aria-hidden": true }) }), jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col", children: [jsxRuntime.jsx("span", { className: "truncate", children: item.title }), item.meta ? (jsxRuntime.jsx("span", { className: "truncate text-xs text-default-400", children: item.meta })) : null] })] }) }, item.id))) }), hasHiddenItems ? (jsxRuntime.jsxs("button", { type: "button", onClick: handleToggleExpand, "aria-expanded": isExpanded, className: "flex w-full shrink-0 items-center gap-1.5 rounded-lg px-2 py-2 text-xs font-medium text-default-500 transition-colors hover:bg-default-100 hover:text-default-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus", children: [jsxRuntime.jsx(IconComponent, { icon: isExpanded
|
|
7370
7439
|
? "solar:alt-arrow-up-linear"
|
|
@@ -7411,14 +7480,14 @@ const MenuClawNavItem = ({ item, selectedKey, isCollapsed, onSelect, depth = 0,
|
|
|
7411
7480
|
onSelect(item.key, item.href);
|
|
7412
7481
|
}, [isGroup, onSelect, item.key, item.href]);
|
|
7413
7482
|
const icon = item.icon || item.startContent ? (jsxRuntime.jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-default-500 [&_svg]:h-5 [&_svg]:w-5", children: item.icon ? (jsxRuntime.jsx(IconComponent, { icon: item.icon, size: "md", "aria-hidden": true })) : (item.startContent) })) : null;
|
|
7414
|
-
return (jsxRuntime.jsxs("li", { children: [jsxRuntime.jsxs("button", { type: "button", title: isCollapsed ? item.title : undefined, onClick: handleClick, "aria-expanded": isGroup ? isOpen : undefined, "aria-controls": isGroup ? submenuId : undefined, className:
|
|
7483
|
+
return (jsxRuntime.jsxs("li", { children: [jsxRuntime.jsxs("button", { type: "button", title: isCollapsed ? item.title : undefined, onClick: handleClick, "aria-expanded": isGroup ? isOpen : undefined, "aria-controls": isGroup ? submenuId : undefined, className: cn(
|
|
7415
7484
|
// `text-small` es clase muerta de v2 (TECH-2459 · G2) → `text-sm` (mismo tamaño).
|
|
7416
7485
|
"flex w-full items-center rounded-lg px-2 py-1.5 text-left text-sm transition-colors", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus", depth === 0 ? "min-h-9" : "min-h-8", isCollapsed ? "justify-center" : "gap-3",
|
|
7417
7486
|
// Sangría del hijo: alinea su texto con el del padre (px-2 + icono
|
|
7418
7487
|
// de 20px + gap de 12px).
|
|
7419
7488
|
!isCollapsed && depth > 0 && !icon ? "pl-10" : undefined, isActive
|
|
7420
7489
|
? "bg-default-100 font-medium text-foreground"
|
|
7421
|
-
: "text-default-600 hover:bg-default-100", item.className), children: [icon, !isCollapsed ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "menu-claw-collapsible flex-1 truncate", children: item.title }), item.endContent ?? null, isGroup ? (jsxRuntime.jsx(IconComponent, { icon: "solar:alt-arrow-down-linear", size: "sm", "aria-hidden": true, className:
|
|
7490
|
+
: "text-default-600 hover:bg-default-100", item.className), children: [icon, !isCollapsed ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "menu-claw-collapsible flex-1 truncate", children: item.title }), item.endContent ?? null, isGroup ? (jsxRuntime.jsx(IconComponent, { icon: "solar:alt-arrow-down-linear", size: "sm", "aria-hidden": true, className: cn("shrink-0 text-default-400 transition-transform", isOpen && "rotate-180") })) : null] })) : null] }), isGroup && isOpen ? (jsxRuntime.jsx("ul", { id: submenuId, className: "mt-0.5 flex flex-col gap-0.5", children: children.map((child) => (jsxRuntime.jsx(MenuClawNavItem, { item: child, selectedKey: selectedKey, isCollapsed: isCollapsed, onSelect: onSelect, depth: depth + 1 }, child.key))) })) : null] }));
|
|
7422
7491
|
};
|
|
7423
7492
|
MenuClawNavItem.displayName = "MenuClawNavItem";
|
|
7424
7493
|
|
|
@@ -7531,9 +7600,9 @@ const MenuClaw = $8WNJc$react.memo(function MenuClaw({ userInfo, helpButton, men
|
|
|
7531
7600
|
menuItems.onSelect?.(key, href, "bottomBar");
|
|
7532
7601
|
}, [onOpenSidebarChange, menuItems.onSelect]);
|
|
7533
7602
|
const showBottomBar = (mobileBottomBarGroupKey && bottomBarItems.length > 0) || showNativeMenu;
|
|
7534
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showBottomBar ? (jsxRuntime.jsx(MenuMobileBottomBar, { items: bottomBarItems, selectedKey: selectedKey, onSelect: handleBottomBarSelect, onMenuPress: handleSidebarOpen, menuLabel: t.menuLabel, navAriaLabel: t.mobileNavAriaLabel, forceVisible: showNativeMenu && bottomBarItems.length === 0 })) : null, jsxRuntime.jsx("button", { type: "button", "aria-label": t.closeSidebarAriaLabel, className: `menu-claw-overlay ${isOpenSidebar ? "menu-claw-overlay--open" : ""}`, onClick: handleSidebarClose, tabIndex: isOpenSidebar ? 0 : -1 }), jsxRuntime.jsx("div", { className:
|
|
7603
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showBottomBar ? (jsxRuntime.jsx(MenuMobileBottomBar, { items: bottomBarItems, selectedKey: selectedKey, onSelect: handleBottomBarSelect, onMenuPress: handleSidebarOpen, menuLabel: t.menuLabel, navAriaLabel: t.mobileNavAriaLabel, forceVisible: showNativeMenu && bottomBarItems.length === 0 })) : null, jsxRuntime.jsx("button", { type: "button", "aria-label": t.closeSidebarAriaLabel, className: `menu-claw-overlay ${isOpenSidebar ? "menu-claw-overlay--open" : ""}`, onClick: handleSidebarClose, tabIndex: isOpenSidebar ? 0 : -1 }), jsxRuntime.jsx("div", { className: cn("menu-claw", collapsed ? "menu-claw--collapsed" : "menu-claw--expanded", isOpenSidebar && "menu-claw--mobile-open"), "aria-hidden": !isOpenSidebar, children: jsxRuntime.jsxs("div", { className: "menu-claw__content", children: [jsxRuntime.jsxs("div", { className: cn("flex items-center", collapsed ? "justify-center" : "justify-end"), children: [jsxRuntime.jsx("button", { type: "button", "aria-label": t.closeSidebarAriaLabel, className: "menu-claw-header-button menu-claw-header-button--close-mobile", onClick: handleSidebarClose, children: jsxRuntime.jsx(IconComponent, { icon: "material-symbols-light:close", size: "lg", "aria-hidden": true }) }), jsxRuntime.jsx("button", { type: "button", "aria-label": t.toggleSidebarAriaLabel, "aria-expanded": !collapsed, onClick: handleCollapseToggle, className: "menu-claw-header-button menu-claw-header-button--collapse-toggle h-7 w-7 shrink-0 rounded-lg text-default-500 transition-colors hover:bg-default-100", children: jsxRuntime.jsx(IconComponent, { icon: collapsed
|
|
7535
7604
|
? "solar:alt-arrow-right-linear"
|
|
7536
|
-
: "solar:alt-arrow-left-linear", size: "md", "aria-hidden": true }) })] }), jsxRuntime.jsxs("div", { className:
|
|
7605
|
+
: "solar:alt-arrow-left-linear", size: "md", "aria-hidden": true }) })] }), jsxRuntime.jsxs("div", { className: cn("flex items-center py-3", collapsed ? "justify-center gap-0" : "gap-3"), children: [jsxRuntime.jsxs(react.Avatar, { size: "sm", className: "shrink-0", children: [userInfo?.avatar?.trim() ? (jsxRuntime.jsx(react.Avatar.Image, { src: userInfo.avatar, alt: userName })) : null, jsxRuntime.jsx(react.Avatar.Fallback, { className: userInfo?.avatar?.trim()
|
|
7537
7606
|
? undefined
|
|
7538
7607
|
: "bg-warning text-warning-foreground", children: getUserInitials(userName) })] }), !collapsed ? (jsxRuntime.jsxs("div", { className: "menu-claw-collapsible flex min-w-0 flex-col overflow-hidden", children: [jsxRuntime.jsx("p", { className: "truncate text-sm font-semibold text-foreground", children: userName }), jsxRuntime.jsx("p", { className: "truncate text-xs text-default-400", children: userRole })] })) : null] }), jsxRuntime.jsx(MenuClawHistoryPanel, { items: historyConfig.items, initialVisibleCount: historyConfig.initialVisibleCount, onNewConversation: history?.onNewConversation, isCollapsed: collapsed, title: t.historyTitle, newLabel: t.historyNewLabel, showMoreLabel: t.historyShowMoreLabel, showLessLabel: t.historyShowLessLabel, onBeforeSelect: handleSidebarClose }), jsxRuntime.jsx("nav", { className: "flex min-h-0 flex-1 flex-col overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: menuItems.items.map((group) => (jsxRuntime.jsxs("div", { className: "mb-2", children: [group.title && !collapsed ? (jsxRuntime.jsx("p", { className: "px-2 pb-1 pt-2 text-xs font-medium uppercase tracking-wide text-default-400", children: group.title })) : null, jsxRuntime.jsx("ul", { className: "flex flex-col gap-0.5", children: (group.items ?? []).map((item) => (jsxRuntime.jsx(MenuClawNavItem, { item: item, selectedKey: selectedKey, isCollapsed: collapsed, onSelect: handleMenuSelect }, item.key))) })] }, group.key))) }), helpSection ? (jsxRuntime.jsx("div", { className: "mt-auto flex flex-col items-center justify-center", children: jsxRuntime.jsx(Button, { fullWidth: true,
|
|
7539
7608
|
// TECH-2459 · G2 — la fachada propia de `Button` (D-G4-1) pinta
|
|
@@ -7697,7 +7766,7 @@ const StepIndicator = ({ currentStep, totalSteps, color = "primary", showStepTex
|
|
|
7697
7766
|
const stepText = stepTextFormatter
|
|
7698
7767
|
? stepTextFormatter(currentStep, totalSteps)
|
|
7699
7768
|
: defaultStepText(currentStep, totalSteps);
|
|
7700
|
-
return (jsxRuntime.jsxs("div", { className:
|
|
7769
|
+
return (jsxRuntime.jsxs("div", { className: cn("w-full", className), ...props, children: [showStepText && (jsxRuntime.jsx("div", { className: "text-center text-sm font-medium text-default-400 mb-3", children: stepText })), jsxRuntime.jsx("div", { className: "w-full bg-content2 rounded-full h-2 overflow-hidden", children: jsxRuntime.jsx("div", { className: cn("h-full transition-all duration-300 ease-out rounded-full", colorClasses[color]), style: { width: `${progressPercentage}%` } }) })] }));
|
|
7701
7770
|
};
|
|
7702
7771
|
|
|
7703
7772
|
/*
|
|
@@ -7820,7 +7889,7 @@ const VerticalSteps = $8WNJc$react.forwardRef(({ color = "primary", steps: steps
|
|
|
7820
7889
|
? color
|
|
7821
7890
|
: "primary";
|
|
7822
7891
|
const containerVars = $8WNJc$react.useMemo(() => getContainerCSSVars$1(stepColor), [stepColor]);
|
|
7823
|
-
return (jsxRuntime.jsx("nav", { "aria-label": "Progress", className: "max-w-fit", children: jsxRuntime.jsx("ol", { "data-step-color": stepColor, className:
|
|
7892
|
+
return (jsxRuntime.jsx("nav", { "aria-label": "Progress", className: "max-w-fit", children: jsxRuntime.jsx("ol", { "data-step-color": stepColor, className: cn("flex flex-col gap-y-3", className), style: containerVars, children: steps?.map((step, stepIdx) => {
|
|
7824
7893
|
const status = currentStep === stepIdx
|
|
7825
7894
|
? "active"
|
|
7826
7895
|
: stepIdx < currentStep || step.isCompleted
|
|
@@ -7829,13 +7898,13 @@ const VerticalSteps = $8WNJc$react.forwardRef(({ color = "primary", steps: steps
|
|
|
7829
7898
|
const isDisabled = status === "inactive";
|
|
7830
7899
|
return (
|
|
7831
7900
|
// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
|
|
7832
|
-
jsxRuntime.jsxs("li", { className: "relative", children: [jsxRuntime.jsx("div", { className: "flex w-full max-w-full items-center", children: jsxRuntime.jsxs("button", { type: "button", ref: ref, "aria-current": status === "active" ? "step" : undefined, className:
|
|
7901
|
+
jsxRuntime.jsxs("li", { className: "relative", children: [jsxRuntime.jsx("div", { className: "flex w-full max-w-full items-center", children: jsxRuntime.jsxs("button", { type: "button", ref: ref, "aria-current": status === "active" ? "step" : undefined, className: cn(
|
|
7833
7902
|
// TECH-2459 · G2 — `rounded-large` es clase muerta de v2;
|
|
7834
7903
|
// mismo valor exacto (14px) que usa RADIUS_CLASS en
|
|
7835
7904
|
// Button/Card de F3.0.
|
|
7836
7905
|
"group rounded-[14px] flex w-full cursor-pointer items-center justify-center gap-4 px-3 py-2.5", stepClassName, {
|
|
7837
7906
|
"cursor-not-allowed": isDisabled,
|
|
7838
|
-
}), onClick: () => setCurrentStep(stepIdx), disabled: isDisabled, ...props, children: [jsxRuntime.jsx("div", { className: "flex h-full items-center", children: jsxRuntime.jsx("div", { className: "relative", children: jsxRuntime.jsx("div", { className:
|
|
7907
|
+
}), onClick: () => setCurrentStep(stepIdx), disabled: isDisabled, ...props, children: [jsxRuntime.jsx("div", { className: "flex h-full items-center", children: jsxRuntime.jsx("div", { className: "relative", children: jsxRuntime.jsx("div", { className: cn(
|
|
7839
7908
|
// TECH-2459 · G2 — clases muertas de v2:
|
|
7840
7909
|
// border-medium=2px→border-2; text-large
|
|
7841
7910
|
// (18/28px) coincide exacto con `text-lg`.
|
|
@@ -7843,24 +7912,24 @@ const VerticalSteps = $8WNJc$react.forwardRef(({ color = "primary", steps: steps
|
|
|
7843
7912
|
"shadow-lg": status === "complete",
|
|
7844
7913
|
}), "data-status": status, style: getCircleStyle$1(status), children: jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: status === "complete" ? (jsxRuntime.jsx(IconComponent, { className: "font-bold", style: {
|
|
7845
7914
|
color: "var(--active-fg-color)",
|
|
7846
|
-
}, icon: "material-symbols:check-rounded", title: t.checkIconTitle })) : (jsxRuntime.jsx("span", { children: stepIdx + 1 })) }) }) }) }), jsxRuntime.jsx("div", { className: "flex-1 text-left", children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className:
|
|
7915
|
+
}, icon: "material-symbols:check-rounded", title: t.checkIconTitle })) : (jsxRuntime.jsx("span", { children: stepIdx + 1 })) }) }) }) }), jsxRuntime.jsx("div", { className: "flex-1 text-left", children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: cn(
|
|
7847
7916
|
// `text-medium` es clase muerta de v2 → `text-base` (16px, mismo valor).
|
|
7848
7917
|
"text-base text-default-600 font-medium transition-[color,opacity] duration-300 group-active:opacity-70", {
|
|
7849
7918
|
"text-default-300": status ===
|
|
7850
7919
|
"inactive",
|
|
7851
7920
|
}), children: step.title }), (!hideInactiveDescriptions ||
|
|
7852
|
-
status === "active") && (jsxRuntime.jsx("div", { className:
|
|
7921
|
+
status === "active") && (jsxRuntime.jsx("div", { className: cn(
|
|
7853
7922
|
// `text-tiny`/`text-small` son clases muertas de v2 →
|
|
7854
7923
|
// `text-xs`/`text-sm` (mismo tamaño exacto, 12px/14px).
|
|
7855
7924
|
"text-xs text-default-600 lg:text-sm transition-[color,opacity] duration-300 group-active:opacity-70", {
|
|
7856
7925
|
"text-default-300": status ===
|
|
7857
7926
|
"inactive",
|
|
7858
7927
|
}), children: step.description }))] }) })] }, stepIdx) }), stepIdx < steps.length - 1 &&
|
|
7859
|
-
!hideProgressBars && (jsxRuntime.jsx("div", { "aria-hidden": "true", className:
|
|
7928
|
+
!hideProgressBars && (jsxRuntime.jsx("div", { "aria-hidden": "true", className: cn("pointer-events-none absolute top-[calc(64px*var(--idx)+1)] left-3 flex h-1/2 -translate-y-1/3 items-center px-4", {
|
|
7860
7929
|
"h-1/4": stepIdx === currentStep,
|
|
7861
7930
|
}), style: {
|
|
7862
7931
|
"--idx": stepIdx,
|
|
7863
|
-
}, children: jsxRuntime.jsx("div", { className:
|
|
7932
|
+
}, children: jsxRuntime.jsx("div", { className: cn("relative h-full w-0.5 bg-[var(--inactive-bar-color)] transition-colors duration-300", "after:absolute after:block after:h-0 after:w-full after:bg-[var(--active-border-color)] after:transition-[height] after:duration-300 after:content-['']", {
|
|
7864
7933
|
"after:h-full": stepIdx <
|
|
7865
7934
|
currentStep,
|
|
7866
7935
|
}) }) }))] }, stepIdx));
|
|
@@ -7877,7 +7946,7 @@ const MultiStepSidebar = $8WNJc$react.forwardRef(({ children, className, current
|
|
|
7877
7946
|
onClose?.();
|
|
7878
7947
|
}
|
|
7879
7948
|
};
|
|
7880
|
-
return (jsxRuntime.jsx("div", { ...containerProps, className: "fixed inset-0 z-50 flex items-center justify-center bg-content3/50 backdrop-blur-sm", onClick: handleOverlayClick, children: jsxRuntime.jsxs("div", { ref: ref, className:
|
|
7949
|
+
return (jsxRuntime.jsx("div", { ...containerProps, className: "fixed inset-0 z-50 flex items-center justify-center bg-content3/50 backdrop-blur-sm", onClick: handleOverlayClick, children: jsxRuntime.jsxs("div", { ref: ref, className: cn("relative flex h-full w-full max-w-4xl overflow-hidden rounded-lg bg-background shadow-lg lg:h-auto lg:max-h-[85vh] lg:min-h-[512px]", className), ...props, children: [jsxRuntime.jsx("div", { className: cn("multi-step-wizard__steps-panel absolute inset-y-0 left-0 w-1/3 flex-col justify-start gap-y-8 overflow-y-auto p-8 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"), children: jsxRuntime.jsx(VerticalSteps, { className: "aura-stepper-theme", color: "primary", currentStep: currentPage, steps: steps, onStepChange: onChangePage, hideInactiveDescriptions: hideInactiveDescriptions }) }), jsxRuntime.jsxs("div", { className: "relative flex w-full flex-col items-center justify-between gap-4 md:ml-[33.333333%] md:w-2/3 md:p-4 min-h-0", children: [jsxRuntime.jsx(Button, { isIconOnly: true, ...dismissControlProps, "aria-label": closeTranslation, className: "absolute right-4 top-4", size: "sm", variant: "light", color: "default", onPress: onClose, startContent: jsxRuntime.jsx(IconComponent, { className: "text-foreground", icon: "material-symbols:close-rounded", size: "lg" }) }), jsxRuntime.jsx("div", { className: "pt-9 w-10/12 md:hidden", children: jsxRuntime.jsx("div", { className: "flex w-full justify-center", children: jsxRuntime.jsx(StepIndicator, { className: "aura-stepper-theme", currentStep: currentPage + 1, totalSteps: steps.length }) }) }), jsxRuntime.jsx("div", { className: "flex flex-col flex-1 w-full justify-between p-4 sm:max-w-md md:max-w-lg overflow-y-auto min-h-0 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: children })] })] }) }));
|
|
7881
7950
|
});
|
|
7882
7951
|
MultiStepSidebar.displayName = "MultiStepSidebar";
|
|
7883
7952
|
|
|
@@ -7886,7 +7955,7 @@ const MultistepNavigationButtons = ({ nextButtonProps, cancelButtonProps, classN
|
|
|
7886
7955
|
// backButtonProps || {};
|
|
7887
7956
|
const { children: nextButtonChildren, ...restNextButtonProps } = nextButtonProps || {};
|
|
7888
7957
|
const { children: cancelButtonChildren, ...restCancelButtonProps } = cancelButtonProps || {};
|
|
7889
|
-
return (jsxRuntime.jsx("div", { className:
|
|
7958
|
+
return (jsxRuntime.jsx("div", { className: cn("flex w-full flex-col-reverse gap-2 pt-4 sm:flex-row sm:justify-between md:justify-end", className), children: jsxRuntime.jsxs("div", { className: "flex w-full flex-col-reverse gap-2 md:w-auto md:flex-row", children: [jsxRuntime.jsx(Button, { className: "w-full md:w-auto", color: "default", variant: "flat", ...restCancelButtonProps, children: cancelButtonChildren || "Cancel" }), jsxRuntime.jsx(Button, { className: "w-full md:w-auto", color: "primary", ...restNextButtonProps, children: nextButtonChildren || "Next" })] }) }));
|
|
7890
7959
|
};
|
|
7891
7960
|
|
|
7892
7961
|
const MultiStepWizard = ({ isOpen, steps, translations, onClose, onComplete, completeButtonText, hideInactiveDescriptions, isDismissable = true, }) => {
|
|
@@ -8408,17 +8477,17 @@ const RowSteps = $8WNJc$react.forwardRef(({ color = "primary", steps: stepsProp
|
|
|
8408
8477
|
? color
|
|
8409
8478
|
: "primary";
|
|
8410
8479
|
const containerVars = $8WNJc$react.useMemo(() => getContainerCSSVars(stepColor), [stepColor]);
|
|
8411
|
-
return (jsxRuntime.jsx("nav", { "aria-label": "Progress", className: "-my-4 max-w-fit overflow-x-auto py-4", children: jsxRuntime.jsx("ol", { "data-step-color": stepColor, className:
|
|
8480
|
+
return (jsxRuntime.jsx("nav", { "aria-label": "Progress", className: "-my-4 max-w-fit overflow-x-auto py-4", children: jsxRuntime.jsx("ol", { "data-step-color": stepColor, className: cn("flex flex-row flex-nowrap gap-x-3", className), style: containerVars, children: steps?.map((step, stepIdx) => {
|
|
8412
8481
|
const status = currentStep === stepIdx
|
|
8413
8482
|
? "active"
|
|
8414
8483
|
: currentStep < stepIdx
|
|
8415
8484
|
? "inactive"
|
|
8416
8485
|
: "complete";
|
|
8417
|
-
return (jsxRuntime.jsx("li", { className: "relative flex w-full items-center pr-12 last:pr-0", children: jsxRuntime.jsxs("button", { type: "button", ref: ref, "aria-current": status === "active" ? "step" : undefined, className:
|
|
8486
|
+
return (jsxRuntime.jsx("li", { className: "relative flex w-full items-center pr-12 last:pr-0", children: jsxRuntime.jsxs("button", { type: "button", ref: ref, "aria-current": status === "active" ? "step" : undefined, className: cn(
|
|
8418
8487
|
// TECH-2459 · G2 — `rounded-large` es clase muerta (plugin
|
|
8419
8488
|
// Tailwind propio de v2, v3 no lo trae). Mismo valor exacto
|
|
8420
8489
|
// (14px) que usa RADIUS_CLASS en Button/Card de F3.0.
|
|
8421
|
-
"group rounded-[14px] flex w-full cursor-pointer flex-row items-center justify-center gap-x-3 py-2.5", stepClassName), onClick: () => setCurrentStep(stepIdx), ...props, children: [jsxRuntime.jsx("div", { className: "h-ful relative flex items-center", children: jsxRuntime.jsx("div", { className: "relative", children: jsxRuntime.jsx("div", { className:
|
|
8490
|
+
"group rounded-[14px] flex w-full cursor-pointer flex-row items-center justify-center gap-x-3 py-2.5", stepClassName), onClick: () => setCurrentStep(stepIdx), ...props, children: [jsxRuntime.jsx("div", { className: "h-ful relative flex items-center", children: jsxRuntime.jsx("div", { className: "relative", children: jsxRuntime.jsx("div", { className: cn(
|
|
8422
8491
|
// TECH-2459 · G2 — `border-medium`/`text-large` son
|
|
8423
8492
|
// clases muertas de v2 (tabla-mapeo-tokens.md §4):
|
|
8424
8493
|
// border-medium=2px→border-2; text-large (18/28px)
|
|
@@ -8429,7 +8498,7 @@ const RowSteps = $8WNJc$react.forwardRef(({ color = "primary", steps: stepsProp
|
|
|
8429
8498
|
"complete",
|
|
8430
8499
|
}), "data-status": status, style: getCircleStyle(status), children: jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: status === "complete" ? (jsxRuntime.jsx(IconComponent, { className: "font-bold", style: {
|
|
8431
8500
|
color: "var(--active-fg-color)",
|
|
8432
|
-
}, icon: "material-symbols:check-rounded" })) : (jsxRuntime.jsx("span", { children: stepIdx + 1 })) }) }) }) }), step.title && (jsxRuntime.jsx("div", { className: "max-w-full flex-1 text-start", children: jsxRuntime.jsx("div", { className:
|
|
8501
|
+
}, icon: "material-symbols:check-rounded" })) : (jsxRuntime.jsx("span", { children: stepIdx + 1 })) }) }) }) }), step.title && (jsxRuntime.jsx("div", { className: "max-w-full flex-1 text-start", children: jsxRuntime.jsx("div", { className: cn(
|
|
8433
8502
|
// `text-small`/`text-medium` son clases muertas de v2 →
|
|
8434
8503
|
// `text-sm`/`text-base` (mismo tamaño exacto, 14px/16px).
|
|
8435
8504
|
"text-sm text-default-600 lg:text-base font-medium transition-[color,opacity] duration-300 group-active:opacity-80", {
|
|
@@ -8438,7 +8507,7 @@ const RowSteps = $8WNJc$react.forwardRef(({ color = "primary", steps: stepsProp
|
|
|
8438
8507
|
}), children: step.title }) })), stepIdx < steps.length - 1 &&
|
|
8439
8508
|
!hideProgressBars && (jsxRuntime.jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute right-0 w-10 flex-none items-center", style: {
|
|
8440
8509
|
"--idx": stepIdx,
|
|
8441
|
-
}, children: jsxRuntime.jsx("div", { className:
|
|
8510
|
+
}, children: jsxRuntime.jsx("div", { className: cn("relative h-0.5 w-full bg-[var(--inactive-bar-color)] transition-colors duration-300", "after:absolute after:block after:h-full after:w-0 after:bg-[var(--active-border-color)] after:transition-[width] after:duration-300 after:content-['']", {
|
|
8442
8511
|
"after:w-full": stepIdx <
|
|
8443
8512
|
currentStep,
|
|
8444
8513
|
}) }) }))] }, stepIdx) }, stepIdx));
|
|
@@ -9343,9 +9412,9 @@ const SwitchFacade = ({ id, size = "md", color, children, onChange, onValueChang
|
|
|
9343
9412
|
// blockifica. `group/switch`: de aquí lee el thumb el `data-selected`.
|
|
9344
9413
|
className: hasBase
|
|
9345
9414
|
? "group/switch contents"
|
|
9346
|
-
:
|
|
9347
|
-
?
|
|
9348
|
-
: undefined, children: [jsxRuntime.jsx(react.Switch.Control, { className:
|
|
9415
|
+
: cn("group/switch inline-flex flex-row items-center", className), style: colorStyle, onChange: handleChange, children: jsxRuntime.jsxs(react.Switch.Content, { className: hasBase
|
|
9416
|
+
? cn("data-[disabled=true]:opacity-(--disabled-opacity)", classNames?.base, className)
|
|
9417
|
+
: undefined, children: [jsxRuntime.jsx(react.Switch.Control, { className: cn(sizeClasses.control, classNames?.wrapper), children: jsxRuntime.jsx(react.Switch.Thumb, { className: cn(sizeClasses.thumb, THUMB_ON_CLASS, classNames?.thumb) }) }), classNames?.label && children != null ? (jsxRuntime.jsx("span", { "data-slot": "label", className: classNames.label, children: children })) : (children)] }) }));
|
|
9349
9418
|
};
|
|
9350
9419
|
SwitchFacade.displayName = "Aurora.Switch";
|
|
9351
9420
|
/**
|
|
@@ -9515,7 +9584,7 @@ shouldForceLeadingZeros = true, startContent, endContent, ...props }) {
|
|
|
9515
9584
|
// `cn` (tailwind-merge) y no una concatenación: el consumidor tiene que poder pisar la
|
|
9516
9585
|
// colocación y el ancho (`ScheduleRow` pasa `w-full`). Todas las clases de aquí son
|
|
9517
9586
|
// vocabulario v3 válido, así que tailwind-merge las resuelve bien.
|
|
9518
|
-
className:
|
|
9587
|
+
className: cn(ROOT_CLASS[labelPlacement], className), shouldForceLeadingZeros: shouldForceLeadingZeros, ...props, children: [label && (jsxRuntime.jsx(react.Label, { className: LABEL_CLASS_BY_PLACEMENT[labelPlacement], children: label })), jsxRuntime.jsxs(react.TimeField.Group, { className: cn(FIELD_BORDER_CLASS, GROUP_SIZE_CLASS, FIELD_FOCUS_CLASS$2), children: [startContent !== undefined && startContent !== null && (jsxRuntime.jsx(react.TimeField.Prefix, { className: CONTENT_SLOT_CLASS, children: startContent })), jsxRuntime.jsx(react.TimeField.Input, { className: INPUT_CLASS, children: (segment) => (jsxRuntime.jsx(react.TimeField.Segment, { segment: segment, className: segment.type === "dayPeriod"
|
|
9519
9588
|
? DAY_PERIOD_SEGMENT_CLASS
|
|
9520
9589
|
: undefined })) }), endContent !== undefined && endContent !== null && (jsxRuntime.jsx(react.TimeField.Suffix, { className: CONTENT_SLOT_CLASS, children: endContent }))] })] }));
|
|
9521
9590
|
}
|
|
@@ -10381,7 +10450,7 @@ labelPlacement: _labelPlacement, scrollShadowProps, items, isSearchable = false,
|
|
|
10381
10450
|
// Mismo criterio que el `group-data-[has-helper=true]` de v2: cuenta como "con ayuda" el campo
|
|
10382
10451
|
// que efectivamente PINTA una descripción o un mensaje de error, no el que solo recibe la prop.
|
|
10383
10452
|
const hasHelper = Boolean((description && !isInvalid) || (isInvalid && errorMessage));
|
|
10384
|
-
const triggerClassName =
|
|
10453
|
+
const triggerClassName = cn(SIZE_CLASS[size], radius === "full" ? PADDING_FULL_CLASS[size] : PADDING_CLASS[size], TRIGGER_ALIGN_CLASS, isMultiline ? MULTILINE_TRIGGER_CLASS : "", RADIUS_CLASS$4[radius], VARIANT_CLASS$1[variant],
|
|
10385
10454
|
// En v2 el estado inválido MANDABA también con el campo enfocado
|
|
10386
10455
|
// (`group-data-[focus=true]:!border-danger`), así que el borde de foco no se aplica cuando
|
|
10387
10456
|
// el campo está en error: se queda el `danger`.
|
|
@@ -10422,7 +10491,7 @@ labelPlacement: _labelPlacement, scrollShadowProps, items, isSearchable = false,
|
|
|
10422
10491
|
// (`cn(classNames.listboxWrapper, scrollShadowProps.className)`, `chunk-YFRCT47S.mjs:
|
|
10423
10492
|
// 321-331`), en ese orden.
|
|
10424
10493
|
className: classNames?.listboxWrapper || scrollShadowProps?.className
|
|
10425
|
-
?
|
|
10494
|
+
? cn(LISTBOX_SCROLL_CLASS, classNames?.listboxWrapper, scrollShadowProps?.className)
|
|
10426
10495
|
: undefined, style: scrollShadowProps?.style,
|
|
10427
10496
|
// El hueco que v2 llenaba con su `emptyContent` (ver el bloque de
|
|
10428
10497
|
// `DEFAULT_TRANSLATIONS`). `renderEmptyState` es la vía de v3: el `ListBox` de
|
|
@@ -10437,7 +10506,7 @@ labelPlacement: _labelPlacement, scrollShadowProps, items, isSearchable = false,
|
|
|
10437
10506
|
const ValuePart = usesAutocompleteShell
|
|
10438
10507
|
? react.Autocomplete.Value
|
|
10439
10508
|
: react.Select.Value;
|
|
10440
|
-
const triggerContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [startContent != null && startContent !== false && (jsxRuntime.jsx("span", { "data-slot": "start-content", className: START_CONTENT_CLASS, children: startContent })), jsxRuntime.jsx(ValuePart, { className:
|
|
10509
|
+
const triggerContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [startContent != null && startContent !== false && (jsxRuntime.jsx("span", { "data-slot": "start-content", className: START_CONTENT_CLASS, children: startContent })), jsxRuntime.jsx(ValuePart, { className: cn(SIZE_TEXT_CLASS$1[size], isMultiline
|
|
10441
10510
|
? MULTILINE_VALUE_ROOM_CLASS
|
|
10442
10511
|
: isClearable
|
|
10443
10512
|
? VALUE_ROOM_CLEARABLE_CLASS
|
|
@@ -10473,7 +10542,7 @@ labelPlacement: _labelPlacement, scrollShadowProps, items, isSearchable = false,
|
|
|
10473
10542
|
acaba a 17px del borde derecho en la referencia y a 13px con el valor de v3 — 4px
|
|
10474
10543
|
de más. */
|
|
10475
10544
|
jsxRuntime.jsx(react.Select.Indicator, { className: "end-3" }))] }));
|
|
10476
|
-
const inner = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsx(react.Label, { className:
|
|
10545
|
+
const inner = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsx(react.Label, { className: cn(LABEL_CLASS$1, hasHelper
|
|
10477
10546
|
? LABEL_OFFSET_HELPER_CLASS[size]
|
|
10478
10547
|
: LABEL_OFFSET_CLASS[size], isInvalid ? INVALID_LABEL_CLASS$1 : "", classNames?.label), children: label })), usesAutocompleteShell ? (jsxRuntime.jsx(react.Autocomplete.Trigger, { className: triggerClassName, children: triggerContent })) : (jsxRuntime.jsx(react.Select.Trigger, { className: triggerClassName, children: triggerContent })), description && !isInvalid && (jsxRuntime.jsx(react.Description, { className: `${HELPER_CLASS$1} text-left`, children: description })), usesAutocompleteShell ? (jsxRuntime.jsx(react.Autocomplete.Popover, { className: classNames?.popoverContent, children: isSearchable ? (jsxRuntime.jsxs(react.Autocomplete.Filter, { filter: contains, inputValue: searchText, onInputChange: setSearchText, children: [jsxRuntime.jsx(react.SearchField, { autoFocus: true, "aria-label": resolvedSearchPlaceholder, fullWidth: true, children: jsxRuntime.jsxs(react.SearchField.Group, { className: SEARCH_GROUP_CLASS, children: [jsxRuntime.jsx(react.SearchField.SearchIcon, {}), jsxRuntime.jsx(react.SearchField.Input, { placeholder: resolvedSearchPlaceholder })] }) }), listBox] })) : (listBox) })) : (jsxRuntime.jsx(react.Select.Popover, { className: classNames?.popoverContent, children: listBox })), isInvalid && errorMessage && (jsxRuntime.jsx(react.FieldError, { className: `${HELPER_CLASS$1} text-left`, children: errorMessage }))] }));
|
|
10479
10548
|
const commonProps = {
|
|
@@ -10518,7 +10587,7 @@ labelPlacement: _labelPlacement, scrollShadowProps, items, isSearchable = false,
|
|
|
10518
10587
|
// v2 fusionaba: `useSelect` metía el `className` en `slots.base({ class: baseStyles })`
|
|
10519
10588
|
// (`@heroui/select@2.4.22`, `dist/chunk-ONGPOZUT.mjs:171,202`) y el `tv` de v2 lleva
|
|
10520
10589
|
// `twMerge: true` por defecto (`@heroui/theme@2.4.15`, `dist/utils/tv.js:56`).
|
|
10521
|
-
className:
|
|
10590
|
+
className: cn(FIELD_STACK_CLASS$1[size],
|
|
10522
10591
|
// `w-full` y `min-w-40` son las dos ramas EXCLUYENTES de `fullWidth` en el `tv` de v2
|
|
10523
10592
|
// (ver `ROOT_MIN_WIDTH_CLASS`).
|
|
10524
10593
|
fullWidth ? "w-full" : ROOT_MIN_WIDTH_CLASS,
|
|
@@ -10836,7 +10905,7 @@ const CheckboxFacade = ({ children, onChange, onValueChange, color = "primary",
|
|
|
10836
10905
|
onValueChange?.(isSelected);
|
|
10837
10906
|
};
|
|
10838
10907
|
if (hasCompoundChildren$1(children)) {
|
|
10839
|
-
return (jsxRuntime.jsx(react.Checkbox, { ...rest, isInvalid: isInvalid, onChange: handleChange, className:
|
|
10908
|
+
return (jsxRuntime.jsx(react.Checkbox, { ...rest, isInvalid: isInvalid, onChange: handleChange, className: cn(classNames?.base, className), children: children }));
|
|
10840
10909
|
}
|
|
10841
10910
|
const indicatorContent = typeof icon === "function"
|
|
10842
10911
|
? (state) => icon({
|
|
@@ -10852,13 +10921,13 @@ const CheckboxFacade = ({ children, onChange, onValueChange, color = "primary",
|
|
|
10852
10921
|
// (`.checkbox`) usa `flex flex-col items-start` para apilar `Description`/`FieldError`,
|
|
10853
10922
|
// slots que esta fachada no renderiza; en **inline** la caja participa de la línea de
|
|
10854
10923
|
// texto, donde la esperan los consumidores (mismo criterio que la fachada `Switch`).
|
|
10855
|
-
className:
|
|
10924
|
+
className: cn("group/checkbox relative -m-2 inline-flex max-w-fit flex-row items-center p-2", classNames?.base, className), children: jsxRuntime.jsxs(react.Checkbox.Content, { className: "group/content gap-2 font-normal", children: [jsxRuntime.jsx(react.Checkbox.Control, { className: cn(CONTROL_BASE, CONTROL_SIZE[size], RADIUS_CLASS$3[radius ?? RADIUS_BY_SIZE[size]], CONTROL_COLOR[color],
|
|
10856
10925
|
// v2 `isInvalid`: `before:border-danger` (el borde vivía en el pseudo).
|
|
10857
|
-
isInvalid && "border-danger", disableAnimation && "transition-none before:transition-none", classNames?.wrapper), children: jsxRuntime.jsx(react.Checkbox.Indicator, { className:
|
|
10926
|
+
isInvalid && "border-danger", disableAnimation && "transition-none before:transition-none", classNames?.wrapper), children: jsxRuntime.jsx(react.Checkbox.Indicator, { className: cn(INDICATOR_SIZE[size], INDICATOR_COLOR[color], disableAnimation && "[&_svg]:transition-none", classNames?.icon), children: indicatorContent }) }), hasLabel && (
|
|
10858
10927
|
// Slot `label` de v2: `relative text-foreground select-none` + tamaño de texto.
|
|
10859
10928
|
// `data-slot="label"` para que las reglas de cursor/selección de `.checkbox` de v3
|
|
10860
10929
|
// le alcancen igual que a un `<Label>`.
|
|
10861
|
-
jsxRuntime.jsx("span", { "data-slot": "label", className:
|
|
10930
|
+
jsxRuntime.jsx("span", { "data-slot": "label", className: cn("relative select-none text-foreground", LABEL_SIZE[size], lineThrough && LINE_THROUGH, isInvalid && "text-danger", classNames?.label), children: children }))] }) }));
|
|
10862
10931
|
};
|
|
10863
10932
|
CheckboxFacade.displayName = "Aurora.Checkbox";
|
|
10864
10933
|
/**
|
|
@@ -11005,9 +11074,9 @@ function withSortIndicator(node) {
|
|
|
11005
11074
|
/** Compone una clase sobre un `className` de react-aria, que puede ser string o render prop. */
|
|
11006
11075
|
function withClass(className, extra) {
|
|
11007
11076
|
if (typeof className === "function") {
|
|
11008
|
-
return (renderProps) =>
|
|
11077
|
+
return (renderProps) => cn(className(renderProps), extra);
|
|
11009
11078
|
}
|
|
11010
|
-
return
|
|
11079
|
+
return cn(className, extra);
|
|
11011
11080
|
}
|
|
11012
11081
|
/**
|
|
11013
11082
|
* `Table.Header`: indicador de orden en cada columna ordenable, clase sticky si se pidió y la
|
|
@@ -11154,7 +11223,7 @@ function TableContent({ children, isHeaderSticky, showSelectionCheckboxes, ...pr
|
|
|
11154
11223
|
});
|
|
11155
11224
|
// Esparcido y no `{content}`: ver `spread` (un array como hijo único exigiría claves).
|
|
11156
11225
|
// La clase del estado vacío va delante: la de la app, detrás, gana si pisa el mismo grupo.
|
|
11157
|
-
return $8WNJc$react.createElement(react.Table.Content, { ...props, className:
|
|
11226
|
+
return $8WNJc$react.createElement(react.Table.Content, { ...props, className: cn(EMPTY_STATE_CLASS, props.className) }, ...spread(content));
|
|
11158
11227
|
}
|
|
11159
11228
|
TableContent.displayName = "Aurora.Table.Content";
|
|
11160
11229
|
|
|
@@ -11836,7 +11905,7 @@ fullWidth = true, value, defaultValue, onChange, onValueChange, className, class
|
|
|
11836
11905
|
onChange?.(event);
|
|
11837
11906
|
onValueChange?.(event.target.value);
|
|
11838
11907
|
};
|
|
11839
|
-
const field = (jsxRuntime.jsx(react.TextArea, { ...rest, ref: setRefs, rows: fieldRows, style: fieldStyle, placeholder: placeholder, onChange: handleChange, onKeyDown: handleKeyDown, className:
|
|
11908
|
+
const field = (jsxRuntime.jsx(react.TextArea, { ...rest, ref: setRefs, rows: fieldRows, style: fieldStyle, placeholder: placeholder, onChange: handleChange, onKeyDown: handleKeyDown, className: cn(SIZE_TEXT_CLASS[size], RESIZE_CLASS, RADIUS_CLASS$2[radius], VARIANT_CLASS[variant], isInvalid ? INVALID_TEXT_CLASS : "", FIELD_FOCUS_CLASS, FIELD_SHADOW_CLASS,
|
|
11840
11909
|
// Incondicional, como el slot `input` de v2: el campo llena siempre su raíz,
|
|
11841
11910
|
// y es la raíz la que responde a `fullWidth` y al ancho del consumidor.
|
|
11842
11911
|
"w-full", isClearable ? CLEARABLE_FIELD_CLASS : "", classNames?.input ?? classNames?.inputWrapper) }));
|
|
@@ -11856,10 +11925,10 @@ fullWidth = true, value, defaultValue, onChange, onValueChange, className, class
|
|
|
11856
11925
|
// es suyo (`useFormReset` devuelve el estado al `defaultValue`; el autosize lo escucha).
|
|
11857
11926
|
jsxRuntime.jsxs(react.TextField, { id: textareaId, value: ownsValue ? ownValue : value, defaultValue: ownsValue ? undefined : defaultValue,
|
|
11858
11927
|
// Solo cuando la fachada es dueña del valor (limpiable y no controlado).
|
|
11859
|
-
onChange: ownsValue ? setOwnValue : undefined, name: name, isInvalid: isInvalid, isRequired: isRequired, isDisabled: isDisabled, isReadOnly: isReadOnly, className:
|
|
11928
|
+
onChange: ownsValue ? setOwnValue : undefined, name: name, isInvalid: isInvalid, isRequired: isRequired, isDisabled: isDisabled, isReadOnly: isReadOnly, className: cn(FIELD_STACK_CLASS, fullWidth ? "w-full" : "",
|
|
11860
11929
|
// El `className` del consumidor, en la raíz y en último lugar: el slot `base` de
|
|
11861
11930
|
// v2 y la posición que le deja ganar en tailwind-merge (ver bloque de arriba).
|
|
11862
|
-
className), children: [label && (jsxRuntime.jsx(react.Label, { className:
|
|
11931
|
+
className), children: [label && (jsxRuntime.jsx(react.Label, { className: cn(LABEL_CLASS, isInvalid ? INVALID_LABEL_CLASS : "", classNames?.label), children: label })), isClearable ? (jsxRuntime.jsxs("div", { className: CLEAR_WRAPPER_CLASS, children: [field, showClear && (jsxRuntime.jsx(react.CloseButton, { "aria-label": "Limpiar", className: cn(CLEAR_BUTTON_CLASS, classNames?.clearButton), onPress: handleClear }))] })) : (field), description && !isInvalid && (jsxRuntime.jsx(react.Description, { className: cn(HELPER_CLASS, "text-left", classNames?.description), children: description })), isInvalid && errorMessage && (jsxRuntime.jsx(react.FieldError, { className: cn(HELPER_CLASS, "text-left", classNames?.errorMessage), children: errorMessage }))] }));
|
|
11863
11932
|
});
|
|
11864
11933
|
Textarea.displayName = "Textarea";
|
|
11865
11934
|
|
|
@@ -12009,7 +12078,7 @@ function GlobalToast({ translations = {} } = {}) {
|
|
|
12009
12078
|
const slots = react.toastVariants({ placement: "top end", variant });
|
|
12010
12079
|
const isSecondary = color === "secondary";
|
|
12011
12080
|
const StatusIcon = ICON_BY_VARIANT[variant];
|
|
12012
|
-
return (jsxRuntime.jsx("div", { className: "fixed top-4 right-4 z-[2000] w-full max-w-sm", children: jsxRuntime.jsxs("div", { className:
|
|
12081
|
+
return (jsxRuntime.jsx("div", { className: "fixed top-4 right-4 z-[2000] w-full max-w-sm", children: jsxRuntime.jsxs("div", { className: cn(slots.toast(), "gap-x-0 rounded-[12px]", SURFACE_BY_COLOR[color]), "data-frontmost": "true", style: { position: "relative" }, children: [jsxRuntime.jsx("div", { className: cn(slots.indicator(), INDICATOR_BASE, ICON_BY_COLOR[color]), children: jsxRuntime.jsx(StatusIcon, {}) }), jsxRuntime.jsxs("div", { className: cn(slots.content(), "ms-2 box-border min-h-10 justify-center"), children: [jsxRuntime.jsx("div", { className: slots.title(), style: isSecondary ? { color: "var(--color-secondary-600)" } : undefined, children: toast.title }), toast.description && (jsxRuntime.jsx("div", { className: slots.description(), children: toast.description }))] }), jsxRuntime.jsx(react.CloseButton, { "aria-label": t.closeButtonAriaLabel, className: cn("shrink-0 self-center bg-transparent", CLOSE_BY_COLOR[color]), onPress: hideToast })] }) }));
|
|
12013
12082
|
}
|
|
12014
12083
|
|
|
12015
12084
|
/**
|
|
@@ -13616,111 +13685,6 @@ const DrawerFiltersHeader = ({ titleId, title, description, }) => {
|
|
|
13616
13685
|
return (jsxRuntime.jsxs("div", { className: "px-6 pt-10", children: [jsxRuntime.jsx(H2, { id: titleId, className: "text-xl font-semibold text-foreground mb-2", children: title }), jsxRuntime.jsx(P, { className: "text-default-500", children: description })] }));
|
|
13617
13686
|
};
|
|
13618
13687
|
|
|
13619
|
-
const NO_YEAR_CLASS = "[&_[data-type='year']]:hidden [&_[data-type='literal']:has(+[data-type='year'])]:hidden";
|
|
13620
|
-
// Year used to construct CalendarDate values. React Aria's onChange only fires when
|
|
13621
|
-
// ALL segments (including hidden year) are user-confirmed. Since users can't type year
|
|
13622
|
-
// (it's CSS-hidden), we read month+day directly from the DOM via data-placeholder
|
|
13623
|
-
// attributes when the picker loses focus, bypassing the year-confirmation requirement.
|
|
13624
|
-
const FILLER_YEAR = new Date().getFullYear();
|
|
13625
|
-
/**
|
|
13626
|
-
* Reads month and day from segment DOM elements.
|
|
13627
|
-
* Returns null if any segment is still in placeholder state (user hasn't typed it yet).
|
|
13628
|
-
* React Aria marks unconfirmed segments with data-placeholder="true".
|
|
13629
|
-
*/
|
|
13630
|
-
function readConfirmedMonthDay(container, monthSelector = '[data-type="month"]', daySelector = '[data-type="day"]') {
|
|
13631
|
-
const monthEl = container.querySelector(monthSelector);
|
|
13632
|
-
const dayEl = container.querySelector(daySelector);
|
|
13633
|
-
if (!monthEl || !dayEl)
|
|
13634
|
-
return null;
|
|
13635
|
-
if (monthEl.getAttribute("data-placeholder") === "true")
|
|
13636
|
-
return null;
|
|
13637
|
-
if (dayEl.getAttribute("data-placeholder") === "true")
|
|
13638
|
-
return null;
|
|
13639
|
-
const month = Number(monthEl.getAttribute("aria-valuenow"));
|
|
13640
|
-
const day = Number(dayEl.getAttribute("aria-valuenow"));
|
|
13641
|
-
if (month >= 1 && month <= 12 && day >= 1 && day <= 31)
|
|
13642
|
-
return { month, day };
|
|
13643
|
-
return null;
|
|
13644
|
-
}
|
|
13645
|
-
const DayMonthPicker = ({ value, onChange, translations, ariaLabelledBy, }) => {
|
|
13646
|
-
const t = {
|
|
13647
|
-
dayMonthAriaLabel: "Seleccionar mes y día",
|
|
13648
|
-
dayMonthRangeAriaLabel: "Seleccionar rango de mes y día",
|
|
13649
|
-
dayMonthSingleOption: "Día específico",
|
|
13650
|
-
dayMonthRangeOption: "Rango de fechas",
|
|
13651
|
-
...translations,
|
|
13652
|
-
};
|
|
13653
|
-
const [mode, setMode] = $8WNJc$react.useState(value?.type === "dayMonthRange" ? "range" : "single");
|
|
13654
|
-
$8WNJc$react.useEffect(() => {
|
|
13655
|
-
setMode(value?.type === "dayMonthRange" ? "range" : "single");
|
|
13656
|
-
}, [value?.type]);
|
|
13657
|
-
const pickerValue = value?.type === "dayMonth" ? value.dayMonth : null;
|
|
13658
|
-
const rangeValue = value?.type === "dayMonthRange" ? value.dayMonthRange : null;
|
|
13659
|
-
// Refs to DOM wrappers — used by the DOM-reading fallback for manual input.
|
|
13660
|
-
const singleRef = $8WNJc$react.useRef(null);
|
|
13661
|
-
const rangeRef = $8WNJc$react.useRef(null);
|
|
13662
|
-
// Stable refs so focus-change callbacks always read current values without
|
|
13663
|
-
// needing to be recreated on every render.
|
|
13664
|
-
const pickerValueRef = $8WNJc$react.useRef(pickerValue);
|
|
13665
|
-
pickerValueRef.current = pickerValue;
|
|
13666
|
-
const rangeValueRef = $8WNJc$react.useRef(rangeValue);
|
|
13667
|
-
rangeValueRef.current = rangeValue;
|
|
13668
|
-
const handleModeChange = (newMode) => {
|
|
13669
|
-
const nextMode = newMode === "range" ? "range" : "single";
|
|
13670
|
-
setMode(nextMode);
|
|
13671
|
-
if (nextMode === "single") {
|
|
13672
|
-
onChange({ type: "dayMonth", dayMonth: null, dayMonthRange: null });
|
|
13673
|
-
return;
|
|
13674
|
-
}
|
|
13675
|
-
onChange({ type: "dayMonthRange", dayMonth: null, dayMonthRange: null });
|
|
13676
|
-
};
|
|
13677
|
-
const handleSingleChange = (date) => {
|
|
13678
|
-
onChange({ type: "dayMonth", dayMonth: date, dayMonthRange: null });
|
|
13679
|
-
};
|
|
13680
|
-
const handleRangeChange = (range) => {
|
|
13681
|
-
onChange({ type: "dayMonthRange", dayMonth: null, dayMonthRange: range });
|
|
13682
|
-
};
|
|
13683
|
-
// Called by React Aria when the DatePicker gains/loses focus.
|
|
13684
|
-
// When value=null (placeholder mode) React Aria never fires onChange because the
|
|
13685
|
-
// hidden year segment is never user-confirmed. On blur we read the confirmed
|
|
13686
|
-
// month/day directly from the DOM as a workaround.
|
|
13687
|
-
const handleSingleFocusChange = (isFocused) => {
|
|
13688
|
-
if (isFocused || pickerValueRef.current)
|
|
13689
|
-
return;
|
|
13690
|
-
if (!singleRef.current)
|
|
13691
|
-
return;
|
|
13692
|
-
const result = readConfirmedMonthDay(singleRef.current);
|
|
13693
|
-
if (result) {
|
|
13694
|
-
handleSingleChange(new $2aaf608024c21ca1$export$99faa760c7908e4f(FILLER_YEAR, result.month, result.day));
|
|
13695
|
-
}
|
|
13696
|
-
};
|
|
13697
|
-
const handleRangeFocusChange = (isFocused) => {
|
|
13698
|
-
if (isFocused || rangeValueRef.current)
|
|
13699
|
-
return;
|
|
13700
|
-
if (!rangeRef.current)
|
|
13701
|
-
return;
|
|
13702
|
-
const monthEls = rangeRef.current.querySelectorAll('[data-type="month"]');
|
|
13703
|
-
const dayEls = rangeRef.current.querySelectorAll('[data-type="day"]');
|
|
13704
|
-
if (monthEls.length < 2 || dayEls.length < 2)
|
|
13705
|
-
return;
|
|
13706
|
-
const allConfirmed = [...monthEls, ...dayEls].every((el) => el.getAttribute("data-placeholder") !== "true");
|
|
13707
|
-
if (!allConfirmed)
|
|
13708
|
-
return;
|
|
13709
|
-
const startMonth = Number(monthEls[0].getAttribute("aria-valuenow"));
|
|
13710
|
-
const startDay = Number(dayEls[0].getAttribute("aria-valuenow"));
|
|
13711
|
-
const endMonth = Number(monthEls[1].getAttribute("aria-valuenow"));
|
|
13712
|
-
const endDay = Number(dayEls[1].getAttribute("aria-valuenow"));
|
|
13713
|
-
const valid = (m, d) => m >= 1 && m <= 12 && d >= 1 && d <= 31;
|
|
13714
|
-
if (valid(startMonth, startDay) && valid(endMonth, endDay)) {
|
|
13715
|
-
handleRangeChange({
|
|
13716
|
-
start: new $2aaf608024c21ca1$export$99faa760c7908e4f(FILLER_YEAR, startMonth, startDay),
|
|
13717
|
-
end: new $2aaf608024c21ca1$export$99faa760c7908e4f(FILLER_YEAR, endMonth, endDay),
|
|
13718
|
-
});
|
|
13719
|
-
}
|
|
13720
|
-
};
|
|
13721
|
-
return (jsxRuntime.jsxs("div", { className: "w-full flex flex-wrap xs:gap-5 justify-between items-center", children: [jsxRuntime.jsxs(react.RadioGroup, { orientation: "horizontal", value: mode, onChange: handleModeChange, "aria-labelledby": ariaLabelledBy, children: [jsxRuntime.jsx(react.Radio, { value: "single", children: jsxRuntime.jsxs(react.Radio.Content, { children: [jsxRuntime.jsx(react.Radio.Control, { children: jsxRuntime.jsx(react.Radio.Indicator, {}) }), t.dayMonthSingleOption] }) }), jsxRuntime.jsx(react.Radio, { value: "range", children: jsxRuntime.jsxs(react.Radio.Content, { children: [jsxRuntime.jsx(react.Radio.Control, { children: jsxRuntime.jsx(react.Radio.Indicator, {}) }), t.dayMonthRangeOption] }) })] }), mode === "single" ? (jsxRuntime.jsx("div", { ref: singleRef, children: jsxRuntime.jsx(DatePicker, { value: pickerValue, onChange: handleSingleChange, onFocusChange: handleSingleFocusChange, "aria-label": t.dayMonthAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), className: `w-full md:w-auto md:max-w-40 ${NO_YEAR_CLASS}` }, "dmp") })) : (jsxRuntime.jsx("div", { ref: rangeRef, children: jsxRuntime.jsx(DateRangePicker, { value: rangeValue, onChange: handleRangeChange, onFocusChange: handleRangeFocusChange, "aria-label": t.dayMonthRangeAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), className: `w-full md:w-auto md:max-w-xs ${NO_YEAR_CLASS}` }, "dmpr") }))] }));
|
|
13722
|
-
};
|
|
13723
|
-
|
|
13724
13688
|
/**
|
|
13725
13689
|
* Las cuatro props de slider que v2 tenía y v3 eliminó, traducidas a clases. Los valores son los
|
|
13726
13690
|
* LITERALES del `tv` de v2 (`npm pack @heroui/theme@2.4.15` → `dist/components/slider.js`), no
|
|
@@ -13858,6 +13822,111 @@ const RangeFilter = ({ title, description, value, onChange, minValue, maxValue,
|
|
|
13858
13822
|
(restSliderProps["aria-labelledby"] ? undefined : t.title), ...restSliderProps, children: jsxRuntime.jsxs(react.Slider.Track, { children: [jsxRuntime.jsx(react.Slider.Fill, { className: fillClassName }), stepMarks.length > 0 ? (jsxRuntime.jsx(react.Slider.Marks, { children: stepMarks.map((left) => (jsxRuntime.jsx("span", { className: SLIDER_STEP_CLASS, style: { left: `${left}%` } }, left))) })) : null, jsxRuntime.jsx(react.Slider.Thumb, { index: 0, "aria-label": t.minLabel, className: thumbClassName }), jsxRuntime.jsx(react.Slider.Thumb, { index: 1, "aria-label": t.maxLabel, className: thumbClassName })] }) }) }), jsxRuntime.jsxs("div", { className: "flex justify-between items-center text-sm", children: [jsxRuntime.jsxs("div", { className: "flex flex-col items-start", children: [jsxRuntime.jsx("span", { className: "text-xs text-default-500", children: t.minLabel }), jsxRuntime.jsx("span", { className: "font-medium text-default-700", children: formatValue(currentValue[0]) })] }), jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [jsxRuntime.jsx("span", { className: "text-xs text-default-500", children: t.maxLabel }), jsxRuntime.jsx("span", { className: "font-medium text-default-700", children: formatValue(currentValue[1]) })] })] })] }));
|
|
13859
13823
|
};
|
|
13860
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] = $8WNJc$react.useState(value?.type === "dayMonthRange" ? "range" : "single");
|
|
13860
|
+
$8WNJc$react.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 = $8WNJc$react.useRef(null);
|
|
13867
|
+
const rangeRef = $8WNJc$react.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 = $8WNJc$react.useRef(pickerValue);
|
|
13871
|
+
pickerValueRef.current = pickerValue;
|
|
13872
|
+
const rangeValueRef = $8WNJc$react.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 (jsxRuntime.jsxs("div", { className: "w-full flex flex-wrap xs:gap-5 justify-between items-center", children: [jsxRuntime.jsxs(react.RadioGroup, { orientation: "horizontal", value: mode, onChange: handleModeChange, "aria-labelledby": ariaLabelledBy, children: [jsxRuntime.jsx(react.Radio, { value: "single", children: jsxRuntime.jsxs(react.Radio.Content, { children: [jsxRuntime.jsx(react.Radio.Control, { children: jsxRuntime.jsx(react.Radio.Indicator, {}) }), t.dayMonthSingleOption] }) }), jsxRuntime.jsx(react.Radio, { value: "range", children: jsxRuntime.jsxs(react.Radio.Content, { children: [jsxRuntime.jsx(react.Radio.Control, { children: jsxRuntime.jsx(react.Radio.Indicator, {}) }), t.dayMonthRangeOption] }) })] }), mode === "single" ? (jsxRuntime.jsx("div", { ref: singleRef, children: jsxRuntime.jsx(DatePicker, { value: pickerValue, onChange: handleSingleChange, onFocusChange: handleSingleFocusChange, "aria-label": t.dayMonthAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), className: `w-full md:w-auto md:max-w-40 ${NO_YEAR_CLASS}` }, "dmp") })) : (jsxRuntime.jsx("div", { ref: rangeRef, children: jsxRuntime.jsx(DateRangePicker, { value: rangeValue, onChange: handleRangeChange, onFocusChange: handleRangeFocusChange, "aria-label": t.dayMonthRangeAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), className: `w-full md:w-auto md:max-w-xs ${NO_YEAR_CLASS}` }, "dmpr") }))] }));
|
|
13928
|
+
};
|
|
13929
|
+
|
|
13861
13930
|
/**
|
|
13862
13931
|
* Opciones visibles en el panel del multiselect mientras se escribe en su
|
|
13863
13932
|
* buscador.
|
|
@@ -14012,12 +14081,12 @@ const FilterSection = ({ filter, translations, value, onChange, isExpanded = fal
|
|
|
14012
14081
|
return null;
|
|
14013
14082
|
}
|
|
14014
14083
|
};
|
|
14015
|
-
return (jsxRuntime.jsxs("div", { className:
|
|
14084
|
+
return (jsxRuntime.jsxs("div", { className: cn("bg-white rounded-xl max-w-sm", isDisabled && "opacity-50"), style: {
|
|
14016
14085
|
border: "0 solid #e5e7eb",
|
|
14017
14086
|
boxShadow: "var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)",
|
|
14018
14087
|
"--tw-shadow": "var(--aurora-shadow-medium)",
|
|
14019
14088
|
"--tw-shadow-colored": "var(--aurora-shadow-medium)",
|
|
14020
|
-
}, children: [jsxRuntime.jsxs("button", { type: "button", className:
|
|
14089
|
+
}, children: [jsxRuntime.jsxs("button", { type: "button", className: cn("flex items-center justify-between w-full text-left p-4", isDisabled && "cursor-not-allowed"), onClick: handleToggleExpanded, children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx(H2, { id: titleId, className: "text-base font-normal text-foreground", children: filter.title }), !isDisabled && hasActiveFilter() && (jsxRuntime.jsx("span", { className: "text-xs px-2 py-1 rounded-full text-black dark:text-white", style: {
|
|
14021
14090
|
backgroundColor: "var(--color-default)",
|
|
14022
14091
|
}, children: getActiveFilterCount() }))] }), jsxRuntime.jsx(IconComponent, { icon: internalExpanded
|
|
14023
14092
|
? "solar:alt-arrow-down-outline"
|
|
@@ -14138,7 +14207,7 @@ const MultiSelectFilter = ({ filter, value, onChange, translations, titleId }) =
|
|
|
14138
14207
|
maxWidth: Math.max(triggerWidthPx, 220),
|
|
14139
14208
|
}
|
|
14140
14209
|
: undefined;
|
|
14141
|
-
return (jsxRuntime.jsxs(react.Popover, { isOpen: isOpen, onOpenChange: handleOpenChange, children: [jsxRuntime.jsx(react.PopoverTrigger, { "aria-labelledby": titleId, "aria-describedby": valueId, children: jsxRuntime.jsxs("button", { ref: triggerRef, type: "button", "aria-labelledby": titleId, "aria-describedby": valueId, className:
|
|
14210
|
+
return (jsxRuntime.jsxs(react.Popover, { isOpen: isOpen, onOpenChange: handleOpenChange, children: [jsxRuntime.jsx(react.PopoverTrigger, { "aria-labelledby": titleId, "aria-describedby": valueId, children: jsxRuntime.jsxs("button", { ref: triggerRef, type: "button", "aria-labelledby": titleId, "aria-describedby": valueId, className: cn(
|
|
14142
14211
|
// TECH-2459 · `bg-transparent` y no `bg-background`: este disparador tiene pinta de campo y vive
|
|
14143
14212
|
// DENTRO de un drawer, o sea el escenario del relleno negro sobre tarjeta gris. En oscuro
|
|
14144
14213
|
// `--color-background` es negro puro, y el `bordered` de v2 no llevaba ninguna clase `bg-*`.
|
|
@@ -14427,7 +14496,7 @@ const DrawerFilters = ({ isOpen, onOpenChange, config, onApplyFilters, onClearFi
|
|
|
14427
14496
|
// beweossmbs con la .140). `Drawer.Backdrop` (`ModalOverlay`) ya crea su propio estado de
|
|
14428
14497
|
// overlay con `isOpen`/`onOpenChange` y calcula todos los slots de `drawerVariants()`, así que
|
|
14429
14498
|
// el root no aportaba nada.
|
|
14430
|
-
return (jsxRuntime.jsx(react.Drawer.Backdrop, { isOpen: isOpen, onOpenChange: handleOpenChange, isDismissable: false, children: jsxRuntime.jsx(react.Drawer.Content, { placement: "right", className:
|
|
14499
|
+
return (jsxRuntime.jsx(react.Drawer.Backdrop, { isOpen: isOpen, onOpenChange: handleOpenChange, isDismissable: false, children: jsxRuntime.jsx(react.Drawer.Content, { placement: "right", className: cn("drawer-filters", className), children: jsxRuntime.jsxs(react.Drawer.Dialog, { "aria-labelledby": titleId, className: "w-full p-0 sm:max-w-md", children: [jsxRuntime.jsx(react.Drawer.CloseTrigger, {}), jsxRuntime.jsx(DrawerFiltersHeader, { titleId: titleId, title: config.title, description: config.description }), jsxRuntime.jsx(react.Drawer.Body, { className: "px-6 py-10", children: jsxRuntime.jsx("div", { className: "space-y-3", children: config.data.map((filter) => {
|
|
14431
14500
|
return (jsxRuntime.jsx(FilterSection, { filter: filter, translations: translations, value: filterValues[filter.key], onChange: (value) => handleFilterChange(filter.key, value) }, filter.key));
|
|
14432
14501
|
}) }) }), jsxRuntime.jsx(DrawerFiltersFooter, { onClearFilters: handleClearFilters, onCancel: handleCancel, onApplyFilters: handleApplyFilters, translations: translations })] }) }) }));
|
|
14433
14502
|
};
|
|
@@ -16263,7 +16332,7 @@ const splitDialogDOMProps = (rest) => {
|
|
|
16263
16332
|
* foco vuelve al disparador al cerrar y la página no hace scroll por detrás — los cuatro los
|
|
16264
16333
|
* gestiona react-aria-components internamente (`ModalOverlay`/`Dialog`), sin código propio.
|
|
16265
16334
|
*/
|
|
16266
|
-
const Modal = ({ isOpen, defaultOpen, onOpenChange, onClose, size = "md", radius = "lg", backdrop = "opaque", scrollBehavior = "normal", placement, isDismissable = true, isKeyboardDismissDisabled = false, hideCloseButton = false, className, classNames, children, ...rest }) => {
|
|
16335
|
+
const Modal = ({ isOpen, defaultOpen, onOpenChange, onClose, size = "md", radius = "lg", backdrop = "opaque", scrollBehavior = "normal", placement, isDismissable = true, isKeyboardDismissDisabled = false, hideCloseButton = false, portalContainer, className, classNames, children, ...rest }) => {
|
|
16267
16336
|
// v2 aceptaba `onClose` además de `onOpenChange` y lo llamaba en cada cierre; v3 solo conoce
|
|
16268
16337
|
// `onOpenChange`. Sin este puente, un modal controlado con `isOpen` + `onClose` (el patrón
|
|
16269
16338
|
// v2 dominante en las apps: ~118 usos en beweossmbs frente a 8 de `onOpenChange`) no se
|
|
@@ -16317,6 +16386,14 @@ const Modal = ({ isOpen, defaultOpen, onOpenChange, onClose, size = "md", radius
|
|
|
16317
16386
|
// slots de `modalVariants()` aunque no haya root encima; el root solo aportaba ese aviso y un
|
|
16318
16387
|
// `aria-labelledby` de reserva que apuntaba al id de un disparador que no existe.
|
|
16319
16388
|
return (jsxRuntime.jsx(react.Modal.Backdrop, { isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: handleOpenChange, variant: backdrop, isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled,
|
|
16389
|
+
// `portalContainer` de v2 (`@heroui/modal@2.2.29`, `chunk-TW2E3XVA.mjs`: `<Overlay
|
|
16390
|
+
// portalContainer>`). `Modal.Backdrop` reparte sus props sobre el `ModalOverlay` de
|
|
16391
|
+
// react-aria-components, que lo recibe como `UNSTABLE_portalContainer` y lo entrega al
|
|
16392
|
+
// `Overlay` de react-aria (`createPortal`, `document.body` por defecto). Está
|
|
16393
|
+
// `@deprecated` en favor de un `UNSAFE_PortalProvider` padre, pero ese movería TAMBIÉN
|
|
16394
|
+
// los overlays anidados, y v2 solo movía el modal; `undefined` deja el `<body>`. Se
|
|
16395
|
+
// desestructura arriba para que no caiga en `...rest` (que va al `role="dialog"`).
|
|
16396
|
+
UNSTABLE_portalContainer: portalContainer,
|
|
16320
16397
|
// v2 `classNames.backdrop` → la capa que oscurece la página. Utilidad en
|
|
16321
16398
|
// `@layer utilities`, gana a `.modal__backdrop--opaque` (`@layer components`).
|
|
16322
16399
|
className: classNames?.backdrop, children: jsxRuntime.jsx(react.Modal.Container, { size: SIZE_MAP[size], placement: placement, scroll: scrollBehavior === "inside" ? "inside" : undefined,
|
|
@@ -16328,7 +16405,7 @@ const Modal = ({ isOpen, defaultOpen, onOpenChange, onClose, size = "md", radius
|
|
|
16328
16405
|
// de react-aria no se pueden pisar por esta vía.
|
|
16329
16406
|
render: hasExtraAria
|
|
16330
16407
|
? (sectionProps) => jsxRuntime.jsx("section", { ...extraAria, ...sectionProps })
|
|
16331
|
-
: undefined, className:
|
|
16408
|
+
: undefined, className: cn(RADIUS_CLASS$1[radius], size !== "full" && MAX_WIDTH_CLASS[size], "px-6 py-9", classNames?.base, className, contentClassName), children: ({ close }) => (jsxRuntime.jsx(ModalDialogBody, { close: close, headerId: headerId, classNames: classNames, registerContentProps: registerContentProps, hideCloseButton: hideCloseButton, children: children })) }) }) }));
|
|
16332
16409
|
};
|
|
16333
16410
|
/** Aísla el `useMemo` del valor de contexto (el render-prop de `Dialog` no puede usar hooks). */
|
|
16334
16411
|
const ModalDialogBody = ({ close, headerId, classNames, registerContentProps, hideCloseButton, children, }) => {
|
|
@@ -16391,7 +16468,7 @@ const ModalHeader = ({ className, ...props }) => {
|
|
|
16391
16468
|
, {
|
|
16392
16469
|
// Nombra el diálogo (`aria-labelledby`, ver `Modal.tsx`). Va antes del spread: un `id`
|
|
16393
16470
|
// propio del consumidor gana, igual que en v2 (`id: headerId, ...otherProps`).
|
|
16394
|
-
id: headerId, ...props, className:
|
|
16471
|
+
id: headerId, ...props, className: cn("flex-row gap-0 px-6 py-4 text-lg font-semibold",
|
|
16395
16472
|
// v2 `classNames.header` del `<Modal>`; el `className` propio gana
|
|
16396
16473
|
// (`clsx(classNames.header, className)` en `@heroui/modal@2.2.19`).
|
|
16397
16474
|
classNames?.header, className) }));
|
|
@@ -16562,7 +16639,7 @@ const ModalBody = $8WNJc$react.forwardRef(({ className, ...props }, forwardedRef
|
|
|
16562
16639
|
return (jsxRuntime.jsx(react.ModalBody, { ref: callbackRef, ...props,
|
|
16563
16640
|
// v2 `classNames.body` del `<Modal>` entre la geometría y el `className` propio,
|
|
16564
16641
|
// que gana (`clsx(classNames.body, className)` en `@heroui/modal@2.2.19`).
|
|
16565
|
-
className:
|
|
16642
|
+
className: cn(BODY_V2_GEOMETRY$1, classNames?.body, className) }));
|
|
16566
16643
|
});
|
|
16567
16644
|
ModalBody.displayName = "ModalBody";
|
|
16568
16645
|
|
|
@@ -16584,7 +16661,7 @@ const ModalFooter = ({ className, ...props }) => {
|
|
|
16584
16661
|
return (jsxRuntime.jsx(react.ModalFooter, { ...props,
|
|
16585
16662
|
// v2 `classNames.footer` del `<Modal>` entre la fachada y el `className` propio, que
|
|
16586
16663
|
// gana (`clsx(classNames.footer, className)` en `@heroui/modal@2.2.19`).
|
|
16587
|
-
className:
|
|
16664
|
+
className: cn("mt-0 items-stretch px-6 py-4", classNames?.footer, className) }));
|
|
16588
16665
|
};
|
|
16589
16666
|
ModalFooter.displayName = "ModalFooter";
|
|
16590
16667
|
|
|
@@ -16648,8 +16725,8 @@ const sizeClass = (size, placement) => {
|
|
|
16648
16725
|
* no llegaban a ningún overlay, así que los drawers de las apps no montaban o no cerraban. Esta
|
|
16649
16726
|
* fachada arma la anatomía de v3 por dentro (`Drawer` → `Backdrop` → `Content` → `Dialog`) y
|
|
16650
16727
|
* conserva la API de v2 (`isOpen`/`defaultOpen`/`onOpenChange`/`onClose`/`placement`/`size`/
|
|
16651
|
-
* `backdrop`/`scrollBehavior`/`isDismissable`/`isKeyboardDismissDisabled`/`hideCloseButton
|
|
16652
|
-
* `<DrawerContent>{(onClose) => ...}</DrawerContent>`), con los defaults de v2 (`useDrawer` de
|
|
16728
|
+
* `backdrop`/`scrollBehavior`/`isDismissable`/`isKeyboardDismissDisabled`/`hideCloseButton`/
|
|
16729
|
+
* `portalContainer` + `<DrawerContent>{(onClose) => ...}</DrawerContent>`), con los defaults de v2 (`useDrawer` de
|
|
16653
16730
|
* `@heroui/drawer@2.2.29`: `placement="right"`, `size="md"`, `scrollBehavior="inside"`).
|
|
16654
16731
|
*
|
|
16655
16732
|
* Lo que NO se repone a propósito (criterio de la migración: adaptarse a v3, no identidad de
|
|
@@ -16661,7 +16738,7 @@ const sizeClass = (size, placement) => {
|
|
|
16661
16738
|
* La anatomía v3 completa queda publicada como estáticos (`Drawer.Backdrop`, `Drawer.Content`,
|
|
16662
16739
|
* `Drawer.Dialog`, …): son los MISMOS objetos que exporta `@heroui/react`.
|
|
16663
16740
|
*/
|
|
16664
|
-
const DrawerFacade = ({ isOpen, defaultOpen, onOpenChange, onClose, placement = "right", size = "md", backdrop = "opaque", scrollBehavior = "inside", isDismissable = true, isKeyboardDismissDisabled = false, hideCloseButton = false, className, children, }) => {
|
|
16741
|
+
const DrawerFacade = ({ isOpen, defaultOpen, onOpenChange, onClose, placement = "right", size = "md", backdrop = "opaque", scrollBehavior = "inside", isDismissable = true, isKeyboardDismissDisabled = false, hideCloseButton = false, portalContainer, className, children, }) => {
|
|
16665
16742
|
// Mismo puente que `Modal` (f3ce18c): v3 solo conoce `onOpenChange`. Todas las vías de cierre
|
|
16666
16743
|
// (la X —`Drawer.CloseTrigger`, `slot="close"`—, el `close` del render-prop de
|
|
16667
16744
|
// `Drawer.Dialog`, Escape, backdrop y el arrastre de v3) acaban en `state.close()` del
|
|
@@ -16685,7 +16762,15 @@ const DrawerFacade = ({ isOpen, defaultOpen, onOpenChange, onClose, placement =
|
|
|
16685
16762
|
// `Modal.v2.test.tsx` vigila 0 avisos con modales cerrados. `Drawer.Backdrop` (`ModalOverlay`)
|
|
16686
16763
|
// ya crea y publica su propio estado de overlay con `isOpen`/`onOpenChange`, y trae todos los
|
|
16687
16764
|
// slots de `drawerVariants()`, así que el root no aportaba nada.
|
|
16688
|
-
return (jsxRuntime.jsx(react.Drawer.Backdrop, { isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: handleOpenChange, variant: backdrop, isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled,
|
|
16765
|
+
return (jsxRuntime.jsx(react.Drawer.Backdrop, { isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: handleOpenChange, variant: backdrop, isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled,
|
|
16766
|
+
// `portalContainer` de v2 (`@heroui/modal@2.2.29`: `<Overlay portalContainer>`). v3 no
|
|
16767
|
+
// lo expone con ese nombre: `Drawer.Backdrop` reparte sus props sobre el `ModalOverlay`
|
|
16768
|
+
// de react-aria-components, que lo recibe como `UNSTABLE_portalContainer` y lo entrega
|
|
16769
|
+
// al `Overlay` de react-aria (`createPortal(contents, portalContainer)`, con
|
|
16770
|
+
// `document.body` por defecto). Está marcado `@deprecated` en favor de un
|
|
16771
|
+
// `UNSAFE_PortalProvider` padre, pero ese movería TAMBIÉN los overlays anidados
|
|
16772
|
+
// (Select, Tooltip…), y v2 solo movía el drawer; `undefined` deja el `<body>` de siempre.
|
|
16773
|
+
UNSTABLE_portalContainer: portalContainer, children: jsxRuntime.jsx(react.Drawer.Content, { placement: placement, children: jsxRuntime.jsx(react.Drawer.Dialog, { "aria-labelledby": headerId, className: cn(sizeClass(size, placement), "p-0", scrollBehavior === "outside" && "overflow-y-auto", className), children: ({ close }) => (jsxRuntime.jsx(DrawerDialogBody, { close: close, headerId: headerId, scrollBehavior: scrollBehavior, hideCloseButton: hideCloseButton, children: children })) }) }) }));
|
|
16689
16774
|
};
|
|
16690
16775
|
/** Aísla el `useMemo` del valor de contexto (el render-prop de `Dialog` no puede usar hooks). */
|
|
16691
16776
|
const DrawerDialogBody = ({ close, headerId, scrollBehavior, hideCloseButton, children }) => {
|
|
@@ -16747,7 +16832,7 @@ DrawerContent.displayName = "Aurora.DrawerContent";
|
|
|
16747
16832
|
*/
|
|
16748
16833
|
const DrawerHeader = ({ className, children }) => {
|
|
16749
16834
|
const { headerId } = $8WNJc$react.useContext(DrawerFacadeContext);
|
|
16750
|
-
return (jsxRuntime.jsx(react.DrawerHeader, { id: headerId, className:
|
|
16835
|
+
return (jsxRuntime.jsx(react.DrawerHeader, { id: headerId, className: cn("flex-initial flex-row gap-0 px-6 py-4 text-lg font-semibold", className), children: children }));
|
|
16751
16836
|
};
|
|
16752
16837
|
DrawerHeader.displayName = "Aurora.DrawerHeader";
|
|
16753
16838
|
|
|
@@ -16765,7 +16850,7 @@ DrawerHeader.displayName = "Aurora.DrawerHeader";
|
|
|
16765
16850
|
const BODY_V2_GEOMETRY = "mx-0 mt-0 flex flex-1 flex-col gap-3 px-6 py-2";
|
|
16766
16851
|
const DrawerBody = ({ className, children }) => {
|
|
16767
16852
|
const { scrollBehavior } = $8WNJc$react.useContext(DrawerFacadeContext);
|
|
16768
|
-
return (jsxRuntime.jsx(react.DrawerBody, { className:
|
|
16853
|
+
return (jsxRuntime.jsx(react.DrawerBody, { className: cn(BODY_V2_GEOMETRY, scrollBehavior === "outside" && "flex-none overflow-visible", className), children: children }));
|
|
16769
16854
|
};
|
|
16770
16855
|
DrawerBody.displayName = "Aurora.DrawerBody";
|
|
16771
16856
|
|
|
@@ -16777,7 +16862,7 @@ DrawerBody.displayName = "Aurora.DrawerBody";
|
|
|
16777
16862
|
* v3: v2 no declaraba `items-*`, así que un footer en columna estiraba sus filas (en «Register
|
|
16778
16863
|
* payment» de beweossmbs, Total 83px frente a 464 con la .141; detalle en `ModalFooter`).
|
|
16779
16864
|
*/
|
|
16780
|
-
const DrawerFooter = ({ className, children }) => (jsxRuntime.jsx(react.DrawerFooter, { className:
|
|
16865
|
+
const DrawerFooter = ({ className, children }) => (jsxRuntime.jsx(react.DrawerFooter, { className: cn("mt-0 items-stretch px-6 py-4", className), children: children }));
|
|
16781
16866
|
DrawerFooter.displayName = "Aurora.DrawerFooter";
|
|
16782
16867
|
|
|
16783
16868
|
// TECH-2459 — Fachada `Alert` (hallazgo loginos 07-sep: `index.tsx` reexportaba el `Alert` CRUDO de
|
|
@@ -17021,7 +17106,7 @@ const AlertFacade = ({ color, status, variant = "flat", radius = "md", title, de
|
|
|
17021
17106
|
return null;
|
|
17022
17107
|
}
|
|
17023
17108
|
if (hasCompoundChildren(children)) {
|
|
17024
|
-
return (jsxRuntime.jsx(react.Alert, { ...rest, status: effectiveStatus, className:
|
|
17109
|
+
return (jsxRuntime.jsx(react.Alert, { ...rest, status: effectiveStatus, className: cn(classNames?.base, className), children: children }));
|
|
17025
17110
|
}
|
|
17026
17111
|
const handleClose = () => {
|
|
17027
17112
|
if (!isControlled) {
|
|
@@ -17040,20 +17125,20 @@ const AlertFacade = ({ color, status, variant = "flat", radius = "md", title, de
|
|
|
17040
17125
|
// Base v2: `flex flex-grow flex-row w-full items-start py-3 px-4 gap-x-1`. v3 ya trae
|
|
17041
17126
|
// flex/w-full/items-start/px-4/py-3; se repone el `gap-x-1` (v3: `gap-4`), se quita el
|
|
17042
17127
|
// `shadow-surface` (v2 no tenía sombra en el base) y se aplica variant/radius.
|
|
17043
|
-
className:
|
|
17128
|
+
className: cn("grow gap-x-1 shadow-none", slots.base, RADIUS_CLASS[radius], hideIconWrapper && "gap-x-0", classNames?.base, className), children: [startContent, !hideIcon && (jsxRuntime.jsx(react.Alert.Indicator, { className: cn(ICON_WRAPPER_BASE,
|
|
17044
17129
|
// v2 `hideIconWrapper`: `!bg-transparent !shadow-none !border-none` — se omiten
|
|
17045
17130
|
// las clases teñidas en vez de pisarlas, porque `bg-transparent` no borraría el
|
|
17046
17131
|
// `dark:bg-*` (grupo distinto para tailwind-merge).
|
|
17047
17132
|
hideIconWrapper ? "bg-transparent" : slots.iconWrapper, classNames?.iconWrapper), children: icon !== undefined && icon !== null ? (classNames?.alertIcon ? (
|
|
17048
17133
|
// `alertIcon` de v2 se aplicaba al propio SVG; aquí solo alcanza al icono
|
|
17049
17134
|
// personalizado (el de v3 por defecto se renderiza dentro del indicador).
|
|
17050
|
-
jsxRuntime.jsx("span", { className: classNames.alertIcon, children: icon })) : (icon)) : undefined })), jsxRuntime.jsxs(react.Alert.Content, { className:
|
|
17135
|
+
jsxRuntime.jsx("span", { className: classNames.alertIcon, children: icon })) : (icon)) : undefined })), jsxRuntime.jsxs(react.Alert.Content, { className: cn("ms-2 box-border min-h-10 justify-center text-inherit", !hasContent && "items-center", classNames?.mainWrapper), children: [hasTitle && (
|
|
17051
17136
|
// v2: `text-small w-full font-medium block text-inherit leading-5`; v3 (`.alert__title`)
|
|
17052
17137
|
// pone `leading-6` y el color del estado — `text-inherit` devuelve el de v2.
|
|
17053
|
-
jsxRuntime.jsx(react.Alert.Title, { className:
|
|
17138
|
+
jsxRuntime.jsx(react.Alert.Title, { className: cn("w-full leading-5 text-inherit", classNames?.title), children: title })), hasDescription && (
|
|
17054
17139
|
// v2: `pl-[1px] text-small font-normal text-inherit`; v3 (`.alert__description`) pone
|
|
17055
17140
|
// `text-muted`.
|
|
17056
|
-
jsxRuntime.jsx(react.Alert.Description, { className:
|
|
17141
|
+
jsxRuntime.jsx(react.Alert.Description, { className: cn("pl-px font-normal text-inherit", slots.description, classNames?.description), children: description })), children] }), endContent, showClose && (jsxRuntime.jsx(react.CloseButton, { "aria-label": t.closeButtonAriaLabel, className: cn(CLOSE_BASE, slots.closeButton, classNames?.closeButton), onPress: handleClose }))] }));
|
|
17057
17142
|
};
|
|
17058
17143
|
AlertFacade.displayName = "Aurora.Alert";
|
|
17059
17144
|
/**
|
|
@@ -17134,7 +17219,7 @@ function renderDropdownTrigger(child, triggerClassName) {
|
|
|
17134
17219
|
: child.props.ref);
|
|
17135
17220
|
const childClass = child.props.className;
|
|
17136
17221
|
const className = triggerClassName && typeof childClass !== "function"
|
|
17137
|
-
?
|
|
17222
|
+
? cn(triggerClassName, childClass)
|
|
17138
17223
|
: childClass;
|
|
17139
17224
|
return $8WNJc$react.cloneElement(child, {
|
|
17140
17225
|
...mergeTriggerProps$1(triggerProps, child.props),
|
|
@@ -17222,7 +17307,7 @@ function hasValue(node) {
|
|
|
17222
17307
|
* (`react-aria-components/dist/private/Menu.mjs:318-355`).
|
|
17223
17308
|
*/
|
|
17224
17309
|
const DropdownSectionFacade = ({ title, classNames, className, children, ...props }) => {
|
|
17225
|
-
return (jsxRuntime.jsxs(react.Dropdown.Section, { ...props, className:
|
|
17310
|
+
return (jsxRuntime.jsxs(react.Dropdown.Section, { ...props, className: cn(className, classNames?.base), children: [hasValue(title) ? (jsxRuntime.jsx(react.Header, { className: cn(SECTION_HEADING_CLASS, classNames?.heading), children: title })) : null, children] }));
|
|
17226
17311
|
};
|
|
17227
17312
|
DropdownSectionFacade.displayName = "Aurora.DropdownSection";
|
|
17228
17313
|
/**
|
|
@@ -17401,7 +17486,7 @@ const DropdownFacade = ({ children, placement, offset, crossOffset, shouldFlip,
|
|
|
17401
17486
|
// v2: `base` (caja exterior), luego `content` + `className` (caja interior); en v3 es una sola
|
|
17402
17487
|
// caja, así que van juntas y en ese orden. `cn` funde conflictos entre ellas; frente a la clase
|
|
17403
17488
|
// de v3 (`.dropdown__popover`, capa `components`) cualquier utilidad ya gana por capa.
|
|
17404
|
-
const popoverClass =
|
|
17489
|
+
const popoverClass = cn(classNames?.base, classNames?.content, className) || undefined;
|
|
17405
17490
|
const menuWithClose = (node) => withCloseOnSelect(node, closeOnSelect);
|
|
17406
17491
|
const nodes = flatten(children);
|
|
17407
17492
|
// El popover es del consumidor: se respeta su árbol entero y se le COMPLETA lo que no dijo
|
|
@@ -17417,7 +17502,7 @@ const DropdownFacade = ({ children, placement, offset, crossOffset, shouldFlip,
|
|
|
17417
17502
|
return $8WNJc$react.cloneElement(own, {
|
|
17418
17503
|
...missing,
|
|
17419
17504
|
...(popoverClass && typeof ownClass !== "function"
|
|
17420
|
-
? { className:
|
|
17505
|
+
? { className: cn(popoverClass, ownClass) }
|
|
17421
17506
|
: {}),
|
|
17422
17507
|
}, ...mapTree(own.props.children, menuWithClose));
|
|
17423
17508
|
};
|
|
@@ -17632,7 +17717,7 @@ titleValue: _titleValue, ...props }) => {
|
|
|
17632
17717
|
const children = ownChildren ?? title;
|
|
17633
17718
|
const sizeClass = $8WNJc$react.useContext(TabSizeContext);
|
|
17634
17719
|
const tabProps = sizeClass
|
|
17635
|
-
? { ...props, className:
|
|
17720
|
+
? { ...props, className: cn(sizeClass, props.className) }
|
|
17636
17721
|
: props;
|
|
17637
17722
|
// `children` como función es la forma de render props de react-aria (`TabRenderProps`). No se
|
|
17638
17723
|
// puede inspeccionar, y menos aún combinar con un hermano —React rechaza una función como
|
|
@@ -17827,11 +17912,11 @@ const TabsFacade = (allProps) => {
|
|
|
17827
17912
|
// `.tabs[data-orientation="horizontal"] > .tabs__list-container { align-self: start }` de
|
|
17828
17913
|
// neutralize, que no hace falta: dentro de una fila el carril ya mide su contenido.
|
|
17829
17914
|
const orientationAttr = v3Orientation ?? "horizontal";
|
|
17830
|
-
return (jsxRuntime.jsxs(react.Tabs, { ...rootProps, orientation: v3Orientation, variant: v3Variant, children: [jsxRuntime.jsx("div", { className:
|
|
17831
|
-
jsxRuntime.jsx(react.Tabs.Indicator, { className:
|
|
17915
|
+
return (jsxRuntime.jsxs(react.Tabs, { ...rootProps, orientation: v3Orientation, variant: v3Variant, children: [jsxRuntime.jsx("div", { className: cn("flex", v3Variant === "secondary" && "tabs--secondary", fullWidth && "w-full", classNames?.base, className), "data-orientation": orientationAttr, "data-slot": "tabs-base", children: jsxRuntime.jsx(react.Tabs.ListContainer, { className: cn(fullWidth && "w-full"), children: jsxRuntime.jsx(react.Tabs.List, { "aria-describedby": ariaDescribedby, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className: cn(classNames?.tabList), children: tabs.map(({ id, title, tabClassName, tabProps }) => ($8WNJc$react.createElement(react.Tabs.Tab, { ...tabProps, className: cn(size && TAB_SIZE_CLASS[size], classNames?.tab, tabClassName), id: id, key: id },
|
|
17916
|
+
jsxRuntime.jsx(react.Tabs.Indicator, { className: cn(classNames?.cursor) }),
|
|
17832
17917
|
classNames?.tabContent ? (jsxRuntime.jsx("span", { className: classNames.tabContent, children: title })) : (title)))) }) }) }), tabs
|
|
17833
17918
|
.filter(({ panel }) => hasPanelContent(panel))
|
|
17834
|
-
.map(({ id, panel, tabClassName }) => (jsxRuntime.jsx(react.Tabs.Panel, { className:
|
|
17919
|
+
.map(({ id, panel, tabClassName }) => (jsxRuntime.jsx(react.Tabs.Panel, { className: cn(classNames?.panel, tabClassName), id: id, shouldForceMount: !destroyInactiveTabPanel || undefined, children: typeof panel === "function" ? null : panel }, id)))] }));
|
|
17835
17920
|
}
|
|
17836
17921
|
// Forma v3 (o nada que traducir): el camino de siempre. Solo se traducen las props de v2 que
|
|
17837
17922
|
// tienen equivalente, para que una app a medio migrar no las pierda.
|
|
@@ -17841,7 +17926,7 @@ const TabsFacade = (allProps) => {
|
|
|
17841
17926
|
const v3Props = {
|
|
17842
17927
|
...rest,
|
|
17843
17928
|
className: fullWidth || classNames?.base
|
|
17844
|
-
?
|
|
17929
|
+
? cn(fullWidth && "w-full", classNames?.base, className)
|
|
17845
17930
|
: className,
|
|
17846
17931
|
orientation: v3Orientation,
|
|
17847
17932
|
variant: v3Variant,
|
|
@@ -18012,7 +18097,7 @@ const Tooltip = ({ enableTapOnTouch = true, touchPlacement = "top", placement, o
|
|
|
18012
18097
|
delay = 0, closeDelay, trigger, className, classNames, color = "default", children, }) => {
|
|
18013
18098
|
// v3 tiene un solo nodo donde v2 tenía `base` + `content` (ver `TooltipClassNames`). Orden de
|
|
18014
18099
|
// v2: color → `classNames` → `className`; `cn` fusiona para que la clase de la app gane.
|
|
18015
|
-
const contentClassName =
|
|
18100
|
+
const contentClassName = cn(COLOR_CLASSES[color] ?? "", classNames?.base, classNames?.content, className);
|
|
18016
18101
|
const arrow = showArrow && (jsxRuntime.jsx(react.Tooltip.Arrow, { className: classNames?.arrow }));
|
|
18017
18102
|
// Detección táctil: NO basta con `(hover: none)`. Muchos móviles (p.ej.
|
|
18018
18103
|
// Android) reportan `(hover: hover)` y `(hover: none)` da false, dejando el
|
|
@@ -18898,10 +18983,6 @@ Object.defineProperty(exports, "TableRow", {
|
|
|
18898
18983
|
enumerable: true,
|
|
18899
18984
|
get: function () { return react.TableRow; }
|
|
18900
18985
|
});
|
|
18901
|
-
Object.defineProperty(exports, "cn", {
|
|
18902
|
-
enumerable: true,
|
|
18903
|
-
get: function () { return react.cn; }
|
|
18904
|
-
});
|
|
18905
18986
|
Object.defineProperty(exports, "loadIcons", {
|
|
18906
18987
|
enumerable: true,
|
|
18907
18988
|
get: function () { return react$1.loadIcons; }
|
|
@@ -19026,6 +19107,7 @@ exports.WizardNavigation = WizardNavigation;
|
|
|
19026
19107
|
exports.WizardSidebar = WizardSidebar;
|
|
19027
19108
|
exports.applyCustomPrimaryColor = applyCustomPrimaryColor;
|
|
19028
19109
|
exports.applyLindaTones = applyLindaTones;
|
|
19110
|
+
exports.cn = cn;
|
|
19029
19111
|
exports.computeBars = computeBars;
|
|
19030
19112
|
exports.computeMax = computeMax;
|
|
19031
19113
|
exports.computeSlices = computeSlices;
|