@astryxdesign/core 0.1.4-canary.37c19d3 → 0.1.4-canary.39ffd21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Banner/Banner.d.ts.map +1 -1
- package/dist/Banner/Banner.js +1 -8
- package/dist/Calendar/Calendar.d.ts.map +1 -1
- package/dist/Calendar/Calendar.js +11 -31
- package/dist/Calendar/styles.d.ts +2 -2
- package/dist/Calendar/styles.d.ts.map +1 -1
- package/dist/Calendar/styles.js +2 -2
- package/dist/Carousel/Carousel.d.ts.map +1 -1
- package/dist/Carousel/Carousel.js +0 -1
- package/dist/Chat/ChatToolCalls.d.ts.map +1 -1
- package/dist/Chat/ChatToolCalls.js +1 -8
- package/dist/CheckboxInput/CheckboxInput.d.ts +1 -1
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +1 -3
- package/dist/ClickableCard/ClickableCard.d.ts.map +1 -1
- package/dist/ClickableCard/ClickableCard.js +3 -26
- package/dist/CodeBlock/CodeBlock.d.ts +1 -10
- package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
- package/dist/CodeBlock/CodeBlock.js +5 -23
- package/dist/Collapsible/Collapsible.d.ts +3 -9
- package/dist/Collapsible/Collapsible.d.ts.map +1 -1
- package/dist/Collapsible/Collapsible.js +13 -101
- package/dist/Collapsible/CollapsibleGroup.d.ts +7 -39
- package/dist/Collapsible/CollapsibleGroup.d.ts.map +1 -1
- package/dist/Collapsible/CollapsibleGroup.js +9 -70
- package/dist/Collapsible/CollapsibleGroupContext.d.ts +0 -31
- package/dist/Collapsible/CollapsibleGroupContext.d.ts.map +1 -1
- package/dist/Collapsible/CollapsibleGroupContext.js +3 -33
- package/dist/Collapsible/index.d.ts +0 -1
- package/dist/Collapsible/index.d.ts.map +1 -1
- package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
- package/dist/ContextMenu/ContextMenu.js +0 -2
- package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.js +0 -2
- package/dist/Grid/Grid.d.ts +3 -4
- package/dist/Grid/Grid.d.ts.map +1 -1
- package/dist/Grid/Grid.js +9 -26
- package/dist/Icon/Icon.d.ts.map +1 -1
- package/dist/Icon/Icon.js +1 -5
- package/dist/Lightbox/Lightbox.d.ts.map +1 -1
- package/dist/Lightbox/Lightbox.js +2 -26
- package/dist/NumberInput/NumberInput.d.ts.map +1 -1
- package/dist/NumberInput/NumberInput.js +16 -32
- package/dist/Pagination/Pagination.d.ts.map +1 -1
- package/dist/Pagination/Pagination.js +36 -87
- package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearch.js +21 -39
- package/dist/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/ProgressBar/ProgressBar.js +1 -2
- package/dist/Resizable/ResizeHandle.d.ts.map +1 -1
- package/dist/Resizable/ResizeHandle.js +2 -10
- package/dist/SideNav/SideNav.d.ts.map +1 -1
- package/dist/SideNav/SideNav.js +2 -6
- package/dist/TabList/TabMenu.d.ts.map +1 -1
- package/dist/TabList/TabMenu.js +7 -34
- package/dist/Table/BaseTable.d.ts.map +1 -1
- package/dist/Table/BaseTable.js +2 -12
- package/dist/Table/plugins/columnResize/useTableColumnResize.d.ts.map +1 -1
- package/dist/Table/plugins/columnResize/useTableColumnResize.js +2 -5
- package/dist/Table/plugins/pagination/paginateData.d.ts.map +1 -1
- package/dist/Table/plugins/pagination/paginateData.js +1 -5
- package/dist/Table/plugins/selection/useTableSelectionState.d.ts.map +1 -1
- package/dist/Table/plugins/selection/useTableSelectionState.js +1 -11
- package/dist/Table/plugins/sortable/useTableSortableState.d.ts.map +1 -1
- package/dist/Table/plugins/sortable/useTableSortableState.js +4 -8
- package/dist/Thumbnail/Thumbnail.d.ts +2 -3
- package/dist/Thumbnail/Thumbnail.d.ts.map +1 -1
- package/dist/Thumbnail/Thumbnail.js +0 -1
- package/dist/TimeInput/TimeInput.d.ts.map +1 -1
- package/dist/TimeInput/TimeInput.js +1 -6
- package/dist/Toast/Toast.d.ts.map +1 -1
- package/dist/Toast/Toast.js +3 -11
- package/dist/Toast/ToastViewport.d.ts.map +1 -1
- package/dist/Toast/ToastViewport.js +0 -12
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +2 -5
- package/dist/astryx.css +0 -7
- package/dist/astryx.umd.js +48 -48
- package/dist/astryx.umd.js.map +4 -4
- package/dist/hooks/focusableSelector.d.ts +1 -1
- package/dist/hooks/focusableSelector.d.ts.map +1 -1
- package/dist/hooks/focusableSelector.js +1 -1
- package/dist/hooks/useFocusTrap.d.ts +0 -3
- package/dist/hooks/useFocusTrap.d.ts.map +1 -1
- package/dist/hooks/useFocusTrap.js +1 -38
- package/dist/theme/defineTheme.d.ts +1 -1
- package/dist/theme/defineTheme.d.ts.map +1 -1
- package/dist/theme/expandColorScale.d.ts.map +1 -1
- package/dist/theme/expandColorScale.js +3 -10
- package/dist/theme/hct.d.ts +15 -0
- package/dist/theme/hct.d.ts.map +1 -1
- package/dist/theme/hct.js +9 -9
- package/dist/theme/tokens.d.ts +2 -10
- package/dist/theme/tokens.d.ts.map +1 -1
- package/dist/theme/tokens.js +4 -220
- package/dist/utils/index.d.ts +0 -2
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/index.js +1 -2
- package/dist/utils/timeParser.d.ts.map +1 -1
- package/dist/utils/timeParser.js +5 -8
- package/package.json +1 -1
- package/src/Avatar/Avatar.doc.mjs +0 -11
- package/src/Banner/Banner.doc.mjs +0 -8
- package/src/Banner/Banner.test.tsx +0 -38
- package/src/Banner/Banner.tsx +1 -8
- package/src/Calendar/Calendar.doc.mjs +1 -1
- package/src/Calendar/Calendar.test.tsx +4 -112
- package/src/Calendar/Calendar.tsx +5 -26
- package/src/Calendar/styles.ts +2 -12
- package/src/Carousel/Carousel.doc.mjs +12 -12
- package/src/Carousel/Carousel.test.tsx +0 -13
- package/src/Carousel/Carousel.tsx +0 -1
- package/src/Chat/Chat.doc.mjs +1 -1
- package/src/Chat/ChatToolCalls.test.tsx +0 -55
- package/src/Chat/ChatToolCalls.tsx +12 -10
- package/src/CheckboxInput/CheckboxInput.doc.mjs +3 -3
- package/src/CheckboxInput/CheckboxInput.test.tsx +4 -71
- package/src/CheckboxInput/CheckboxInput.tsx +0 -2
- package/src/Citation/Citation.doc.mjs +0 -5
- package/src/ClickableCard/ClickableCard.tsx +2 -45
- package/src/CodeBlock/CodeBlock.doc.mjs +2 -7
- package/src/CodeBlock/CodeBlock.test.tsx +3 -87
- package/src/CodeBlock/CodeBlock.tsx +3 -43
- package/src/Collapsible/Collapsible.doc.mjs +4 -8
- package/src/Collapsible/Collapsible.tsx +10 -86
- package/src/Collapsible/CollapsibleGroup.doc.mjs +3 -27
- package/src/Collapsible/CollapsibleGroup.test.tsx +0 -288
- package/src/Collapsible/CollapsibleGroup.tsx +9 -107
- package/src/Collapsible/CollapsibleGroupContext.tsx +2 -42
- package/src/Collapsible/index.ts +0 -4
- package/src/CommandPalette/CommandPaletteEmpty.doc.mjs +0 -5
- package/src/CommandPalette/CommandPaletteGroup.doc.mjs +0 -10
- package/src/CommandPalette/CommandPaletteInput.doc.mjs +0 -6
- package/src/CommandPalette/CommandPaletteItem.doc.mjs +0 -6
- package/src/CommandPalette/CommandPaletteList.doc.mjs +0 -9
- package/src/ContextMenu/ContextMenu.doc.mjs +0 -15
- package/src/ContextMenu/ContextMenu.test.tsx +0 -15
- package/src/ContextMenu/ContextMenu.tsx +0 -2
- package/src/ContextMenu/ContextMenuItem.doc.mjs +0 -6
- package/src/DateTimeInput/DateTimeInput.test.tsx +0 -70
- package/src/DateTimeInput/DateTimeInput.tsx +0 -2
- package/src/Dialog/DialogHeader.doc.mjs +0 -45
- package/src/DropdownMenu/DropdownMenu.doc.mjs +1 -1
- package/src/Field/FieldLabel.test.tsx +2 -2
- package/src/FormLayout/__snapshots__/FormLayout.test.tsx.snap +3 -0
- package/src/Grid/Grid.test.tsx +18 -43
- package/src/Grid/Grid.tsx +9 -26
- package/src/Icon/Icon.test.tsx +29 -41
- package/src/Icon/Icon.tsx +2 -6
- package/src/Layout/LayoutContent.doc.mjs +0 -12
- package/src/Layout/LayoutPanel.doc.mjs +0 -40
- package/src/Lightbox/Lightbox.doc.mjs +0 -5
- package/src/Lightbox/Lightbox.test.tsx +2 -123
- package/src/Lightbox/Lightbox.tsx +1 -29
- package/src/NavMenu/NavMenu.doc.mjs +0 -15
- package/src/NumberInput/NumberInput.test.tsx +3 -48
- package/src/NumberInput/NumberInput.tsx +15 -32
- package/src/Overlay/Overlay.doc.mjs +0 -6
- package/src/Pagination/Pagination.test.tsx +0 -143
- package/src/Pagination/Pagination.tsx +23 -75
- package/src/Popover/Popover.test.tsx +0 -65
- package/src/PowerSearch/PowerSearch.doc.mjs +2 -2
- package/src/PowerSearch/PowerSearch.test.tsx +1 -109
- package/src/PowerSearch/PowerSearch.tsx +16 -37
- package/src/ProgressBar/ProgressBar.test.tsx +0 -10
- package/src/ProgressBar/ProgressBar.tsx +1 -2
- package/src/Resizable/ResizeHandle.tsx +2 -10
- package/src/SegmentedControl/SegmentedControl.doc.mjs +1 -1
- package/src/SelectableCard/SelectableCard.doc.mjs +1 -1
- package/src/SideNav/SideNav.doc.mjs +1 -7
- package/src/SideNav/SideNav.test.tsx +0 -20
- package/src/SideNav/SideNav.tsx +2 -6
- package/src/TabList/TabList.test.tsx +1 -185
- package/src/TabList/TabMenu.tsx +9 -45
- package/src/Table/BaseTable.tsx +1 -11
- package/src/Table/Table.test.tsx +0 -51
- package/src/Table/plugins/columnResize/useTableColumnResize.test.tsx +0 -13
- package/src/Table/plugins/columnResize/useTableColumnResize.tsx +1 -3
- package/src/Table/plugins/pagination/paginateData.ts +1 -5
- package/src/Table/plugins/pagination/useTablePagination.test.tsx +0 -13
- package/src/Table/plugins/selection/useTableSelectionState.test.tsx +0 -23
- package/src/Table/plugins/selection/useTableSelectionState.tsx +6 -11
- package/src/Table/plugins/sortable/useTableSortableState.test.tsx +1 -35
- package/src/Table/plugins/sortable/useTableSortableState.tsx +4 -8
- package/src/TextArea/TextArea.test.tsx +3 -3
- package/src/TextInput/TextInput.test.tsx +3 -3
- package/src/Thumbnail/Thumbnail.test.tsx +2 -36
- package/src/Thumbnail/Thumbnail.tsx +2 -4
- package/src/TimeInput/TimeInput.test.tsx +0 -37
- package/src/TimeInput/TimeInput.tsx +1 -11
- package/src/Timestamp/Timestamp.doc.mjs +1 -1
- package/src/Toast/Toast.tsx +3 -11
- package/src/Toast/ToastViewport.test.tsx +0 -64
- package/src/Toast/ToastViewport.tsx +0 -12
- package/src/ToggleButton/ToggleButton.doc.mjs +0 -1
- package/src/Tokenizer/Tokenizer.doc.mjs +2 -2
- package/src/TopNav/TopNav.doc.mjs +1 -1
- package/src/TreeList/TreeList.doc.mjs +2 -2
- package/src/Typeahead/BaseTypeahead.doc.mjs +0 -19
- package/src/Typeahead/BaseTypeahead.tsx +2 -5
- package/src/Typeahead/Typeahead.doc.mjs +1 -1
- package/src/Typeahead/Typeahead.test.tsx +1 -45
- package/src/hooks/focusableSelector.ts +1 -1
- package/src/hooks/useFocusTrap.doc.mjs +2 -4
- package/src/hooks/useFocusTrap.test.tsx +1 -149
- package/src/hooks/useFocusTrap.ts +1 -50
- package/src/theme/SyntaxTheme.doc.mjs +4 -4
- package/src/theme/defineTheme.ts +13 -4
- package/src/theme/derivedVarRegistry.test.ts +2 -2
- package/src/theme/expandColorScale.test.ts +0 -29
- package/src/theme/expandColorScale.ts +6 -11
- package/src/theme/hct.ts +17 -9
- package/src/theme/tokens.test.ts +9 -182
- package/src/theme/tokens.ts +4 -239
- package/src/theme/useTheme.test.tsx +0 -20
- package/src/utils/index.ts +0 -3
- package/src/utils/timeParser.test.ts +0 -13
- package/src/utils/timeParser.ts +5 -8
- package/dist/utils/color.d.ts +0 -42
- package/dist/utils/color.d.ts.map +0 -1
- package/dist/utils/color.js +0 -150
- package/src/Resizable/ResizeHandle.test.tsx +0 -180
- package/src/__tests__/TestIcon.tsx +0 -26
- package/src/docPropReferences.test.ts +0 -178
- package/src/utils/color.test.ts +0 -133
- package/src/utils/color.ts +0 -148
|
@@ -4,21 +4,15 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file Collapsible.tsx
|
|
7
|
-
* @input Uses React, StyleX, useCollapsible hook,
|
|
7
|
+
* @input Uses React, StyleX, useCollapsible hook, getIcon, theme tokens
|
|
8
8
|
* @output Exports Collapsible component and CollapsibleProps
|
|
9
9
|
* @position Collapsible content primitive — trigger toggles visibility of children
|
|
10
10
|
*
|
|
11
11
|
* Collapsible is a standalone primitive that makes any content collapsible.
|
|
12
12
|
* It renders a trigger area (always visible) and a content area that toggles.
|
|
13
|
-
* Handles state management, accessibility (aria-expanded
|
|
14
|
-
* the trigger to its content region), and chevron indicator.
|
|
13
|
+
* Handles state management, accessibility (aria-expanded), and chevron indicator.
|
|
15
14
|
*
|
|
16
15
|
* Works standalone or coordinated by CollapsibleGroup via the `value` prop.
|
|
17
|
-
* When the surrounding CollapsibleGroup enables `dividers`, each Collapsible
|
|
18
|
-
* draws its own row chrome (borderBlockStart suppressed on :first-child, plus
|
|
19
|
-
* density padding) from CollapsibleGroupPresentationContext — StyleX has no
|
|
20
|
-
* child selectors, so the group cannot draw it from outside. The presentation
|
|
21
|
-
* context is reset around children so nested collapsibles stay chrome-free.
|
|
22
16
|
*
|
|
23
17
|
* SYNC: When modified, update these files to stay in sync:
|
|
24
18
|
* - /packages/core/src/Collapsible/index.ts (exports)
|
|
@@ -26,12 +20,10 @@
|
|
|
26
20
|
* - /apps/storybook/stories/Collapsible.stories.tsx
|
|
27
21
|
* - /packages/cli/templates/blocks/components/Collapsible/ (showcase blocks)
|
|
28
22
|
*/
|
|
29
|
-
import { use, useId } from 'react';
|
|
30
23
|
import * as stylex from '@stylexjs/stylex';
|
|
31
24
|
import "../theme/tokens.stylex.js";
|
|
32
|
-
import {
|
|
25
|
+
import { colorVars, typographyVars, fontWeightVars, spacingVars, typeScaleVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
|
|
33
26
|
import { useCollapsible } from "./useCollapsible.js";
|
|
34
|
-
import { CollapsibleGroupPresentationContext } from "./CollapsibleGroupContext.js";
|
|
35
27
|
import { getIcon } from "../Icon/globalIconRegistry.js";
|
|
36
28
|
import { mergeProps } from "../utils/index.js";
|
|
37
29
|
import { themeProps } from "../utils/themeProps.js";
|
|
@@ -40,79 +32,8 @@ const styles = {
|
|
|
40
32
|
root: {
|
|
41
33
|
kzqmXN: "xh8yej3",
|
|
42
34
|
$$css: true
|
|
43
|
-
},
|
|
44
|
-
trigger: {
|
|
45
|
-
kB7OPa: "x9f619",
|
|
46
|
-
k1xSpc: "x78zum5",
|
|
47
|
-
kGNEyG: "x6s0dn4",
|
|
48
|
-
kjj79g: "x1qughib",
|
|
49
|
-
kzqmXN: "xh8yej3",
|
|
50
|
-
kkrTdU: "x1ypdohk",
|
|
51
|
-
kMv6JI: "x9ynric",
|
|
52
|
-
kGuDYH: "x18juvz8",
|
|
53
|
-
k63SB2: "x2mo6ok",
|
|
54
|
-
kMwMTN: "x1tgivj0",
|
|
55
|
-
k9WMMc: "x1yc453h",
|
|
56
|
-
k8WAf4: "xt970qd",
|
|
57
|
-
kI3sdo: "x17nn4n9",
|
|
58
|
-
kInvED: "x1wfwxd8 x7s97pk",
|
|
59
|
-
$$css: true
|
|
60
|
-
},
|
|
61
|
-
contentHidden: {
|
|
62
|
-
k1xSpc: "x1s85apg",
|
|
63
|
-
$$css: true
|
|
64
|
-
},
|
|
65
|
-
content: {
|
|
66
|
-
kLKAdn: "xfsso4q",
|
|
67
|
-
$$css: true
|
|
68
|
-
},
|
|
69
|
-
divided: {
|
|
70
|
-
kEafiO: "x11xkdxz x1g31smg",
|
|
71
|
-
kPef9Z: "x13fuv20",
|
|
72
|
-
kLZC3w: "x1pc3f07",
|
|
73
|
-
$$css: true
|
|
74
35
|
}
|
|
75
36
|
};
|
|
76
|
-
|
|
77
|
-
// Density padding for divided/padded accordion rows. paddingBlock mapping
|
|
78
|
-
// follows Table's density scale (spacing-1/2/3); content only pads its end
|
|
79
|
-
// so text doesn't sit on the divider below (block-start stays spacing-1).
|
|
80
|
-
const densityStyles = {
|
|
81
|
-
triggerCompact: {
|
|
82
|
-
k8WAf4: "xu0wf1k",
|
|
83
|
-
$$css: true
|
|
84
|
-
},
|
|
85
|
-
triggerBalanced: {
|
|
86
|
-
k8WAf4: "xce4md1",
|
|
87
|
-
$$css: true
|
|
88
|
-
},
|
|
89
|
-
triggerSpacious: {
|
|
90
|
-
k8WAf4: "x8o8v82",
|
|
91
|
-
$$css: true
|
|
92
|
-
},
|
|
93
|
-
contentCompact: {
|
|
94
|
-
kGO01o: "xy143xn",
|
|
95
|
-
$$css: true
|
|
96
|
-
},
|
|
97
|
-
contentBalanced: {
|
|
98
|
-
kGO01o: "x1wesfrj",
|
|
99
|
-
$$css: true
|
|
100
|
-
},
|
|
101
|
-
contentSpacious: {
|
|
102
|
-
kGO01o: "xvmdzux",
|
|
103
|
-
$$css: true
|
|
104
|
-
}
|
|
105
|
-
};
|
|
106
|
-
const triggerDensity = {
|
|
107
|
-
compact: densityStyles.triggerCompact,
|
|
108
|
-
balanced: densityStyles.triggerBalanced,
|
|
109
|
-
spacious: densityStyles.triggerSpacious
|
|
110
|
-
};
|
|
111
|
-
const contentDensity = {
|
|
112
|
-
compact: densityStyles.contentCompact,
|
|
113
|
-
balanced: densityStyles.contentBalanced,
|
|
114
|
-
spacious: densityStyles.contentSpacious
|
|
115
|
-
};
|
|
116
37
|
/**
|
|
117
38
|
* A primitive that makes any content collapsible.
|
|
118
39
|
*
|
|
@@ -178,27 +99,18 @@ export function Collapsible({
|
|
|
178
99
|
isCollapsible: collapsibleConfig,
|
|
179
100
|
value
|
|
180
101
|
});
|
|
181
|
-
const presentation = use(CollapsibleGroupPresentationContext);
|
|
182
|
-
const isDivided = presentation != null && presentation.dividers !== 'none';
|
|
183
|
-
const density = presentation?.density ?? null;
|
|
184
102
|
const chevronIcon = getIcon('chevronDown');
|
|
185
|
-
|
|
186
|
-
// Links the trigger to the region it shows/hides so assistive tech can move
|
|
187
|
-
// from the button to its controlled content (disclosure pattern).
|
|
188
|
-
const contentId = useId();
|
|
189
103
|
return /*#__PURE__*/_jsxs("div", {
|
|
190
104
|
ref: ref,
|
|
191
|
-
...mergeProps(themeProps('collapsible',
|
|
192
|
-
dividers: isDivided ? presentation.dividers : undefined,
|
|
193
|
-
density: density ?? undefined
|
|
194
|
-
}), stylex.props(styles.root, isDivided && styles.divided, xstyle), className, style),
|
|
105
|
+
...mergeProps(themeProps('collapsible'), stylex.props(styles.root, xstyle), className, style),
|
|
195
106
|
...props,
|
|
196
107
|
children: [/*#__PURE__*/_jsxs("button", {
|
|
197
108
|
type: "button",
|
|
198
109
|
onClick: toggle,
|
|
199
110
|
"aria-expanded": isOpen,
|
|
200
|
-
|
|
201
|
-
|
|
111
|
+
...{
|
|
112
|
+
className: "x9f619 x78zum5 x6s0dn4 x1qughib xh8yej3 x1ypdohk x9ynric x18juvz8 x2mo6ok x1tgivj0 x1yc453h xt970qd"
|
|
113
|
+
},
|
|
202
114
|
children: [/*#__PURE__*/_jsx("span", {
|
|
203
115
|
...{
|
|
204
116
|
className: "x1b2iylo xwgcxoh"
|
|
@@ -216,12 +128,12 @@ export function Collapsible({
|
|
|
216
128
|
children: chevronIcon
|
|
217
129
|
})]
|
|
218
130
|
}), /*#__PURE__*/_jsx("div", {
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
131
|
+
...(isOpen ? {
|
|
132
|
+
className: "xfsso4q"
|
|
133
|
+
} : {
|
|
134
|
+
className: "xfsso4q x1s85apg"
|
|
135
|
+
}),
|
|
136
|
+
children: children
|
|
225
137
|
})]
|
|
226
138
|
});
|
|
227
139
|
}
|
|
@@ -1,17 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file CollapsibleGroup.tsx
|
|
3
|
-
* @input Uses React useState, useCallback, CollapsibleGroupContext
|
|
3
|
+
* @input Uses React useState, useCallback, CollapsibleGroupContext
|
|
4
4
|
* @output Exports CollapsibleGroup component and CollapsibleGroupProps
|
|
5
|
-
* @position Core collapsible group coordination provider — renders no wrapper
|
|
6
|
-
* DOM unless `dividers` is enabled
|
|
5
|
+
* @position Core collapsible group coordination provider — renders no wrapper DOM
|
|
7
6
|
*
|
|
8
7
|
* CollapsibleGroup groups collapsible components (Card, etc.) with
|
|
9
|
-
* coordinated open/close behavior.
|
|
10
|
-
*
|
|
11
|
-
* wrapper div that anchors the divider chrome (outer borders, reliable
|
|
12
|
-
* :first-child suppression) and provides dividers/density to items via
|
|
13
|
-
* CollapsibleGroupPresentationContext — each Collapsible draws its own
|
|
14
|
-
* borders since StyleX has no child selectors.
|
|
8
|
+
* coordinated open/close behavior. It renders only `{children}` — no wrapper
|
|
9
|
+
* DOM element.
|
|
15
10
|
*
|
|
16
11
|
* In "single" mode (default), only one item can be open at a time.
|
|
17
12
|
* In "multiple" mode, any number of items can be open simultaneously.
|
|
@@ -24,7 +19,6 @@
|
|
|
24
19
|
* - /packages/cli/templates/blocks/components/Collapsible/ (showcase blocks)
|
|
25
20
|
*/
|
|
26
21
|
import React, { type ReactNode } from 'react';
|
|
27
|
-
import type { CollapsibleGroupDensity, CollapsibleGroupDividers } from './CollapsibleGroupContext';
|
|
28
22
|
import type { BaseProps } from '../BaseProps';
|
|
29
23
|
export interface CollapsibleGroupProps extends Omit<BaseProps<HTMLElement>, 'onChange'> {
|
|
30
24
|
ref?: React.Ref<HTMLElement>;
|
|
@@ -47,22 +41,6 @@ export interface CollapsibleGroupProps extends Omit<BaseProps<HTMLElement>, 'onC
|
|
|
47
41
|
* Callback when the open item(s) change.
|
|
48
42
|
*/
|
|
49
43
|
onChange?: (value: string | string[]) => void;
|
|
50
|
-
/**
|
|
51
|
-
* Divider style rendered around the group's items — the accordion row
|
|
52
|
-
* chrome. 'between' draws hairlines between adjacent items; 'all' adds the
|
|
53
|
-
* group's top and bottom edges. When enabled, the group renders a wrapper
|
|
54
|
-
* div (it otherwise renders no DOM) and items get 'balanced' density unless
|
|
55
|
-
* `density` says otherwise. Pair with bare Collapsible children; Card-wrapped
|
|
56
|
-
* items provide their own separation.
|
|
57
|
-
* @default "none"
|
|
58
|
-
*/
|
|
59
|
-
dividers?: CollapsibleGroupDividers;
|
|
60
|
-
/**
|
|
61
|
-
* Row density controlling trigger and content block padding on the group's
|
|
62
|
-
* items. Defaults to 'balanced' when dividers are shown; otherwise items
|
|
63
|
-
* keep their default unpadded look.
|
|
64
|
-
*/
|
|
65
|
-
density?: CollapsibleGroupDensity;
|
|
66
44
|
/**
|
|
67
45
|
* Children — any components that support isCollapsible + value.
|
|
68
46
|
*
|
|
@@ -91,26 +69,16 @@ export interface CollapsibleGroupProps extends Omit<BaseProps<HTMLElement>, 'onC
|
|
|
91
69
|
}
|
|
92
70
|
/**
|
|
93
71
|
* Groups collapsible components with coordinated open/close behavior.
|
|
94
|
-
* Renders no wrapper DOM
|
|
72
|
+
* Renders no wrapper DOM.
|
|
95
73
|
*
|
|
96
74
|
* In "single" mode (default), opening one item closes the others.
|
|
97
75
|
* In "multiple" mode, items toggle independently.
|
|
98
76
|
*
|
|
99
77
|
* @compositionHint Wrap Collapsible instances to coordinate their open/close state.
|
|
100
|
-
* Each Collapsible needs a `value` prop to participate.
|
|
101
|
-
* use `dividers` with bare Collapsible children instead of wrapping each item
|
|
102
|
-
* in Card.
|
|
78
|
+
* Each Collapsible needs a `value` prop to participate.
|
|
103
79
|
*
|
|
104
80
|
* @example
|
|
105
81
|
* ```
|
|
106
|
-
* <CollapsibleGroup type="single" dividers="between" defaultValue="faq1">
|
|
107
|
-
* <Collapsible trigger="What is Astryx?" value="faq1">
|
|
108
|
-
* Astryx is a design system for building internal tools.
|
|
109
|
-
* </Collapsible>
|
|
110
|
-
* <Collapsible trigger="How do I start?" value="faq2">
|
|
111
|
-
* Install the package and import components.
|
|
112
|
-
* </Collapsible>
|
|
113
|
-
* </CollapsibleGroup>
|
|
114
82
|
* <CollapsibleGroup type="single" defaultValue="faq1">
|
|
115
83
|
* <VStack gap={2}>
|
|
116
84
|
* <Card>
|
|
@@ -127,7 +95,7 @@ export interface CollapsibleGroupProps extends Omit<BaseProps<HTMLElement>, 'onC
|
|
|
127
95
|
* </CollapsibleGroup>
|
|
128
96
|
* ```
|
|
129
97
|
*/
|
|
130
|
-
export declare function CollapsibleGroup({ type, defaultValue, value: controlledValue, onChange,
|
|
98
|
+
export declare function CollapsibleGroup({ type, defaultValue, value: controlledValue, onChange, children, }: CollapsibleGroupProps): React.JSX.Element;
|
|
131
99
|
export declare namespace CollapsibleGroup {
|
|
132
100
|
var displayName: string;
|
|
133
101
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CollapsibleGroup.d.ts","sourceRoot":"","sources":["../../src/Collapsible/CollapsibleGroup.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"CollapsibleGroup.d.ts","sourceRoot":"","sources":["../../src/Collapsible/CollapsibleGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG5E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAE7B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAEjC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IAE9C;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AASD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAe,EACf,YAAY,EACZ,KAAK,EAAE,eAAe,EACtB,QAAQ,EACR,QAAQ,GACT,EAAE,qBAAqB,qBAuDvB;yBA7De,gBAAgB"}
|
|
@@ -4,18 +4,13 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file CollapsibleGroup.tsx
|
|
7
|
-
* @input Uses React useState, useCallback, CollapsibleGroupContext
|
|
7
|
+
* @input Uses React useState, useCallback, CollapsibleGroupContext
|
|
8
8
|
* @output Exports CollapsibleGroup component and CollapsibleGroupProps
|
|
9
|
-
* @position Core collapsible group coordination provider — renders no wrapper
|
|
10
|
-
* DOM unless `dividers` is enabled
|
|
9
|
+
* @position Core collapsible group coordination provider — renders no wrapper DOM
|
|
11
10
|
*
|
|
12
11
|
* CollapsibleGroup groups collapsible components (Card, etc.) with
|
|
13
|
-
* coordinated open/close behavior.
|
|
14
|
-
*
|
|
15
|
-
* wrapper div that anchors the divider chrome (outer borders, reliable
|
|
16
|
-
* :first-child suppression) and provides dividers/density to items via
|
|
17
|
-
* CollapsibleGroupPresentationContext — each Collapsible draws its own
|
|
18
|
-
* borders since StyleX has no child selectors.
|
|
12
|
+
* coordinated open/close behavior. It renders only `{children}` — no wrapper
|
|
13
|
+
* DOM element.
|
|
19
14
|
*
|
|
20
15
|
* In "single" mode (default), only one item can be open at a time.
|
|
21
16
|
* In "multiple" mode, any number of items can be open simultaneously.
|
|
@@ -28,24 +23,8 @@
|
|
|
28
23
|
* - /packages/cli/templates/blocks/components/Collapsible/ (showcase blocks)
|
|
29
24
|
*/
|
|
30
25
|
import React, { useCallback, useMemo, useState } from 'react';
|
|
31
|
-
import
|
|
32
|
-
import "../theme/tokens.stylex.js";
|
|
33
|
-
import { borderVars, colorVars } from "../theme/tokens.stylex.js";
|
|
34
|
-
import { CollapsibleGroupContext, CollapsibleGroupPresentationContext } from "./CollapsibleGroupContext.js";
|
|
35
|
-
import { mergeProps } from "../utils/index.js";
|
|
36
|
-
import { themeProps } from "../utils/themeProps.js";
|
|
26
|
+
import { CollapsibleGroupContext } from "./CollapsibleGroupContext.js";
|
|
37
27
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
38
|
-
const styles = {
|
|
39
|
-
wrapperAll: {
|
|
40
|
-
kEafiO: "x11xkdxz",
|
|
41
|
-
kPef9Z: "x13fuv20",
|
|
42
|
-
kLZC3w: "x1pc3f07",
|
|
43
|
-
kt9PQ7: "x92x3c3",
|
|
44
|
-
kfdmCh: "x1q0q8m5",
|
|
45
|
-
kL6WhQ: "xw8gpjh",
|
|
46
|
-
$$css: true
|
|
47
|
-
}
|
|
48
|
-
};
|
|
49
28
|
function normalizeToArray(value) {
|
|
50
29
|
if (value == null) {
|
|
51
30
|
return [];
|
|
@@ -55,26 +34,16 @@ function normalizeToArray(value) {
|
|
|
55
34
|
|
|
56
35
|
/**
|
|
57
36
|
* Groups collapsible components with coordinated open/close behavior.
|
|
58
|
-
* Renders no wrapper DOM
|
|
37
|
+
* Renders no wrapper DOM.
|
|
59
38
|
*
|
|
60
39
|
* In "single" mode (default), opening one item closes the others.
|
|
61
40
|
* In "multiple" mode, items toggle independently.
|
|
62
41
|
*
|
|
63
42
|
* @compositionHint Wrap Collapsible instances to coordinate their open/close state.
|
|
64
|
-
* Each Collapsible needs a `value` prop to participate.
|
|
65
|
-
* use `dividers` with bare Collapsible children instead of wrapping each item
|
|
66
|
-
* in Card.
|
|
43
|
+
* Each Collapsible needs a `value` prop to participate.
|
|
67
44
|
*
|
|
68
45
|
* @example
|
|
69
46
|
* ```
|
|
70
|
-
* <CollapsibleGroup type="single" dividers="between" defaultValue="faq1">
|
|
71
|
-
* <Collapsible trigger="What is Astryx?" value="faq1">
|
|
72
|
-
* Astryx is a design system for building internal tools.
|
|
73
|
-
* </Collapsible>
|
|
74
|
-
* <Collapsible trigger="How do I start?" value="faq2">
|
|
75
|
-
* Install the package and import components.
|
|
76
|
-
* </Collapsible>
|
|
77
|
-
* </CollapsibleGroup>
|
|
78
47
|
* <CollapsibleGroup type="single" defaultValue="faq1">
|
|
79
48
|
* <VStack gap={2}>
|
|
80
49
|
* <Card>
|
|
@@ -96,14 +65,7 @@ export function CollapsibleGroup({
|
|
|
96
65
|
defaultValue,
|
|
97
66
|
value: controlledValue,
|
|
98
67
|
onChange,
|
|
99
|
-
|
|
100
|
-
density,
|
|
101
|
-
children,
|
|
102
|
-
ref,
|
|
103
|
-
xstyle,
|
|
104
|
-
className,
|
|
105
|
-
style,
|
|
106
|
-
...props
|
|
68
|
+
children
|
|
107
69
|
}) {
|
|
108
70
|
const isControlled = controlledValue !== undefined;
|
|
109
71
|
const [internalValue, setInternalValue] = useState(() => normalizeToArray(defaultValue));
|
|
@@ -134,32 +96,9 @@ export function CollapsibleGroup({
|
|
|
134
96
|
isOpen,
|
|
135
97
|
toggle
|
|
136
98
|
}), [isOpen, toggle]);
|
|
137
|
-
const hasDividers = dividers !== 'none';
|
|
138
|
-
const resolvedDensity = density ?? (hasDividers ? 'balanced' : null);
|
|
139
|
-
const presentationValue = useMemo(() => ({
|
|
140
|
-
dividers,
|
|
141
|
-
density: resolvedDensity
|
|
142
|
-
}), [dividers, resolvedDensity]);
|
|
143
|
-
|
|
144
|
-
// The wrapper anchors divider chrome: 'all' outer borders live here, and it
|
|
145
|
-
// makes the items' :first-child suppression independent of surrounding
|
|
146
|
-
// siblings. Without dividers the group stays DOM-less (documented contract),
|
|
147
|
-
// so ref/xstyle/className/style only take effect in wrapper mode.
|
|
148
|
-
const content = hasDividers ? /*#__PURE__*/_jsx("div", {
|
|
149
|
-
ref: ref,
|
|
150
|
-
...mergeProps(themeProps('collapsible-group', {
|
|
151
|
-
dividers,
|
|
152
|
-
density: resolvedDensity ?? undefined
|
|
153
|
-
}), stylex.props(dividers === 'all' && styles.wrapperAll, xstyle), className, style),
|
|
154
|
-
...props,
|
|
155
|
-
children: children
|
|
156
|
-
}) : children;
|
|
157
99
|
return /*#__PURE__*/_jsx(CollapsibleGroupContext, {
|
|
158
100
|
value: contextValue,
|
|
159
|
-
children:
|
|
160
|
-
value: presentationValue,
|
|
161
|
-
children: content
|
|
162
|
-
})
|
|
101
|
+
children: children
|
|
163
102
|
});
|
|
164
103
|
}
|
|
165
104
|
CollapsibleGroup.displayName = 'CollapsibleGroup';
|
|
@@ -12,35 +12,4 @@ export interface CollapsibleGroupContextValue {
|
|
|
12
12
|
* When present, collapsible components defer their open/close state to the group.
|
|
13
13
|
*/
|
|
14
14
|
export declare const CollapsibleGroupContext: import("react").Context<CollapsibleGroupContextValue | null>;
|
|
15
|
-
/**
|
|
16
|
-
* Divider style rendered around the items of a CollapsibleGroup.
|
|
17
|
-
* - 'between': hairlines between adjacent items only.
|
|
18
|
-
* - 'all': hairlines between items plus the group's top and bottom edges.
|
|
19
|
-
* - 'none': no dividers (default).
|
|
20
|
-
*/
|
|
21
|
-
export type CollapsibleGroupDividers = 'between' | 'all' | 'none';
|
|
22
|
-
/**
|
|
23
|
-
* Row density for the items of a CollapsibleGroup, controlling trigger and
|
|
24
|
-
* content block padding. Shares the repo-wide density vocabulary
|
|
25
|
-
* (Table, List, Item).
|
|
26
|
-
*/
|
|
27
|
-
export type CollapsibleGroupDensity = 'compact' | 'balanced' | 'spacious';
|
|
28
|
-
/**
|
|
29
|
-
* Presentation value provided by CollapsibleGroup so each Collapsible can
|
|
30
|
-
* draw its own group chrome (StyleX has no child selectors, so the group
|
|
31
|
-
* cannot style items from the outside).
|
|
32
|
-
*/
|
|
33
|
-
export interface CollapsibleGroupPresentationValue {
|
|
34
|
-
/** Resolved divider style for the group's items. */
|
|
35
|
-
dividers: CollapsibleGroupDividers;
|
|
36
|
-
/** Resolved row density, or null to keep the default (unpadded) look. */
|
|
37
|
-
density: CollapsibleGroupDensity | null;
|
|
38
|
-
}
|
|
39
|
-
/**
|
|
40
|
-
* Context for collapsible group presentation (dividers, density).
|
|
41
|
-
* Kept separate from CollapsibleGroupContext so the public useCollapsible
|
|
42
|
-
* state API is unaffected. Collapsible resets this context around its
|
|
43
|
-
* children so nested collapsibles never inherit row chrome.
|
|
44
|
-
*/
|
|
45
|
-
export declare const CollapsibleGroupPresentationContext: import("react").Context<CollapsibleGroupPresentationValue | null>;
|
|
46
15
|
//# sourceMappingURL=CollapsibleGroupContext.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CollapsibleGroupContext.d.ts","sourceRoot":"","sources":["../../src/Collapsible/CollapsibleGroupContext.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CollapsibleGroupContext.d.ts","sourceRoot":"","sources":["../../src/Collapsible/CollapsibleGroupContext.tsx"],"names":[],"mappings":"AAkBA;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C,gDAAgD;IAChD,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACnC,8CAA8C;IAC9C,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,8DACsB,CAAC"}
|
|
@@ -5,10 +5,8 @@
|
|
|
5
5
|
/**
|
|
6
6
|
* @file CollapsibleGroupContext.tsx
|
|
7
7
|
* @input Uses React createContext
|
|
8
|
-
* @output Exports CollapsibleGroupContext
|
|
9
|
-
*
|
|
10
|
-
* CollapsibleGroupDividers, and CollapsibleGroupDensity types
|
|
11
|
-
* @position Context definitions for collapsible group coordination and presentation
|
|
8
|
+
* @output Exports CollapsibleGroupContext and CollapsibleGroupContextValue type
|
|
9
|
+
* @position Context definition for collapsible group coordination
|
|
12
10
|
*
|
|
13
11
|
* SYNC: When modified, update these files to stay in sync:
|
|
14
12
|
* - /packages/core/src/Collapsible/CollapsibleGroup.tsx (provider)
|
|
@@ -26,32 +24,4 @@ import { createContext } from 'react';
|
|
|
26
24
|
* When present, collapsible components defer their open/close state to the group.
|
|
27
25
|
*/
|
|
28
26
|
export const CollapsibleGroupContext = /*#__PURE__*/createContext(null);
|
|
29
|
-
CollapsibleGroupContext.displayName = 'CollapsibleGroupContext';
|
|
30
|
-
|
|
31
|
-
/**
|
|
32
|
-
* Divider style rendered around the items of a CollapsibleGroup.
|
|
33
|
-
* - 'between': hairlines between adjacent items only.
|
|
34
|
-
* - 'all': hairlines between items plus the group's top and bottom edges.
|
|
35
|
-
* - 'none': no dividers (default).
|
|
36
|
-
*/
|
|
37
|
-
|
|
38
|
-
/**
|
|
39
|
-
* Row density for the items of a CollapsibleGroup, controlling trigger and
|
|
40
|
-
* content block padding. Shares the repo-wide density vocabulary
|
|
41
|
-
* (Table, List, Item).
|
|
42
|
-
*/
|
|
43
|
-
|
|
44
|
-
/**
|
|
45
|
-
* Presentation value provided by CollapsibleGroup so each Collapsible can
|
|
46
|
-
* draw its own group chrome (StyleX has no child selectors, so the group
|
|
47
|
-
* cannot style items from the outside).
|
|
48
|
-
*/
|
|
49
|
-
|
|
50
|
-
/**
|
|
51
|
-
* Context for collapsible group presentation (dividers, density).
|
|
52
|
-
* Kept separate from CollapsibleGroupContext so the public useCollapsible
|
|
53
|
-
* state API is unaffected. Collapsible resets this context around its
|
|
54
|
-
* children so nested collapsibles never inherit row chrome.
|
|
55
|
-
*/
|
|
56
|
-
export const CollapsibleGroupPresentationContext = /*#__PURE__*/createContext(null);
|
|
57
|
-
CollapsibleGroupPresentationContext.displayName = 'CollapsibleGroupPresentationContext';
|
|
27
|
+
CollapsibleGroupContext.displayName = 'CollapsibleGroupContext';
|
|
@@ -10,7 +10,6 @@ export { Collapsible } from './Collapsible';
|
|
|
10
10
|
export type { CollapsibleProps } from './Collapsible';
|
|
11
11
|
export { CollapsibleGroup } from './CollapsibleGroup';
|
|
12
12
|
export type { CollapsibleGroupProps } from './CollapsibleGroup';
|
|
13
|
-
export type { CollapsibleGroupDividers, CollapsibleGroupDensity, } from './CollapsibleGroupContext';
|
|
14
13
|
export { useCollapsible } from './useCollapsible';
|
|
15
14
|
export type { CollapsibleConfig, UseCollapsibleOptions, UseCollapsibleReturn, } from './useCollapsible';
|
|
16
15
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Collapsible/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAEpD,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AACpD,YAAY,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Collapsible/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAEpD,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AACpD,YAAY,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAE9D,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,YAAY,EACV,iBAAiB,EACjB,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,kBAAkB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAqBrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAEjD,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;
|
|
1
|
+
{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAqBrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAEjD,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;AAsCtC,MAAM,MAAM,mBAAmB,GAAG,oBAAoB,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,CAAC;AAMnD,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,oDAAoD;IACpD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAC9C,+DAA+D;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,wCAAwC;IACxC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,gDAAgD;IAChD,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,UAAU,wBAAyB,SAAQ,oBAAoB;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+CAA+C;IAC/C,WAAW,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,wBAAwB,CAAC;AAM/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,IAAW,EACX,KAAsB,EACtB,UAAkB,EAClB,YAAY,EACZ,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EACb,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAwOlB;yBAtPe,WAAW"}
|
|
@@ -60,7 +60,6 @@ const styles = {
|
|
|
60
60
|
k1ekBW: "x19991ni",
|
|
61
61
|
kIyJzY: "xuedmi6",
|
|
62
62
|
kAMwcw: "xlr8y92",
|
|
63
|
-
kfSwDN: "x87ps6o",
|
|
64
63
|
$$css: true
|
|
65
64
|
},
|
|
66
65
|
popover: {
|
|
@@ -298,7 +297,6 @@ export function ContextMenu({
|
|
|
298
297
|
role: "menu",
|
|
299
298
|
"aria-label": label,
|
|
300
299
|
onKeyDown: listKeyDown,
|
|
301
|
-
onContextMenu: e => e.preventDefault(),
|
|
302
300
|
...mergeProps(themeProps('context-menu'), stylex.props(styles.menu, xstyle), className, style),
|
|
303
301
|
children: /*#__PURE__*/_jsx(DropdownMenuContext, {
|
|
304
302
|
value: contextValue,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"AAuCA,OAAO,EAEL,KAAK,WAAW,EAMjB,MAAM,UAAU,CAAC;AA4BlB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG;IACvC,QAAQ,CAAC,OAAO,EAAE,mBAAmB,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,KAAK,GAAG,KAAK,CAAC;AAEpD,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD,YAAY,EACV,WAAW,IAAI,mBAAmB,EAClC,eAAe,IAAI,uBAAuB,GAC3C,MAAM,UAAU,CAAC;AAiFlB,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAC9C,SAAS,EACT,UAAU,GAAG,cAAc,CAC5B;IACC,8CAA8C;IAC9C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAElC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAE1B;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE9E;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,GAAG,CAAC,EAAE,iBAAiB,CAAC;IAExB;;;OAGG;IACH,GAAG,CAAC,EAAE,iBAAiB,CAAC;IAExB;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;IAEzD;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,uBAAuB,CAAC;IAErC;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IAEzB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CACxB;AAqCD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,UAAkB,EAClB,UAAkB,EAClB,aAAiB,EACjB,QAAgB,EAChB,WAA6B,EAC7B,eAAiC,EACjC,SAAS,EACT,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EACZ,cAAkB,EAClB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,kBAAkB,+
|
|
1
|
+
{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -598,10 +598,8 @@ export function DateTimeInput({
|
|
|
598
598
|
"aria-disabled": showsDisabledMessage ? 'true' : undefined,
|
|
599
599
|
readOnly: showsDisabledMessage || undefined,
|
|
600
600
|
"aria-label": timeLabel ?? `${label} time`,
|
|
601
|
-
"aria-describedby": ariaDescribedBy,
|
|
602
601
|
"aria-required": isRequired === true ? 'true' : undefined,
|
|
603
602
|
"aria-invalid": status?.type === 'error' || !isTimeInputValid ? 'true' : undefined,
|
|
604
|
-
"aria-busy": isBusy || undefined,
|
|
605
603
|
...{
|
|
606
604
|
0: {
|
|
607
605
|
className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5"
|
package/dist/Grid/Grid.d.ts
CHANGED
|
@@ -26,10 +26,9 @@ export type GridAlignment = 'start' | 'center' | 'end' | 'stretch';
|
|
|
26
26
|
* - `minWidth` — minimum width (px) for each column track
|
|
27
27
|
* - `repeat` — `'fill'` (default) preserves empty tracks for consistent widths;
|
|
28
28
|
* `'fit'` collapses empty tracks so items stretch to fill
|
|
29
|
-
* - `max` — caps the maximum number of columns
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
* (no dead space on the right).
|
|
29
|
+
* - `max` — caps the maximum number of columns by limiting track max size.
|
|
30
|
+
* The grid stretches to 100% of its parent; `max` only limits how many
|
|
31
|
+
* columns appear.
|
|
33
32
|
*/
|
|
34
33
|
export type GridColumns = number | {
|
|
35
34
|
minWidth: number;
|
package/dist/Grid/Grid.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/Grid/Grid.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C;;GAEG;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAEnE
|
|
1
|
+
{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/Grid/Grid.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C;;GAEG;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAEnE;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,WAAW,GACnB,MAAM,GACN;IACE,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CACzB,CAAC;AAEN,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA2MD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,aAAiB,EACjB,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BA2FX;yBA9Ge,IAAI"}
|
package/dist/Grid/Grid.js
CHANGED
|
@@ -32,10 +32,9 @@ import { themeProps } from "../utils/themeProps.js";
|
|
|
32
32
|
* - `minWidth` — minimum width (px) for each column track
|
|
33
33
|
* - `repeat` — `'fill'` (default) preserves empty tracks for consistent widths;
|
|
34
34
|
* `'fit'` collapses empty tracks so items stretch to fill
|
|
35
|
-
* - `max` — caps the maximum number of columns
|
|
36
|
-
*
|
|
37
|
-
*
|
|
38
|
-
* (no dead space on the right).
|
|
35
|
+
* - `max` — caps the maximum number of columns by limiting track max size.
|
|
36
|
+
* The grid stretches to 100% of its parent; `max` only limits how many
|
|
37
|
+
* columns appear.
|
|
39
38
|
*/
|
|
40
39
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
41
40
|
const baseStyles = {
|
|
@@ -257,32 +256,16 @@ const spacingVarNames = {
|
|
|
257
256
|
};
|
|
258
257
|
|
|
259
258
|
/**
|
|
260
|
-
* Build a grid-template-columns value that caps
|
|
261
|
-
*
|
|
262
|
-
* the
|
|
263
|
-
*
|
|
264
|
-
* The cap lives on the track's **min** size, not its max: each track is at
|
|
265
|
-
* least `perColumn = (100% - (max-1) * gap) / max`, so more than `max` columns
|
|
266
|
-
* can never fit. The track **max** stays `1fr`, so whenever fewer than `max`
|
|
267
|
-
* columns fit (most importantly a lone column on mobile) they still grow to
|
|
268
|
-
* fill the whole row — no dead space on the right.
|
|
269
|
-
*
|
|
270
|
-
* The track min is `max(minWidth, perColumn)` so an explicit `minWidth` is
|
|
271
|
-
* still honored, wrapped in `min(100%, …)` so a single column on a viewport
|
|
272
|
-
* narrower than `minWidth`/`perColumn` shrinks to the container instead of
|
|
273
|
-
* overflowing it.
|
|
259
|
+
* Build a grid-template-columns value that caps columns at `max` by
|
|
260
|
+
* limiting each track's max size to `(100% - (max-1) * gap) / max`.
|
|
261
|
+
* The grid stays 100% width; the track-max prevents more than `max` columns.
|
|
274
262
|
*/
|
|
275
263
|
function buildCappedTemplate(minWidth, maxCols, repeatMode, gap, columnGap) {
|
|
276
264
|
const gapVar = columnGap != null ? spacingVarNames[columnGap] : gap != null ? spacingVarNames[gap] : null;
|
|
277
265
|
|
|
278
|
-
//
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
const perColumn = gapVar ? `calc((100% - ${maxCols - 1} * var(${gapVar})) / ${maxCols})` : `calc(100% / ${maxCols})`;
|
|
282
|
-
|
|
283
|
-
// Track min caps the count; track max stays 1fr so present columns fill.
|
|
284
|
-
const trackMin = `min(100%, max(${minWidth}px, ${perColumn}))`;
|
|
285
|
-
return `repeat(${repeatMode}, minmax(${trackMin}, 1fr))`;
|
|
266
|
+
// trackMax = (100% - (maxCols - 1) * gap) / maxCols
|
|
267
|
+
const trackMax = gapVar ? `calc((100% - ${maxCols - 1} * var(${gapVar})) / ${maxCols})` : `calc(100% / ${maxCols})`;
|
|
268
|
+
return `repeat(${repeatMode}, minmax(${minWidth}px, ${trackMax}))`;
|
|
286
269
|
}
|
|
287
270
|
|
|
288
271
|
/**
|
package/dist/Icon/Icon.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAC;AAqBnD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2Df,CAAC;AAEH;;;GAGG;AACH,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;EAiBd,CAAC;AAiCH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACjD,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAC;AAE/C;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,QAAQ,CAAC,aAAa,CAAC,EACvB,KAAK,GAAG,OAAO,CAChB;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;OAIG;IACH,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAMD;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAiB,EACjB,IAAW,EACX,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,qBA0BX;yBAhCe,IAAI;;;
|
|
1
|
+
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAC;AAqBnD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2Df,CAAC;AAEH;;;GAGG;AACH,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;EAiBd,CAAC;AAiCH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACjD,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAC;AAE/C;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,QAAQ,CAAC,aAAa,CAAC,EACvB,KAAK,GAAG,OAAO,CAChB;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;OAIG;IACH,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAMD;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAiB,EACjB,IAAW,EACX,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,qBA0BX;yBAhCe,IAAI;;;AA6EpB;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,QAAQ,EAChC,KAAK,CAAC,EAAE;IAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAC,GAC3C,KAAK,CAAC,SAAS,CAYjB"}
|