@astryxdesign/core 0.6.3-canary.d0d49a4 → 0.6.3-canary.db4e378
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/Chat/ChatMessageBubble.d.ts +2 -0
- package/dist/Chat/ChatMessageBubble.d.ts.map +1 -1
- package/dist/Chat/ChatMessageBubble.js +5 -3
- package/dist/Dialog/DialogHeader.d.ts.map +1 -1
- package/dist/Dialog/DialogHeader.js +4 -4
- package/dist/Item/Item.d.ts +1 -1
- package/dist/Item/Item.d.ts.map +1 -1
- package/dist/Item/Item.js +4 -3
- package/dist/List/List.d.ts +19 -1
- package/dist/List/List.d.ts.map +1 -1
- package/dist/List/List.js +9 -2
- package/dist/List/ListContext.d.ts +1 -0
- package/dist/List/ListContext.d.ts.map +1 -1
- package/dist/List/ListContext.js +2 -1
- package/dist/List/ListItem.d.ts +1 -1
- package/dist/List/ListItem.d.ts.map +1 -1
- package/dist/List/ListItem.js +9 -2
- package/dist/MetadataList/MetadataList.js +3 -3
- package/dist/ScrollableArea/ScrollableArea.d.ts +1 -0
- package/dist/ScrollableArea/ScrollableArea.d.ts.map +1 -1
- package/dist/ScrollableArea/ScrollableArea.js +1 -0
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +9 -2
- package/dist/astryx.css +7 -0
- package/dist/theme/derivedVarRegistry.d.ts.map +1 -1
- package/dist/theme/derivedVarRegistry.js +4 -0
- package/package.json +3 -3
- package/src/Chat/ChatMessageBubble.doc.mjs +28 -15
- package/src/Chat/ChatMessageBubble.spec.md +263 -0
- package/src/Chat/ChatMessageBubble.test.tsx +93 -0
- package/src/Chat/ChatMessageBubble.tsx +8 -3
- package/src/Chat/__tests__/ChatMessageBubble.a11y.chromium.spec.ts +457 -0
- package/src/Chat/__tests__/ChatMessageBubble.auditProvenance.test.ts +91 -0
- package/src/Chat/__tests__/ChatMessageBubble.auditProvenance.ts +91 -0
- package/src/Dialog/Dialog.doc.mjs +2 -0
- package/src/Dialog/DialogHeader.doc.mjs +10 -0
- package/src/Dialog/DialogHeader.test.tsx +70 -3
- package/src/Dialog/DialogHeader.tsx +14 -5
- package/src/Dialog/modules/DialogHeader.spec.md +49 -39
- package/src/DropdownMenu/DropdownMenu.test.tsx +5 -2
- package/src/Item/Item.doc.mjs +4 -0
- package/src/Item/Item.tsx +9 -3
- package/src/List/List.doc.mjs +6 -0
- package/src/List/List.test.tsx +117 -1
- package/src/List/List.tsx +22 -2
- package/src/List/ListContext.tsx +3 -1
- package/src/List/ListItem.source-build.test.mjs +41 -0
- package/src/List/ListItem.tsx +26 -2
- package/src/MetadataList/MetadataList.test.tsx +4 -2
- package/src/MetadataList/MetadataList.tsx +3 -3
- package/src/ScrollableArea/ScrollableArea.tsx +1 -0
- package/src/Selector/Selector.tsx +11 -1
- package/src/Selector/__tests__/Selector.a11y.chromium.spec.ts +45 -0
- package/src/theme/derivedVarRegistry.test.ts +7 -0
- package/src/theme/derivedVarRegistry.ts +1 -0
- package/src/theme/generateThemeRules.test.ts +27 -0
|
@@ -43,6 +43,7 @@ export interface ChatMessageBubbleProps extends BaseProps<HTMLDivElement> {
|
|
|
43
43
|
variant?: ChatMessageBubbleVariant;
|
|
44
44
|
/**
|
|
45
45
|
* Sender name rendered above the bubble, aligned with bubble text padding.
|
|
46
|
+
* Non-rendering scalar values omit the aligned wrapper; numeric zero remains.
|
|
46
47
|
* Use when the first content in a message is a bubble.
|
|
47
48
|
* If the first content is raw (no bubble), use ChatMessage's `name`
|
|
48
49
|
* prop instead.
|
|
@@ -50,6 +51,7 @@ export interface ChatMessageBubbleProps extends BaseProps<HTMLDivElement> {
|
|
|
50
51
|
name?: ReactNode;
|
|
51
52
|
/**
|
|
52
53
|
* Metadata content rendered below the bubble, aligned with bubble text padding.
|
|
54
|
+
* Non-rendering scalar values omit the aligned wrapper; numeric zero remains.
|
|
53
55
|
* Use when the last content in a message is a bubble.
|
|
54
56
|
* If the last content is raw (no bubble), use ChatMessage's `metadata`
|
|
55
57
|
* prop instead.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatMessageBubble.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatMessageBubble.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAWrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE1D,MAAM,WAAW,sBAAuB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACvE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,wBAAwB,CAAC;IAEnC
|
|
1
|
+
{"version":3,"file":"ChatMessageBubble.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatMessageBubble.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAWrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE1D,MAAM,WAAW,sBAAuB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACvE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,wBAAwB,CAAC;IAEnC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAEpC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAwHD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,OAAkB,EAClB,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,sBAAsB,+BA6FxB;yBA1Ge,iBAAiB"}
|
|
@@ -31,7 +31,7 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
31
31
|
import "../theme/tokens.stylex.js";
|
|
32
32
|
import { colorVars, spacingVars, radiusVars, typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
|
|
33
33
|
import { useChatMessageContext } from "./ChatContext.js";
|
|
34
|
-
import { mergeProps } from "../utils/index.js";
|
|
34
|
+
import { isRenderable, mergeProps } from "../utils/index.js";
|
|
35
35
|
import { themeProps } from "../utils/themeProps.js";
|
|
36
36
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
37
37
|
// =============================================================================
|
|
@@ -204,8 +204,10 @@ export function ChatMessageBubble({
|
|
|
204
204
|
const senderStyle = variant === 'ghost' ? styles.ghost : isUser ? styles.user : styles.assistant;
|
|
205
205
|
const groupStyle = group === 'first' ? isUser ? styles.groupFirstUser : styles.groupFirstAssistant : group === 'middle' ? isUser ? styles.groupMiddleUser : styles.groupMiddleAssistant : group === 'last' ? isUser ? styles.groupLastUser : styles.groupLastAssistant : null;
|
|
206
206
|
const metadataPaddingStyle = density === 'compact' ? styles.metadataPaddingCompact : density === 'spacious' ? styles.metadataPaddingSpacious : styles.metadataPaddingBalanced;
|
|
207
|
+
const hasName = isRenderable(name);
|
|
208
|
+
const hasMetadata = isRenderable(metadata);
|
|
207
209
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
208
|
-
children: [
|
|
210
|
+
children: [hasName && /*#__PURE__*/_jsx("div", {
|
|
209
211
|
"data-chat-name": true,
|
|
210
212
|
...stylex.props(metadataPaddingStyle, styles.nameRow, styles.headerReducedGap, isUser && styles.alignEnd),
|
|
211
213
|
children: name
|
|
@@ -219,7 +221,7 @@ export function ChatMessageBubble({
|
|
|
219
221
|
density
|
|
220
222
|
}), stylex.props(styles.content, density === 'compact' && styles.radiusCompact, senderStyle, paddingStyle, variant === 'ghost' && styles.paddingBlockNone, groupStyle, width != null && dynamicStyles.sizing(width), xstyle), className, styleProp),
|
|
221
223
|
children: children
|
|
222
|
-
}),
|
|
224
|
+
}), hasMetadata && /*#__PURE__*/_jsx("div", {
|
|
223
225
|
...stylex.props(metadataPaddingStyle, styles.metadataReducedGap, isUser && styles.alignEnd),
|
|
224
226
|
children: metadata
|
|
225
227
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogHeader.d.ts","sourceRoot":"","sources":["../../src/Dialog/DialogHeader.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA2C5C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE5C;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;;OAKG;IACH,0BAA0B,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IAExD;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,0BAA0B,EAC1B,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,iBAAiB,+
|
|
1
|
+
{"version":3,"file":"DialogHeader.d.ts","sourceRoot":"","sources":["../../src/Dialog/DialogHeader.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA2C5C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE5C;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;;OAKG;IACH,0BAA0B,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IAExD;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,0BAA0B,EAC1B,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,iBAAiB,+BAuGnB;yBApHe,YAAY"}
|
|
@@ -101,9 +101,9 @@ export function DialogHeader({
|
|
|
101
101
|
className: "x78zum5 x1cy8zhl x1qughib xjcht0a"
|
|
102
102
|
}),
|
|
103
103
|
children: [startContent && /*#__PURE__*/_jsx("div", {
|
|
104
|
-
...{
|
|
104
|
+
...mergeProps(themeProps('dialog-header-start-content'), {
|
|
105
105
|
className: "x78zum5 x6s0dn4 x1txdalj x2lah0s"
|
|
106
|
-
},
|
|
106
|
+
}),
|
|
107
107
|
children: startContent
|
|
108
108
|
}), /*#__PURE__*/_jsxs("div", {
|
|
109
109
|
...mergeProps(themeProps('dialog-header-title-block'), {
|
|
@@ -123,7 +123,7 @@ export function DialogHeader({
|
|
|
123
123
|
children: subtitle
|
|
124
124
|
})]
|
|
125
125
|
}), (endContent || onOpenChange) && /*#__PURE__*/_jsxs("div", {
|
|
126
|
-
...{
|
|
126
|
+
...mergeProps(themeProps('dialog-header-end-content'), {
|
|
127
127
|
0: {
|
|
128
128
|
className: "x78zum5 x6s0dn4 x1txdalj x2lah0s"
|
|
129
129
|
},
|
|
@@ -136,7 +136,7 @@ export function DialogHeader({
|
|
|
136
136
|
3: {
|
|
137
137
|
className: "x78zum5 x6s0dn4 x1txdalj x2lah0s xhzvc8f x3kzqx6"
|
|
138
138
|
}
|
|
139
|
-
}[!!shouldCompensateEndBlock << 1 | !!shouldCompensateEndInline << 0],
|
|
139
|
+
}[!!shouldCompensateEndBlock << 1 | !!shouldCompensateEndInline << 0]),
|
|
140
140
|
children: [endContent, onOpenChange && /*#__PURE__*/_jsx(Button, {
|
|
141
141
|
variant: "ghost",
|
|
142
142
|
label: t('@astryx.dialog.close'),
|
package/dist/Item/Item.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file Item.tsx
|
|
3
3
|
* @input Uses React, ReactNode, StyleXStyles, theme tokens, useClickableContainer
|
|
4
|
-
* @output Exports Item component, ItemProps type
|
|
4
|
+
* @output Exports Item component, ItemProps type; publishes the shared inline inset
|
|
5
5
|
* @position Core layout primitive; consumed by index.ts, tested by Item.test.tsx
|
|
6
6
|
*
|
|
7
7
|
* SYNC: When modified, update these files to stay in sync:
|
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,EAAgB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAUpD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgB5C,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;
|
|
1
|
+
{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAgB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAUpD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgB5C,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;AA8LD;;;;;;;;;;;;;;;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,+BAmOX;yBA7Pe,IAAI"}
|
package/dist/Item/Item.js
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
/**
|
|
6
6
|
* @file Item.tsx
|
|
7
7
|
* @input Uses React, ReactNode, StyleXStyles, theme tokens, useClickableContainer
|
|
8
|
-
* @output Exports Item component, ItemProps type
|
|
8
|
+
* @output Exports Item component, ItemProps type; publishes the shared inline inset
|
|
9
9
|
* @position Core layout primitive; consumed by index.ts, tested by Item.test.tsx
|
|
10
10
|
*
|
|
11
11
|
* SYNC: When modified, update these files to stay in sync:
|
|
@@ -53,7 +53,8 @@ const styles = {
|
|
|
53
53
|
k1xSpc: "x78zum5",
|
|
54
54
|
kGNEyG: "x6s0dn4",
|
|
55
55
|
kOIVth: "x1txdalj",
|
|
56
|
-
|
|
56
|
+
"--_item-inset-inline": "xw1s368",
|
|
57
|
+
kg3NbH: "xaip428",
|
|
57
58
|
kVAEAm: "x1n2onr6",
|
|
58
59
|
kB7OPa: "x9f619",
|
|
59
60
|
k9WMMc: "x1yc453h",
|
|
@@ -149,7 +150,7 @@ const densityStyles = {
|
|
|
149
150
|
},
|
|
150
151
|
spacious: {
|
|
151
152
|
k8WAf4: "x8o8v82",
|
|
152
|
-
|
|
153
|
+
"--_item-inset-inline": "x1ytau7y",
|
|
153
154
|
$$css: true
|
|
154
155
|
}
|
|
155
156
|
};
|
package/dist/List/List.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file List.tsx
|
|
3
3
|
* @input Uses React, ReactNode, StyleXStyles, theme tokens, ListContext
|
|
4
|
+
* with optional inline edge compensation
|
|
4
5
|
* @output Exports List component, ListProps, ListDensity, ListStyle types
|
|
5
6
|
* @position Core implementation; consumed by index.ts, tested by List.test.tsx
|
|
6
7
|
*
|
|
@@ -35,6 +36,19 @@ export interface ListProps extends BaseProps<HTMLUListElement | HTMLOListElement
|
|
|
35
36
|
* @default false
|
|
36
37
|
*/
|
|
37
38
|
hasDividers?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* Compensates for each item's built-in inline inset, up to the container
|
|
41
|
+
* padding available on each edge. Use "inline" to bring row content toward
|
|
42
|
+
* sibling content such as a section heading. Content aligns when the
|
|
43
|
+
* container padding is at least the item inset; smaller padding leaves
|
|
44
|
+
* some inset uncompensated.
|
|
45
|
+
* The cancelling margin reads the same variable the items derive their
|
|
46
|
+
* inline padding from, so it tracks density and theme padding overrides
|
|
47
|
+
* automatically. Hover and selection backgrounds still extend past the
|
|
48
|
+
* text by the inset.
|
|
49
|
+
* Omit to leave item positions unchanged.
|
|
50
|
+
*/
|
|
51
|
+
edgeCompensation?: 'inline';
|
|
38
52
|
/**
|
|
39
53
|
* Header content rendered above the list.
|
|
40
54
|
* Semantically associated via aria-labelledby.
|
|
@@ -63,6 +77,10 @@ export interface ListProps extends BaseProps<HTMLUListElement | HTMLOListElement
|
|
|
63
77
|
* Renders semantic `<ul>` or `<ol>` elements with configurable density,
|
|
64
78
|
* dividers, marker styles, and an optional header.
|
|
65
79
|
*
|
|
80
|
+
* Set `edgeCompensation="inline"` to compensate for the items' inline inset
|
|
81
|
+
* up to the container padding available on each edge, for alignment with
|
|
82
|
+
* sibling content such as a section heading.
|
|
83
|
+
*
|
|
66
84
|
* @example
|
|
67
85
|
* ```
|
|
68
86
|
* <List>
|
|
@@ -75,7 +93,7 @@ export interface ListProps extends BaseProps<HTMLUListElement | HTMLOListElement
|
|
|
75
93
|
* </List>
|
|
76
94
|
* ```
|
|
77
95
|
*/
|
|
78
|
-
export declare function List({ children, density, hasDividers, header, listStyle, start, xstyle, className, style, 'data-testid': testId, ref, ...props }: ListProps): import("react").JSX.Element;
|
|
96
|
+
export declare function List({ children, density, hasDividers, edgeCompensation, header, listStyle, start, xstyle, className, style, 'data-testid': testId, ref, ...props }: ListProps): import("react").JSX.Element;
|
|
79
97
|
export declare namespace List {
|
|
80
98
|
var displayName: string;
|
|
81
99
|
}
|
package/dist/List/List.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../src/List/List.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../src/List/List.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAiB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,eAAe,EACrB,MAAM,eAAe,CAAC;AAIvB,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,eAAe,IAAI,SAAS,GAClC,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,SAAU,SAAQ,SAAS,CAC1C,gBAAgB,GAAG,gBAAgB,CACpC;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,GAAG,gBAAgB,CAAC,CAAC;IACrD;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;;;;;;;OAWG;IACH,gBAAgB,CAAC,EAAE,QAAQ,CAAC;IAE5B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAE5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAwCD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,OAAoB,EACpB,WAAmB,EACnB,gBAAgB,EAChB,MAAM,EACN,SAAkB,EAClB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BA4DX;yBA1Ee,IAAI"}
|
package/dist/List/List.js
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
/**
|
|
6
6
|
* @file List.tsx
|
|
7
7
|
* @input Uses React, ReactNode, StyleXStyles, theme tokens, ListContext
|
|
8
|
+
* with optional inline edge compensation
|
|
8
9
|
* @output Exports List component, ListProps, ListDensity, ListStyle types
|
|
9
10
|
* @position Core implementation; consumed by index.ts, tested by List.test.tsx
|
|
10
11
|
*
|
|
@@ -66,6 +67,10 @@ const dynamicStyles = {
|
|
|
66
67
|
* Renders semantic `<ul>` or `<ol>` elements with configurable density,
|
|
67
68
|
* dividers, marker styles, and an optional header.
|
|
68
69
|
*
|
|
70
|
+
* Set `edgeCompensation="inline"` to compensate for the items' inline inset
|
|
71
|
+
* up to the container padding available on each edge, for alignment with
|
|
72
|
+
* sibling content such as a section heading.
|
|
73
|
+
*
|
|
69
74
|
* @example
|
|
70
75
|
* ```
|
|
71
76
|
* <List>
|
|
@@ -82,6 +87,7 @@ export function List({
|
|
|
82
87
|
children,
|
|
83
88
|
density = 'balanced',
|
|
84
89
|
hasDividers = false,
|
|
90
|
+
edgeCompensation,
|
|
85
91
|
header,
|
|
86
92
|
listStyle = 'none',
|
|
87
93
|
start,
|
|
@@ -98,8 +104,9 @@ export function List({
|
|
|
98
104
|
const contextValue = useMemo(() => ({
|
|
99
105
|
density,
|
|
100
106
|
hasDividers,
|
|
101
|
-
listStyle
|
|
102
|
-
|
|
107
|
+
listStyle,
|
|
108
|
+
edgeCompensation
|
|
109
|
+
}), [density, hasDividers, listStyle, edgeCompensation]);
|
|
103
110
|
const listElement = /*#__PURE__*/_jsx(Tag, {
|
|
104
111
|
ref: ref
|
|
105
112
|
// Consumer props first: everything the component sets for itself below
|
|
@@ -4,6 +4,7 @@ export interface ListContextValue {
|
|
|
4
4
|
density: ListDensity;
|
|
5
5
|
hasDividers: boolean;
|
|
6
6
|
listStyle: ListMarkerStyle;
|
|
7
|
+
edgeCompensation?: 'inline';
|
|
7
8
|
}
|
|
8
9
|
export declare const ListContext: import("react").Context<ListContextValue | null>;
|
|
9
10
|
//# sourceMappingURL=ListContext.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListContext.d.ts","sourceRoot":"","sources":["../../src/List/ListContext.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ListContext.d.ts","sourceRoot":"","sources":["../../src/List/ListContext.tsx"],"names":[],"mappings":"AAcA,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAC9D,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAErE,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,eAAe,CAAC;IAC3B,gBAAgB,CAAC,EAAE,QAAQ,CAAC;CAC7B;AAED,eAAO,MAAM,WAAW,kDAA+C,CAAC"}
|
package/dist/List/ListContext.js
CHANGED
|
@@ -5,7 +5,8 @@
|
|
|
5
5
|
/**
|
|
6
6
|
* @file ListContext.tsx
|
|
7
7
|
* @input Uses React createContext
|
|
8
|
-
* @output Exports ListContext for sharing density
|
|
8
|
+
* @output Exports ListContext for sharing density, dividers, marker style,
|
|
9
|
+
* and optional inline edge compensation between List and ListItem
|
|
9
10
|
* @position Internal context; consumed by List.tsx and ListItem.tsx
|
|
10
11
|
*/
|
|
11
12
|
import { createContext } from 'react';
|
package/dist/List/ListItem.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file ListItem.tsx
|
|
3
|
-
* @input Uses React, ReactNode, StyleXStyles, theme tokens
|
|
3
|
+
* @input Uses React, ReactNode, StyleXStyles, theme tokens, List edge compensation
|
|
4
4
|
* @output Exports ListItem component, ListItemProps type
|
|
5
5
|
* @position Core implementation; consumed by List, index.ts, tested by List.test.tsx
|
|
6
6
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../src/List/ListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,aAAa,CAAC;IAC7D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAExC;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAErD;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;
|
|
1
|
+
{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../src/List/ListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,aAAa,CAAC;IAC7D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAExC;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAErD;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAkGD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,OAAO,EACP,cAAc,EACd,IAAI,EACJ,MAAM,EACN,GAAG,EACH,UAAkB,EAClB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,SAAS,EACb,EAAE,aAAa,+BAiDf;yBAlEe,QAAQ"}
|
package/dist/List/ListItem.js
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file ListItem.tsx
|
|
7
|
-
* @input Uses React, ReactNode, StyleXStyles, theme tokens
|
|
7
|
+
* @input Uses React, ReactNode, StyleXStyles, theme tokens, List edge compensation
|
|
8
8
|
* @output Exports ListItem component, ListItemProps type
|
|
9
9
|
* @position Core implementation; consumed by List, index.ts, tested by List.test.tsx
|
|
10
10
|
*
|
|
@@ -40,10 +40,16 @@ const styles = {
|
|
|
40
40
|
kAmcRD: "xfrknyr",
|
|
41
41
|
$$css: true
|
|
42
42
|
},
|
|
43
|
+
inlineEdgeCompensation: {
|
|
44
|
+
keTefX: "x1t1czy8",
|
|
45
|
+
k71WvV: "x1cphv78",
|
|
46
|
+
$$css: true
|
|
47
|
+
},
|
|
43
48
|
withDivider: {
|
|
44
49
|
kt9PQ7: "x92x3c3",
|
|
45
50
|
kfdmCh: "x1q0q8m5",
|
|
46
51
|
kL6WhQ: "xw8gpjh",
|
|
52
|
+
kx8K5S: "x1t1lzn6",
|
|
47
53
|
$$css: true
|
|
48
54
|
}
|
|
49
55
|
};
|
|
@@ -101,6 +107,7 @@ export function ListItem({
|
|
|
101
107
|
const density = ctx?.density ?? 'balanced';
|
|
102
108
|
const hasDividers = ctx?.hasDividers ?? false;
|
|
103
109
|
const listStyle = ctx?.listStyle ?? 'none';
|
|
110
|
+
const edgeCompensation = ctx?.edgeCompensation;
|
|
104
111
|
const hasMarkers = listStyle !== 'none';
|
|
105
112
|
const marker = listStyle === 'disc' ? /*#__PURE__*/_jsx("span", {
|
|
106
113
|
...{
|
|
@@ -141,7 +148,7 @@ export function ListItem({
|
|
|
141
148
|
isDisabled: isDisabled,
|
|
142
149
|
isSelected: isSelected,
|
|
143
150
|
density: density,
|
|
144
|
-
xstyle: [hasMarkers && styles.withCounter, hasDividers && styles.withDivider, hasDividers && embeddedStyles.noRadius, xstyle],
|
|
151
|
+
xstyle: [hasMarkers && styles.withCounter, hasDividers && styles.withDivider, hasDividers && embeddedStyles.noRadius, edgeCompensation === 'inline' && styles.inlineEdgeCompensation, xstyle],
|
|
145
152
|
...mergeProps(themeProps('list-item'), {
|
|
146
153
|
className,
|
|
147
154
|
style
|
|
@@ -45,7 +45,7 @@ const styles = {
|
|
|
45
45
|
},
|
|
46
46
|
gridSingle: {
|
|
47
47
|
k1xSpc: "xrvj5dj",
|
|
48
|
-
kumcoG: "
|
|
48
|
+
kumcoG: "x1rkzygb",
|
|
49
49
|
kOIVth: "xpec5dj",
|
|
50
50
|
kGNEyG: "x1pha0wt",
|
|
51
51
|
$$css: true
|
|
@@ -177,12 +177,12 @@ export function MetadataList({
|
|
|
177
177
|
}
|
|
178
178
|
const isStacked = labelConfig.position === 'top';
|
|
179
179
|
if (typeof columns === 'number' && columns > 1) {
|
|
180
|
-
return isStacked ? `repeat(${columns}, 1fr)` : `repeat(${columns}, auto 1fr)`;
|
|
180
|
+
return isStacked ? `repeat(${columns}, 1fr)` : `repeat(${columns}, auto minmax(0, 1fr))`;
|
|
181
181
|
}
|
|
182
182
|
// A custom label width only applies to the label track of side labels.
|
|
183
183
|
if (!isStacked && labelConfig.width != null) {
|
|
184
184
|
const width = typeof labelConfig.width === 'number' ? `${labelConfig.width}px` : labelConfig.width;
|
|
185
|
-
return `${width} 1fr`;
|
|
185
|
+
return `${width} minmax(0, 1fr)`;
|
|
186
186
|
}
|
|
187
187
|
return null;
|
|
188
188
|
};
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
* - /packages/core/src/ScrollableArea/ScrollableArea.test.tsx
|
|
9
9
|
* - /packages/core/src/ScrollableArea/ScrollableArea.doc.mjs
|
|
10
10
|
* - /apps/storybook/stories/ScrollableArea.stories.tsx
|
|
11
|
+
* - /packages/cli/assets/templates/blocks/components/ScrollableArea/ (showcase blocks)
|
|
11
12
|
*/
|
|
12
13
|
import type { ReactNode } from 'react';
|
|
13
14
|
import type { BaseProps } from '../BaseProps';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollableArea.d.ts","sourceRoot":"","sources":["../../src/ScrollableArea/ScrollableArea.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"ScrollableArea.d.ts","sourceRoot":"","sources":["../../src/ScrollableArea/ScrollableArea.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAe5C,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,gBAAgB,EACrB,KAAK,uBAAuB,EAC7B,MAAM,4BAA4B,CAAC;AA0DpC,MAAM,MAAM,+BAA+B,GAAG,uBAAuB,CAAC;AAEtE,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,SAAS,CAAC,cAAc,CAAC,EACzB,YAAY,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,CAChD;IACC,wDAAwD;IACxD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,wEAAwE;IACxE,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,4FAA4F;IAC5F,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,gEAAgE;IAChE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,iEAAiE;IACjE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sCAAsC;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,8GAA8G;IAC9G,iBAAiB,CAAC,EAAE,+BAA+B,CAAC;IACpD,iEAAiE;IACjE,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,6EAA6E;IAC7E,aAAa,CAAC,EAAE,WAAW,CAAC;IAC5B,8EAA8E;IAC9E,kBAAkB,CAAC,EAAE,WAAW,CAAC;IACjC,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B,4EAA4E;IAC5E,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,6EAA6E;IAC7E,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,2EAA2E;IAC3E,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,0EAA0E;IAC1E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,IAAc,EACd,KAAK,EACL,IAAc,EACd,UAAoB,EACpB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,iBAAoC,EACpC,OAAW,EACX,aAAa,EACb,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,WAAmB,EACnB,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,mBAAmB,+BAuErB;yBA/Fe,cAAc"}
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
* - /packages/core/src/ScrollableArea/ScrollableArea.test.tsx
|
|
13
13
|
* - /packages/core/src/ScrollableArea/ScrollableArea.doc.mjs
|
|
14
14
|
* - /apps/storybook/stories/ScrollableArea.stories.tsx
|
|
15
|
+
* - /packages/cli/assets/templates/blocks/components/ScrollableArea/ (showcase blocks)
|
|
15
16
|
*/
|
|
16
17
|
import * as stylex from '@stylexjs/stylex';
|
|
17
18
|
import { paddingStyles, paddingInlineStyles, paddingInlineStartStyles, paddingInlineEndStyles, paddingBlockStyles, paddingBlockStartStyles, paddingBlockEndStyles, containerPaddingInlineVarStyles, containerPaddingInlineStartVarStyles, containerPaddingInlineEndVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles } from "../Layout/padding.stylex.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Selector.d.ts","sourceRoot":"","sources":["../../src/Selector/Selector.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Selector.d.ts","sourceRoot":"","sources":["../../src/Selector/Selector.tsx"],"names":[],"mappings":"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"}
|
|
@@ -963,8 +963,15 @@ export function Selector(props) {
|
|
|
963
963
|
}) : /*#__PURE__*/_jsx("div", {
|
|
964
964
|
ref: listboxRef,
|
|
965
965
|
id: listboxId,
|
|
966
|
-
role: "listbox"
|
|
967
|
-
|
|
966
|
+
role: "listbox"
|
|
967
|
+
// The bottom sheet is a modal layer, so Chromium drops the trigger
|
|
968
|
+
// outside it from the accessibility tree and a reference to it yields
|
|
969
|
+
// no name. Name only this no-search sheet directly from the component's
|
|
970
|
+
// label; the searchable sheet and the popovers keep the trigger
|
|
971
|
+
// relationship.
|
|
972
|
+
,
|
|
973
|
+
"aria-label": surface.activePresentation === 'bottom-sheet' ? label : undefined,
|
|
974
|
+
"aria-labelledby": surface.activePresentation === 'bottom-sheet' ? undefined : triggerId,
|
|
968
975
|
"aria-activedescendant": surface.isOpen && highlightedIndex >= 0 ? getItemId(highlightedIndex) : undefined,
|
|
969
976
|
tabIndex: surface.activePresentation === 'bottom-sheet' ? 0 : undefined,
|
|
970
977
|
onKeyDown: surface.activePresentation === 'bottom-sheet' ? handleTriggerKeyDown : undefined,
|
package/dist/astryx.css
CHANGED
|
@@ -126,6 +126,8 @@
|
|
|
126
126
|
.xqxtgf4{--_input-clear-hit-content:none}
|
|
127
127
|
.xtoycft{--_input-clear-hit-inset:0px}
|
|
128
128
|
.xqlix59{--_item-description-color:var(--color-error)}
|
|
129
|
+
.xw1s368{--_item-inset-inline:var(--spacing-2)}
|
|
130
|
+
.x1ytau7y{--_item-inset-inline:var(--spacing-3)}
|
|
129
131
|
.xufyqxy{--_item-label-color:var(--color-error)}
|
|
130
132
|
.xiki222{--_popover-radius:var(--radius-container)}
|
|
131
133
|
.xdjmrzf{--_reveal-delay-reduced:0s,0s}
|
|
@@ -536,6 +538,7 @@
|
|
|
536
538
|
.xnjsko4:not(#\#):not(#\#){padding-inline:0}
|
|
537
539
|
.xx2oswg:not(#\#):not(#\#){padding-inline:calc(var(--spacing-1) - 1px)}
|
|
538
540
|
.x2hg6jq:not(#\#):not(#\#){padding-inline:calc(var(--spacing-1) + var(--border-width))}
|
|
541
|
+
.xaip428:not(#\#):not(#\#){padding-inline:var(--_item-inset-inline)}
|
|
539
542
|
.x1kpkw9v:not(#\#):not(#\#){padding-inline:var(--_tab-strip-bleed)}
|
|
540
543
|
.x1w6f3ag:not(#\#):not(#\#){padding-inline:var(--_textarea-inline-padding)}
|
|
541
544
|
.xkjnx3w:not(#\#):not(#\#){padding-inline:var(--spacing-0-5)}
|
|
@@ -967,6 +970,7 @@
|
|
|
967
970
|
.x1y6fwsi:not(#\#):not(#\#):not(#\#){grid-template-columns:1fr}
|
|
968
971
|
.x1g3yg12:not(#\#):not(#\#):not(#\#){grid-template-columns:auto 1fr auto}
|
|
969
972
|
.x1pmbctz:not(#\#):not(#\#):not(#\#){grid-template-columns:auto 1fr}
|
|
973
|
+
.x1rkzygb:not(#\#):not(#\#):not(#\#){grid-template-columns:auto minmax(0,1fr)}
|
|
970
974
|
.x1wthsqz:not(#\#):not(#\#):not(#\#){grid-template-columns:auto repeat(7,1fr)}
|
|
971
975
|
.x1mzazjb:not(#\#):not(#\#):not(#\#){grid-template-columns:repeat(7,1fr)}
|
|
972
976
|
.x189bvgu:not(#\#):not(#\#):not(#\#){grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
|
|
@@ -1026,6 +1030,7 @@
|
|
|
1026
1030
|
.x3ct3a4:not(#\#):not(#\#):not(#\#){list-style-type:none}
|
|
1027
1031
|
.x14z9mp:not(#\#):not(#\#):not(#\#){margin-inline-end:0}
|
|
1028
1032
|
.x11t971q:not(#\#):not(#\#):not(#\#){margin-inline-end:auto}
|
|
1033
|
+
.x1cphv78:not(#\#):not(#\#):not(#\#){margin-inline-end:calc(-1 * min(var(--_item-inset-inline),var(--container-padding-inline-end,0px)))}
|
|
1029
1034
|
.x1fcf3bl:not(#\#):not(#\#):not(#\#){margin-inline-end:calc(-1 * var(--container-padding-inline-end,0px))}
|
|
1030
1035
|
.x1kpg4um:not(#\#):not(#\#):not(#\#){margin-inline-end:calc(-1 * var(--layout-padding-inner-x,var(--spacing-4)))}
|
|
1031
1036
|
.xkd40ry:not(#\#):not(#\#):not(#\#){margin-inline-end:calc(-1 * var(--spacing-1))}
|
|
@@ -1038,6 +1043,7 @@
|
|
|
1038
1043
|
.x1qfufaz:not(#\#):not(#\#):not(#\#){margin-inline-start:-8px}
|
|
1039
1044
|
.x1lziwak:not(#\#):not(#\#):not(#\#){margin-inline-start:0}
|
|
1040
1045
|
.xvc5jky:not(#\#):not(#\#):not(#\#){margin-inline-start:auto}
|
|
1046
|
+
.x1t1czy8:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(-1 * min(var(--_item-inset-inline),var(--container-padding-inline-start,0px)))}
|
|
1041
1047
|
.xd10s4z:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(-1 * var(--border-width))}
|
|
1042
1048
|
.xojxgvx:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(-1 * var(--container-padding-inline-start,0px))}
|
|
1043
1049
|
.x1wim8z0:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(-1 * var(--layout-padding-inner-x,var(--spacing-4)))}
|
|
@@ -1859,6 +1865,7 @@
|
|
|
1859
1865
|
.x1g31smg:first-child:not(#\#):not(#\#):not(#\#):not(#\#){border-top-width:0}
|
|
1860
1866
|
.xkibk3:first-child:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:calc(-1 * var(--container-padding-block-start,0px))}
|
|
1861
1867
|
.x1vjq31q:first-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:0}
|
|
1868
|
+
.x1t1lzn6:last-child:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:0}
|
|
1862
1869
|
.xlayyun:last-child:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:calc(-1 * var(--container-padding-block-end,0px))}
|
|
1863
1870
|
.xup0pd7:last-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:0}
|
|
1864
1871
|
.x15cytp8:focus:not(#\#):not(#\#):not(#\#):not(#\#){height:auto}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"derivedVarRegistry.d.ts","sourceRoot":"","sources":["../../src/theme/derivedVarRegistry.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,WAAW,eAAe;IAC9B,2EAA2E;IAC3E,QAAQ,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,iFAAiF;IACjF,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,EAAE,
|
|
1
|
+
{"version":3,"file":"derivedVarRegistry.d.ts","sourceRoot":"","sources":["../../src/theme/derivedVarRegistry.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,WAAW,eAAe;IAC9B,2EAA2E;IAC3E,QAAQ,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,iFAAiF;IACjF,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,EAAE,CAgDhE,CAAC;AAiBF;;;GAGG;AACH,wBAAgB,cAAc,CAC5B,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,MAAM,GACf,eAAe,EAAE,CASnB"}
|
|
@@ -81,6 +81,10 @@ export const derivedVarRegistry = {
|
|
|
81
81
|
property: 'borderRadius',
|
|
82
82
|
vars: ['--_hovercard-radius']
|
|
83
83
|
}],
|
|
84
|
+
item: [{
|
|
85
|
+
property: 'paddingInline',
|
|
86
|
+
vars: ['--_item-inset-inline']
|
|
87
|
+
}],
|
|
84
88
|
'number-input': [{
|
|
85
89
|
property: 'padding',
|
|
86
90
|
expand: 'container'
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@astryxdesign/core",
|
|
3
|
-
"version": "0.6.3-canary.
|
|
3
|
+
"version": "0.6.3-canary.db4e378",
|
|
4
4
|
"displayName": "Astryx Core",
|
|
5
5
|
"description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
|
|
6
6
|
"author": "Meta Open Source",
|
|
@@ -692,8 +692,8 @@
|
|
|
692
692
|
"react-dom": ">=19.0.0"
|
|
693
693
|
},
|
|
694
694
|
"devDependencies": {
|
|
695
|
-
"@astryxdesign/a11y-spec": "0.6.3-canary.
|
|
696
|
-
"@astryxdesign/cli": "0.6.3-canary.
|
|
695
|
+
"@astryxdesign/a11y-spec": "0.6.3-canary.db4e378",
|
|
696
|
+
"@astryxdesign/cli": "0.6.3-canary.db4e378",
|
|
697
697
|
"@babel/cli": "^7.29.7",
|
|
698
698
|
"@babel/core": "^7.29.7",
|
|
699
699
|
"@babel/preset-react": "^7.29.7",
|
|
@@ -7,7 +7,8 @@ export const docs = {
|
|
|
7
7
|
subComponentOf: 'Chat',
|
|
8
8
|
displayName: 'Chat Message Bubble',
|
|
9
9
|
isHiddenFromOverview: true,
|
|
10
|
-
description:
|
|
10
|
+
description:
|
|
11
|
+
'Styled content container for the chat "bubble." Reads sender from parent ChatMessage context to auto-style the background. Use filled for standard messages and ghost when content needs alignment without a visible boundary. Supports name/metadata slots aligned with bubble padding, and multi-bubble grouping via the group prop for consecutive messages from the same sender.',
|
|
11
12
|
props: [
|
|
12
13
|
{
|
|
13
14
|
name: 'children',
|
|
@@ -18,18 +19,21 @@ export const docs = {
|
|
|
18
19
|
{
|
|
19
20
|
name: 'variant',
|
|
20
21
|
type: "'filled' | 'ghost'",
|
|
21
|
-
description:
|
|
22
|
+
description:
|
|
23
|
+
"Visual variant. 'filled' renders sender-colored background (default). 'ghost' renders transparent background but keeps padding for alignment.",
|
|
22
24
|
default: "'filled'",
|
|
23
25
|
},
|
|
24
26
|
{
|
|
25
27
|
name: 'name',
|
|
26
28
|
type: 'ReactNode',
|
|
27
|
-
description:
|
|
29
|
+
description:
|
|
30
|
+
"Sender name rendered above the bubble, aligned with bubble text padding. Use on the first bubble in a message. Non-rendering scalar values (null, undefined, booleans, and the empty string) omit the aligned wrapper; numeric 0 remains aligned. If the first content is raw (no bubble), use ChatMessage's `name` prop instead.",
|
|
28
31
|
},
|
|
29
32
|
{
|
|
30
33
|
name: 'metadata',
|
|
31
34
|
type: 'ReactNode',
|
|
32
|
-
description:
|
|
35
|
+
description:
|
|
36
|
+
"Metadata content rendered below the bubble, aligned with bubble text padding. Use on the last bubble in a message. Non-rendering scalar values (null, undefined, booleans, and the empty string) omit the aligned wrapper; numeric 0 remains aligned. If the last content is raw (no bubble), use ChatMessage's `metadata` prop instead.",
|
|
33
37
|
slotElements: [
|
|
34
38
|
{
|
|
35
39
|
__element: 'Text',
|
|
@@ -43,12 +47,14 @@ export const docs = {
|
|
|
43
47
|
{
|
|
44
48
|
name: 'group',
|
|
45
49
|
type: "'first' | 'middle' | 'last'",
|
|
46
|
-
description:
|
|
50
|
+
description:
|
|
51
|
+
'Position within a multi-bubble group. Controls corner radius reduction on the sender side. Leave unset for standalone bubbles (full radius).',
|
|
47
52
|
},
|
|
48
53
|
{
|
|
49
54
|
name: 'width',
|
|
50
55
|
type: 'SizeValue',
|
|
51
|
-
description:
|
|
56
|
+
description:
|
|
57
|
+
'Width of the bubble (number = pixels, string = used as-is). When set, replaces the default max(80%, 280px) width cap. Combine with variant="ghost" to let custom content (an artifact card, attachments) span the full message column.',
|
|
52
58
|
},
|
|
53
59
|
],
|
|
54
60
|
};
|
|
@@ -57,14 +63,18 @@ export const docsZh = {
|
|
|
57
63
|
name: 'ChatMessageBubble',
|
|
58
64
|
isHiddenFromOverview: true,
|
|
59
65
|
displayName: 'Chat Message Bubble',
|
|
60
|
-
description:
|
|
66
|
+
description:
|
|
67
|
+
'样式化的气泡容器,从父上下文读取发送者信息进行自动样式化。支持 name/metadata 插槽、多气泡分组和透明变体。',
|
|
61
68
|
propDescriptions: {
|
|
62
69
|
children: '气泡内容:文本、Markdown 或任何 ReactNode。',
|
|
63
|
-
variant:
|
|
64
|
-
|
|
65
|
-
|
|
70
|
+
variant:
|
|
71
|
+
"视觉变体。'filled' 渲染发送者颜色背景,'ghost' 渲染透明背景但保持填充对齐。",
|
|
72
|
+
name: '气泡上方渲染的发送者名称,与气泡文本内边距对齐。null、undefined、布尔值和空字符串会省略对齐容器;数字 0 仍保持对齐。用于消息中的第一个气泡。',
|
|
73
|
+
metadata:
|
|
74
|
+
'气泡下方渲染的元数据内容,与气泡文本内边距对齐。null、undefined、布尔值和空字符串会省略对齐容器;数字 0 仍保持对齐。用于消息中的最后一个气泡。',
|
|
66
75
|
group: '多气泡组中的位置。控制发送者侧的圆角缩减。',
|
|
67
|
-
width:
|
|
76
|
+
width:
|
|
77
|
+
'气泡宽度(数字 = 像素,字符串 = 按原样使用)。设置后替代默认的 max(80%, 280px) 宽度上限;与 ghost 变体组合可让自定义内容占满消息列宽度。',
|
|
68
78
|
},
|
|
69
79
|
};
|
|
70
80
|
|
|
@@ -72,14 +82,17 @@ export const docsDense = {
|
|
|
72
82
|
name: 'ChatMessageBubble',
|
|
73
83
|
isHiddenFromOverview: true,
|
|
74
84
|
displayName: 'Chat Message Bubble',
|
|
75
|
-
description:
|
|
85
|
+
description:
|
|
86
|
+
'styled bubble container; reads sender from context; supports name/metadata slots, group corners, ghost variant',
|
|
76
87
|
propDescriptions: {
|
|
77
88
|
children: 'bubble content: text, Markdown, any ReactNode',
|
|
78
89
|
variant: 'filled (sender bg) or ghost (transparent, keeps padding)',
|
|
79
|
-
name: 'sender name above bubble
|
|
90
|
+
name: 'sender name above bubble; omits non-rendering scalars; keeps numeric 0 aligned',
|
|
80
91
|
displayName: 'sender name above bubble, aligned w/ bubble padding',
|
|
81
|
-
metadata:
|
|
92
|
+
metadata:
|
|
93
|
+
'metadata below bubble; omits non-rendering scalars; keeps numeric 0 aligned',
|
|
82
94
|
group: 'position in multi-bubble group; controls corner radius reduction',
|
|
83
|
-
width:
|
|
95
|
+
width:
|
|
96
|
+
'bubble width (number=px, string=as-is); replaces default max(80%,280px) cap; ghost+width="100%" spans full message column',
|
|
84
97
|
},
|
|
85
98
|
};
|