@astryxdesign/core 0.4.4 → 0.4.5-canary.1fdecb1
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/CHANGELOG.md +40 -0
- package/dist/BottomSheet/BottomSheet.d.ts +11 -2
- package/dist/BottomSheet/BottomSheet.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheet.js +4 -0
- package/dist/BottomSheet/BottomSheetPanel.d.ts +5 -2
- package/dist/BottomSheet/BottomSheetPanel.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetPanel.js +65 -15
- package/dist/BottomSheet/index.d.ts +1 -1
- package/dist/BottomSheet/index.d.ts.map +1 -1
- package/dist/BottomSheet/snapOffsets.d.ts +57 -20
- package/dist/BottomSheet/snapOffsets.d.ts.map +1 -1
- package/dist/BottomSheet/snapOffsets.js +106 -30
- package/dist/BottomSheet/useSheetGestures.d.ts +13 -8
- package/dist/BottomSheet/useSheetGestures.d.ts.map +1 -1
- package/dist/BottomSheet/useSheetGestures.js +160 -64
- package/dist/Calendar/Calendar.d.ts +17 -0
- package/dist/Calendar/Calendar.d.ts.map +1 -1
- package/dist/Calendar/Calendar.js +34 -3
- package/dist/Calendar/getStandaloneShortWeekdayNames.d.ts +14 -0
- package/dist/Calendar/getStandaloneShortWeekdayNames.d.ts.map +1 -0
- package/dist/Calendar/getStandaloneShortWeekdayNames.js +26 -0
- package/dist/Calendar/hooks/useCalendarConstraints.d.ts +22 -1
- package/dist/Calendar/hooks/useCalendarConstraints.d.ts.map +1 -1
- package/dist/Calendar/hooks/useCalendarConstraints.js +26 -4
- package/dist/Calendar/hooks/useCalendarDays.d.ts.map +1 -1
- package/dist/Calendar/hooks/useCalendarDays.js +14 -10
- package/dist/Calendar/standaloneShortWeekdayNames.generated.d.ts +47 -0
- package/dist/Calendar/standaloneShortWeekdayNames.generated.d.ts.map +1 -0
- package/dist/Calendar/standaloneShortWeekdayNames.generated.js +40 -0
- package/dist/Center/Center.d.ts +23 -1
- package/dist/Center/Center.d.ts.map +1 -1
- package/dist/Center/Center.js +12 -6
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +9 -0
- package/dist/ComplexSelector/ComplexSelector.d.ts.map +1 -1
- package/dist/ComplexSelector/ComplexSelector.js +6 -1
- package/dist/DateInput/DateInput.d.ts.map +1 -1
- package/dist/DateInput/DateInput.js +6 -1
- package/dist/DateRangeInput/DateRangeInput.d.ts +23 -1
- package/dist/DateRangeInput/DateRangeInput.d.ts.map +1 -1
- package/dist/DateRangeInput/DateRangeInput.js +38 -3
- package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.js +7 -2
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +3 -3
- package/dist/Field/FieldLabel.d.ts +2 -1
- package/dist/Field/FieldLabel.d.ts.map +1 -1
- package/dist/Field/FieldLabel.js +21 -3
- package/dist/Field/InputClearButton.d.ts +2 -1
- package/dist/Field/InputClearButton.d.ts.map +1 -1
- package/dist/Field/InputClearButton.js +6 -1
- package/dist/FormLayout/FormLayout.d.ts +24 -2
- package/dist/FormLayout/FormLayout.d.ts.map +1 -1
- package/dist/FormLayout/FormLayout.js +7 -2
- package/dist/FormLayout/FormLayoutContext.d.ts +15 -2
- package/dist/FormLayout/FormLayoutContext.d.ts.map +1 -1
- package/dist/FormLayout/FormLayoutContext.js +19 -4
- package/dist/FormLayout/index.d.ts +1 -1
- package/dist/FormLayout/index.d.ts.map +1 -1
- package/dist/Item/Item.d.ts +9 -1
- package/dist/Item/Item.d.ts.map +1 -1
- package/dist/Item/Item.js +45 -7
- package/dist/Layer/useLayer.d.ts.map +1 -1
- package/dist/Layer/useLayer.js +3 -2
- package/dist/Layout/container.stylex.d.ts +4 -2
- package/dist/Layout/container.stylex.d.ts.map +1 -1
- package/dist/Layout/container.stylex.js +19 -11
- package/dist/Layout/index.d.ts +1 -0
- package/dist/Layout/index.d.ts.map +1 -1
- package/dist/Layout/index.js +4 -0
- package/dist/Layout/padding.stylex.d.ts +315 -12
- package/dist/Layout/padding.stylex.d.ts.map +1 -1
- package/dist/Layout/padding.stylex.js +389 -12
- package/dist/Lightbox/Lightbox.d.ts.map +1 -1
- package/dist/Lightbox/Lightbox.js +2 -1
- package/dist/Markdown/Markdown.d.ts +8 -0
- package/dist/Markdown/Markdown.d.ts.map +1 -1
- package/dist/Markdown/Markdown.js +31 -3
- package/dist/Markdown/parser.d.ts +14 -2
- package/dist/Markdown/parser.d.ts.map +1 -1
- package/dist/Markdown/parser.js +50 -2
- package/dist/MobileNav/MobileNav.d.ts +1 -0
- package/dist/MobileNav/MobileNav.d.ts.map +1 -1
- package/dist/MobileNav/MobileNav.js +24 -6
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +6 -1
- package/dist/NumberInput/NumberInput.d.ts.map +1 -1
- package/dist/NumberInput/NumberInput.js +36 -3
- package/dist/Outline/parseOutlineFromMarkdown.d.ts +2 -0
- package/dist/Outline/parseOutlineFromMarkdown.d.ts.map +1 -1
- package/dist/Outline/parseOutlineFromMarkdown.js +5 -31
- package/dist/RadioList/RadioList.d.ts.map +1 -1
- package/dist/RadioList/RadioList.js +12 -1
- package/dist/Resizable/ResizeHandle.d.ts.map +1 -1
- package/dist/Resizable/ResizeHandle.js +3 -3
- package/dist/Section/Section.d.ts +36 -1
- package/dist/Section/Section.d.ts.map +1 -1
- package/dist/Section/Section.js +12 -2
- package/dist/Selector/Selector.d.ts +26 -1
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +93 -15
- package/dist/Selector/SelectorOption.d.ts +14 -1
- package/dist/Selector/SelectorOption.d.ts.map +1 -1
- package/dist/Selector/SelectorOption.js +6 -0
- package/dist/Selector/SelectorRowLayoutContext.d.ts +8 -0
- package/dist/Selector/SelectorRowLayoutContext.d.ts.map +1 -0
- package/dist/Selector/SelectorRowLayoutContext.js +27 -0
- package/dist/Selector/types.d.ts +1 -0
- package/dist/Selector/types.d.ts.map +1 -1
- package/dist/Slider/Slider.d.ts.map +1 -1
- package/dist/Slider/Slider.js +2 -2
- package/dist/Stack/Stack.d.ts +23 -1
- package/dist/Stack/Stack.d.ts.map +1 -1
- package/dist/Stack/Stack.js +12 -6
- package/dist/StatusDot/StatusDot.d.ts +43 -3
- package/dist/StatusDot/StatusDot.d.ts.map +1 -1
- package/dist/StatusDot/StatusDot.js +42 -5
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +9 -0
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map +1 -1
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +7 -2
- package/dist/TextArea/TextArea.d.ts.map +1 -1
- package/dist/TextArea/TextArea.js +6 -1
- package/dist/TextInput/TextInput.d.ts.map +1 -1
- package/dist/TextInput/TextInput.js +6 -1
- package/dist/TimeInput/TimeInput.d.ts.map +1 -1
- package/dist/TimeInput/TimeInput.js +6 -1
- package/dist/astryx.css +40 -21
- package/dist/hooks/scrollbarGutter.d.ts +28 -0
- package/dist/hooks/scrollbarGutter.d.ts.map +1 -0
- package/dist/hooks/scrollbarGutter.js +103 -0
- package/dist/hooks/useResolvedRequired.d.ts +19 -0
- package/dist/hooks/useResolvedRequired.d.ts.map +1 -0
- package/dist/hooks/useResolvedRequired.js +40 -0
- package/dist/hooks/useScrollLock.d.ts +4 -0
- package/dist/hooks/useScrollLock.d.ts.map +1 -1
- package/dist/hooks/useScrollLock.js +13 -1
- package/dist/theme/derivedVarRegistry.d.ts.map +1 -1
- package/dist/theme/derivedVarRegistry.js +7 -0
- package/dist/theme/generateThemeRules.d.ts.map +1 -1
- package/dist/theme/generateThemeRules.js +37 -4
- package/dist/utils/plainDate.d.ts +6 -0
- package/dist/utils/plainDate.d.ts.map +1 -1
- package/dist/utils/plainDate.js +12 -0
- package/locales/af-ZA.json +958 -0
- package/locales/ar-SA.json +998 -0
- package/locales/ca-ES.json +974 -0
- package/locales/cs-CZ.json +990 -0
- package/locales/da-DK.json +966 -0
- package/locales/de-DE.json +966 -0
- package/locales/el-GR.json +990 -0
- package/locales/en.json +8 -0
- package/locales/es-ES.json +978 -0
- package/locales/fi-FI.json +990 -0
- package/locales/fr-FR.json +928 -0
- package/locales/he-IL.json +990 -0
- package/locales/hu-HU.json +990 -0
- package/locales/it-IT.json +978 -0
- package/locales/ja-JP.json +998 -0
- package/locales/ko-KR.json +990 -0
- package/locales/nl-NL.json +954 -0
- package/locales/no-NO.json +978 -0
- package/locales/pl-PL.json +982 -0
- package/locales/pseudo.json +6 -0
- package/locales/pt-BR.json +982 -0
- package/locales/pt-PT.json +982 -0
- package/locales/ro-RO.json +982 -0
- package/locales/ru-RU.json +990 -0
- package/locales/sr-SP.json +990 -0
- package/locales/sv-SE.json +986 -0
- package/locales/tr-TR.json +990 -0
- package/locales/uk-UA.json +990 -0
- package/locales/vi-VN.json +986 -0
- package/locales/zh-CN.json +998 -0
- package/locales/zh-TW.json +998 -0
- package/package.json +3 -3
- package/src/BottomSheet/BottomSheet.doc.mjs +36 -3
- package/src/BottomSheet/BottomSheet.test.tsx +177 -2
- package/src/BottomSheet/BottomSheet.tsx +16 -2
- package/src/BottomSheet/BottomSheetPanel.test.tsx +41 -0
- package/src/BottomSheet/BottomSheetPanel.tsx +95 -15
- package/src/BottomSheet/index.ts +5 -1
- package/src/BottomSheet/snapOffsets.test.ts +114 -47
- package/src/BottomSheet/snapOffsets.ts +119 -33
- package/src/BottomSheet/useSheetGestures.test.ts +113 -15
- package/src/BottomSheet/useSheetGestures.ts +196 -100
- package/src/Calendar/Calendar.doc.mjs +16 -0
- package/src/Calendar/Calendar.test.tsx +137 -0
- package/src/Calendar/Calendar.tsx +65 -2
- package/src/Calendar/getStandaloneShortWeekdayNames.test.ts +54 -0
- package/src/Calendar/getStandaloneShortWeekdayNames.ts +38 -0
- package/src/Calendar/hooks/useCalendarConstraints.ts +54 -3
- package/src/Calendar/hooks/useCalendarDays.ts +13 -10
- package/src/Calendar/standaloneShortWeekdayNames.generated.ts +50 -0
- package/src/Center/Center.doc.mjs +48 -0
- package/src/Center/Center.test.tsx +158 -0
- package/src/Center/Center.tsx +50 -9
- package/src/CheckboxInput/CheckboxInput.tsx +6 -0
- package/src/ComplexSelector/ComplexSelector.tsx +3 -1
- package/src/DateInput/DateInput.tsx +3 -1
- package/src/DateRangeInput/DateRangeInput.doc.mjs +16 -0
- package/src/DateRangeInput/DateRangeInput.test.tsx +81 -1
- package/src/DateRangeInput/DateRangeInput.tsx +72 -1
- package/src/DateTimeInput/DateTimeInput.tsx +4 -2
- package/src/Dialog/Dialog.test.tsx +24 -0
- package/src/Dialog/Dialog.tsx +3 -0
- package/src/Field/Field.doc.mjs +1 -0
- package/src/Field/FieldLabel.tsx +20 -4
- package/src/Field/InputClearButton.test.tsx +25 -0
- package/src/Field/InputClearButton.tsx +4 -1
- package/src/FormLayout/FormLayout.doc.mjs +13 -0
- package/src/FormLayout/FormLayout.test.tsx +181 -4
- package/src/FormLayout/FormLayout.tsx +33 -2
- package/src/FormLayout/FormLayoutContext.ts +22 -7
- package/src/FormLayout/index.ts +1 -1
- package/src/Item/Item.doc.mjs +1 -0
- package/src/Item/Item.test.tsx +50 -0
- package/src/Item/Item.tsx +40 -1
- package/src/Layer/useLayer.tsx +13 -2
- package/src/Layout/Layout.doc.mjs +18 -0
- package/src/Layout/container.stylex.ts +11 -3
- package/src/Layout/index.ts +4 -0
- package/src/Layout/overlayPaddingReset.test.tsx +222 -0
- package/src/Layout/padding.stylex.ts +192 -12
- package/src/Lightbox/Lightbox.tsx +2 -1
- package/src/Markdown/Markdown.doc.mjs +3 -0
- package/src/Markdown/Markdown.test.tsx +78 -0
- package/src/Markdown/Markdown.tsx +41 -1
- package/src/Markdown/parser.ts +60 -2
- package/src/MobileNav/MobileNav.tsx +61 -5
- package/src/MobileNav/MobileNavEntryAnimation.test.tsx +212 -0
- package/src/MobileNav/MobileNavScrollbarGutter.test.tsx +109 -0
- package/src/MultiSelector/MultiSelector.tsx +3 -1
- package/src/NumberInput/NumberInput.doc.mjs +24 -0
- package/src/NumberInput/NumberInput.test.tsx +138 -0
- package/src/NumberInput/NumberInput.tsx +43 -5
- package/src/Outline/Outline.doc.mjs +2 -0
- package/src/Outline/parseOutlineFromMarkdown.ts +10 -40
- package/src/RadioList/RadioList.tsx +9 -1
- package/src/Resizable/ResizeHandle.test.tsx +22 -0
- package/src/Resizable/ResizeHandle.tsx +9 -3
- package/src/Section/Section.doc.mjs +55 -0
- package/src/Section/Section.test.tsx +201 -4
- package/src/Section/Section.tsx +69 -0
- package/src/Selector/Selector.doc.mjs +16 -2
- package/src/Selector/Selector.test.tsx +524 -0
- package/src/Selector/Selector.tsx +161 -17
- package/src/Selector/SelectorOption.doc.mjs +7 -0
- package/src/Selector/SelectorOption.tsx +21 -0
- package/src/Selector/SelectorRowLayoutContext.ts +32 -0
- package/src/Selector/types.ts +4 -4
- package/src/Slider/Slider.tsx +10 -0
- package/src/Stack/Stack.doc.mjs +72 -0
- package/src/Stack/Stack.test.tsx +156 -0
- package/src/Stack/Stack.tsx +50 -8
- package/src/StatusDot/StatusDot.doc.mjs +13 -0
- package/src/StatusDot/StatusDot.test.tsx +115 -8
- package/src/StatusDot/StatusDot.tsx +74 -9
- package/src/Switch/Switch.tsx +6 -0
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +20 -2
- package/src/TextArea/TextArea.tsx +3 -1
- package/src/TextInput/TextInput.tsx +3 -1
- package/src/TimeInput/TimeInput.tsx +3 -1
- package/src/hooks/scrollbarGutter.test.ts +167 -0
- package/src/hooks/scrollbarGutter.ts +121 -0
- package/src/hooks/useResolvedRequired.ts +42 -0
- package/src/hooks/useScrollLock.doc.mjs +4 -4
- package/src/hooks/useScrollLock.test.ts +73 -0
- package/src/hooks/useScrollLock.ts +14 -0
- package/src/theme/derivedVarRegistry.test.ts +14 -3
- package/src/theme/derivedVarRegistry.ts +4 -0
- package/src/theme/generateThemeRules.test.ts +79 -0
- package/src/theme/generateThemeRules.ts +49 -4
- package/src/utils/plainDate.test.ts +50 -0
- package/src/utils/plainDate.ts +12 -0
|
@@ -29,6 +29,7 @@ import { Spinner } from "../Spinner/index.js";
|
|
|
29
29
|
import { Calendar } from "../Calendar/index.js";
|
|
30
30
|
import { useCalendarConstraints } from "../Calendar/hooks/index.js";
|
|
31
31
|
import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
|
|
32
|
+
import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
|
|
32
33
|
import { usePopover } from "../Popover/index.js";
|
|
33
34
|
import { useTooltip } from "../Tooltip/index.js";
|
|
34
35
|
import { getInputARIA, isImeKeyEvent, parseDateInput } from "../utils/index.js";
|
|
@@ -137,6 +138,10 @@ export function DateInput({
|
|
|
137
138
|
...rest
|
|
138
139
|
}) {
|
|
139
140
|
const t = useTranslator();
|
|
141
|
+
const isEffectivelyRequired = useResolvedRequired({
|
|
142
|
+
isRequired,
|
|
143
|
+
isOptional
|
|
144
|
+
});
|
|
140
145
|
const placeholder = placeholderFromProps ?? t('@astryx.dateInput.placeholder');
|
|
141
146
|
const size = useSize(sizeProp, 'md');
|
|
142
147
|
const id = useId();
|
|
@@ -419,7 +424,7 @@ export function DateInput({
|
|
|
419
424
|
readOnly: showsDisabledMessage || undefined,
|
|
420
425
|
"aria-labelledby": ariaLabelledBy,
|
|
421
426
|
"aria-describedby": ariaDescribedBy,
|
|
422
|
-
"aria-required":
|
|
427
|
+
"aria-required": isEffectivelyRequired ? 'true' : undefined,
|
|
423
428
|
"aria-invalid": status?.type === 'error' || !isInputValid ? 'true' : undefined,
|
|
424
429
|
"aria-busy": isBusy || undefined,
|
|
425
430
|
"aria-expanded": popover.isOpen,
|
|
@@ -93,6 +93,28 @@ export interface DateRangeInputProps extends Omit<BaseProps, 'onChange' | 'defau
|
|
|
93
93
|
* A date is disabled if ANY function returns false.
|
|
94
94
|
*/
|
|
95
95
|
dateConstraints?: ReadonlyArray<(date: Date) => boolean>;
|
|
96
|
+
/**
|
|
97
|
+
* Maximum number of days the selected range may span, counting both
|
|
98
|
+
* endpoints — `maxRangeSpan={7}` allows a 7-day window (start + 6 days).
|
|
99
|
+
* Once a start date is picked, days beyond this distance from it are
|
|
100
|
+
* disabled, so the user can't stretch the range past the cap. Use for
|
|
101
|
+
* rolling windows like "at most a week from the chosen day"; for fixed
|
|
102
|
+
* calendar bounds use `min`/`max`.
|
|
103
|
+
*
|
|
104
|
+
* This constrains selection only — it never rewrites a `value` that is
|
|
105
|
+
* already wider than the cap. Surface such a value with `status` if you
|
|
106
|
+
* need to flag it. A `preset` whose range violates the cap is disabled
|
|
107
|
+
* (shown but not committable) rather than allowed to override it.
|
|
108
|
+
*/
|
|
109
|
+
maxRangeSpan?: number;
|
|
110
|
+
/**
|
|
111
|
+
* Minimum number of days the selected range must span, counting both
|
|
112
|
+
* endpoints — `minRangeSpan={2}` forbids a single-day range. Once a start
|
|
113
|
+
* date is picked, days closer than this to it are disabled — except the
|
|
114
|
+
* start itself, which stays selectable as the active anchor. Defaults to 1
|
|
115
|
+
* (a same-day start and end is allowed).
|
|
116
|
+
*/
|
|
117
|
+
minRangeSpan?: number;
|
|
96
118
|
/**
|
|
97
119
|
* Preset date ranges shown as quick-select options beside the calendar.
|
|
98
120
|
*/
|
|
@@ -163,7 +185,7 @@ export interface DateRangeInputProps extends Omit<BaseProps, 'onChange' | 'defau
|
|
|
163
185
|
* />
|
|
164
186
|
* ```
|
|
165
187
|
*/
|
|
166
|
-
export declare function DateRangeInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, value, onChange, changeAction, isLoading, min, max, dateConstraints, presets, hasClear, placeholder: placeholderFromProps, size: sizeProp, status, statusVariant, labelTooltip, numberOfMonths, weekStartsOn, width, xstyle, className, style, ref, ...rest }: DateRangeInputProps): import("react").JSX.Element;
|
|
188
|
+
export declare function DateRangeInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, value, onChange, changeAction, isLoading, min, max, dateConstraints, maxRangeSpan, minRangeSpan, presets, hasClear, placeholder: placeholderFromProps, size: sizeProp, status, statusVariant, labelTooltip, numberOfMonths, weekStartsOn, width, xstyle, className, style, ref, ...rest }: DateRangeInputProps): import("react").JSX.Element;
|
|
167
189
|
export declare namespace DateRangeInput {
|
|
168
190
|
var displayName: string;
|
|
169
191
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../src/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../src/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
*/
|
|
18
18
|
import { useId, useCallback, useMemo, useOptimistic, useTransition } from 'react';
|
|
19
19
|
import * as stylex from '@stylexjs/stylex';
|
|
20
|
-
import { plainDateFromISO, plainDateToday, plainDateFormat, DATE_FORMAT_SHORT, DATE_FORMAT_SHORT_WITH_YEAR } from "../utils/plainDate.js";
|
|
20
|
+
import { plainDateFromISO, plainDateToday, plainDateFormat, plainDateDiffDays, DATE_FORMAT_SHORT, DATE_FORMAT_SHORT_WITH_YEAR } from "../utils/plainDate.js";
|
|
21
21
|
import "../theme/tokens.stylex.js";
|
|
22
22
|
import { colorVars, sizeVars, radiusVars, spacingVars, typographyVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
|
|
23
23
|
import { Field, InputClearButton, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
|
|
@@ -29,6 +29,7 @@ import { useTooltip } from "../Tooltip/index.js";
|
|
|
29
29
|
import { mergeProps } from "../utils/index.js";
|
|
30
30
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
31
31
|
import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
|
|
32
|
+
import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
|
|
32
33
|
import { themeProps } from "../utils/themeProps.js";
|
|
33
34
|
import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
|
|
34
35
|
import { stableClassName } from "../naming.js";
|
|
@@ -73,6 +74,12 @@ const styles = {
|
|
|
73
74
|
kWkggS: "xgcxg3y",
|
|
74
75
|
kMwMTN: "xqwr325",
|
|
75
76
|
$$css: true
|
|
77
|
+
},
|
|
78
|
+
presetButtonDisabled: {
|
|
79
|
+
kMwMTN: "xnbbluu",
|
|
80
|
+
kkrTdU: "x1h6gzvc",
|
|
81
|
+
kWkggS: "xjbqb8w",
|
|
82
|
+
$$css: true
|
|
76
83
|
}
|
|
77
84
|
};
|
|
78
85
|
const sizeStyles = {
|
|
@@ -112,6 +119,24 @@ function isRangeEqual(a, b) {
|
|
|
112
119
|
}
|
|
113
120
|
return a.start === b.start && a.end === b.end;
|
|
114
121
|
}
|
|
122
|
+
|
|
123
|
+
// A preset that would land outside the span bounds is disabled rather than
|
|
124
|
+
// allowed to override them: the cap is authoritative, so an out-of-window
|
|
125
|
+
// preset stays visible (discoverable) but non-committable, mirroring how the
|
|
126
|
+
// calendar disables out-of-window days. Spans count both endpoints.
|
|
127
|
+
function isRangeWithinSpan(range, maxRangeSpan, minRangeSpan) {
|
|
128
|
+
if (maxRangeSpan == null && minRangeSpan == null) {
|
|
129
|
+
return true;
|
|
130
|
+
}
|
|
131
|
+
const span = Math.abs(plainDateDiffDays(plainDateFromISO(range.start), plainDateFromISO(range.end))) + 1;
|
|
132
|
+
if (maxRangeSpan != null && span > maxRangeSpan) {
|
|
133
|
+
return false;
|
|
134
|
+
}
|
|
135
|
+
if (minRangeSpan != null && span < minRangeSpan) {
|
|
136
|
+
return false;
|
|
137
|
+
}
|
|
138
|
+
return true;
|
|
139
|
+
}
|
|
115
140
|
/**
|
|
116
141
|
* A date range picker with a button trigger that opens a popover
|
|
117
142
|
* containing a dual-month calendar and optional preset ranges.
|
|
@@ -143,6 +168,8 @@ export function DateRangeInput({
|
|
|
143
168
|
min,
|
|
144
169
|
max,
|
|
145
170
|
dateConstraints,
|
|
171
|
+
maxRangeSpan,
|
|
172
|
+
minRangeSpan,
|
|
146
173
|
presets,
|
|
147
174
|
hasClear = true,
|
|
148
175
|
placeholder: placeholderFromProps,
|
|
@@ -160,6 +187,10 @@ export function DateRangeInput({
|
|
|
160
187
|
...rest
|
|
161
188
|
}) {
|
|
162
189
|
const t = useTranslator();
|
|
190
|
+
const isEffectivelyRequired = useResolvedRequired({
|
|
191
|
+
isRequired,
|
|
192
|
+
isOptional
|
|
193
|
+
});
|
|
163
194
|
const placeholder = placeholderFromProps ?? t('@astryx.dateRangeInput.placeholder');
|
|
164
195
|
const size = useSize(sizeProp, 'md');
|
|
165
196
|
const id = useId();
|
|
@@ -293,7 +324,7 @@ export function DateRangeInput({
|
|
|
293
324
|
"aria-disabled": showsDisabledMessage ? 'true' : undefined,
|
|
294
325
|
"aria-label": triggerAriaLabel,
|
|
295
326
|
"aria-describedby": ariaDescribedBy,
|
|
296
|
-
"aria-required":
|
|
327
|
+
"aria-required": isEffectivelyRequired ? 'true' : undefined,
|
|
297
328
|
"aria-invalid": status?.type === 'error' ? 'true' : undefined,
|
|
298
329
|
"aria-busy": isBusy || undefined,
|
|
299
330
|
"aria-expanded": popover.isOpen,
|
|
@@ -336,6 +367,7 @@ export function DateRangeInput({
|
|
|
336
367
|
children: presets.map(preset => {
|
|
337
368
|
const presetRange = preset.getRange();
|
|
338
369
|
const isActive = isRangeEqual(value, presetRange);
|
|
370
|
+
const isPresetDisabled = !isRangeWithinSpan(presetRange, maxRangeSpan, minRangeSpan);
|
|
339
371
|
return /*#__PURE__*/_jsx("button", {
|
|
340
372
|
type: "button"
|
|
341
373
|
// These presets are independent action buttons navigated by
|
|
@@ -345,8 +377,9 @@ export function DateRangeInput({
|
|
|
345
377
|
// concept that contradicted the Tab interaction) (forms-5).
|
|
346
378
|
,
|
|
347
379
|
"aria-current": isActive ? 'true' : undefined,
|
|
380
|
+
disabled: isPresetDisabled,
|
|
348
381
|
onClick: () => handlePresetClick(preset),
|
|
349
|
-
...stylex.props(focusOutlineStyles.focusVisible, styles.presetButton, isActive && styles.presetButtonActive),
|
|
382
|
+
...stylex.props(focusOutlineStyles.focusVisible, styles.presetButton, isActive && styles.presetButtonActive, isPresetDisabled && styles.presetButtonDisabled),
|
|
350
383
|
children: preset.label
|
|
351
384
|
}, preset.label);
|
|
352
385
|
})
|
|
@@ -357,6 +390,8 @@ export function DateRangeInput({
|
|
|
357
390
|
min: min,
|
|
358
391
|
max: max,
|
|
359
392
|
dateConstraints: dateConstraints,
|
|
393
|
+
maxRangeSpan: maxRangeSpan,
|
|
394
|
+
minRangeSpan: minRangeSpan,
|
|
360
395
|
numberOfMonths: numberOfMonths,
|
|
361
396
|
weekStartsOn: weekStartsOn
|
|
362
397
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAGL,KAAK,WAAW,EAKjB,MAAM,UAAU,CAAC;AAIlB,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;AA2BrB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -32,6 +32,7 @@ import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
|
|
|
32
32
|
import { parseDateInput, parseTimeInput, formatDisplayTime12h, formatDisplayTime24h, formatISOTime, isTimeInRange, adjustTime, isImeKeyEvent, mergeProps, mergeRefs, isFocusDetached } from "../utils/index.js";
|
|
33
33
|
import { plainDateFromISO, plainDateToISO, plainDateFormat, DATE_FORMAT_LONG } from "../utils/plainDate.js";
|
|
34
34
|
import { useAnnounce } from "../hooks/useAnnounce.js";
|
|
35
|
+
import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
|
|
35
36
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
36
37
|
import { themeProps } from "../utils/themeProps.js";
|
|
37
38
|
import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
|
|
@@ -170,6 +171,10 @@ export function DateTimeInput({
|
|
|
170
171
|
...rest
|
|
171
172
|
}) {
|
|
172
173
|
const t = useTranslator();
|
|
174
|
+
const isEffectivelyRequired = useResolvedRequired({
|
|
175
|
+
isRequired,
|
|
176
|
+
isOptional
|
|
177
|
+
});
|
|
173
178
|
// Speaks arrow-key stepping results through the persistent live regions:
|
|
174
179
|
// stepping programmatically rewrites a plain textbox's value, which screen
|
|
175
180
|
// readers do not announce on their own (WCAG 4.1.2).
|
|
@@ -597,7 +602,7 @@ export function DateTimeInput({
|
|
|
597
602
|
"aria-disabled": showsDisabledMessage ? 'true' : undefined,
|
|
598
603
|
readOnly: showsDisabledMessage || undefined,
|
|
599
604
|
"aria-describedby": ariaDescribedBy,
|
|
600
|
-
"aria-required":
|
|
605
|
+
"aria-required": isEffectivelyRequired ? 'true' : undefined,
|
|
601
606
|
"aria-invalid": status?.type === 'error' || !isDateInputValid ? 'true' : undefined,
|
|
602
607
|
"aria-busy": isBusy || undefined,
|
|
603
608
|
"aria-expanded": popover.isOpen,
|
|
@@ -676,7 +681,7 @@ export function DateTimeInput({
|
|
|
676
681
|
label
|
|
677
682
|
}),
|
|
678
683
|
"aria-describedby": ariaDescribedBy,
|
|
679
|
-
"aria-required":
|
|
684
|
+
"aria-required": isEffectivelyRequired ? 'true' : undefined,
|
|
680
685
|
"aria-invalid": status?.type === 'error' || !isTimeInputValid ? 'true' : undefined,
|
|
681
686
|
"aria-busy": isBusy || undefined,
|
|
682
687
|
...{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsB5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAKhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAsB9C;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzD,4EAA4E;AAC5E,UAAU,mBAAmB;IAC3B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB;IACzD,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAuHD;;;;;;;;;GASG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,cAAc;;;;;EAUpE;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,QAAgB,EAChB,YAAY,EACZ,KAAW,EACX,SAAkB,EAClB,QAAQ,EACR,OAAoB,EACpB,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCA6Sb;yBA7Te,MAAM"}
|
package/dist/Dialog/Dialog.js
CHANGED
|
@@ -23,7 +23,7 @@ import { isImeKeyEvent } from "../utils/ime.js";
|
|
|
23
23
|
import "../theme/tokens.stylex.js";
|
|
24
24
|
import { colorVars, radiusVars, durationVars, easeVars, shadowVars } from "../theme/tokens.stylex.js";
|
|
25
25
|
import { container } from "../Layout/container.stylex.js";
|
|
26
|
-
import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles, spacingStepToToken } from "../Layout/padding.stylex.js";
|
|
26
|
+
import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles, spacingStepToToken, overlayPaddingReset } from "../Layout/padding.stylex.js";
|
|
27
27
|
import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
28
28
|
import { devWarn } from "../utils/devWarning.js";
|
|
29
29
|
import { DialogContext } from "./DialogContext.js";
|
|
@@ -435,7 +435,7 @@ export function Dialog({
|
|
|
435
435
|
...safeProps,
|
|
436
436
|
...mergeProps(themeProps('dialog', {
|
|
437
437
|
variant
|
|
438
|
-
}), stylex.props(styles.inlineWrapper, !isFullscreen && dynamicStyles.sizing(width, maxHeight), isFullscreen && styles.fullscreen, xstyle), className, style),
|
|
438
|
+
}), stylex.props(styles.inlineWrapper, overlayPaddingReset.reset, !isFullscreen && dynamicStyles.sizing(width, maxHeight), isFullscreen && styles.fullscreen, xstyle), className, style),
|
|
439
439
|
"data-testid": props['data-testid'],
|
|
440
440
|
children: innerContent
|
|
441
441
|
});
|
|
@@ -448,7 +448,7 @@ export function Dialog({
|
|
|
448
448
|
...safeProps,
|
|
449
449
|
...mergeProps(themeProps('dialog', {
|
|
450
450
|
variant
|
|
451
|
-
}), focusOutlineProps.focusVisible(styles.dialog, isOpen && styles.open, styles.backdrop, !isFullscreen && dynamicStyles.sizing(width, maxHeight), hasPosition && (() => {
|
|
451
|
+
}), focusOutlineProps.focusVisible(styles.dialog, overlayPaddingReset.reset, isOpen && styles.open, styles.backdrop, !isFullscreen && dynamicStyles.sizing(width, maxHeight), hasPosition && (() => {
|
|
452
452
|
const o = resolveDialogPositionOffsets(position);
|
|
453
453
|
return dynamicStyles.position(o.top, o.insetInlineStart, o.insetInlineEnd, o.bottom);
|
|
454
454
|
})(), isFullscreen && styles.fullscreen, xstyle), className, style),
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file FieldLabel.tsx
|
|
3
|
-
* @input Uses React, Icon, IconType, useTranslator
|
|
3
|
+
* @input Uses React, Icon, IconType, useTranslator, FormLayoutContext
|
|
4
4
|
* @output Exports FieldLabel component, FieldLabelProps
|
|
5
5
|
* @position Core label implementation; used by Field, CheckboxInput, Switch
|
|
6
6
|
*
|
|
7
7
|
* SYNC: When modified, update these files to stay in sync:
|
|
8
8
|
* - /packages/core/src/Field/Field.doc.mjs (props table, features, implementation notes)
|
|
9
9
|
* - /packages/core/src/Field/index.ts (exports if types change)
|
|
10
|
+
* - /packages/core/src/FormLayout/FormLayoutContext.ts (defaultOptionality drives the indicator)
|
|
10
11
|
* - /packages/cli/assets/templates/blocks/components/Field/ (showcase blocks)
|
|
11
12
|
* - /packages/core/locales/en.json (@astryx.field.required / @astryx.field.optional)
|
|
12
13
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../src/Field/FieldLabel.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../src/Field/FieldLabel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAuB,KAAK,SAAS,EAAiB,MAAM,OAAO,CAAC;AAE3E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AA0D5D,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,aAAa,EACb,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,+BAsHjB;yBAxIe,UAAU"}
|
package/dist/Field/FieldLabel.js
CHANGED
|
@@ -4,17 +4,18 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file FieldLabel.tsx
|
|
7
|
-
* @input Uses React, Icon, IconType, useTranslator
|
|
7
|
+
* @input Uses React, Icon, IconType, useTranslator, FormLayoutContext
|
|
8
8
|
* @output Exports FieldLabel component, FieldLabelProps
|
|
9
9
|
* @position Core label implementation; used by Field, CheckboxInput, Switch
|
|
10
10
|
*
|
|
11
11
|
* SYNC: When modified, update these files to stay in sync:
|
|
12
12
|
* - /packages/core/src/Field/Field.doc.mjs (props table, features, implementation notes)
|
|
13
13
|
* - /packages/core/src/Field/index.ts (exports if types change)
|
|
14
|
+
* - /packages/core/src/FormLayout/FormLayoutContext.ts (defaultOptionality drives the indicator)
|
|
14
15
|
* - /packages/cli/assets/templates/blocks/components/Field/ (showcase blocks)
|
|
15
16
|
* - /packages/core/locales/en.json (@astryx.field.required / @astryx.field.optional)
|
|
16
17
|
*/
|
|
17
|
-
import { useMemo, useRef } from 'react';
|
|
18
|
+
import { use, useMemo, useRef } from 'react';
|
|
18
19
|
import * as stylex from '@stylexjs/stylex';
|
|
19
20
|
import { mergeProps } from "../utils/index.js";
|
|
20
21
|
import "../theme/tokens.stylex.js";
|
|
@@ -24,6 +25,7 @@ import { Tooltip } from "../Tooltip/index.js";
|
|
|
24
25
|
import { useTranslator } from "../i18n/index.js";
|
|
25
26
|
import { themeProps } from "../utils/themeProps.js";
|
|
26
27
|
import { useInputContainer } from "../hooks/index.js";
|
|
28
|
+
import { FormLayoutContext } from "../FormLayout/FormLayoutContext.js";
|
|
27
29
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
28
30
|
const styles = {
|
|
29
31
|
label: {
|
|
@@ -93,7 +95,23 @@ export function FieldLabel({
|
|
|
93
95
|
...rest
|
|
94
96
|
}) {
|
|
95
97
|
const t = useTranslator();
|
|
96
|
-
const
|
|
98
|
+
const {
|
|
99
|
+
defaultOptionality
|
|
100
|
+
} = use(FormLayoutContext);
|
|
101
|
+
|
|
102
|
+
// A form-level `defaultOptionality` means "only the exception is marked": a
|
|
103
|
+
// field that merely restates the form's default shows no indicator, and only
|
|
104
|
+
// a deviation from it does. This is the *visible indicator* only; the
|
|
105
|
+
// matching `aria-required` is resolved on each control (see
|
|
106
|
+
// useResolvedRequired) so the unmarked majority is still announced.
|
|
107
|
+
//
|
|
108
|
+
// defaultOptionality isRequired isOptional
|
|
109
|
+
// 'optional' → required indicator → (matches default, hidden)
|
|
110
|
+
// 'required' → (matches, hidden) → optional indicator
|
|
111
|
+
// unset → required indicator → optional indicator
|
|
112
|
+
const showRequired = isRequired && defaultOptionality !== 'required';
|
|
113
|
+
const showOptional = isOptional && defaultOptionality !== 'optional';
|
|
114
|
+
const statusText = showOptional ? t('@astryx.field.optional') : showRequired ? t('@astryx.field.required') : null;
|
|
97
115
|
|
|
98
116
|
// A group label (e.g. for a radiogroup) must not be a literal `<label>`
|
|
99
117
|
// element: a `<label>` semantically names a single form control and can't be
|
|
@@ -7,7 +7,8 @@
|
|
|
7
7
|
* TextInput, NumberInput, TimeInput, DateInput, DateTimeInput,
|
|
8
8
|
* DateRangeInput, Selector, MultiSelector, Typeahead, Tokenizer, FileInput —
|
|
9
9
|
* routes it through here, so the glyph is themed in one place via the
|
|
10
|
-
* `astryx-input-clear-icon` target
|
|
10
|
+
* `astryx-input-clear-icon` target and the button wrapper is themed via the
|
|
11
|
+
* `astryx-input-clear-button` target.
|
|
11
12
|
*/
|
|
12
13
|
import type { ReactNode } from 'react';
|
|
13
14
|
import * as stylex from '@stylexjs/stylex';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputClearButton.d.ts","sourceRoot":"","sources":["../../src/Field/InputClearButton.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"InputClearButton.d.ts","sourceRoot":"","sources":["../../src/Field/InputClearButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAY3C,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC;IAC7B;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,OAAO,EACP,MAAM,EACN,aAAa,GACd,EAAE,qBAAqB,GAAG,SAAS,CA0BnC;yBA/Be,gBAAgB"}
|
|
@@ -11,7 +11,8 @@
|
|
|
11
11
|
* TextInput, NumberInput, TimeInput, DateInput, DateTimeInput,
|
|
12
12
|
* DateRangeInput, Selector, MultiSelector, Typeahead, Tokenizer, FileInput —
|
|
13
13
|
* routes it through here, so the glyph is themed in one place via the
|
|
14
|
-
* `astryx-input-clear-icon` target
|
|
14
|
+
* `astryx-input-clear-icon` target and the button wrapper is themed via the
|
|
15
|
+
* `astryx-input-clear-button` target.
|
|
15
16
|
*/
|
|
16
17
|
import * as stylex from '@stylexjs/stylex';
|
|
17
18
|
import { Button } from "../Button/index.js";
|
|
@@ -34,10 +35,14 @@ export function InputClearButton({
|
|
|
34
35
|
const {
|
|
35
36
|
className: iconTargetClassName
|
|
36
37
|
} = themeProps('input-clear-icon');
|
|
38
|
+
const {
|
|
39
|
+
className: buttonTargetClassName
|
|
40
|
+
} = themeProps('input-clear-button');
|
|
37
41
|
return /*#__PURE__*/_jsx(Button, {
|
|
38
42
|
variant: "ghost",
|
|
39
43
|
size: "sm",
|
|
40
44
|
label: label,
|
|
45
|
+
className: buttonTargetClassName,
|
|
41
46
|
icon: /*#__PURE__*/_jsx(Icon, {
|
|
42
47
|
icon: "close",
|
|
43
48
|
size: "sm",
|
|
@@ -6,13 +6,16 @@
|
|
|
6
6
|
*
|
|
7
7
|
* SYNC: When modified, update these files to stay in sync:
|
|
8
8
|
* - /packages/core/src/FormLayout/FormLayout.test.tsx (tests for new/changed behavior)
|
|
9
|
+
* - /packages/core/src/FormLayout/FormLayoutContext.ts (context value shape)
|
|
10
|
+
* - /packages/core/src/FormLayout/FormLayout.doc.mjs (props table)
|
|
9
11
|
* - /packages/core/src/FormLayout/index.ts (exports if types change)
|
|
12
|
+
* - /packages/core/src/Field/FieldLabel.tsx (defaultOptionality indicator resolution)
|
|
10
13
|
* - /apps/storybook/stories/FormLayout.stories.tsx (storybook stories)
|
|
11
14
|
* - /packages/cli/assets/templates/blocks/components/FormLayout/ (showcase blocks)
|
|
12
15
|
*/
|
|
13
16
|
import { type ReactNode } from 'react';
|
|
14
17
|
import type { BaseProps } from '../BaseProps';
|
|
15
|
-
import { type FormLayoutDirection } from './FormLayoutContext';
|
|
18
|
+
import { type FormLayoutDirection, type FormOptionality } from './FormLayoutContext';
|
|
16
19
|
export interface FormLayoutProps extends BaseProps<HTMLDivElement> {
|
|
17
20
|
/** Ref forwarded to the root element */
|
|
18
21
|
ref?: React.Ref<HTMLDivElement>;
|
|
@@ -33,6 +36,25 @@ export interface FormLayoutProps extends BaseProps<HTMLDivElement> {
|
|
|
33
36
|
* @default 'vertical'
|
|
34
37
|
*/
|
|
35
38
|
direction?: FormLayoutDirection;
|
|
39
|
+
/**
|
|
40
|
+
* Which state the form treats as its default, so only the *exception*
|
|
41
|
+
* carries a visible optional/required indicator. It also resolves each
|
|
42
|
+
* field's `aria-required` so the unmarked majority is still announced
|
|
43
|
+
* correctly — but only `aria-required`, never the native `required`
|
|
44
|
+
* attribute, so a layout default can't switch on browser validation.
|
|
45
|
+
*
|
|
46
|
+
* - `'optional'` — fields read as optional; only a field with `isRequired`
|
|
47
|
+
* shows an indicator (the "required" one).
|
|
48
|
+
* - `'required'` — fields read as required; only a field with `isOptional`
|
|
49
|
+
* shows an indicator (the "optional" one). Fields without `isOptional`
|
|
50
|
+
* expose `aria-required` even though they show no indicator.
|
|
51
|
+
* - unset — today's behavior: `isRequired` and `isOptional` each show their
|
|
52
|
+
* own indicator independently.
|
|
53
|
+
*
|
|
54
|
+
* A field that merely restates the default (e.g. `isOptional` under
|
|
55
|
+
* `'optional'`) shows nothing. An inner `FormLayout` shadows an outer one.
|
|
56
|
+
*/
|
|
57
|
+
defaultOptionality?: FormOptionality;
|
|
36
58
|
}
|
|
37
59
|
/**
|
|
38
60
|
* Spatial layout container for form fields.
|
|
@@ -52,7 +74,7 @@ export interface FormLayoutProps extends BaseProps<HTMLDivElement> {
|
|
|
52
74
|
* </FormLayout>
|
|
53
75
|
* ```
|
|
54
76
|
*/
|
|
55
|
-
export declare function FormLayout({ children, direction, xstyle, className, style, ref, ...props }: FormLayoutProps): import("react").JSX.Element;
|
|
77
|
+
export declare function FormLayout({ children, direction, defaultOptionality, xstyle, className, style, ref, ...props }: FormLayoutProps): import("react").JSX.Element;
|
|
56
78
|
export declare namespace FormLayout {
|
|
57
79
|
var displayName: string;
|
|
58
80
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormLayout.d.ts","sourceRoot":"","sources":["../../src/FormLayout/FormLayout.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"FormLayout.d.ts","sourceRoot":"","sources":["../../src/FormLayout/FormLayout.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAC;AA0C7B,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAEhC;;;;;;;;;;;;;;;;;OAiBG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC;CACtC;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAsB,EACtB,kBAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BA0BjB;yBAnCe,UAAU"}
|
|
@@ -10,7 +10,10 @@
|
|
|
10
10
|
*
|
|
11
11
|
* SYNC: When modified, update these files to stay in sync:
|
|
12
12
|
* - /packages/core/src/FormLayout/FormLayout.test.tsx (tests for new/changed behavior)
|
|
13
|
+
* - /packages/core/src/FormLayout/FormLayoutContext.ts (context value shape)
|
|
14
|
+
* - /packages/core/src/FormLayout/FormLayout.doc.mjs (props table)
|
|
13
15
|
* - /packages/core/src/FormLayout/index.ts (exports if types change)
|
|
16
|
+
* - /packages/core/src/Field/FieldLabel.tsx (defaultOptionality indicator resolution)
|
|
14
17
|
* - /apps/storybook/stories/FormLayout.stories.tsx (storybook stories)
|
|
15
18
|
* - /packages/cli/assets/templates/blocks/components/FormLayout/ (showcase blocks)
|
|
16
19
|
*/
|
|
@@ -86,6 +89,7 @@ const styles = {
|
|
|
86
89
|
export function FormLayout({
|
|
87
90
|
children,
|
|
88
91
|
direction = 'vertical',
|
|
92
|
+
defaultOptionality,
|
|
89
93
|
xstyle,
|
|
90
94
|
className,
|
|
91
95
|
style,
|
|
@@ -93,8 +97,9 @@ export function FormLayout({
|
|
|
93
97
|
...props
|
|
94
98
|
}) {
|
|
95
99
|
const contextValue = useMemo(() => ({
|
|
96
|
-
direction
|
|
97
|
-
|
|
100
|
+
direction,
|
|
101
|
+
defaultOptionality
|
|
102
|
+
}), [direction, defaultOptionality]);
|
|
98
103
|
return /*#__PURE__*/_jsx(FormLayoutContext, {
|
|
99
104
|
value: contextValue,
|
|
100
105
|
children: /*#__PURE__*/_jsx("div", {
|
|
@@ -8,10 +8,23 @@
|
|
|
8
8
|
*/
|
|
9
9
|
export type FormLayoutDirection = 'vertical' | 'horizontal' | 'horizontal-labels';
|
|
10
10
|
/**
|
|
11
|
-
*
|
|
12
|
-
*
|
|
11
|
+
* Which state a form treats as its default, so only the *exception* carries a
|
|
12
|
+
* visible optional/required indicator.
|
|
13
|
+
*
|
|
14
|
+
* - `'optional'` — fields are optional unless a field opts into `isRequired`;
|
|
15
|
+
* only required fields show an indicator.
|
|
16
|
+
* - `'required'` — fields are required unless a field opts into `isOptional`;
|
|
17
|
+
* only optional fields show an indicator.
|
|
18
|
+
*/
|
|
19
|
+
export type FormOptionality = 'optional' | 'required';
|
|
20
|
+
/**
|
|
21
|
+
* Context for detecting which form layout a component is rendered in. Children
|
|
22
|
+
* can use this to adapt their rendering based on the parent layout — direction
|
|
23
|
+
* for spatial arrangement, and `defaultOptionality` so a field can suppress the
|
|
24
|
+
* indicator that merely restates the form-wide default.
|
|
13
25
|
*/
|
|
14
26
|
export declare const FormLayoutContext: import("react").Context<{
|
|
15
27
|
direction: FormLayoutDirection;
|
|
28
|
+
defaultOptionality?: FormOptionality;
|
|
16
29
|
}>;
|
|
17
30
|
//# sourceMappingURL=FormLayoutContext.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormLayoutContext.d.ts","sourceRoot":"","sources":["../../src/FormLayout/FormLayoutContext.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FormLayoutContext.d.ts","sourceRoot":"","sources":["../../src/FormLayout/FormLayoutContext.ts"],"names":[],"mappings":"AAkBA;;;;;;;GAOG;AACH,MAAM,MAAM,mBAAmB,GAC7B,UAAU,GAAG,YAAY,GAAG,mBAAmB,CAAC;AAElD;;;;;;;;GAQG;AACH,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,UAAU,CAAC;AAEtD;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB;eACjB,mBAAmB;yBACT,eAAe;EACX,CAAC"}
|
|
@@ -5,10 +5,13 @@
|
|
|
5
5
|
/**
|
|
6
6
|
* @file FormLayoutContext.ts
|
|
7
7
|
* @input Uses React createContext
|
|
8
|
-
* @output Exports FormLayoutContext and
|
|
9
|
-
* @position Context for form layout direction detection
|
|
8
|
+
* @output Exports FormLayoutContext, FormLayoutDirection, and FormOptionality types
|
|
9
|
+
* @position Context for form layout direction + default-optionality detection
|
|
10
10
|
*
|
|
11
11
|
* SYNC: When modified, update these files to stay in sync:
|
|
12
|
+
* - /packages/core/src/FormLayout/FormLayout.tsx (prop + context value)
|
|
13
|
+
* - /packages/core/src/Field/FieldLabel.tsx (indicator resolution)
|
|
14
|
+
* - /packages/core/src/FormLayout/index.ts (exports if types change)
|
|
12
15
|
*/
|
|
13
16
|
import { createContext } from 'react';
|
|
14
17
|
|
|
@@ -22,8 +25,20 @@ import { createContext } from 'react';
|
|
|
22
25
|
*/
|
|
23
26
|
|
|
24
27
|
/**
|
|
25
|
-
*
|
|
26
|
-
*
|
|
28
|
+
* Which state a form treats as its default, so only the *exception* carries a
|
|
29
|
+
* visible optional/required indicator.
|
|
30
|
+
*
|
|
31
|
+
* - `'optional'` — fields are optional unless a field opts into `isRequired`;
|
|
32
|
+
* only required fields show an indicator.
|
|
33
|
+
* - `'required'` — fields are required unless a field opts into `isOptional`;
|
|
34
|
+
* only optional fields show an indicator.
|
|
35
|
+
*/
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* Context for detecting which form layout a component is rendered in. Children
|
|
39
|
+
* can use this to adapt their rendering based on the parent layout — direction
|
|
40
|
+
* for spatial arrangement, and `defaultOptionality` so a field can suppress the
|
|
41
|
+
* indicator that merely restates the form-wide default.
|
|
27
42
|
*/
|
|
28
43
|
export const FormLayoutContext = /*#__PURE__*/createContext({
|
|
29
44
|
direction: 'vertical'
|
|
@@ -8,6 +8,6 @@
|
|
|
8
8
|
*/
|
|
9
9
|
export { FormLayout } from './FormLayout';
|
|
10
10
|
export type { FormLayoutProps } from './FormLayout';
|
|
11
|
-
export type { FormLayoutDirection } from './FormLayoutContext';
|
|
11
|
+
export type { FormLayoutDirection, FormOptionality } from './FormLayoutContext';
|
|
12
12
|
export { FormLayoutContext } from './FormLayoutContext';
|
|
13
13
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormLayout/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,YAAY,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAClD,YAAY,EAAC,mBAAmB,EAAC,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormLayout/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,YAAY,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAClD,YAAY,EAAC,mBAAmB,EAAE,eAAe,EAAC,MAAM,qBAAqB,CAAC;AAC9E,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC"}
|
package/dist/Item/Item.d.ts
CHANGED
|
@@ -68,6 +68,14 @@ export interface ItemProps extends BaseProps<HTMLElement> {
|
|
|
68
68
|
* and text-overflow: ellipsis is applied.
|
|
69
69
|
*/
|
|
70
70
|
descriptionLines?: number;
|
|
71
|
+
/**
|
|
72
|
+
* How the label and description sit together. `stacked` puts the description
|
|
73
|
+
* on its own line below the label; `inline` keeps both on one line, with the
|
|
74
|
+
* description ellipsizing first, so the row fits a fixed-height host.
|
|
75
|
+
*
|
|
76
|
+
* @default 'stacked'
|
|
77
|
+
*/
|
|
78
|
+
layout?: 'stacked' | 'inline';
|
|
71
79
|
/**
|
|
72
80
|
* Click handler. Makes the item clickable with button semantics.
|
|
73
81
|
*/
|
|
@@ -139,7 +147,7 @@ export interface ItemProps extends BaseProps<HTMLElement> {
|
|
|
139
147
|
* />
|
|
140
148
|
* ```
|
|
141
149
|
*/
|
|
142
|
-
export declare function Item({ as: Component, marker, startContent, label, description, endContent, align, density, labelLines, descriptionLines, onClick, interactiveRef, href, target: targetFromProps, rel: relFromProps, isHighlighted, isSelected, isDisabled, xstyle, className, style, ref, role, ...restProps }: ItemProps): import("react").JSX.Element;
|
|
150
|
+
export declare function Item({ as: Component, marker, startContent, label, description, endContent, align, density, labelLines, descriptionLines, layout, onClick, interactiveRef, href, target: targetFromProps, rel: relFromProps, isHighlighted, isSelected, isDisabled, xstyle, className, style, ref, role, ...restProps }: ItemProps): import("react").JSX.Element;
|
|
143
151
|
export declare namespace Item {
|
|
144
152
|
var displayName: string;
|
|
145
153
|
}
|
package/dist/Item/Item.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAS,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAU7C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAa5C,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,WAAW,CAAC;IACvD,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,MAAM,CAAC;IAE3B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAE5C;;;;;;;;;;;OAWG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAErD;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAE5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;
|
|
1
|
+
{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAS,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAU7C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAa5C,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,WAAW,CAAC;IACvD,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,MAAM,CAAC;IAE3B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE9B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAE5C;;;;;;;;;;;OAWG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAErD;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAE5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAsLD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,IAAI,CAAC,EACnB,EAAE,EAAE,SAAiB,EACrB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,WAAW,EACX,UAAU,EACV,KAAgB,EAChB,OAAoB,EACpB,UAAU,EACV,gBAAgB,EAChB,MAAkB,EAClB,OAAO,EACP,cAAc,EACd,IAAI,EACJ,MAAM,EAAE,eAAe,EACvB,GAAG,EAAE,YAAY,EACjB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,IAAI,EACJ,GAAG,SAAS,EACb,EAAE,SAAS,+BAqNX;yBA/Oe,IAAI"}
|