@capra/core 1.5.0
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/LICENSE.txt +3 -0
- package/README.md +31 -0
- package/dist/index.cjs +4848 -0
- package/dist/index.d.cts +2193 -0
- package/dist/index.d.mts +2193 -0
- package/dist/index.mjs +4768 -0
- package/dist/style.css +4067 -0
- package/package.json +57 -0
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,4768 @@
|
|
|
1
|
+
import * as React$1 from "react";
|
|
2
|
+
import React, { Suspense, useCallback, useState } from "react";
|
|
3
|
+
import { AnglesLeft, AnglesRight, ArrowUpRightFromSquare, AttentionOutlined, AttentionSolid, CalendarNextOutlined, CalendarOutlined, CalendarPrevOutlined, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, CircleXmark, CloseOutlined, DragGrip, Exclamation, EyeInvisibleOutlined, EyeOutlined, InfoOutlined, InfoSolid, Loading, SuccessOutlined, SuccessSolid, SwapRightOutlined, WarningOutlined, WarningSolid } from "@capra/icons";
|
|
4
|
+
import { Breadcrumb as Breadcrumb$1, Breadcrumbs as Breadcrumbs$1, Button as Button$1, ButtonContext, Calendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, ComboBox, DateInput, DatePicker, DatePickerStateContext, DateRangePicker, DateRangePickerStateContext, DateSegment, Dialog, DialogTrigger, Disclosure, DisclosurePanel, Focusable, Group, Header, Heading, HeadingContext, Input, InputContext, LabelContext, Link as Link$1, ListBox, ListBoxItem, Menu as Menu$1, MenuItem, MenuSection, MenuTrigger, Modal as Modal$1, ModalOverlay, NumberField as NumberField$1, OverlayArrow, OverlayTriggerStateContext, Popover as Popover$1, Pressable, RangeCalendar, RangeCalendarStateContext, RouterProvider, Separator, SubmenuTrigger, Text as Text$1, TextArea as TextArea$1, TextContext, TextField as TextField$1, Tooltip as Tooltip$1, TooltipTrigger, composeRenderProps, useContextProps, useSlottedContext } from "react-aria-components";
|
|
5
|
+
import { FocusScope, UNSAFE_PortalProvider, useDateFormatter, useFocusWithin, usePreventScroll } from "react-aria";
|
|
6
|
+
import { createRoot } from "react-dom/client";
|
|
7
|
+
import { createPortal } from "react-dom";
|
|
8
|
+
//#region ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/lite.mjs
|
|
9
|
+
function clsx() {
|
|
10
|
+
for (var t, r = 0, e = "", n = arguments.length; r < n; r++) (t = arguments[r]) && "string" == typeof t && (e += (e && " ") + t);
|
|
11
|
+
return e;
|
|
12
|
+
}
|
|
13
|
+
//#endregion
|
|
14
|
+
//#region src/components/Alert/Alert.module.css
|
|
15
|
+
var Alert_module_default = {
|
|
16
|
+
"actionContainer": "capra-Alert-module-mQR_Qq-actionContainer",
|
|
17
|
+
"base": "capra-Alert-module-mQR_Qq-base",
|
|
18
|
+
"closeContainer": "capra-Alert-module-mQR_Qq-closeContainer",
|
|
19
|
+
"header": "capra-Alert-module-mQR_Qq-header",
|
|
20
|
+
"iconContainer": "capra-Alert-module-mQR_Qq-iconContainer"
|
|
21
|
+
};
|
|
22
|
+
//#endregion
|
|
23
|
+
//#region src/components/Button/Button.module.css
|
|
24
|
+
var Button_module_default = {
|
|
25
|
+
"base": "capra-Button-module-kHrKiG-base",
|
|
26
|
+
"icon": "capra-Button-module-kHrKiG-icon",
|
|
27
|
+
"iconLayout": "capra-Button-module-kHrKiG-iconLayout",
|
|
28
|
+
"textLayout": "capra-Button-module-kHrKiG-textLayout"
|
|
29
|
+
};
|
|
30
|
+
//#endregion
|
|
31
|
+
//#region src/utils/polymorphism.ts
|
|
32
|
+
/**
|
|
33
|
+
* This file is adapted from the following resources:
|
|
34
|
+
* - https://github.com/primer/react/blob/4b849489b123636209d6dd71b0fe66fbe7963bdb/packages/react/src/utils/modern-polymorphic.ts (MIT licensed)
|
|
35
|
+
* - https://www.totaltypescript.com/forwardref-with-generic-components#the-solution
|
|
36
|
+
*/
|
|
37
|
+
/**
|
|
38
|
+
* `forwardRef` function with proper typing to handle polymorphic components
|
|
39
|
+
*/
|
|
40
|
+
const fixedForwardRef = React$1.forwardRef;
|
|
41
|
+
//#endregion
|
|
42
|
+
//#region src/components/Text/Text.module.css
|
|
43
|
+
var Text_module_default = { "base": "capra-Text-module-JSrT1a-base" };
|
|
44
|
+
const variantDesignTokenMap = {
|
|
45
|
+
get body() {
|
|
46
|
+
return this["body-md-normal"];
|
|
47
|
+
},
|
|
48
|
+
"body-xs-normal": "var(--cds2-typography-body-xs-normal)",
|
|
49
|
+
"body-xs-semibold": "var(--cds2-typography-body-xs-semibold)",
|
|
50
|
+
"body-sm-normal": "var(--cds2-typography-body-sm-normal)",
|
|
51
|
+
"body-sm-semibold": "var(--cds2-typography-body-sm-semibold)",
|
|
52
|
+
"body-md-normal": "var(--cds2-typography-body-md-normal)",
|
|
53
|
+
"body-md-semibold": "var(--cds2-typography-body-md-semibold)",
|
|
54
|
+
"body-lg-normal": "var(--cds2-typography-body-lg-normal)",
|
|
55
|
+
"body-lg-semibold": "var(--cds2-typography-body-lg-semibold)",
|
|
56
|
+
get heading() {
|
|
57
|
+
return this["heading-md"];
|
|
58
|
+
},
|
|
59
|
+
"heading-xs": "var(--cds2-typography-heading-xs)",
|
|
60
|
+
"heading-sm": "var(--cds2-typography-heading-sm)",
|
|
61
|
+
"heading-md": "var(--cds2-typography-heading-md)",
|
|
62
|
+
"heading-lg": "var(--cds2-typography-heading-lg)",
|
|
63
|
+
"heading-xl": "var(--cds2-typography-heading-xl)",
|
|
64
|
+
get metric() {
|
|
65
|
+
return this["metric-md"];
|
|
66
|
+
},
|
|
67
|
+
"metric-sm": "var(--cds2-typography-metric-sm)",
|
|
68
|
+
"metric-md": "var(--cds2-typography-metric-md)",
|
|
69
|
+
"metric-lg": "var(--cds2-typography-metric-lg)",
|
|
70
|
+
"metric-xl": "var(--cds2-typography-metric-xl)",
|
|
71
|
+
code: "var(--cds2-typography-code)"
|
|
72
|
+
};
|
|
73
|
+
const colorDesignTokenMap = {
|
|
74
|
+
default: "var(--cds2-color-foreground-default)",
|
|
75
|
+
subtle: "var(--cds2-color-foreground-subtle)",
|
|
76
|
+
primary: "var(--cds2-color-foreground-default)",
|
|
77
|
+
secondary: "var(--cds2-color-foreground-subtle)",
|
|
78
|
+
tertiary: "var(--cds2-color-foreground-subtle)",
|
|
79
|
+
accent: "var(--cds2-color-foreground-accent-default)",
|
|
80
|
+
attention: "var(--cds2-color-foreground-danger-default)",
|
|
81
|
+
warning: "var(--cds2-color-foreground-warning-default)",
|
|
82
|
+
success: "var(--cds2-color-foreground-success-default)",
|
|
83
|
+
highlight: "var(--cds2-color-foreground-highlight-default)"
|
|
84
|
+
};
|
|
85
|
+
function TextWithoutRef(props, ref) {
|
|
86
|
+
const [mergedProps, mergedRef] = useContextProps(props, ref, TextContext);
|
|
87
|
+
const { as: asComponent, children, color = "inherit", variant = "body", FORCE__className: classNameOverride, ...spanProps } = mergedProps;
|
|
88
|
+
const Component = asComponent || "span";
|
|
89
|
+
const variantDesignToken = variantDesignTokenMap[variant];
|
|
90
|
+
const foregroundColorToken = color !== "inherit" && colorDesignTokenMap[color];
|
|
91
|
+
return /* @__PURE__ */ React$1.createElement(Component, {
|
|
92
|
+
ref: mergedRef,
|
|
93
|
+
...spanProps,
|
|
94
|
+
style: {
|
|
95
|
+
"--_font": variantDesignToken,
|
|
96
|
+
"--_color": foregroundColorToken ? foregroundColorToken : "inherit"
|
|
97
|
+
},
|
|
98
|
+
className: clsx(Text_module_default.base, classNameOverride)
|
|
99
|
+
}, children);
|
|
100
|
+
}
|
|
101
|
+
/**
|
|
102
|
+
* Component for displaying text. The visual display can be controlled via
|
|
103
|
+
* `variant`. The underlying HTML element can be controlled via the `as` prop,
|
|
104
|
+
* which defaults to a `span` tag.
|
|
105
|
+
*/
|
|
106
|
+
const Text = fixedForwardRef(TextWithoutRef);
|
|
107
|
+
//#endregion
|
|
108
|
+
//#region src/components/Button/Button.tsx
|
|
109
|
+
function ButtonWithoutRef({ appearance = "default", block, children, leadingIcon: LeadingIcon, size = "md", disabled: isDisabled = false, pending: isPending = false, trailingIcon: TrailingIcon, variant = "secondary", FORCE__className: classNameOverride, ...props }, ref) {
|
|
110
|
+
const hasLeadingContent = isPending || !!LeadingIcon;
|
|
111
|
+
const hasTrailingContent = !!TrailingIcon;
|
|
112
|
+
return /* @__PURE__ */ React$1.createElement(Button$1, {
|
|
113
|
+
...props,
|
|
114
|
+
isDisabled,
|
|
115
|
+
isPending,
|
|
116
|
+
ref,
|
|
117
|
+
className: clsx(Button_module_default.base, classNameOverride),
|
|
118
|
+
"data-variant": variant,
|
|
119
|
+
"data-appearance": appearance,
|
|
120
|
+
"data-size": size,
|
|
121
|
+
"data-display": block ? "block" : void 0,
|
|
122
|
+
onClick: props.onClick
|
|
123
|
+
}, hasLeadingContent && /* @__PURE__ */ React$1.createElement("span", { className: Button_module_default.iconLayout }, isPending ? /* @__PURE__ */ React$1.createElement(Loading, { size: "sm" }) : LeadingIcon ? /* @__PURE__ */ React$1.createElement(LeadingIcon, { size: "sm" }) : null), /* @__PURE__ */ React$1.createElement("span", { className: Button_module_default.textLayout }, /* @__PURE__ */ React$1.createElement(Text, {
|
|
124
|
+
color: "inherit",
|
|
125
|
+
variant: variant === "primary" ? "body-md-semibold" : "body"
|
|
126
|
+
}, children)), hasTrailingContent && /* @__PURE__ */ React$1.createElement("span", { className: Button_module_default.iconLayout }, /* @__PURE__ */ React$1.createElement(TrailingIcon, { size: "sm" })));
|
|
127
|
+
}
|
|
128
|
+
/**
|
|
129
|
+
* Primary interactive element displaying text and supporting leading and trailing icons.
|
|
130
|
+
*/
|
|
131
|
+
const Button = fixedForwardRef(ButtonWithoutRef);
|
|
132
|
+
//#endregion
|
|
133
|
+
//#region src/components/Button/IconButton.tsx
|
|
134
|
+
function IconButtonWithoutRef({ appearance = "default", icon: Icon, size = "md", disabled: isDisabled = false, pending: isPending = false, variant = "secondary", FORCE__className: classNameOverride, ...props }, ref) {
|
|
135
|
+
return /* @__PURE__ */ React$1.createElement(Button$1, {
|
|
136
|
+
...props,
|
|
137
|
+
isDisabled,
|
|
138
|
+
isPending,
|
|
139
|
+
ref,
|
|
140
|
+
className: clsx(Button_module_default.base, Button_module_default.icon, classNameOverride),
|
|
141
|
+
"data-variant": variant,
|
|
142
|
+
"data-appearance": appearance,
|
|
143
|
+
"data-size": size,
|
|
144
|
+
onClick: props.onClick
|
|
145
|
+
}, isPending ? /* @__PURE__ */ React$1.createElement(Loading, { size: "sm" }) : /* @__PURE__ */ React$1.createElement(Icon, { size: "sm" }));
|
|
146
|
+
}
|
|
147
|
+
/**
|
|
148
|
+
* Interactive element displaying a single icon.
|
|
149
|
+
*/
|
|
150
|
+
const IconButton = fixedForwardRef(IconButtonWithoutRef);
|
|
151
|
+
//#endregion
|
|
152
|
+
//#region src/components/Alert/Alert.tsx
|
|
153
|
+
const iconsOutlined = {
|
|
154
|
+
info: InfoOutlined,
|
|
155
|
+
warning: WarningOutlined,
|
|
156
|
+
danger: AttentionOutlined,
|
|
157
|
+
success: SuccessOutlined
|
|
158
|
+
};
|
|
159
|
+
const iconsSolid = {
|
|
160
|
+
info: InfoSolid,
|
|
161
|
+
warning: WarningSolid,
|
|
162
|
+
danger: AttentionSolid,
|
|
163
|
+
success: SuccessSolid
|
|
164
|
+
};
|
|
165
|
+
/**
|
|
166
|
+
* Alerts are used to communicate important information to the user.
|
|
167
|
+
*/
|
|
168
|
+
function Alert({ appearance = "info", layout = "section", title, children, action, onDismiss, FORCE__className: classNameOverride, ...props }) {
|
|
169
|
+
const [visible, setVisible] = React$1.useState(true);
|
|
170
|
+
const dismissable = onDismiss && appearance !== "danger";
|
|
171
|
+
const Icon = (layout === "compact" ? iconsSolid : iconsOutlined)[appearance];
|
|
172
|
+
const ariaRole = ["info", "success"].includes(appearance) ? "status" : "alert";
|
|
173
|
+
const ariaLive = ariaRole === "status" ? "polite" : "assertive";
|
|
174
|
+
const handleDismiss = () => {
|
|
175
|
+
setVisible(false);
|
|
176
|
+
if (typeof onDismiss === "function") onDismiss();
|
|
177
|
+
};
|
|
178
|
+
const getActionElement = () => {
|
|
179
|
+
if (!action) return null;
|
|
180
|
+
if (React$1.isValidElement(action)) return action;
|
|
181
|
+
if ("label" in action && "onClick" in action) return /* @__PURE__ */ React$1.createElement(Button, {
|
|
182
|
+
variant: "secondary",
|
|
183
|
+
size: "sm",
|
|
184
|
+
onClick: action.onClick
|
|
185
|
+
}, action.label);
|
|
186
|
+
return null;
|
|
187
|
+
};
|
|
188
|
+
const actionElement = getActionElement();
|
|
189
|
+
if (!visible) return null;
|
|
190
|
+
return /* @__PURE__ */ React$1.createElement("div", {
|
|
191
|
+
...props,
|
|
192
|
+
className: clsx(Alert_module_default.base, classNameOverride),
|
|
193
|
+
"data-appearance": appearance,
|
|
194
|
+
"data-layout": layout,
|
|
195
|
+
role: ariaRole,
|
|
196
|
+
"aria-live": ariaLive
|
|
197
|
+
}, /* @__PURE__ */ React$1.createElement("div", { className: Alert_module_default.iconContainer }, /* @__PURE__ */ React$1.createElement(Icon, { size: layout === "section" ? "md" : "sm" })), /* @__PURE__ */ React$1.createElement("div", { className: Alert_module_default.header }, title && /* @__PURE__ */ React$1.createElement(Text, { variant: "body-md-semibold" }, title), /* @__PURE__ */ React$1.createElement(Text, { variant: "body-md-normal" }, children)), actionElement && /* @__PURE__ */ React$1.createElement("div", { className: Alert_module_default.actionContainer }, actionElement), dismissable && /* @__PURE__ */ React$1.createElement("div", { className: Alert_module_default.closeContainer }, /* @__PURE__ */ React$1.createElement(IconButton, {
|
|
198
|
+
variant: "tertiary",
|
|
199
|
+
appearance: "neutral",
|
|
200
|
+
"aria-label": "Close",
|
|
201
|
+
size: "sm",
|
|
202
|
+
onClick: handleDismiss,
|
|
203
|
+
icon: CloseOutlined
|
|
204
|
+
})));
|
|
205
|
+
}
|
|
206
|
+
//#endregion
|
|
207
|
+
//#region src/components/input-helpers/Label.module.css
|
|
208
|
+
var Label_module_default = {
|
|
209
|
+
"label": "capra-Label-module-bUVIqW-label",
|
|
210
|
+
"labelText": "capra-Label-module-bUVIqW-labelText",
|
|
211
|
+
"required": "capra-Label-module-bUVIqW-required",
|
|
212
|
+
"trailingSlot": "capra-Label-module-bUVIqW-trailingSlot"
|
|
213
|
+
};
|
|
214
|
+
//#endregion
|
|
215
|
+
//#region src/components/VisuallyHidden/VisuallyHidden.module.css
|
|
216
|
+
var VisuallyHidden_module_default = { "visuallyHidden": "capra-VisuallyHidden-module-XtMyuG-visuallyHidden" };
|
|
217
|
+
//#endregion
|
|
218
|
+
//#region src/components/VisuallyHidden/VisuallyHidden.tsx
|
|
219
|
+
/**
|
|
220
|
+
* VisuallyHidden is a component that hides its children from the visual
|
|
221
|
+
* rendering, but still makes them available to screen readers.
|
|
222
|
+
*/
|
|
223
|
+
const VisuallyHidden = ({ children, ...props }) => {
|
|
224
|
+
return /* @__PURE__ */ React.createElement("span", {
|
|
225
|
+
className: VisuallyHidden_module_default.visuallyHidden,
|
|
226
|
+
...props
|
|
227
|
+
}, children);
|
|
228
|
+
};
|
|
229
|
+
//#endregion
|
|
230
|
+
//#region src/components/input-helpers/Label.tsx
|
|
231
|
+
/** Label text and optional required indicator for form fields, aligned with Capra field layouts. */
|
|
232
|
+
const Label$1 = React$1.forwardRef((props, ref) => {
|
|
233
|
+
const [mergedProps, mergedRef] = useContextProps(props, ref, LabelContext);
|
|
234
|
+
const { trailingSlot, children, required, FORCE__className: classNameOverride, style, ...labelProps } = mergedProps;
|
|
235
|
+
if (!children) return null;
|
|
236
|
+
return /* @__PURE__ */ React$1.createElement("label", {
|
|
237
|
+
ref: mergedRef,
|
|
238
|
+
...labelProps,
|
|
239
|
+
className: clsx(Label_module_default.label, classNameOverride)
|
|
240
|
+
}, /* @__PURE__ */ React$1.createElement("span", { className: Label_module_default.labelText }, children, required && /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement("span", {
|
|
241
|
+
className: Label_module_default.required,
|
|
242
|
+
"aria-hidden": true
|
|
243
|
+
}, "*"), /* @__PURE__ */ React$1.createElement(VisuallyHidden, null, "This field is required"))), trailingSlot && /* @__PURE__ */ React$1.createElement("span", { className: Label_module_default.trailingSlot }, trailingSlot));
|
|
244
|
+
});
|
|
245
|
+
Label$1.displayName = "Label";
|
|
246
|
+
//#endregion
|
|
247
|
+
//#region src/components/TextInput/TextInput.module.css
|
|
248
|
+
var TextInput_module_default = {
|
|
249
|
+
"errorIndicator": "capra-TextInput-module-I5TDpa-errorIndicator",
|
|
250
|
+
"input": "capra-TextInput-module-I5TDpa-input",
|
|
251
|
+
"leadingSlot": "capra-TextInput-module-I5TDpa-leadingSlot",
|
|
252
|
+
"trailingSlot": "capra-TextInput-module-I5TDpa-trailingSlot",
|
|
253
|
+
"warningIndicator": "capra-TextInput-module-I5TDpa-warningIndicator",
|
|
254
|
+
"wrapper": "capra-TextInput-module-I5TDpa-wrapper"
|
|
255
|
+
};
|
|
256
|
+
//#endregion
|
|
257
|
+
//#region src/components/TextInput/TextInput.tsx
|
|
258
|
+
/**
|
|
259
|
+
* TextInput component for single-line text entry. Backwards compatible with Ant Design v5 Input.
|
|
260
|
+
*/
|
|
261
|
+
const TextInput = React$1.forwardRef((props, ref) => {
|
|
262
|
+
const [mergedProps, mergedRef] = useContextProps(props, ref, InputContext);
|
|
263
|
+
const { appearance = "default", FORCE__className: classNameOverride, leadingSlot, required, size = "md", trailingSlot, style, ...inputProps } = mergedProps;
|
|
264
|
+
return /* @__PURE__ */ React$1.createElement("div", {
|
|
265
|
+
className: clsx(TextInput_module_default.wrapper, classNameOverride),
|
|
266
|
+
"data-capra-text-input": "",
|
|
267
|
+
"data-size": size
|
|
268
|
+
}, leadingSlot && /* @__PURE__ */ React$1.createElement("span", { className: TextInput_module_default.leadingSlot }, leadingSlot), /* @__PURE__ */ React$1.createElement("input", {
|
|
269
|
+
ref: mergedRef,
|
|
270
|
+
...inputProps,
|
|
271
|
+
className: TextInput_module_default.input,
|
|
272
|
+
"aria-invalid": appearance === "danger",
|
|
273
|
+
"aria-required": required
|
|
274
|
+
}), (trailingSlot || appearance === "danger" || appearance === "warning") && /* @__PURE__ */ React$1.createElement("span", { className: TextInput_module_default.trailingSlot }, trailingSlot, appearance === "warning" && /* @__PURE__ */ React$1.createElement("span", {
|
|
275
|
+
className: TextInput_module_default.warningIndicator,
|
|
276
|
+
"aria-hidden": true
|
|
277
|
+
}, /* @__PURE__ */ React$1.createElement(WarningOutlined, { size: "sm" })), appearance === "danger" && /* @__PURE__ */ React$1.createElement("span", {
|
|
278
|
+
className: TextInput_module_default.errorIndicator,
|
|
279
|
+
"aria-hidden": true
|
|
280
|
+
}, /* @__PURE__ */ React$1.createElement(Exclamation, { size: "sm" }))));
|
|
281
|
+
});
|
|
282
|
+
TextInput.displayName = "TextInput";
|
|
283
|
+
//#endregion
|
|
284
|
+
//#region src/components/input-helpers/HelperText.module.css
|
|
285
|
+
var HelperText_module_default = {
|
|
286
|
+
"count": "capra-HelperText-module-0SVw3W-count",
|
|
287
|
+
"helper": "capra-HelperText-module-0SVw3W-helper",
|
|
288
|
+
"icon": "capra-HelperText-module-0SVw3W-icon",
|
|
289
|
+
"layout": "capra-HelperText-module-0SVw3W-layout"
|
|
290
|
+
};
|
|
291
|
+
//#endregion
|
|
292
|
+
//#region src/components/input-helpers/HelperText.tsx
|
|
293
|
+
/**
|
|
294
|
+
* Helper text for inputs.
|
|
295
|
+
*/
|
|
296
|
+
const HelperText = React$1.forwardRef((props, ref) => {
|
|
297
|
+
const { appearance = "default", children, countText, disabled, FORCE__className: classNameOverride, style, ...divProps } = props;
|
|
298
|
+
if (!children && !countText) return null;
|
|
299
|
+
return /* @__PURE__ */ React$1.createElement("div", {
|
|
300
|
+
ref,
|
|
301
|
+
...divProps,
|
|
302
|
+
className: clsx(HelperText_module_default.layout, classNameOverride),
|
|
303
|
+
"data-disabled": disabled || void 0
|
|
304
|
+
}, /* @__PURE__ */ React$1.createElement("div", {
|
|
305
|
+
className: HelperText_module_default.helper,
|
|
306
|
+
"data-appearance": appearance,
|
|
307
|
+
role: appearance === "danger" ? "alert" : void 0
|
|
308
|
+
}, appearance === "danger" && /* @__PURE__ */ React$1.createElement("span", {
|
|
309
|
+
className: HelperText_module_default.icon,
|
|
310
|
+
"aria-hidden": true
|
|
311
|
+
}, /* @__PURE__ */ React$1.createElement(AttentionOutlined, { size: "sm" })), appearance === "warning" && /* @__PURE__ */ React$1.createElement("span", {
|
|
312
|
+
className: HelperText_module_default.icon,
|
|
313
|
+
"aria-hidden": true
|
|
314
|
+
}, /* @__PURE__ */ React$1.createElement(WarningOutlined, { size: "sm" })), /* @__PURE__ */ React$1.createElement(Text, {
|
|
315
|
+
slot: "description",
|
|
316
|
+
variant: "body-sm-normal"
|
|
317
|
+
}, children)), !!countText && /* @__PURE__ */ React$1.createElement("span", {
|
|
318
|
+
className: HelperText_module_default.count,
|
|
319
|
+
"aria-live": "polite"
|
|
320
|
+
}, countText));
|
|
321
|
+
});
|
|
322
|
+
HelperText.displayName = "HelperText";
|
|
323
|
+
//#endregion
|
|
324
|
+
//#region src/components/input-helpers/fieldLayout.module.css
|
|
325
|
+
var fieldLayout_module_default = {
|
|
326
|
+
"field": "capra-fieldLayout-module-GZD11W-field",
|
|
327
|
+
"fieldContent": "capra-fieldLayout-module-GZD11W-fieldContent",
|
|
328
|
+
"labelRow": "capra-fieldLayout-module-GZD11W-labelRow"
|
|
329
|
+
};
|
|
330
|
+
//#endregion
|
|
331
|
+
//#region src/components/Autocomplete/AutocompleteField.module.css
|
|
332
|
+
var AutocompleteField_module_default = {
|
|
333
|
+
"item": "capra-AutocompleteField-module-MVvKYa-item",
|
|
334
|
+
"listbox": "capra-AutocompleteField-module-MVvKYa-listbox",
|
|
335
|
+
"popover": "capra-AutocompleteField-module-MVvKYa-popover"
|
|
336
|
+
};
|
|
337
|
+
//#endregion
|
|
338
|
+
//#region src/components/Autocomplete/AutocompleteField.tsx
|
|
339
|
+
/**
|
|
340
|
+
* Renders an item in the Autocomplete suggestions list..
|
|
341
|
+
*/
|
|
342
|
+
function AutocompleteItem(props) {
|
|
343
|
+
const textValue = props.textValue || (typeof props.children === "string" ? props.children : void 0);
|
|
344
|
+
return /* @__PURE__ */ React.createElement(ListBoxItem, {
|
|
345
|
+
...props,
|
|
346
|
+
id: props.id ?? textValue,
|
|
347
|
+
textValue,
|
|
348
|
+
className: AutocompleteField_module_default.item
|
|
349
|
+
}, composeRenderProps(props.children, (children) => typeof children === "string" ? /* @__PURE__ */ React.createElement(Text, { slot: "label" }, children) : children));
|
|
350
|
+
}
|
|
351
|
+
const defaultItemRenderer = (item) => {
|
|
352
|
+
return /* @__PURE__ */ React.createElement(AutocompleteItem, { id: item.value }, item.value);
|
|
353
|
+
};
|
|
354
|
+
function AutocompleteFieldWithoutRef(props, ref) {
|
|
355
|
+
const { canClear, children = defaultItemRenderer, itemFilter, onChange, onOpenChange, items, value, helperText, label, layout, id, trailingSlot, shouldAutoSizeDropdown = true, ...inputProps } = props;
|
|
356
|
+
const [comboboxRef, width, offset] = useAnchorWidth();
|
|
357
|
+
const trailingContent = canClear ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ClearButton, null), trailingSlot) : trailingSlot;
|
|
358
|
+
return /* @__PURE__ */ React.createElement(ComboBox, {
|
|
359
|
+
menuTrigger: "input",
|
|
360
|
+
className: fieldLayout_module_default.field,
|
|
361
|
+
"data-capra-field-root": "",
|
|
362
|
+
"data-layout": layout,
|
|
363
|
+
isDisabled: inputProps.disabled,
|
|
364
|
+
isRequired: inputProps.required,
|
|
365
|
+
isReadOnly: inputProps.readOnly,
|
|
366
|
+
allowsCustomValue: true,
|
|
367
|
+
defaultFilter: itemFilter,
|
|
368
|
+
onOpenChange,
|
|
369
|
+
onInputChange: onChange,
|
|
370
|
+
defaultItems: items,
|
|
371
|
+
value,
|
|
372
|
+
id,
|
|
373
|
+
shouldFocusWrap: true,
|
|
374
|
+
ref: comboboxRef
|
|
375
|
+
}, /* @__PURE__ */ React.createElement(Label$1, null, label), /* @__PURE__ */ React.createElement(TextInput, {
|
|
376
|
+
...inputProps,
|
|
377
|
+
ref,
|
|
378
|
+
trailingSlot: trailingContent
|
|
379
|
+
}), /* @__PURE__ */ React.createElement(HelperText, {
|
|
380
|
+
appearance: inputProps.appearance,
|
|
381
|
+
disabled: inputProps.disabled
|
|
382
|
+
}, helperText), /* @__PURE__ */ React.createElement(Popover$1, {
|
|
383
|
+
className: AutocompleteField_module_default.popover,
|
|
384
|
+
offset: 2,
|
|
385
|
+
crossOffset: offset,
|
|
386
|
+
style: { width: shouldAutoSizeDropdown ? width : void 0 }
|
|
387
|
+
}, /* @__PURE__ */ React.createElement(ListBox, { className: AutocompleteField_module_default.listbox }, children)));
|
|
388
|
+
}
|
|
389
|
+
function useResizeObserver({ ref, onResize, additionalDependencies = [] }) {
|
|
390
|
+
React.useEffect(() => {
|
|
391
|
+
if (!ref.current) return;
|
|
392
|
+
const observer = new ResizeObserver((entries) => {
|
|
393
|
+
onResize(entries[0]);
|
|
394
|
+
});
|
|
395
|
+
observer.observe(ref.current);
|
|
396
|
+
return () => observer.disconnect();
|
|
397
|
+
}, [
|
|
398
|
+
ref,
|
|
399
|
+
onResize,
|
|
400
|
+
...additionalDependencies
|
|
401
|
+
]);
|
|
402
|
+
}
|
|
403
|
+
function useAnchorWidth(additionalDependencies = []) {
|
|
404
|
+
const anchorRef = React.useRef(null);
|
|
405
|
+
const [width, setWidth] = useState(null);
|
|
406
|
+
const [offset, setOffset] = useState(0);
|
|
407
|
+
useResizeObserver({
|
|
408
|
+
ref: anchorRef,
|
|
409
|
+
onResize: useCallback(() => {
|
|
410
|
+
if (anchorRef.current) {
|
|
411
|
+
setWidth(anchorRef.current.offsetWidth + "px");
|
|
412
|
+
const input = anchorRef.current.querySelector("input");
|
|
413
|
+
if (input) setOffset(anchorRef.current.offsetLeft - input.offsetLeft);
|
|
414
|
+
}
|
|
415
|
+
}, [anchorRef]),
|
|
416
|
+
additionalDependencies
|
|
417
|
+
});
|
|
418
|
+
return [
|
|
419
|
+
anchorRef,
|
|
420
|
+
width,
|
|
421
|
+
offset
|
|
422
|
+
];
|
|
423
|
+
}
|
|
424
|
+
/**
|
|
425
|
+
* AutocompleteField combines a text field with a suggestions list. Consumers can supply static `AutocompleteField.Item` children or an `items` collection with an optional default item renderer. The field allows custom values that are not in the list.
|
|
426
|
+
*/
|
|
427
|
+
const AutocompleteField = Object.assign(fixedForwardRef(AutocompleteFieldWithoutRef), { Item: AutocompleteItem });
|
|
428
|
+
function ClearButton() {
|
|
429
|
+
const ctx = useSlottedContext(InputContext);
|
|
430
|
+
if (!ctx || !ctx.value) return null;
|
|
431
|
+
return /* @__PURE__ */ React.createElement(ButtonContext.Provider, { value: null }, /* @__PURE__ */ React.createElement(IconButton, {
|
|
432
|
+
size: "sm",
|
|
433
|
+
variant: "tertiary",
|
|
434
|
+
icon: CircleXmark,
|
|
435
|
+
"aria-label": "Clear",
|
|
436
|
+
"aria-describedby": ctx["aria-labelledby"],
|
|
437
|
+
onClick: () => {
|
|
438
|
+
ctx.onChange?.({ target: { value: "" } });
|
|
439
|
+
}
|
|
440
|
+
}));
|
|
441
|
+
}
|
|
442
|
+
//#endregion
|
|
443
|
+
//#region src/components/Card/Card.module.css
|
|
444
|
+
var Card_module_default = {
|
|
445
|
+
"action": "capra-Card-module-BBqyya-action",
|
|
446
|
+
"card": "capra-Card-module-BBqyya-card",
|
|
447
|
+
"footer": "capra-Card-module-BBqyya-footer",
|
|
448
|
+
"header": "capra-Card-module-BBqyya-header"
|
|
449
|
+
};
|
|
450
|
+
//#endregion
|
|
451
|
+
//#region src/components/Card/Card.tsx
|
|
452
|
+
/**
|
|
453
|
+
* The base component for the card.
|
|
454
|
+
* @param className - Class overrides.
|
|
455
|
+
* @param props - The props for the card.
|
|
456
|
+
* @returns A card base component.
|
|
457
|
+
*/
|
|
458
|
+
const CardRoot = ({ className, ...props }) => {
|
|
459
|
+
return /* @__PURE__ */ React$1.createElement("div", {
|
|
460
|
+
"data-slot": "card",
|
|
461
|
+
className: clsx(Card_module_default.card, className),
|
|
462
|
+
...props
|
|
463
|
+
});
|
|
464
|
+
};
|
|
465
|
+
/**
|
|
466
|
+
* The header of the card.
|
|
467
|
+
* @param className - Class overrides.
|
|
468
|
+
* @param props - The props for the card header.
|
|
469
|
+
* @returns A card header component.
|
|
470
|
+
*/
|
|
471
|
+
const CardHeader = ({ className, ...props }) => {
|
|
472
|
+
return /* @__PURE__ */ React$1.createElement("div", {
|
|
473
|
+
"data-slot": "card-header",
|
|
474
|
+
className: clsx(Card_module_default.header, className),
|
|
475
|
+
...props
|
|
476
|
+
});
|
|
477
|
+
};
|
|
478
|
+
/**
|
|
479
|
+
* The title of the card.
|
|
480
|
+
* @param props - The props for the card title.
|
|
481
|
+
* @returns A card title component.
|
|
482
|
+
*/
|
|
483
|
+
const CardTitle = ({ children, variant = "body-lg-semibold", ...props }) => {
|
|
484
|
+
return /* @__PURE__ */ React$1.createElement(Text, {
|
|
485
|
+
"data-slot": "card-title",
|
|
486
|
+
variant,
|
|
487
|
+
...props
|
|
488
|
+
}, children);
|
|
489
|
+
};
|
|
490
|
+
/**
|
|
491
|
+
* The description of the card.
|
|
492
|
+
* @param props - The props for the card description.
|
|
493
|
+
* @returns A card description component.
|
|
494
|
+
*/
|
|
495
|
+
const CardDescription = ({ children, ...props }) => {
|
|
496
|
+
return /* @__PURE__ */ React$1.createElement(Text, {
|
|
497
|
+
as: "div",
|
|
498
|
+
"data-slot": "card-description",
|
|
499
|
+
variant: "body-md-normal",
|
|
500
|
+
color: "secondary",
|
|
501
|
+
...props
|
|
502
|
+
}, children);
|
|
503
|
+
};
|
|
504
|
+
/**
|
|
505
|
+
* The actions container for the card header.
|
|
506
|
+
* @param className - Class overrides.
|
|
507
|
+
* @param props - The props for the card header actions container.
|
|
508
|
+
* @returns A card header actions container component.
|
|
509
|
+
*/
|
|
510
|
+
const CardAction = ({ className, ...props }) => {
|
|
511
|
+
return /* @__PURE__ */ React$1.createElement("div", {
|
|
512
|
+
"data-slot": "card-action",
|
|
513
|
+
className: clsx(Card_module_default.action, className),
|
|
514
|
+
...props
|
|
515
|
+
});
|
|
516
|
+
};
|
|
517
|
+
/**
|
|
518
|
+
* The content container for the card.
|
|
519
|
+
* @param className - Class overrides.
|
|
520
|
+
* @param props - The props for the card content container.
|
|
521
|
+
* @returns A card content container component.
|
|
522
|
+
*/
|
|
523
|
+
const CardContent = ({ className, ...props }) => {
|
|
524
|
+
return /* @__PURE__ */ React$1.createElement("div", {
|
|
525
|
+
"data-slot": "card-content",
|
|
526
|
+
className: clsx(Card_module_default.content, className),
|
|
527
|
+
...props
|
|
528
|
+
});
|
|
529
|
+
};
|
|
530
|
+
/**
|
|
531
|
+
* The footer container for the card.
|
|
532
|
+
* @param props - The props for the card footer container.
|
|
533
|
+
* @returns A card footer container component.
|
|
534
|
+
*/
|
|
535
|
+
const CardFooter = ({ className, ...props }) => {
|
|
536
|
+
return /* @__PURE__ */ React$1.createElement("div", {
|
|
537
|
+
"data-slot": "card-footer",
|
|
538
|
+
className: clsx(Card_module_default.footer, className),
|
|
539
|
+
...props
|
|
540
|
+
});
|
|
541
|
+
};
|
|
542
|
+
/**
|
|
543
|
+
* Compound card component exposing structural slots for header, title, description,
|
|
544
|
+
* action, content, and footer so consumers can build consistent layouts.
|
|
545
|
+
*/
|
|
546
|
+
const Card = Object.assign(CardRoot, {
|
|
547
|
+
Header: CardHeader,
|
|
548
|
+
Title: CardTitle,
|
|
549
|
+
Description: CardDescription,
|
|
550
|
+
Action: CardAction,
|
|
551
|
+
Content: CardContent,
|
|
552
|
+
Footer: CardFooter
|
|
553
|
+
});
|
|
554
|
+
//#endregion
|
|
555
|
+
//#region src/components/Badge/Badge.module.css
|
|
556
|
+
var Badge_module_default = {
|
|
557
|
+
"badge": "capra-Badge-module-yecu4W-badge",
|
|
558
|
+
"base": "capra-Badge-module-yecu4W-base"
|
|
559
|
+
};
|
|
560
|
+
//#endregion
|
|
561
|
+
//#region src/components/Badge/Badge.tsx
|
|
562
|
+
/**
|
|
563
|
+
* Badges display an indicator/counter on an associated component.
|
|
564
|
+
*/
|
|
565
|
+
function Badge({ appearance = "danger", variant, count = 0, showZero = false, overflowCount = 99, FORCE__className, ...props }) {
|
|
566
|
+
if (variant === "counter" && !showZero && !count) return null;
|
|
567
|
+
const getBadgeContent = () => {
|
|
568
|
+
if (variant === "dot") return null;
|
|
569
|
+
const value = Math.max(count, 0);
|
|
570
|
+
return value > overflowCount ? `${overflowCount}+` : value;
|
|
571
|
+
};
|
|
572
|
+
return /* @__PURE__ */ React$1.createElement("span", {
|
|
573
|
+
role: "status",
|
|
574
|
+
className: clsx(Badge_module_default.badge, FORCE__className),
|
|
575
|
+
"data-appearance": appearance,
|
|
576
|
+
"data-variant": variant,
|
|
577
|
+
...props
|
|
578
|
+
}, getBadgeContent());
|
|
579
|
+
}
|
|
580
|
+
/**
|
|
581
|
+
* A convenience component allowing you to easily attach a badge to another component.
|
|
582
|
+
*/
|
|
583
|
+
function BadgeLayout({ children }) {
|
|
584
|
+
return /* @__PURE__ */ React$1.createElement("div", { className: Badge_module_default.base }, children);
|
|
585
|
+
}
|
|
586
|
+
//#endregion
|
|
587
|
+
//#region src/components/ListItem/ListItem.module.css
|
|
588
|
+
var ListItem_module_default = {
|
|
589
|
+
"content": "capra-ListItem-module-VUh15W-content",
|
|
590
|
+
"description": "capra-ListItem-module-VUh15W-description",
|
|
591
|
+
"label": "capra-ListItem-module-VUh15W-label",
|
|
592
|
+
"leading": "capra-ListItem-module-VUh15W-leading",
|
|
593
|
+
"listItem": "capra-ListItem-module-VUh15W-listItem",
|
|
594
|
+
"slot": "capra-ListItem-module-VUh15W-slot",
|
|
595
|
+
"slots": "capra-ListItem-module-VUh15W-slots",
|
|
596
|
+
"suffix": "capra-ListItem-module-VUh15W-suffix",
|
|
597
|
+
"trailing": "capra-ListItem-module-VUh15W-trailing"
|
|
598
|
+
};
|
|
599
|
+
//#endregion
|
|
600
|
+
//#region src/components/ListItem/ListItemSlots.tsx
|
|
601
|
+
const ListItemSlots = ({ children, trailing = false, FORCE__className }) => {
|
|
602
|
+
if (React.Children.count(children) === 0) return null;
|
|
603
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
604
|
+
className: clsx(ListItem_module_default.slots, FORCE__className),
|
|
605
|
+
"data-trailing": trailing || void 0
|
|
606
|
+
}, React.Children.map(children, (child, index) => /* @__PURE__ */ React.createElement("div", {
|
|
607
|
+
key: index,
|
|
608
|
+
className: ListItem_module_default.slot
|
|
609
|
+
}, child)));
|
|
610
|
+
};
|
|
611
|
+
//#endregion
|
|
612
|
+
//#region src/components/ListItem/ListItem.tsx
|
|
613
|
+
function ListItem({ as: asComponent, children, FORCE__className: classNameOverride, ...props }) {
|
|
614
|
+
const Component = asComponent || "li";
|
|
615
|
+
return /* @__PURE__ */ React$1.createElement(Component, {
|
|
616
|
+
...props,
|
|
617
|
+
className: clsx(ListItem_module_default.listItem, classNameOverride)
|
|
618
|
+
}, children);
|
|
619
|
+
}
|
|
620
|
+
const Leading = ({ children, FORCE__className }) => {
|
|
621
|
+
return /* @__PURE__ */ React$1.createElement(ListItemSlots, { FORCE__className }, children);
|
|
622
|
+
};
|
|
623
|
+
const Trailing = ({ children, FORCE__className }) => {
|
|
624
|
+
return /* @__PURE__ */ React$1.createElement(ListItemSlots, {
|
|
625
|
+
trailing: true,
|
|
626
|
+
FORCE__className
|
|
627
|
+
}, children);
|
|
628
|
+
};
|
|
629
|
+
const Content = ({ children, FORCE__className }) => {
|
|
630
|
+
return /* @__PURE__ */ React$1.createElement("div", { className: clsx(ListItem_module_default.content, FORCE__className) }, children);
|
|
631
|
+
};
|
|
632
|
+
const Label = ({ children, id }) => {
|
|
633
|
+
return /* @__PURE__ */ React$1.createElement("div", {
|
|
634
|
+
id,
|
|
635
|
+
className: ListItem_module_default.label
|
|
636
|
+
}, children);
|
|
637
|
+
};
|
|
638
|
+
const Suffix = ({ children }) => {
|
|
639
|
+
return /* @__PURE__ */ React$1.createElement("div", { className: ListItem_module_default.suffix }, children);
|
|
640
|
+
};
|
|
641
|
+
const Description = ({ children }) => {
|
|
642
|
+
return /* @__PURE__ */ React$1.createElement("div", { className: ListItem_module_default.description }, children);
|
|
643
|
+
};
|
|
644
|
+
const Spacer = () => {
|
|
645
|
+
return /* @__PURE__ */ React$1.createElement("div", {
|
|
646
|
+
role: "presentation",
|
|
647
|
+
className: clsx(ListItem_module_default.spacer)
|
|
648
|
+
});
|
|
649
|
+
};
|
|
650
|
+
ListItem.Content = Content;
|
|
651
|
+
ListItem.Label = Label;
|
|
652
|
+
ListItem.Description = Description;
|
|
653
|
+
ListItem.Suffix = Suffix;
|
|
654
|
+
ListItem.Spacer = Spacer;
|
|
655
|
+
ListItem.Leading = Leading;
|
|
656
|
+
ListItem.Trailing = Trailing;
|
|
657
|
+
//#endregion
|
|
658
|
+
//#region src/components/Pill/Pill.module.css
|
|
659
|
+
var Pill_module_default = {
|
|
660
|
+
"icon": "capra-Pill-module-xa3pfa-icon",
|
|
661
|
+
"pill": "capra-Pill-module-xa3pfa-pill"
|
|
662
|
+
};
|
|
663
|
+
//#endregion
|
|
664
|
+
//#region src/components/Pill/Pill.tsx
|
|
665
|
+
const getDefaultIcon = (appearance) => {
|
|
666
|
+
switch (appearance) {
|
|
667
|
+
case "danger": return /* @__PURE__ */ React$1.createElement(AttentionSolid, { size: "sm" });
|
|
668
|
+
case "info": return /* @__PURE__ */ React$1.createElement(InfoSolid, { size: "sm" });
|
|
669
|
+
case "success": return /* @__PURE__ */ React$1.createElement(SuccessSolid, { size: "sm" });
|
|
670
|
+
case "warning": return /* @__PURE__ */ React$1.createElement(WarningSolid, { size: "sm" });
|
|
671
|
+
default: return null;
|
|
672
|
+
}
|
|
673
|
+
};
|
|
674
|
+
const Pill = ({ children, icon: overrideIcon, variant = "bold", appearance = "default", inline = false, FORCE__className: classNameOverride, ...props }) => {
|
|
675
|
+
const icon = overrideIcon ?? getDefaultIcon(appearance);
|
|
676
|
+
const Wrapper = inline ? "span" : "div";
|
|
677
|
+
return /* @__PURE__ */ React$1.createElement(Wrapper, {
|
|
678
|
+
...props,
|
|
679
|
+
className: clsx(Pill_module_default.pill, classNameOverride),
|
|
680
|
+
"data-appearance": appearance,
|
|
681
|
+
"data-variant": variant
|
|
682
|
+
}, icon && /* @__PURE__ */ React$1.createElement("span", { className: Pill_module_default.icon }, icon), children);
|
|
683
|
+
};
|
|
684
|
+
//#endregion
|
|
685
|
+
//#region src/components/Radio/Radio.module.css
|
|
686
|
+
var Radio_module_default = {
|
|
687
|
+
"base": "capra-Radio-module-ZI7rzq-base",
|
|
688
|
+
"inner": "capra-Radio-module-ZI7rzq-inner",
|
|
689
|
+
"root": "capra-Radio-module-ZI7rzq-root"
|
|
690
|
+
};
|
|
691
|
+
//#endregion
|
|
692
|
+
//#region src/components/RadioGroup/RadioGroup.module.css
|
|
693
|
+
var RadioGroup_module_default = { "base": "capra-RadioGroup-module-YzgrBa-base" };
|
|
694
|
+
//#endregion
|
|
695
|
+
//#region src/components/RadioGroup/RadioGroup.tsx
|
|
696
|
+
const RadioGroupContext = React$1.createContext({});
|
|
697
|
+
function RadioGroupWithoutRef({ name, required, disabled, value, onChange, children, layout = "horizontal", FORCE__className: classNameOverride, ...props }, ref) {
|
|
698
|
+
const generatedId = React$1.useId();
|
|
699
|
+
const contextValue = React$1.useMemo(() => ({
|
|
700
|
+
name: name || `radio-group-${generatedId}`,
|
|
701
|
+
required,
|
|
702
|
+
disabled,
|
|
703
|
+
value,
|
|
704
|
+
onChange
|
|
705
|
+
}), [
|
|
706
|
+
name,
|
|
707
|
+
generatedId,
|
|
708
|
+
required,
|
|
709
|
+
disabled,
|
|
710
|
+
value,
|
|
711
|
+
onChange
|
|
712
|
+
]);
|
|
713
|
+
return /* @__PURE__ */ React$1.createElement(RadioGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ React$1.createElement("fieldset", {
|
|
714
|
+
ref,
|
|
715
|
+
...props,
|
|
716
|
+
className: clsx(RadioGroup_module_default.base, classNameOverride),
|
|
717
|
+
"data-layout": layout
|
|
718
|
+
}, children));
|
|
719
|
+
}
|
|
720
|
+
/**
|
|
721
|
+
* A control wrapper for a group of radio buttons.
|
|
722
|
+
*/
|
|
723
|
+
const RadioGroup = fixedForwardRef(RadioGroupWithoutRef);
|
|
724
|
+
//#endregion
|
|
725
|
+
//#region src/components/Radio/Radio.tsx
|
|
726
|
+
function RadioWithoutRef({ name, checked, required, disabled, value, onChange, FORCE__className: classNameOverride, children, ...props }, ref) {
|
|
727
|
+
const contextValue = React$1.useContext(RadioGroupContext);
|
|
728
|
+
const generatedId = React$1.useId();
|
|
729
|
+
const id = props.id ?? generatedId;
|
|
730
|
+
const mergedContext = {
|
|
731
|
+
name: name ?? contextValue.name,
|
|
732
|
+
required: required ?? contextValue.required,
|
|
733
|
+
disabled: disabled ?? contextValue.disabled,
|
|
734
|
+
onChange: onChange ?? contextValue.onChange
|
|
735
|
+
};
|
|
736
|
+
const handleChange = (event) => {
|
|
737
|
+
mergedContext.onChange?.(event);
|
|
738
|
+
};
|
|
739
|
+
return /* @__PURE__ */ React$1.createElement("div", { className: Radio_module_default.root }, /* @__PURE__ */ React$1.createElement("div", { className: clsx(Radio_module_default.base, classNameOverride) }, /* @__PURE__ */ React$1.createElement("input", {
|
|
740
|
+
ref,
|
|
741
|
+
...props,
|
|
742
|
+
...mergedContext,
|
|
743
|
+
id,
|
|
744
|
+
checked: checked ?? contextValue.value === value,
|
|
745
|
+
value,
|
|
746
|
+
onChange: handleChange,
|
|
747
|
+
className: Radio_module_default.input,
|
|
748
|
+
type: "radio"
|
|
749
|
+
}), /* @__PURE__ */ React$1.createElement("span", { className: Radio_module_default.inner })), children && /* @__PURE__ */ React$1.createElement(Text, {
|
|
750
|
+
as: "label",
|
|
751
|
+
htmlFor: id
|
|
752
|
+
}, children));
|
|
753
|
+
}
|
|
754
|
+
/**
|
|
755
|
+
* A presentational radio button component. You will typically use this component within a RadioGroup component.
|
|
756
|
+
*/
|
|
757
|
+
const Radio = fixedForwardRef(RadioWithoutRef);
|
|
758
|
+
//#endregion
|
|
759
|
+
//#region src/components/RadioTile/RadioTile.module.css
|
|
760
|
+
var RadioTile_module_default = { "base": "capra-RadioTile-module-zbnLia-base" };
|
|
761
|
+
//#endregion
|
|
762
|
+
//#region src/components/RadioTile/RadioTile.tsx
|
|
763
|
+
function RadioTileWithoutRef({ children, checked, disabled, description, icon, FORCE__className, ...props }, ref) {
|
|
764
|
+
const localRef = React$1.useRef(null);
|
|
765
|
+
const [focused, setFocused] = React$1.useState(false);
|
|
766
|
+
const generatedId = React$1.useId();
|
|
767
|
+
const labelId = `${props.id || generatedId}-label`;
|
|
768
|
+
const contextValue = React$1.useContext(RadioGroupContext);
|
|
769
|
+
const mergedChecked = checked ?? contextValue.value === props.value;
|
|
770
|
+
const mergedDisabled = disabled ?? contextValue.disabled;
|
|
771
|
+
const handleClick = () => {
|
|
772
|
+
localRef.current?.click();
|
|
773
|
+
};
|
|
774
|
+
const toggleFocus = () => {
|
|
775
|
+
setFocused((prev) => !prev);
|
|
776
|
+
};
|
|
777
|
+
React$1.useImperativeHandle(ref, () => localRef.current);
|
|
778
|
+
return /* @__PURE__ */ React$1.createElement(ListItem, {
|
|
779
|
+
as: "div",
|
|
780
|
+
"data-checked": mergedChecked,
|
|
781
|
+
"data-disabled": mergedDisabled,
|
|
782
|
+
"data-focused": focused,
|
|
783
|
+
"data-value": props.value,
|
|
784
|
+
FORCE__className: clsx(RadioTile_module_default.base, FORCE__className),
|
|
785
|
+
onClick: handleClick
|
|
786
|
+
}, /* @__PURE__ */ React$1.createElement(ListItem.Leading, null, /* @__PURE__ */ React$1.createElement(Radio, {
|
|
787
|
+
...props,
|
|
788
|
+
checked: mergedChecked,
|
|
789
|
+
disabled: mergedDisabled,
|
|
790
|
+
"aria-labelledby": labelId,
|
|
791
|
+
ref: localRef,
|
|
792
|
+
onFocus: toggleFocus,
|
|
793
|
+
onBlur: toggleFocus
|
|
794
|
+
})), /* @__PURE__ */ React$1.createElement(ListItem.Content, null, /* @__PURE__ */ React$1.createElement(ListItem.Label, { id: labelId }, children), description && /* @__PURE__ */ React$1.createElement(ListItem.Description, null, description)), /* @__PURE__ */ React$1.createElement(ListItem.Trailing, null, icon));
|
|
795
|
+
}
|
|
796
|
+
/**
|
|
797
|
+
* A card variation of a radio button component. You will typically use this component within a RadioGroup component.
|
|
798
|
+
*/
|
|
799
|
+
const RadioTile = fixedForwardRef(RadioTileWithoutRef);
|
|
800
|
+
//#endregion
|
|
801
|
+
//#region src/components/Switch/Switch.module.css
|
|
802
|
+
var Switch_module_default = { "switch": "capra-Switch-module-16LYpW-switch" };
|
|
803
|
+
//#endregion
|
|
804
|
+
//#region src/components/Switch/Switch.tsx
|
|
805
|
+
const Switch = React$1.forwardRef((props, ref) => {
|
|
806
|
+
const { size = "md", FORCE__className: classNameOverride, ...inputProps } = props;
|
|
807
|
+
return /* @__PURE__ */ React$1.createElement("input", {
|
|
808
|
+
...inputProps,
|
|
809
|
+
"aria-disabled": inputProps.disabled,
|
|
810
|
+
className: clsx(Switch_module_default.switch, classNameOverride),
|
|
811
|
+
"data-size": size,
|
|
812
|
+
"data-disabled": inputProps.disabled,
|
|
813
|
+
ref,
|
|
814
|
+
role: "switch",
|
|
815
|
+
type: "checkbox"
|
|
816
|
+
});
|
|
817
|
+
});
|
|
818
|
+
Switch.displayName = "Switch";
|
|
819
|
+
//#endregion
|
|
820
|
+
//#region src/components/Tag/Tag.module.css
|
|
821
|
+
var Tag_module_default = {
|
|
822
|
+
"base": "capra-Tag-module-OZG-Nq-base",
|
|
823
|
+
"delete": "capra-Tag-module-OZG-Nq-delete",
|
|
824
|
+
"dragHandle": "capra-Tag-module-OZG-Nq-dragHandle",
|
|
825
|
+
"label": "capra-Tag-module-OZG-Nq-label"
|
|
826
|
+
};
|
|
827
|
+
//#endregion
|
|
828
|
+
//#region src/components/Tag/Tag.tsx
|
|
829
|
+
const tagColors = [
|
|
830
|
+
"default",
|
|
831
|
+
"accent",
|
|
832
|
+
"danger",
|
|
833
|
+
"warning",
|
|
834
|
+
"info",
|
|
835
|
+
"success",
|
|
836
|
+
"highlight",
|
|
837
|
+
"brand",
|
|
838
|
+
"amber",
|
|
839
|
+
"blue",
|
|
840
|
+
"bronze",
|
|
841
|
+
"brown",
|
|
842
|
+
"criblTeal",
|
|
843
|
+
"crimson",
|
|
844
|
+
"cyan",
|
|
845
|
+
"gold",
|
|
846
|
+
"grass",
|
|
847
|
+
"green",
|
|
848
|
+
"indigo",
|
|
849
|
+
"iris",
|
|
850
|
+
"jade",
|
|
851
|
+
"lime",
|
|
852
|
+
"mint",
|
|
853
|
+
"orange",
|
|
854
|
+
"pink",
|
|
855
|
+
"plum",
|
|
856
|
+
"purple",
|
|
857
|
+
"red",
|
|
858
|
+
"ruby",
|
|
859
|
+
"sky",
|
|
860
|
+
"teal",
|
|
861
|
+
"tomato",
|
|
862
|
+
"violet",
|
|
863
|
+
"yellow"
|
|
864
|
+
];
|
|
865
|
+
/**
|
|
866
|
+
* A tag component for displaying a label and an optional icon.
|
|
867
|
+
*/
|
|
868
|
+
function Tag({ draggable, color = "default", icon: Icon, children, onDelete, onDragStart, onDragEnd, onHandleKeydown, FORCE__className: classNameOverride, ...props }) {
|
|
869
|
+
const baseRef = React$1.useRef(null);
|
|
870
|
+
const draggableDebounceRef = React$1.useRef(0);
|
|
871
|
+
const toggleDraggable = (value) => {
|
|
872
|
+
clearTimeout(draggableDebounceRef.current);
|
|
873
|
+
if (value) {
|
|
874
|
+
draggableDebounceRef.current = 0;
|
|
875
|
+
baseRef.current?.setAttribute("draggable", "true");
|
|
876
|
+
} else draggableDebounceRef.current = window.setTimeout(() => {
|
|
877
|
+
baseRef.current?.setAttribute("draggable", "false");
|
|
878
|
+
}, 100);
|
|
879
|
+
};
|
|
880
|
+
React$1.useEffect(() => {
|
|
881
|
+
return () => {
|
|
882
|
+
clearTimeout(draggableDebounceRef.current);
|
|
883
|
+
};
|
|
884
|
+
}, []);
|
|
885
|
+
return /* @__PURE__ */ React$1.createElement("span", {
|
|
886
|
+
...props,
|
|
887
|
+
ref: baseRef,
|
|
888
|
+
className: clsx(Tag_module_default.base, classNameOverride),
|
|
889
|
+
"data-color": color,
|
|
890
|
+
onDragStart,
|
|
891
|
+
onDragEnd
|
|
892
|
+
}, draggable ? /* @__PURE__ */ React$1.createElement("span", {
|
|
893
|
+
"aria-label": "Drag grip",
|
|
894
|
+
className: Tag_module_default.dragHandle,
|
|
895
|
+
onMouseEnter: () => toggleDraggable(true),
|
|
896
|
+
onMouseLeave: () => toggleDraggable(false),
|
|
897
|
+
role: "button",
|
|
898
|
+
tabIndex: 0,
|
|
899
|
+
onKeyDown: onHandleKeydown
|
|
900
|
+
}, /* @__PURE__ */ React$1.createElement(DragGrip, { size: "xs" })) : null, Icon && /* @__PURE__ */ React$1.createElement(Icon, { size: "xs" }), /* @__PURE__ */ React$1.createElement("span", { className: Tag_module_default.label }, children), onDelete ? /* @__PURE__ */ React$1.createElement(IconButton, {
|
|
901
|
+
variant: "tertiary",
|
|
902
|
+
appearance: "neutral",
|
|
903
|
+
icon: CloseOutlined,
|
|
904
|
+
"aria-label": "Delete",
|
|
905
|
+
size: "xs",
|
|
906
|
+
onClick: onDelete
|
|
907
|
+
}) : null);
|
|
908
|
+
}
|
|
909
|
+
//#endregion
|
|
910
|
+
//#region src/components/Checkbox/Checkbox.module.css
|
|
911
|
+
var Checkbox_module_default = {
|
|
912
|
+
"base": "capra-Checkbox-module-EcGsRq-base",
|
|
913
|
+
"input": "capra-Checkbox-module-EcGsRq-input",
|
|
914
|
+
"label": "capra-Checkbox-module-EcGsRq-label"
|
|
915
|
+
};
|
|
916
|
+
//#endregion
|
|
917
|
+
//#region src/components/Checkbox/Checkbox.tsx
|
|
918
|
+
const IndeterminateIcon = ({ ...props }) => /* @__PURE__ */ React$1.createElement("svg", {
|
|
919
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
920
|
+
viewBox: "0 0 16 16",
|
|
921
|
+
fill: "currentColor",
|
|
922
|
+
...props
|
|
923
|
+
}, /* @__PURE__ */ React$1.createElement("path", { d: "M4 8C4 7.44772 4.44772 7 5 7H11C11.5523 7 12 7.44772 12 8V8C12 8.55228 11.5523 9 11 9H5C4.44772 9 4 8.55228 4 8V8Z" }));
|
|
924
|
+
const CheckedIcon = ({ ...props }) => /* @__PURE__ */ React$1.createElement("svg", {
|
|
925
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
926
|
+
viewBox: "0 0 16 16",
|
|
927
|
+
fill: "currentColor",
|
|
928
|
+
...props
|
|
929
|
+
}, /* @__PURE__ */ React$1.createElement("path", { d: "M11.3431 4.19118C11.532 3.90253 11.9196 3.82098 12.2084 4.00954C12.4971 4.19832 12.5785 4.58593 12.39 4.87477L7.85584 11.8084C7.75571 11.9614 7.59388 12.0635 7.41248 12.0867C7.23094 12.1099 7.04791 12.0516 6.91248 11.9285L3.97889 9.26247C3.72384 9.03039 3.7052 8.63501 3.9369 8.37966C4.16906 8.12441 4.56531 8.10565 4.82069 8.33766L7.21034 10.5105L11.3431 4.19118Z" }));
|
|
930
|
+
/**
|
|
931
|
+
* Checkbox component for capturing boolean user input.
|
|
932
|
+
* Supports controlled and uncontrolled modes with proper accessibility.
|
|
933
|
+
*
|
|
934
|
+
* @example
|
|
935
|
+
* // Uncontrolled
|
|
936
|
+
* <Checkbox defaultChecked>Accept terms</Checkbox>
|
|
937
|
+
*
|
|
938
|
+
* // Controlled
|
|
939
|
+
* <Checkbox checked={isChecked} onChange={handleChange}>Subscribe</Checkbox>
|
|
940
|
+
*/
|
|
941
|
+
const Checkbox = React$1.forwardRef((props, ref) => {
|
|
942
|
+
const generatedId = React$1.useId();
|
|
943
|
+
const id = props.id ?? generatedId;
|
|
944
|
+
const { indeterminate, checked, defaultChecked, children, onChange, FORCE__className: classNameOverride, ...inputProps } = props;
|
|
945
|
+
const isControlled = checked !== void 0;
|
|
946
|
+
const [internalChecked, setInternalChecked] = React$1.useState(defaultChecked ?? false);
|
|
947
|
+
const isChecked = isControlled ? checked : internalChecked;
|
|
948
|
+
const handleChange = (e) => {
|
|
949
|
+
if (!isControlled) setInternalChecked(e.target.checked);
|
|
950
|
+
onChange?.(e);
|
|
951
|
+
};
|
|
952
|
+
const handleKeyDown = (e) => {
|
|
953
|
+
if (e.key === "Enter") {
|
|
954
|
+
e.preventDefault();
|
|
955
|
+
e.currentTarget.click();
|
|
956
|
+
}
|
|
957
|
+
inputProps.onKeyDown?.(e);
|
|
958
|
+
};
|
|
959
|
+
const hasLabel = Boolean(children);
|
|
960
|
+
return /* @__PURE__ */ React$1.createElement("div", {
|
|
961
|
+
className: clsx(Checkbox_module_default.base, classNameOverride),
|
|
962
|
+
"data-disabled": inputProps.disabled,
|
|
963
|
+
"data-has-label": hasLabel ? "true" : "false"
|
|
964
|
+
}, /* @__PURE__ */ React$1.createElement("div", {
|
|
965
|
+
className: Checkbox_module_default.input,
|
|
966
|
+
"data-indeterminate": indeterminate
|
|
967
|
+
}, /* @__PURE__ */ React$1.createElement("input", {
|
|
968
|
+
...inputProps,
|
|
969
|
+
id,
|
|
970
|
+
checked: isChecked,
|
|
971
|
+
onChange: handleChange,
|
|
972
|
+
onKeyDown: handleKeyDown,
|
|
973
|
+
"data-indeterminate": indeterminate,
|
|
974
|
+
ref,
|
|
975
|
+
type: "checkbox"
|
|
976
|
+
}), indeterminate ? /* @__PURE__ */ React$1.createElement(IndeterminateIcon, null) : isChecked ? /* @__PURE__ */ React$1.createElement(CheckedIcon, null) : null), children && /* @__PURE__ */ React$1.createElement("label", {
|
|
977
|
+
htmlFor: id,
|
|
978
|
+
className: Checkbox_module_default.label
|
|
979
|
+
}, children));
|
|
980
|
+
});
|
|
981
|
+
Checkbox.displayName = "Checkbox";
|
|
982
|
+
//#endregion
|
|
983
|
+
//#region src/components/Collapse/Collapse.module.css
|
|
984
|
+
var Collapse_module_default = {
|
|
985
|
+
"actions": "capra-Collapse-module-n6NT_q-actions",
|
|
986
|
+
"chevron": "capra-Collapse-module-n6NT_q-chevron",
|
|
987
|
+
"header": "capra-Collapse-module-n6NT_q-header",
|
|
988
|
+
"panel": "capra-Collapse-module-n6NT_q-panel",
|
|
989
|
+
"panelInner": "capra-Collapse-module-n6NT_q-panelInner",
|
|
990
|
+
"root": "capra-Collapse-module-n6NT_q-root",
|
|
991
|
+
"title": "capra-Collapse-module-n6NT_q-title",
|
|
992
|
+
"trigger": "capra-Collapse-module-n6NT_q-trigger",
|
|
993
|
+
"triggerContent": "capra-Collapse-module-n6NT_q-triggerContent"
|
|
994
|
+
};
|
|
995
|
+
//#endregion
|
|
996
|
+
//#region src/components/Collapse/Collapse.tsx
|
|
997
|
+
function CollapseTriggerInternal({ title }) {
|
|
998
|
+
return /* @__PURE__ */ React$1.createElement(Button$1, {
|
|
999
|
+
slot: "trigger",
|
|
1000
|
+
className: Collapse_module_default.trigger
|
|
1001
|
+
}, /* @__PURE__ */ React$1.createElement("span", { className: Collapse_module_default.triggerContent }, /* @__PURE__ */ React$1.createElement("span", {
|
|
1002
|
+
className: Collapse_module_default.chevron,
|
|
1003
|
+
"aria-hidden": "true"
|
|
1004
|
+
}, /* @__PURE__ */ React$1.createElement(ChevronRight, { size: "sm" })), /* @__PURE__ */ React$1.createElement("span", {
|
|
1005
|
+
role: "heading",
|
|
1006
|
+
"aria-level": 3,
|
|
1007
|
+
className: Collapse_module_default.title
|
|
1008
|
+
}, title)));
|
|
1009
|
+
}
|
|
1010
|
+
/**
|
|
1011
|
+
* A collapsible disclosure section with an expandable header and panel.
|
|
1012
|
+
*
|
|
1013
|
+
* Pass **`title`** for the header label, optional **`headerTrailingContentSlot`** for trailing actions
|
|
1014
|
+
* (switches, buttons), and the panel body via **`children`**.
|
|
1015
|
+
*/
|
|
1016
|
+
const Collapse = React$1.forwardRef(function Collapse({ FORCE__className: classNameOverride, title, headerTrailingContentSlot, children, id, defaultExpanded, isExpanded, onExpandedChange, isDisabled }, ref) {
|
|
1017
|
+
return /* @__PURE__ */ React$1.createElement(Disclosure, {
|
|
1018
|
+
ref,
|
|
1019
|
+
id,
|
|
1020
|
+
className: clsx(Collapse_module_default.root, classNameOverride),
|
|
1021
|
+
defaultExpanded,
|
|
1022
|
+
isExpanded,
|
|
1023
|
+
onExpandedChange,
|
|
1024
|
+
isDisabled
|
|
1025
|
+
}, /* @__PURE__ */ React$1.createElement("div", { className: Collapse_module_default.header }, /* @__PURE__ */ React$1.createElement(CollapseTriggerInternal, { title }), headerTrailingContentSlot != null ? /* @__PURE__ */ React$1.createElement("div", { className: Collapse_module_default.actions }, headerTrailingContentSlot) : null), /* @__PURE__ */ React$1.createElement(DisclosurePanel, { className: Collapse_module_default.panel }, /* @__PURE__ */ React$1.createElement("div", { className: Collapse_module_default.panelInner }, children)));
|
|
1026
|
+
});
|
|
1027
|
+
Collapse.displayName = "Collapse";
|
|
1028
|
+
//#endregion
|
|
1029
|
+
//#region src/components/InputRow/InputRow.module.css
|
|
1030
|
+
var InputRow_module_default = {
|
|
1031
|
+
"addon": "capra-InputRow-module-6vZh0q-addon",
|
|
1032
|
+
"row": "capra-InputRow-module-6vZh0q-row"
|
|
1033
|
+
};
|
|
1034
|
+
//#endregion
|
|
1035
|
+
//#region src/components/InputRow/InputRow.tsx
|
|
1036
|
+
function InputRowAddon({ children, size = "md", FORCE__className: classNameOverride, ...rest }) {
|
|
1037
|
+
return /* @__PURE__ */ React$1.createElement("span", {
|
|
1038
|
+
...rest,
|
|
1039
|
+
className: clsx(InputRow_module_default.addon, classNameOverride),
|
|
1040
|
+
"data-capra-input-row-addon": "",
|
|
1041
|
+
"data-size": size
|
|
1042
|
+
}, typeof children === "string" ? /* @__PURE__ */ React$1.createElement(Text, null, children) : children);
|
|
1043
|
+
}
|
|
1044
|
+
InputRowAddon.displayName = "InputRow.Addon";
|
|
1045
|
+
function InputRowRoot({ children, FORCE__className: classNameOverride, role: roleProp, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }) {
|
|
1046
|
+
const role = roleProp ?? (ariaLabel != null || ariaLabelledBy != null ? "group" : void 0);
|
|
1047
|
+
return /* @__PURE__ */ React$1.createElement("div", {
|
|
1048
|
+
...rest,
|
|
1049
|
+
"aria-label": ariaLabel,
|
|
1050
|
+
"aria-labelledby": ariaLabelledBy,
|
|
1051
|
+
className: clsx(InputRow_module_default.row, classNameOverride),
|
|
1052
|
+
role
|
|
1053
|
+
}, children);
|
|
1054
|
+
}
|
|
1055
|
+
InputRowRoot.displayName = "InputRow";
|
|
1056
|
+
/**
|
|
1057
|
+
* Horizontal flex container for visually joining inputs and addons.
|
|
1058
|
+
*/
|
|
1059
|
+
const InputRow = Object.assign(InputRowRoot, { Addon: InputRowAddon });
|
|
1060
|
+
//#endregion
|
|
1061
|
+
//#region src/components/TextField/TextField.tsx
|
|
1062
|
+
/**
|
|
1063
|
+
* Single-line text field with optional label and helper text.
|
|
1064
|
+
*/
|
|
1065
|
+
const TextField = React$1.forwardRef((props, ref) => {
|
|
1066
|
+
const { label, helperText, layout, showCount = false, appearance = "default", value, required, id, maxLength: maxLengthProp, FORCE__className: classNameOverride, leadingSlot, onChange, size = "md", trailingSlot, disabled, readOnly, placeholder, name, type = "text", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, style: _style, ...inputRest } = props;
|
|
1067
|
+
const currentValue = String(value ?? "");
|
|
1068
|
+
const ariaFieldProps = {
|
|
1069
|
+
isDisabled: disabled,
|
|
1070
|
+
isReadOnly: readOnly,
|
|
1071
|
+
isRequired: required,
|
|
1072
|
+
isInvalid: appearance === "danger",
|
|
1073
|
+
validationBehavior: "aria",
|
|
1074
|
+
type,
|
|
1075
|
+
id,
|
|
1076
|
+
name,
|
|
1077
|
+
onChange,
|
|
1078
|
+
"aria-label": ariaLabel,
|
|
1079
|
+
"aria-labelledby": ariaLabelledBy,
|
|
1080
|
+
...value !== void 0 ? { value: currentValue } : {}
|
|
1081
|
+
};
|
|
1082
|
+
let countNode;
|
|
1083
|
+
if (showCount) {
|
|
1084
|
+
const currentCount = currentValue.length;
|
|
1085
|
+
countNode = maxLengthProp !== void 0 ? `${currentCount} / ${maxLengthProp}` : `${currentCount}`;
|
|
1086
|
+
}
|
|
1087
|
+
return /* @__PURE__ */ React$1.createElement(TextField$1, {
|
|
1088
|
+
...ariaFieldProps,
|
|
1089
|
+
className: fieldLayout_module_default.field,
|
|
1090
|
+
"data-capra-field-root": "",
|
|
1091
|
+
"data-layout": layout
|
|
1092
|
+
}, /* @__PURE__ */ React$1.createElement(Label$1, { required }, label), /* @__PURE__ */ React$1.createElement(TextInput, {
|
|
1093
|
+
ref,
|
|
1094
|
+
...inputRest,
|
|
1095
|
+
appearance,
|
|
1096
|
+
leadingSlot,
|
|
1097
|
+
maxLength: maxLengthProp,
|
|
1098
|
+
placeholder,
|
|
1099
|
+
required,
|
|
1100
|
+
size,
|
|
1101
|
+
trailingSlot,
|
|
1102
|
+
type,
|
|
1103
|
+
FORCE__className: classNameOverride
|
|
1104
|
+
}), /* @__PURE__ */ React$1.createElement(HelperText, {
|
|
1105
|
+
appearance,
|
|
1106
|
+
countText: countNode,
|
|
1107
|
+
disabled
|
|
1108
|
+
}, helperText));
|
|
1109
|
+
});
|
|
1110
|
+
TextField.displayName = "TextField";
|
|
1111
|
+
//#endregion
|
|
1112
|
+
//#region src/components/PasswordField/PasswordField.tsx
|
|
1113
|
+
/**
|
|
1114
|
+
* Password field with a trailing control to show or hide the value.
|
|
1115
|
+
* Composes {@link TextField}; visibility toggles the underlying input between `password` and `text`.
|
|
1116
|
+
*/
|
|
1117
|
+
const PasswordField = React$1.forwardRef((props, ref) => {
|
|
1118
|
+
const { disabled, ...textFieldProps } = props;
|
|
1119
|
+
const [passwordVisible, setPasswordVisible] = React$1.useState(false);
|
|
1120
|
+
const toggleVisible = React$1.useCallback(() => {
|
|
1121
|
+
setPasswordVisible((v) => !v);
|
|
1122
|
+
}, []);
|
|
1123
|
+
const inputType = passwordVisible ? "text" : "password";
|
|
1124
|
+
const trailingSlot = /* @__PURE__ */ React$1.createElement(IconButton, {
|
|
1125
|
+
type: "button",
|
|
1126
|
+
variant: "tertiary",
|
|
1127
|
+
size: "sm",
|
|
1128
|
+
icon: passwordVisible ? EyeInvisibleOutlined : EyeOutlined,
|
|
1129
|
+
"aria-label": passwordVisible ? "Hide password" : "Show password",
|
|
1130
|
+
"aria-pressed": passwordVisible,
|
|
1131
|
+
disabled,
|
|
1132
|
+
onClick: toggleVisible
|
|
1133
|
+
});
|
|
1134
|
+
return /* @__PURE__ */ React$1.createElement(TextField, {
|
|
1135
|
+
ref,
|
|
1136
|
+
...textFieldProps,
|
|
1137
|
+
disabled,
|
|
1138
|
+
type: inputType,
|
|
1139
|
+
trailingSlot
|
|
1140
|
+
});
|
|
1141
|
+
});
|
|
1142
|
+
PasswordField.displayName = "PasswordField";
|
|
1143
|
+
//#endregion
|
|
1144
|
+
//#region src/components/NumberField/NumberField.module.css
|
|
1145
|
+
var NumberField_module_default = {
|
|
1146
|
+
"slotAlign": "capra-NumberField-module-crO5za-slotAlign",
|
|
1147
|
+
"stepButton": "capra-NumberField-module-crO5za-stepButton",
|
|
1148
|
+
"stepDivider": "capra-NumberField-module-crO5za-stepDivider",
|
|
1149
|
+
"stepIcon": "capra-NumberField-module-crO5za-stepIcon",
|
|
1150
|
+
"stepper": "capra-NumberField-module-crO5za-stepper",
|
|
1151
|
+
"withStepper": "capra-NumberField-module-crO5za-withStepper"
|
|
1152
|
+
};
|
|
1153
|
+
//#endregion
|
|
1154
|
+
//#region src/components/NumberField/NumberField.tsx
|
|
1155
|
+
function parseFieldNumber(v) {
|
|
1156
|
+
if (v === void 0 || v === "") return;
|
|
1157
|
+
const raw = Array.isArray(v) ? v[0] : v;
|
|
1158
|
+
const n = typeof raw === "number" ? raw : parseFloat(String(raw));
|
|
1159
|
+
return Number.isFinite(n) ? n : void 0;
|
|
1160
|
+
}
|
|
1161
|
+
/**
|
|
1162
|
+
* Number field built on React Aria `NumberField`, with custom increment/decrement controls (native spinners hidden).
|
|
1163
|
+
*/
|
|
1164
|
+
const NumberField = React$1.forwardRef((props, ref) => {
|
|
1165
|
+
const { label, helperText, layout, appearance = "default", value, required, id, maxLength: maxLengthProp, FORCE__className: classNameOverride, "aria-describedby": ariaDescribedByFromUser, leadingSlot, onChange, size = "md", trailingSlot, defaultValue, disabled, readOnly, min, max, step: stepProp, placeholder, name, formatOptions, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, style: _style, ...inputRest } = props;
|
|
1166
|
+
const isControlled = value !== void 0;
|
|
1167
|
+
const step = stepProp ?? 1;
|
|
1168
|
+
const minValue = min;
|
|
1169
|
+
const maxValue = max;
|
|
1170
|
+
const numberValue = isControlled ? parseFieldNumber(value) : void 0;
|
|
1171
|
+
const defaultNumberValue = !isControlled ? parseFieldNumber(defaultValue) : void 0;
|
|
1172
|
+
const stepDisabled = Boolean(disabled || readOnly);
|
|
1173
|
+
const ariaFieldProps = {
|
|
1174
|
+
id,
|
|
1175
|
+
minValue,
|
|
1176
|
+
maxValue,
|
|
1177
|
+
step,
|
|
1178
|
+
formatOptions,
|
|
1179
|
+
isDisabled: disabled,
|
|
1180
|
+
isReadOnly: readOnly,
|
|
1181
|
+
isRequired: required,
|
|
1182
|
+
isInvalid: appearance === "danger",
|
|
1183
|
+
validationBehavior: "aria",
|
|
1184
|
+
name,
|
|
1185
|
+
onChange,
|
|
1186
|
+
"aria-label": ariaLabel,
|
|
1187
|
+
"aria-labelledby": ariaLabelledBy,
|
|
1188
|
+
"aria-describedby": ariaDescribedByFromUser,
|
|
1189
|
+
...isControlled ? { value: numberValue } : { defaultValue: defaultNumberValue }
|
|
1190
|
+
};
|
|
1191
|
+
return /* @__PURE__ */ React$1.createElement(NumberField$1, {
|
|
1192
|
+
...ariaFieldProps,
|
|
1193
|
+
className: fieldLayout_module_default.field,
|
|
1194
|
+
"data-capra-field-root": "",
|
|
1195
|
+
"data-layout": layout
|
|
1196
|
+
}, /* @__PURE__ */ React$1.createElement(Label$1, { required }, label), /* @__PURE__ */ React$1.createElement(Group, {
|
|
1197
|
+
"data-capra-text-input": "",
|
|
1198
|
+
"data-size": size,
|
|
1199
|
+
className: clsx(TextInput_module_default.wrapper, NumberField_module_default.withStepper, classNameOverride)
|
|
1200
|
+
}, leadingSlot && /* @__PURE__ */ React$1.createElement("span", { className: clsx(TextInput_module_default.leadingSlot, NumberField_module_default.slotAlign) }, leadingSlot), /* @__PURE__ */ React$1.createElement(Input, {
|
|
1201
|
+
ref,
|
|
1202
|
+
...inputRest,
|
|
1203
|
+
maxLength: maxLengthProp,
|
|
1204
|
+
placeholder,
|
|
1205
|
+
className: TextInput_module_default.input,
|
|
1206
|
+
"aria-invalid": appearance === "danger",
|
|
1207
|
+
"aria-required": required
|
|
1208
|
+
}), (trailingSlot || appearance === "danger" || appearance === "warning") && /* @__PURE__ */ React$1.createElement("span", { className: clsx(TextInput_module_default.trailingSlot, NumberField_module_default.slotAlign) }, trailingSlot, appearance === "warning" && /* @__PURE__ */ React$1.createElement("span", {
|
|
1209
|
+
className: TextInput_module_default.warningIndicator,
|
|
1210
|
+
"aria-hidden": true
|
|
1211
|
+
}, /* @__PURE__ */ React$1.createElement(WarningOutlined, { size: "sm" })), appearance === "danger" && /* @__PURE__ */ React$1.createElement("span", {
|
|
1212
|
+
className: TextInput_module_default.errorIndicator,
|
|
1213
|
+
"aria-hidden": true
|
|
1214
|
+
}, /* @__PURE__ */ React$1.createElement(Exclamation, { size: "sm" }))), /* @__PURE__ */ React$1.createElement("div", {
|
|
1215
|
+
className: NumberField_module_default.stepper,
|
|
1216
|
+
"aria-hidden": stepDisabled
|
|
1217
|
+
}, /* @__PURE__ */ React$1.createElement(Button$1, {
|
|
1218
|
+
type: "button",
|
|
1219
|
+
slot: "increment",
|
|
1220
|
+
className: NumberField_module_default.stepButton
|
|
1221
|
+
}, /* @__PURE__ */ React$1.createElement("span", { className: NumberField_module_default.stepIcon }, /* @__PURE__ */ React$1.createElement(ChevronUp, { size: "xs" }))), /* @__PURE__ */ React$1.createElement("div", { className: NumberField_module_default.stepDivider }), /* @__PURE__ */ React$1.createElement(Button$1, {
|
|
1222
|
+
type: "button",
|
|
1223
|
+
slot: "decrement",
|
|
1224
|
+
className: NumberField_module_default.stepButton
|
|
1225
|
+
}, /* @__PURE__ */ React$1.createElement("span", { className: NumberField_module_default.stepIcon }, /* @__PURE__ */ React$1.createElement(ChevronDown, { size: "xs" }))))), /* @__PURE__ */ React$1.createElement(HelperText, {
|
|
1226
|
+
appearance,
|
|
1227
|
+
disabled
|
|
1228
|
+
}, helperText));
|
|
1229
|
+
});
|
|
1230
|
+
NumberField.displayName = "NumberField";
|
|
1231
|
+
//#endregion
|
|
1232
|
+
//#region ../../node_modules/.pnpm/@internationalized+date@3.12.1/node_modules/@internationalized/date/dist/private/utils.mjs
|
|
1233
|
+
function $09ec6a572d60460f$export$842a2cf37af977e1(amount, numerator) {
|
|
1234
|
+
return amount - numerator * Math.floor(amount / numerator);
|
|
1235
|
+
}
|
|
1236
|
+
//#endregion
|
|
1237
|
+
//#region ../../node_modules/.pnpm/@internationalized+date@3.12.1/node_modules/@internationalized/date/dist/private/calendars/GregorianCalendar.mjs
|
|
1238
|
+
const $93635573935797de$var$EPOCH = 1721426;
|
|
1239
|
+
function $93635573935797de$export$f297eb839006d339(era, year, month, day) {
|
|
1240
|
+
year = $93635573935797de$export$c36e0ecb2d4fa69d(era, year);
|
|
1241
|
+
let y1 = year - 1;
|
|
1242
|
+
let monthOffset = -2;
|
|
1243
|
+
if (month <= 2) monthOffset = 0;
|
|
1244
|
+
else if ($93635573935797de$export$553d7fa8e3805fc0(year)) monthOffset = -1;
|
|
1245
|
+
return $93635573935797de$var$EPOCH - 1 + 365 * y1 + Math.floor(y1 / 4) - Math.floor(y1 / 100) + Math.floor(y1 / 400) + Math.floor((367 * month - 362) / 12 + monthOffset + day);
|
|
1246
|
+
}
|
|
1247
|
+
function $93635573935797de$export$553d7fa8e3805fc0(year) {
|
|
1248
|
+
return year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
|
|
1249
|
+
}
|
|
1250
|
+
function $93635573935797de$export$c36e0ecb2d4fa69d(era, year) {
|
|
1251
|
+
return era === "BC" ? 1 - year : year;
|
|
1252
|
+
}
|
|
1253
|
+
function $93635573935797de$export$4475b7e617eb123c(year) {
|
|
1254
|
+
let era = "AD";
|
|
1255
|
+
if (year <= 0) {
|
|
1256
|
+
era = "BC";
|
|
1257
|
+
year = 1 - year;
|
|
1258
|
+
}
|
|
1259
|
+
return [era, year];
|
|
1260
|
+
}
|
|
1261
|
+
const $93635573935797de$var$daysInMonth = {
|
|
1262
|
+
standard: [
|
|
1263
|
+
31,
|
|
1264
|
+
28,
|
|
1265
|
+
31,
|
|
1266
|
+
30,
|
|
1267
|
+
31,
|
|
1268
|
+
30,
|
|
1269
|
+
31,
|
|
1270
|
+
31,
|
|
1271
|
+
30,
|
|
1272
|
+
31,
|
|
1273
|
+
30,
|
|
1274
|
+
31
|
|
1275
|
+
],
|
|
1276
|
+
leapyear: [
|
|
1277
|
+
31,
|
|
1278
|
+
29,
|
|
1279
|
+
31,
|
|
1280
|
+
30,
|
|
1281
|
+
31,
|
|
1282
|
+
30,
|
|
1283
|
+
31,
|
|
1284
|
+
31,
|
|
1285
|
+
30,
|
|
1286
|
+
31,
|
|
1287
|
+
30,
|
|
1288
|
+
31
|
|
1289
|
+
]
|
|
1290
|
+
};
|
|
1291
|
+
var $93635573935797de$export$80ee6245ec4f29ec = class {
|
|
1292
|
+
fromJulianDay(jd) {
|
|
1293
|
+
let jd0 = jd;
|
|
1294
|
+
let depoch = jd0 - $93635573935797de$var$EPOCH;
|
|
1295
|
+
let quadricent = Math.floor(depoch / 146097);
|
|
1296
|
+
let dqc = $09ec6a572d60460f$export$842a2cf37af977e1(depoch, 146097);
|
|
1297
|
+
let cent = Math.floor(dqc / 36524);
|
|
1298
|
+
let dcent = $09ec6a572d60460f$export$842a2cf37af977e1(dqc, 36524);
|
|
1299
|
+
let quad = Math.floor(dcent / 1461);
|
|
1300
|
+
let dquad = $09ec6a572d60460f$export$842a2cf37af977e1(dcent, 1461);
|
|
1301
|
+
let yindex = Math.floor(dquad / 365);
|
|
1302
|
+
let [era, year] = $93635573935797de$export$4475b7e617eb123c(quadricent * 400 + cent * 100 + quad * 4 + yindex + (cent !== 4 && yindex !== 4 ? 1 : 0));
|
|
1303
|
+
let yearDay = jd0 - $93635573935797de$export$f297eb839006d339(era, year, 1, 1);
|
|
1304
|
+
let leapAdj = 2;
|
|
1305
|
+
if (jd0 < $93635573935797de$export$f297eb839006d339(era, year, 3, 1)) leapAdj = 0;
|
|
1306
|
+
else if ($93635573935797de$export$553d7fa8e3805fc0(year)) leapAdj = 1;
|
|
1307
|
+
let month = Math.floor(((yearDay + leapAdj) * 12 + 373) / 367);
|
|
1308
|
+
return new $2aaf608024c21ca1$export$99faa760c7908e4f(era, year, month, jd0 - $93635573935797de$export$f297eb839006d339(era, year, month, 1) + 1);
|
|
1309
|
+
}
|
|
1310
|
+
toJulianDay(date) {
|
|
1311
|
+
return $93635573935797de$export$f297eb839006d339(date.era, date.year, date.month, date.day);
|
|
1312
|
+
}
|
|
1313
|
+
getDaysInMonth(date) {
|
|
1314
|
+
return $93635573935797de$var$daysInMonth[$93635573935797de$export$553d7fa8e3805fc0(date.year) ? "leapyear" : "standard"][date.month - 1];
|
|
1315
|
+
}
|
|
1316
|
+
getMonthsInYear(date) {
|
|
1317
|
+
return 12;
|
|
1318
|
+
}
|
|
1319
|
+
getDaysInYear(date) {
|
|
1320
|
+
return $93635573935797de$export$553d7fa8e3805fc0(date.year) ? 366 : 365;
|
|
1321
|
+
}
|
|
1322
|
+
getMaximumMonthsInYear() {
|
|
1323
|
+
return 12;
|
|
1324
|
+
}
|
|
1325
|
+
getMaximumDaysInMonth() {
|
|
1326
|
+
return 31;
|
|
1327
|
+
}
|
|
1328
|
+
getYearsInEra(date) {
|
|
1329
|
+
return 9999;
|
|
1330
|
+
}
|
|
1331
|
+
getEras() {
|
|
1332
|
+
return ["BC", "AD"];
|
|
1333
|
+
}
|
|
1334
|
+
isInverseEra(date) {
|
|
1335
|
+
return date.era === "BC";
|
|
1336
|
+
}
|
|
1337
|
+
balanceDate(date) {
|
|
1338
|
+
if (date.year <= 0) {
|
|
1339
|
+
date.era = date.era === "BC" ? "AD" : "BC";
|
|
1340
|
+
date.year = 1 - date.year;
|
|
1341
|
+
}
|
|
1342
|
+
}
|
|
1343
|
+
constructor() {
|
|
1344
|
+
this.identifier = "gregory";
|
|
1345
|
+
}
|
|
1346
|
+
};
|
|
1347
|
+
//#endregion
|
|
1348
|
+
//#region ../../node_modules/.pnpm/@internationalized+date@3.12.1/node_modules/@internationalized/date/dist/private/queries.mjs
|
|
1349
|
+
function $ad063034c8620db8$export$ea39ec197993aef0(a, b) {
|
|
1350
|
+
b = $d07e34cce18680fd$export$b4a036af3fc0b032(b, a.calendar);
|
|
1351
|
+
return a.era === b.era && a.year === b.year && a.month === b.month && a.day === b.day;
|
|
1352
|
+
}
|
|
1353
|
+
function $ad063034c8620db8$export$a18c89cbd24170ff(a, b) {
|
|
1354
|
+
b = $d07e34cce18680fd$export$b4a036af3fc0b032(b, a.calendar);
|
|
1355
|
+
a = $ad063034c8620db8$export$a5a3b454ada2268e(a);
|
|
1356
|
+
b = $ad063034c8620db8$export$a5a3b454ada2268e(b);
|
|
1357
|
+
return a.era === b.era && a.year === b.year && a.month === b.month;
|
|
1358
|
+
}
|
|
1359
|
+
function $ad063034c8620db8$export$dbc69fd56b53d5e(a, b) {
|
|
1360
|
+
return a.isEqual?.(b) ?? b.isEqual?.(a) ?? a.identifier === b.identifier;
|
|
1361
|
+
}
|
|
1362
|
+
function $ad063034c8620db8$export$68781ddf31c0090f(a, b) {
|
|
1363
|
+
return a.calendar.toJulianDay(a) - b.calendar.toJulianDay(b);
|
|
1364
|
+
}
|
|
1365
|
+
function $ad063034c8620db8$export$c19a80a9721b80f6(a, b) {
|
|
1366
|
+
return $ad063034c8620db8$var$timeToMs(a) - $ad063034c8620db8$var$timeToMs(b);
|
|
1367
|
+
}
|
|
1368
|
+
function $ad063034c8620db8$var$timeToMs(a) {
|
|
1369
|
+
return a.hour * 36e5 + a.minute * 6e4 + a.second * 1e3 + a.millisecond;
|
|
1370
|
+
}
|
|
1371
|
+
let $ad063034c8620db8$var$localTimeZone = null;
|
|
1372
|
+
let $ad063034c8620db8$var$localTimeZoneOverride = false;
|
|
1373
|
+
function $ad063034c8620db8$export$aa8b41735afcabd2() {
|
|
1374
|
+
if ($ad063034c8620db8$var$localTimeZone == null) $ad063034c8620db8$var$localTimeZone = new Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
1375
|
+
return $ad063034c8620db8$var$localTimeZone;
|
|
1376
|
+
}
|
|
1377
|
+
function $ad063034c8620db8$export$6ab69b273755230b() {
|
|
1378
|
+
return $ad063034c8620db8$var$localTimeZoneOverride;
|
|
1379
|
+
}
|
|
1380
|
+
function $ad063034c8620db8$export$a5a3b454ada2268e(date) {
|
|
1381
|
+
return date.subtract({ days: date.day - 1 });
|
|
1382
|
+
}
|
|
1383
|
+
function $ad063034c8620db8$export$5c333a116e949cdd(a, b) {
|
|
1384
|
+
if (a && b) return a.compare(b) <= 0 ? a : b;
|
|
1385
|
+
return a || b;
|
|
1386
|
+
}
|
|
1387
|
+
function $ad063034c8620db8$export$a75f2bff57811055(a, b) {
|
|
1388
|
+
if (a && b) return a.compare(b) >= 0 ? a : b;
|
|
1389
|
+
return a || b;
|
|
1390
|
+
}
|
|
1391
|
+
//#endregion
|
|
1392
|
+
//#region ../../node_modules/.pnpm/@internationalized+date@3.12.1/node_modules/@internationalized/date/dist/private/conversion.mjs
|
|
1393
|
+
function $d07e34cce18680fd$export$bd4fb2bc8bb06fb(date) {
|
|
1394
|
+
date = $d07e34cce18680fd$export$b4a036af3fc0b032(date, new $93635573935797de$export$80ee6245ec4f29ec());
|
|
1395
|
+
return $d07e34cce18680fd$var$epochFromParts($93635573935797de$export$c36e0ecb2d4fa69d(date.era, date.year), date.month, date.day, date.hour, date.minute, date.second, date.millisecond);
|
|
1396
|
+
}
|
|
1397
|
+
function $d07e34cce18680fd$var$epochFromParts(year, month, day, hour, minute, second, millisecond) {
|
|
1398
|
+
let date = /* @__PURE__ */ new Date();
|
|
1399
|
+
date.setUTCHours(hour, minute, second, millisecond);
|
|
1400
|
+
date.setUTCFullYear(year, month - 1, day);
|
|
1401
|
+
return date.getTime();
|
|
1402
|
+
}
|
|
1403
|
+
function $d07e34cce18680fd$export$59c99f3515d3493f(ms, timeZone) {
|
|
1404
|
+
if (timeZone === "UTC") return 0;
|
|
1405
|
+
if (ms > 0 && timeZone === $ad063034c8620db8$export$aa8b41735afcabd2() && !$ad063034c8620db8$export$6ab69b273755230b()) return new Date(ms).getTimezoneOffset() * -6e4;
|
|
1406
|
+
let { year, month, day, hour, minute, second } = $d07e34cce18680fd$var$getTimeZoneParts(ms, timeZone);
|
|
1407
|
+
return $d07e34cce18680fd$var$epochFromParts(year, month, day, hour, minute, second, 0) - Math.floor(ms / 1e3) * 1e3;
|
|
1408
|
+
}
|
|
1409
|
+
const $d07e34cce18680fd$var$formattersByTimeZone = /* @__PURE__ */ new Map();
|
|
1410
|
+
function $d07e34cce18680fd$var$getTimeZoneParts(ms, timeZone) {
|
|
1411
|
+
let formatter = $d07e34cce18680fd$var$formattersByTimeZone.get(timeZone);
|
|
1412
|
+
if (!formatter) {
|
|
1413
|
+
formatter = new Intl.DateTimeFormat("en-US", {
|
|
1414
|
+
timeZone,
|
|
1415
|
+
hour12: false,
|
|
1416
|
+
era: "short",
|
|
1417
|
+
year: "numeric",
|
|
1418
|
+
month: "numeric",
|
|
1419
|
+
day: "numeric",
|
|
1420
|
+
hour: "numeric",
|
|
1421
|
+
minute: "numeric",
|
|
1422
|
+
second: "numeric"
|
|
1423
|
+
});
|
|
1424
|
+
$d07e34cce18680fd$var$formattersByTimeZone.set(timeZone, formatter);
|
|
1425
|
+
}
|
|
1426
|
+
let parts = formatter.formatToParts(new Date(ms));
|
|
1427
|
+
let namedParts = {};
|
|
1428
|
+
for (let part of parts) if (part.type !== "literal") namedParts[part.type] = part.value;
|
|
1429
|
+
return {
|
|
1430
|
+
year: namedParts.era === "BC" || namedParts.era === "B" ? -namedParts.year + 1 : +namedParts.year,
|
|
1431
|
+
month: +namedParts.month,
|
|
1432
|
+
day: +namedParts.day,
|
|
1433
|
+
hour: namedParts.hour === "24" ? 0 : +namedParts.hour,
|
|
1434
|
+
minute: +namedParts.minute,
|
|
1435
|
+
second: +namedParts.second
|
|
1436
|
+
};
|
|
1437
|
+
}
|
|
1438
|
+
const $d07e34cce18680fd$var$DAYMILLIS = 864e5;
|
|
1439
|
+
function $d07e34cce18680fd$var$getValidWallTimes(date, timeZone, earlier, later) {
|
|
1440
|
+
return (earlier === later ? [earlier] : [earlier, later]).filter((absolute) => $d07e34cce18680fd$var$isValidWallTime(date, timeZone, absolute));
|
|
1441
|
+
}
|
|
1442
|
+
function $d07e34cce18680fd$var$isValidWallTime(date, timeZone, absolute) {
|
|
1443
|
+
let parts = $d07e34cce18680fd$var$getTimeZoneParts(absolute, timeZone);
|
|
1444
|
+
return date.year === parts.year && date.month === parts.month && date.day === parts.day && date.hour === parts.hour && date.minute === parts.minute && date.second === parts.second;
|
|
1445
|
+
}
|
|
1446
|
+
function $d07e34cce18680fd$export$5107c82f94518f5c(date, timeZone, disambiguation = "compatible") {
|
|
1447
|
+
let dateTime = $d07e34cce18680fd$export$b21e0b124e224484(date);
|
|
1448
|
+
if (timeZone === "UTC") return $d07e34cce18680fd$export$bd4fb2bc8bb06fb(dateTime);
|
|
1449
|
+
if (timeZone === $ad063034c8620db8$export$aa8b41735afcabd2() && disambiguation === "compatible" && !$ad063034c8620db8$export$6ab69b273755230b()) {
|
|
1450
|
+
dateTime = $d07e34cce18680fd$export$b4a036af3fc0b032(dateTime, new $93635573935797de$export$80ee6245ec4f29ec());
|
|
1451
|
+
let date = /* @__PURE__ */ new Date();
|
|
1452
|
+
let year = $93635573935797de$export$c36e0ecb2d4fa69d(dateTime.era, dateTime.year);
|
|
1453
|
+
date.setFullYear(year, dateTime.month - 1, dateTime.day);
|
|
1454
|
+
date.setHours(dateTime.hour, dateTime.minute, dateTime.second, dateTime.millisecond);
|
|
1455
|
+
return date.getTime();
|
|
1456
|
+
}
|
|
1457
|
+
let ms = $d07e34cce18680fd$export$bd4fb2bc8bb06fb(dateTime);
|
|
1458
|
+
let offsetBefore = $d07e34cce18680fd$export$59c99f3515d3493f(ms - $d07e34cce18680fd$var$DAYMILLIS, timeZone);
|
|
1459
|
+
let offsetAfter = $d07e34cce18680fd$export$59c99f3515d3493f(ms + $d07e34cce18680fd$var$DAYMILLIS, timeZone);
|
|
1460
|
+
let valid = $d07e34cce18680fd$var$getValidWallTimes(dateTime, timeZone, ms - offsetBefore, ms - offsetAfter);
|
|
1461
|
+
if (valid.length === 1) return valid[0];
|
|
1462
|
+
if (valid.length > 1) switch (disambiguation) {
|
|
1463
|
+
case "compatible":
|
|
1464
|
+
case "earlier": return valid[0];
|
|
1465
|
+
case "later": return valid[valid.length - 1];
|
|
1466
|
+
case "reject": throw new RangeError("Multiple possible absolute times found");
|
|
1467
|
+
}
|
|
1468
|
+
switch (disambiguation) {
|
|
1469
|
+
case "earlier": return Math.min(ms - offsetBefore, ms - offsetAfter);
|
|
1470
|
+
case "compatible":
|
|
1471
|
+
case "later": return Math.max(ms - offsetBefore, ms - offsetAfter);
|
|
1472
|
+
case "reject": throw new RangeError("No such absolute time found");
|
|
1473
|
+
}
|
|
1474
|
+
}
|
|
1475
|
+
function $d07e34cce18680fd$export$e67a095c620b86fe(dateTime, timeZone, disambiguation = "compatible") {
|
|
1476
|
+
return new Date($d07e34cce18680fd$export$5107c82f94518f5c(dateTime, timeZone, disambiguation));
|
|
1477
|
+
}
|
|
1478
|
+
function $d07e34cce18680fd$export$1b96692a1ba042ac(ms, timeZone) {
|
|
1479
|
+
let offset = $d07e34cce18680fd$export$59c99f3515d3493f(ms, timeZone);
|
|
1480
|
+
let date = new Date(ms + offset);
|
|
1481
|
+
let year = date.getUTCFullYear();
|
|
1482
|
+
let month = date.getUTCMonth() + 1;
|
|
1483
|
+
let day = date.getUTCDate();
|
|
1484
|
+
let hour = date.getUTCHours();
|
|
1485
|
+
let minute = date.getUTCMinutes();
|
|
1486
|
+
let second = date.getUTCSeconds();
|
|
1487
|
+
let millisecond = date.getUTCMilliseconds();
|
|
1488
|
+
return new $2aaf608024c21ca1$export$d3b7288e7994edea(year < 1 ? "BC" : "AD", year < 1 ? -year + 1 : year, month, day, timeZone, offset, hour, minute, second, millisecond);
|
|
1489
|
+
}
|
|
1490
|
+
function $d07e34cce18680fd$export$93522d1a439f3617(dateTime) {
|
|
1491
|
+
return new $2aaf608024c21ca1$export$99faa760c7908e4f(dateTime.calendar, dateTime.era, dateTime.year, dateTime.month, dateTime.day);
|
|
1492
|
+
}
|
|
1493
|
+
function $d07e34cce18680fd$export$b21e0b124e224484(date, time) {
|
|
1494
|
+
let hour = 0, minute = 0, second = 0, millisecond = 0;
|
|
1495
|
+
if ("timeZone" in date) ({hour: hour, minute: minute, second: second, millisecond: millisecond} = date);
|
|
1496
|
+
else if ("hour" in date && !time) return date;
|
|
1497
|
+
if (time) ({hour: hour, minute: minute, second: second, millisecond: millisecond} = time);
|
|
1498
|
+
return new $2aaf608024c21ca1$export$ca871e8dbb80966f(date.calendar, date.era, date.year, date.month, date.day, hour, minute, second, millisecond);
|
|
1499
|
+
}
|
|
1500
|
+
function $d07e34cce18680fd$export$b4a036af3fc0b032(date, calendar) {
|
|
1501
|
+
if ($ad063034c8620db8$export$dbc69fd56b53d5e(date.calendar, calendar)) return date;
|
|
1502
|
+
let calendarDate = calendar.fromJulianDay(date.calendar.toJulianDay(date));
|
|
1503
|
+
let copy = date.copy();
|
|
1504
|
+
copy.calendar = calendar;
|
|
1505
|
+
copy.era = calendarDate.era;
|
|
1506
|
+
copy.year = calendarDate.year;
|
|
1507
|
+
copy.month = calendarDate.month;
|
|
1508
|
+
copy.day = calendarDate.day;
|
|
1509
|
+
$435a2ceaa8778ed8$export$c4e2ecac49351ef2(copy);
|
|
1510
|
+
return copy;
|
|
1511
|
+
}
|
|
1512
|
+
function $d07e34cce18680fd$export$84c95a83c799e074(date, timeZone, disambiguation) {
|
|
1513
|
+
if (date instanceof $2aaf608024c21ca1$export$d3b7288e7994edea) {
|
|
1514
|
+
if (date.timeZone === timeZone) return date;
|
|
1515
|
+
return $d07e34cce18680fd$export$538b00033cc11c75(date, timeZone);
|
|
1516
|
+
}
|
|
1517
|
+
return $d07e34cce18680fd$export$1b96692a1ba042ac($d07e34cce18680fd$export$5107c82f94518f5c(date, timeZone, disambiguation), timeZone);
|
|
1518
|
+
}
|
|
1519
|
+
function $d07e34cce18680fd$export$83aac07b4c37b25(date) {
|
|
1520
|
+
let ms = $d07e34cce18680fd$export$bd4fb2bc8bb06fb(date) - date.offset;
|
|
1521
|
+
return new Date(ms);
|
|
1522
|
+
}
|
|
1523
|
+
function $d07e34cce18680fd$export$538b00033cc11c75(date, timeZone) {
|
|
1524
|
+
return $d07e34cce18680fd$export$b4a036af3fc0b032($d07e34cce18680fd$export$1b96692a1ba042ac($d07e34cce18680fd$export$bd4fb2bc8bb06fb(date) - date.offset, timeZone), date.calendar);
|
|
1525
|
+
}
|
|
1526
|
+
//#endregion
|
|
1527
|
+
//#region ../../node_modules/.pnpm/@internationalized+date@3.12.1/node_modules/@internationalized/date/dist/private/manipulation.mjs
|
|
1528
|
+
const $435a2ceaa8778ed8$var$ONE_HOUR = 36e5;
|
|
1529
|
+
function $435a2ceaa8778ed8$export$e16d8520af44a096(date, duration) {
|
|
1530
|
+
let mutableDate = date.copy();
|
|
1531
|
+
let days = "hour" in mutableDate ? $435a2ceaa8778ed8$var$addTimeFields(mutableDate, duration) : 0;
|
|
1532
|
+
$435a2ceaa8778ed8$var$addYears(mutableDate, duration.years || 0);
|
|
1533
|
+
if (mutableDate.calendar.balanceYearMonth) mutableDate.calendar.balanceYearMonth(mutableDate, date);
|
|
1534
|
+
mutableDate.month += duration.months || 0;
|
|
1535
|
+
$435a2ceaa8778ed8$var$balanceYearMonth(mutableDate);
|
|
1536
|
+
$435a2ceaa8778ed8$var$constrainMonthDay(mutableDate);
|
|
1537
|
+
mutableDate.day += (duration.weeks || 0) * 7;
|
|
1538
|
+
mutableDate.day += duration.days || 0;
|
|
1539
|
+
mutableDate.day += days;
|
|
1540
|
+
$435a2ceaa8778ed8$var$balanceDay(mutableDate);
|
|
1541
|
+
if (mutableDate.calendar.balanceDate) mutableDate.calendar.balanceDate(mutableDate);
|
|
1542
|
+
if (mutableDate.year < 1) {
|
|
1543
|
+
mutableDate.year = 1;
|
|
1544
|
+
mutableDate.month = 1;
|
|
1545
|
+
mutableDate.day = 1;
|
|
1546
|
+
}
|
|
1547
|
+
let maxYear = mutableDate.calendar.getYearsInEra(mutableDate);
|
|
1548
|
+
if (mutableDate.year > maxYear) {
|
|
1549
|
+
let isInverseEra = mutableDate.calendar.isInverseEra?.(mutableDate);
|
|
1550
|
+
mutableDate.year = maxYear;
|
|
1551
|
+
mutableDate.month = isInverseEra ? 1 : mutableDate.calendar.getMonthsInYear(mutableDate);
|
|
1552
|
+
mutableDate.day = isInverseEra ? 1 : mutableDate.calendar.getDaysInMonth(mutableDate);
|
|
1553
|
+
}
|
|
1554
|
+
if (mutableDate.month < 1) {
|
|
1555
|
+
mutableDate.month = 1;
|
|
1556
|
+
mutableDate.day = 1;
|
|
1557
|
+
}
|
|
1558
|
+
let maxMonth = mutableDate.calendar.getMonthsInYear(mutableDate);
|
|
1559
|
+
if (mutableDate.month > maxMonth) {
|
|
1560
|
+
mutableDate.month = maxMonth;
|
|
1561
|
+
mutableDate.day = mutableDate.calendar.getDaysInMonth(mutableDate);
|
|
1562
|
+
}
|
|
1563
|
+
mutableDate.day = Math.max(1, Math.min(mutableDate.calendar.getDaysInMonth(mutableDate), mutableDate.day));
|
|
1564
|
+
return mutableDate;
|
|
1565
|
+
}
|
|
1566
|
+
function $435a2ceaa8778ed8$var$addYears(date, years) {
|
|
1567
|
+
if (date.calendar.isInverseEra?.(date)) years = -years;
|
|
1568
|
+
date.year += years;
|
|
1569
|
+
}
|
|
1570
|
+
function $435a2ceaa8778ed8$var$balanceYearMonth(date) {
|
|
1571
|
+
while (date.month < 1) {
|
|
1572
|
+
$435a2ceaa8778ed8$var$addYears(date, -1);
|
|
1573
|
+
date.month += date.calendar.getMonthsInYear(date);
|
|
1574
|
+
}
|
|
1575
|
+
let monthsInYear = 0;
|
|
1576
|
+
while (date.month > (monthsInYear = date.calendar.getMonthsInYear(date))) {
|
|
1577
|
+
date.month -= monthsInYear;
|
|
1578
|
+
$435a2ceaa8778ed8$var$addYears(date, 1);
|
|
1579
|
+
}
|
|
1580
|
+
}
|
|
1581
|
+
function $435a2ceaa8778ed8$var$balanceDay(date) {
|
|
1582
|
+
while (date.day < 1) {
|
|
1583
|
+
date.month--;
|
|
1584
|
+
$435a2ceaa8778ed8$var$balanceYearMonth(date);
|
|
1585
|
+
date.day += date.calendar.getDaysInMonth(date);
|
|
1586
|
+
}
|
|
1587
|
+
while (date.day > date.calendar.getDaysInMonth(date)) {
|
|
1588
|
+
date.day -= date.calendar.getDaysInMonth(date);
|
|
1589
|
+
date.month++;
|
|
1590
|
+
$435a2ceaa8778ed8$var$balanceYearMonth(date);
|
|
1591
|
+
}
|
|
1592
|
+
}
|
|
1593
|
+
function $435a2ceaa8778ed8$var$constrainMonthDay(date) {
|
|
1594
|
+
date.month = Math.max(1, Math.min(date.calendar.getMonthsInYear(date), date.month));
|
|
1595
|
+
date.day = Math.max(1, Math.min(date.calendar.getDaysInMonth(date), date.day));
|
|
1596
|
+
}
|
|
1597
|
+
function $435a2ceaa8778ed8$export$c4e2ecac49351ef2(date) {
|
|
1598
|
+
if (date.calendar.constrainDate) date.calendar.constrainDate(date);
|
|
1599
|
+
date.year = Math.max(1, Math.min(date.calendar.getYearsInEra(date), date.year));
|
|
1600
|
+
$435a2ceaa8778ed8$var$constrainMonthDay(date);
|
|
1601
|
+
}
|
|
1602
|
+
function $435a2ceaa8778ed8$export$3e2544e88a25bff8(duration) {
|
|
1603
|
+
let inverseDuration = {};
|
|
1604
|
+
for (let key in duration) if (typeof duration[key] === "number") inverseDuration[key] = -duration[key];
|
|
1605
|
+
return inverseDuration;
|
|
1606
|
+
}
|
|
1607
|
+
function $435a2ceaa8778ed8$export$4e2d2ead65e5f7e3(date, duration) {
|
|
1608
|
+
return $435a2ceaa8778ed8$export$e16d8520af44a096(date, $435a2ceaa8778ed8$export$3e2544e88a25bff8(duration));
|
|
1609
|
+
}
|
|
1610
|
+
function $435a2ceaa8778ed8$export$adaa4cf7ef1b65be(date, fields) {
|
|
1611
|
+
let mutableDate = date.copy();
|
|
1612
|
+
if (fields.era != null) mutableDate.era = fields.era;
|
|
1613
|
+
if (fields.year != null) mutableDate.year = fields.year;
|
|
1614
|
+
if (fields.month != null) mutableDate.month = fields.month;
|
|
1615
|
+
if (fields.day != null) mutableDate.day = fields.day;
|
|
1616
|
+
$435a2ceaa8778ed8$export$c4e2ecac49351ef2(mutableDate);
|
|
1617
|
+
return mutableDate;
|
|
1618
|
+
}
|
|
1619
|
+
function $435a2ceaa8778ed8$export$e5d5e1c1822b6e56(value, fields) {
|
|
1620
|
+
let mutableValue = value.copy();
|
|
1621
|
+
if (fields.hour != null) mutableValue.hour = fields.hour;
|
|
1622
|
+
if (fields.minute != null) mutableValue.minute = fields.minute;
|
|
1623
|
+
if (fields.second != null) mutableValue.second = fields.second;
|
|
1624
|
+
if (fields.millisecond != null) mutableValue.millisecond = fields.millisecond;
|
|
1625
|
+
$435a2ceaa8778ed8$export$7555de1e070510cb(mutableValue);
|
|
1626
|
+
return mutableValue;
|
|
1627
|
+
}
|
|
1628
|
+
function $435a2ceaa8778ed8$var$balanceTime(time) {
|
|
1629
|
+
time.second += Math.floor(time.millisecond / 1e3);
|
|
1630
|
+
time.millisecond = $435a2ceaa8778ed8$var$nonNegativeMod(time.millisecond, 1e3);
|
|
1631
|
+
time.minute += Math.floor(time.second / 60);
|
|
1632
|
+
time.second = $435a2ceaa8778ed8$var$nonNegativeMod(time.second, 60);
|
|
1633
|
+
time.hour += Math.floor(time.minute / 60);
|
|
1634
|
+
time.minute = $435a2ceaa8778ed8$var$nonNegativeMod(time.minute, 60);
|
|
1635
|
+
let days = Math.floor(time.hour / 24);
|
|
1636
|
+
time.hour = $435a2ceaa8778ed8$var$nonNegativeMod(time.hour, 24);
|
|
1637
|
+
return days;
|
|
1638
|
+
}
|
|
1639
|
+
function $435a2ceaa8778ed8$export$7555de1e070510cb(time) {
|
|
1640
|
+
time.millisecond = Math.max(0, Math.min(time.millisecond, 1e3));
|
|
1641
|
+
time.second = Math.max(0, Math.min(time.second, 59));
|
|
1642
|
+
time.minute = Math.max(0, Math.min(time.minute, 59));
|
|
1643
|
+
time.hour = Math.max(0, Math.min(time.hour, 23));
|
|
1644
|
+
}
|
|
1645
|
+
function $435a2ceaa8778ed8$var$nonNegativeMod(a, b) {
|
|
1646
|
+
let result = a % b;
|
|
1647
|
+
if (result < 0) result += b;
|
|
1648
|
+
return result;
|
|
1649
|
+
}
|
|
1650
|
+
function $435a2ceaa8778ed8$var$addTimeFields(time, duration) {
|
|
1651
|
+
time.hour += duration.hours || 0;
|
|
1652
|
+
time.minute += duration.minutes || 0;
|
|
1653
|
+
time.second += duration.seconds || 0;
|
|
1654
|
+
time.millisecond += duration.milliseconds || 0;
|
|
1655
|
+
return $435a2ceaa8778ed8$var$balanceTime(time);
|
|
1656
|
+
}
|
|
1657
|
+
function $435a2ceaa8778ed8$export$d52ced6badfb9a4c(value, field, amount, options) {
|
|
1658
|
+
let mutable = value.copy();
|
|
1659
|
+
switch (field) {
|
|
1660
|
+
case "era": {
|
|
1661
|
+
let eras = value.calendar.getEras();
|
|
1662
|
+
let eraIndex = eras.indexOf(value.era);
|
|
1663
|
+
if (eraIndex < 0) throw new Error("Invalid era: " + value.era);
|
|
1664
|
+
eraIndex = $435a2ceaa8778ed8$var$cycleValue(eraIndex, amount, 0, eras.length - 1, options?.round);
|
|
1665
|
+
mutable.era = eras[eraIndex];
|
|
1666
|
+
$435a2ceaa8778ed8$export$c4e2ecac49351ef2(mutable);
|
|
1667
|
+
break;
|
|
1668
|
+
}
|
|
1669
|
+
case "year":
|
|
1670
|
+
if (mutable.calendar.isInverseEra?.(mutable)) amount = -amount;
|
|
1671
|
+
mutable.year = $435a2ceaa8778ed8$var$cycleValue(value.year, amount, -Infinity, 9999, options?.round);
|
|
1672
|
+
if (mutable.year === -Infinity) mutable.year = 1;
|
|
1673
|
+
if (mutable.calendar.balanceYearMonth) mutable.calendar.balanceYearMonth(mutable, value);
|
|
1674
|
+
break;
|
|
1675
|
+
case "month":
|
|
1676
|
+
mutable.month = $435a2ceaa8778ed8$var$cycleValue(value.month, amount, 1, value.calendar.getMonthsInYear(value), options?.round);
|
|
1677
|
+
break;
|
|
1678
|
+
case "day":
|
|
1679
|
+
mutable.day = $435a2ceaa8778ed8$var$cycleValue(value.day, amount, 1, value.calendar.getDaysInMonth(value), options?.round);
|
|
1680
|
+
break;
|
|
1681
|
+
default: throw new Error("Unsupported field " + field);
|
|
1682
|
+
}
|
|
1683
|
+
if (value.calendar.balanceDate) value.calendar.balanceDate(mutable);
|
|
1684
|
+
$435a2ceaa8778ed8$export$c4e2ecac49351ef2(mutable);
|
|
1685
|
+
return mutable;
|
|
1686
|
+
}
|
|
1687
|
+
function $435a2ceaa8778ed8$export$dd02b3e0007dfe28(value, field, amount, options) {
|
|
1688
|
+
let mutable = value.copy();
|
|
1689
|
+
switch (field) {
|
|
1690
|
+
case "hour": {
|
|
1691
|
+
let hours = value.hour;
|
|
1692
|
+
let min = 0;
|
|
1693
|
+
let max = 23;
|
|
1694
|
+
if (options?.hourCycle === 12) {
|
|
1695
|
+
let isPM = hours >= 12;
|
|
1696
|
+
min = isPM ? 12 : 0;
|
|
1697
|
+
max = isPM ? 23 : 11;
|
|
1698
|
+
}
|
|
1699
|
+
mutable.hour = $435a2ceaa8778ed8$var$cycleValue(hours, amount, min, max, options?.round);
|
|
1700
|
+
break;
|
|
1701
|
+
}
|
|
1702
|
+
case "minute":
|
|
1703
|
+
mutable.minute = $435a2ceaa8778ed8$var$cycleValue(value.minute, amount, 0, 59, options?.round);
|
|
1704
|
+
break;
|
|
1705
|
+
case "second":
|
|
1706
|
+
mutable.second = $435a2ceaa8778ed8$var$cycleValue(value.second, amount, 0, 59, options?.round);
|
|
1707
|
+
break;
|
|
1708
|
+
case "millisecond":
|
|
1709
|
+
mutable.millisecond = $435a2ceaa8778ed8$var$cycleValue(value.millisecond, amount, 0, 999, options?.round);
|
|
1710
|
+
break;
|
|
1711
|
+
default: throw new Error("Unsupported field " + field);
|
|
1712
|
+
}
|
|
1713
|
+
return mutable;
|
|
1714
|
+
}
|
|
1715
|
+
function $435a2ceaa8778ed8$var$cycleValue(value, amount, min, max, round = false) {
|
|
1716
|
+
if (round) {
|
|
1717
|
+
value += Math.sign(amount);
|
|
1718
|
+
if (value < min) value = max;
|
|
1719
|
+
let div = Math.abs(amount);
|
|
1720
|
+
if (amount > 0) value = Math.ceil(value / div) * div;
|
|
1721
|
+
else value = Math.floor(value / div) * div;
|
|
1722
|
+
if (value > max) value = min;
|
|
1723
|
+
} else {
|
|
1724
|
+
value += amount;
|
|
1725
|
+
if (value < min) value = max - (min - value - 1);
|
|
1726
|
+
else if (value > max) value = min + (value - max - 1);
|
|
1727
|
+
}
|
|
1728
|
+
return value;
|
|
1729
|
+
}
|
|
1730
|
+
function $435a2ceaa8778ed8$export$96b1d28349274637(dateTime, duration) {
|
|
1731
|
+
let ms;
|
|
1732
|
+
if (duration.years != null && duration.years !== 0 || duration.months != null && duration.months !== 0 || duration.weeks != null && duration.weeks !== 0 || duration.days != null && duration.days !== 0) ms = $d07e34cce18680fd$export$5107c82f94518f5c($435a2ceaa8778ed8$export$e16d8520af44a096($d07e34cce18680fd$export$b21e0b124e224484(dateTime), {
|
|
1733
|
+
years: duration.years,
|
|
1734
|
+
months: duration.months,
|
|
1735
|
+
weeks: duration.weeks,
|
|
1736
|
+
days: duration.days
|
|
1737
|
+
}), dateTime.timeZone);
|
|
1738
|
+
else ms = $d07e34cce18680fd$export$bd4fb2bc8bb06fb(dateTime) - dateTime.offset;
|
|
1739
|
+
ms += duration.milliseconds || 0;
|
|
1740
|
+
ms += (duration.seconds || 0) * 1e3;
|
|
1741
|
+
ms += (duration.minutes || 0) * 6e4;
|
|
1742
|
+
ms += (duration.hours || 0) * 36e5;
|
|
1743
|
+
return $d07e34cce18680fd$export$b4a036af3fc0b032($d07e34cce18680fd$export$1b96692a1ba042ac(ms, dateTime.timeZone), dateTime.calendar);
|
|
1744
|
+
}
|
|
1745
|
+
function $435a2ceaa8778ed8$export$6814caac34ca03c7(dateTime, duration) {
|
|
1746
|
+
return $435a2ceaa8778ed8$export$96b1d28349274637(dateTime, $435a2ceaa8778ed8$export$3e2544e88a25bff8(duration));
|
|
1747
|
+
}
|
|
1748
|
+
function $435a2ceaa8778ed8$export$9a297d111fc86b79(dateTime, field, amount, options) {
|
|
1749
|
+
switch (field) {
|
|
1750
|
+
case "hour": {
|
|
1751
|
+
let min = 0;
|
|
1752
|
+
let max = 23;
|
|
1753
|
+
if (options?.hourCycle === 12) {
|
|
1754
|
+
let isPM = dateTime.hour >= 12;
|
|
1755
|
+
min = isPM ? 12 : 0;
|
|
1756
|
+
max = isPM ? 23 : 11;
|
|
1757
|
+
}
|
|
1758
|
+
let plainDateTime = $d07e34cce18680fd$export$b21e0b124e224484(dateTime);
|
|
1759
|
+
let minDate = $d07e34cce18680fd$export$b4a036af3fc0b032($435a2ceaa8778ed8$export$e5d5e1c1822b6e56(plainDateTime, { hour: min }), new $93635573935797de$export$80ee6245ec4f29ec());
|
|
1760
|
+
let minAbsolute = [$d07e34cce18680fd$export$5107c82f94518f5c(minDate, dateTime.timeZone, "earlier"), $d07e34cce18680fd$export$5107c82f94518f5c(minDate, dateTime.timeZone, "later")].filter((ms) => $d07e34cce18680fd$export$1b96692a1ba042ac(ms, dateTime.timeZone).day === minDate.day)[0];
|
|
1761
|
+
let maxDate = $d07e34cce18680fd$export$b4a036af3fc0b032($435a2ceaa8778ed8$export$e5d5e1c1822b6e56(plainDateTime, { hour: max }), new $93635573935797de$export$80ee6245ec4f29ec());
|
|
1762
|
+
let maxAbsolute = [$d07e34cce18680fd$export$5107c82f94518f5c(maxDate, dateTime.timeZone, "earlier"), $d07e34cce18680fd$export$5107c82f94518f5c(maxDate, dateTime.timeZone, "later")].filter((ms) => $d07e34cce18680fd$export$1b96692a1ba042ac(ms, dateTime.timeZone).day === maxDate.day).pop();
|
|
1763
|
+
let ms = $d07e34cce18680fd$export$bd4fb2bc8bb06fb(dateTime) - dateTime.offset;
|
|
1764
|
+
let hours = Math.floor(ms / $435a2ceaa8778ed8$var$ONE_HOUR);
|
|
1765
|
+
let remainder = ms % $435a2ceaa8778ed8$var$ONE_HOUR;
|
|
1766
|
+
ms = $435a2ceaa8778ed8$var$cycleValue(hours, amount, Math.floor(minAbsolute / $435a2ceaa8778ed8$var$ONE_HOUR), Math.floor(maxAbsolute / $435a2ceaa8778ed8$var$ONE_HOUR), options?.round) * $435a2ceaa8778ed8$var$ONE_HOUR + remainder;
|
|
1767
|
+
return $d07e34cce18680fd$export$b4a036af3fc0b032($d07e34cce18680fd$export$1b96692a1ba042ac(ms, dateTime.timeZone), dateTime.calendar);
|
|
1768
|
+
}
|
|
1769
|
+
case "minute":
|
|
1770
|
+
case "second":
|
|
1771
|
+
case "millisecond": return $435a2ceaa8778ed8$export$dd02b3e0007dfe28(dateTime, field, amount, options);
|
|
1772
|
+
case "era":
|
|
1773
|
+
case "year":
|
|
1774
|
+
case "month":
|
|
1775
|
+
case "day": return $d07e34cce18680fd$export$b4a036af3fc0b032($d07e34cce18680fd$export$1b96692a1ba042ac($d07e34cce18680fd$export$5107c82f94518f5c($435a2ceaa8778ed8$export$d52ced6badfb9a4c($d07e34cce18680fd$export$b21e0b124e224484(dateTime), field, amount, options), dateTime.timeZone), dateTime.timeZone), dateTime.calendar);
|
|
1776
|
+
default: throw new Error("Unsupported field " + field);
|
|
1777
|
+
}
|
|
1778
|
+
}
|
|
1779
|
+
function $435a2ceaa8778ed8$export$31b5430eb18be4f8(dateTime, fields, disambiguation) {
|
|
1780
|
+
let plainDateTime = $d07e34cce18680fd$export$b21e0b124e224484(dateTime);
|
|
1781
|
+
let res = $435a2ceaa8778ed8$export$e5d5e1c1822b6e56($435a2ceaa8778ed8$export$adaa4cf7ef1b65be(plainDateTime, fields), fields);
|
|
1782
|
+
if (res.compare(plainDateTime) === 0) return dateTime;
|
|
1783
|
+
return $d07e34cce18680fd$export$b4a036af3fc0b032($d07e34cce18680fd$export$1b96692a1ba042ac($d07e34cce18680fd$export$5107c82f94518f5c(res, dateTime.timeZone, disambiguation), dateTime.timeZone), dateTime.calendar);
|
|
1784
|
+
}
|
|
1785
|
+
//#endregion
|
|
1786
|
+
//#region ../../node_modules/.pnpm/@internationalized+date@3.12.1/node_modules/@internationalized/date/dist/private/string.mjs
|
|
1787
|
+
const $58246871e4652552$var$DATE_RE = /^([+-]\d{6}|\d{4})-(\d{2})-(\d{2})$/;
|
|
1788
|
+
const $58246871e4652552$var$DATE_TIME_RE = /^([+-]\d{6}|\d{4})-(\d{2})-(\d{2})(?:T(\d{2}))?(?::(\d{2}))?(?::(\d{2}))?(\.\d+)?$/;
|
|
1789
|
+
const $58246871e4652552$var$ABSOLUTE_RE = /^([+-]\d{6}|\d{4})-(\d{2})-(\d{2})(?:T(\d{2}))?(?::(\d{2}))?(?::(\d{2}))?(\.\d+)?(?:(?:([+-]\d{2})(?::?(\d{2}))?)|Z)$/;
|
|
1790
|
+
function $58246871e4652552$export$6b862160d295c8e(value) {
|
|
1791
|
+
let m = value.match($58246871e4652552$var$DATE_RE);
|
|
1792
|
+
if (!m) {
|
|
1793
|
+
if ($58246871e4652552$var$ABSOLUTE_RE.test(value)) throw new Error(`Invalid ISO 8601 date string: ${value}. Use parseAbsolute() instead.`);
|
|
1794
|
+
throw new Error("Invalid ISO 8601 date string: " + value);
|
|
1795
|
+
}
|
|
1796
|
+
let date = new $2aaf608024c21ca1$export$99faa760c7908e4f($58246871e4652552$var$parseNumber(m[1], 0, 9999), $58246871e4652552$var$parseNumber(m[2], 1, 12), 1);
|
|
1797
|
+
date.day = $58246871e4652552$var$parseNumber(m[3], 1, date.calendar.getDaysInMonth(date));
|
|
1798
|
+
return date;
|
|
1799
|
+
}
|
|
1800
|
+
function $58246871e4652552$export$588937bcd60ade55(value) {
|
|
1801
|
+
let m = value.match($58246871e4652552$var$DATE_TIME_RE);
|
|
1802
|
+
if (!m) {
|
|
1803
|
+
if ($58246871e4652552$var$ABSOLUTE_RE.test(value)) throw new Error(`Invalid ISO 8601 date time string: ${value}. Use parseAbsolute() instead.`);
|
|
1804
|
+
throw new Error("Invalid ISO 8601 date time string: " + value);
|
|
1805
|
+
}
|
|
1806
|
+
let year = $58246871e4652552$var$parseNumber(m[1], -9999, 9999);
|
|
1807
|
+
let date = new $2aaf608024c21ca1$export$ca871e8dbb80966f(year < 1 ? "BC" : "AD", year < 1 ? -year + 1 : year, $58246871e4652552$var$parseNumber(m[2], 1, 12), 1, m[4] ? $58246871e4652552$var$parseNumber(m[4], 0, 23) : 0, m[5] ? $58246871e4652552$var$parseNumber(m[5], 0, 59) : 0, m[6] ? $58246871e4652552$var$parseNumber(m[6], 0, 59) : 0, m[7] ? $58246871e4652552$var$parseNumber(m[7], 0, Infinity) * 1e3 : 0);
|
|
1808
|
+
date.day = $58246871e4652552$var$parseNumber(m[3], 0, date.calendar.getDaysInMonth(date));
|
|
1809
|
+
return date;
|
|
1810
|
+
}
|
|
1811
|
+
function $58246871e4652552$export$5adfdab05168c219(value, timeZone) {
|
|
1812
|
+
let m = value.match($58246871e4652552$var$ABSOLUTE_RE);
|
|
1813
|
+
if (!m) throw new Error("Invalid ISO 8601 date time string: " + value);
|
|
1814
|
+
let year = $58246871e4652552$var$parseNumber(m[1], -9999, 9999);
|
|
1815
|
+
let date = new $2aaf608024c21ca1$export$d3b7288e7994edea(year < 1 ? "BC" : "AD", year < 1 ? -year + 1 : year, $58246871e4652552$var$parseNumber(m[2], 1, 12), 1, timeZone, 0, m[4] ? $58246871e4652552$var$parseNumber(m[4], 0, 23) : 0, m[5] ? $58246871e4652552$var$parseNumber(m[5], 0, 59) : 0, m[6] ? $58246871e4652552$var$parseNumber(m[6], 0, 59) : 0, m[7] ? $58246871e4652552$var$parseNumber(m[7], 0, Infinity) * 1e3 : 0);
|
|
1816
|
+
date.day = $58246871e4652552$var$parseNumber(m[3], 0, date.calendar.getDaysInMonth(date));
|
|
1817
|
+
if (m[8]) date.offset = $58246871e4652552$var$parseNumber(m[8], -23, 23) * 36e5 + $58246871e4652552$var$parseNumber(m[9] ?? "0", 0, 59) * 6e4;
|
|
1818
|
+
return $d07e34cce18680fd$export$538b00033cc11c75(date, timeZone);
|
|
1819
|
+
}
|
|
1820
|
+
function $58246871e4652552$export$8e384432362ed0f0(value) {
|
|
1821
|
+
return $58246871e4652552$export$5adfdab05168c219(value, $ad063034c8620db8$export$aa8b41735afcabd2());
|
|
1822
|
+
}
|
|
1823
|
+
function $58246871e4652552$var$parseNumber(value, min, max) {
|
|
1824
|
+
let val = Number(value);
|
|
1825
|
+
if (val < min || val > max) throw new RangeError(`Value out of range: ${min} <= ${val} <= ${max}`);
|
|
1826
|
+
return val;
|
|
1827
|
+
}
|
|
1828
|
+
function $58246871e4652552$export$f59dee82248f5ad4(time) {
|
|
1829
|
+
return `${String(time.hour).padStart(2, "0")}:${String(time.minute).padStart(2, "0")}:${String(time.second).padStart(2, "0")}${time.millisecond ? String(time.millisecond / 1e3).slice(1) : ""}`;
|
|
1830
|
+
}
|
|
1831
|
+
function $58246871e4652552$export$60dfd74aa96791bd(date) {
|
|
1832
|
+
let gregorianDate = $d07e34cce18680fd$export$b4a036af3fc0b032(date, new $93635573935797de$export$80ee6245ec4f29ec());
|
|
1833
|
+
let year;
|
|
1834
|
+
if (gregorianDate.era === "BC") year = gregorianDate.year === 1 ? "0000" : "-" + String(Math.abs(1 - gregorianDate.year)).padStart(6, "00");
|
|
1835
|
+
else year = String(gregorianDate.year).padStart(4, "0");
|
|
1836
|
+
return `${year}-${String(gregorianDate.month).padStart(2, "0")}-${String(gregorianDate.day).padStart(2, "0")}`;
|
|
1837
|
+
}
|
|
1838
|
+
function $58246871e4652552$export$4223de14708adc63(date) {
|
|
1839
|
+
return `${$58246871e4652552$export$60dfd74aa96791bd(date)}T${$58246871e4652552$export$f59dee82248f5ad4(date)}`;
|
|
1840
|
+
}
|
|
1841
|
+
function $58246871e4652552$var$offsetToString(offset) {
|
|
1842
|
+
let sign = Math.sign(offset) < 0 ? "-" : "+";
|
|
1843
|
+
offset = Math.abs(offset);
|
|
1844
|
+
let offsetHours = Math.floor(offset / 36e5);
|
|
1845
|
+
let offsetMinutes = Math.floor(offset % 36e5 / 6e4);
|
|
1846
|
+
let offsetSeconds = Math.floor(offset % 36e5 % 6e4 / 1e3);
|
|
1847
|
+
let stringOffset = `${sign}${String(offsetHours).padStart(2, "0")}:${String(offsetMinutes).padStart(2, "0")}`;
|
|
1848
|
+
if (offsetSeconds !== 0) stringOffset += `:${String(offsetSeconds).padStart(2, "0")}`;
|
|
1849
|
+
return stringOffset;
|
|
1850
|
+
}
|
|
1851
|
+
function $58246871e4652552$export$bf79f1ebf4b18792(date) {
|
|
1852
|
+
return `${$58246871e4652552$export$4223de14708adc63(date)}${$58246871e4652552$var$offsetToString(date.offset)}[${date.timeZone}]`;
|
|
1853
|
+
}
|
|
1854
|
+
//#endregion
|
|
1855
|
+
//#region ../../node_modules/.pnpm/@internationalized+date@3.12.1/node_modules/@internationalized/date/dist/private/CalendarDate.mjs
|
|
1856
|
+
function $2aaf608024c21ca1$var$shiftArgs(args) {
|
|
1857
|
+
let calendar = typeof args[0] === "object" ? args.shift() : new $93635573935797de$export$80ee6245ec4f29ec();
|
|
1858
|
+
let era;
|
|
1859
|
+
if (typeof args[0] === "string") era = args.shift();
|
|
1860
|
+
else {
|
|
1861
|
+
let eras = calendar.getEras();
|
|
1862
|
+
era = eras[eras.length - 1];
|
|
1863
|
+
}
|
|
1864
|
+
let year = args.shift();
|
|
1865
|
+
let month = args.shift();
|
|
1866
|
+
let day = args.shift();
|
|
1867
|
+
return [
|
|
1868
|
+
calendar,
|
|
1869
|
+
era,
|
|
1870
|
+
year,
|
|
1871
|
+
month,
|
|
1872
|
+
day
|
|
1873
|
+
];
|
|
1874
|
+
}
|
|
1875
|
+
var $2aaf608024c21ca1$export$99faa760c7908e4f = class $2aaf608024c21ca1$export$99faa760c7908e4f {
|
|
1876
|
+
#type;
|
|
1877
|
+
constructor(...args) {
|
|
1878
|
+
let [calendar, era, year, month, day] = $2aaf608024c21ca1$var$shiftArgs(args);
|
|
1879
|
+
this.calendar = calendar;
|
|
1880
|
+
this.era = era;
|
|
1881
|
+
this.year = year;
|
|
1882
|
+
this.month = month;
|
|
1883
|
+
this.day = day;
|
|
1884
|
+
$435a2ceaa8778ed8$export$c4e2ecac49351ef2(this);
|
|
1885
|
+
}
|
|
1886
|
+
/** Returns a copy of this date. */ copy() {
|
|
1887
|
+
if (this.era) return new $2aaf608024c21ca1$export$99faa760c7908e4f(this.calendar, this.era, this.year, this.month, this.day);
|
|
1888
|
+
else return new $2aaf608024c21ca1$export$99faa760c7908e4f(this.calendar, this.year, this.month, this.day);
|
|
1889
|
+
}
|
|
1890
|
+
/** Returns a new `CalendarDate` with the given duration added to it. */ add(duration) {
|
|
1891
|
+
return $435a2ceaa8778ed8$export$e16d8520af44a096(this, duration);
|
|
1892
|
+
}
|
|
1893
|
+
/** Returns a new `CalendarDate` with the given duration subtracted from it. */ subtract(duration) {
|
|
1894
|
+
return $435a2ceaa8778ed8$export$4e2d2ead65e5f7e3(this, duration);
|
|
1895
|
+
}
|
|
1896
|
+
/** Returns a new `CalendarDate` with the given fields set to the provided values. Other fields will be constrained accordingly. */ set(fields) {
|
|
1897
|
+
return $435a2ceaa8778ed8$export$adaa4cf7ef1b65be(this, fields);
|
|
1898
|
+
}
|
|
1899
|
+
/**
|
|
1900
|
+
* Returns a new `CalendarDate` with the given field adjusted by a specified amount.
|
|
1901
|
+
* When the resulting value reaches the limits of the field, it wraps around.
|
|
1902
|
+
*/ cycle(field, amount, options) {
|
|
1903
|
+
return $435a2ceaa8778ed8$export$d52ced6badfb9a4c(this, field, amount, options);
|
|
1904
|
+
}
|
|
1905
|
+
/** Converts the date to a native JavaScript Date object, with the time set to midnight in the given time zone. */ toDate(timeZone) {
|
|
1906
|
+
return $d07e34cce18680fd$export$e67a095c620b86fe(this, timeZone);
|
|
1907
|
+
}
|
|
1908
|
+
/** Converts the date to an ISO 8601 formatted string. */ toString() {
|
|
1909
|
+
return $58246871e4652552$export$60dfd74aa96791bd(this);
|
|
1910
|
+
}
|
|
1911
|
+
/** Compares this date with another. A negative result indicates that this date is before the given one, and a positive date indicates that it is after. */ compare(b) {
|
|
1912
|
+
return $ad063034c8620db8$export$68781ddf31c0090f(this, b);
|
|
1913
|
+
}
|
|
1914
|
+
};
|
|
1915
|
+
var $2aaf608024c21ca1$export$ca871e8dbb80966f = class $2aaf608024c21ca1$export$ca871e8dbb80966f {
|
|
1916
|
+
#type;
|
|
1917
|
+
constructor(...args) {
|
|
1918
|
+
let [calendar, era, year, month, day] = $2aaf608024c21ca1$var$shiftArgs(args);
|
|
1919
|
+
this.calendar = calendar;
|
|
1920
|
+
this.era = era;
|
|
1921
|
+
this.year = year;
|
|
1922
|
+
this.month = month;
|
|
1923
|
+
this.day = day;
|
|
1924
|
+
this.hour = args.shift() || 0;
|
|
1925
|
+
this.minute = args.shift() || 0;
|
|
1926
|
+
this.second = args.shift() || 0;
|
|
1927
|
+
this.millisecond = args.shift() || 0;
|
|
1928
|
+
$435a2ceaa8778ed8$export$c4e2ecac49351ef2(this);
|
|
1929
|
+
}
|
|
1930
|
+
/** Returns a copy of this date. */ copy() {
|
|
1931
|
+
if (this.era) return new $2aaf608024c21ca1$export$ca871e8dbb80966f(this.calendar, this.era, this.year, this.month, this.day, this.hour, this.minute, this.second, this.millisecond);
|
|
1932
|
+
else return new $2aaf608024c21ca1$export$ca871e8dbb80966f(this.calendar, this.year, this.month, this.day, this.hour, this.minute, this.second, this.millisecond);
|
|
1933
|
+
}
|
|
1934
|
+
/** Returns a new `CalendarDateTime` with the given duration added to it. */ add(duration) {
|
|
1935
|
+
return $435a2ceaa8778ed8$export$e16d8520af44a096(this, duration);
|
|
1936
|
+
}
|
|
1937
|
+
/** Returns a new `CalendarDateTime` with the given duration subtracted from it. */ subtract(duration) {
|
|
1938
|
+
return $435a2ceaa8778ed8$export$4e2d2ead65e5f7e3(this, duration);
|
|
1939
|
+
}
|
|
1940
|
+
/** Returns a new `CalendarDateTime` with the given fields set to the provided values. Other fields will be constrained accordingly. */ set(fields) {
|
|
1941
|
+
return $435a2ceaa8778ed8$export$adaa4cf7ef1b65be($435a2ceaa8778ed8$export$e5d5e1c1822b6e56(this, fields), fields);
|
|
1942
|
+
}
|
|
1943
|
+
/**
|
|
1944
|
+
* Returns a new `CalendarDateTime` with the given field adjusted by a specified amount.
|
|
1945
|
+
* When the resulting value reaches the limits of the field, it wraps around.
|
|
1946
|
+
*/ cycle(field, amount, options) {
|
|
1947
|
+
switch (field) {
|
|
1948
|
+
case "era":
|
|
1949
|
+
case "year":
|
|
1950
|
+
case "month":
|
|
1951
|
+
case "day": return $435a2ceaa8778ed8$export$d52ced6badfb9a4c(this, field, amount, options);
|
|
1952
|
+
default: return $435a2ceaa8778ed8$export$dd02b3e0007dfe28(this, field, amount, options);
|
|
1953
|
+
}
|
|
1954
|
+
}
|
|
1955
|
+
/** Converts the date to a native JavaScript Date object in the given time zone. */ toDate(timeZone, disambiguation) {
|
|
1956
|
+
return $d07e34cce18680fd$export$e67a095c620b86fe(this, timeZone, disambiguation);
|
|
1957
|
+
}
|
|
1958
|
+
/** Converts the date to an ISO 8601 formatted string. */ toString() {
|
|
1959
|
+
return $58246871e4652552$export$4223de14708adc63(this);
|
|
1960
|
+
}
|
|
1961
|
+
/** Compares this date with another. A negative result indicates that this date is before the given one, and a positive date indicates that it is after. */ compare(b) {
|
|
1962
|
+
let res = $ad063034c8620db8$export$68781ddf31c0090f(this, b);
|
|
1963
|
+
if (res === 0) return $ad063034c8620db8$export$c19a80a9721b80f6(this, $d07e34cce18680fd$export$b21e0b124e224484(b));
|
|
1964
|
+
return res;
|
|
1965
|
+
}
|
|
1966
|
+
};
|
|
1967
|
+
var $2aaf608024c21ca1$export$d3b7288e7994edea = class $2aaf608024c21ca1$export$d3b7288e7994edea {
|
|
1968
|
+
#type;
|
|
1969
|
+
constructor(...args) {
|
|
1970
|
+
let [calendar, era, year, month, day] = $2aaf608024c21ca1$var$shiftArgs(args);
|
|
1971
|
+
let timeZone = args.shift();
|
|
1972
|
+
let offset = args.shift();
|
|
1973
|
+
this.calendar = calendar;
|
|
1974
|
+
this.era = era;
|
|
1975
|
+
this.year = year;
|
|
1976
|
+
this.month = month;
|
|
1977
|
+
this.day = day;
|
|
1978
|
+
this.timeZone = timeZone;
|
|
1979
|
+
this.offset = offset;
|
|
1980
|
+
this.hour = args.shift() || 0;
|
|
1981
|
+
this.minute = args.shift() || 0;
|
|
1982
|
+
this.second = args.shift() || 0;
|
|
1983
|
+
this.millisecond = args.shift() || 0;
|
|
1984
|
+
$435a2ceaa8778ed8$export$c4e2ecac49351ef2(this);
|
|
1985
|
+
}
|
|
1986
|
+
/** Returns a copy of this date. */ copy() {
|
|
1987
|
+
if (this.era) return new $2aaf608024c21ca1$export$d3b7288e7994edea(this.calendar, this.era, this.year, this.month, this.day, this.timeZone, this.offset, this.hour, this.minute, this.second, this.millisecond);
|
|
1988
|
+
else return new $2aaf608024c21ca1$export$d3b7288e7994edea(this.calendar, this.year, this.month, this.day, this.timeZone, this.offset, this.hour, this.minute, this.second, this.millisecond);
|
|
1989
|
+
}
|
|
1990
|
+
/** Returns a new `ZonedDateTime` with the given duration added to it. */ add(duration) {
|
|
1991
|
+
return $435a2ceaa8778ed8$export$96b1d28349274637(this, duration);
|
|
1992
|
+
}
|
|
1993
|
+
/** Returns a new `ZonedDateTime` with the given duration subtracted from it. */ subtract(duration) {
|
|
1994
|
+
return $435a2ceaa8778ed8$export$6814caac34ca03c7(this, duration);
|
|
1995
|
+
}
|
|
1996
|
+
/** Returns a new `ZonedDateTime` with the given fields set to the provided values. Other fields will be constrained accordingly. */ set(fields, disambiguation) {
|
|
1997
|
+
return $435a2ceaa8778ed8$export$31b5430eb18be4f8(this, fields, disambiguation);
|
|
1998
|
+
}
|
|
1999
|
+
/**
|
|
2000
|
+
* Returns a new `ZonedDateTime` with the given field adjusted by a specified amount.
|
|
2001
|
+
* When the resulting value reaches the limits of the field, it wraps around.
|
|
2002
|
+
*/ cycle(field, amount, options) {
|
|
2003
|
+
return $435a2ceaa8778ed8$export$9a297d111fc86b79(this, field, amount, options);
|
|
2004
|
+
}
|
|
2005
|
+
/** Converts the date to a native JavaScript Date object. */ toDate() {
|
|
2006
|
+
return $d07e34cce18680fd$export$83aac07b4c37b25(this);
|
|
2007
|
+
}
|
|
2008
|
+
/** Converts the date to an ISO 8601 formatted string, including the UTC offset and time zone identifier. */ toString() {
|
|
2009
|
+
return $58246871e4652552$export$bf79f1ebf4b18792(this);
|
|
2010
|
+
}
|
|
2011
|
+
/** Converts the date to an ISO 8601 formatted string in UTC. */ toAbsoluteString() {
|
|
2012
|
+
return this.toDate().toISOString();
|
|
2013
|
+
}
|
|
2014
|
+
/** Compares this date with another. A negative result indicates that this date is before the given one, and a positive date indicates that it is after. */ compare(b) {
|
|
2015
|
+
return this.toDate().getTime() - $d07e34cce18680fd$export$84c95a83c799e074(b, this.timeZone).toDate().getTime();
|
|
2016
|
+
}
|
|
2017
|
+
};
|
|
2018
|
+
//#endregion
|
|
2019
|
+
//#region src/components/DatePickerField/dateIsoClipboard.ts
|
|
2020
|
+
const isoDateOnlyPattern = /^\d{4}-\d{2}-\d{2}$/;
|
|
2021
|
+
/**
|
|
2022
|
+
* Plain text from a paste {@link DataTransfer}. Prefer `text/plain` (browsers, real paste);
|
|
2023
|
+
* fall back to `text` because `@testing-library/user-event` v14 stores string paste data there.
|
|
2024
|
+
*/
|
|
2025
|
+
function readClipboardPlainText(clipboardData) {
|
|
2026
|
+
if (!clipboardData) return "";
|
|
2027
|
+
return (clipboardData.getData("text/plain") || clipboardData.getData("Text") || clipboardData.getData("text")).trim();
|
|
2028
|
+
}
|
|
2029
|
+
function resolvePickerTimeZone(state) {
|
|
2030
|
+
if ("timeZone" in state && typeof state.timeZone === "string") return state.timeZone;
|
|
2031
|
+
return $ad063034c8620db8$export$aa8b41735afcabd2();
|
|
2032
|
+
}
|
|
2033
|
+
function formatDateValueAsIsoPlainText(value, granularity, timeZone) {
|
|
2034
|
+
if (granularity === "day") return $d07e34cce18680fd$export$93522d1a439f3617(value).toString();
|
|
2035
|
+
if (value instanceof $2aaf608024c21ca1$export$d3b7288e7994edea) return value.toDate().toISOString();
|
|
2036
|
+
return $d07e34cce18680fd$export$b21e0b124e224484(value).toDate(timeZone).toISOString();
|
|
2037
|
+
}
|
|
2038
|
+
function parseClipboardTextToDateValue(text) {
|
|
2039
|
+
const trimmed = text.trim();
|
|
2040
|
+
if (!trimmed) return null;
|
|
2041
|
+
if (isoDateOnlyPattern.test(trimmed)) try {
|
|
2042
|
+
return $58246871e4652552$export$6b862160d295c8e(trimmed);
|
|
2043
|
+
} catch {
|
|
2044
|
+
return null;
|
|
2045
|
+
}
|
|
2046
|
+
try {
|
|
2047
|
+
return $58246871e4652552$export$8e384432362ed0f0(trimmed);
|
|
2048
|
+
} catch {}
|
|
2049
|
+
try {
|
|
2050
|
+
return $58246871e4652552$export$588937bcd60ade55(trimmed);
|
|
2051
|
+
} catch {
|
|
2052
|
+
return null;
|
|
2053
|
+
}
|
|
2054
|
+
}
|
|
2055
|
+
function coercePastedValueToGranularity(value, granularity) {
|
|
2056
|
+
if (granularity === "day") return $d07e34cce18680fd$export$93522d1a439f3617(value);
|
|
2057
|
+
return $d07e34cce18680fd$export$b21e0b124e224484(value);
|
|
2058
|
+
}
|
|
2059
|
+
/** Which side of a range date input has focus (React Aria puts `slot` on the date input group). */
|
|
2060
|
+
function getActiveDateRangeBoundFromFocus() {
|
|
2061
|
+
const active = document.activeElement;
|
|
2062
|
+
if (!(active instanceof Element)) return null;
|
|
2063
|
+
if (active.closest("[slot=\"start\"]")) return "start";
|
|
2064
|
+
if (active.closest("[slot=\"end\"]")) return "end";
|
|
2065
|
+
return null;
|
|
2066
|
+
}
|
|
2067
|
+
//#endregion
|
|
2068
|
+
//#region src/components/DatePickerField/DatePickerField.module.css
|
|
2069
|
+
var DatePickerField_module_default = {
|
|
2070
|
+
"calendar": "capra-DatePickerField-module-F3cFEa-calendar",
|
|
2071
|
+
"calendarButton": "capra-DatePickerField-module-F3cFEa-calendarButton",
|
|
2072
|
+
"calendarHeader": "capra-DatePickerField-module-F3cFEa-calendarHeader",
|
|
2073
|
+
"calendarHeaderLeading": "capra-DatePickerField-module-F3cFEa-calendarHeaderLeading",
|
|
2074
|
+
"calendarHeaderTrailing": "capra-DatePickerField-module-F3cFEa-calendarHeaderTrailing",
|
|
2075
|
+
"calendarTitle": "capra-DatePickerField-module-F3cFEa-calendarTitle",
|
|
2076
|
+
"cell": "capra-DatePickerField-module-F3cFEa-cell",
|
|
2077
|
+
"dateInput": "capra-DatePickerField-module-F3cFEa-dateInput",
|
|
2078
|
+
"dateInputShell": "capra-DatePickerField-module-F3cFEa-dateInputShell",
|
|
2079
|
+
"datePickerField": "capra-DatePickerField-module-F3cFEa-datePickerField",
|
|
2080
|
+
"datePickerShell": "capra-DatePickerField-module-F3cFEa-datePickerShell",
|
|
2081
|
+
"dialog": "capra-DatePickerField-module-F3cFEa-dialog",
|
|
2082
|
+
"fieldError": "capra-DatePickerField-module-F3cFEa-fieldError",
|
|
2083
|
+
"grid": "capra-DatePickerField-module-F3cFEa-grid",
|
|
2084
|
+
"navButton": "capra-DatePickerField-module-F3cFEa-navButton",
|
|
2085
|
+
"popover": "capra-DatePickerField-module-F3cFEa-popover",
|
|
2086
|
+
"segment": "capra-DatePickerField-module-F3cFEa-segment",
|
|
2087
|
+
"stringPlaceholder": "capra-DatePickerField-module-F3cFEa-stringPlaceholder"
|
|
2088
|
+
};
|
|
2089
|
+
//#endregion
|
|
2090
|
+
//#region src/components/DatePickerField/DatePickerField.tsx
|
|
2091
|
+
/** Clamps a calendar day to `minValue` / `maxValue` the same way calendar keyboard navigation does. */
|
|
2092
|
+
function constrainFocusedDayToRange$1(date, minValue, maxValue) {
|
|
2093
|
+
let result = date;
|
|
2094
|
+
if (minValue) {
|
|
2095
|
+
const clamped = $ad063034c8620db8$export$a75f2bff57811055(result, $d07e34cce18680fd$export$93522d1a439f3617(minValue));
|
|
2096
|
+
if (clamped) result = clamped;
|
|
2097
|
+
}
|
|
2098
|
+
if (maxValue) {
|
|
2099
|
+
const clamped = $ad063034c8620db8$export$5c333a116e949cdd(result, $d07e34cce18680fd$export$93522d1a439f3617(maxValue));
|
|
2100
|
+
if (clamped) result = clamped;
|
|
2101
|
+
}
|
|
2102
|
+
return result;
|
|
2103
|
+
}
|
|
2104
|
+
function canShiftCalendarByYears$1(state, direction) {
|
|
2105
|
+
return !$ad063034c8620db8$export$ea39ec197993aef0(constrainFocusedDayToRange$1(direction === -1 ? state.focusedDate.subtract({ years: 1 }) : state.focusedDate.add({ years: 1 }), state.minValue, state.maxValue), state.focusedDate);
|
|
2106
|
+
}
|
|
2107
|
+
function DatePickerClearButton(props) {
|
|
2108
|
+
const { disabled, readOnly } = props;
|
|
2109
|
+
const state = React$1.useContext(DatePickerStateContext);
|
|
2110
|
+
if (!state || disabled || readOnly || !state.value) return null;
|
|
2111
|
+
return /* @__PURE__ */ React$1.createElement(ButtonContext.Provider, { value: null }, /* @__PURE__ */ React$1.createElement(IconButton, {
|
|
2112
|
+
size: "sm",
|
|
2113
|
+
variant: "tertiary",
|
|
2114
|
+
appearance: "neutral",
|
|
2115
|
+
icon: CircleXmark,
|
|
2116
|
+
"aria-label": "Clear",
|
|
2117
|
+
onClick: () => {
|
|
2118
|
+
state.setValue(null);
|
|
2119
|
+
}
|
|
2120
|
+
}));
|
|
2121
|
+
}
|
|
2122
|
+
function DatePickerFieldRow(props) {
|
|
2123
|
+
const { appearance, size = "md", leadingSlot, placeholder, canClear, disabled, readOnly } = props;
|
|
2124
|
+
const state = React$1.useContext(DatePickerStateContext);
|
|
2125
|
+
const handleCopy = React$1.useCallback((event) => {
|
|
2126
|
+
const pickerState = state;
|
|
2127
|
+
if (!pickerState?.value || disabled) return;
|
|
2128
|
+
event.preventDefault();
|
|
2129
|
+
const timeZone = resolvePickerTimeZone(pickerState);
|
|
2130
|
+
const iso = formatDateValueAsIsoPlainText(pickerState.value, pickerState.granularity, timeZone);
|
|
2131
|
+
event.clipboardData.setData("text/plain", iso);
|
|
2132
|
+
}, [disabled, state]);
|
|
2133
|
+
const handlePaste = React$1.useCallback((event) => {
|
|
2134
|
+
const pickerState = state;
|
|
2135
|
+
if (!pickerState || disabled || readOnly) return;
|
|
2136
|
+
const parsed = parseClipboardTextToDateValue(readClipboardPlainText(event.clipboardData));
|
|
2137
|
+
if (!parsed) return;
|
|
2138
|
+
event.preventDefault();
|
|
2139
|
+
pickerState.setValue(coercePastedValueToGranularity(parsed, pickerState.granularity));
|
|
2140
|
+
}, [
|
|
2141
|
+
disabled,
|
|
2142
|
+
readOnly,
|
|
2143
|
+
state
|
|
2144
|
+
]);
|
|
2145
|
+
return /* @__PURE__ */ React$1.createElement(Group, {
|
|
2146
|
+
"data-capra-text-input": "",
|
|
2147
|
+
"data-size": size,
|
|
2148
|
+
className: clsx(TextInput_module_default.wrapper, DatePickerField_module_default.datePickerShell),
|
|
2149
|
+
onCopy: handleCopy,
|
|
2150
|
+
onPaste: handlePaste
|
|
2151
|
+
}, leadingSlot && /* @__PURE__ */ React$1.createElement("span", { className: TextInput_module_default.leadingSlot }, leadingSlot), /* @__PURE__ */ React$1.createElement(DatePickerDateInputWithPlaceholder, { placeholder }), (appearance === "danger" || appearance === "warning") && /* @__PURE__ */ React$1.createElement("span", { className: TextInput_module_default.trailingSlot }, appearance === "warning" && /* @__PURE__ */ React$1.createElement("span", {
|
|
2152
|
+
className: TextInput_module_default.warningIndicator,
|
|
2153
|
+
"aria-hidden": true
|
|
2154
|
+
}, /* @__PURE__ */ React$1.createElement(WarningOutlined, { size: "sm" })), appearance === "danger" && /* @__PURE__ */ React$1.createElement("span", {
|
|
2155
|
+
className: TextInput_module_default.errorIndicator,
|
|
2156
|
+
"aria-hidden": true
|
|
2157
|
+
}, /* @__PURE__ */ React$1.createElement(Exclamation, { size: "sm" }))), canClear ? /* @__PURE__ */ React$1.createElement(DatePickerClearButton, {
|
|
2158
|
+
disabled,
|
|
2159
|
+
readOnly
|
|
2160
|
+
}) : null, /* @__PURE__ */ React$1.createElement(IconButton, {
|
|
2161
|
+
icon: CalendarOutlined,
|
|
2162
|
+
"aria-label": "Open calendar",
|
|
2163
|
+
appearance: "neutral",
|
|
2164
|
+
variant: "tertiary",
|
|
2165
|
+
size: "sm"
|
|
2166
|
+
}));
|
|
2167
|
+
}
|
|
2168
|
+
function DatePickerDateInputWithPlaceholder(props) {
|
|
2169
|
+
const { placeholder } = props;
|
|
2170
|
+
const state = React$1.useContext(DatePickerStateContext);
|
|
2171
|
+
const [isFocusWithin, setIsFocusWithin] = React$1.useState(false);
|
|
2172
|
+
const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocusWithin });
|
|
2173
|
+
const showStringPlaceholder = Boolean(placeholder && state?.value == null && !isFocusWithin);
|
|
2174
|
+
return /* @__PURE__ */ React$1.createElement("div", {
|
|
2175
|
+
...focusWithinProps,
|
|
2176
|
+
className: DatePickerField_module_default.dateInputShell,
|
|
2177
|
+
"data-show-string-placeholder": showStringPlaceholder || void 0
|
|
2178
|
+
}, /* @__PURE__ */ React$1.createElement(DateInput, { className: clsx(TextInput_module_default.input, DatePickerField_module_default.dateInput) }, (segment) => /* @__PURE__ */ React$1.createElement(DateSegment, {
|
|
2179
|
+
segment,
|
|
2180
|
+
"aria-hidden": true,
|
|
2181
|
+
className: DatePickerField_module_default.segment
|
|
2182
|
+
})), showStringPlaceholder ? /* @__PURE__ */ React$1.createElement("span", {
|
|
2183
|
+
className: DatePickerField_module_default.stringPlaceholder,
|
|
2184
|
+
"aria-hidden": true
|
|
2185
|
+
}, placeholder) : null);
|
|
2186
|
+
}
|
|
2187
|
+
function CalendarMonthHeading$1(props) {
|
|
2188
|
+
const { state, className } = props;
|
|
2189
|
+
const formatter = useDateFormatter({
|
|
2190
|
+
month: "short",
|
|
2191
|
+
year: "numeric",
|
|
2192
|
+
timeZone: state.timeZone
|
|
2193
|
+
});
|
|
2194
|
+
return /* @__PURE__ */ React$1.createElement(Heading, { className }, formatter.format(state.visibleRange.start.toDate(state.timeZone)));
|
|
2195
|
+
}
|
|
2196
|
+
function DatePickerFieldInner(props, ref) {
|
|
2197
|
+
const { label, helperText, layout, appearance = "default", size = "md", leadingSlot, placeholder, disabled, readOnly, required, id, isInvalid: isInvalidFromProps, canClear, FORCE__className: classNameOverride, ...ariaPickerProps } = props;
|
|
2198
|
+
const isInvalid = Boolean(isInvalidFromProps || appearance === "danger");
|
|
2199
|
+
return /* @__PURE__ */ React$1.createElement(DatePicker, {
|
|
2200
|
+
ref,
|
|
2201
|
+
...ariaPickerProps,
|
|
2202
|
+
id,
|
|
2203
|
+
className: clsx(fieldLayout_module_default.field, DatePickerField_module_default.datePickerField, classNameOverride),
|
|
2204
|
+
"data-capra-field-root": "",
|
|
2205
|
+
"data-layout": layout,
|
|
2206
|
+
isDisabled: disabled,
|
|
2207
|
+
isReadOnly: readOnly,
|
|
2208
|
+
isRequired: required,
|
|
2209
|
+
isInvalid,
|
|
2210
|
+
shouldForceLeadingZeros: true,
|
|
2211
|
+
validationBehavior: "aria"
|
|
2212
|
+
}, /* @__PURE__ */ React$1.createElement(Label$1, { required }, label), /* @__PURE__ */ React$1.createElement(DatePickerFieldRow, {
|
|
2213
|
+
appearance,
|
|
2214
|
+
size,
|
|
2215
|
+
leadingSlot,
|
|
2216
|
+
placeholder,
|
|
2217
|
+
canClear,
|
|
2218
|
+
disabled,
|
|
2219
|
+
readOnly
|
|
2220
|
+
}), helperText ? /* @__PURE__ */ React$1.createElement(Text$1, {
|
|
2221
|
+
slot: "description",
|
|
2222
|
+
elementType: "div"
|
|
2223
|
+
}, /* @__PURE__ */ React$1.createElement(HelperText, {
|
|
2224
|
+
appearance,
|
|
2225
|
+
disabled
|
|
2226
|
+
}, helperText)) : null, /* @__PURE__ */ React$1.createElement(Popover$1, {
|
|
2227
|
+
className: DatePickerField_module_default.popover,
|
|
2228
|
+
offset: 4
|
|
2229
|
+
}, /* @__PURE__ */ React$1.createElement(Dialog, { className: DatePickerField_module_default.dialog }, /* @__PURE__ */ React$1.createElement(Calendar, { className: DatePickerField_module_default.calendar }, ({ state }) => /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(Header, { className: DatePickerField_module_default.calendarHeader }, /* @__PURE__ */ React$1.createElement("div", { className: DatePickerField_module_default.calendarHeaderLeading }, /* @__PURE__ */ React$1.createElement(IconButton, {
|
|
2230
|
+
icon: AnglesLeft,
|
|
2231
|
+
"aria-label": "Previous year",
|
|
2232
|
+
appearance: "neutral",
|
|
2233
|
+
variant: "tertiary",
|
|
2234
|
+
size: "sm",
|
|
2235
|
+
slot: "previous",
|
|
2236
|
+
disabled: state.isDisabled || !canShiftCalendarByYears$1(state, -1),
|
|
2237
|
+
onPress: () => {
|
|
2238
|
+
state.focusPreviousSection(true);
|
|
2239
|
+
}
|
|
2240
|
+
}), /* @__PURE__ */ React$1.createElement(IconButton, {
|
|
2241
|
+
icon: CalendarPrevOutlined,
|
|
2242
|
+
"aria-label": "Previous month",
|
|
2243
|
+
appearance: "neutral",
|
|
2244
|
+
variant: "tertiary",
|
|
2245
|
+
slot: "previous",
|
|
2246
|
+
size: "sm"
|
|
2247
|
+
})), /* @__PURE__ */ React$1.createElement(CalendarMonthHeading$1, {
|
|
2248
|
+
state,
|
|
2249
|
+
className: DatePickerField_module_default.calendarTitle
|
|
2250
|
+
}), /* @__PURE__ */ React$1.createElement("div", { className: DatePickerField_module_default.calendarHeaderTrailing }, /* @__PURE__ */ React$1.createElement(IconButton, {
|
|
2251
|
+
icon: CalendarNextOutlined,
|
|
2252
|
+
"aria-label": "Next month",
|
|
2253
|
+
appearance: "neutral",
|
|
2254
|
+
variant: "tertiary",
|
|
2255
|
+
slot: "next",
|
|
2256
|
+
size: "sm"
|
|
2257
|
+
}), /* @__PURE__ */ React$1.createElement(IconButton, {
|
|
2258
|
+
icon: AnglesRight,
|
|
2259
|
+
"aria-label": "Next year",
|
|
2260
|
+
appearance: "neutral",
|
|
2261
|
+
variant: "tertiary",
|
|
2262
|
+
size: "sm",
|
|
2263
|
+
slot: "next",
|
|
2264
|
+
disabled: state.isDisabled || !canShiftCalendarByYears$1(state, 1),
|
|
2265
|
+
onPress: () => {
|
|
2266
|
+
state.focusNextSection(true);
|
|
2267
|
+
}
|
|
2268
|
+
}))), /* @__PURE__ */ React$1.createElement(CalendarGrid, {
|
|
2269
|
+
className: DatePickerField_module_default.grid,
|
|
2270
|
+
weekdayStyle: "long"
|
|
2271
|
+
}, /* @__PURE__ */ React$1.createElement(CalendarGridHeader, null, (day) => /* @__PURE__ */ React$1.createElement(CalendarHeaderCell, { "aria-label": day }, day.slice(0, 2))), /* @__PURE__ */ React$1.createElement(CalendarGridBody, null, (date) => /* @__PURE__ */ React$1.createElement(CalendarCell, {
|
|
2272
|
+
date,
|
|
2273
|
+
className: DatePickerField_module_default.cell
|
|
2274
|
+
}))))))));
|
|
2275
|
+
}
|
|
2276
|
+
const DatePickerFieldWithRef = React$1.forwardRef(DatePickerFieldInner);
|
|
2277
|
+
/** Date field with segmented input and a calendar popover. */
|
|
2278
|
+
DatePickerFieldWithRef.displayName = "DatePickerField";
|
|
2279
|
+
const DatePickerField = DatePickerFieldWithRef;
|
|
2280
|
+
//#endregion
|
|
2281
|
+
//#region src/components/DateRangePickerField/DateRangePickerField.module.css
|
|
2282
|
+
var DateRangePickerField_module_default = {
|
|
2283
|
+
"cell": "capra-DateRangePickerField-module-QpPhpG-cell",
|
|
2284
|
+
"dateInputsRow": "capra-DateRangePickerField-module-QpPhpG-dateInputsRow",
|
|
2285
|
+
"dateRangeInputShell": "capra-DateRangePickerField-module-QpPhpG-dateRangeInputShell",
|
|
2286
|
+
"grid": "capra-DateRangePickerField-module-QpPhpG-grid",
|
|
2287
|
+
"stringPlaceholderRange": "capra-DateRangePickerField-module-QpPhpG-stringPlaceholderRange",
|
|
2288
|
+
"stringPlaceholderSwap": "capra-DateRangePickerField-module-QpPhpG-stringPlaceholderSwap",
|
|
2289
|
+
"stringPlaceholderText": "capra-DateRangePickerField-module-QpPhpG-stringPlaceholderText"
|
|
2290
|
+
};
|
|
2291
|
+
//#endregion
|
|
2292
|
+
//#region src/components/DateRangePickerField/DateRangePickerField.tsx
|
|
2293
|
+
/** Clamps a calendar day to `minValue` / `maxValue` the same way calendar keyboard navigation does. */
|
|
2294
|
+
function constrainFocusedDayToRange(date, minValue, maxValue) {
|
|
2295
|
+
let result = date;
|
|
2296
|
+
if (minValue) {
|
|
2297
|
+
const clamped = $ad063034c8620db8$export$a75f2bff57811055(result, $d07e34cce18680fd$export$93522d1a439f3617(minValue));
|
|
2298
|
+
if (clamped) result = clamped;
|
|
2299
|
+
}
|
|
2300
|
+
if (maxValue) {
|
|
2301
|
+
const clamped = $ad063034c8620db8$export$5c333a116e949cdd(result, $d07e34cce18680fd$export$93522d1a439f3617(maxValue));
|
|
2302
|
+
if (clamped) result = clamped;
|
|
2303
|
+
}
|
|
2304
|
+
return result;
|
|
2305
|
+
}
|
|
2306
|
+
function canShiftCalendarByYears(state, direction) {
|
|
2307
|
+
return !$ad063034c8620db8$export$ea39ec197993aef0(constrainFocusedDayToRange(direction === -1 ? state.focusedDate.subtract({ years: 1 }) : state.focusedDate.add({ years: 1 }), state.minValue, state.maxValue), state.focusedDate);
|
|
2308
|
+
}
|
|
2309
|
+
/**
|
|
2310
|
+
* React Aria omits `data-selected` on “outside month” cells when they are outside the calendar
|
|
2311
|
+
* page’s visible bounds (so `isCellDisabled` is true), even if they fall inside `highlightedRange`.
|
|
2312
|
+
* We mirror range styling using `data-capra-range-track` so the span matches design (Figma).
|
|
2313
|
+
*/
|
|
2314
|
+
function capraRangeTrackDataAttr(state, date) {
|
|
2315
|
+
if (!state || state.isDisabled || !state.highlightedRange) return {};
|
|
2316
|
+
if ($ad063034c8620db8$export$a18c89cbd24170ff(state.visibleRange.start, date)) return {};
|
|
2317
|
+
const { start, end } = state.highlightedRange;
|
|
2318
|
+
if (date.compare(start) < 0 || date.compare(end) > 0) return {};
|
|
2319
|
+
if (state.isCellUnavailable(date)) return {};
|
|
2320
|
+
if (state.isSelected(date)) return {};
|
|
2321
|
+
return { "data-capra-range-track": true };
|
|
2322
|
+
}
|
|
2323
|
+
function DateRangePickerCalendarCell(props) {
|
|
2324
|
+
const { date } = props;
|
|
2325
|
+
const rangeState = React$1.useContext(RangeCalendarStateContext);
|
|
2326
|
+
return /* @__PURE__ */ React$1.createElement(CalendarCell, {
|
|
2327
|
+
date,
|
|
2328
|
+
className: DateRangePickerField_module_default.cell,
|
|
2329
|
+
...capraRangeTrackDataAttr(rangeState, date)
|
|
2330
|
+
});
|
|
2331
|
+
}
|
|
2332
|
+
function DateRangePickerDateInputsWithPlaceholder(props) {
|
|
2333
|
+
const { placeholder } = props;
|
|
2334
|
+
const state = React$1.useContext(DateRangePickerStateContext);
|
|
2335
|
+
const [isFocusWithin, setIsFocusWithin] = React$1.useState(false);
|
|
2336
|
+
const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocusWithin });
|
|
2337
|
+
const hasNoDates = !state?.value?.start && !state?.value?.end;
|
|
2338
|
+
const showStringPlaceholder = Boolean(placeholder && hasNoDates && !isFocusWithin);
|
|
2339
|
+
return /* @__PURE__ */ React$1.createElement("div", {
|
|
2340
|
+
...focusWithinProps,
|
|
2341
|
+
className: clsx(DatePickerField_module_default.dateInputShell, DateRangePickerField_module_default.dateRangeInputShell),
|
|
2342
|
+
"data-show-string-placeholder": showStringPlaceholder || void 0
|
|
2343
|
+
}, /* @__PURE__ */ React$1.createElement("div", { className: DateRangePickerField_module_default.dateInputsRow }, /* @__PURE__ */ React$1.createElement(DateInput, {
|
|
2344
|
+
slot: "start",
|
|
2345
|
+
className: clsx(TextInput_module_default.input, DatePickerField_module_default.dateInput)
|
|
2346
|
+
}, (segment) => /* @__PURE__ */ React$1.createElement(DateSegment, {
|
|
2347
|
+
segment,
|
|
2348
|
+
"aria-hidden": true,
|
|
2349
|
+
className: DatePickerField_module_default.segment
|
|
2350
|
+
})), /* @__PURE__ */ React$1.createElement(SwapRightOutlined, null), /* @__PURE__ */ React$1.createElement(DateInput, {
|
|
2351
|
+
slot: "end",
|
|
2352
|
+
className: clsx(TextInput_module_default.input, DatePickerField_module_default.dateInput)
|
|
2353
|
+
}, (segment) => /* @__PURE__ */ React$1.createElement(DateSegment, {
|
|
2354
|
+
segment,
|
|
2355
|
+
"aria-hidden": true,
|
|
2356
|
+
className: DatePickerField_module_default.segment
|
|
2357
|
+
}))), showStringPlaceholder && placeholder ? /* @__PURE__ */ React$1.createElement("span", {
|
|
2358
|
+
className: clsx(DatePickerField_module_default.stringPlaceholder, DateRangePickerField_module_default.stringPlaceholderRange),
|
|
2359
|
+
"aria-hidden": true
|
|
2360
|
+
}, /* @__PURE__ */ React$1.createElement("span", { className: DateRangePickerField_module_default.stringPlaceholderText }, placeholder[0]), /* @__PURE__ */ React$1.createElement("span", { className: DateRangePickerField_module_default.stringPlaceholderSwap }, /* @__PURE__ */ React$1.createElement(SwapRightOutlined, null)), /* @__PURE__ */ React$1.createElement("span", { className: DateRangePickerField_module_default.stringPlaceholderText }, placeholder[1])) : null);
|
|
2361
|
+
}
|
|
2362
|
+
function DateRangePickerClearButton(props) {
|
|
2363
|
+
const { disabled, readOnly } = props;
|
|
2364
|
+
const state = React$1.useContext(DateRangePickerStateContext);
|
|
2365
|
+
if (!state || disabled || readOnly) return null;
|
|
2366
|
+
if (!Boolean(state.value.start || state.value.end)) return null;
|
|
2367
|
+
return /* @__PURE__ */ React$1.createElement(ButtonContext.Provider, { value: null }, /* @__PURE__ */ React$1.createElement(IconButton, {
|
|
2368
|
+
size: "sm",
|
|
2369
|
+
variant: "tertiary",
|
|
2370
|
+
appearance: "neutral",
|
|
2371
|
+
icon: CircleXmark,
|
|
2372
|
+
"aria-label": "Clear",
|
|
2373
|
+
onClick: () => {
|
|
2374
|
+
state.setValue(null);
|
|
2375
|
+
}
|
|
2376
|
+
}));
|
|
2377
|
+
}
|
|
2378
|
+
function DateRangePickerFieldRow(props) {
|
|
2379
|
+
const { appearance, size = "md", leadingSlot, placeholder, canClear, disabled, readOnly } = props;
|
|
2380
|
+
const state = React$1.useContext(DateRangePickerStateContext);
|
|
2381
|
+
const handleCopy = React$1.useCallback((event) => {
|
|
2382
|
+
const rangeState = state;
|
|
2383
|
+
if (!rangeState || disabled) return;
|
|
2384
|
+
const part = getActiveDateRangeBoundFromFocus();
|
|
2385
|
+
if (!part) return;
|
|
2386
|
+
const boundValue = part === "start" ? rangeState.value.start : rangeState.value.end;
|
|
2387
|
+
if (!boundValue) return;
|
|
2388
|
+
event.preventDefault();
|
|
2389
|
+
const timeZone = resolvePickerTimeZone(rangeState);
|
|
2390
|
+
event.clipboardData.setData("text/plain", formatDateValueAsIsoPlainText(boundValue, rangeState.granularity, timeZone));
|
|
2391
|
+
}, [disabled, state]);
|
|
2392
|
+
const handlePaste = React$1.useCallback((event) => {
|
|
2393
|
+
const rangeState = state;
|
|
2394
|
+
if (!rangeState || disabled || readOnly) return;
|
|
2395
|
+
const part = getActiveDateRangeBoundFromFocus();
|
|
2396
|
+
if (!part) return;
|
|
2397
|
+
const parsed = parseClipboardTextToDateValue(readClipboardPlainText(event.clipboardData));
|
|
2398
|
+
if (!parsed) return;
|
|
2399
|
+
event.preventDefault();
|
|
2400
|
+
rangeState.setDateTime(part, coercePastedValueToGranularity(parsed, rangeState.granularity));
|
|
2401
|
+
}, [
|
|
2402
|
+
disabled,
|
|
2403
|
+
readOnly,
|
|
2404
|
+
state
|
|
2405
|
+
]);
|
|
2406
|
+
return /* @__PURE__ */ React$1.createElement(Group, {
|
|
2407
|
+
"data-capra-text-input": "",
|
|
2408
|
+
"data-size": size,
|
|
2409
|
+
className: clsx(TextInput_module_default.wrapper, DatePickerField_module_default.datePickerShell),
|
|
2410
|
+
onCopy: handleCopy,
|
|
2411
|
+
onPaste: handlePaste
|
|
2412
|
+
}, leadingSlot && /* @__PURE__ */ React$1.createElement("span", { className: TextInput_module_default.leadingSlot }, leadingSlot), /* @__PURE__ */ React$1.createElement(DateRangePickerDateInputsWithPlaceholder, { placeholder }), (appearance === "danger" || appearance === "warning") && /* @__PURE__ */ React$1.createElement("span", { className: TextInput_module_default.trailingSlot }, appearance === "warning" && /* @__PURE__ */ React$1.createElement("span", {
|
|
2413
|
+
className: TextInput_module_default.warningIndicator,
|
|
2414
|
+
"aria-hidden": true
|
|
2415
|
+
}, /* @__PURE__ */ React$1.createElement(WarningOutlined, { size: "sm" })), appearance === "danger" && /* @__PURE__ */ React$1.createElement("span", {
|
|
2416
|
+
className: TextInput_module_default.errorIndicator,
|
|
2417
|
+
"aria-hidden": true
|
|
2418
|
+
}, /* @__PURE__ */ React$1.createElement(Exclamation, { size: "sm" }))), canClear ? /* @__PURE__ */ React$1.createElement(DateRangePickerClearButton, {
|
|
2419
|
+
disabled,
|
|
2420
|
+
readOnly
|
|
2421
|
+
}) : null, /* @__PURE__ */ React$1.createElement(IconButton, {
|
|
2422
|
+
icon: CalendarOutlined,
|
|
2423
|
+
"aria-label": "Open calendar",
|
|
2424
|
+
appearance: "neutral",
|
|
2425
|
+
variant: "tertiary",
|
|
2426
|
+
size: "sm"
|
|
2427
|
+
}));
|
|
2428
|
+
}
|
|
2429
|
+
function CalendarMonthHeading(props) {
|
|
2430
|
+
const { state, className } = props;
|
|
2431
|
+
const formatter = useDateFormatter({
|
|
2432
|
+
month: "short",
|
|
2433
|
+
year: "numeric",
|
|
2434
|
+
timeZone: state.timeZone
|
|
2435
|
+
});
|
|
2436
|
+
return /* @__PURE__ */ React$1.createElement(Heading, { className }, formatter.format(state.visibleRange.start.toDate(state.timeZone)));
|
|
2437
|
+
}
|
|
2438
|
+
function DateRangePickerFieldInner(props, ref) {
|
|
2439
|
+
const { label, helperText, layout, appearance = "default", size = "md", leadingSlot, placeholder, disabled, readOnly, required, id, isInvalid: isInvalidFromProps, canClear, FORCE__className: classNameOverride, ...ariaPickerProps } = props;
|
|
2440
|
+
const isInvalid = Boolean(isInvalidFromProps || appearance === "danger");
|
|
2441
|
+
return /* @__PURE__ */ React$1.createElement(DateRangePicker, {
|
|
2442
|
+
ref,
|
|
2443
|
+
...ariaPickerProps,
|
|
2444
|
+
id,
|
|
2445
|
+
className: clsx(fieldLayout_module_default.field, DatePickerField_module_default.datePickerField, classNameOverride),
|
|
2446
|
+
"data-capra-field-root": "",
|
|
2447
|
+
"data-layout": layout,
|
|
2448
|
+
isDisabled: disabled,
|
|
2449
|
+
isReadOnly: readOnly,
|
|
2450
|
+
isRequired: required,
|
|
2451
|
+
isInvalid,
|
|
2452
|
+
shouldForceLeadingZeros: true,
|
|
2453
|
+
validationBehavior: "aria"
|
|
2454
|
+
}, /* @__PURE__ */ React$1.createElement(Label$1, { required }, label), /* @__PURE__ */ React$1.createElement(DateRangePickerFieldRow, {
|
|
2455
|
+
appearance,
|
|
2456
|
+
size,
|
|
2457
|
+
leadingSlot,
|
|
2458
|
+
placeholder,
|
|
2459
|
+
canClear,
|
|
2460
|
+
disabled,
|
|
2461
|
+
readOnly
|
|
2462
|
+
}), helperText ? /* @__PURE__ */ React$1.createElement(Text$1, {
|
|
2463
|
+
slot: "description",
|
|
2464
|
+
elementType: "div"
|
|
2465
|
+
}, /* @__PURE__ */ React$1.createElement(HelperText, {
|
|
2466
|
+
appearance,
|
|
2467
|
+
disabled
|
|
2468
|
+
}, helperText)) : null, /* @__PURE__ */ React$1.createElement(Popover$1, {
|
|
2469
|
+
className: DatePickerField_module_default.popover,
|
|
2470
|
+
offset: 4
|
|
2471
|
+
}, /* @__PURE__ */ React$1.createElement(Dialog, { className: DatePickerField_module_default.dialog }, /* @__PURE__ */ React$1.createElement(RangeCalendar, { className: DatePickerField_module_default.calendar }, ({ state }) => /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(Header, { className: DatePickerField_module_default.calendarHeader }, /* @__PURE__ */ React$1.createElement("div", { className: DatePickerField_module_default.calendarHeaderLeading }, /* @__PURE__ */ React$1.createElement(IconButton, {
|
|
2472
|
+
icon: AnglesLeft,
|
|
2473
|
+
"aria-label": "Previous year",
|
|
2474
|
+
appearance: "neutral",
|
|
2475
|
+
variant: "tertiary",
|
|
2476
|
+
size: "sm",
|
|
2477
|
+
slot: "previous",
|
|
2478
|
+
disabled: state.isDisabled || !canShiftCalendarByYears(state, -1),
|
|
2479
|
+
onPress: () => {
|
|
2480
|
+
state.focusPreviousSection(true);
|
|
2481
|
+
}
|
|
2482
|
+
}), /* @__PURE__ */ React$1.createElement(IconButton, {
|
|
2483
|
+
icon: CalendarPrevOutlined,
|
|
2484
|
+
"aria-label": "Previous month",
|
|
2485
|
+
appearance: "neutral",
|
|
2486
|
+
variant: "tertiary",
|
|
2487
|
+
slot: "previous",
|
|
2488
|
+
size: "sm"
|
|
2489
|
+
})), /* @__PURE__ */ React$1.createElement(CalendarMonthHeading, {
|
|
2490
|
+
state,
|
|
2491
|
+
className: DatePickerField_module_default.calendarTitle
|
|
2492
|
+
}), /* @__PURE__ */ React$1.createElement("div", { className: DatePickerField_module_default.calendarHeaderTrailing }, /* @__PURE__ */ React$1.createElement(IconButton, {
|
|
2493
|
+
icon: CalendarNextOutlined,
|
|
2494
|
+
"aria-label": "Next month",
|
|
2495
|
+
appearance: "neutral",
|
|
2496
|
+
variant: "tertiary",
|
|
2497
|
+
slot: "next",
|
|
2498
|
+
size: "sm"
|
|
2499
|
+
}), /* @__PURE__ */ React$1.createElement(IconButton, {
|
|
2500
|
+
icon: AnglesRight,
|
|
2501
|
+
"aria-label": "Next year",
|
|
2502
|
+
appearance: "neutral",
|
|
2503
|
+
variant: "tertiary",
|
|
2504
|
+
size: "sm",
|
|
2505
|
+
slot: "next",
|
|
2506
|
+
disabled: state.isDisabled || !canShiftCalendarByYears(state, 1),
|
|
2507
|
+
onPress: () => {
|
|
2508
|
+
state.focusNextSection(true);
|
|
2509
|
+
}
|
|
2510
|
+
}))), /* @__PURE__ */ React$1.createElement(CalendarGrid, {
|
|
2511
|
+
className: DateRangePickerField_module_default.grid,
|
|
2512
|
+
weekdayStyle: "long"
|
|
2513
|
+
}, /* @__PURE__ */ React$1.createElement(CalendarGridHeader, null, (day) => /* @__PURE__ */ React$1.createElement(CalendarHeaderCell, { "aria-label": day }, day.slice(0, 2))), /* @__PURE__ */ React$1.createElement(CalendarGridBody, null, (date) => /* @__PURE__ */ React$1.createElement(DateRangePickerCalendarCell, { date }))))))));
|
|
2514
|
+
}
|
|
2515
|
+
const DateRangePickerFieldWithRef = React$1.forwardRef(DateRangePickerFieldInner);
|
|
2516
|
+
/** Date range field with two segmented inputs and a range calendar popover. */
|
|
2517
|
+
DateRangePickerFieldWithRef.displayName = "DateRangePickerField";
|
|
2518
|
+
const DateRangePickerField = DateRangePickerFieldWithRef;
|
|
2519
|
+
//#endregion
|
|
2520
|
+
//#region src/components/TextArea/TextArea.module.css
|
|
2521
|
+
var TextArea_module_default = {
|
|
2522
|
+
"errorIndicator": "capra-TextArea-module-mXpaDq-errorIndicator",
|
|
2523
|
+
"indicators": "capra-TextArea-module-mXpaDq-indicators",
|
|
2524
|
+
"textarea": "capra-TextArea-module-mXpaDq-textarea",
|
|
2525
|
+
"trailingRow": "capra-TextArea-module-mXpaDq-trailingRow",
|
|
2526
|
+
"warningIndicator": "capra-TextArea-module-mXpaDq-warningIndicator",
|
|
2527
|
+
"wrapper": "capra-TextArea-module-mXpaDq-wrapper"
|
|
2528
|
+
};
|
|
2529
|
+
//#endregion
|
|
2530
|
+
//#region src/components/TextArea/textAreaAutosize.ts
|
|
2531
|
+
/** Ant Design–style autosize: boolean or `{ minRows, maxRows }`. */
|
|
2532
|
+
function isAutoSizeEnabled(autoSize) {
|
|
2533
|
+
return autoSize === true || typeof autoSize === "object" && autoSize !== null;
|
|
2534
|
+
}
|
|
2535
|
+
function resolveAutoSizeRows(autoSize, rowsFromProps) {
|
|
2536
|
+
const minFromConfig = typeof autoSize === "object" ? autoSize.minRows : void 0;
|
|
2537
|
+
const maxFromConfig = typeof autoSize === "object" ? autoSize.maxRows : void 0;
|
|
2538
|
+
const minRows = minFromConfig ?? rowsFromProps ?? 1;
|
|
2539
|
+
const maxRows = maxFromConfig;
|
|
2540
|
+
return {
|
|
2541
|
+
minRows: Math.max(1, Math.floor(minRows)),
|
|
2542
|
+
maxRows: maxRows ? Math.max(minRows, Math.floor(maxRows)) : void 0
|
|
2543
|
+
};
|
|
2544
|
+
}
|
|
2545
|
+
/**
|
|
2546
|
+
* Measure intrinsic height for a row count. Value must be cleared first: with existing text,
|
|
2547
|
+
* `scrollHeight` is the full content height, not the box height for `rowCount` rows (so maxRows
|
|
2548
|
+
* would never clamp).
|
|
2549
|
+
*/
|
|
2550
|
+
function measureHeightForRows(textarea, rowCount) {
|
|
2551
|
+
const previousRows = textarea.rows;
|
|
2552
|
+
const previousValue = textarea.value;
|
|
2553
|
+
const previousSelectionStart = textarea.selectionStart;
|
|
2554
|
+
const previousSelectionEnd = textarea.selectionEnd;
|
|
2555
|
+
const previousSelectionDirection = textarea.selectionDirection;
|
|
2556
|
+
const previousScrollTop = textarea.scrollTop;
|
|
2557
|
+
textarea.value = "";
|
|
2558
|
+
textarea.rows = rowCount;
|
|
2559
|
+
textarea.style.height = "auto";
|
|
2560
|
+
const height = textarea.scrollHeight;
|
|
2561
|
+
textarea.value = previousValue;
|
|
2562
|
+
textarea.rows = previousRows;
|
|
2563
|
+
textarea.scrollTop = previousScrollTop;
|
|
2564
|
+
if (previousSelectionStart !== null && previousSelectionEnd !== null) textarea.setSelectionRange(previousSelectionStart, previousSelectionEnd, previousSelectionDirection ?? void 0);
|
|
2565
|
+
return height;
|
|
2566
|
+
}
|
|
2567
|
+
/**
|
|
2568
|
+
* Sets inline height (and overflow-y) so the field matches content, clamped by min/max rows.
|
|
2569
|
+
*/
|
|
2570
|
+
function syncTextareaAutoSize(textarea, autoSize, rowsFromProps) {
|
|
2571
|
+
if (!isAutoSizeEnabled(autoSize)) return;
|
|
2572
|
+
const { minRows, maxRows } = resolveAutoSizeRows(autoSize, rowsFromProps);
|
|
2573
|
+
const minHeight = measureHeightForRows(textarea, minRows);
|
|
2574
|
+
const maxHeight = maxRows ? measureHeightForRows(textarea, maxRows) : Number.POSITIVE_INFINITY;
|
|
2575
|
+
textarea.style.overflowY = "hidden";
|
|
2576
|
+
textarea.style.height = "0px";
|
|
2577
|
+
const contentHeight = textarea.scrollHeight;
|
|
2578
|
+
let nextHeight = Math.max(contentHeight, minHeight);
|
|
2579
|
+
if (nextHeight > maxHeight) nextHeight = maxHeight;
|
|
2580
|
+
textarea.style.height = `${nextHeight}px`;
|
|
2581
|
+
textarea.style.overflowY = maxRows && contentHeight > maxHeight ? "auto" : "hidden";
|
|
2582
|
+
}
|
|
2583
|
+
function useTextAreaAutoSize({ config, ref, rows, value, onChange, onInput }) {
|
|
2584
|
+
const textareaRef = React$1.useRef(null);
|
|
2585
|
+
const autoSizeActive = isAutoSizeEnabled(config);
|
|
2586
|
+
React$1.useImperativeHandle(ref, () => textareaRef.current);
|
|
2587
|
+
const resize = React$1.useCallback(() => {
|
|
2588
|
+
const el = textareaRef.current;
|
|
2589
|
+
if (!el || !isAutoSizeEnabled(config)) return;
|
|
2590
|
+
syncTextareaAutoSize(el, config, rows);
|
|
2591
|
+
}, [config, rows]);
|
|
2592
|
+
React$1.useLayoutEffect(() => {
|
|
2593
|
+
const el = textareaRef.current;
|
|
2594
|
+
if (!el) return;
|
|
2595
|
+
if (!autoSizeActive) {
|
|
2596
|
+
el.style.height = "";
|
|
2597
|
+
el.style.overflowY = "";
|
|
2598
|
+
return;
|
|
2599
|
+
}
|
|
2600
|
+
resize();
|
|
2601
|
+
}, [
|
|
2602
|
+
autoSizeActive,
|
|
2603
|
+
resize,
|
|
2604
|
+
value
|
|
2605
|
+
]);
|
|
2606
|
+
React$1.useLayoutEffect(() => {
|
|
2607
|
+
if (!autoSizeActive) return;
|
|
2608
|
+
const el = textareaRef.current;
|
|
2609
|
+
if (!el || typeof ResizeObserver === "undefined") return;
|
|
2610
|
+
const ro = new ResizeObserver(() => resize());
|
|
2611
|
+
ro.observe(el);
|
|
2612
|
+
return () => ro.disconnect();
|
|
2613
|
+
}, [autoSizeActive, resize]);
|
|
2614
|
+
return {
|
|
2615
|
+
isActive: autoSizeActive,
|
|
2616
|
+
ref: textareaRef,
|
|
2617
|
+
onChange: React$1.useCallback((event) => {
|
|
2618
|
+
onChange?.(event.target.value);
|
|
2619
|
+
if (autoSizeActive) queueMicrotask(resize);
|
|
2620
|
+
}, [
|
|
2621
|
+
autoSizeActive,
|
|
2622
|
+
onChange,
|
|
2623
|
+
resize
|
|
2624
|
+
]),
|
|
2625
|
+
onInput: React$1.useCallback((event) => {
|
|
2626
|
+
onInput?.(event);
|
|
2627
|
+
if (autoSizeActive) queueMicrotask(resize);
|
|
2628
|
+
}, [
|
|
2629
|
+
autoSizeActive,
|
|
2630
|
+
onInput,
|
|
2631
|
+
resize
|
|
2632
|
+
])
|
|
2633
|
+
};
|
|
2634
|
+
}
|
|
2635
|
+
//#endregion
|
|
2636
|
+
//#region src/components/TextArea/TextArea.tsx
|
|
2637
|
+
/**
|
|
2638
|
+
* TextArea component for multi-line text entry.
|
|
2639
|
+
*/
|
|
2640
|
+
const TextArea = React$1.forwardRef((props, ref) => {
|
|
2641
|
+
const { appearance = "default", FORCE__className: classNameOverride, disabled, required, resizable = true, readOnly, autoSize, rows, label, helperText, layout, showCount = false, id, maxLength, name, value, defaultValue, onChange, onInput, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, style: _style, ...nativeRest } = props;
|
|
2642
|
+
const currentValue = String(value ?? "");
|
|
2643
|
+
const isControlled = value !== void 0;
|
|
2644
|
+
const defaultValueString = defaultValue === void 0 ? void 0 : typeof defaultValue === "string" ? defaultValue : typeof defaultValue === "number" ? String(defaultValue) : defaultValue.join("");
|
|
2645
|
+
const { isActive: autoSizeActive, ref: textareaRef, onChange: handleAutosizeChange, onInput: handleAutosizeInput } = useTextAreaAutoSize({
|
|
2646
|
+
config: autoSize ?? false,
|
|
2647
|
+
ref,
|
|
2648
|
+
rows,
|
|
2649
|
+
value,
|
|
2650
|
+
onChange,
|
|
2651
|
+
onInput
|
|
2652
|
+
});
|
|
2653
|
+
const ariaFieldOnChange = isControlled && onChange ? (_nextValue) => {
|
|
2654
|
+
onChange(_nextValue);
|
|
2655
|
+
} : void 0;
|
|
2656
|
+
const ariaFieldProps = {
|
|
2657
|
+
isDisabled: disabled,
|
|
2658
|
+
isReadOnly: readOnly,
|
|
2659
|
+
isRequired: required,
|
|
2660
|
+
isInvalid: appearance === "danger",
|
|
2661
|
+
validationBehavior: "aria",
|
|
2662
|
+
id,
|
|
2663
|
+
name,
|
|
2664
|
+
maxLength,
|
|
2665
|
+
rows,
|
|
2666
|
+
"aria-label": ariaLabel,
|
|
2667
|
+
"aria-labelledby": ariaLabelledBy,
|
|
2668
|
+
...isControlled ? { value: currentValue } : {},
|
|
2669
|
+
...!isControlled && defaultValueString !== void 0 ? { defaultValue: defaultValueString } : {},
|
|
2670
|
+
...ariaFieldOnChange ? { onChange: ariaFieldOnChange } : {}
|
|
2671
|
+
};
|
|
2672
|
+
const hasIndicator = appearance === "danger" || appearance === "warning";
|
|
2673
|
+
let countNode;
|
|
2674
|
+
if (showCount) {
|
|
2675
|
+
const currentCount = currentValue.length;
|
|
2676
|
+
countNode = maxLength !== void 0 ? `${currentCount} / ${maxLength}` : `${currentCount}`;
|
|
2677
|
+
}
|
|
2678
|
+
return /* @__PURE__ */ React$1.createElement(TextField$1, {
|
|
2679
|
+
...nativeRest,
|
|
2680
|
+
...ariaFieldProps,
|
|
2681
|
+
className: fieldLayout_module_default.field,
|
|
2682
|
+
"data-layout": layout
|
|
2683
|
+
}, /* @__PURE__ */ React$1.createElement(Label$1, { required }, label), /* @__PURE__ */ React$1.createElement("div", {
|
|
2684
|
+
className: clsx(TextArea_module_default.wrapper, classNameOverride),
|
|
2685
|
+
"data-has-indicator": hasIndicator,
|
|
2686
|
+
"data-autosize": autoSizeActive,
|
|
2687
|
+
"data-disabled": disabled,
|
|
2688
|
+
"data-read-only": readOnly,
|
|
2689
|
+
"data-resizable": !autoSizeActive && resizable
|
|
2690
|
+
}, /* @__PURE__ */ React$1.createElement(TextArea$1, {
|
|
2691
|
+
ref: textareaRef,
|
|
2692
|
+
rows: autoSizeActive ? void 0 : rows,
|
|
2693
|
+
className: TextArea_module_default.textarea,
|
|
2694
|
+
onChange: handleAutosizeChange,
|
|
2695
|
+
onInput: handleAutosizeInput
|
|
2696
|
+
}), hasIndicator && /* @__PURE__ */ React$1.createElement("span", { className: TextArea_module_default.indicators }, appearance === "warning" && /* @__PURE__ */ React$1.createElement("span", {
|
|
2697
|
+
className: TextArea_module_default.warningIndicator,
|
|
2698
|
+
"aria-hidden": true
|
|
2699
|
+
}, /* @__PURE__ */ React$1.createElement(WarningOutlined, { size: "sm" })), appearance === "danger" && /* @__PURE__ */ React$1.createElement("span", {
|
|
2700
|
+
className: TextArea_module_default.errorIndicator,
|
|
2701
|
+
"aria-hidden": true
|
|
2702
|
+
}, /* @__PURE__ */ React$1.createElement(Exclamation, { size: "sm" })))), /* @__PURE__ */ React$1.createElement(HelperText, {
|
|
2703
|
+
appearance,
|
|
2704
|
+
countText: countNode,
|
|
2705
|
+
disabled
|
|
2706
|
+
}, helperText));
|
|
2707
|
+
});
|
|
2708
|
+
TextArea.displayName = "TextArea";
|
|
2709
|
+
//#endregion
|
|
2710
|
+
//#region src/components/Modal/Modal.module.css
|
|
2711
|
+
var Modal_module_default = {
|
|
2712
|
+
"confirmationActions": "capra-Modal-module-5vfSOW-confirmationActions",
|
|
2713
|
+
"confirmationBody": "capra-Modal-module-5vfSOW-confirmationBody",
|
|
2714
|
+
"confirmationIcon": "capra-Modal-module-5vfSOW-confirmationIcon",
|
|
2715
|
+
"confirmationLayout": "capra-Modal-module-5vfSOW-confirmationLayout",
|
|
2716
|
+
"confirmationMessage": "capra-Modal-module-5vfSOW-confirmationMessage",
|
|
2717
|
+
"confirmationSurface": "capra-Modal-module-5vfSOW-confirmationSurface",
|
|
2718
|
+
"content": "capra-Modal-module-5vfSOW-content",
|
|
2719
|
+
"contentShow": "capra-Modal-module-5vfSOW-contentShow",
|
|
2720
|
+
"expandedFooterLayout": "capra-Modal-module-5vfSOW-expandedFooterLayout",
|
|
2721
|
+
"expandedTitleLayout": "capra-Modal-module-5vfSOW-expandedTitleLayout",
|
|
2722
|
+
"footer": "capra-Modal-module-5vfSOW-footer",
|
|
2723
|
+
"footerActions": "capra-Modal-module-5vfSOW-footerActions",
|
|
2724
|
+
"header": "capra-Modal-module-5vfSOW-header",
|
|
2725
|
+
"headerLeading": "capra-Modal-module-5vfSOW-headerLeading",
|
|
2726
|
+
"overlay": "capra-Modal-module-5vfSOW-overlay",
|
|
2727
|
+
"overlayShow": "capra-Modal-module-5vfSOW-overlayShow",
|
|
2728
|
+
"surface": "capra-Modal-module-5vfSOW-surface"
|
|
2729
|
+
};
|
|
2730
|
+
//#endregion
|
|
2731
|
+
//#region src/components/Text/Heading.tsx
|
|
2732
|
+
/**
|
|
2733
|
+
* This is an internal-only component that wraps the `Text` component. It can be used anywhere React Aria expects one of their `Heading` components since the context it uses is distinct from the one already used in `Text`.
|
|
2734
|
+
*
|
|
2735
|
+
* It defaults to an `h3` element to align with React Aria's `Heading` component.
|
|
2736
|
+
*/
|
|
2737
|
+
const Heading$1 = React$1.forwardRef(function Heading(props, ref) {
|
|
2738
|
+
const [mergedProps, mergedRef] = useContextProps(props, ref, HeadingContext);
|
|
2739
|
+
const { level, slot, ...rest } = mergedProps;
|
|
2740
|
+
const as = (level ? `h${level}` : props.as) || "h3";
|
|
2741
|
+
return /* @__PURE__ */ React$1.createElement(Text, {
|
|
2742
|
+
...rest,
|
|
2743
|
+
as,
|
|
2744
|
+
ref: mergedRef
|
|
2745
|
+
});
|
|
2746
|
+
});
|
|
2747
|
+
//#endregion
|
|
2748
|
+
//#region src/components/Modal/Modal.tsx
|
|
2749
|
+
function ModalInner({ children, isOpen: open, onIsOpenChange: onOpenChange, title, footer, size = "md", isDismissible = true, FORCE__className, confirmButtonText = "OK", cancelButtonText = "Cancel", onClose, onConfirm, getContainer }) {
|
|
2750
|
+
const footerToDisplay = footer !== void 0 ? footer : /* @__PURE__ */ React$1.createElement(ModalFooterActions, null, cancelButtonText && /* @__PURE__ */ React$1.createElement(Button, {
|
|
2751
|
+
slot: "close",
|
|
2752
|
+
onPress: () => onClose?.()
|
|
2753
|
+
}, cancelButtonText), /* @__PURE__ */ React$1.createElement(Button, {
|
|
2754
|
+
onPress: () => onConfirm?.(),
|
|
2755
|
+
variant: "primary"
|
|
2756
|
+
}, confirmButtonText));
|
|
2757
|
+
const openChangeCallback = React$1.useCallback((open) => {
|
|
2758
|
+
if (!open) onClose?.();
|
|
2759
|
+
onOpenChange?.(open);
|
|
2760
|
+
}, [onClose, onOpenChange]);
|
|
2761
|
+
return /* @__PURE__ */ React$1.createElement(UNSAFE_PortalProvider, { getContainer }, /* @__PURE__ */ React$1.createElement(ModalOverlay, {
|
|
2762
|
+
className: Modal_module_default.overlay,
|
|
2763
|
+
isOpen: open,
|
|
2764
|
+
onOpenChange: openChangeCallback,
|
|
2765
|
+
isDismissable: false,
|
|
2766
|
+
isKeyboardDismissDisabled: !isDismissible
|
|
2767
|
+
}, /* @__PURE__ */ React$1.createElement(Modal$1, {
|
|
2768
|
+
className: clsx(Modal_module_default.surface, FORCE__className),
|
|
2769
|
+
"data-size": size ?? "md"
|
|
2770
|
+
}, /* @__PURE__ */ React$1.createElement(Dialog, { className: "" }, (!!title || isDismissible) && /* @__PURE__ */ React$1.createElement("div", { className: Modal_module_default.header }, /* @__PURE__ */ React$1.createElement("div", { className: Modal_module_default.headerLeading }, !!title && typeof title === "string" ? /* @__PURE__ */ React$1.createElement(ModalHeading, null, title) : title), isDismissible && /* @__PURE__ */ React$1.createElement(IconButton, {
|
|
2771
|
+
slot: "close",
|
|
2772
|
+
variant: "tertiary",
|
|
2773
|
+
appearance: "neutral",
|
|
2774
|
+
"aria-label": "Close modal",
|
|
2775
|
+
size: "sm",
|
|
2776
|
+
icon: CloseOutlined
|
|
2777
|
+
})), /* @__PURE__ */ React$1.createElement("div", { className: Modal_module_default.content }, children), !!footerToDisplay && /* @__PURE__ */ React$1.createElement("div", { className: Modal_module_default.footer }, footerToDisplay)))));
|
|
2778
|
+
}
|
|
2779
|
+
function ModalFooterActions({ children }) {
|
|
2780
|
+
return /* @__PURE__ */ React$1.createElement("div", { className: Modal_module_default.footerActions }, children);
|
|
2781
|
+
}
|
|
2782
|
+
function ModalExpandedFooterLayout({ children }) {
|
|
2783
|
+
return /* @__PURE__ */ React$1.createElement("div", { className: Modal_module_default.expandedFooterLayout }, children);
|
|
2784
|
+
}
|
|
2785
|
+
function ModalHeading({ children }) {
|
|
2786
|
+
return /* @__PURE__ */ React$1.createElement(Heading$1, {
|
|
2787
|
+
slot: "title",
|
|
2788
|
+
variant: "heading-sm",
|
|
2789
|
+
as: "h2",
|
|
2790
|
+
color: "secondary"
|
|
2791
|
+
}, children);
|
|
2792
|
+
}
|
|
2793
|
+
function ModalExpandedTitleLayout({ children }) {
|
|
2794
|
+
return /* @__PURE__ */ React$1.createElement("div", { className: Modal_module_default.expandedTitleLayout }, children);
|
|
2795
|
+
}
|
|
2796
|
+
const Modal = Object.assign(ModalInner, {
|
|
2797
|
+
confirm: createConfirmationModalOpener("default"),
|
|
2798
|
+
info: createConfirmationModalOpener("info"),
|
|
2799
|
+
success: createConfirmationModalOpener("success"),
|
|
2800
|
+
warning: createConfirmationModalOpener("warning"),
|
|
2801
|
+
danger: createConfirmationModalOpener("danger"),
|
|
2802
|
+
FooterActions: ModalFooterActions,
|
|
2803
|
+
ExpandedFooterLayout: ModalExpandedFooterLayout,
|
|
2804
|
+
Heading: ModalHeading,
|
|
2805
|
+
ExpandedTitleLayout: ModalExpandedTitleLayout
|
|
2806
|
+
});
|
|
2807
|
+
const appearanceIcons = {
|
|
2808
|
+
default: InfoOutlined,
|
|
2809
|
+
info: InfoOutlined,
|
|
2810
|
+
danger: AttentionSolid,
|
|
2811
|
+
warning: WarningOutlined,
|
|
2812
|
+
success: SuccessOutlined
|
|
2813
|
+
};
|
|
2814
|
+
function ConfirmationModal({ isOpen, onIsOpenChange, appearance = "default", title = "Modal title", content, confirmButtonText = "OK", cancelButtonText = "Cancel", onConfirm, onClose }) {
|
|
2815
|
+
const handleOpenChange = React$1.useCallback((isOpen) => {
|
|
2816
|
+
if (!isOpen) onClose?.();
|
|
2817
|
+
onIsOpenChange?.(isOpen);
|
|
2818
|
+
}, [onClose, onIsOpenChange]);
|
|
2819
|
+
const Icon = appearanceIcons[appearance];
|
|
2820
|
+
return /* @__PURE__ */ React$1.createElement(ModalOverlay, {
|
|
2821
|
+
className: Modal_module_default.overlay,
|
|
2822
|
+
isOpen,
|
|
2823
|
+
onOpenChange: handleOpenChange,
|
|
2824
|
+
isDismissable: false
|
|
2825
|
+
}, /* @__PURE__ */ React$1.createElement(Modal$1, { className: clsx(Modal_module_default.surface, Modal_module_default.confirmationSurface) }, /* @__PURE__ */ React$1.createElement(Dialog, { className: "" }, /* @__PURE__ */ React$1.createElement("div", { className: Modal_module_default.confirmationLayout }, /* @__PURE__ */ React$1.createElement("div", {
|
|
2826
|
+
className: Modal_module_default.confirmationIcon,
|
|
2827
|
+
"data-appearance": appearance,
|
|
2828
|
+
"aria-hidden": true
|
|
2829
|
+
}, /* @__PURE__ */ React$1.createElement(Icon, { size: "md" })), /* @__PURE__ */ React$1.createElement("div", { className: Modal_module_default.confirmationBody }, /* @__PURE__ */ React$1.createElement(Heading$1, {
|
|
2830
|
+
slot: "title",
|
|
2831
|
+
variant: "heading-sm",
|
|
2832
|
+
as: "h2"
|
|
2833
|
+
}, title), /* @__PURE__ */ React$1.createElement("p", { className: Modal_module_default.confirmationMessage }, content), /* @__PURE__ */ React$1.createElement("div", { className: Modal_module_default.confirmationActions }, appearance === "default" && cancelButtonText && /* @__PURE__ */ React$1.createElement(Button, {
|
|
2834
|
+
slot: "close",
|
|
2835
|
+
variant: "secondary"
|
|
2836
|
+
}, cancelButtonText), /* @__PURE__ */ React$1.createElement(AsyncButton, {
|
|
2837
|
+
variant: "primary",
|
|
2838
|
+
onPress: onConfirm
|
|
2839
|
+
}, confirmButtonText)))))));
|
|
2840
|
+
}
|
|
2841
|
+
const DEFAULT_CONTEXT = { onPress: void 0 };
|
|
2842
|
+
function AsyncButton({ onPress, ...props }) {
|
|
2843
|
+
const { onPress: closeModal } = useSlottedContext(ButtonContext, "close") || DEFAULT_CONTEXT;
|
|
2844
|
+
const [pending, setPending] = React$1.useState(false);
|
|
2845
|
+
const handlePress = React$1.useCallback(async (e) => {
|
|
2846
|
+
setPending(true);
|
|
2847
|
+
try {
|
|
2848
|
+
await onPress?.(e);
|
|
2849
|
+
} finally {
|
|
2850
|
+
setPending(false);
|
|
2851
|
+
closeModal?.(e);
|
|
2852
|
+
}
|
|
2853
|
+
}, [onPress, closeModal]);
|
|
2854
|
+
return /* @__PURE__ */ React$1.createElement(Button, {
|
|
2855
|
+
...props,
|
|
2856
|
+
pending,
|
|
2857
|
+
onPress: handlePress
|
|
2858
|
+
});
|
|
2859
|
+
}
|
|
2860
|
+
function ImperativeModalWrapper({ appearance, options, programmaticCloseRef, onShouldUnmount }) {
|
|
2861
|
+
const [open, setOpen] = React$1.useState(true);
|
|
2862
|
+
const handleOpenChange = React$1.useCallback((nextOpen) => {
|
|
2863
|
+
if (!nextOpen) {
|
|
2864
|
+
setOpen(false);
|
|
2865
|
+
options.onClose?.();
|
|
2866
|
+
onShouldUnmount();
|
|
2867
|
+
}
|
|
2868
|
+
}, [onShouldUnmount, options]);
|
|
2869
|
+
programmaticCloseRef.current = () => handleOpenChange(false);
|
|
2870
|
+
return /* @__PURE__ */ React$1.createElement(UNSAFE_PortalProvider, { getContainer: options.getContainer }, /* @__PURE__ */ React$1.createElement(ConfirmationModal, {
|
|
2871
|
+
isOpen: open,
|
|
2872
|
+
onIsOpenChange: handleOpenChange,
|
|
2873
|
+
title: options.title,
|
|
2874
|
+
content: options.content,
|
|
2875
|
+
onConfirm: options.onConfirm,
|
|
2876
|
+
onClose: () => handleOpenChange(false),
|
|
2877
|
+
appearance,
|
|
2878
|
+
confirmButtonText: options.confirmButtonText,
|
|
2879
|
+
cancelButtonText: options.cancelButtonText
|
|
2880
|
+
}));
|
|
2881
|
+
}
|
|
2882
|
+
/**
|
|
2883
|
+
* Imperatively open a modal mounted to document.body.
|
|
2884
|
+
* Returns { close, closed } so you can close programmatically or await the closed promise.
|
|
2885
|
+
*/
|
|
2886
|
+
function createConfirmationModalOpener(appearance) {
|
|
2887
|
+
return function modalOpener(options) {
|
|
2888
|
+
const mountPoint = document.createElement("div");
|
|
2889
|
+
document.body.appendChild(mountPoint);
|
|
2890
|
+
const { promise, resolve } = Promise.withResolvers();
|
|
2891
|
+
const programmaticCloseRef = { current: () => {} };
|
|
2892
|
+
const root = createRoot(mountPoint);
|
|
2893
|
+
let settled = false;
|
|
2894
|
+
const onShouldUnmount = () => {
|
|
2895
|
+
if (settled) return;
|
|
2896
|
+
settled = true;
|
|
2897
|
+
root.unmount();
|
|
2898
|
+
mountPoint.remove();
|
|
2899
|
+
resolve();
|
|
2900
|
+
};
|
|
2901
|
+
root.render(/* @__PURE__ */ React$1.createElement(ImperativeModalWrapper, {
|
|
2902
|
+
appearance,
|
|
2903
|
+
options,
|
|
2904
|
+
programmaticCloseRef,
|
|
2905
|
+
onShouldUnmount
|
|
2906
|
+
}));
|
|
2907
|
+
return {
|
|
2908
|
+
close: () => programmaticCloseRef.current?.(),
|
|
2909
|
+
closed: promise
|
|
2910
|
+
};
|
|
2911
|
+
};
|
|
2912
|
+
}
|
|
2913
|
+
//#endregion
|
|
2914
|
+
//#region src/components/Drawer/Drawer.module.css
|
|
2915
|
+
var Drawer_module_default = {
|
|
2916
|
+
"body": "capra-Drawer-module-wiZVBa-body",
|
|
2917
|
+
"description": "capra-Drawer-module-wiZVBa-description",
|
|
2918
|
+
"drawerInFromLeft": "capra-Drawer-module-wiZVBa-drawerInFromLeft",
|
|
2919
|
+
"drawerInFromRight": "capra-Drawer-module-wiZVBa-drawerInFromRight",
|
|
2920
|
+
"expandedTitleLayout": "capra-Drawer-module-wiZVBa-expandedTitleLayout",
|
|
2921
|
+
"footer": "capra-Drawer-module-wiZVBa-footer",
|
|
2922
|
+
"header": "capra-Drawer-module-wiZVBa-header",
|
|
2923
|
+
"headerMain": "capra-Drawer-module-wiZVBa-headerMain",
|
|
2924
|
+
"headerTrailing": "capra-Drawer-module-wiZVBa-headerTrailing",
|
|
2925
|
+
"overlay": "capra-Drawer-module-wiZVBa-overlay",
|
|
2926
|
+
"root": "capra-Drawer-module-wiZVBa-root",
|
|
2927
|
+
"sheet": "capra-Drawer-module-wiZVBa-sheet"
|
|
2928
|
+
};
|
|
2929
|
+
//#endregion
|
|
2930
|
+
//#region src/components/Drawer/Drawer.tsx
|
|
2931
|
+
const DrawerTitleContext = React$1.createContext(void 0);
|
|
2932
|
+
function cssSize(value) {
|
|
2933
|
+
if (value === void 0) return;
|
|
2934
|
+
return typeof value === "number" ? `${value}px` : value;
|
|
2935
|
+
}
|
|
2936
|
+
const defaultWidth = 480;
|
|
2937
|
+
/** History state marker so we can sync `history.back()` when the drawer closes without a popstate. */
|
|
2938
|
+
const DRAWER_HISTORY_STATE = { __capraUiDrawer: 1 };
|
|
2939
|
+
function isDrawerHistoryState(state) {
|
|
2940
|
+
return typeof state === "object" && state !== null && "__capraUiDrawer" in state && state.__capraUiDrawer === DRAWER_HISTORY_STATE.__capraUiDrawer;
|
|
2941
|
+
}
|
|
2942
|
+
function resolvePortalContainer(getContainer) {
|
|
2943
|
+
if (typeof document === "undefined") return null;
|
|
2944
|
+
if (getContainer === false || getContainer === void 0) return document.body;
|
|
2945
|
+
if (typeof getContainer === "function") return getContainer() ?? document.body;
|
|
2946
|
+
return getContainer;
|
|
2947
|
+
}
|
|
2948
|
+
function DrawerHeading({ children, id: idProp }) {
|
|
2949
|
+
const ctxId = React$1.useContext(DrawerTitleContext);
|
|
2950
|
+
const id = idProp ?? ctxId;
|
|
2951
|
+
return /* @__PURE__ */ React$1.createElement(Heading$1, {
|
|
2952
|
+
slot: "title",
|
|
2953
|
+
variant: "heading-sm",
|
|
2954
|
+
as: "h2",
|
|
2955
|
+
color: "secondary",
|
|
2956
|
+
id
|
|
2957
|
+
}, children);
|
|
2958
|
+
}
|
|
2959
|
+
function DrawerExpandedTitleLayout({ children }) {
|
|
2960
|
+
return /* @__PURE__ */ React$1.createElement("div", { className: Drawer_module_default.expandedTitleLayout }, children);
|
|
2961
|
+
}
|
|
2962
|
+
function DrawerDescription({ children }) {
|
|
2963
|
+
return /* @__PURE__ */ React$1.createElement("div", { className: Drawer_module_default.description }, children);
|
|
2964
|
+
}
|
|
2965
|
+
function DrawerInner({ isOpen = false, onClose, onOpenChange, placement = "right", width, title, footer, closable = true, modal = true, getContainer, FORCE__className, children, "aria-label": ariaLabel }) {
|
|
2966
|
+
const isModal = modal !== false;
|
|
2967
|
+
React$1.useEffect(() => {
|
|
2968
|
+
onOpenChange?.(isOpen);
|
|
2969
|
+
}, [isOpen, onOpenChange]);
|
|
2970
|
+
usePreventScroll({ isDisabled: !isOpen || !isModal });
|
|
2971
|
+
const onCloseRef = React$1.useRef(onClose);
|
|
2972
|
+
React$1.useEffect(() => {
|
|
2973
|
+
onCloseRef.current = onClose;
|
|
2974
|
+
}, [onClose]);
|
|
2975
|
+
const requestClose = React$1.useCallback(() => {
|
|
2976
|
+
onCloseRef.current?.();
|
|
2977
|
+
}, []);
|
|
2978
|
+
React$1.useEffect(() => {
|
|
2979
|
+
if (!isOpen || typeof window === "undefined") return;
|
|
2980
|
+
window.history.pushState(DRAWER_HISTORY_STATE, "", window.location.href);
|
|
2981
|
+
let historyPushed = true;
|
|
2982
|
+
const onPopState = () => {
|
|
2983
|
+
historyPushed = false;
|
|
2984
|
+
requestClose();
|
|
2985
|
+
};
|
|
2986
|
+
window.addEventListener("popstate", onPopState);
|
|
2987
|
+
return () => {
|
|
2988
|
+
window.removeEventListener("popstate", onPopState);
|
|
2989
|
+
if (historyPushed && isDrawerHistoryState(window.history.state)) window.history.back();
|
|
2990
|
+
};
|
|
2991
|
+
}, [isOpen, requestClose]);
|
|
2992
|
+
React$1.useEffect(() => {
|
|
2993
|
+
if (!isOpen) return;
|
|
2994
|
+
const onKeyDown = (e) => {
|
|
2995
|
+
if (e.key !== "Escape" || e.defaultPrevented) return;
|
|
2996
|
+
e.preventDefault();
|
|
2997
|
+
e.stopPropagation();
|
|
2998
|
+
requestClose();
|
|
2999
|
+
};
|
|
3000
|
+
/** Capture phase so Escape dismisses whether focus is on the sheet container or any child. */
|
|
3001
|
+
document.addEventListener("keydown", onKeyDown, true);
|
|
3002
|
+
return () => document.removeEventListener("keydown", onKeyDown, true);
|
|
3003
|
+
}, [isOpen, requestClose]);
|
|
3004
|
+
const onOverlayPointerDown = React$1.useCallback((event) => {
|
|
3005
|
+
if (event.target !== event.currentTarget) return;
|
|
3006
|
+
if (!isModal) return;
|
|
3007
|
+
event.preventDefault();
|
|
3008
|
+
requestClose();
|
|
3009
|
+
}, [isModal, requestClose]);
|
|
3010
|
+
const widthCss = cssSize(width) ?? `${defaultWidth}px`;
|
|
3011
|
+
const sheetVars = React$1.useMemo(() => ({ "--drawer-width": widthCss }), [widthCss]);
|
|
3012
|
+
const titleId = React$1.useId();
|
|
3013
|
+
const portalContainer = React$1.useMemo(() => resolvePortalContainer(getContainer), [getContainer]);
|
|
3014
|
+
if (!isOpen) return null;
|
|
3015
|
+
if (!portalContainer) return null;
|
|
3016
|
+
const labelledBy = title != null ? titleId : void 0;
|
|
3017
|
+
const dialogLabel = title != null ? void 0 : ariaLabel ?? "Drawer";
|
|
3018
|
+
return createPortal(/* @__PURE__ */ React$1.createElement("div", {
|
|
3019
|
+
className: clsx(Drawer_module_default.root, FORCE__className),
|
|
3020
|
+
"data-open": "true",
|
|
3021
|
+
"data-modal": isModal ? "true" : "false"
|
|
3022
|
+
}, isModal ? /* @__PURE__ */ React$1.createElement("div", {
|
|
3023
|
+
"data-drawer-overlay": true,
|
|
3024
|
+
className: Drawer_module_default.overlay,
|
|
3025
|
+
"aria-hidden": isOpen ? void 0 : true,
|
|
3026
|
+
onPointerDown: onOverlayPointerDown
|
|
3027
|
+
}) : null, /* @__PURE__ */ React$1.createElement(FocusScope, {
|
|
3028
|
+
contain: isOpen && isModal,
|
|
3029
|
+
autoFocus: isOpen && isModal,
|
|
3030
|
+
restoreFocus: true
|
|
3031
|
+
}, /* @__PURE__ */ React$1.createElement("div", {
|
|
3032
|
+
className: Drawer_module_default.sheet,
|
|
3033
|
+
style: sheetVars,
|
|
3034
|
+
"data-placement": placement,
|
|
3035
|
+
role: "dialog",
|
|
3036
|
+
"aria-modal": isOpen ? isModal : void 0,
|
|
3037
|
+
"aria-hidden": isOpen ? void 0 : true,
|
|
3038
|
+
"aria-label": isOpen ? dialogLabel : void 0,
|
|
3039
|
+
"aria-labelledby": isOpen ? labelledBy : void 0,
|
|
3040
|
+
tabIndex: isOpen && isModal ? -1 : void 0
|
|
3041
|
+
}, (title != null || closable) && /* @__PURE__ */ React$1.createElement("header", { className: Drawer_module_default.header }, /* @__PURE__ */ React$1.createElement("div", { className: Drawer_module_default.headerMain }, title != null ? /* @__PURE__ */ React$1.createElement(DrawerTitleContext.Provider, { value: titleId }, typeof title === "string" ? /* @__PURE__ */ React$1.createElement(DrawerHeading, null, title) : title) : null), /* @__PURE__ */ React$1.createElement("div", { className: Drawer_module_default.headerTrailing }, closable ? /* @__PURE__ */ React$1.createElement(IconButton, {
|
|
3042
|
+
variant: "tertiary",
|
|
3043
|
+
appearance: "neutral",
|
|
3044
|
+
"aria-label": "Close drawer",
|
|
3045
|
+
size: "sm",
|
|
3046
|
+
icon: CloseOutlined,
|
|
3047
|
+
onClick: requestClose
|
|
3048
|
+
}) : null)), /* @__PURE__ */ React$1.createElement("div", { className: Drawer_module_default.body }, children), footer ? /* @__PURE__ */ React$1.createElement("footer", { className: Drawer_module_default.footer }, footer) : null))), portalContainer);
|
|
3049
|
+
}
|
|
3050
|
+
/**
|
|
3051
|
+
* A side sheet aligned with Capra design: supports **modal** (scrim + scroll lock + focus trap) and **non-modal**
|
|
3052
|
+
* (parallel interaction with the main page) modes, and Ant Design–compatible props where applicable.
|
|
3053
|
+
*
|
|
3054
|
+
* For breadcrumb + title headers, compose `title` with `Drawer.Heading`, optional `Drawer.Description`,
|
|
3055
|
+
* `Drawer.ExpandedTitleLayout`, and the shared `Breadcrumbs` components — same pattern as `Modal`.
|
|
3056
|
+
*/
|
|
3057
|
+
const Drawer = Object.assign(DrawerInner, {
|
|
3058
|
+
Heading: DrawerHeading,
|
|
3059
|
+
Description: DrawerDescription,
|
|
3060
|
+
ExpandedTitleLayout: DrawerExpandedTitleLayout
|
|
3061
|
+
});
|
|
3062
|
+
//#endregion
|
|
3063
|
+
//#region src/components/Popover/Popover.module.css
|
|
3064
|
+
var Popover_module_default = {
|
|
3065
|
+
"content": "capra-Popover-module-xlfP1a-content",
|
|
3066
|
+
"popover": "capra-Popover-module-xlfP1a-popover"
|
|
3067
|
+
};
|
|
3068
|
+
//#endregion
|
|
3069
|
+
//#region src/components/Popover/Popover.tsx
|
|
3070
|
+
const placementToAriaPlacement = {
|
|
3071
|
+
top: "top",
|
|
3072
|
+
topLeft: "top left",
|
|
3073
|
+
topRight: "top right",
|
|
3074
|
+
bottom: "bottom",
|
|
3075
|
+
bottomLeft: "bottom left",
|
|
3076
|
+
bottomRight: "bottom right",
|
|
3077
|
+
left: "left",
|
|
3078
|
+
leftTop: "left top",
|
|
3079
|
+
leftBottom: "left bottom",
|
|
3080
|
+
right: "right",
|
|
3081
|
+
rightTop: "right top",
|
|
3082
|
+
rightBottom: "right bottom"
|
|
3083
|
+
};
|
|
3084
|
+
const EMPTY_ARRAY = [];
|
|
3085
|
+
function PopoverSurfaceWithoutRef({ placement = "top", getContainer, offsets, removeContentPadding = false, FORCE__className: classNameOverride, children, ...props }, ref) {
|
|
3086
|
+
const ariaPlacement = placementToAriaPlacement[placement];
|
|
3087
|
+
const [offset = 8, crossOffset = 0] = offsets ?? EMPTY_ARRAY;
|
|
3088
|
+
return /* @__PURE__ */ React$1.createElement(UNSAFE_PortalProvider, { getContainer }, /* @__PURE__ */ React$1.createElement(Popover$1, {
|
|
3089
|
+
ref,
|
|
3090
|
+
...props,
|
|
3091
|
+
placement: ariaPlacement,
|
|
3092
|
+
offset,
|
|
3093
|
+
crossOffset,
|
|
3094
|
+
className: clsx(Popover_module_default.popover, classNameOverride)
|
|
3095
|
+
}, /* @__PURE__ */ React$1.createElement("div", {
|
|
3096
|
+
className: Popover_module_default.content,
|
|
3097
|
+
"data-padded": !removeContentPadding
|
|
3098
|
+
}, children)));
|
|
3099
|
+
}
|
|
3100
|
+
/**
|
|
3101
|
+
* Internal-only component for rendering the popover surface.
|
|
3102
|
+
*/
|
|
3103
|
+
const PopoverSurface = fixedForwardRef(PopoverSurfaceWithoutRef);
|
|
3104
|
+
/**
|
|
3105
|
+
* A popover component that renders a trigger and popover content.
|
|
3106
|
+
*/
|
|
3107
|
+
function Popover({ content, children, isOpen, onOpenChange, ...props }) {
|
|
3108
|
+
return /* @__PURE__ */ React$1.createElement(DialogTrigger, {
|
|
3109
|
+
onOpenChange,
|
|
3110
|
+
isOpen
|
|
3111
|
+
}, children, /* @__PURE__ */ React$1.createElement(PopoverSurface, props, content));
|
|
3112
|
+
}
|
|
3113
|
+
//#endregion
|
|
3114
|
+
//#region src/components/Ribbon/Ribbon.module.css
|
|
3115
|
+
var Ribbon_module_default = {
|
|
3116
|
+
"iconLayout": "capra-Ribbon-module-W8q2EW-iconLayout",
|
|
3117
|
+
"ribbon": "capra-Ribbon-module-W8q2EW-ribbon",
|
|
3118
|
+
"textLayout": "capra-Ribbon-module-W8q2EW-textLayout"
|
|
3119
|
+
};
|
|
3120
|
+
//#endregion
|
|
3121
|
+
//#region src/components/Ribbon/Ribbon.tsx
|
|
3122
|
+
/**
|
|
3123
|
+
* A ribbon component used to highlight new features that exist in a 'preview' state.
|
|
3124
|
+
* Ribbons communicate that users may encounter errors when using these features.
|
|
3125
|
+
*/
|
|
3126
|
+
const Ribbon = ({ children, FORCE__className: classNameOverride, color = "teal", leadingIcon: LeadingIcon, position = "right", trailingIcon: TrailingIcon, ...props }) => {
|
|
3127
|
+
const hasLeadingContent = !!LeadingIcon;
|
|
3128
|
+
const hasTrailingContent = !!TrailingIcon;
|
|
3129
|
+
return /* @__PURE__ */ React$1.createElement("div", {
|
|
3130
|
+
role: "note",
|
|
3131
|
+
"data-color": color,
|
|
3132
|
+
"data-position": position,
|
|
3133
|
+
...props,
|
|
3134
|
+
className: clsx(Ribbon_module_default.ribbon, classNameOverride)
|
|
3135
|
+
}, hasLeadingContent && /* @__PURE__ */ React$1.createElement("span", { className: Ribbon_module_default.iconLayout }, /* @__PURE__ */ React$1.createElement(LeadingIcon, { size: "sm" })), /* @__PURE__ */ React$1.createElement("span", { className: Ribbon_module_default.textLayout }, children), hasTrailingContent && /* @__PURE__ */ React$1.createElement("span", { className: Ribbon_module_default.iconLayout }, /* @__PURE__ */ React$1.createElement(TrailingIcon, { size: "sm" })));
|
|
3136
|
+
};
|
|
3137
|
+
//#endregion
|
|
3138
|
+
//#region src/components/Anchor/Anchor.module.css
|
|
3139
|
+
var Anchor_module_default = { "base": "capra-Anchor-module-6FCdJq-base" };
|
|
3140
|
+
//#endregion
|
|
3141
|
+
//#region src/components/Anchor/Anchor.tsx
|
|
3142
|
+
function AnchorWithoutRef({ children, href, isActive, isDisabled, as: asComponent, FORCE__className: classNameOverride, ...props }, ref) {
|
|
3143
|
+
const Component = asComponent || "a";
|
|
3144
|
+
const dataState = isDisabled ? "disabled" : isActive ? "active" : void 0;
|
|
3145
|
+
return /* @__PURE__ */ React$1.createElement(Component, {
|
|
3146
|
+
ref,
|
|
3147
|
+
...props,
|
|
3148
|
+
className: clsx(Anchor_module_default.base, classNameOverride),
|
|
3149
|
+
"data-state": dataState,
|
|
3150
|
+
href: isDisabled ? void 0 : href,
|
|
3151
|
+
tabIndex: isDisabled ? -1 : void 0,
|
|
3152
|
+
"aria-current": isActive ? "page" : void 0,
|
|
3153
|
+
"aria-disabled": isDisabled
|
|
3154
|
+
}, children);
|
|
3155
|
+
}
|
|
3156
|
+
const Anchor = fixedForwardRef(AnchorWithoutRef);
|
|
3157
|
+
//#endregion
|
|
3158
|
+
//#region src/components/Link/ButtonLink.tsx
|
|
3159
|
+
function ButtonLinkWithoutRef({ appearance = "default", as: asComponent, block, children, leadingIcon: LeadingIcon, size = "md", pending: isPending = false, disabled: isDisabled = false, trailingIcon: TrailingIcon, variant = "secondary", FORCE__className: classNameOverride, ...props }, ref) {
|
|
3160
|
+
const Component = asComponent || Link$1;
|
|
3161
|
+
const hasLeadingContent = isPending || !!LeadingIcon;
|
|
3162
|
+
const hasTrailingContent = !!TrailingIcon;
|
|
3163
|
+
return /* @__PURE__ */ React$1.createElement(Component, {
|
|
3164
|
+
...props,
|
|
3165
|
+
isDisabled,
|
|
3166
|
+
"aria-disabled": isDisabled || isPending,
|
|
3167
|
+
disabled: isDisabled || isPending,
|
|
3168
|
+
ref,
|
|
3169
|
+
className: clsx(Button_module_default.base, classNameOverride),
|
|
3170
|
+
"data-variant": variant,
|
|
3171
|
+
"data-appearance": appearance,
|
|
3172
|
+
"data-size": size,
|
|
3173
|
+
"data-disabled": isDisabled,
|
|
3174
|
+
"data-pending": isPending,
|
|
3175
|
+
"data-display": block ? "block" : void 0,
|
|
3176
|
+
onClick: (event) => {
|
|
3177
|
+
if (isDisabled || isPending) {
|
|
3178
|
+
event.preventDefault();
|
|
3179
|
+
event.stopPropagation();
|
|
3180
|
+
return;
|
|
3181
|
+
}
|
|
3182
|
+
props.onClick?.(event);
|
|
3183
|
+
}
|
|
3184
|
+
}, hasLeadingContent && /* @__PURE__ */ React$1.createElement("span", { className: Button_module_default.iconLayout }, isPending ? /* @__PURE__ */ React$1.createElement(Loading, { size: "sm" }) : LeadingIcon ? /* @__PURE__ */ React$1.createElement(LeadingIcon, { size: "sm" }) : null), /* @__PURE__ */ React$1.createElement("span", { className: Button_module_default.textLayout }, /* @__PURE__ */ React$1.createElement(Text, { color: "inherit" }, children)), hasTrailingContent && /* @__PURE__ */ React$1.createElement("span", { className: Button_module_default.iconLayout }, /* @__PURE__ */ React$1.createElement(TrailingIcon, { size: "sm" })));
|
|
3185
|
+
}
|
|
3186
|
+
/**
|
|
3187
|
+
* Primary interactive element displaying text and supporting leading and trailing icons.
|
|
3188
|
+
*/
|
|
3189
|
+
const ButtonLink = fixedForwardRef(ButtonLinkWithoutRef);
|
|
3190
|
+
//#endregion
|
|
3191
|
+
//#region src/components/Link/Link.module.css
|
|
3192
|
+
var Link_module_default = { "base": "capra-Link-module-7lYr7a-base" };
|
|
3193
|
+
//#endregion
|
|
3194
|
+
//#region src/components/Link/Link.tsx
|
|
3195
|
+
function LinkWithoutRef({ as: asComponent, children, isExternal = false, FORCE__className: classNameOverride, ...rest }, ref) {
|
|
3196
|
+
const Component = asComponent || Link$1;
|
|
3197
|
+
const isExternalAnchor = Component === Link$1 && isExternal;
|
|
3198
|
+
return /* @__PURE__ */ React$1.createElement(Component, {
|
|
3199
|
+
ref,
|
|
3200
|
+
...isExternalAnchor && {
|
|
3201
|
+
rel: "noopener noreferrer",
|
|
3202
|
+
target: "_blank"
|
|
3203
|
+
},
|
|
3204
|
+
...rest,
|
|
3205
|
+
className: clsx(Link_module_default.base, classNameOverride)
|
|
3206
|
+
}, children, isExternalAnchor && /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(ArrowUpRightFromSquare, { size: "xs" }), /* @__PURE__ */ React$1.createElement(VisuallyHidden, null, ", opens in a new tab")));
|
|
3207
|
+
}
|
|
3208
|
+
/**
|
|
3209
|
+
* Links are navigational elements that take users to a new page.
|
|
3210
|
+
*/
|
|
3211
|
+
const Link = fixedForwardRef(LinkWithoutRef);
|
|
3212
|
+
//#endregion
|
|
3213
|
+
//#region src/components/VerticalNavigation/VerticalNavigation.module.css
|
|
3214
|
+
var VerticalNavigation_module_default = {
|
|
3215
|
+
"footer": "capra-VerticalNavigation-module-uKaYXq-footer",
|
|
3216
|
+
"indentSpacer": "capra-VerticalNavigation-module-uKaYXq-indentSpacer",
|
|
3217
|
+
"item": "capra-VerticalNavigation-module-uKaYXq-item",
|
|
3218
|
+
"label": "capra-VerticalNavigation-module-uKaYXq-label",
|
|
3219
|
+
"list": "capra-VerticalNavigation-module-uKaYXq-list",
|
|
3220
|
+
"listItem": "capra-VerticalNavigation-module-uKaYXq-listItem",
|
|
3221
|
+
"nav": "capra-VerticalNavigation-module-uKaYXq-nav",
|
|
3222
|
+
"right": "capra-VerticalNavigation-module-uKaYXq-right"
|
|
3223
|
+
};
|
|
3224
|
+
//#endregion
|
|
3225
|
+
//#region src/components/VerticalNavigation/VerticalNavigation.tsx
|
|
3226
|
+
const VerticalNavigationContext = React$1.createContext(null);
|
|
3227
|
+
/**
|
|
3228
|
+
* A single navigation item within the VerticalNavigation.
|
|
3229
|
+
* Can be a link (if href is provided) or a button.
|
|
3230
|
+
* Supports icons, active state, and 'subItem' variant for indentation.
|
|
3231
|
+
*/
|
|
3232
|
+
const Item = ({ as, icon, label, isActive, href, FORCE__className, isDisabled, onClick, variant = "default", rightElement, ...props }) => {
|
|
3233
|
+
if (!React$1.useContext(VerticalNavigationContext)) throw new Error("VerticalNavigation.Item must be used within VerticalNavigation");
|
|
3234
|
+
const isLink = Boolean(href);
|
|
3235
|
+
const Component = as ?? (isLink ? "a" : "button");
|
|
3236
|
+
const { tabIndex: tabIndexProp, ...restProps } = props;
|
|
3237
|
+
const handleClick = (event) => {
|
|
3238
|
+
if (isDisabled) {
|
|
3239
|
+
event.preventDefault();
|
|
3240
|
+
event.stopPropagation();
|
|
3241
|
+
return;
|
|
3242
|
+
}
|
|
3243
|
+
onClick?.(event);
|
|
3244
|
+
};
|
|
3245
|
+
const handleAuxClick = (event) => {
|
|
3246
|
+
if (!isDisabled) return;
|
|
3247
|
+
event.preventDefault();
|
|
3248
|
+
event.stopPropagation();
|
|
3249
|
+
};
|
|
3250
|
+
const handleKeyDown = (event) => {
|
|
3251
|
+
if (!isDisabled) return;
|
|
3252
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
3253
|
+
event.preventDefault();
|
|
3254
|
+
event.stopPropagation();
|
|
3255
|
+
}
|
|
3256
|
+
};
|
|
3257
|
+
return /* @__PURE__ */ React$1.createElement("li", {
|
|
3258
|
+
className: VerticalNavigation_module_default.listItem,
|
|
3259
|
+
"data-variant": variant
|
|
3260
|
+
}, /* @__PURE__ */ React$1.createElement(Component, {
|
|
3261
|
+
href,
|
|
3262
|
+
type: isLink ? void 0 : "button",
|
|
3263
|
+
"aria-current": isActive ? "page" : void 0,
|
|
3264
|
+
"aria-disabled": isDisabled ? true : void 0,
|
|
3265
|
+
disabled: isLink ? void 0 : isDisabled,
|
|
3266
|
+
"data-active": isActive,
|
|
3267
|
+
"data-disabled": isDisabled,
|
|
3268
|
+
tabIndex: isLink && isDisabled ? -1 : tabIndexProp,
|
|
3269
|
+
onClick: handleClick,
|
|
3270
|
+
onAuxClick: handleAuxClick,
|
|
3271
|
+
onKeyDown: handleKeyDown,
|
|
3272
|
+
...restProps,
|
|
3273
|
+
className: clsx(VerticalNavigation_module_default.item, FORCE__className)
|
|
3274
|
+
}, icon, !icon && variant === "subItem" && /* @__PURE__ */ React$1.createElement("span", {
|
|
3275
|
+
className: VerticalNavigation_module_default.indentSpacer,
|
|
3276
|
+
"aria-hidden": "true"
|
|
3277
|
+
}), /* @__PURE__ */ React$1.createElement(Text, {
|
|
3278
|
+
as: "span",
|
|
3279
|
+
variant: "body-sm-normal",
|
|
3280
|
+
color: "inherit",
|
|
3281
|
+
FORCE__className: VerticalNavigation_module_default.label
|
|
3282
|
+
}, label), rightElement ? /* @__PURE__ */ React$1.createElement("span", { className: VerticalNavigation_module_default.right }, rightElement) : null));
|
|
3283
|
+
};
|
|
3284
|
+
/**
|
|
3285
|
+
* A toggle button to collapse/expand the navigation.
|
|
3286
|
+
* Should be placed within VerticalNavigation to control its state.
|
|
3287
|
+
*/
|
|
3288
|
+
const Collapse$1 = ({ FORCE__className, onClick, ...props }) => {
|
|
3289
|
+
const context = React$1.useContext(VerticalNavigationContext);
|
|
3290
|
+
if (!context) throw new Error("VerticalNavigation.Collapse must be used within VerticalNavigation");
|
|
3291
|
+
const { collapsed, setCollapsed } = context;
|
|
3292
|
+
const handleClick = (e) => {
|
|
3293
|
+
setCollapsed(!collapsed);
|
|
3294
|
+
onClick?.(e);
|
|
3295
|
+
};
|
|
3296
|
+
const collapseLabel = collapsed ? "Expand" : "Collapse";
|
|
3297
|
+
return /* @__PURE__ */ React$1.createElement("li", { className: VerticalNavigation_module_default.listItem }, /* @__PURE__ */ React$1.createElement("button", {
|
|
3298
|
+
type: "button",
|
|
3299
|
+
className: clsx(VerticalNavigation_module_default.item, FORCE__className),
|
|
3300
|
+
onClick: handleClick,
|
|
3301
|
+
"aria-label": collapseLabel,
|
|
3302
|
+
"aria-expanded": !collapsed,
|
|
3303
|
+
"data-action": "collapse",
|
|
3304
|
+
...props
|
|
3305
|
+
}, collapsed ? /* @__PURE__ */ React$1.createElement(AnglesRight, { size: "sm" }) : /* @__PURE__ */ React$1.createElement(AnglesLeft, { size: "sm" }), /* @__PURE__ */ React$1.createElement(Text, {
|
|
3306
|
+
as: "span",
|
|
3307
|
+
variant: "body-sm-normal",
|
|
3308
|
+
color: "inherit",
|
|
3309
|
+
FORCE__className: VerticalNavigation_module_default.label
|
|
3310
|
+
}, collapseLabel)));
|
|
3311
|
+
};
|
|
3312
|
+
/**
|
|
3313
|
+
* Container for the primary list of navigation items.
|
|
3314
|
+
* Renders an unordered list with consistent spacing and layout.
|
|
3315
|
+
*/
|
|
3316
|
+
const ItemList = ({ children, FORCE__className, ...props }) => {
|
|
3317
|
+
if (!React$1.useContext(VerticalNavigationContext)) throw new Error("VerticalNavigation.ItemList must be used within VerticalNavigation");
|
|
3318
|
+
return /* @__PURE__ */ React$1.createElement("ul", {
|
|
3319
|
+
className: clsx(VerticalNavigation_module_default.list, FORCE__className),
|
|
3320
|
+
...props
|
|
3321
|
+
}, children);
|
|
3322
|
+
};
|
|
3323
|
+
/**
|
|
3324
|
+
* Secondary container for footer navigation actions such as settings or help.
|
|
3325
|
+
*/
|
|
3326
|
+
const Footer = ({ children, FORCE__className, ...props }) => {
|
|
3327
|
+
if (!React$1.useContext(VerticalNavigationContext)) throw new Error("VerticalNavigation.Footer must be used within VerticalNavigation");
|
|
3328
|
+
return /* @__PURE__ */ React$1.createElement("ul", {
|
|
3329
|
+
className: clsx(VerticalNavigation_module_default.footer, FORCE__className),
|
|
3330
|
+
...props
|
|
3331
|
+
}, children);
|
|
3332
|
+
};
|
|
3333
|
+
/**
|
|
3334
|
+
* Vertical navigation shell with controlled and uncontrolled collapse support.
|
|
3335
|
+
* Provides shared context for items, collapse toggle, and footer sections.
|
|
3336
|
+
*/
|
|
3337
|
+
const VerticalNavigation = Object.assign(({ children, FORCE__className, collapsed: controlledCollapsed, onCollapseChange, defaultCollapsed = false, "aria-label": ariaLabel = "Cribl product navigation", ...props }) => {
|
|
3338
|
+
const [internalCollapsed, setInternalCollapsed] = React$1.useState(defaultCollapsed);
|
|
3339
|
+
const isControlled = controlledCollapsed !== void 0;
|
|
3340
|
+
const collapsed = isControlled ? controlledCollapsed : internalCollapsed;
|
|
3341
|
+
const handleCollapseChange = (newCollapsed) => {
|
|
3342
|
+
if (!isControlled) setInternalCollapsed(newCollapsed);
|
|
3343
|
+
onCollapseChange?.(newCollapsed);
|
|
3344
|
+
};
|
|
3345
|
+
return /* @__PURE__ */ React$1.createElement(VerticalNavigationContext.Provider, { value: {
|
|
3346
|
+
collapsed,
|
|
3347
|
+
setCollapsed: handleCollapseChange
|
|
3348
|
+
} }, /* @__PURE__ */ React$1.createElement("nav", {
|
|
3349
|
+
className: clsx(VerticalNavigation_module_default.nav, FORCE__className),
|
|
3350
|
+
"aria-label": ariaLabel,
|
|
3351
|
+
"data-collapsed": collapsed,
|
|
3352
|
+
...props
|
|
3353
|
+
}, children));
|
|
3354
|
+
}, {
|
|
3355
|
+
Item,
|
|
3356
|
+
Collapse: Collapse$1,
|
|
3357
|
+
ItemList,
|
|
3358
|
+
Footer
|
|
3359
|
+
});
|
|
3360
|
+
//#endregion
|
|
3361
|
+
//#region src/components/EmptyState/EmptyState.module.css
|
|
3362
|
+
var EmptyState_module_default = {
|
|
3363
|
+
"base": "capra-EmptyState-module-cL_fDa-base",
|
|
3364
|
+
"content": "capra-EmptyState-module-cL_fDa-content"
|
|
3365
|
+
};
|
|
3366
|
+
//#endregion
|
|
3367
|
+
//#region src/components/EmptyState/EmptyState.tsx
|
|
3368
|
+
const ILLUSTRATIONS = {
|
|
3369
|
+
EmptyFolder: {
|
|
3370
|
+
light: React.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.EmptyFolder }))),
|
|
3371
|
+
dark: React.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.EmptyFolderDark })))
|
|
3372
|
+
},
|
|
3373
|
+
ArtSupplies: {
|
|
3374
|
+
light: React.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.ArtSupplies }))),
|
|
3375
|
+
dark: React.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.ArtSuppliesDark })))
|
|
3376
|
+
},
|
|
3377
|
+
Sandcastle: {
|
|
3378
|
+
light: React.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.Sandcastle }))),
|
|
3379
|
+
dark: React.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.SandcastleDark })))
|
|
3380
|
+
},
|
|
3381
|
+
EmptyBowl: {
|
|
3382
|
+
light: React.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.EmptyBowl }))),
|
|
3383
|
+
dark: React.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.EmptyBowl })))
|
|
3384
|
+
},
|
|
3385
|
+
EmptySuitcase: {
|
|
3386
|
+
light: React.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.EmptySuitcase }))),
|
|
3387
|
+
dark: React.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.EmptySuitcaseDark })))
|
|
3388
|
+
},
|
|
3389
|
+
Envelope: {
|
|
3390
|
+
light: React.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.Envelope }))),
|
|
3391
|
+
dark: React.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.Envelope })))
|
|
3392
|
+
},
|
|
3393
|
+
MissingSock: {
|
|
3394
|
+
light: React.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.MissingSock }))),
|
|
3395
|
+
dark: React.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.MissingSock })))
|
|
3396
|
+
},
|
|
3397
|
+
PizzaBox: {
|
|
3398
|
+
light: React.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.PizzaBox }))),
|
|
3399
|
+
dark: React.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.PizzaBox })))
|
|
3400
|
+
},
|
|
3401
|
+
PottedPlant: {
|
|
3402
|
+
light: React.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.PottedPlant }))),
|
|
3403
|
+
dark: React.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.PottedPlant })))
|
|
3404
|
+
}
|
|
3405
|
+
};
|
|
3406
|
+
/**
|
|
3407
|
+
* The EmptyState component is used to display a message when there is no data to display.
|
|
3408
|
+
* Illustrations are lazy-loaded and support light/dark themes via the theme prop.
|
|
3409
|
+
* @example
|
|
3410
|
+
* <EmptyState title="No data" description="There is no data to display" illustration="EmptyFolder" />
|
|
3411
|
+
* <EmptyState title="No data" illustration="EmptyFolder" theme="dark" />
|
|
3412
|
+
*/
|
|
3413
|
+
const EmptyState = (props) => {
|
|
3414
|
+
const { children, illustration = "EmptyFolder", theme = "light", size = "md", title, description, FORCE__className: classNameOverride, ...restProps } = props;
|
|
3415
|
+
const Illustration = ILLUSTRATIONS[illustration]?.[theme] ?? ILLUSTRATIONS["EmptyFolder"]["light"];
|
|
3416
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
3417
|
+
className: clsx(EmptyState_module_default.base, classNameOverride),
|
|
3418
|
+
"data-size": size,
|
|
3419
|
+
"data-theme": theme,
|
|
3420
|
+
...restProps
|
|
3421
|
+
}, /* @__PURE__ */ React.createElement(Suspense, { fallback: null }, /* @__PURE__ */ React.createElement(Illustration, { size })), /* @__PURE__ */ React.createElement("div", { className: EmptyState_module_default.content }, /* @__PURE__ */ React.createElement(Text, { variant: size === "lg" ? "heading-md" : "heading-xs" }, title), description && /* @__PURE__ */ React.createElement(Text, { variant: size === "lg" ? "body-md-normal" : "body-sm-normal" }, description)), children);
|
|
3422
|
+
};
|
|
3423
|
+
EmptyState.displayName = "EmptyState";
|
|
3424
|
+
//#endregion
|
|
3425
|
+
//#region src/components/Pagination/Pagination.module.css
|
|
3426
|
+
var Pagination_module_default = {
|
|
3427
|
+
"input": "capra-Pagination-module-OoQikq-input",
|
|
3428
|
+
"root": "capra-Pagination-module-OoQikq-root",
|
|
3429
|
+
"separator": "capra-Pagination-module-OoQikq-separator",
|
|
3430
|
+
"total": "capra-Pagination-module-OoQikq-total"
|
|
3431
|
+
};
|
|
3432
|
+
//#endregion
|
|
3433
|
+
//#region src/components/Pagination/Pagination.tsx
|
|
3434
|
+
/**
|
|
3435
|
+
* Pagination component for navigating through paged content.
|
|
3436
|
+
* Renders prev/next buttons and a page number input with total pages indicator.
|
|
3437
|
+
*/
|
|
3438
|
+
function Pagination({ total, current, pageSize = 10, onChange, disabled = false, "aria-label": ariaLabel, FORCE__className: classNameOverride, ...props }) {
|
|
3439
|
+
const totalPages = Math.max(1, Math.ceil(total / pageSize));
|
|
3440
|
+
const [inputValue, setInputValue] = React$1.useState("");
|
|
3441
|
+
const safeCurrent = Math.max(1, Math.min(current, totalPages));
|
|
3442
|
+
React$1.useEffect(() => {
|
|
3443
|
+
setInputValue("");
|
|
3444
|
+
}, [safeCurrent]);
|
|
3445
|
+
const updatePage = React$1.useCallback((page) => {
|
|
3446
|
+
const clamped = Math.max(1, Math.min(page, totalPages));
|
|
3447
|
+
setInputValue("");
|
|
3448
|
+
onChange?.(clamped, pageSize);
|
|
3449
|
+
}, [
|
|
3450
|
+
totalPages,
|
|
3451
|
+
pageSize,
|
|
3452
|
+
onChange
|
|
3453
|
+
]);
|
|
3454
|
+
const handlePrev = () => updatePage(safeCurrent - 1);
|
|
3455
|
+
const handleNext = () => updatePage(safeCurrent + 1);
|
|
3456
|
+
const handleInputChange = (e) => {
|
|
3457
|
+
const value = e.target.value;
|
|
3458
|
+
if (value === "" || /^\d+$/.test(value)) setInputValue(value);
|
|
3459
|
+
};
|
|
3460
|
+
const handleInputKeyDown = (e) => {
|
|
3461
|
+
if (e.key === "Enter") {
|
|
3462
|
+
e.preventDefault();
|
|
3463
|
+
const parsed = parseInt(inputValue, 10);
|
|
3464
|
+
if (!Number.isNaN(parsed)) updatePage(parsed);
|
|
3465
|
+
else setInputValue("");
|
|
3466
|
+
}
|
|
3467
|
+
};
|
|
3468
|
+
const handleInputBlur = () => {
|
|
3469
|
+
const parsed = parseInt(inputValue, 10);
|
|
3470
|
+
if (!Number.isNaN(parsed)) updatePage(parsed);
|
|
3471
|
+
else setInputValue("");
|
|
3472
|
+
};
|
|
3473
|
+
const displayValue = inputValue !== "" ? inputValue : String(safeCurrent);
|
|
3474
|
+
return /* @__PURE__ */ React$1.createElement("nav", {
|
|
3475
|
+
...props,
|
|
3476
|
+
"aria-label": ariaLabel,
|
|
3477
|
+
className: clsx(Pagination_module_default.root, classNameOverride),
|
|
3478
|
+
role: "navigation"
|
|
3479
|
+
}, /* @__PURE__ */ React$1.createElement(IconButton, {
|
|
3480
|
+
variant: "tertiary",
|
|
3481
|
+
icon: ChevronLeft,
|
|
3482
|
+
"aria-label": "Previous page",
|
|
3483
|
+
size: "sm",
|
|
3484
|
+
disabled: disabled || safeCurrent <= 1,
|
|
3485
|
+
onClick: handlePrev
|
|
3486
|
+
}), /* @__PURE__ */ React$1.createElement("input", {
|
|
3487
|
+
type: "number",
|
|
3488
|
+
min: 1,
|
|
3489
|
+
max: totalPages,
|
|
3490
|
+
value: displayValue,
|
|
3491
|
+
onChange: handleInputChange,
|
|
3492
|
+
onKeyDown: handleInputKeyDown,
|
|
3493
|
+
onBlur: handleInputBlur,
|
|
3494
|
+
disabled,
|
|
3495
|
+
className: Pagination_module_default.input,
|
|
3496
|
+
"aria-label": "Current page",
|
|
3497
|
+
"aria-valuemin": 1,
|
|
3498
|
+
"aria-valuemax": totalPages,
|
|
3499
|
+
"aria-valuenow": safeCurrent,
|
|
3500
|
+
"aria-valuetext": displayValue,
|
|
3501
|
+
role: "spinbutton"
|
|
3502
|
+
}), /* @__PURE__ */ React$1.createElement("span", {
|
|
3503
|
+
className: Pagination_module_default.separator,
|
|
3504
|
+
"aria-hidden": true
|
|
3505
|
+
}, "/"), /* @__PURE__ */ React$1.createElement("span", {
|
|
3506
|
+
className: Pagination_module_default.total,
|
|
3507
|
+
"aria-hidden": true
|
|
3508
|
+
}, totalPages), /* @__PURE__ */ React$1.createElement(IconButton, {
|
|
3509
|
+
variant: "tertiary",
|
|
3510
|
+
icon: ChevronRight,
|
|
3511
|
+
"aria-label": "Next page",
|
|
3512
|
+
size: "sm",
|
|
3513
|
+
disabled: disabled || safeCurrent >= totalPages,
|
|
3514
|
+
onClick: handleNext
|
|
3515
|
+
}));
|
|
3516
|
+
}
|
|
3517
|
+
//#endregion
|
|
3518
|
+
//#region src/components/Breadcrumbs/Breadcrumbs.module.css
|
|
3519
|
+
var Breadcrumbs_module_default = {
|
|
3520
|
+
"breadcrumbs": "capra-Breadcrumbs-module-JdbUZG-breadcrumbs",
|
|
3521
|
+
"item": "capra-Breadcrumbs-module-JdbUZG-item",
|
|
3522
|
+
"link": "capra-Breadcrumbs-module-JdbUZG-link",
|
|
3523
|
+
"separator": "capra-Breadcrumbs-module-JdbUZG-separator"
|
|
3524
|
+
};
|
|
3525
|
+
//#endregion
|
|
3526
|
+
//#region src/components/Breadcrumbs/Breadcrumbs.tsx
|
|
3527
|
+
const DEFAULT_NAV_LABEL = "Breadcrumb";
|
|
3528
|
+
const AdditionalBreadcrumbsContext = React$1.createContext({
|
|
3529
|
+
size: "md",
|
|
3530
|
+
shouldEmpasizeCurrent: true
|
|
3531
|
+
});
|
|
3532
|
+
function BreadcrumbsWithoutRef({ FORCE__className: classNameOverride, "aria-label": ariaLabel = DEFAULT_NAV_LABEL, size = "md", shouldEmpasizeCurrent = true, ...props }, ref) {
|
|
3533
|
+
return /* @__PURE__ */ React$1.createElement(AdditionalBreadcrumbsContext.Provider, { value: {
|
|
3534
|
+
size,
|
|
3535
|
+
shouldEmpasizeCurrent
|
|
3536
|
+
} }, /* @__PURE__ */ React$1.createElement(Breadcrumbs$1, {
|
|
3537
|
+
ref,
|
|
3538
|
+
...props,
|
|
3539
|
+
"aria-label": ariaLabel,
|
|
3540
|
+
className: clsx(Breadcrumbs_module_default.breadcrumbs, classNameOverride)
|
|
3541
|
+
}));
|
|
3542
|
+
}
|
|
3543
|
+
/**
|
|
3544
|
+
* Renders a breadcrumb trail with built-in support for collection
|
|
3545
|
+
* behavior, keyboard support, and current-page semantics.
|
|
3546
|
+
*
|
|
3547
|
+
* Wrap items with {@link Breadcrumb}. The last item should represent the current
|
|
3548
|
+
* page (typically without an `href`).
|
|
3549
|
+
*/
|
|
3550
|
+
const Breadcrumbs = fixedForwardRef(BreadcrumbsWithoutRef);
|
|
3551
|
+
/**
|
|
3552
|
+
* A single segment in a {@link Breadcrumbs} trail. Accepts link props (e.g. `href`)
|
|
3553
|
+
* plus options from React Aria `Breadcrumb` / `Link`. Renders a trailing separator
|
|
3554
|
+
* for every item except the current page.
|
|
3555
|
+
*/
|
|
3556
|
+
const Breadcrumb = React$1.forwardRef(function Breadcrumb({ children, separator = "/", ...props }, ref) {
|
|
3557
|
+
const { size, shouldEmpasizeCurrent } = React$1.useContext(AdditionalBreadcrumbsContext);
|
|
3558
|
+
return /* @__PURE__ */ React$1.createElement(Breadcrumb$1, {
|
|
3559
|
+
ref,
|
|
3560
|
+
...props,
|
|
3561
|
+
className: Breadcrumbs_module_default.item
|
|
3562
|
+
}, ({ isCurrent }) => {
|
|
3563
|
+
const textVariant = size === "sm" ? "body-sm-normal" : isCurrent && shouldEmpasizeCurrent ? "body-md-semibold" : "body-md-normal";
|
|
3564
|
+
return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(Link$1, {
|
|
3565
|
+
...props,
|
|
3566
|
+
className: Breadcrumbs_module_default.link,
|
|
3567
|
+
"data-emphasize": shouldEmpasizeCurrent || void 0,
|
|
3568
|
+
"data-size": size
|
|
3569
|
+
}, /* @__PURE__ */ React$1.createElement(Text, {
|
|
3570
|
+
variant: textVariant,
|
|
3571
|
+
color: "inherit"
|
|
3572
|
+
}, children)), !isCurrent && /* @__PURE__ */ React$1.createElement("span", {
|
|
3573
|
+
className: Breadcrumbs_module_default.separator,
|
|
3574
|
+
"aria-hidden": true
|
|
3575
|
+
}, separator));
|
|
3576
|
+
});
|
|
3577
|
+
});
|
|
3578
|
+
//#endregion
|
|
3579
|
+
//#region src/components/Spinner/Spinner.module.css
|
|
3580
|
+
var Spinner_module_default = {
|
|
3581
|
+
"base": "capra-Spinner-module-Gr9G6G-base",
|
|
3582
|
+
"content": "capra-Spinner-module-Gr9G6G-content",
|
|
3583
|
+
"overlay": "capra-Spinner-module-Gr9G6G-overlay",
|
|
3584
|
+
"overlaySpinner": "capra-Spinner-module-Gr9G6G-overlaySpinner",
|
|
3585
|
+
"spinDots": "capra-Spinner-module-Gr9G6G-spinDots",
|
|
3586
|
+
"spinnerContainer": "capra-Spinner-module-Gr9G6G-spinnerContainer",
|
|
3587
|
+
"spinOpacity": "capra-Spinner-module-Gr9G6G-spinOpacity",
|
|
3588
|
+
"spinRotate": "capra-Spinner-module-Gr9G6G-spinRotate",
|
|
3589
|
+
"wrapper": "capra-Spinner-module-Gr9G6G-wrapper"
|
|
3590
|
+
};
|
|
3591
|
+
//#endregion
|
|
3592
|
+
//#region src/components/Spinner/Spinner.tsx
|
|
3593
|
+
const SpinDots = ({ size }) => {
|
|
3594
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
3595
|
+
className: Spinner_module_default.spinDots,
|
|
3596
|
+
"data-size": size
|
|
3597
|
+
}, /* @__PURE__ */ React.createElement("i", null), /* @__PURE__ */ React.createElement("i", null), /* @__PURE__ */ React.createElement("i", null), /* @__PURE__ */ React.createElement("i", null));
|
|
3598
|
+
};
|
|
3599
|
+
const SpinnerIndicator = ({ size, title }) => {
|
|
3600
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
|
|
3601
|
+
className: Spinner_module_default.spinnerContainer,
|
|
3602
|
+
"aria-hidden": "true"
|
|
3603
|
+
}, /* @__PURE__ */ React.createElement(SpinDots, { size })), title && /* @__PURE__ */ React.createElement(Text, { variant: size === "sm" ? "body-sm-normal" : "body-md-normal" }, title));
|
|
3604
|
+
};
|
|
3605
|
+
/**
|
|
3606
|
+
* The Spinner component is used to display a loading state. It can be used in two modes:
|
|
3607
|
+
*
|
|
3608
|
+
* **Mode 1 - Standalone Spinner:**
|
|
3609
|
+
* @example
|
|
3610
|
+
* <Spinner title="Loading..." />
|
|
3611
|
+
* <Spinner size="lg" />
|
|
3612
|
+
*
|
|
3613
|
+
* **Mode 2 - Wrapper with Overlay:**
|
|
3614
|
+
* @example
|
|
3615
|
+
* <Spinner isPending={isLoading}>
|
|
3616
|
+
* <YourContent />
|
|
3617
|
+
* </Spinner>
|
|
3618
|
+
*/
|
|
3619
|
+
const Spinner = (props) => {
|
|
3620
|
+
const { size = "md", title, children, isPending = true, FORCE__className: classNameOverride, ...restProps } = props;
|
|
3621
|
+
if (!children) return /* @__PURE__ */ React.createElement("div", {
|
|
3622
|
+
className: clsx(Spinner_module_default.base, classNameOverride),
|
|
3623
|
+
role: "status",
|
|
3624
|
+
"aria-label": title || "Loading...",
|
|
3625
|
+
"aria-live": "polite",
|
|
3626
|
+
"data-size": size,
|
|
3627
|
+
...restProps
|
|
3628
|
+
}, /* @__PURE__ */ React.createElement(SpinnerIndicator, {
|
|
3629
|
+
size,
|
|
3630
|
+
title
|
|
3631
|
+
}));
|
|
3632
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
3633
|
+
className: clsx(Spinner_module_default.wrapper, classNameOverride),
|
|
3634
|
+
"data-size": size,
|
|
3635
|
+
...restProps
|
|
3636
|
+
}, /* @__PURE__ */ React.createElement("div", {
|
|
3637
|
+
className: Spinner_module_default.overlay,
|
|
3638
|
+
"data-visible": isPending,
|
|
3639
|
+
role: "status",
|
|
3640
|
+
"aria-label": isPending ? title || "Loading..." : void 0,
|
|
3641
|
+
"aria-live": "polite",
|
|
3642
|
+
"aria-hidden": !isPending
|
|
3643
|
+
}, /* @__PURE__ */ React.createElement("div", { className: Spinner_module_default.overlaySpinner }, /* @__PURE__ */ React.createElement(SpinnerIndicator, {
|
|
3644
|
+
size,
|
|
3645
|
+
title
|
|
3646
|
+
}))), /* @__PURE__ */ React.createElement("div", {
|
|
3647
|
+
className: Spinner_module_default.content,
|
|
3648
|
+
"data-blurred": isPending,
|
|
3649
|
+
"aria-busy": isPending
|
|
3650
|
+
}, children));
|
|
3651
|
+
};
|
|
3652
|
+
Spinner.displayName = "Spinner";
|
|
3653
|
+
//#endregion
|
|
3654
|
+
//#region src/components/Divider/Divider.module.css
|
|
3655
|
+
var Divider_module_default = {
|
|
3656
|
+
"divider": "capra-Divider-module-izBHNW-divider",
|
|
3657
|
+
"label": "capra-Divider-module-izBHNW-label",
|
|
3658
|
+
"line": "capra-Divider-module-izBHNW-line",
|
|
3659
|
+
"withLabel": "capra-Divider-module-izBHNW-withLabel"
|
|
3660
|
+
};
|
|
3661
|
+
//#endregion
|
|
3662
|
+
//#region src/components/Divider/Divider.tsx
|
|
3663
|
+
/**
|
|
3664
|
+
* Divider separates and groups content. Use horizontal dividers between sections;
|
|
3665
|
+
* use vertical dividers between inline items. A horizontal divider can optionally
|
|
3666
|
+
* display a label. Dividers are static and not keyboard focusable.
|
|
3667
|
+
*/
|
|
3668
|
+
const Divider = ({ type = "horizontal", children, FORCE__className: classNameOverride, ...restProps }) => {
|
|
3669
|
+
if (!(type === "horizontal" && children != null && children !== "")) return /* @__PURE__ */ React$1.createElement("hr", {
|
|
3670
|
+
...restProps,
|
|
3671
|
+
className: clsx(Divider_module_default.divider, classNameOverride),
|
|
3672
|
+
"aria-orientation": type,
|
|
3673
|
+
"data-orientation": type
|
|
3674
|
+
});
|
|
3675
|
+
return /* @__PURE__ */ React$1.createElement("div", {
|
|
3676
|
+
...restProps,
|
|
3677
|
+
className: clsx(Divider_module_default.divider, Divider_module_default.withLabel, classNameOverride),
|
|
3678
|
+
role: "separator",
|
|
3679
|
+
"aria-orientation": type,
|
|
3680
|
+
"data-orientation": type
|
|
3681
|
+
}, /* @__PURE__ */ React$1.createElement("span", {
|
|
3682
|
+
className: Divider_module_default.line,
|
|
3683
|
+
"aria-hidden": true
|
|
3684
|
+
}), /* @__PURE__ */ React$1.createElement("span", { className: Divider_module_default.label }, children), /* @__PURE__ */ React$1.createElement("span", {
|
|
3685
|
+
className: Divider_module_default.line,
|
|
3686
|
+
"aria-hidden": true
|
|
3687
|
+
}));
|
|
3688
|
+
};
|
|
3689
|
+
Divider.displayName = "Divider";
|
|
3690
|
+
//#endregion
|
|
3691
|
+
//#region src/components/Skeleton/Skeleton.module.css
|
|
3692
|
+
var Skeleton_module_default = {
|
|
3693
|
+
"base": "capra-Skeleton-module-EIu0mW-base",
|
|
3694
|
+
"element": "capra-Skeleton-module-EIu0mW-element",
|
|
3695
|
+
"preset": "capra-Skeleton-module-EIu0mW-preset",
|
|
3696
|
+
"presetParagraph": "capra-Skeleton-module-EIu0mW-presetParagraph",
|
|
3697
|
+
"presetParagraphRow": "capra-Skeleton-module-EIu0mW-presetParagraphRow",
|
|
3698
|
+
"presetSection": "capra-Skeleton-module-EIu0mW-presetSection",
|
|
3699
|
+
"presetTitle": "capra-Skeleton-module-EIu0mW-presetTitle",
|
|
3700
|
+
"skeleton-pulse": "capra-Skeleton-module-EIu0mW-skeleton-pulse"
|
|
3701
|
+
};
|
|
3702
|
+
//#endregion
|
|
3703
|
+
//#region src/components/Skeleton/Skeleton.tsx
|
|
3704
|
+
/**
|
|
3705
|
+
* Ant Design `title` / `paragraph` props are `true | false | config object`.
|
|
3706
|
+
* When `true`, there is no object — treat as `{}` so `.width` / `.rows` read as undefined and defaults apply.
|
|
3707
|
+
*/
|
|
3708
|
+
function getPropValue(prop) {
|
|
3709
|
+
if (prop && typeof prop === "object" && !React$1.isValidElement(prop)) return prop;
|
|
3710
|
+
return {};
|
|
3711
|
+
}
|
|
3712
|
+
function getParagraphWidth(index, props, rows) {
|
|
3713
|
+
const { width } = props;
|
|
3714
|
+
if (Array.isArray(width)) return width[index];
|
|
3715
|
+
if (index === rows - 1) return width;
|
|
3716
|
+
}
|
|
3717
|
+
/**
|
|
3718
|
+
* A skeleton is a graphical placeholder, reserving physical space in the page for content in cases where a service or action may be slow to resolve. A skeleton can be considered as an alternative to the progress spinner in many situations.
|
|
3719
|
+
*
|
|
3720
|
+
* @example
|
|
3721
|
+
* <Skeleton loading paragraph={{ rows: 4 }} />
|
|
3722
|
+
*
|
|
3723
|
+
* @example
|
|
3724
|
+
* // Ant Design–style wrapper: skeleton while loading, then children.
|
|
3725
|
+
* <Skeleton loading={isLoading}><Article /></Skeleton>
|
|
3726
|
+
*/
|
|
3727
|
+
const Skeleton = (props) => {
|
|
3728
|
+
const { loading = true, title: titleProp = true, paragraph: paragraphProp = true, round = false, active = false, children, FORCE__className: classNameOverride, style, ...restProps } = props;
|
|
3729
|
+
const titleProps = getPropValue(titleProp);
|
|
3730
|
+
const paragraphProps = getPropValue(paragraphProp);
|
|
3731
|
+
const hasTitle = !!titleProp;
|
|
3732
|
+
const hasParagraph = !!paragraphProp;
|
|
3733
|
+
if (!loading) {
|
|
3734
|
+
if (children != null) return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, children);
|
|
3735
|
+
return null;
|
|
3736
|
+
}
|
|
3737
|
+
const rootAriaProps = {
|
|
3738
|
+
role: "status",
|
|
3739
|
+
"aria-label": "Loading",
|
|
3740
|
+
"aria-busy": true
|
|
3741
|
+
};
|
|
3742
|
+
const titleWidth = titleProps.width ?? (hasParagraph ? "38%" : void 0);
|
|
3743
|
+
const paragraphRows = paragraphProps.rows ?? (hasTitle ? 3 : 2);
|
|
3744
|
+
if (!hasTitle && !hasParagraph) return /* @__PURE__ */ React$1.createElement("span", {
|
|
3745
|
+
...restProps,
|
|
3746
|
+
className: clsx(Skeleton_module_default.element, classNameOverride),
|
|
3747
|
+
"data-round": round || void 0,
|
|
3748
|
+
"data-active": active || void 0,
|
|
3749
|
+
...rootAriaProps,
|
|
3750
|
+
style
|
|
3751
|
+
}, children ?? " ");
|
|
3752
|
+
return /* @__PURE__ */ React$1.createElement("span", {
|
|
3753
|
+
...restProps,
|
|
3754
|
+
className: clsx(Skeleton_module_default.preset, classNameOverride),
|
|
3755
|
+
"data-round": round || void 0,
|
|
3756
|
+
"data-active": active || void 0,
|
|
3757
|
+
...rootAriaProps,
|
|
3758
|
+
style
|
|
3759
|
+
}, /* @__PURE__ */ React$1.createElement("span", { className: Skeleton_module_default.presetSection }, hasTitle && /* @__PURE__ */ React$1.createElement("span", {
|
|
3760
|
+
className: Skeleton_module_default.presetTitle,
|
|
3761
|
+
style: titleWidth != null ? { width: typeof titleWidth === "number" ? `${titleWidth}px` : titleWidth } : void 0,
|
|
3762
|
+
"aria-hidden": true
|
|
3763
|
+
}), hasParagraph && paragraphRows > 0 && /* @__PURE__ */ React$1.createElement("span", {
|
|
3764
|
+
className: Skeleton_module_default.presetParagraph,
|
|
3765
|
+
"aria-hidden": true
|
|
3766
|
+
}, Array.from({ length: paragraphRows }, (_, i) => {
|
|
3767
|
+
const rowWidth = getParagraphWidth(i, {
|
|
3768
|
+
...paragraphProps,
|
|
3769
|
+
rows: paragraphRows
|
|
3770
|
+
}, paragraphRows);
|
|
3771
|
+
return /* @__PURE__ */ React$1.createElement("span", {
|
|
3772
|
+
key: i,
|
|
3773
|
+
className: Skeleton_module_default.presetParagraphRow,
|
|
3774
|
+
style: rowWidth != null ? { width: typeof rowWidth === "number" ? `${rowWidth}px` : rowWidth } : void 0
|
|
3775
|
+
});
|
|
3776
|
+
}))));
|
|
3777
|
+
};
|
|
3778
|
+
Skeleton.displayName = "Skeleton";
|
|
3779
|
+
//#endregion
|
|
3780
|
+
//#region src/components/Skeleton/SkeletonGroup.tsx
|
|
3781
|
+
/** `dimension.component.{sm,md,lg}` via the same `--cds-dimension-component-*` vars as Button. */
|
|
3782
|
+
const SKELETON_SIZE = {
|
|
3783
|
+
sm: "var(--cds-dimension-component-sm)",
|
|
3784
|
+
md: "var(--cds-dimension-component-md)",
|
|
3785
|
+
lg: "var(--cds-dimension-component-lg)"
|
|
3786
|
+
};
|
|
3787
|
+
/** Ordered size keys (same keys as {@link SKELETON_SIZE}). */
|
|
3788
|
+
const SKELETON_SIZE_TOKENS = Object.keys(SKELETON_SIZE);
|
|
3789
|
+
const SkeletonGroupButton = (props) => {
|
|
3790
|
+
const { block = false, size: sizeProp = "md", shape = "default", active = false, FORCE__className: classNameOverride, style, ...rest } = props;
|
|
3791
|
+
const size = SKELETON_SIZE[sizeProp];
|
|
3792
|
+
const height = size;
|
|
3793
|
+
const width = shape === "circle" ? size : block ? "100%" : 64;
|
|
3794
|
+
return /* @__PURE__ */ React$1.createElement(Skeleton, {
|
|
3795
|
+
...rest,
|
|
3796
|
+
loading: true,
|
|
3797
|
+
title: false,
|
|
3798
|
+
paragraph: false,
|
|
3799
|
+
round: shape === "round",
|
|
3800
|
+
active,
|
|
3801
|
+
"data-block": block || void 0,
|
|
3802
|
+
FORCE__className: classNameOverride,
|
|
3803
|
+
style: {
|
|
3804
|
+
width,
|
|
3805
|
+
height,
|
|
3806
|
+
...style
|
|
3807
|
+
}
|
|
3808
|
+
});
|
|
3809
|
+
};
|
|
3810
|
+
SkeletonGroupButton.displayName = "SkeletonGroup.Button";
|
|
3811
|
+
const SkeletonGroupInput = (props) => {
|
|
3812
|
+
const { block = false, size: sizeProp = "md", active = false, FORCE__className: classNameOverride, style, ...rest } = props;
|
|
3813
|
+
const size = SKELETON_SIZE[sizeProp];
|
|
3814
|
+
return /* @__PURE__ */ React$1.createElement(Skeleton, {
|
|
3815
|
+
...rest,
|
|
3816
|
+
loading: true,
|
|
3817
|
+
title: false,
|
|
3818
|
+
paragraph: false,
|
|
3819
|
+
active,
|
|
3820
|
+
"data-block": block || void 0,
|
|
3821
|
+
FORCE__className: classNameOverride,
|
|
3822
|
+
style: {
|
|
3823
|
+
width: block ? "100%" : 200,
|
|
3824
|
+
height: size,
|
|
3825
|
+
...style
|
|
3826
|
+
}
|
|
3827
|
+
});
|
|
3828
|
+
};
|
|
3829
|
+
SkeletonGroupInput.displayName = "SkeletonGroup.Input";
|
|
3830
|
+
const SkeletonGroupNode = (props) => {
|
|
3831
|
+
const { children, active = false, FORCE__className: classNameOverride, style, ...rest } = props;
|
|
3832
|
+
return /* @__PURE__ */ React$1.createElement(Skeleton, {
|
|
3833
|
+
...rest,
|
|
3834
|
+
loading: true,
|
|
3835
|
+
title: false,
|
|
3836
|
+
paragraph: false,
|
|
3837
|
+
active,
|
|
3838
|
+
FORCE__className: classNameOverride,
|
|
3839
|
+
style
|
|
3840
|
+
}, children ?? " ");
|
|
3841
|
+
};
|
|
3842
|
+
SkeletonGroupNode.displayName = "SkeletonGroup.Node";
|
|
3843
|
+
const SkeletonGroup = {
|
|
3844
|
+
Button: SkeletonGroupButton,
|
|
3845
|
+
Input: SkeletonGroupInput,
|
|
3846
|
+
Node: SkeletonGroupNode
|
|
3847
|
+
};
|
|
3848
|
+
//#endregion
|
|
3849
|
+
//#region src/components/Toast/Toast.module.css
|
|
3850
|
+
var Toast_module_default = {
|
|
3851
|
+
"actionsContainer": "capra-Toast-module-p7lQQG-actionsContainer",
|
|
3852
|
+
"container": "capra-Toast-module-p7lQQG-container",
|
|
3853
|
+
"containerBottomRight": "capra-Toast-module-p7lQQG-containerBottomRight",
|
|
3854
|
+
"containerTopRight": "capra-Toast-module-p7lQQG-containerTopRight",
|
|
3855
|
+
"content": "capra-Toast-module-p7lQQG-content",
|
|
3856
|
+
"toast": "capra-Toast-module-p7lQQG-toast",
|
|
3857
|
+
"topRow": "capra-Toast-module-p7lQQG-topRow",
|
|
3858
|
+
"typeIcon": "capra-Toast-module-p7lQQG-typeIcon"
|
|
3859
|
+
};
|
|
3860
|
+
//#endregion
|
|
3861
|
+
//#region src/components/Toast/Toast.tsx
|
|
3862
|
+
const icons = {
|
|
3863
|
+
info: InfoOutlined,
|
|
3864
|
+
success: SuccessOutlined,
|
|
3865
|
+
warning: WarningOutlined,
|
|
3866
|
+
error: AttentionOutlined
|
|
3867
|
+
};
|
|
3868
|
+
let addToastRef = null;
|
|
3869
|
+
let removeToastRef = null;
|
|
3870
|
+
function generateId() {
|
|
3871
|
+
return `toast-${Date.now()}-${Math.random().toString(36).slice(2)}`;
|
|
3872
|
+
}
|
|
3873
|
+
function getWordCount(content) {
|
|
3874
|
+
if (content == null) return 0;
|
|
3875
|
+
if (typeof content === "string") return content.trim().split(/\s+/).filter(Boolean).length;
|
|
3876
|
+
if (typeof content === "number") return String(content).trim().split(/\s+/).filter(Boolean).length;
|
|
3877
|
+
if (React$1.isValidElement(content)) return getWordCount(content.props?.children);
|
|
3878
|
+
if (Array.isArray(content)) return content.reduce((sum, child) => sum + getWordCount(child), 0);
|
|
3879
|
+
return 0;
|
|
3880
|
+
}
|
|
3881
|
+
const MIN_DURATION_BASE_MS = 5e3;
|
|
3882
|
+
const MS_PER_120_WORDS = 1e3;
|
|
3883
|
+
function getMinimumDuration(content, requestedDuration) {
|
|
3884
|
+
if (requestedDuration <= 0) return requestedDuration;
|
|
3885
|
+
const wordCount = getWordCount(content);
|
|
3886
|
+
const minimumMs = MIN_DURATION_BASE_MS + Math.floor(wordCount / 120) * MS_PER_120_WORDS;
|
|
3887
|
+
return Math.max(requestedDuration, minimumMs);
|
|
3888
|
+
}
|
|
3889
|
+
function addToast(item) {
|
|
3890
|
+
const id = generateId();
|
|
3891
|
+
const toastItem = {
|
|
3892
|
+
...item,
|
|
3893
|
+
id
|
|
3894
|
+
};
|
|
3895
|
+
if (addToastRef) addToastRef(toastItem);
|
|
3896
|
+
return id;
|
|
3897
|
+
}
|
|
3898
|
+
function removeToast(id) {
|
|
3899
|
+
if (removeToastRef) removeToastRef(id);
|
|
3900
|
+
}
|
|
3901
|
+
function getActionElement(actionConfig) {
|
|
3902
|
+
if (!actionConfig) return null;
|
|
3903
|
+
if (React$1.isValidElement(actionConfig)) return actionConfig;
|
|
3904
|
+
if ("label" in actionConfig && "onClick" in actionConfig) return /* @__PURE__ */ React$1.createElement(Button, {
|
|
3905
|
+
variant: "secondary",
|
|
3906
|
+
size: "sm",
|
|
3907
|
+
onClick: actionConfig.onClick
|
|
3908
|
+
}, actionConfig.label);
|
|
3909
|
+
return null;
|
|
3910
|
+
}
|
|
3911
|
+
const ToastItemComponent = ({ item, onDismiss }) => {
|
|
3912
|
+
const { id, type, content, closable, action, actionSecondary } = item;
|
|
3913
|
+
const Icon = icons[type];
|
|
3914
|
+
const ariaRole = ["info", "success"].includes(type) ? "status" : "alert";
|
|
3915
|
+
const ariaLive = ariaRole === "status" ? "polite" : "assertive";
|
|
3916
|
+
React$1.useEffect(() => {
|
|
3917
|
+
if (item.duration <= 0) return;
|
|
3918
|
+
const timer = setTimeout(() => {
|
|
3919
|
+
onDismiss(id);
|
|
3920
|
+
item.onClose?.();
|
|
3921
|
+
}, item.duration);
|
|
3922
|
+
return () => clearTimeout(timer);
|
|
3923
|
+
}, [
|
|
3924
|
+
id,
|
|
3925
|
+
item,
|
|
3926
|
+
onDismiss
|
|
3927
|
+
]);
|
|
3928
|
+
const handleClose = () => {
|
|
3929
|
+
onDismiss(id);
|
|
3930
|
+
item.onClose?.();
|
|
3931
|
+
};
|
|
3932
|
+
const actionElement = getActionElement(action);
|
|
3933
|
+
const actionSecondaryElement = getActionElement(actionSecondary);
|
|
3934
|
+
const hasActions = actionElement || actionSecondaryElement;
|
|
3935
|
+
return /* @__PURE__ */ React$1.createElement("div", {
|
|
3936
|
+
key: id,
|
|
3937
|
+
className: clsx(Toast_module_default.toast),
|
|
3938
|
+
"data-type": type,
|
|
3939
|
+
role: ariaRole,
|
|
3940
|
+
"aria-live": ariaLive,
|
|
3941
|
+
"aria-atomic": "true"
|
|
3942
|
+
}, /* @__PURE__ */ React$1.createElement("div", { className: Toast_module_default.topRow }, /* @__PURE__ */ React$1.createElement("span", {
|
|
3943
|
+
className: Toast_module_default.typeIcon,
|
|
3944
|
+
"aria-hidden": true
|
|
3945
|
+
}, /* @__PURE__ */ React$1.createElement(Icon, { size: "md" })), /* @__PURE__ */ React$1.createElement("div", { className: Toast_module_default.content }, /* @__PURE__ */ React$1.createElement(Text, { variant: "body-md-normal" }, content)), closable && /* @__PURE__ */ React$1.createElement(IconButton, {
|
|
3946
|
+
variant: "tertiary",
|
|
3947
|
+
size: "sm",
|
|
3948
|
+
appearance: "neutral",
|
|
3949
|
+
icon: CloseOutlined,
|
|
3950
|
+
"aria-label": "Close",
|
|
3951
|
+
onClick: handleClose
|
|
3952
|
+
})), hasActions && /* @__PURE__ */ React$1.createElement("div", { className: Toast_module_default.actionsContainer }, actionElement, actionSecondaryElement));
|
|
3953
|
+
};
|
|
3954
|
+
const ToastContainer = () => {
|
|
3955
|
+
const [toasts, setToasts] = React$1.useState([]);
|
|
3956
|
+
React$1.useEffect(() => {
|
|
3957
|
+
addToastRef = (item) => {
|
|
3958
|
+
setToasts((prev) => [...prev, item]);
|
|
3959
|
+
};
|
|
3960
|
+
removeToastRef = (id) => {
|
|
3961
|
+
setToasts((prev) => prev.filter((t) => t.id !== id));
|
|
3962
|
+
};
|
|
3963
|
+
return () => {
|
|
3964
|
+
addToastRef = null;
|
|
3965
|
+
removeToastRef = null;
|
|
3966
|
+
};
|
|
3967
|
+
}, []);
|
|
3968
|
+
const handleDismiss = React$1.useCallback((id) => {
|
|
3969
|
+
setToasts((prev) => prev.filter((t) => t.id !== id));
|
|
3970
|
+
}, []);
|
|
3971
|
+
if (toasts.length === 0 || typeof document === "undefined") return null;
|
|
3972
|
+
const topRightToasts = toasts.filter((t) => t.position === "top-right");
|
|
3973
|
+
const bottomRightToasts = toasts.filter((t) => t.position === "bottom-right");
|
|
3974
|
+
return createPortal(/* @__PURE__ */ React$1.createElement(React$1.Fragment, null, topRightToasts.length > 0 && /* @__PURE__ */ React$1.createElement("div", {
|
|
3975
|
+
className: clsx(Toast_module_default.container, Toast_module_default.containerTopRight),
|
|
3976
|
+
role: "region",
|
|
3977
|
+
"aria-label": "Notifications"
|
|
3978
|
+
}, topRightToasts.map((item) => /* @__PURE__ */ React$1.createElement(ToastItemComponent, {
|
|
3979
|
+
key: item.id,
|
|
3980
|
+
item,
|
|
3981
|
+
onDismiss: handleDismiss
|
|
3982
|
+
}))), bottomRightToasts.length > 0 && /* @__PURE__ */ React$1.createElement("div", {
|
|
3983
|
+
className: clsx(Toast_module_default.container, Toast_module_default.containerBottomRight),
|
|
3984
|
+
role: "region",
|
|
3985
|
+
"aria-label": "Notifications"
|
|
3986
|
+
}, bottomRightToasts.map((item) => /* @__PURE__ */ React$1.createElement(ToastItemComponent, {
|
|
3987
|
+
key: item.id,
|
|
3988
|
+
item,
|
|
3989
|
+
onDismiss: handleDismiss
|
|
3990
|
+
})))), document.body);
|
|
3991
|
+
};
|
|
3992
|
+
const showToast = (type) => (content, options = {}) => {
|
|
3993
|
+
const { duration = 6e3, onClose, closable = true, position = "top-right", action, actionSecondary } = options;
|
|
3994
|
+
return addToast({
|
|
3995
|
+
type,
|
|
3996
|
+
content,
|
|
3997
|
+
duration: getMinimumDuration(content, duration),
|
|
3998
|
+
onClose,
|
|
3999
|
+
closable,
|
|
4000
|
+
position,
|
|
4001
|
+
action,
|
|
4002
|
+
actionSecondary
|
|
4003
|
+
});
|
|
4004
|
+
};
|
|
4005
|
+
/**
|
|
4006
|
+
* Uncontrolled Toast component with imperative API.
|
|
4007
|
+
* Renders lightweight feedback in the upper right corner of the viewport.
|
|
4008
|
+
*
|
|
4009
|
+
* Must wrap your app with Toast.Provider to enable toasts.
|
|
4010
|
+
*
|
|
4011
|
+
* @example
|
|
4012
|
+
* ```tsx
|
|
4013
|
+
* // In your app root
|
|
4014
|
+
* <Toast.Provider />
|
|
4015
|
+
*
|
|
4016
|
+
* // Trigger toasts imperatively
|
|
4017
|
+
* Toast.success('Saved successfully');
|
|
4018
|
+
* Toast.error('Something went wrong', { action: { label: 'Try again', onClick: handleRetry } });
|
|
4019
|
+
* ```
|
|
4020
|
+
*/
|
|
4021
|
+
const Toast = {
|
|
4022
|
+
success: showToast("success"),
|
|
4023
|
+
error: showToast("error"),
|
|
4024
|
+
info: showToast("info"),
|
|
4025
|
+
warning: showToast("warning"),
|
|
4026
|
+
destroy: removeToast,
|
|
4027
|
+
Provider: () => /* @__PURE__ */ React$1.createElement(ToastContainer, null)
|
|
4028
|
+
};
|
|
4029
|
+
//#endregion
|
|
4030
|
+
//#region src/components/Menu/Menu.module.css
|
|
4031
|
+
var Menu_module_default = {
|
|
4032
|
+
"divider": "capra-Menu-module-y-WdTa-divider",
|
|
4033
|
+
"header": "capra-Menu-module-y-WdTa-header",
|
|
4034
|
+
"list": "capra-Menu-module-y-WdTa-list",
|
|
4035
|
+
"menu": "capra-Menu-module-y-WdTa-menu",
|
|
4036
|
+
"menuItem": "capra-Menu-module-y-WdTa-menuItem",
|
|
4037
|
+
"menuItemDescription": "capra-Menu-module-y-WdTa-menuItemDescription",
|
|
4038
|
+
"menuItemLabel": "capra-Menu-module-y-WdTa-menuItemLabel",
|
|
4039
|
+
"menuItemLeadingGutter": "capra-Menu-module-y-WdTa-menuItemLeadingGutter",
|
|
4040
|
+
"menuItemListItemShell": "capra-Menu-module-y-WdTa-menuItemListItemShell",
|
|
4041
|
+
"menuItemShortcut": "capra-Menu-module-y-WdTa-menuItemShortcut",
|
|
4042
|
+
"menuItemTrailingGroup": "capra-Menu-module-y-WdTa-menuItemTrailingGroup",
|
|
4043
|
+
"menuItemTrailingGutter": "capra-Menu-module-y-WdTa-menuItemTrailingGutter",
|
|
4044
|
+
"menuTriggerSlot": "capra-Menu-module-y-WdTa-menuTriggerSlot",
|
|
4045
|
+
"section": "capra-Menu-module-y-WdTa-section"
|
|
4046
|
+
};
|
|
4047
|
+
//#endregion
|
|
4048
|
+
//#region src/components/Menu/Menu.tsx
|
|
4049
|
+
/**
|
|
4050
|
+
* React Aria primitives use the same names as the [starter Menu](https://react-aria.adobe.com/Menu):
|
|
4051
|
+
* `AriaMenuTrigger` + `Popover` + `AriaMenu`, `AriaSubmenuTrigger`, `AriaMenuItem`, `AriaMenuSection`.
|
|
4052
|
+
* Capra keeps its `trigger` prop + composite `Menu.Item` API; behavior is unchanged from importing `Menu`/`MenuTrigger` without aliases.
|
|
4053
|
+
*/
|
|
4054
|
+
/** When true, Menu.Item indents by default (inside Menu.Section that contains Menu.Header). */
|
|
4055
|
+
const MenuSectionIndentContext = React$1.createContext(false);
|
|
4056
|
+
/** Identifies trigger + all menu panels (including portaled submenus) for outside-dismiss. */
|
|
4057
|
+
const MenuSessionContext = React$1.createContext(null);
|
|
4058
|
+
const MENU_SESSION_DATA_ATTR = "data-capra-menu-session";
|
|
4059
|
+
function eventPathTouchesMenuSession(event, sessionId) {
|
|
4060
|
+
for (const node of event.composedPath()) if (node instanceof Element && node.getAttribute(MENU_SESSION_DATA_ATTR) === sessionId) return true;
|
|
4061
|
+
return false;
|
|
4062
|
+
}
|
|
4063
|
+
/**
|
|
4064
|
+
* React Aria `usePopover` sets `isDismissable` false when `isNonModal` (see usePopover → useOverlay), so
|
|
4065
|
+
* pointer events outside the panel do not close. Close on `pointerdown` capture when the path does not
|
|
4066
|
+
* intersect trigger or any element marked with {@link MENU_SESSION_DATA_ATTR} (root + submenu panels).
|
|
4067
|
+
*/
|
|
4068
|
+
function MenuDismissOnOutsidePointer({ sessionId }) {
|
|
4069
|
+
const overlayState = React$1.useContext(OverlayTriggerStateContext);
|
|
4070
|
+
const isOpen = overlayState?.isOpen ?? false;
|
|
4071
|
+
const overlayStateRef = React$1.useRef(overlayState);
|
|
4072
|
+
overlayStateRef.current = overlayState;
|
|
4073
|
+
React$1.useEffect(() => {
|
|
4074
|
+
if (!isOpen) return;
|
|
4075
|
+
const onPointerDownCapture = (event) => {
|
|
4076
|
+
if (event.button > 0) return;
|
|
4077
|
+
if (eventPathTouchesMenuSession(event, sessionId)) return;
|
|
4078
|
+
overlayStateRef.current?.close();
|
|
4079
|
+
};
|
|
4080
|
+
document.addEventListener("pointerdown", onPointerDownCapture, true);
|
|
4081
|
+
return () => document.removeEventListener("pointerdown", onPointerDownCapture, true);
|
|
4082
|
+
}, [isOpen, sessionId]);
|
|
4083
|
+
return null;
|
|
4084
|
+
}
|
|
4085
|
+
function getMenuPanelDataAttributes({ panelPadding, itemHoverAppearance = "default", itemActiveAccentBar = true, itemActiveLabelSemibold = true }) {
|
|
4086
|
+
return {
|
|
4087
|
+
"data-panel-padding": panelPadding,
|
|
4088
|
+
"data-item-hover-appearance": itemHoverAppearance,
|
|
4089
|
+
...itemHoverAppearance === "accent" && {
|
|
4090
|
+
"data-item-active-accent-bar": itemActiveAccentBar ? "true" : "false",
|
|
4091
|
+
"data-item-active-label-semibold": itemActiveLabelSemibold ? "true" : "false"
|
|
4092
|
+
}
|
|
4093
|
+
};
|
|
4094
|
+
}
|
|
4095
|
+
const MenuHeader = ({ id, label = "Header", FORCE__className: classNameOverride, children }) => /* @__PURE__ */ React$1.createElement(Header, {
|
|
4096
|
+
id,
|
|
4097
|
+
className: clsx(Menu_module_default.header, classNameOverride)
|
|
4098
|
+
}, children ?? label);
|
|
4099
|
+
MenuHeader.displayName = "Menu.Header";
|
|
4100
|
+
function isMenuHeaderElement(child) {
|
|
4101
|
+
return React$1.isValidElement(child) && child.type === MenuHeader;
|
|
4102
|
+
}
|
|
4103
|
+
const MenuSection$1 = ({ children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, FORCE__className: classNameOverride, ...rest }) => {
|
|
4104
|
+
const autoHeaderId = React$1.useId();
|
|
4105
|
+
const childArray = React$1.Children.toArray(children);
|
|
4106
|
+
let headerIndex = -1;
|
|
4107
|
+
for (let i = 0; i < childArray.length; i++) if (isMenuHeaderElement(childArray[i])) {
|
|
4108
|
+
headerIndex = i;
|
|
4109
|
+
break;
|
|
4110
|
+
}
|
|
4111
|
+
const hasHeader = headerIndex >= 0;
|
|
4112
|
+
if (process.env.NODE_ENV !== "production") {
|
|
4113
|
+
if (!hasHeader && !ariaLabel?.trim() && !ariaLabelledBy?.trim()) console.error("Menu.Section: provide aria-label or aria-labelledby when the section has no direct Menu.Header child.");
|
|
4114
|
+
}
|
|
4115
|
+
const labelledBy = hasHeader ? ariaLabelledBy ?? autoHeaderId : ariaLabelledBy;
|
|
4116
|
+
const effectiveAriaLabel = hasHeader ? void 0 : ariaLabel;
|
|
4117
|
+
const resolvedChildren = hasHeader && headerIndex >= 0 ? childArray.map((child, i) => {
|
|
4118
|
+
if (i === headerIndex && isMenuHeaderElement(child)) return React$1.cloneElement(child, { id: child.props.id ?? autoHeaderId });
|
|
4119
|
+
return child;
|
|
4120
|
+
}) : children;
|
|
4121
|
+
return /* @__PURE__ */ React$1.createElement(MenuSectionIndentContext.Provider, { value: hasHeader }, /* @__PURE__ */ React$1.createElement(MenuSection, {
|
|
4122
|
+
"aria-label": effectiveAriaLabel,
|
|
4123
|
+
"aria-labelledby": labelledBy,
|
|
4124
|
+
className: clsx(Menu_module_default.section, className, classNameOverride),
|
|
4125
|
+
...rest
|
|
4126
|
+
}, resolvedChildren));
|
|
4127
|
+
};
|
|
4128
|
+
MenuSection$1.displayName = "Menu.Section";
|
|
4129
|
+
const MenuItem$1 = ({ as, label, description, ariaLabel, href, disabled = false, active = false, variant = "default", icon, indent: indentProp, shortcut, parent = false, onClick, FORCE__className, children, ...rest }) => {
|
|
4130
|
+
const indentFromSectionHeader = React$1.useContext(MenuSectionIndentContext);
|
|
4131
|
+
const indent = indentProp !== void 0 ? indentProp : indentFromSectionHeader ? true : false;
|
|
4132
|
+
const labelContent = children ?? label;
|
|
4133
|
+
const showDescription = description != null && description !== "";
|
|
4134
|
+
const textValue = ariaLabel || (typeof label === "string" ? label : void 0) || (typeof children === "string" ? children : void 0) || "";
|
|
4135
|
+
const listItemContent = /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, (indent || icon) && /* @__PURE__ */ React$1.createElement(ListItem.Leading, { FORCE__className: icon ? Menu_module_default.menuItemLeadingGutter : void 0 }, icon && /* @__PURE__ */ React$1.createElement("span", { "aria-hidden": "true" }, icon)), /* @__PURE__ */ React$1.createElement(ListItem.Content, null, /* @__PURE__ */ React$1.createElement(ListItem.Label, null, /* @__PURE__ */ React$1.createElement("span", { className: Menu_module_default.menuItemLabel }, labelContent)), showDescription ? /* @__PURE__ */ React$1.createElement(ListItem.Description, null, /* @__PURE__ */ React$1.createElement("span", { className: Menu_module_default.menuItemDescription }, description)) : null), (shortcut || parent) && /* @__PURE__ */ React$1.createElement(ListItem.Trailing, { FORCE__className: Menu_module_default.menuItemTrailingGutter }, /* @__PURE__ */ React$1.createElement("span", { className: Menu_module_default.menuItemTrailingGroup }, [shortcut ? /* @__PURE__ */ React$1.createElement("span", {
|
|
4136
|
+
key: "shortcut",
|
|
4137
|
+
className: Menu_module_default.menuItemShortcut
|
|
4138
|
+
}, shortcut) : null, parent ? /* @__PURE__ */ React$1.createElement(ChevronRight, {
|
|
4139
|
+
key: "parent",
|
|
4140
|
+
size: "xs",
|
|
4141
|
+
"aria-hidden": true
|
|
4142
|
+
}) : null])));
|
|
4143
|
+
const itemClassName = clsx(Menu_module_default.menuItem, FORCE__className);
|
|
4144
|
+
const menuItemDataAttributes = {
|
|
4145
|
+
"data-variant": variant,
|
|
4146
|
+
"data-active": active || void 0,
|
|
4147
|
+
"data-indent": indent || void 0,
|
|
4148
|
+
"data-has-description": showDescription || void 0
|
|
4149
|
+
};
|
|
4150
|
+
/** React Aria runs menu activation through `onAction` (pointer + Enter/Space), not only `onPress`. */
|
|
4151
|
+
const handleAction = () => {
|
|
4152
|
+
if (!disabled && onClick) onClick({});
|
|
4153
|
+
};
|
|
4154
|
+
if (as) {
|
|
4155
|
+
const Component = as;
|
|
4156
|
+
return /* @__PURE__ */ React$1.createElement(MenuItem, {
|
|
4157
|
+
isDisabled: disabled,
|
|
4158
|
+
textValue,
|
|
4159
|
+
"aria-label": ariaLabel,
|
|
4160
|
+
"aria-current": active ? "page" : void 0,
|
|
4161
|
+
className: itemClassName,
|
|
4162
|
+
...menuItemDataAttributes,
|
|
4163
|
+
render: (domProps) => /* @__PURE__ */ React$1.createElement(Component, {
|
|
4164
|
+
...domProps,
|
|
4165
|
+
...rest
|
|
4166
|
+
}),
|
|
4167
|
+
onAction: handleAction
|
|
4168
|
+
}, /* @__PURE__ */ React$1.createElement(ListItem, {
|
|
4169
|
+
as: "div",
|
|
4170
|
+
role: "presentation",
|
|
4171
|
+
FORCE__className: Menu_module_default.menuItemListItemShell
|
|
4172
|
+
}, listItemContent));
|
|
4173
|
+
}
|
|
4174
|
+
if (Boolean(href) && !disabled) return /* @__PURE__ */ React$1.createElement(MenuItem, {
|
|
4175
|
+
href,
|
|
4176
|
+
isDisabled: disabled,
|
|
4177
|
+
textValue,
|
|
4178
|
+
"aria-label": ariaLabel,
|
|
4179
|
+
"aria-current": active ? "page" : void 0,
|
|
4180
|
+
className: itemClassName,
|
|
4181
|
+
...menuItemDataAttributes,
|
|
4182
|
+
onAction: handleAction
|
|
4183
|
+
}, /* @__PURE__ */ React$1.createElement(ListItem, {
|
|
4184
|
+
as: "div",
|
|
4185
|
+
role: "presentation",
|
|
4186
|
+
FORCE__className: Menu_module_default.menuItemListItemShell
|
|
4187
|
+
}, listItemContent));
|
|
4188
|
+
return /* @__PURE__ */ React$1.createElement(MenuItem, {
|
|
4189
|
+
isDisabled: disabled,
|
|
4190
|
+
textValue,
|
|
4191
|
+
"aria-label": ariaLabel,
|
|
4192
|
+
"aria-current": active ? "page" : void 0,
|
|
4193
|
+
className: itemClassName,
|
|
4194
|
+
...menuItemDataAttributes,
|
|
4195
|
+
onAction: handleAction
|
|
4196
|
+
}, /* @__PURE__ */ React$1.createElement(ListItem, {
|
|
4197
|
+
as: "div",
|
|
4198
|
+
role: "presentation",
|
|
4199
|
+
FORCE__className: Menu_module_default.menuItemListItemShell
|
|
4200
|
+
}, listItemContent));
|
|
4201
|
+
};
|
|
4202
|
+
MenuItem$1.displayName = "Menu.Item";
|
|
4203
|
+
const MenuDivider = ({ FORCE__className: classNameOverride }) => /* @__PURE__ */ React$1.createElement(Separator, { className: clsx(Menu_module_default.divider, classNameOverride) });
|
|
4204
|
+
MenuDivider.displayName = "Menu.Divider";
|
|
4205
|
+
/**
|
|
4206
|
+
* Menu.List — Layout only, no padding. Use inside a custom overlay when you are not using {@link Menu}.
|
|
4207
|
+
*/
|
|
4208
|
+
const MenuList = ({ children, FORCE__className: classNameOverride, ...rest }) => /* @__PURE__ */ React$1.createElement(MenuSectionIndentContext.Provider, { value: false }, /* @__PURE__ */ React$1.createElement(Menu$1, {
|
|
4209
|
+
className: clsx(Menu_module_default.list, classNameOverride),
|
|
4210
|
+
"aria-label": "Menu",
|
|
4211
|
+
...rest
|
|
4212
|
+
}, children));
|
|
4213
|
+
MenuList.displayName = "Menu.List";
|
|
4214
|
+
/**
|
|
4215
|
+
* Nested submenu for use inside {@link Menu}. Uses `AriaSubmenuTrigger` + `Popover` + `AriaMenu` so the flyout
|
|
4216
|
+
* positions to the side; the second child must not be `Menu` alone. Capra `Menu.Item` cannot be the trigger row.
|
|
4217
|
+
*/
|
|
4218
|
+
const MenuSubmenu = ({ label, children, itemHoverAppearance = "default", itemActiveAccentBar = true, itemActiveLabelSemibold = true, delay = 200, FORCE__className: classNameOverride }) => {
|
|
4219
|
+
const menuSessionId = React$1.useContext(MenuSessionContext);
|
|
4220
|
+
const textValue = typeof label === "string" ? label : typeof label === "number" ? String(label) : "Submenu";
|
|
4221
|
+
const ariaLabel = typeof label === "string" ? label : "Submenu";
|
|
4222
|
+
const listItemContent = /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(ListItem.Content, null, /* @__PURE__ */ React$1.createElement(ListItem.Label, null, /* @__PURE__ */ React$1.createElement("span", { className: Menu_module_default.menuItemLabel }, label))), /* @__PURE__ */ React$1.createElement(ListItem.Trailing, { FORCE__className: Menu_module_default.menuItemTrailingGutter }, /* @__PURE__ */ React$1.createElement("span", { className: Menu_module_default.menuItemTrailingGroup }, /* @__PURE__ */ React$1.createElement(ChevronRight, {
|
|
4223
|
+
key: "parent",
|
|
4224
|
+
size: "xs",
|
|
4225
|
+
"aria-hidden": true
|
|
4226
|
+
}))));
|
|
4227
|
+
const triggerClassName = clsx(Menu_module_default.menuItem, classNameOverride);
|
|
4228
|
+
return /* @__PURE__ */ React$1.createElement(SubmenuTrigger, { delay }, /* @__PURE__ */ React$1.createElement(MenuItem, {
|
|
4229
|
+
textValue,
|
|
4230
|
+
className: triggerClassName
|
|
4231
|
+
}, /* @__PURE__ */ React$1.createElement(ListItem, {
|
|
4232
|
+
as: "div",
|
|
4233
|
+
role: "presentation",
|
|
4234
|
+
FORCE__className: Menu_module_default.menuItemListItemShell
|
|
4235
|
+
}, listItemContent)), /* @__PURE__ */ React$1.createElement(PopoverSurface, {
|
|
4236
|
+
placement: "rightTop",
|
|
4237
|
+
isNonModal: true,
|
|
4238
|
+
shouldFlip: false,
|
|
4239
|
+
offsets: [0, 0],
|
|
4240
|
+
removeContentPadding: true
|
|
4241
|
+
}, /* @__PURE__ */ React$1.createElement("div", menuSessionId != null ? { [MENU_SESSION_DATA_ATTR]: menuSessionId } : {}, /* @__PURE__ */ React$1.createElement(Menu$1, {
|
|
4242
|
+
"aria-label": ariaLabel,
|
|
4243
|
+
className: Menu_module_default.menu,
|
|
4244
|
+
...getMenuPanelDataAttributes({
|
|
4245
|
+
panelPadding: "default",
|
|
4246
|
+
itemHoverAppearance,
|
|
4247
|
+
itemActiveAccentBar,
|
|
4248
|
+
itemActiveLabelSemibold
|
|
4249
|
+
})
|
|
4250
|
+
}, /* @__PURE__ */ React$1.createElement(MenuSectionIndentContext.Provider, { value: false }, children)))));
|
|
4251
|
+
};
|
|
4252
|
+
MenuSubmenu.displayName = "Menu.Submenu";
|
|
4253
|
+
/**
|
|
4254
|
+
* React Aria `useMenuTrigger` opens on `onPressStart` for mouse (it removes `useOverlayTrigger`'s
|
|
4255
|
+
* `onPress: toggle`), so a second pointer interaction on the trigger calls `open()` again instead of
|
|
4256
|
+
* closing. When the overlay is already open, close on pointer down in capture phase on this wrapper
|
|
4257
|
+
* and stop the event so the menu does not immediately re-open in the same gesture.
|
|
4258
|
+
*/
|
|
4259
|
+
const MenuRootTriggerPressable = React$1.forwardRef(function MenuRootTriggerPressable({ children, sessionId }, ref) {
|
|
4260
|
+
const overlayState = React$1.useContext(OverlayTriggerStateContext);
|
|
4261
|
+
return /* @__PURE__ */ React$1.createElement("div", {
|
|
4262
|
+
ref,
|
|
4263
|
+
className: Menu_module_default.menuTriggerSlot,
|
|
4264
|
+
[MENU_SESSION_DATA_ATTR]: sessionId,
|
|
4265
|
+
onPointerDownCapture: (e) => {
|
|
4266
|
+
if (overlayState?.isOpen) {
|
|
4267
|
+
overlayState.close();
|
|
4268
|
+
e.nativeEvent.stopImmediatePropagation();
|
|
4269
|
+
}
|
|
4270
|
+
}
|
|
4271
|
+
}, /* @__PURE__ */ React$1.createElement(Pressable, null, children));
|
|
4272
|
+
});
|
|
4273
|
+
MenuRootTriggerPressable.displayName = "MenuRootTriggerPressable";
|
|
4274
|
+
const Menu = ({ trigger, children, contentProps, open, onOpenChange, itemHoverAppearance = "default", itemActiveAccentBar = true, itemActiveLabelSemibold = true, panelPadding = "default", popoverOffset = 0, FORCE__className: classNameOverride }) => {
|
|
4275
|
+
const sessionId = React$1.useId();
|
|
4276
|
+
const menuPanel = /* @__PURE__ */ React$1.createElement(Menu$1, {
|
|
4277
|
+
className: clsx(Menu_module_default.menu, classNameOverride),
|
|
4278
|
+
"aria-label": "Menu",
|
|
4279
|
+
...getMenuPanelDataAttributes({
|
|
4280
|
+
panelPadding,
|
|
4281
|
+
itemHoverAppearance,
|
|
4282
|
+
itemActiveAccentBar,
|
|
4283
|
+
itemActiveLabelSemibold
|
|
4284
|
+
})
|
|
4285
|
+
}, /* @__PURE__ */ React$1.createElement(MenuSectionIndentContext.Provider, { value: false }, children));
|
|
4286
|
+
const wrappedPanel = contentProps ? /* @__PURE__ */ React$1.createElement("div", {
|
|
4287
|
+
...contentProps,
|
|
4288
|
+
[MENU_SESSION_DATA_ATTR]: sessionId,
|
|
4289
|
+
className: contentProps.className
|
|
4290
|
+
}, menuPanel) : /* @__PURE__ */ React$1.createElement("div", { [MENU_SESSION_DATA_ATTR]: sessionId }, menuPanel);
|
|
4291
|
+
return /* @__PURE__ */ React$1.createElement(MenuSessionContext.Provider, { value: sessionId }, /* @__PURE__ */ React$1.createElement(MenuTrigger, {
|
|
4292
|
+
isOpen: open,
|
|
4293
|
+
onOpenChange
|
|
4294
|
+
}, /* @__PURE__ */ React$1.createElement(MenuDismissOnOutsidePointer, { sessionId }), /* @__PURE__ */ React$1.createElement(MenuRootTriggerPressable, { sessionId }, trigger), /* @__PURE__ */ React$1.createElement(PopoverSurface, {
|
|
4295
|
+
isNonModal: true,
|
|
4296
|
+
placement: "bottomLeft",
|
|
4297
|
+
shouldFlip: false,
|
|
4298
|
+
offsets: [popoverOffset, 0],
|
|
4299
|
+
removeContentPadding: true
|
|
4300
|
+
}, wrappedPanel)));
|
|
4301
|
+
};
|
|
4302
|
+
Menu.displayName = "Menu";
|
|
4303
|
+
Menu.Item = MenuItem$1;
|
|
4304
|
+
Menu.Header = MenuHeader;
|
|
4305
|
+
Menu.Section = MenuSection$1;
|
|
4306
|
+
Menu.Divider = MenuDivider;
|
|
4307
|
+
Menu.List = MenuList;
|
|
4308
|
+
Menu.Submenu = MenuSubmenu;
|
|
4309
|
+
/**
|
|
4310
|
+
* Apply to react-aria `Menu` when composing `SubmenuTrigger` yourself; prefer {@link Menu.Submenu} for correct behavior.
|
|
4311
|
+
*/
|
|
4312
|
+
const submenuPanelClassName = Menu_module_default.menu;
|
|
4313
|
+
//#endregion
|
|
4314
|
+
//#region src/components/TabNav/TabNav.module.css
|
|
4315
|
+
var TabNav_module_default = {
|
|
4316
|
+
"dropdownIcon": "capra-TabNav-module-VtoGYa-dropdownIcon",
|
|
4317
|
+
"extraContent": "capra-TabNav-module-VtoGYa-extraContent",
|
|
4318
|
+
"indentSpacer": "capra-TabNav-module-VtoGYa-indentSpacer",
|
|
4319
|
+
"panel": "capra-TabNav-module-VtoGYa-panel",
|
|
4320
|
+
"root": "capra-TabNav-module-VtoGYa-root",
|
|
4321
|
+
"subMenu": "capra-TabNav-module-VtoGYa-subMenu",
|
|
4322
|
+
"subMenuItem": "capra-TabNav-module-VtoGYa-subMenuItem",
|
|
4323
|
+
"subMenuItemActive": "capra-TabNav-module-VtoGYa-subMenuItemActive",
|
|
4324
|
+
"subTab": "capra-TabNav-module-VtoGYa-subTab",
|
|
4325
|
+
"subTabList": "capra-TabNav-module-VtoGYa-subTabList",
|
|
4326
|
+
"subTabListItem": "capra-TabNav-module-VtoGYa-subTabListItem",
|
|
4327
|
+
"tab": "capra-TabNav-module-VtoGYa-tab",
|
|
4328
|
+
"tabBar": "capra-TabNav-module-VtoGYa-tabBar",
|
|
4329
|
+
"tabGroup": "capra-TabNav-module-VtoGYa-tabGroup",
|
|
4330
|
+
"tabIcon": "capra-TabNav-module-VtoGYa-tabIcon",
|
|
4331
|
+
"tabLabel": "capra-TabNav-module-VtoGYa-tabLabel",
|
|
4332
|
+
"tabList": "capra-TabNav-module-VtoGYa-tabList"
|
|
4333
|
+
};
|
|
4334
|
+
//#endregion
|
|
4335
|
+
//#region src/components/TabNav/TabNav.tsx
|
|
4336
|
+
/** Separator for compound keys (mainKey::subKey) when using subItems. */
|
|
4337
|
+
const SUB_KEY_SEP = "::";
|
|
4338
|
+
/** Delay before closing a subnav on pointer leave (hover), so users can move into the menu. */
|
|
4339
|
+
const HOVER_CLOSE_DELAY_MS = 150;
|
|
4340
|
+
function optionalAriaLabelProps(source) {
|
|
4341
|
+
const v = source["aria-label"];
|
|
4342
|
+
return v != null && v !== "" ? { "aria-label": v } : {};
|
|
4343
|
+
}
|
|
4344
|
+
/**
|
|
4345
|
+
* TabNav provides a horizontal or vertical navigation styled as tabs.
|
|
4346
|
+
* Tab items are links that redirect to URLs. With `subItems`, horizontal tabs open a dropdown menu; vertical tabs
|
|
4347
|
+
* use an inline indented list (Tab Nav | Vertical in Figma).
|
|
4348
|
+
*/
|
|
4349
|
+
const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", centered = false, tabBarExtraSlot, wrap = true, FORCE__className: classNameOverride, "aria-label": ariaLabel = "Navigation", ...props }) => {
|
|
4350
|
+
const [subMenuOpen, setSubMenuOpen] = React$1.useState({});
|
|
4351
|
+
const hoverCloseTimeoutRef = React$1.useRef(null);
|
|
4352
|
+
const pointerDownOnTriggerRef = React$1.useRef(false);
|
|
4353
|
+
const openSubMenu = React$1.useCallback((key) => {
|
|
4354
|
+
if (hoverCloseTimeoutRef.current) {
|
|
4355
|
+
clearTimeout(hoverCloseTimeoutRef.current);
|
|
4356
|
+
hoverCloseTimeoutRef.current = null;
|
|
4357
|
+
}
|
|
4358
|
+
setSubMenuOpen((prev) => {
|
|
4359
|
+
const next = {
|
|
4360
|
+
...prev,
|
|
4361
|
+
[key]: true
|
|
4362
|
+
};
|
|
4363
|
+
Object.keys(next).forEach((k) => {
|
|
4364
|
+
if (k !== key) next[k] = false;
|
|
4365
|
+
});
|
|
4366
|
+
return next;
|
|
4367
|
+
});
|
|
4368
|
+
}, []);
|
|
4369
|
+
const closeSubMenu = React$1.useCallback((key) => {
|
|
4370
|
+
if (hoverCloseTimeoutRef.current) {
|
|
4371
|
+
clearTimeout(hoverCloseTimeoutRef.current);
|
|
4372
|
+
hoverCloseTimeoutRef.current = null;
|
|
4373
|
+
}
|
|
4374
|
+
setSubMenuOpen((prev) => ({
|
|
4375
|
+
...prev,
|
|
4376
|
+
[key]: false
|
|
4377
|
+
}));
|
|
4378
|
+
}, []);
|
|
4379
|
+
const scheduleCloseSubMenu = React$1.useCallback((key) => {
|
|
4380
|
+
if (hoverCloseTimeoutRef.current) clearTimeout(hoverCloseTimeoutRef.current);
|
|
4381
|
+
hoverCloseTimeoutRef.current = setTimeout(() => {
|
|
4382
|
+
hoverCloseTimeoutRef.current = null;
|
|
4383
|
+
setSubMenuOpen((prev) => ({
|
|
4384
|
+
...prev,
|
|
4385
|
+
[key]: false
|
|
4386
|
+
}));
|
|
4387
|
+
}, HOVER_CLOSE_DELAY_MS);
|
|
4388
|
+
}, []);
|
|
4389
|
+
const cancelScheduledClose = React$1.useCallback(() => {
|
|
4390
|
+
if (hoverCloseTimeoutRef.current) {
|
|
4391
|
+
clearTimeout(hoverCloseTimeoutRef.current);
|
|
4392
|
+
hoverCloseTimeoutRef.current = null;
|
|
4393
|
+
}
|
|
4394
|
+
}, []);
|
|
4395
|
+
const [activeMainKey, activeSubKey] = React$1.useMemo(() => {
|
|
4396
|
+
if (!activeKey) return ["", ""];
|
|
4397
|
+
const idx = activeKey.indexOf(SUB_KEY_SEP);
|
|
4398
|
+
if (idx >= 0) return [activeKey.slice(0, idx), activeKey.slice(idx + 2)];
|
|
4399
|
+
return [String(activeKey), ""];
|
|
4400
|
+
}, [activeKey]);
|
|
4401
|
+
/** Expand vertical groups when the active route targets a sub-item. */
|
|
4402
|
+
React$1.useEffect(() => {
|
|
4403
|
+
if (!activeSubKey) return;
|
|
4404
|
+
items.forEach((item) => {
|
|
4405
|
+
if (item.subItems?.some((s) => s.key === activeSubKey)) setSubMenuOpen((prev) => ({
|
|
4406
|
+
...prev,
|
|
4407
|
+
[item.key]: true
|
|
4408
|
+
}));
|
|
4409
|
+
});
|
|
4410
|
+
}, [activeSubKey, items]);
|
|
4411
|
+
const handleTabClick = (key, event) => {
|
|
4412
|
+
const item = items.find((i) => i.key === key);
|
|
4413
|
+
if (item?.disabled) {
|
|
4414
|
+
event.preventDefault();
|
|
4415
|
+
return;
|
|
4416
|
+
}
|
|
4417
|
+
if (item?.subItems?.length) return;
|
|
4418
|
+
onTabClick?.(key, event);
|
|
4419
|
+
};
|
|
4420
|
+
const handleKeyDown = (event, key) => {
|
|
4421
|
+
const itemIndex = items.findIndex((i) => i.key === key);
|
|
4422
|
+
if (itemIndex === -1) return;
|
|
4423
|
+
let nextIndex = itemIndex;
|
|
4424
|
+
const isHorizontal = tabPlacement === "horizontal";
|
|
4425
|
+
const isVertical = tabPlacement === "vertical";
|
|
4426
|
+
if (isHorizontal) {
|
|
4427
|
+
if (event.key === "ArrowLeft") {
|
|
4428
|
+
event.preventDefault();
|
|
4429
|
+
nextIndex = Math.max(0, itemIndex - 1);
|
|
4430
|
+
} else if (event.key === "ArrowRight") {
|
|
4431
|
+
event.preventDefault();
|
|
4432
|
+
nextIndex = Math.min(items.length - 1, itemIndex + 1);
|
|
4433
|
+
}
|
|
4434
|
+
} else if (isVertical) {
|
|
4435
|
+
if (event.key === "ArrowUp") {
|
|
4436
|
+
event.preventDefault();
|
|
4437
|
+
nextIndex = Math.max(0, itemIndex - 1);
|
|
4438
|
+
} else if (event.key === "ArrowDown") {
|
|
4439
|
+
event.preventDefault();
|
|
4440
|
+
nextIndex = Math.min(items.length - 1, itemIndex + 1);
|
|
4441
|
+
}
|
|
4442
|
+
}
|
|
4443
|
+
if (event.key === "Home") {
|
|
4444
|
+
event.preventDefault();
|
|
4445
|
+
nextIndex = 0;
|
|
4446
|
+
} else if (event.key === "End") {
|
|
4447
|
+
event.preventDefault();
|
|
4448
|
+
nextIndex = items.length - 1;
|
|
4449
|
+
}
|
|
4450
|
+
if (nextIndex !== itemIndex) {
|
|
4451
|
+
const nextItem = items[nextIndex];
|
|
4452
|
+
if (nextItem && !nextItem.disabled) document.getElementById(`tabnav-${nextItem.key}`)?.focus();
|
|
4453
|
+
}
|
|
4454
|
+
};
|
|
4455
|
+
const renderTabContent = (item) => {
|
|
4456
|
+
const showDropdownChevron = Boolean(item.subItems?.length || item.variant === "dropdown");
|
|
4457
|
+
return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, item.indent && /* @__PURE__ */ React$1.createElement("span", {
|
|
4458
|
+
className: TabNav_module_default.indentSpacer,
|
|
4459
|
+
"aria-hidden": "true"
|
|
4460
|
+
}), item.icon && /* @__PURE__ */ React$1.createElement("span", {
|
|
4461
|
+
className: TabNav_module_default.tabIcon,
|
|
4462
|
+
"aria-hidden": "true"
|
|
4463
|
+
}, item.icon), /* @__PURE__ */ React$1.createElement("span", { className: TabNav_module_default.tabLabel }, item.name), showDropdownChevron && /* @__PURE__ */ React$1.createElement("span", {
|
|
4464
|
+
className: TabNav_module_default.dropdownIcon,
|
|
4465
|
+
"aria-hidden": "true"
|
|
4466
|
+
}, /* @__PURE__ */ React$1.createElement(ChevronDown, { size: "xs" })));
|
|
4467
|
+
};
|
|
4468
|
+
return /* @__PURE__ */ React$1.createElement("div", {
|
|
4469
|
+
...props,
|
|
4470
|
+
className: clsx(TabNav_module_default.root, classNameOverride),
|
|
4471
|
+
"data-placement": tabPlacement,
|
|
4472
|
+
"data-centered": centered || void 0,
|
|
4473
|
+
"data-wrap": wrap ? "wrap" : "nowrap"
|
|
4474
|
+
}, /* @__PURE__ */ React$1.createElement("nav", {
|
|
4475
|
+
role: "navigation",
|
|
4476
|
+
"aria-label": ariaLabel,
|
|
4477
|
+
className: TabNav_module_default.tabBar
|
|
4478
|
+
}, /* @__PURE__ */ React$1.createElement("div", {
|
|
4479
|
+
className: TabNav_module_default.tabList,
|
|
4480
|
+
"aria-orientation": tabPlacement === "horizontal" ? "horizontal" : "vertical"
|
|
4481
|
+
}, items.map((item) => {
|
|
4482
|
+
const hasSubItems = Boolean(item.subItems?.length);
|
|
4483
|
+
const showDropdown = hasSubItems || item.variant === "dropdown";
|
|
4484
|
+
/** Accent “active” tab styling: current route only (not merely flyout open — open + non-route stays grey). */
|
|
4485
|
+
const isRouteActiveTab = item.key === activeMainKey;
|
|
4486
|
+
const isSubMenuOpen = hasSubItems && Boolean(subMenuOpen[item.key]);
|
|
4487
|
+
/** Only one `aria-current="page"` in the nav: parent tab when no child route; sub-items set it when a child is current. */
|
|
4488
|
+
const ariaCurrentPage = item.key === activeMainKey && (!hasSubItems || !activeSubKey);
|
|
4489
|
+
const commonTabProps = {
|
|
4490
|
+
"data-tab-key": item.key,
|
|
4491
|
+
"data-indent": item.indent || void 0,
|
|
4492
|
+
"data-variant": showDropdown ? "dropdown" : item.variant ?? "default",
|
|
4493
|
+
"data-active": isRouteActiveTab || void 0,
|
|
4494
|
+
"data-submenu-open": tabPlacement === "horizontal" && isSubMenuOpen && !isRouteActiveTab ? true : void 0,
|
|
4495
|
+
"data-disabled": item.disabled || void 0,
|
|
4496
|
+
id: `tabnav-${item.key}`,
|
|
4497
|
+
className: TabNav_module_default.tab,
|
|
4498
|
+
...optionalAriaLabelProps(item)
|
|
4499
|
+
};
|
|
4500
|
+
if (hasSubItems && tabPlacement === "vertical") {
|
|
4501
|
+
const expanded = Boolean(subMenuOpen[item.key]);
|
|
4502
|
+
const subListId = `tabnav-${item.key}-sublist`;
|
|
4503
|
+
return /* @__PURE__ */ React$1.createElement("div", {
|
|
4504
|
+
key: item.key,
|
|
4505
|
+
className: TabNav_module_default.tabGroup
|
|
4506
|
+
}, /* @__PURE__ */ React$1.createElement("button", {
|
|
4507
|
+
type: "button",
|
|
4508
|
+
...commonTabProps,
|
|
4509
|
+
"aria-expanded": expanded,
|
|
4510
|
+
"aria-haspopup": "menu",
|
|
4511
|
+
"aria-controls": expanded ? subListId : void 0,
|
|
4512
|
+
"data-expanded": expanded,
|
|
4513
|
+
"aria-current": ariaCurrentPage ? "page" : void 0,
|
|
4514
|
+
disabled: item.disabled,
|
|
4515
|
+
onClick: () => setSubMenuOpen((prev) => ({
|
|
4516
|
+
...prev,
|
|
4517
|
+
[item.key]: !prev[item.key]
|
|
4518
|
+
})),
|
|
4519
|
+
onKeyDown: (e) => handleKeyDown(e, item.key)
|
|
4520
|
+
}, renderTabContent(item)), expanded && /* @__PURE__ */ React$1.createElement("ul", {
|
|
4521
|
+
id: subListId,
|
|
4522
|
+
className: TabNav_module_default.subTabList
|
|
4523
|
+
}, item.subItems.map((sub) => {
|
|
4524
|
+
const subActive = activeMainKey === item.key && activeSubKey === sub.key;
|
|
4525
|
+
const compoundKey = `${item.key}${SUB_KEY_SEP}${sub.key}`;
|
|
4526
|
+
const subCommon = {
|
|
4527
|
+
"data-tab-key": compoundKey,
|
|
4528
|
+
"data-indent": true,
|
|
4529
|
+
"data-variant": "default",
|
|
4530
|
+
"data-active": subActive || void 0,
|
|
4531
|
+
"data-disabled": sub.disabled || void 0,
|
|
4532
|
+
id: `tabnav-${item.key}-${sub.key}`,
|
|
4533
|
+
className: clsx(TabNav_module_default.tab, TabNav_module_default.subTab),
|
|
4534
|
+
"aria-current": subActive ? "page" : void 0
|
|
4535
|
+
};
|
|
4536
|
+
if (sub.href && sub.disabled) return /* @__PURE__ */ React$1.createElement("li", {
|
|
4537
|
+
key: sub.key,
|
|
4538
|
+
className: TabNav_module_default.subTabListItem
|
|
4539
|
+
}, /* @__PURE__ */ React$1.createElement("a", {
|
|
4540
|
+
...subCommon,
|
|
4541
|
+
...optionalAriaLabelProps(sub),
|
|
4542
|
+
href: sub.href,
|
|
4543
|
+
"aria-disabled": true,
|
|
4544
|
+
tabIndex: -1,
|
|
4545
|
+
onClick: (e) => e.preventDefault()
|
|
4546
|
+
}, /* @__PURE__ */ React$1.createElement("span", {
|
|
4547
|
+
className: TabNav_module_default.indentSpacer,
|
|
4548
|
+
"aria-hidden": "true"
|
|
4549
|
+
}), /* @__PURE__ */ React$1.createElement("span", { className: TabNav_module_default.tabLabel }, sub.name)));
|
|
4550
|
+
if (sub.href) return /* @__PURE__ */ React$1.createElement("li", {
|
|
4551
|
+
key: sub.key,
|
|
4552
|
+
className: TabNav_module_default.subTabListItem
|
|
4553
|
+
}, /* @__PURE__ */ React$1.createElement("a", {
|
|
4554
|
+
...subCommon,
|
|
4555
|
+
...optionalAriaLabelProps(sub),
|
|
4556
|
+
href: sub.href,
|
|
4557
|
+
onClick: (e) => {
|
|
4558
|
+
sub.onClick?.(e);
|
|
4559
|
+
onTabClick?.(compoundKey, e);
|
|
4560
|
+
},
|
|
4561
|
+
onKeyDown: (e) => handleKeyDown(e, item.key)
|
|
4562
|
+
}, /* @__PURE__ */ React$1.createElement("span", {
|
|
4563
|
+
className: TabNav_module_default.indentSpacer,
|
|
4564
|
+
"aria-hidden": "true"
|
|
4565
|
+
}), /* @__PURE__ */ React$1.createElement("span", { className: TabNav_module_default.tabLabel }, sub.name)));
|
|
4566
|
+
return /* @__PURE__ */ React$1.createElement("li", {
|
|
4567
|
+
key: sub.key,
|
|
4568
|
+
className: TabNav_module_default.subTabListItem
|
|
4569
|
+
}, /* @__PURE__ */ React$1.createElement("span", {
|
|
4570
|
+
...subCommon,
|
|
4571
|
+
...optionalAriaLabelProps(sub),
|
|
4572
|
+
role: "link",
|
|
4573
|
+
"aria-disabled": sub.disabled,
|
|
4574
|
+
tabIndex: sub.disabled ? -1 : 0,
|
|
4575
|
+
onKeyDown: (e) => {
|
|
4576
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
4577
|
+
e.preventDefault();
|
|
4578
|
+
sub.onClick?.(e);
|
|
4579
|
+
onTabClick?.(compoundKey, e);
|
|
4580
|
+
} else handleKeyDown(e, item.key);
|
|
4581
|
+
}
|
|
4582
|
+
}, /* @__PURE__ */ React$1.createElement("span", {
|
|
4583
|
+
className: TabNav_module_default.indentSpacer,
|
|
4584
|
+
"aria-hidden": "true"
|
|
4585
|
+
}), /* @__PURE__ */ React$1.createElement("span", { className: TabNav_module_default.tabLabel }, sub.name)));
|
|
4586
|
+
})));
|
|
4587
|
+
}
|
|
4588
|
+
if (hasSubItems) {
|
|
4589
|
+
const trigger = /* @__PURE__ */ React$1.createElement("button", {
|
|
4590
|
+
type: "button",
|
|
4591
|
+
...commonTabProps,
|
|
4592
|
+
"aria-current": ariaCurrentPage ? "page" : void 0,
|
|
4593
|
+
disabled: item.disabled,
|
|
4594
|
+
onMouseEnter: () => openSubMenu(item.key),
|
|
4595
|
+
onMouseLeave: () => scheduleCloseSubMenu(item.key),
|
|
4596
|
+
onPointerDown: () => {
|
|
4597
|
+
pointerDownOnTriggerRef.current = true;
|
|
4598
|
+
},
|
|
4599
|
+
onPointerUp: () => {
|
|
4600
|
+
pointerDownOnTriggerRef.current = false;
|
|
4601
|
+
},
|
|
4602
|
+
onFocus: () => {
|
|
4603
|
+
if (!pointerDownOnTriggerRef.current) openSubMenu(item.key);
|
|
4604
|
+
},
|
|
4605
|
+
onKeyDown: (e) => handleKeyDown(e, item.key)
|
|
4606
|
+
}, renderTabContent(item));
|
|
4607
|
+
return /* @__PURE__ */ React$1.createElement(Menu, {
|
|
4608
|
+
key: item.key,
|
|
4609
|
+
trigger,
|
|
4610
|
+
itemHoverAppearance: "accent",
|
|
4611
|
+
itemActiveAccentBar: false,
|
|
4612
|
+
itemActiveLabelSemibold: false,
|
|
4613
|
+
panelPadding: "none",
|
|
4614
|
+
popoverOffset: 1,
|
|
4615
|
+
open: subMenuOpen[item.key],
|
|
4616
|
+
onOpenChange: (open) => setSubMenuOpen((prev) => ({
|
|
4617
|
+
...prev,
|
|
4618
|
+
[item.key]: open
|
|
4619
|
+
})),
|
|
4620
|
+
contentProps: {
|
|
4621
|
+
onMouseEnter: () => {
|
|
4622
|
+
cancelScheduledClose();
|
|
4623
|
+
openSubMenu(item.key);
|
|
4624
|
+
},
|
|
4625
|
+
onMouseLeave: () => closeSubMenu(item.key)
|
|
4626
|
+
}
|
|
4627
|
+
}, item.subItems.map((sub) => {
|
|
4628
|
+
const closeMenu = () => setSubMenuOpen((prev) => ({
|
|
4629
|
+
...prev,
|
|
4630
|
+
[item.key]: false
|
|
4631
|
+
}));
|
|
4632
|
+
return /* @__PURE__ */ React$1.createElement(Menu.Item, {
|
|
4633
|
+
key: sub.key,
|
|
4634
|
+
label: sub.name,
|
|
4635
|
+
ariaLabel: sub["aria-label"],
|
|
4636
|
+
href: sub.href,
|
|
4637
|
+
disabled: sub.disabled,
|
|
4638
|
+
active: activeSubKey === sub.key,
|
|
4639
|
+
onClick: (e) => {
|
|
4640
|
+
sub.onClick?.(e);
|
|
4641
|
+
closeMenu();
|
|
4642
|
+
}
|
|
4643
|
+
});
|
|
4644
|
+
}));
|
|
4645
|
+
}
|
|
4646
|
+
if (item.href && !item.disabled) return /* @__PURE__ */ React$1.createElement("a", {
|
|
4647
|
+
key: item.key,
|
|
4648
|
+
...commonTabProps,
|
|
4649
|
+
href: item.href,
|
|
4650
|
+
"aria-current": ariaCurrentPage ? "page" : void 0,
|
|
4651
|
+
onClick: (e) => handleTabClick(item.key, e),
|
|
4652
|
+
onKeyDown: (e) => handleKeyDown(e, item.key)
|
|
4653
|
+
}, renderTabContent(item));
|
|
4654
|
+
return /* @__PURE__ */ React$1.createElement("span", {
|
|
4655
|
+
key: item.key,
|
|
4656
|
+
...commonTabProps,
|
|
4657
|
+
role: "link",
|
|
4658
|
+
"aria-disabled": item.disabled,
|
|
4659
|
+
"aria-current": ariaCurrentPage ? "page" : void 0,
|
|
4660
|
+
tabIndex: 0,
|
|
4661
|
+
onKeyDown: (e) => {
|
|
4662
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
4663
|
+
e.preventDefault();
|
|
4664
|
+
handleTabClick(item.key, e);
|
|
4665
|
+
} else handleKeyDown(e, item.key);
|
|
4666
|
+
}
|
|
4667
|
+
}, renderTabContent(item));
|
|
4668
|
+
})), tabBarExtraSlot && /* @__PURE__ */ React$1.createElement("div", { className: TabNav_module_default.extraContent }, tabBarExtraSlot)));
|
|
4669
|
+
};
|
|
4670
|
+
TabNav.displayName = "TabNav";
|
|
4671
|
+
//#endregion
|
|
4672
|
+
//#region src/components/TopNav/TopNav.module.css
|
|
4673
|
+
var TopNav_module_default = {
|
|
4674
|
+
"center": "capra-TopNav-module--oPinG-center",
|
|
4675
|
+
"end": "capra-TopNav-module--oPinG-end",
|
|
4676
|
+
"root": "capra-TopNav-module--oPinG-root",
|
|
4677
|
+
"start": "capra-TopNav-module--oPinG-start"
|
|
4678
|
+
};
|
|
4679
|
+
//#endregion
|
|
4680
|
+
//#region src/components/TopNav/TopNav.tsx
|
|
4681
|
+
const Start = ({ children, FORCE__className: classNameOverride, ...props }) => /* @__PURE__ */ React$1.createElement("div", {
|
|
4682
|
+
"data-slot": "top-nav-start",
|
|
4683
|
+
...props,
|
|
4684
|
+
className: clsx(TopNav_module_default.start, classNameOverride)
|
|
4685
|
+
}, children);
|
|
4686
|
+
Start.displayName = "TopNav.Start";
|
|
4687
|
+
const Center = ({ children, FORCE__className: classNameOverride, ...props }) => /* @__PURE__ */ React$1.createElement("div", {
|
|
4688
|
+
"data-slot": "top-nav-center",
|
|
4689
|
+
...props,
|
|
4690
|
+
className: clsx(TopNav_module_default.center, classNameOverride)
|
|
4691
|
+
}, children);
|
|
4692
|
+
Center.displayName = "TopNav.Center";
|
|
4693
|
+
const End = ({ children, FORCE__className: classNameOverride, ...props }) => /* @__PURE__ */ React$1.createElement("div", {
|
|
4694
|
+
"data-slot": "top-nav-end",
|
|
4695
|
+
...props,
|
|
4696
|
+
className: clsx(TopNav_module_default.end, classNameOverride)
|
|
4697
|
+
}, children);
|
|
4698
|
+
End.displayName = "TopNav.End";
|
|
4699
|
+
function TopNavRoot({ children, FORCE__className: classNameOverride, ...props }, ref) {
|
|
4700
|
+
return /* @__PURE__ */ React$1.createElement("header", {
|
|
4701
|
+
ref,
|
|
4702
|
+
"data-slot": "top-nav-root",
|
|
4703
|
+
...props,
|
|
4704
|
+
className: clsx(TopNav_module_default.root, classNameOverride)
|
|
4705
|
+
}, children);
|
|
4706
|
+
}
|
|
4707
|
+
const TopNavWithRef = fixedForwardRef(TopNavRoot);
|
|
4708
|
+
/**
|
|
4709
|
+
* Horizontal top navigation shell (Figma: **Cribl Header**). Uses a **three-column grid** so
|
|
4710
|
+
* `TopNav.Center` stays at the true horizontal center of the header. Slots use fixed grid columns
|
|
4711
|
+
* (`Start` → 1, `Center` → 2, `End` → 3); omit `Center` when unused—the middle track collapses.
|
|
4712
|
+
* Use **Center** for environment banners, not **End** utilities. Slot content is provided by the app.
|
|
4713
|
+
*/
|
|
4714
|
+
const TopNav = Object.assign(TopNavWithRef, {
|
|
4715
|
+
Start,
|
|
4716
|
+
Center,
|
|
4717
|
+
End
|
|
4718
|
+
});
|
|
4719
|
+
//#endregion
|
|
4720
|
+
//#region src/components/Tooltip/Tooltip.module.css
|
|
4721
|
+
var Tooltip_module_default = {
|
|
4722
|
+
"arrow": "capra-Tooltip-module-IEiZ6a-arrow",
|
|
4723
|
+
"base": "capra-Tooltip-module-IEiZ6a-base",
|
|
4724
|
+
"tooltipLayout": "capra-Tooltip-module-IEiZ6a-tooltipLayout"
|
|
4725
|
+
};
|
|
4726
|
+
//#endregion
|
|
4727
|
+
//#region src/components/Tooltip/Tooltip.tsx
|
|
4728
|
+
/**
|
|
4729
|
+
* A component to display additional information when hovering or focusing on an interactive element.
|
|
4730
|
+
*/
|
|
4731
|
+
function Tooltip({ children, title, shortcut, getContainer, placement = "bottom", isDisabled = false, FORCE__className: classNameOverride, ...props }) {
|
|
4732
|
+
return /* @__PURE__ */ React$1.createElement(TooltipTrigger, {
|
|
4733
|
+
isDisabled,
|
|
4734
|
+
shouldCloseOnPress: false
|
|
4735
|
+
}, children, /* @__PURE__ */ React$1.createElement(UNSAFE_PortalProvider, { getContainer }, /* @__PURE__ */ React$1.createElement(Tooltip$1, {
|
|
4736
|
+
...props,
|
|
4737
|
+
placement,
|
|
4738
|
+
className: clsx(Tooltip_module_default.base, classNameOverride),
|
|
4739
|
+
offset: 8
|
|
4740
|
+
}, /* @__PURE__ */ React$1.createElement("span", { className: Tooltip_module_default.tooltipLayout }, /* @__PURE__ */ React$1.createElement(Text, {
|
|
4741
|
+
variant: "body-sm-normal",
|
|
4742
|
+
color: "inherit"
|
|
4743
|
+
}, title), shortcut ? /* @__PURE__ */ React$1.createElement(Text, {
|
|
4744
|
+
variant: "body-sm-normal",
|
|
4745
|
+
color: "inherit"
|
|
4746
|
+
}, shortcut) : null), /* @__PURE__ */ React$1.createElement(OverlayArrow, null, /* @__PURE__ */ React$1.createElement(ArrowSvg, null)))));
|
|
4747
|
+
}
|
|
4748
|
+
/**
|
|
4749
|
+
* Wraps a custom or third-party trigger so {@link Tooltip} can attach hover and focus behavior.
|
|
4750
|
+
* The child should expose an appropriate role or use semantic HTML, and custom components should
|
|
4751
|
+
* `forwardRef` and spread props onto a DOM element.
|
|
4752
|
+
*/
|
|
4753
|
+
const CustomTooltipTrigger = React$1.forwardRef(function CustomTooltipTrigger({ children }, ref) {
|
|
4754
|
+
return /* @__PURE__ */ React$1.createElement(Focusable, { ref }, children);
|
|
4755
|
+
});
|
|
4756
|
+
function ArrowSvg() {
|
|
4757
|
+
return /* @__PURE__ */ React$1.createElement("svg", {
|
|
4758
|
+
width: 8,
|
|
4759
|
+
height: 8,
|
|
4760
|
+
viewBox: "0 0 8 8",
|
|
4761
|
+
className: Tooltip_module_default.arrow
|
|
4762
|
+
}, /* @__PURE__ */ React$1.createElement("path", {
|
|
4763
|
+
d: "M0 0 L4 4 L8 0",
|
|
4764
|
+
fill: "currentColor"
|
|
4765
|
+
}));
|
|
4766
|
+
}
|
|
4767
|
+
//#endregion
|
|
4768
|
+
export { Alert, Anchor, AutocompleteField, Badge, BadgeLayout, Breadcrumb, Breadcrumbs, Button, ButtonLink, Card, Checkbox, Collapse, CustomTooltipTrigger, DatePickerField, DateRangePickerField, Divider, Drawer, EmptyState, IconButton, InputRow, Link, ListItem, Menu, Modal, NumberField, Pagination, PasswordField, Pill, Popover, Radio, RadioGroup, RadioTile, Ribbon, RouterProvider, SKELETON_SIZE, SKELETON_SIZE_TOKENS, Skeleton, SkeletonGroup, Spinner, Switch, TabNav, Tag, Text, TextArea, TextField, Toast, Tooltip, TopNav, VerticalNavigation, VisuallyHidden, submenuPanelClassName, tagColors };
|