@astryxdesign/core 0.3.0-canary.4c528d0 → 0.3.0-canary.505ccaa
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/Avatar/Avatar.d.ts.map +1 -1
- package/dist/Avatar/Avatar.js +2 -10
- package/dist/AvatarGroup/AvatarGroupOverflow.d.ts.map +1 -1
- package/dist/AvatarGroup/AvatarGroupOverflow.js +2 -3
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +11 -15
- package/dist/Calendar/Calendar.d.ts.map +1 -1
- package/dist/Calendar/Calendar.js +2 -1
- package/dist/Calendar/styles.d.ts +0 -2
- package/dist/Calendar/styles.d.ts.map +1 -1
- package/dist/Calendar/styles.js +0 -2
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +35 -125
- package/dist/ClickableCard/ClickableCard.d.ts.map +1 -1
- package/dist/ClickableCard/ClickableCard.js +3 -11
- package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
- package/dist/CodeBlock/CodeBlock.js +19 -8
- package/dist/Collapsible/Collapsible.d.ts.map +1 -1
- package/dist/Collapsible/Collapsible.js +2 -3
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +4 -4
- package/dist/DropdownMenu/DropdownMenu.d.ts +5 -0
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +46 -7
- package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts +8 -11
- package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuCheckboxItem.js +32 -31
- package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts +5 -5
- package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuRadioItem.js +24 -67
- package/dist/Indicator/CheckIndicator.d.ts +26 -0
- package/dist/Indicator/CheckIndicator.d.ts.map +1 -0
- package/dist/Indicator/CheckIndicator.js +118 -0
- package/dist/Indicator/CheckboxIndicator.d.ts +22 -0
- package/dist/Indicator/CheckboxIndicator.d.ts.map +1 -0
- package/dist/Indicator/CheckboxIndicator.js +173 -0
- package/dist/Indicator/RadioIndicator.d.ts +23 -0
- package/dist/Indicator/RadioIndicator.d.ts.map +1 -0
- package/dist/Indicator/RadioIndicator.js +137 -0
- package/dist/Indicator/index.d.ts +24 -0
- package/dist/Indicator/index.d.ts.map +1 -0
- package/dist/Indicator/index.js +26 -0
- package/dist/Indicator/indicator.markers.stylex.d.ts +16 -0
- package/dist/Indicator/indicator.markers.stylex.d.ts.map +1 -0
- package/dist/Indicator/indicator.markers.stylex.js +21 -0
- package/dist/Indicator/indicatorRegistry.d.ts +36 -0
- package/dist/Indicator/indicatorRegistry.d.ts.map +1 -0
- package/dist/Indicator/indicatorRegistry.js +53 -0
- package/dist/Indicator/types.d.ts +142 -0
- package/dist/Indicator/types.d.ts.map +1 -0
- package/dist/Indicator/types.js +1 -0
- package/dist/Indicator/useIndicator.d.ts +12 -0
- package/dist/Indicator/useIndicator.d.ts.map +1 -0
- package/dist/Indicator/useIndicator.js +24 -0
- package/dist/Item/Item.d.ts.map +1 -1
- package/dist/Item/Item.js +2 -6
- package/dist/Link/Link.d.ts.map +1 -1
- package/dist/Link/Link.js +4 -5
- package/dist/Outline/Outline.d.ts.map +1 -1
- package/dist/Outline/Outline.js +2 -3
- package/dist/Pagination/Pagination.d.ts.map +1 -1
- package/dist/Pagination/Pagination.js +30 -26
- package/dist/RadioList/RadioListItem.d.ts.map +1 -1
- package/dist/RadioList/RadioListItem.js +29 -84
- package/dist/Resizable/ResizeHandle.d.ts.map +1 -1
- package/dist/Resizable/ResizeHandle.js +2 -3
- package/dist/SegmentedControl/SegmentedControlItem.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControlItem.js +2 -3
- package/dist/SelectableCard/SelectableCard.d.ts.map +1 -1
- package/dist/SelectableCard/SelectableCard.js +3 -11
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +10 -8
- package/dist/TabList/Tab.d.ts.map +1 -1
- package/dist/TabList/Tab.js +2 -3
- package/dist/TabList/TabMenu.d.ts.map +1 -1
- package/dist/TabList/TabMenu.js +27 -11
- package/dist/Table/BaseTable.d.ts.map +1 -1
- package/dist/Table/BaseTable.js +8 -0
- package/dist/Table/index.d.ts +1 -1
- package/dist/Table/index.d.ts.map +1 -1
- package/dist/Table/index.js +1 -1
- package/dist/Table/plugins/groupedRows/useTableGroupedRows.d.ts +1 -1
- package/dist/Table/plugins/groupedRows/useTableGroupedRows.js +1 -1
- package/dist/Table/plugins/rowExpansion/index.d.ts +1 -1
- package/dist/Table/plugins/rowExpansion/index.d.ts.map +1 -1
- package/dist/Table/plugins/rowExpansion/index.js +1 -1
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts +41 -76
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map +1 -1
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +88 -333
- package/dist/Table/plugins/sortable/useTableSortable.d.ts.map +1 -1
- package/dist/Table/plugins/sortable/useTableSortable.js +23 -4
- package/dist/Table/types.d.ts +6 -0
- package/dist/Table/types.d.ts.map +1 -1
- package/dist/Thumbnail/Thumbnail.d.ts.map +1 -1
- package/dist/Thumbnail/Thumbnail.js +32 -26
- package/dist/Token/Token.d.ts.map +1 -1
- package/dist/Token/Token.js +20 -11
- package/dist/TopNav/TopNavItem.d.ts.map +1 -1
- package/dist/TopNav/TopNavItem.js +3 -9
- package/dist/TopNav/TopNavMegaMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMegaMenu.js +27 -8
- package/dist/TopNav/TopNavMegaMenuItem.d.ts.map +1 -1
- package/dist/TopNav/TopNavMegaMenuItem.js +22 -3
- package/dist/TopNav/TopNavMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMenu.js +43 -11
- package/dist/TreeList/TreeListItem.d.ts.map +1 -1
- package/dist/TreeList/TreeListItem.js +12 -10
- package/dist/astryx.css +18 -25
- package/dist/astryx.umd.js +48 -48
- package/dist/astryx.umd.js.map +4 -4
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +1 -0
- package/dist/hooks/useIndicatorFocusRing.d.ts +29 -0
- package/dist/hooks/useIndicatorFocusRing.d.ts.map +1 -0
- package/dist/hooks/useIndicatorFocusRing.js +97 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/theme/defineTheme.d.ts +16 -0
- package/dist/theme/defineTheme.d.ts.map +1 -1
- package/dist/theme/defineTheme.js +8 -0
- package/dist/theme/index.d.ts +1 -0
- package/dist/theme/index.d.ts.map +1 -1
- package/dist/utils/focusOutline.stylex.d.ts +107 -0
- package/dist/utils/focusOutline.stylex.d.ts.map +1 -0
- package/dist/utils/focusOutline.stylex.js +130 -0
- package/dist/utils/themeProps.d.ts +20 -1
- package/dist/utils/themeProps.d.ts.map +1 -1
- package/dist/utils/themeProps.js +8 -2
- package/package.json +7 -2
- package/src/Avatar/Avatar.tsx +2 -28
- package/src/AvatarGroup/AvatarGroupOverflow.tsx +2 -9
- package/src/Button/Button.tsx +21 -41
- package/src/Calendar/Calendar.tsx +2 -1
- package/src/Calendar/styles.ts +0 -8
- package/src/CheckboxInput/CheckboxInput.doc.mjs +4 -2
- package/src/CheckboxInput/CheckboxInput.test.tsx +83 -0
- package/src/CheckboxInput/CheckboxInput.tsx +44 -202
- package/src/ClickableCard/ClickableCard.tsx +6 -11
- package/src/CodeBlock/CodeBlock.tsx +2 -9
- package/src/Collapsible/Collapsible.tsx +2 -9
- package/src/Dialog/Dialog.tsx +2 -9
- package/src/DropdownMenu/DropdownMenu.doc.mjs +0 -5
- package/src/DropdownMenu/DropdownMenu.test.tsx +193 -4
- package/src/DropdownMenu/DropdownMenu.tsx +74 -30
- package/src/DropdownMenu/DropdownMenuCheckboxItem.tsx +27 -30
- package/src/DropdownMenu/DropdownMenuRadioItem.tsx +30 -76
- package/src/DropdownMenu/DropdownMenuSelectable.test.tsx +25 -19
- package/src/DropdownMenu/DropdownMenuSubMenu.test.tsx +44 -14
- package/src/Indicator/CheckIndicator.tsx +119 -0
- package/src/Indicator/CheckboxIndicator.tsx +251 -0
- package/src/Indicator/Indicator.doc.mjs +278 -0
- package/src/Indicator/Indicator.test.tsx +145 -0
- package/src/Indicator/RadioIndicator.tsx +196 -0
- package/src/Indicator/index.ts +42 -0
- package/src/Indicator/indicator.markers.stylex.ts +19 -0
- package/src/Indicator/indicatorRegistry.ts +72 -0
- package/src/Indicator/types.ts +158 -0
- package/src/Indicator/useIndicator.ts +29 -0
- package/src/Item/Item.tsx +2 -12
- package/src/Link/Link.tsx +4 -11
- package/src/MoreMenu/MoreMenu.test.tsx +28 -1
- package/src/Outline/Outline.tsx +2 -5
- package/src/Pagination/Pagination.tsx +2 -9
- package/src/RadioList/RadioList.doc.mjs +4 -2
- package/src/RadioList/RadioListItem.tsx +31 -130
- package/src/Resizable/ResizeHandle.tsx +2 -9
- package/src/SegmentedControl/SegmentedControlItem.tsx +2 -9
- package/src/SelectableCard/SelectableCard.tsx +4 -9
- package/src/Selector/Selector.test.tsx +59 -1
- package/src/Selector/Selector.tsx +57 -46
- package/src/TabList/Tab.tsx +2 -9
- package/src/TabList/TabMenu.tsx +3 -14
- package/src/Table/BaseTable.tsx +11 -0
- package/src/Table/index.ts +1 -4
- package/src/Table/plugins/groupedRows/useTableGroupedRows.tsx +1 -1
- package/src/Table/plugins/rowExpansion/index.ts +1 -4
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.test.tsx +125 -175
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +112 -474
- package/src/Table/plugins/sortable/useTableSortable.tsx +2 -6
- package/src/Table/types.ts +6 -0
- package/src/Table/useTableGroupedRows.doc.mjs +1 -1
- package/src/Table/useTableRowExpansion.doc.mjs +43 -66
- package/src/Thumbnail/Thumbnail.tsx +2 -9
- package/src/Token/Token.tsx +5 -28
- package/src/TopNav/TopNavItem.tsx +3 -21
- package/src/TopNav/TopNavMegaMenu.tsx +5 -9
- package/src/TopNav/TopNavMegaMenuItem.tsx +2 -9
- package/src/TopNav/TopNavMenu.tsx +6 -18
- package/src/TreeList/TreeList.test.tsx +7 -7
- package/src/TreeList/TreeListItem.tsx +18 -33
- package/src/hooks/index.ts +1 -0
- package/src/hooks/useIndicatorFocusRing.tsx +121 -0
- package/src/index.ts +1 -0
- package/src/theme/defineTheme.ts +24 -0
- package/src/theme/index.ts +13 -0
- package/src/utils/focusOutline.stylex.ts +163 -0
- package/src/utils/themeProps.ts +26 -4
- package/dist/CheckboxInput/checkbox.markers.stylex.d.ts +0 -9
- package/dist/CheckboxInput/checkbox.markers.stylex.d.ts.map +0 -1
- package/dist/CheckboxInput/checkbox.markers.stylex.js +0 -14
- package/dist/RadioList/radio.markers.stylex.d.ts +0 -7
- package/dist/RadioList/radio.markers.stylex.d.ts.map +0 -1
- package/dist/RadioList/radio.markers.stylex.js +0 -12
- package/src/CheckboxInput/checkbox.markers.stylex.ts +0 -12
- package/src/RadioList/radio.markers.stylex.ts +0 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAoC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAoC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAe5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AA4BrD;;;;;;GAMG;AACH,KAAK,eAAe,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzD;;GAEG;AACH,KAAK,iBAAiB,GACpB,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAE7D;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAgBpD;AA4HD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD;AA6ED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,WAAW,EACX,IAAI,EACJ,IAAW,EACX,GAAG,EACH,MAAM,EACN,OAAc,EACd,IAAI,EACJ,EAAE,EACF,MAAM,EACN,GAAG,EACH,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BA0Pb;yBA7Qe,MAAM"}
|
package/dist/Avatar/Avatar.js
CHANGED
|
@@ -25,6 +25,7 @@ import { AvatarSizeContext } from "./AvatarSizeContext.js";
|
|
|
25
25
|
import { useAvatarGroup } from "../AvatarGroup/AvatarGroupContext.js";
|
|
26
26
|
import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
27
27
|
import { themeProps } from "../utils/themeProps.js";
|
|
28
|
+
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
28
29
|
import { useTooltip } from "../Tooltip/useTooltip.js";
|
|
29
30
|
import { useLinkComponent } from "../Link/useLinkComponent.js";
|
|
30
31
|
import { useTranslator } from "../i18n/index.js";
|
|
@@ -130,11 +131,6 @@ const styles = {
|
|
|
130
131
|
kVAEAm: "x10l6tqk",
|
|
131
132
|
$$css: true
|
|
132
133
|
},
|
|
133
|
-
focusable: {
|
|
134
|
-
kI3sdo: "x17nn4n9",
|
|
135
|
-
kInvED: "x1wfwxd8 x7s97pk",
|
|
136
|
-
$$css: true
|
|
137
|
-
},
|
|
138
134
|
interactive: {
|
|
139
135
|
kysU6D: "xjyslct",
|
|
140
136
|
kmVPX3: "x1717udv",
|
|
@@ -147,10 +143,6 @@ const styles = {
|
|
|
147
143
|
kybGjl: "x1hl2dhg",
|
|
148
144
|
kkrTdU: "x1ypdohk",
|
|
149
145
|
kaIpWk: "xjspbzw",
|
|
150
|
-
kMeerF: "x1k57tk5 x784prv",
|
|
151
|
-
k3XXqK: "x1t137rt x9v5kkp",
|
|
152
|
-
kjBf7l: "xzunyri",
|
|
153
|
-
kInvED: "x1wfwxd8 x7s97pk",
|
|
154
146
|
$$css: true
|
|
155
147
|
}
|
|
156
148
|
};
|
|
@@ -445,7 +437,7 @@ export function Avatar({
|
|
|
445
437
|
// `<a>`/`<button>` and the static `<div>` carry the exact same box.
|
|
446
438
|
const rootStylexProps = mergeProps(themeProps('avatar', {
|
|
447
439
|
size: resolvedSize
|
|
448
|
-
}),
|
|
440
|
+
}), focusOutlineProps.focusVisible(styles.wrapper, isInteractive && styles.interactive, avatarGroup && groupStyles.ring, avatarGroup && groupStyles.overlap, avatarGroup && groupDynamicStyles.overlap(-avatarGroup.overlap), xstyle), className, style);
|
|
449
441
|
let rootElement;
|
|
450
442
|
|
|
451
443
|
// `props` is typed for the default `<div>` root (its event handlers are
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroupOverflow.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroupOverflow.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAW5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"AvatarGroupOverflow.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroupOverflow.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAW5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,WAAW,CAAC,EACtB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAoED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,wBAAwB,GAAG,SAAS,CA0DtC;yBAnEe,mBAAmB"}
|
|
@@ -19,6 +19,7 @@ import { colorVars, typographyVars, fontWeightVars, radiusVars, spacingVars } fr
|
|
|
19
19
|
import { mergeProps } from "../utils/index.js";
|
|
20
20
|
import { useAvatarGroup } from "./AvatarGroupContext.js";
|
|
21
21
|
import { themeProps } from "../utils/themeProps.js";
|
|
22
|
+
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
22
23
|
import { useTranslator } from "../i18n/index.js";
|
|
23
24
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
24
25
|
const BORDER_WIDTH = 2;
|
|
@@ -47,8 +48,6 @@ const styles = {
|
|
|
47
48
|
kkrTdU: "x1ypdohk",
|
|
48
49
|
k8WAf4: "xt970qd",
|
|
49
50
|
kKwaWg: "x14bno8m xbfmc0r x1nocapi",
|
|
50
|
-
kI3sdo: "x1a2a7pz x17nn4n9",
|
|
51
|
-
kInvED: "x7s97pk",
|
|
52
51
|
$$css: true
|
|
53
52
|
},
|
|
54
53
|
overlap: {
|
|
@@ -122,7 +121,7 @@ export function AvatarGroupOverflow({
|
|
|
122
121
|
...rest,
|
|
123
122
|
"aria-label": label,
|
|
124
123
|
"data-avatar-item": "",
|
|
125
|
-
...mergeProps(themeProps('avatar-group-overflow'),
|
|
124
|
+
...mergeProps(themeProps('avatar-group-overflow'), focusOutlineProps.focusVisible(styles.base, styles.button, styles.overlap, dynamicStyles.size(numericSize), dynamicStyles.fontSize(numericSize), dynamicStyles.overlap(-overlap), xstyle), className, style),
|
|
126
125
|
children: content
|
|
127
126
|
});
|
|
128
127
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAwB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzD,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAsB3C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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"}
|
package/dist/Button/Button.js
CHANGED
|
@@ -30,6 +30,7 @@ import { useButtonGroup } from "../ButtonGroup/ButtonGroupContext.js";
|
|
|
30
30
|
import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
31
31
|
import { useLinkComponent } from "../Link/useLinkComponent.js";
|
|
32
32
|
import { themeProps } from "../utils/themeProps.js";
|
|
33
|
+
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
33
34
|
import { useTranslator } from "../i18n/index.js";
|
|
34
35
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
35
36
|
/**
|
|
@@ -39,6 +40,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
39
40
|
*/
|
|
40
41
|
const styles = {
|
|
41
42
|
base: {
|
|
43
|
+
"--button-focus-offset": "xkzo27j",
|
|
44
|
+
kInvED: "x1wfwxd8 x13aywxo",
|
|
42
45
|
kVAEAm: "x1n2onr6",
|
|
43
46
|
k1xSpc: "x3nfvp2",
|
|
44
47
|
kGNEyG: "x6s0dn4",
|
|
@@ -178,43 +181,32 @@ const elevationStyles = {
|
|
|
178
181
|
* Variant styles using backgroundImage for layered colors
|
|
179
182
|
* Pseudo-classes are nested within properties per StyleX recommendation
|
|
180
183
|
* Overlay is stacked on top of base color using multiple linear-gradients
|
|
181
|
-
* Focus outline
|
|
184
|
+
* Focus outline is shared across variants for consistent keyboard affordance.
|
|
182
185
|
*/
|
|
183
186
|
const variants = {
|
|
184
187
|
primary: {
|
|
185
188
|
kWkggS: "x1ewilqj",
|
|
186
189
|
kMwMTN: "x17wrial",
|
|
187
190
|
kKwaWg: "x1ilzqfv xq8i9tn",
|
|
188
|
-
kI3sdo: "x17nn4n9",
|
|
189
|
-
"--button-focus-offset": "xkzo27j",
|
|
190
|
-
kInvED: "x1wfwxd8 x13aywxo",
|
|
191
191
|
$$css: true
|
|
192
192
|
},
|
|
193
193
|
secondary: {
|
|
194
194
|
kWkggS: "x17x4s8c",
|
|
195
195
|
kMwMTN: "x1tgivj0",
|
|
196
196
|
kKwaWg: "x1ilzqfv xq8i9tn",
|
|
197
|
-
kI3sdo: "x17nn4n9",
|
|
198
|
-
"--button-focus-offset": "xkzo27j",
|
|
199
|
-
kInvED: "x1wfwxd8 x13aywxo",
|
|
200
197
|
$$css: true
|
|
201
198
|
},
|
|
202
199
|
ghost: {
|
|
203
200
|
kWkggS: "xjbqb8w",
|
|
204
201
|
kMwMTN: "x1tgivj0",
|
|
205
202
|
kKwaWg: "x1ilzqfv xq8i9tn",
|
|
206
|
-
kI3sdo: "x17nn4n9",
|
|
207
|
-
"--button-focus-offset": "xkzo27j",
|
|
208
|
-
kInvED: "x1wfwxd8 x13aywxo",
|
|
209
203
|
$$css: true
|
|
210
204
|
},
|
|
211
205
|
destructive: {
|
|
212
206
|
kWkggS: "x1pjz0fi",
|
|
213
207
|
kMwMTN: "x1m024r3",
|
|
208
|
+
kjBf7l: "x1e0x2sz",
|
|
214
209
|
kKwaWg: "x1ilzqfv xq8i9tn",
|
|
215
|
-
kI3sdo: "x1p73he7",
|
|
216
|
-
"--button-focus-offset": "xkzo27j",
|
|
217
|
-
kInvED: "x1wfwxd8 x13aywxo",
|
|
218
210
|
$$css: true
|
|
219
211
|
}
|
|
220
212
|
};
|
|
@@ -442,10 +434,14 @@ export function Button({
|
|
|
442
434
|
} : null;
|
|
443
435
|
|
|
444
436
|
// Shared StyleX props for both button and link rendering
|
|
445
|
-
const sharedStylexProps =
|
|
437
|
+
const sharedStylexProps = focusOutlineProps.focusVisible(styles.base, sizeStyles[size], isIconOnly && styles.iconOnly, buttonDisabled && styles.disabled, useAriaDisabled && styles.ariaDisabled, renderAsLink && styles.link, !buttonGroup && styles.pressable, buttonGroup && (buttonGroup.orientation === 'horizontal' ? groupStyles.horizontal : groupStyles.vertical), buttonGroup && (variant === 'primary' || variant === 'destructive') && (buttonGroup.orientation === 'horizontal' ? groupStyles.onSolidHorizontal : groupStyles.onSolidVertical),
|
|
446
438
|
// Standalone floating buttons only — a grouped button's elevation is owned
|
|
447
439
|
// by the ButtonGroup so the shared surface lifts as one unit.
|
|
448
|
-
!buttonGroup && elevationStyles[elevation], width != null && dynamicStyles.width(width),
|
|
440
|
+
!buttonGroup && elevationStyles[elevation], width != null && dynamicStyles.width(width),
|
|
441
|
+
// AFTER the shared focus outline: the outline supplies width/style/offset
|
|
442
|
+
// for every variant, and `destructive` re-colors just the ring to match
|
|
443
|
+
// its own surface. Ordering is the mechanism — StyleX is last-wins.
|
|
444
|
+
variants[variant], xstyle);
|
|
449
445
|
const sharedMergedProps = mergeProps(themeProps('button', {
|
|
450
446
|
variant,
|
|
451
447
|
size
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA+C5C,YAAY,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,GACV,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,EACV,MAAM,oBAAoB,CAAC;AAK5B,+CAA+C;AAE/C,MAAM,WAAW,cAAc;IAC7B,wEAAwE;IACxE,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C;AAID,UAAU,iBAAkB,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,cAAc,CAC5B;IACC,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACtC,+CAA+C;IAC/C,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAEvB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;IAEzD;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAEvD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CAC1C;AAID,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,qBAAqB;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,aAAa,CAAC;IAE7B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,IAAI,KAAK,IAAI,CAAC;CAC9D;AAED,UAAU,kBAAmB,SAAQ,iBAAiB;IACpD,qBAAqB;IACrB,IAAI,EAAE,OAAO,CAAC;IAEd,0BAA0B;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,kBAAkB,CAAC;AAMrE;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,aAAa,+BA+VtD;yBA/Ve,QAAQ"}
|
|
@@ -25,6 +25,7 @@ import { useCalendarDays, useCalendarConstraints } from "./hooks/index.js";
|
|
|
25
25
|
import { calendarStyles, monthGridStyles, dayCellStyles, dayCellTheme } from "./styles.js";
|
|
26
26
|
import { plainDateFromISO, plainDateToISO, plainDateToDate, plainDateToday, plainDateSetFirstOfMonth, plainDateAddMonths, plainDateAddDays, plainDateIsBefore, plainDateIsEqual, plainDateGetWeekNumber, plainDateFormat, DATE_FORMAT_WITH_WEEKDAY, DATE_FORMAT_MONTH_YEAR } from "../utils/plainDate.js";
|
|
27
27
|
import { mergeProps, composeEventHandlers, rtlStyles } from "../utils/index.js";
|
|
28
|
+
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
28
29
|
import { computeDayCellState, computeRangeRounding, computePreviewRounding, computeDayNeighborContinuity, isEndpoint } from "./dayCellUtils.js";
|
|
29
30
|
|
|
30
31
|
// =============================================================================
|
|
@@ -768,7 +769,7 @@ function DayCell({
|
|
|
768
769
|
// `marker` mirrors the StyleX conditions below exactly, preserving
|
|
769
770
|
// the default rendering.
|
|
770
771
|
marker: markerState
|
|
771
|
-
}),
|
|
772
|
+
}), focusOutlineProps.focusVisible(dayCellStyles.day, dayCellTheme.day, isOutside && dayCellStyles.dayOutside, isOutside && dayCellTheme.dayOutside, showsTodayRing && dayCellStyles.dayToday, showsTodayRing && dayCellTheme.dayToday, showsTodayInRangeRing && dayCellStyles.dayTodayInRange, showsTodayInRangeRing && dayCellTheme.dayTodayInRange, endpoint && dayCellStyles.daySelected, endpoint && dayCellTheme.daySelected, state.effectivelyDisabled && dayCellStyles.dayDisabled, state.effectivelyDisabled && dayCellTheme.dayDisabled)),
|
|
772
773
|
children: dayNumber
|
|
773
774
|
})]
|
|
774
775
|
});
|
|
@@ -198,8 +198,6 @@ export declare const dayCellTheme: Readonly<{
|
|
|
198
198
|
readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", {
|
|
199
199
|
readonly '@media (hover: hover)': `linear-gradient(${stylex.StyleXVar<"light-dark(#0536590C, #FFFFFF0C)">}, ${stylex.StyleXVar<"light-dark(#0536590C, #FFFFFF0C)">})`;
|
|
200
200
|
} | null>;
|
|
201
|
-
readonly outline: stylex.StyleXClassNameFor<"outline", `2px solid ${stylex.StyleXVar<"light-dark(#0064E0, #2694FE)">}` | null>;
|
|
202
|
-
readonly outlineOffset: stylex.StyleXClassNameFor<"outlineOffset", "0" | "2px">;
|
|
203
201
|
}>;
|
|
204
202
|
readonly dayOutside: Readonly<{
|
|
205
203
|
readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#4E606F, #AAAFB5)">;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Calendar/styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAgB3C,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CzB,CAAC;AAMH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuC1B,CAAC;AAMH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4GxB,CAAC;AAMH,eAAO,MAAM,YAAY
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Calendar/styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAgB3C,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CzB,CAAC;AAMH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuC1B,CAAC;AAMH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4GxB,CAAC;AAMH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DvB,CAAC"}
|
package/dist/Calendar/styles.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAS3C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AA0DhD,QAAA,MAAM,iBAAiB;;;;;;;;;EASrB,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAE/D,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACrE,wDAAwD;IACxD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxE;;OAEG;IACH,YAAY,CAAC,EAAE,CACb,OAAO,EAAE,OAAO,EAChB,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAC7B,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,OAAO,GAAG,eAAe,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACpD;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAOD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,KAAK,EACL,UAAkB,EAClB,QAAQ,EACR,eAAe,EACf,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,IAAW,EACX,OAAO,EACP,MAAM,EACN,SAAS,EACT,MAAM,EACN,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,kBAAkB,+BAkMpB;yBA3Ne,aAAa"}
|
|
@@ -15,20 +15,21 @@
|
|
|
15
15
|
* - /apps/storybook/stories/CheckboxInput.stories.tsx (storybook stories)
|
|
16
16
|
* - /packages/cli/assets/templates/blocks/components/CheckboxInput/ (showcase blocks)
|
|
17
17
|
*/
|
|
18
|
-
import { useId, useCallback, use, useOptimistic, useTransition } from 'react';
|
|
18
|
+
import { useId, useCallback, use, useOptimistic, useRef, useTransition } from 'react';
|
|
19
19
|
import * as stylex from '@stylexjs/stylex';
|
|
20
20
|
import "../theme/tokens.stylex.js";
|
|
21
|
-
import { colorVars, spacingVars,
|
|
21
|
+
import { colorVars, spacingVars, typographyVars, typeScaleVars, fontWeightVars } from "../theme/tokens.stylex.js";
|
|
22
22
|
import { FieldLabel } from "../Field/FieldLabel.js";
|
|
23
23
|
import { FieldStatus } from "../FieldStatus/FieldStatus.js";
|
|
24
24
|
import { Spinner } from "../Spinner/index.js";
|
|
25
25
|
import { useTooltip } from "../Tooltip/index.js";
|
|
26
26
|
import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
27
|
-
import "
|
|
28
|
-
import {
|
|
27
|
+
import { indicatorScope } from "../Indicator/indicator.markers.stylex.js";
|
|
28
|
+
import { useIndicatorFocusRing } from "../hooks/useIndicatorFocusRing.js";
|
|
29
|
+
import { useIndicator } from "../Indicator/index.js";
|
|
29
30
|
import { themeProps } from "../utils/themeProps.js";
|
|
30
31
|
import { CheckboxListContext } from "../CheckboxList/CheckboxListContext.js";
|
|
31
|
-
import { jsx as _jsx,
|
|
32
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
32
33
|
const styles = {
|
|
33
34
|
container: {
|
|
34
35
|
k1xSpc: "x78zum5",
|
|
@@ -61,63 +62,6 @@ const styles = {
|
|
|
61
62
|
inputDisabled: {
|
|
62
63
|
kkrTdU: "x1h6gzvc",
|
|
63
64
|
$$css: true
|
|
64
|
-
},
|
|
65
|
-
checkbox: {
|
|
66
|
-
k1xSpc: "x78zum5",
|
|
67
|
-
kGNEyG: "x6s0dn4",
|
|
68
|
-
kjj79g: "xl56j7k",
|
|
69
|
-
kMzoRj: "x1litavf",
|
|
70
|
-
ksu8eU: "x1y0btm7",
|
|
71
|
-
kaIpWk: "xx3sua9",
|
|
72
|
-
k1ekBW: "xts7igz",
|
|
73
|
-
kIyJzY: "xuedmi6 x12w9bfk",
|
|
74
|
-
kAMwcw: "xlr8y92",
|
|
75
|
-
$$css: true
|
|
76
|
-
},
|
|
77
|
-
checkboxFocus: {
|
|
78
|
-
kI3sdo: "x1a2a7pz xkri23q",
|
|
79
|
-
kInvED: "x81n7kt",
|
|
80
|
-
$$css: true
|
|
81
|
-
},
|
|
82
|
-
checkboxUnchecked: {
|
|
83
|
-
kMwMTN: "xqwr325",
|
|
84
|
-
kVAM5u: "xvy26l8 x1jtjlen",
|
|
85
|
-
kWkggS: "x10xzikg xrsv7h",
|
|
86
|
-
$$css: true
|
|
87
|
-
},
|
|
88
|
-
checkboxChecked: {
|
|
89
|
-
kMwMTN: "x17wrial",
|
|
90
|
-
kVAM5u: "xad5do x1od6ugu",
|
|
91
|
-
kWkggS: "x1ewilqj x6aeo4j",
|
|
92
|
-
$$css: true
|
|
93
|
-
},
|
|
94
|
-
checkboxDisabled: {
|
|
95
|
-
kSiTet: "xbyyjgo",
|
|
96
|
-
kVAM5u: "x14i3s5s xmt8yqp",
|
|
97
|
-
$$css: true
|
|
98
|
-
},
|
|
99
|
-
checkboxDisabledUnchecked: {
|
|
100
|
-
kWkggS: "xwmxj5m x1cjfj8k",
|
|
101
|
-
$$css: true
|
|
102
|
-
},
|
|
103
|
-
checkmark: {
|
|
104
|
-
k1xSpc: "x1s85apg",
|
|
105
|
-
kMwMTN: "x17wrial xs5hli",
|
|
106
|
-
$$css: true
|
|
107
|
-
},
|
|
108
|
-
checkmarkVisible: {
|
|
109
|
-
k1xSpc: "x1lliihq",
|
|
110
|
-
$$css: true
|
|
111
|
-
},
|
|
112
|
-
indeterminateMark: {
|
|
113
|
-
k1xSpc: "x1s85apg",
|
|
114
|
-
kWkggS: "x1azo05 xwvh9j7",
|
|
115
|
-
kaIpWk: "xjspbzw",
|
|
116
|
-
$$css: true
|
|
117
|
-
},
|
|
118
|
-
indeterminateMarkVisible: {
|
|
119
|
-
k1xSpc: "x1lliihq",
|
|
120
|
-
$$css: true
|
|
121
65
|
}
|
|
122
66
|
};
|
|
123
67
|
const wrapperSizeStyles = {
|
|
@@ -132,42 +76,6 @@ const wrapperSizeStyles = {
|
|
|
132
76
|
$$css: true
|
|
133
77
|
}
|
|
134
78
|
};
|
|
135
|
-
const checkboxSizeStyles = {
|
|
136
|
-
sm: {
|
|
137
|
-
kzqmXN: "xw4jnvo",
|
|
138
|
-
kZKoxP: "x1qx5ct2",
|
|
139
|
-
$$css: true
|
|
140
|
-
},
|
|
141
|
-
md: {
|
|
142
|
-
kzqmXN: "xvy4d1p",
|
|
143
|
-
kZKoxP: "xxk0z11",
|
|
144
|
-
$$css: true
|
|
145
|
-
}
|
|
146
|
-
};
|
|
147
|
-
const checkmarkSizeStyles = {
|
|
148
|
-
sm: {
|
|
149
|
-
kzqmXN: "xsmyaan",
|
|
150
|
-
kZKoxP: "x1kpxq89",
|
|
151
|
-
$$css: true
|
|
152
|
-
},
|
|
153
|
-
md: {
|
|
154
|
-
kzqmXN: "x6jxa94",
|
|
155
|
-
kZKoxP: "x1v9usgg",
|
|
156
|
-
$$css: true
|
|
157
|
-
}
|
|
158
|
-
};
|
|
159
|
-
const indeterminateSizeStyles = {
|
|
160
|
-
sm: {
|
|
161
|
-
kzqmXN: "x1fsd2vl",
|
|
162
|
-
kZKoxP: "x36qwtl",
|
|
163
|
-
$$css: true
|
|
164
|
-
},
|
|
165
|
-
md: {
|
|
166
|
-
kzqmXN: "xsmyaan",
|
|
167
|
-
kZKoxP: "x36qwtl",
|
|
168
|
-
$$css: true
|
|
169
|
-
}
|
|
170
|
-
};
|
|
171
79
|
// Dynamic field width (number -> px, string used as-is).
|
|
172
80
|
const dynamicWidthStyles = {
|
|
173
81
|
width: width => [{
|
|
@@ -248,9 +156,19 @@ export function CheckboxInput({
|
|
|
248
156
|
focusTrigger: 'always',
|
|
249
157
|
isEnabled: showsDisabledMessage
|
|
250
158
|
});
|
|
159
|
+
|
|
160
|
+
// The checkbox visual is an indicator: a theme can restyle it through the
|
|
161
|
+
// `checkbox` target or replace the component outright.
|
|
162
|
+
const CheckboxControl = useIndicator('checkbox');
|
|
163
|
+
// The ring is drawn on the indicator itself: the native input is
|
|
164
|
+
// `opacity: 0`, and only the indicator's own element can shape the outline
|
|
165
|
+
// to match it. See useIndicatorFocusRing.
|
|
166
|
+
const indicatorRef = useRef(null);
|
|
167
|
+
const {
|
|
168
|
+
focusProps
|
|
169
|
+
} = useIndicatorFocusRing(indicatorRef, isDisabled);
|
|
251
170
|
const isIndeterminate = optimisticValue === 'indeterminate';
|
|
252
171
|
const isChecked = optimisticValue === true;
|
|
253
|
-
const isCheckedOrIndeterminate = isChecked || isIndeterminate;
|
|
254
172
|
|
|
255
173
|
// Sync the native indeterminate DOM property (can't be set via JSX
|
|
256
174
|
// attribute). On a native checkbox this is the authoritative way to expose
|
|
@@ -291,9 +209,13 @@ export function CheckboxInput({
|
|
|
291
209
|
// unconditionally is safe.
|
|
292
210
|
disabledMessageTooltip.interactionRef(el);
|
|
293
211
|
},
|
|
294
|
-
...stylex.props(styles.container, isLabelHidden && styles.containerLabelHidden,
|
|
212
|
+
...stylex.props(styles.container, isLabelHidden && styles.containerLabelHidden,
|
|
213
|
+
// Hover and focus reach the checkbox visual through this ancestor
|
|
214
|
+
// marker rather than props, so the whole row drives it.
|
|
215
|
+
!isDisabled && indicatorScope),
|
|
295
216
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
296
217
|
...stylex.props(styles.checkboxWrapper, wrapperSizeStyles[size]),
|
|
218
|
+
...focusProps,
|
|
297
219
|
children: [/*#__PURE__*/_jsx("input", {
|
|
298
220
|
...rest,
|
|
299
221
|
ref: mergeRefs(ref, indeterminateRef, disabledMessageTooltip.positionRef),
|
|
@@ -333,31 +255,19 @@ export function CheckboxInput({
|
|
|
333
255
|
"aria-invalid": status?.type === 'error' ? true : undefined,
|
|
334
256
|
"aria-busy": isBusy || undefined,
|
|
335
257
|
...stylex.props(styles.input, wrapperSizeStyles[size], isDisabled && styles.inputDisabled)
|
|
336
|
-
}), /*#__PURE__*/_jsx("
|
|
337
|
-
|
|
338
|
-
...
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
...stylex.props(styles.checkmark, checkmarkSizeStyles[size], isChecked && styles.checkmarkVisible),
|
|
350
|
-
children: /*#__PURE__*/_jsx("path", {
|
|
351
|
-
d: "M8.5 2.5L4 7.5L1.5 5",
|
|
352
|
-
stroke: "currentColor",
|
|
353
|
-
strokeWidth: "1.5",
|
|
354
|
-
fill: "none",
|
|
355
|
-
strokeLinecap: "round",
|
|
356
|
-
strokeLinejoin: "round"
|
|
357
|
-
})
|
|
358
|
-
}), /*#__PURE__*/_jsx("div", {
|
|
359
|
-
...stylex.props(styles.indeterminateMark, indeterminateSizeStyles[size], isIndeterminate && styles.indeterminateMarkVisible)
|
|
360
|
-
})]
|
|
258
|
+
}), /*#__PURE__*/_jsx("span", {
|
|
259
|
+
ref: indicatorRef,
|
|
260
|
+
...{
|
|
261
|
+
className: "xjp7ctv"
|
|
262
|
+
},
|
|
263
|
+
children: /*#__PURE__*/_jsx(CheckboxControl, {
|
|
264
|
+
state: isIndeterminate ? 'indeterminate' : isChecked ? 'checked' : 'unchecked',
|
|
265
|
+
size: size,
|
|
266
|
+
isDisabled: isDisabled,
|
|
267
|
+
children: isBusy ? /*#__PURE__*/_jsx(Spinner, {
|
|
268
|
+
size: "sm",
|
|
269
|
+
shade: "inherit"
|
|
270
|
+
}) : null
|
|
361
271
|
})
|
|
362
272
|
})]
|
|
363
273
|
}), /*#__PURE__*/_jsx("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ClickableCard.d.ts","sourceRoot":"","sources":["../../src/ClickableCard/ClickableCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAE,KAAK,UAAU,EAAU,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AASxE,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAGtE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"ClickableCard.d.ts","sourceRoot":"","sources":["../../src/ClickableCard/ClickableCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAE,KAAK,UAAU,EAAU,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AASxE,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAGtE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6F5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAE1B;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEnD;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,yBAAyB;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,SAAkB,EAClB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,GAAG,EACH,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,aAAa,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAgFpB;yBAnGe,aAAa"}
|
|
@@ -37,6 +37,7 @@ import { Card } from "../Card/Card.js";
|
|
|
37
37
|
import { useClickableContainer } from "../hooks/useClickableContainer.js";
|
|
38
38
|
import { useLinkComponent } from "../Link/useLinkComponent.js";
|
|
39
39
|
import { themeProps } from "../utils/themeProps.js";
|
|
40
|
+
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
40
41
|
|
|
41
42
|
// =============================================================================
|
|
42
43
|
// Styles — only the interactive layer, Card handles everything else
|
|
@@ -48,12 +49,6 @@ const styles = {
|
|
|
48
49
|
kkrTdU: "x1ypdohk",
|
|
49
50
|
kybGjl: "x1hl2dhg",
|
|
50
51
|
kMwMTN: "x1heor9g",
|
|
51
|
-
kInvED: "x1hl8ikr",
|
|
52
|
-
$$css: true
|
|
53
|
-
},
|
|
54
|
-
focusWithin: {
|
|
55
|
-
kRYL1X: "x1irc7jg",
|
|
56
|
-
koJ47v: "xdjuwb3",
|
|
57
52
|
$$css: true
|
|
58
53
|
},
|
|
59
54
|
overlay: {
|
|
@@ -192,11 +187,8 @@ export function ClickableCard({
|
|
|
192
187
|
elevation: elevation,
|
|
193
188
|
...mergeProps(themeProps('clickable-card', {
|
|
194
189
|
variant
|
|
195
|
-
}),
|
|
196
|
-
|
|
197
|
-
style
|
|
198
|
-
}),
|
|
199
|
-
xstyle: [styles.interactive, styles.focusWithin, hasBorder ? styles.bordered : styles.borderless, !isDisabled && styles.overlay, !isDisabled && styles.hoverOnPointer, !isDisabled && hasBorder && styles.borderedHoverOnPointer, isDisabled && styles.disabled, xstyleProp],
|
|
190
|
+
}), focusOutlineProps.focusWithin(), classNameProp, style),
|
|
191
|
+
xstyle: [styles.interactive, hasBorder ? styles.bordered : styles.borderless, !isDisabled && styles.overlay, !isDisabled && styles.hoverOnPointer, !isDisabled && hasBorder && styles.borderedHoverOnPointer, isDisabled && styles.disabled, xstyleProp],
|
|
200
192
|
onClick: !isDisabled ? onClick : undefined,
|
|
201
193
|
onMouseUp: !isDisabled ? handleMouseUp : undefined,
|
|
202
194
|
...props,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4B5C,OAAO,EAAc,KAAK,qBAAqB,EAAC,MAAM,iBAAiB,CAAC;AAmXxE,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,CACV,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,KACb;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAClD,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC5C;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AAqPD;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAsB,EACtB,KAAK,EACL,gBAAuB,EACvB,cAAsB,EACtB,cAAc,EACd,aAAoB,EACpB,MAAM,EACN,SAAiB,EACjB,SAAS,EACT,aAAqB,EACrB,oBAAyB,EACzB,IAAW,EACX,KAAK,EAAE,SAAyB,EAChC,SAAkB,EAClB,SAAS,EAAE,eAAe,EAC1B,aAAsB,EACtB,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,qBA2OhB;yBAnQe,SAAS"}
|
|
@@ -20,6 +20,7 @@ import { tokenize, tokenizeAsync, flatTokensToLines, SYNC_TOKENIZE_THRESHOLD } f
|
|
|
20
20
|
import { ensureHighlightStyles } from "./highlightStyles.js";
|
|
21
21
|
import { applyHighlightRangesChunked } from "./highlightRanges.js";
|
|
22
22
|
import { themeProps } from "../utils/themeProps.js";
|
|
23
|
+
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
23
24
|
import { useTranslator } from "../i18n/index.js";
|
|
24
25
|
import { SyntaxTheme } from "../theme/syntax/index.js";
|
|
25
26
|
|
|
@@ -80,6 +81,18 @@ const styles = {
|
|
|
80
81
|
kVQacm: "xb3r6kr",
|
|
81
82
|
$$css: true
|
|
82
83
|
},
|
|
84
|
+
header: {
|
|
85
|
+
k1xSpc: "x78zum5",
|
|
86
|
+
kGNEyG: "x6s0dn4",
|
|
87
|
+
kUk6DE: "x98rzlu",
|
|
88
|
+
k7Eaqz: "xeuugli",
|
|
89
|
+
kmVPX3: "x1717udv",
|
|
90
|
+
kWkggS: "xjbqb8w",
|
|
91
|
+
kMwMTN: "x1heor9g",
|
|
92
|
+
kVVagm: "xln7xf2",
|
|
93
|
+
k9WMMc: "x1yc453h",
|
|
94
|
+
$$css: true
|
|
95
|
+
},
|
|
83
96
|
collapseChevronIcon: {
|
|
84
97
|
k1ekBW: "x11xpdln",
|
|
85
98
|
kIyJzY: "xuedmi6",
|
|
@@ -90,6 +103,11 @@ const styles = {
|
|
|
90
103
|
k3aq6I: "x1iffjtl",
|
|
91
104
|
$$css: true
|
|
92
105
|
},
|
|
106
|
+
headerCollapsible: {
|
|
107
|
+
kkrTdU: "x1ypdohk",
|
|
108
|
+
kfSwDN: "x87ps6o",
|
|
109
|
+
$$css: true
|
|
110
|
+
},
|
|
93
111
|
code: {
|
|
94
112
|
k1xSpc: "x1lliihq",
|
|
95
113
|
kUk6DE: "x98rzlu",
|
|
@@ -522,14 +540,7 @@ export function CodeBlock({
|
|
|
522
540
|
setIsCollapsed(prev => !prev);
|
|
523
541
|
}
|
|
524
542
|
} : undefined,
|
|
525
|
-
...
|
|
526
|
-
0: {
|
|
527
|
-
className: "x78zum5 x6s0dn4 x98rzlu xeuugli x1717udv xjbqb8w x1heor9g xln7xf2 x1yc453h"
|
|
528
|
-
},
|
|
529
|
-
1: {
|
|
530
|
-
className: "x78zum5 x6s0dn4 x98rzlu xeuugli x1717udv xjbqb8w x1heor9g xln7xf2 x1yc453h x1ypdohk x87ps6o x17nn4n9 x1wfwxd8 x7s97pk"
|
|
531
|
-
}
|
|
532
|
-
}[!!canCollapse << 0],
|
|
543
|
+
...focusOutlineProps.focusVisible(styles.header, canCollapse && styles.headerCollapsible),
|
|
533
544
|
children: /*#__PURE__*/_jsxs("span", {
|
|
534
545
|
...{
|
|
535
546
|
className: "x78zum5 x6s0dn4 x141an7d x9m5x89 x1e4wzip x1mjzq1q x1ghz6dp x1ltkj2j"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../src/Collapsible/Collapsible.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAa,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAiBjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../src/Collapsible/Collapsible.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAa,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAiBjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuH5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,aAAa,EACb,MAAM,EAAE,gBAAgB,EACxB,UAAkB,EAClB,YAAY,EACZ,KAAK,EACL,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAsGlB;yBAnHe,WAAW"}
|
|
@@ -35,6 +35,7 @@ import { CollapsibleGroupPresentationContext } from "./CollapsibleGroupContext.j
|
|
|
35
35
|
import { Icon } from "../Icon/index.js";
|
|
36
36
|
import { mergeProps } from "../utils/index.js";
|
|
37
37
|
import { themeProps } from "../utils/themeProps.js";
|
|
38
|
+
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
38
39
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
39
40
|
const styles = {
|
|
40
41
|
root: {
|
|
@@ -54,8 +55,6 @@ const styles = {
|
|
|
54
55
|
kMwMTN: "x1tgivj0",
|
|
55
56
|
k9WMMc: "x1yc453h",
|
|
56
57
|
k8WAf4: "xt970qd",
|
|
57
|
-
kI3sdo: "x17nn4n9",
|
|
58
|
-
kInvED: "x1wfwxd8 x7s97pk",
|
|
59
58
|
$$css: true
|
|
60
59
|
},
|
|
61
60
|
triggerDisabled: {
|
|
@@ -249,7 +248,7 @@ export function Collapsible({
|
|
|
249
248
|
tabIndex: isDisabled ? -1 : undefined,
|
|
250
249
|
...mergeProps(themeProps('collapsible-trigger', {
|
|
251
250
|
density: density ?? undefined
|
|
252
|
-
}),
|
|
251
|
+
}), focusOutlineProps.focusVisible(styles.trigger, density != null && triggerDensity[density], isDisabled && styles.triggerDisabled)),
|
|
253
252
|
children: [/*#__PURE__*/_jsx("span", {
|
|
254
253
|
...{
|
|
255
254
|
className: "x1b2iylo xwgcxoh"
|
|
@@ -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;AAoB5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAKhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,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;AAoB5C,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,sCA2Sb;yBA3Te,MAAM"}
|