@astryxdesign/core 0.4.5-canary.bc34238 → 0.4.5-canary.c2bb31b
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/BottomSheet/BottomSheetPanel.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetPanel.js +9 -2
- package/dist/Center/Center.d.ts +23 -1
- package/dist/Center/Center.d.ts.map +1 -1
- package/dist/Center/Center.js +12 -6
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +3 -3
- package/dist/Item/Item.d.ts +9 -1
- package/dist/Item/Item.d.ts.map +1 -1
- package/dist/Item/Item.js +45 -7
- package/dist/Layer/useLayer.d.ts.map +1 -1
- package/dist/Layer/useLayer.js +3 -2
- package/dist/Layout/container.stylex.d.ts +4 -2
- package/dist/Layout/container.stylex.d.ts.map +1 -1
- package/dist/Layout/container.stylex.js +19 -11
- package/dist/Layout/index.d.ts +1 -0
- package/dist/Layout/index.d.ts.map +1 -1
- package/dist/Layout/index.js +4 -0
- package/dist/Layout/padding.stylex.d.ts +315 -12
- package/dist/Layout/padding.stylex.d.ts.map +1 -1
- package/dist/Layout/padding.stylex.js +389 -12
- package/dist/Lightbox/Lightbox.d.ts.map +1 -1
- package/dist/Lightbox/Lightbox.js +2 -1
- package/dist/MobileNav/MobileNav.d.ts +1 -0
- package/dist/MobileNav/MobileNav.d.ts.map +1 -1
- package/dist/MobileNav/MobileNav.js +24 -6
- package/dist/NumberInput/NumberInput.d.ts.map +1 -1
- package/dist/NumberInput/NumberInput.js +30 -2
- package/dist/Resizable/ResizeHandle.d.ts.map +1 -1
- package/dist/Resizable/ResizeHandle.js +3 -3
- package/dist/Section/Section.d.ts +36 -1
- package/dist/Section/Section.d.ts.map +1 -1
- package/dist/Section/Section.js +12 -2
- package/dist/Selector/Selector.d.ts +26 -1
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +73 -13
- package/dist/Selector/SelectorOption.d.ts +14 -1
- package/dist/Selector/SelectorOption.d.ts.map +1 -1
- package/dist/Selector/SelectorOption.js +6 -0
- package/dist/Selector/SelectorRowLayoutContext.d.ts +8 -0
- package/dist/Selector/SelectorRowLayoutContext.d.ts.map +1 -0
- package/dist/Selector/SelectorRowLayoutContext.js +27 -0
- package/dist/Selector/types.d.ts +1 -0
- package/dist/Selector/types.d.ts.map +1 -1
- package/dist/Slider/Slider.d.ts.map +1 -1
- package/dist/Slider/Slider.js +2 -2
- package/dist/Stack/Stack.d.ts +23 -1
- package/dist/Stack/Stack.d.ts.map +1 -1
- package/dist/Stack/Stack.js +12 -6
- package/dist/astryx.css +40 -21
- package/dist/hooks/scrollbarGutter.d.ts +28 -0
- package/dist/hooks/scrollbarGutter.d.ts.map +1 -0
- package/dist/hooks/scrollbarGutter.js +103 -0
- package/dist/hooks/useScrollLock.d.ts +4 -0
- package/dist/hooks/useScrollLock.d.ts.map +1 -1
- package/dist/hooks/useScrollLock.js +13 -1
- package/dist/theme/derivedVarRegistry.d.ts.map +1 -1
- package/dist/theme/derivedVarRegistry.js +7 -0
- package/dist/theme/generateThemeRules.d.ts.map +1 -1
- package/dist/theme/generateThemeRules.js +37 -4
- package/package.json +2 -2
- package/src/BottomSheet/BottomSheet.test.tsx +17 -0
- package/src/BottomSheet/BottomSheetPanel.test.tsx +41 -0
- package/src/BottomSheet/BottomSheetPanel.tsx +28 -2
- package/src/Center/Center.doc.mjs +48 -0
- package/src/Center/Center.test.tsx +158 -0
- package/src/Center/Center.tsx +50 -9
- package/src/Dialog/Dialog.test.tsx +16 -0
- package/src/Dialog/Dialog.tsx +3 -0
- package/src/Item/Item.doc.mjs +1 -0
- package/src/Item/Item.test.tsx +50 -0
- package/src/Item/Item.tsx +40 -1
- package/src/Layer/useLayer.tsx +13 -2
- package/src/Layout/container.stylex.ts +11 -3
- package/src/Layout/index.ts +4 -0
- package/src/Layout/overlayPaddingReset.test.tsx +222 -0
- package/src/Layout/padding.stylex.ts +192 -12
- package/src/Lightbox/Lightbox.tsx +2 -1
- package/src/MobileNav/MobileNav.tsx +61 -5
- package/src/MobileNav/MobileNavEntryAnimation.test.tsx +212 -0
- package/src/MobileNav/MobileNavScrollbarGutter.test.tsx +109 -0
- package/src/NumberInput/NumberInput.doc.mjs +24 -0
- package/src/NumberInput/NumberInput.test.tsx +138 -0
- package/src/NumberInput/NumberInput.tsx +40 -4
- package/src/Resizable/ResizeHandle.test.tsx +22 -0
- package/src/Resizable/ResizeHandle.tsx +9 -3
- package/src/Section/Section.doc.mjs +55 -0
- package/src/Section/Section.test.tsx +201 -4
- package/src/Section/Section.tsx +69 -0
- package/src/Selector/Selector.doc.mjs +11 -2
- package/src/Selector/Selector.test.tsx +406 -0
- package/src/Selector/Selector.tsx +137 -10
- package/src/Selector/SelectorOption.doc.mjs +7 -0
- package/src/Selector/SelectorOption.tsx +21 -0
- package/src/Selector/SelectorRowLayoutContext.ts +32 -0
- package/src/Selector/types.ts +4 -4
- package/src/Slider/Slider.tsx +10 -0
- package/src/Stack/Stack.doc.mjs +72 -0
- package/src/Stack/Stack.test.tsx +156 -0
- package/src/Stack/Stack.tsx +50 -8
- package/src/hooks/scrollbarGutter.test.ts +167 -0
- package/src/hooks/scrollbarGutter.ts +121 -0
- package/src/hooks/useScrollLock.doc.mjs +4 -4
- package/src/hooks/useScrollLock.test.ts +73 -0
- package/src/hooks/useScrollLock.ts +14 -0
- package/src/theme/derivedVarRegistry.test.ts +14 -3
- package/src/theme/derivedVarRegistry.ts +4 -0
- package/src/theme/generateThemeRules.test.ts +79 -0
- package/src/theme/generateThemeRules.ts +49 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetPanel.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"BottomSheetPanel.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAa5C,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;AAIvB,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAC5D,YAAY,EAAC,oBAAoB,EAAC,CAAC;AA4InC,MAAM,MAAM,sBAAsB,GAChC,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEjD,MAAM,MAAM,qBAAqB,GAC7B;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GAChB;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAC,GACjC;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC1C,eAAe,EAAE,MAAM,CAAC;CACzB,GACD;IAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAEtB,UAAU,qBAAsB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,KAAK,EAAE,qBAAqB,CAAC;IAC7B,MAAM,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACjD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3D,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACzD,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;CAC7D;AA+GD,4EAA4E;AAC5E,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,MAAM,EACN,QAAQ,EACR,UAAU,EACV,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,qBAA4B,EAC5B,kBAA0B,EAC1B,SAAS,EACT,cAAc,EACd,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAyQvB;yBA3Re,gBAAgB"}
|
|
@@ -26,6 +26,7 @@ import { useDevWarning } from "../hooks/index.js";
|
|
|
26
26
|
import "../theme/tokens.stylex.js";
|
|
27
27
|
import { colorVars, durationVars, easeVars, radiusVars, shadowVars, sizeVars, spacingVars } from "../theme/tokens.stylex.js";
|
|
28
28
|
import { mergeProps, themeProps } from "../utils/index.js";
|
|
29
|
+
import { overlayPaddingReset } from "../Layout/padding.stylex.js";
|
|
29
30
|
import { isValidSnapPoint, resolveSnapPoints } from "./snapOffsets.js";
|
|
30
31
|
import { useMobileKeyboard } from "./useMobileKeyboard.js";
|
|
31
32
|
import { useSheetGestures } from "./useSheetGestures.js";
|
|
@@ -39,6 +40,11 @@ const HEIGHT_BUDGETS = {
|
|
|
39
40
|
const OVERSCROLL_PADDING = 48;
|
|
40
41
|
const MOBILE_KEYBOARD_BOTTOM_CLEARANCE = 48;
|
|
41
42
|
const TRANSITION_BACKSTOP_BUFFER_MS = 50;
|
|
43
|
+
// The floating handle bar's height. The bar is out of flow, so this is not
|
|
44
|
+
// layout space the content pays for -- the pill (4px, centered) lands 10-14px
|
|
45
|
+
// from the sheet's top edge, inside the space a content wrapper's own top
|
|
46
|
+
// padding already provides.
|
|
47
|
+
const HANDLE_BAR_HEIGHT = spacingVars['--spacing-6'];
|
|
42
48
|
|
|
43
49
|
// Measure the same viewport the height budgets are written against. Those are
|
|
44
50
|
// `dvh`, which the virtual keyboard does not shrink, so reading
|
|
@@ -69,6 +75,7 @@ const styles = {
|
|
|
69
75
|
sheet: {
|
|
70
76
|
kfzvcC: "x67bb7w",
|
|
71
77
|
kB7OPa: "x9f619",
|
|
78
|
+
kVAEAm: "x1n2onr6",
|
|
72
79
|
k1xSpc: "x78zum5",
|
|
73
80
|
kXwgrk: "xdt5ytf",
|
|
74
81
|
kAzted: "x2lwn1j",
|
|
@@ -399,7 +406,7 @@ export function BottomSheetPanel({
|
|
|
399
406
|
...props,
|
|
400
407
|
ref: setElement,
|
|
401
408
|
tabIndex: tabIndex ?? -1,
|
|
402
|
-
...mergeProps(themeProps('bottom-sheet'), stylex.props(styles.sheet, height === 'hug' ? styles.hugHeight : styles.budget, isClosing && styles.sheetClosing, isFading && styles.sheetFading, isInactive && styles.sheetInactive, xstyle), className, {
|
|
409
|
+
...mergeProps(themeProps('bottom-sheet'), stylex.props(styles.sheet, overlayPaddingReset.reset, height === 'hug' ? styles.hugHeight : styles.budget, isClosing && styles.sheetClosing, isFading && styles.sheetFading, isInactive && styles.sheetInactive, xstyle), className, {
|
|
403
410
|
['--_sheet-budget']: budget,
|
|
404
411
|
...(isInteractive ? gestureStyle : isRetained ? {
|
|
405
412
|
transform: retainedTransform,
|
|
@@ -411,7 +418,7 @@ export function BottomSheetPanel({
|
|
|
411
418
|
}),
|
|
412
419
|
children: [/*#__PURE__*/_jsx("div", {
|
|
413
420
|
...{
|
|
414
|
-
className: "
|
|
421
|
+
className: "x10l6tqk x13vifvy x1o0tod xtijo5x x1vjfegm x78zum5 x6s0dn4 xl56j7k xvpftlf xafqdz2 x5ve5x3 x1jm3nie"
|
|
415
422
|
},
|
|
416
423
|
...handleProps,
|
|
417
424
|
"aria-hidden": "true",
|
package/dist/Center/Center.d.ts
CHANGED
|
@@ -57,11 +57,33 @@ export interface CenterProps extends BaseProps<HTMLDivElement> {
|
|
|
57
57
|
* Overrides `padding` on the inline axis when both are set.
|
|
58
58
|
*/
|
|
59
59
|
paddingInline?: SpacingStep;
|
|
60
|
+
/**
|
|
61
|
+
* Inline-start padding, using the spacing scale. Logical: the left edge in
|
|
62
|
+
* LTR, the right edge in RTL.
|
|
63
|
+
* Overrides `paddingInline` and `padding` on that edge only.
|
|
64
|
+
*/
|
|
65
|
+
paddingInlineStart?: SpacingStep;
|
|
66
|
+
/**
|
|
67
|
+
* Inline-end padding, using the spacing scale. Logical: the right edge in
|
|
68
|
+
* LTR, the left edge in RTL.
|
|
69
|
+
* Overrides `paddingInline` and `padding` on that edge only.
|
|
70
|
+
*/
|
|
71
|
+
paddingInlineEnd?: SpacingStep;
|
|
60
72
|
/**
|
|
61
73
|
* Block (vertical) padding, using the spacing scale.
|
|
62
74
|
* Overrides `padding` on the block axis when both are set.
|
|
63
75
|
*/
|
|
64
76
|
paddingBlock?: SpacingStep;
|
|
77
|
+
/**
|
|
78
|
+
* Block-start (top) padding, using the spacing scale.
|
|
79
|
+
* Overrides `paddingBlock` and `padding` on that edge only.
|
|
80
|
+
*/
|
|
81
|
+
paddingBlockStart?: SpacingStep;
|
|
82
|
+
/**
|
|
83
|
+
* Block-end (bottom) padding, using the spacing scale.
|
|
84
|
+
* Overrides `paddingBlock` and `padding` on that edge only.
|
|
85
|
+
*/
|
|
86
|
+
paddingBlockEnd?: SpacingStep;
|
|
65
87
|
/**
|
|
66
88
|
* Whether to make the container inline-flex (useful for text/icons).
|
|
67
89
|
* @default false
|
|
@@ -85,7 +107,7 @@ export interface CenterProps extends BaseProps<HTMLDivElement> {
|
|
|
85
107
|
* </Center>
|
|
86
108
|
* ```
|
|
87
109
|
*/
|
|
88
|
-
export declare function Center({ axis, width, height, maxWidth, minHeight, padding, paddingInline, paddingBlock, isInline, children, xstyle, className, style, ref, ...props }: CenterProps): import("react").JSX.Element;
|
|
110
|
+
export declare function Center({ axis, width, height, maxWidth, minHeight, padding, paddingInline, paddingInlineStart, paddingInlineEnd, paddingBlock, paddingBlockStart, paddingBlockEnd, isInline, children, xstyle, className, style, ref, ...props }: CenterProps): import("react").JSX.Element;
|
|
89
111
|
export declare namespace Center {
|
|
90
112
|
var displayName: string;
|
|
91
113
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Center.d.ts","sourceRoot":"","sources":["../../src/Center/Center.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Center.d.ts","sourceRoot":"","sources":["../../src/Center/Center.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAwC3D,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAC;AAE5D,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;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;;;;;OAKG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,aAAa,CAAC,EAAE,WAAW,CAAC;IAE5B;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,WAAW,CAAC;IAEjC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAE/B;;;OAGG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC;IAE3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAEhC;;;OAGG;IACH,eAAe,CAAC,EAAE,WAAW,CAAC;IAE9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,IAAa,EACb,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,OAAO,EACP,aAAa,EACb,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,QAAgB,EAChB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAyCb;yBA7De,MAAM"}
|
package/dist/Center/Center.js
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
*/
|
|
15
15
|
|
|
16
16
|
import * as stylex from '@stylexjs/stylex';
|
|
17
|
-
import {
|
|
17
|
+
import { paddingInlineStartStyles, paddingInlineEndStyles, paddingBlockStartStyles, paddingBlockEndStyles } from "../Layout/padding.stylex.js";
|
|
18
18
|
import { mergeProps } from "../utils/index.js";
|
|
19
19
|
import { themeProps } from "../utils/themeProps.js";
|
|
20
20
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -73,7 +73,11 @@ export function Center({
|
|
|
73
73
|
minHeight,
|
|
74
74
|
padding,
|
|
75
75
|
paddingInline,
|
|
76
|
+
paddingInlineStart,
|
|
77
|
+
paddingInlineEnd,
|
|
76
78
|
paddingBlock,
|
|
79
|
+
paddingBlockStart,
|
|
80
|
+
paddingBlockEnd,
|
|
77
81
|
isInline = false,
|
|
78
82
|
children,
|
|
79
83
|
xstyle,
|
|
@@ -82,13 +86,15 @@ export function Center({
|
|
|
82
86
|
ref,
|
|
83
87
|
...props
|
|
84
88
|
}) {
|
|
85
|
-
// Resolve padding to per-
|
|
86
|
-
//
|
|
87
|
-
const
|
|
88
|
-
const
|
|
89
|
+
// Resolve padding to per-edge values. Most specific wins, per edge:
|
|
90
|
+
// edge prop -> axis prop -> `padding`.
|
|
91
|
+
const resolvedPaddingInlineStart = paddingInlineStart ?? paddingInline ?? padding;
|
|
92
|
+
const resolvedPaddingInlineEnd = paddingInlineEnd ?? paddingInline ?? padding;
|
|
93
|
+
const resolvedPaddingBlockStart = paddingBlockStart ?? paddingBlock ?? padding;
|
|
94
|
+
const resolvedPaddingBlockEnd = paddingBlockEnd ?? paddingBlock ?? padding;
|
|
89
95
|
const stylexProps = mergeProps(themeProps('center', {
|
|
90
96
|
axis
|
|
91
|
-
}), stylex.props(isInline ? styles.inline : styles.base, (axis === 'both' || axis === 'vertical') && styles.alignItemsCenter, (axis === 'both' || axis === 'horizontal') && styles.justifyContentCenter, dynamicStyles.sizing(width ?? null, height ?? null, maxWidth ?? null, minHeight ?? null),
|
|
97
|
+
}), stylex.props(isInline ? styles.inline : styles.base, (axis === 'both' || axis === 'vertical') && styles.alignItemsCenter, (axis === 'both' || axis === 'horizontal') && styles.justifyContentCenter, dynamicStyles.sizing(width ?? null, height ?? null, maxWidth ?? null, minHeight ?? null), resolvedPaddingInlineStart != null && paddingInlineStartStyles[resolvedPaddingInlineStart], resolvedPaddingInlineEnd != null && paddingInlineEndStyles[resolvedPaddingInlineEnd], resolvedPaddingBlockStart != null && paddingBlockStartStyles[resolvedPaddingBlockStart], resolvedPaddingBlockEnd != null && paddingBlockEndStyles[resolvedPaddingBlockEnd], xstyle), className, style);
|
|
92
98
|
return /*#__PURE__*/_jsx("div", {
|
|
93
99
|
ref: ref,
|
|
94
100
|
...stylexProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsB5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAKhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAsB9C;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzD,4EAA4E;AAC5E,UAAU,mBAAmB;IAC3B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB;IACzD,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAuHD;;;;;;;;;GASG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,cAAc;;;;;EAUpE;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,QAAgB,EAChB,YAAY,EACZ,KAAW,EACX,SAAkB,EAClB,QAAQ,EACR,OAAoB,EACpB,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCA6Sb;yBA7Te,MAAM"}
|
package/dist/Dialog/Dialog.js
CHANGED
|
@@ -23,7 +23,7 @@ import { isImeKeyEvent } from "../utils/ime.js";
|
|
|
23
23
|
import "../theme/tokens.stylex.js";
|
|
24
24
|
import { colorVars, radiusVars, durationVars, easeVars, shadowVars } from "../theme/tokens.stylex.js";
|
|
25
25
|
import { container } from "../Layout/container.stylex.js";
|
|
26
|
-
import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles, spacingStepToToken } from "../Layout/padding.stylex.js";
|
|
26
|
+
import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles, spacingStepToToken, overlayPaddingReset } from "../Layout/padding.stylex.js";
|
|
27
27
|
import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
28
28
|
import { devWarn } from "../utils/devWarning.js";
|
|
29
29
|
import { DialogContext } from "./DialogContext.js";
|
|
@@ -435,7 +435,7 @@ export function Dialog({
|
|
|
435
435
|
...safeProps,
|
|
436
436
|
...mergeProps(themeProps('dialog', {
|
|
437
437
|
variant
|
|
438
|
-
}), stylex.props(styles.inlineWrapper, !isFullscreen && dynamicStyles.sizing(width, maxHeight), isFullscreen && styles.fullscreen, xstyle), className, style),
|
|
438
|
+
}), stylex.props(styles.inlineWrapper, overlayPaddingReset.reset, !isFullscreen && dynamicStyles.sizing(width, maxHeight), isFullscreen && styles.fullscreen, xstyle), className, style),
|
|
439
439
|
"data-testid": props['data-testid'],
|
|
440
440
|
children: innerContent
|
|
441
441
|
});
|
|
@@ -448,7 +448,7 @@ export function Dialog({
|
|
|
448
448
|
...safeProps,
|
|
449
449
|
...mergeProps(themeProps('dialog', {
|
|
450
450
|
variant
|
|
451
|
-
}), focusOutlineProps.focusVisible(styles.dialog, isOpen && styles.open, styles.backdrop, !isFullscreen && dynamicStyles.sizing(width, maxHeight), hasPosition && (() => {
|
|
451
|
+
}), focusOutlineProps.focusVisible(styles.dialog, overlayPaddingReset.reset, isOpen && styles.open, styles.backdrop, !isFullscreen && dynamicStyles.sizing(width, maxHeight), hasPosition && (() => {
|
|
452
452
|
const o = resolveDialogPositionOffsets(position);
|
|
453
453
|
return dynamicStyles.position(o.top, o.insetInlineStart, o.insetInlineEnd, o.bottom);
|
|
454
454
|
})(), isFullscreen && styles.fullscreen, xstyle), className, style),
|
package/dist/Item/Item.d.ts
CHANGED
|
@@ -68,6 +68,14 @@ export interface ItemProps extends BaseProps<HTMLElement> {
|
|
|
68
68
|
* and text-overflow: ellipsis is applied.
|
|
69
69
|
*/
|
|
70
70
|
descriptionLines?: number;
|
|
71
|
+
/**
|
|
72
|
+
* How the label and description sit together. `stacked` puts the description
|
|
73
|
+
* on its own line below the label; `inline` keeps both on one line, with the
|
|
74
|
+
* description ellipsizing first, so the row fits a fixed-height host.
|
|
75
|
+
*
|
|
76
|
+
* @default 'stacked'
|
|
77
|
+
*/
|
|
78
|
+
layout?: 'stacked' | 'inline';
|
|
71
79
|
/**
|
|
72
80
|
* Click handler. Makes the item clickable with button semantics.
|
|
73
81
|
*/
|
|
@@ -139,7 +147,7 @@ export interface ItemProps extends BaseProps<HTMLElement> {
|
|
|
139
147
|
* />
|
|
140
148
|
* ```
|
|
141
149
|
*/
|
|
142
|
-
export declare function Item({ as: Component, marker, startContent, label, description, endContent, align, density, labelLines, descriptionLines, onClick, interactiveRef, href, target: targetFromProps, rel: relFromProps, isHighlighted, isSelected, isDisabled, xstyle, className, style, ref, role, ...restProps }: ItemProps): import("react").JSX.Element;
|
|
150
|
+
export declare function Item({ as: Component, marker, startContent, label, description, endContent, align, density, labelLines, descriptionLines, layout, onClick, interactiveRef, href, target: targetFromProps, rel: relFromProps, isHighlighted, isSelected, isDisabled, xstyle, className, style, ref, role, ...restProps }: ItemProps): import("react").JSX.Element;
|
|
143
151
|
export declare namespace Item {
|
|
144
152
|
var displayName: string;
|
|
145
153
|
}
|
package/dist/Item/Item.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAS,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAU7C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAa5C,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,WAAW,CAAC;IACvD,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,MAAM,CAAC;IAE3B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAE5C;;;;;;;;;;;OAWG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAErD;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAE5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;
|
|
1
|
+
{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAS,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAU7C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAa5C,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,WAAW,CAAC;IACvD,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,MAAM,CAAC;IAE3B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE9B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAE5C;;;;;;;;;;;OAWG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAErD;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAE5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAsLD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,IAAI,CAAC,EACnB,EAAE,EAAE,SAAiB,EACrB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,WAAW,EACX,UAAU,EACV,KAAgB,EAChB,OAAoB,EACpB,UAAU,EACV,gBAAgB,EAChB,MAAkB,EAClB,OAAO,EACP,cAAc,EACd,IAAI,EACJ,MAAM,EAAE,eAAe,EACvB,GAAG,EAAE,YAAY,EACjB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,IAAI,EACJ,GAAG,SAAS,EACb,EAAE,SAAS,+BAqNX;yBA/Oe,IAAI"}
|
package/dist/Item/Item.js
CHANGED
|
@@ -82,6 +82,15 @@ const styles = {
|
|
|
82
82
|
kfzvcC: "x47corl",
|
|
83
83
|
$$css: true
|
|
84
84
|
},
|
|
85
|
+
inlineLabel: {
|
|
86
|
+
kmuXW: "x2lah0s",
|
|
87
|
+
$$css: true
|
|
88
|
+
},
|
|
89
|
+
inlineDescription: {
|
|
90
|
+
kmuXW: "xs83m0k",
|
|
91
|
+
k7Eaqz: "xeuugli",
|
|
92
|
+
$$css: true
|
|
93
|
+
},
|
|
85
94
|
label: {
|
|
86
95
|
kMwMTN: "x5tbw38",
|
|
87
96
|
kGuDYH: "xjm74w1",
|
|
@@ -174,6 +183,7 @@ export function Item({
|
|
|
174
183
|
density = 'balanced',
|
|
175
184
|
labelLines,
|
|
176
185
|
descriptionLines,
|
|
186
|
+
layout = 'stacked',
|
|
177
187
|
onClick,
|
|
178
188
|
interactiveRef,
|
|
179
189
|
href,
|
|
@@ -223,13 +233,17 @@ export function Item({
|
|
|
223
233
|
const isStringLabel = typeof label === 'string';
|
|
224
234
|
const isStringDescription = typeof description === 'string';
|
|
225
235
|
const labelTruncateStyle = labelLines != null ? labelLines === 1 ? styles.labelSingleTruncate : styles.labelMultiTruncate : isStringLabel ? styles.labelSingleTruncate : null;
|
|
226
|
-
|
|
236
|
+
|
|
237
|
+
// Inline rows are one line by definition, so the description always
|
|
238
|
+
// ellipsizes there — a ReactNode description cannot wrap the row open.
|
|
239
|
+
const isInline = layout === 'inline' && description != null;
|
|
240
|
+
const descriptionTruncateStyle = descriptionLines != null ? descriptionLines === 1 ? styles.descriptionSingleTruncate : styles.descriptionMultiTruncate : isStringDescription || isInline ? styles.descriptionSingleTruncate : null;
|
|
227
241
|
const labelAndDescription = /*#__PURE__*/_jsxs(_Fragment, {
|
|
228
242
|
children: [/*#__PURE__*/_jsx("span", {
|
|
229
|
-
...stylex.props(styles.label, labelTruncateStyle, labelLines != null && labelLines > 1 && dynamicStyles.lineClamp(labelLines)),
|
|
243
|
+
...stylex.props(styles.label, isInline && styles.inlineLabel, labelTruncateStyle, labelLines != null && labelLines > 1 && dynamicStyles.lineClamp(labelLines)),
|
|
230
244
|
children: label
|
|
231
245
|
}), description != null && /*#__PURE__*/_jsx("span", {
|
|
232
|
-
...stylex.props(styles.description, descriptionTruncateStyle, descriptionLines != null && descriptionLines > 1 && dynamicStyles.lineClamp(descriptionLines)),
|
|
246
|
+
...stylex.props(styles.description, isInline && styles.inlineDescription, descriptionTruncateStyle, descriptionLines != null && descriptionLines > 1 && dynamicStyles.lineClamp(descriptionLines)),
|
|
233
247
|
children: description
|
|
234
248
|
})]
|
|
235
249
|
});
|
|
@@ -259,10 +273,16 @@ export function Item({
|
|
|
259
273
|
0: {
|
|
260
274
|
className: "x78zum5 xdt5ytf x98rzlu xeuugli x1yc453h"
|
|
261
275
|
},
|
|
276
|
+
2: {
|
|
277
|
+
className: "x78zum5 x98rzlu xeuugli x1yc453h x1q0g3np x6s0dn4 x1lfs0n9"
|
|
278
|
+
},
|
|
262
279
|
1: {
|
|
263
280
|
className: "x78zum5 xdt5ytf x98rzlu xeuugli x1yc453h xbyyjgo"
|
|
281
|
+
},
|
|
282
|
+
3: {
|
|
283
|
+
className: "x78zum5 x98rzlu xeuugli x1yc453h x1q0g3np x6s0dn4 x1lfs0n9 xbyyjgo"
|
|
264
284
|
}
|
|
265
|
-
}[!!isDisabled << 0],
|
|
285
|
+
}[!!isInline << 1 | !!isDisabled << 0],
|
|
266
286
|
children: labelAndDescription
|
|
267
287
|
}) : href != null ? /*#__PURE__*/_jsx(LinkComponent, {
|
|
268
288
|
href: href,
|
|
@@ -274,10 +294,16 @@ export function Item({
|
|
|
274
294
|
0: {
|
|
275
295
|
className: "xmper1u xln7xf2 x1heor9g x78zum5 xdt5ytf x98rzlu xeuugli x1yc453h x1hl2dhg x1a2a7pz"
|
|
276
296
|
},
|
|
297
|
+
2: {
|
|
298
|
+
className: "xmper1u xln7xf2 x1heor9g x78zum5 x98rzlu xeuugli x1yc453h x1hl2dhg x1a2a7pz x1q0g3np x6s0dn4 x1lfs0n9"
|
|
299
|
+
},
|
|
277
300
|
1: {
|
|
278
301
|
className: "xmper1u xln7xf2 x1heor9g x78zum5 xdt5ytf x98rzlu xeuugli x1yc453h x1hl2dhg x1a2a7pz xbyyjgo"
|
|
302
|
+
},
|
|
303
|
+
3: {
|
|
304
|
+
className: "xmper1u xln7xf2 x1heor9g x78zum5 x98rzlu xeuugli x1yc453h x1hl2dhg x1a2a7pz x1q0g3np x6s0dn4 x1lfs0n9 xbyyjgo"
|
|
279
305
|
}
|
|
280
|
-
}[!!isDisabled << 0],
|
|
306
|
+
}[!!isInline << 1 | !!isDisabled << 0],
|
|
281
307
|
children: labelAndDescription
|
|
282
308
|
}) : onClick != null ? /*#__PURE__*/_jsx("button", {
|
|
283
309
|
type: "button",
|
|
@@ -287,20 +313,32 @@ export function Item({
|
|
|
287
313
|
0: {
|
|
288
314
|
className: "xmper1u xln7xf2 x1heor9g x78zum5 xdt5ytf x98rzlu xeuugli x1yc453h x1a2a7pz"
|
|
289
315
|
},
|
|
316
|
+
2: {
|
|
317
|
+
className: "xmper1u xln7xf2 x1heor9g x78zum5 x98rzlu xeuugli x1yc453h x1a2a7pz x1q0g3np x6s0dn4 x1lfs0n9"
|
|
318
|
+
},
|
|
290
319
|
1: {
|
|
291
320
|
className: "xmper1u xln7xf2 x1heor9g x78zum5 xdt5ytf x98rzlu xeuugli x1yc453h x1a2a7pz xbyyjgo"
|
|
321
|
+
},
|
|
322
|
+
3: {
|
|
323
|
+
className: "xmper1u xln7xf2 x1heor9g x78zum5 x98rzlu xeuugli x1yc453h x1a2a7pz x1q0g3np x6s0dn4 x1lfs0n9 xbyyjgo"
|
|
292
324
|
}
|
|
293
|
-
}[!!isDisabled << 0],
|
|
325
|
+
}[!!isInline << 1 | !!isDisabled << 0],
|
|
294
326
|
children: labelAndDescription
|
|
295
327
|
}) : /*#__PURE__*/_jsx("span", {
|
|
296
328
|
...{
|
|
297
329
|
0: {
|
|
298
330
|
className: "x78zum5 xdt5ytf x98rzlu xeuugli x1yc453h"
|
|
299
331
|
},
|
|
332
|
+
2: {
|
|
333
|
+
className: "x78zum5 x98rzlu xeuugli x1yc453h x1q0g3np x6s0dn4 x1lfs0n9"
|
|
334
|
+
},
|
|
300
335
|
1: {
|
|
301
336
|
className: "x78zum5 xdt5ytf x98rzlu xeuugli x1yc453h xbyyjgo"
|
|
337
|
+
},
|
|
338
|
+
3: {
|
|
339
|
+
className: "x78zum5 x98rzlu xeuugli x1yc453h x1q0g3np x6s0dn4 x1lfs0n9 xbyyjgo"
|
|
302
340
|
}
|
|
303
|
-
}[!!isDisabled << 0],
|
|
341
|
+
}[!!isInline << 1 | !!isDisabled << 0],
|
|
304
342
|
children: labelAndDescription
|
|
305
343
|
}), endContent != null && /*#__PURE__*/_jsx("span", {
|
|
306
344
|
...{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLayer.d.ts","sourceRoot":"","sources":["../../src/Layer/useLayer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"useLayer.d.ts","sourceRoot":"","sources":["../../src/Layer/useLayer.tsx"],"names":[],"mappings":"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"}
|
package/dist/Layer/useLayer.js
CHANGED
|
@@ -20,6 +20,7 @@ import { addAnchorName, removeAnchorName } from "./anchorName.js";
|
|
|
20
20
|
import { resolveLayerPortalTarget } from "./layerHost.js";
|
|
21
21
|
import "../theme/tokens.stylex.js";
|
|
22
22
|
import { typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
|
|
23
|
+
import { overlayPaddingReset } from "../Layout/padding.stylex.js";
|
|
23
24
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
25
|
const _temp = {
|
|
25
26
|
keoZOQ: "x1vhfslr",
|
|
@@ -453,7 +454,7 @@ export function useLayer(options) {
|
|
|
453
454
|
positionTryFallbacks: getPositionTryFallbacks(placement, alignment)
|
|
454
455
|
};
|
|
455
456
|
const offsetStyle = positioning === 'anchor' && offset ? placement === 'above' || placement === 'below' ? styles.offsetBlock(toCssLength(offset)) : styles.offsetInline(toCssLength(offset)) : null;
|
|
456
|
-
const stylexResult = stylex.props(styles.base, offsetStyle, xstyle);
|
|
457
|
+
const stylexResult = stylex.props(styles.base, overlayPaddingReset.reset, offsetStyle, xstyle);
|
|
457
458
|
const combinedClassName = extraClassName ? `${extraClassName} ${stylexResult.className ?? ''}` : stylexResult.className;
|
|
458
459
|
|
|
459
460
|
// The marker gives us the actual JSX parent without mounting arbitrary
|
|
@@ -496,7 +497,7 @@ export function useLayer(options) {
|
|
|
496
497
|
top: y,
|
|
497
498
|
left: x
|
|
498
499
|
};
|
|
499
|
-
const stylexResult = stylex.props(styles.base, styles.fixed, xstyle);
|
|
500
|
+
const stylexResult = stylex.props(styles.base, overlayPaddingReset.reset, styles.fixed, xstyle);
|
|
500
501
|
const combinedClassName = extraClassName ? `${extraClassName} ${stylexResult.className ?? ''}` : stylexResult.className;
|
|
501
502
|
return /*#__PURE__*/_jsx("div", {
|
|
502
503
|
ref: popoverRefCallback,
|
|
@@ -26,8 +26,10 @@
|
|
|
26
26
|
* }
|
|
27
27
|
* ```
|
|
28
28
|
*
|
|
29
|
-
* Internal variables (`--layout-padding-inner-x`, `--container-padding
|
|
30
|
-
* are implementation details and must not be
|
|
29
|
+
* Internal variables (`--layout-padding-inner-x`, `--container-padding-*`,
|
|
30
|
+
* `--_section-padding-propagated`) are implementation details and must not be
|
|
31
|
+
* referenced by themes. They also do not cross an overlay boundary — see
|
|
32
|
+
* `overlayPaddingReset` in padding.stylex.ts.
|
|
31
33
|
*
|
|
32
34
|
* SYNC: When modified, update /packages/core/src/Layout/Layout.doc.mjs
|
|
33
35
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"container.stylex.d.ts","sourceRoot":"","sources":["../../src/Layout/container.stylex.ts"],"names":[],"mappings":"AAEA
|
|
1
|
+
{"version":3,"file":"container.stylex.d.ts","sourceRoot":"","sources":["../../src/Layout/container.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C;;GAEG;AACH,MAAM,MAAM,YAAY,GACpB,UAAU,GACV,YAAY,GACZ,UAAU,GACV,YAAY,GACZ,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AA0JhB;;;GAGG;AACH,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIvB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAuKjE,MAAM,WAAW,gBAAgB;IAC/B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;;;OAIG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAE7B;;;;OAIG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAE7B;;;;OAIG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAE7B;;;;OAIG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAE7B;;;;;;;;;;;OAWG;IACH,eAAe,CAAC,EAAE,kBAAkB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAoB,EACpB,aAAa,EACb,aAAa,EACb,aAAa,EACb,aAAa,EACb,eAAe,EACf,SAAS,GACV,EAAE,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAyClB"}
|
|
@@ -28,8 +28,10 @@
|
|
|
28
28
|
* }
|
|
29
29
|
* ```
|
|
30
30
|
*
|
|
31
|
-
* Internal variables (`--layout-padding-inner-x`, `--container-padding
|
|
32
|
-
* are implementation details and must not be
|
|
31
|
+
* Internal variables (`--layout-padding-inner-x`, `--container-padding-*`,
|
|
32
|
+
* `--_section-padding-propagated`) are implementation details and must not be
|
|
33
|
+
* referenced by themes. They also do not cross an overlay boundary — see
|
|
34
|
+
* `overlayPaddingReset` in padding.stylex.ts.
|
|
33
35
|
*
|
|
34
36
|
* SYNC: When modified, update /packages/core/src/Layout/Layout.doc.mjs
|
|
35
37
|
*/
|
|
@@ -91,7 +93,13 @@ const cardBlockEnd = `var(--astryx-card-padding-block-end, ${cardShorthand})`;
|
|
|
91
93
|
// Section padding chains: --astryx-* then the next specificity level, terminating
|
|
92
94
|
// at --spacing-4. Built as chained const strings (no function calls) so StyleX
|
|
93
95
|
// can statically analyze them; see naming.ts for the prefix policy.
|
|
94
|
-
|
|
96
|
+
// `--_section-padding-propagated` (set by an ancestor Section with explicit
|
|
97
|
+
// padding) is read AHEAD of the public theme token, so a propagated value
|
|
98
|
+
// still wins over the theme for nested sections. Splitting the two names is
|
|
99
|
+
// what lets an overlay drop the inherited value at its boundary while keeping
|
|
100
|
+
// the theme's — see `overlayPaddingReset` in padding.stylex.ts.
|
|
101
|
+
const sectionThemeShorthand = `var(--astryx-section-padding, ${SP4})`;
|
|
102
|
+
const sectionShorthand = `var(--_section-padding-propagated, ${sectionThemeShorthand})`;
|
|
95
103
|
const sectionInline = `var(--astryx-section-padding-inline, ${sectionShorthand})`;
|
|
96
104
|
const sectionInlineStart = `var(--astryx-section-padding-inline-start, ${sectionInline})`;
|
|
97
105
|
const sectionInlineEnd = `var(--astryx-section-padding-inline-end, ${sectionInline})`;
|
|
@@ -143,35 +151,35 @@ const cardDefaultPaddingStyles = {
|
|
|
143
151
|
};
|
|
144
152
|
const sectionDefaultPaddingStyles = {
|
|
145
153
|
containerPaddingInlineStart: {
|
|
146
|
-
"--container-padding-inline-start": "
|
|
154
|
+
"--container-padding-inline-start": "x19lemt0",
|
|
147
155
|
$$css: true
|
|
148
156
|
},
|
|
149
157
|
containerPaddingInlineEnd: {
|
|
150
|
-
"--container-padding-inline-end": "
|
|
158
|
+
"--container-padding-inline-end": "xu1wldr",
|
|
151
159
|
$$css: true
|
|
152
160
|
},
|
|
153
161
|
containerPaddingBlockStart: {
|
|
154
|
-
"--container-padding-block-start": "
|
|
162
|
+
"--container-padding-block-start": "xnw7zt4",
|
|
155
163
|
$$css: true
|
|
156
164
|
},
|
|
157
165
|
containerPaddingBlockEnd: {
|
|
158
|
-
"--container-padding-block-end": "
|
|
166
|
+
"--container-padding-block-end": "xek4msv",
|
|
159
167
|
$$css: true
|
|
160
168
|
},
|
|
161
169
|
layoutPaddingOuterX: {
|
|
162
|
-
"--layout-padding-outer-x": "
|
|
170
|
+
"--layout-padding-outer-x": "x15i0zw9",
|
|
163
171
|
$$css: true
|
|
164
172
|
},
|
|
165
173
|
layoutPaddingOuterY: {
|
|
166
|
-
"--layout-padding-outer-y": "
|
|
174
|
+
"--layout-padding-outer-y": "x1vw4zgg",
|
|
167
175
|
$$css: true
|
|
168
176
|
},
|
|
169
177
|
layoutPaddingInnerX: {
|
|
170
|
-
"--layout-padding-inner-x": "
|
|
178
|
+
"--layout-padding-inner-x": "x1v3gmnx",
|
|
171
179
|
$$css: true
|
|
172
180
|
},
|
|
173
181
|
layoutPaddingInnerY: {
|
|
174
|
-
"--layout-padding-inner-y": "
|
|
182
|
+
"--layout-padding-inner-y": "x15yx5hm",
|
|
175
183
|
$$css: true
|
|
176
184
|
}
|
|
177
185
|
};
|
package/dist/Layout/index.d.ts
CHANGED
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
*/
|
|
9
9
|
export { container } from './container.stylex';
|
|
10
10
|
export type { ContainerComponent, ContainerOptions, SpacingToken, } from './container.stylex';
|
|
11
|
+
export { overlayPaddingReset } from './padding.stylex';
|
|
11
12
|
export { edgeCompSlot, EDGE_COMP_ATTR } from './edgeCompensation.stylex';
|
|
12
13
|
export { stack } from '../Stack/stack.stylex';
|
|
13
14
|
export type { StackOptions, StackDirection, StackCrossAlignment, StackMainAlignment, StackWrap, SpacingStep, } from '../Stack/stack.stylex';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Layout/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAGH,OAAO,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAC7C,YAAY,EACV,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,GACb,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Layout/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAGH,OAAO,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAC7C,YAAY,EACV,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,GACb,MAAM,oBAAoB,CAAC;AAI5B,OAAO,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAGrD,OAAO,EAAC,YAAY,EAAE,cAAc,EAAC,MAAM,2BAA2B,CAAC;AAGvE,OAAO,EAAC,KAAK,EAAC,MAAM,uBAAuB,CAAC;AAC5C,YAAY,EACV,YAAY,EACZ,cAAc,EACd,mBAAmB,EACnB,kBAAkB,EAClB,SAAS,EACT,WAAW,GACZ,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,2BAA2B,CAAC;AACpD,YAAY,EACV,gBAAgB,EAChB,uBAAuB,EACvB,aAAa,GACd,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAC,MAAM,UAAU,CAAC;AAC1D,YAAY,EACV,UAAU,EACV,cAAc,EACd,WAAW,EACX,WAAW,EACX,cAAc,GACf,MAAM,UAAU,CAAC;AAGlB,OAAO,EAAC,IAAI,EAAC,MAAM,SAAS,CAAC;AAC7B,YAAY,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AAEvC,OAAO,EAAC,OAAO,EAAC,MAAM,YAAY,CAAC;AACnC,YAAY,EAAC,YAAY,EAAE,cAAc,EAAC,MAAM,YAAY,CAAC;AAE7D,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,YAAY,EAAC,WAAW,EAAE,YAAY,EAAC,MAAM,UAAU,CAAC;AAExD,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AAEtD,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AAEtD,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,YAAY,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAExD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAEpD,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,YAAY,EAAC,UAAU,EAAC,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EAAC,yBAAyB,EAAC,MAAM,wBAAwB,CAAC"}
|
package/dist/Layout/index.js
CHANGED
|
@@ -13,6 +13,10 @@
|
|
|
13
13
|
|
|
14
14
|
// Container utility
|
|
15
15
|
export { container } from "./container.stylex.js";
|
|
16
|
+
// Overlay padding-variable reset (applied on overlay roots so the container
|
|
17
|
+
// padding system does not cross a fixed/top-layer boundary)
|
|
18
|
+
export { overlayPaddingReset } from "./padding.stylex.js";
|
|
19
|
+
|
|
16
20
|
// Edge compensation utility
|
|
17
21
|
export { edgeCompSlot, EDGE_COMP_ATTR } from "./edgeCompensation.stylex.js";
|
|
18
22
|
|