@astryxdesign/core 0.6.3-canary.f22695a → 0.6.3
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/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +28 -13
- package/dist/Chat/ChatLayout.d.ts +0 -19
- package/dist/Chat/ChatLayout.d.ts.map +1 -1
- package/dist/Chat/ChatLayout.js +0 -19
- package/dist/Chat/ChatLayoutScrollButton.d.ts.map +1 -1
- package/dist/Chat/ChatLayoutScrollButton.js +34 -44
- package/dist/Citation/Citation.d.ts +1 -1
- package/dist/Citation/Citation.d.ts.map +1 -1
- package/dist/Citation/Citation.js +2 -3
- package/dist/CodeBlock/highlightRanges.d.ts.map +1 -1
- package/dist/CodeBlock/highlightRanges.js +3 -14
- package/dist/Icon/Icon.d.ts +31 -6
- package/dist/Icon/Icon.d.ts.map +1 -1
- package/dist/Icon/Icon.js +71 -8
- package/dist/Link/useLinkComponent.d.ts +15 -5
- package/dist/Link/useLinkComponent.d.ts.map +1 -1
- package/dist/Link/useLinkComponent.js +51 -34
- package/dist/Markdown/Markdown.js +2 -2
- package/dist/Markdown/url.d.ts +0 -2
- package/dist/Markdown/url.d.ts.map +1 -1
- package/dist/Markdown/url.js +2 -8
- package/dist/PowerSearch/PowerSearchValueEditor.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchValueEditor.js +0 -5
- package/dist/TopNav/TopNavMenu.d.ts +1 -1
- package/dist/TopNav/TopNavMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMenu.js +2 -3
- package/dist/astryx.css +4 -2
- package/dist/hooks/useClickableContainer.d.ts +1 -10
- package/dist/hooks/useClickableContainer.d.ts.map +1 -1
- package/dist/hooks/useClickableContainer.js +4 -15
- package/dist/index.d.ts +0 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -3
- package/dist/theme/generateThemeRules.d.ts +7 -13
- package/dist/theme/generateThemeRules.d.ts.map +1 -1
- package/dist/theme/generateThemeRules.js +35 -131
- package/package.json +4 -9
- package/src/Button/Button.doc.mjs +5 -5
- package/src/Button/Button.tsx +13 -15
- package/src/Chat/ChatLayout.doc.mjs +4 -12
- package/src/Chat/ChatLayout.test.tsx +0 -28
- package/src/Chat/ChatLayout.tsx +0 -19
- package/src/Chat/ChatLayoutScrollButton.test.tsx +0 -31
- package/src/Chat/ChatLayoutScrollButton.tsx +14 -31
- package/src/Citation/Citation.doc.mjs +2 -2
- package/src/Citation/Citation.test.tsx +0 -17
- package/src/Citation/Citation.tsx +2 -4
- package/src/ClickableCard/ClickableCard.doc.mjs +2 -2
- package/src/CodeBlock/highlightRanges.test.ts +1 -143
- package/src/CodeBlock/highlightRanges.ts +5 -15
- package/src/Icon/Icon.doc.mjs +5 -7
- package/src/Icon/Icon.spec.md +40 -81
- package/src/Icon/Icon.test.tsx +3 -6
- package/src/Icon/Icon.tsx +68 -20
- package/src/IconButton/IconButton.doc.mjs +3 -3
- package/src/IconButton/IconButton.test.tsx +0 -40
- package/src/Item/Item.doc.mjs +2 -2
- package/src/Link/Link.doc.mjs +4 -6
- package/src/Link/LinkProvider.doc.mjs +2 -2
- package/src/Link/useLinkComponent.test.tsx +0 -333
- package/src/Link/useLinkComponent.ts +57 -29
- package/src/List/ListItem.doc.mjs +2 -2
- package/src/Markdown/Markdown.doc.mjs +2 -2
- package/src/Markdown/Markdown.spec.md +15 -19
- package/src/Markdown/Markdown.test.tsx +0 -52
- package/src/Markdown/Markdown.tsx +2 -2
- package/src/Markdown/parser.test.ts +0 -20
- package/src/Markdown/url.ts +3 -9
- package/src/PowerSearch/PowerSearchValueEditor.test.tsx +0 -51
- package/src/PowerSearch/PowerSearchValueEditor.tsx +0 -4
- package/src/Token/Token.doc.mjs +2 -2
- package/src/TopNav/TopNavMenu.doc.mjs +2 -2
- package/src/TopNav/TopNavMenu.test.tsx +0 -30
- package/src/TopNav/TopNavMenu.tsx +2 -7
- package/src/hooks/useClickableContainer.ts +4 -20
- package/src/index.ts +0 -3
- package/src/tailwind-theme.css +6 -0
- package/src/theme/Theme.test.tsx +0 -32
- package/src/theme/generateThemeRules.test.ts +2 -470
- package/src/theme/generateThemeRules.ts +51 -219
- package/src/theme/tokenValueCompat.test.ts +1 -4
- package/dist/Icon/IconDefaultSizeContext.d.ts +0 -4
- package/dist/Icon/IconDefaultSizeContext.d.ts.map +0 -1
- package/dist/Icon/IconDefaultSizeContext.js +0 -18
- package/dist/Icon/IconSize.stylex.d.ts +0 -65
- package/dist/Icon/IconSize.stylex.d.ts.map +0 -1
- package/dist/Icon/IconSize.stylex.js +0 -75
- package/dist/Timer/Timer.d.ts +0 -49
- package/dist/Timer/Timer.d.ts.map +0 -1
- package/dist/Timer/Timer.js +0 -158
- package/dist/Timer/index.d.ts +0 -9
- package/dist/Timer/index.d.ts.map +0 -1
- package/dist/Timer/index.js +0 -10
- package/dist/theme/declarationBoundary.d.ts +0 -17
- package/dist/theme/declarationBoundary.d.ts.map +0 -1
- package/dist/theme/declarationBoundary.js +0 -343
- package/dist/utils/safeUrl.d.ts +0 -11
- package/dist/utils/safeUrl.d.ts.map +0 -1
- package/dist/utils/safeUrl.js +0 -78
- package/src/Chat/ChatLayout.spec.md +0 -271
- package/src/Chat/ChatLayoutScrollButton.spec.md +0 -338
- package/src/Chat/__tests__/ChatLayoutScrollButton.a11y.chromium.spec.ts +0 -514
- package/src/Chat/__tests__/ChatLayoutScrollButtonSurface.a11y.chromium.spec.ts +0 -740
- package/src/Icon/IconDefaultSizeContext.ts +0 -23
- package/src/Icon/IconSize.stylex.ts +0 -70
- package/src/Link/__tests__/Link.navigation.a11y.chromium.spec.ts +0 -261
- package/src/Markdown/Markdown.renderBoundary.test.tsx +0 -72
- package/src/Timer/Timer.doc.mjs +0 -183
- package/src/Timer/Timer.spec.md +0 -215
- package/src/Timer/Timer.test.tsx +0 -302
- package/src/Timer/Timer.tsx +0 -258
- package/src/Timer/index.ts +0 -11
- package/src/hooks/useClickableContainer.test.tsx +0 -236
- package/src/theme/declarationBoundary.test.ts +0 -126
- package/src/theme/declarationBoundary.ts +0 -347
- package/src/utils/safeUrl.test.ts +0 -88
- package/src/utils/safeUrl.ts +0 -85
|
@@ -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;
|
|
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
|
@@ -24,8 +24,6 @@ import "../theme/tokens.stylex.js";
|
|
|
24
24
|
import { colorVars, sizeVars, spacingVars, radiusVars, borderVars, durationVars, easeVars, fontWeightVars, typeScaleVars, shadowVars, focusVars } from "../theme/tokens.stylex.js";
|
|
25
25
|
import { Spinner } from "../Spinner/index.js";
|
|
26
26
|
import { VisuallyHidden } from "../VisuallyHidden/index.js";
|
|
27
|
-
import { IconDefaultSizeProvider } from "../Icon/IconDefaultSizeContext.js";
|
|
28
|
-
import { iconBoxSizeStyles } from "../Icon/IconSize.stylex.js";
|
|
29
27
|
import { EDGE_COMP_ATTR } from "../Layout/edgeCompensation.stylex.js";
|
|
30
28
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
31
29
|
import { useButtonGroup } from "../ButtonGroup/ButtonGroupContext.js";
|
|
@@ -134,6 +132,32 @@ const sizeStyles = {
|
|
|
134
132
|
}
|
|
135
133
|
};
|
|
136
134
|
|
|
135
|
+
/**
|
|
136
|
+
* Icon size per button size.
|
|
137
|
+
* Matches Icon sizing: sm/md=16px, lg=20px.
|
|
138
|
+
* fontSize is set so emoji and text-based icons scale correctly.
|
|
139
|
+
*/
|
|
140
|
+
const iconSizeStyles = {
|
|
141
|
+
sm: {
|
|
142
|
+
kzqmXN: "x1kky2od",
|
|
143
|
+
kZKoxP: "xlup9mm",
|
|
144
|
+
kGuDYH: "x1j61zf2",
|
|
145
|
+
$$css: true
|
|
146
|
+
},
|
|
147
|
+
md: {
|
|
148
|
+
kzqmXN: "x1kky2od",
|
|
149
|
+
kZKoxP: "xlup9mm",
|
|
150
|
+
kGuDYH: "x1j61zf2",
|
|
151
|
+
$$css: true
|
|
152
|
+
},
|
|
153
|
+
lg: {
|
|
154
|
+
kzqmXN: "xw4jnvo",
|
|
155
|
+
kZKoxP: "x1qx5ct2",
|
|
156
|
+
kGuDYH: "xwsyq91",
|
|
157
|
+
$$css: true
|
|
158
|
+
}
|
|
159
|
+
};
|
|
160
|
+
|
|
137
161
|
/**
|
|
138
162
|
* Resting elevation for floating buttons (e.g. a FAB). `none` is the default
|
|
139
163
|
* flat button; `low`/`med`/`high` map to the shadow token scale. 'none' stays
|
|
@@ -197,11 +221,6 @@ const variants = {
|
|
|
197
221
|
* Button size type derived from the sizeStyles StyleX object
|
|
198
222
|
*/
|
|
199
223
|
|
|
200
|
-
const iconSizeByButtonSize = {
|
|
201
|
-
sm: 'sm',
|
|
202
|
-
md: 'sm',
|
|
203
|
-
lg: 'md'
|
|
204
|
-
};
|
|
205
224
|
const spinnerReveal = "x18re5ia-B";
|
|
206
225
|
const contentHide = "x188b6p3-B";
|
|
207
226
|
|
|
@@ -438,7 +457,6 @@ export function Button({
|
|
|
438
457
|
size,
|
|
439
458
|
elevation: buttonGroup ? 'none' : elevation
|
|
440
459
|
}), sharedStylexProps, className, style);
|
|
441
|
-
const iconSize = iconSizeByButtonSize[size];
|
|
442
460
|
const buttonContent = /*#__PURE__*/_jsxs(_Fragment, {
|
|
443
461
|
children: [isLoadingState && /*#__PURE__*/_jsx("span", {
|
|
444
462
|
...{
|
|
@@ -458,11 +476,8 @@ export function Button({
|
|
|
458
476
|
...stylex.props(styles.contentWrapper, isLoadingState && (delaySpinner ? loadingStyles.hiddenContentDelayed : loadingStyles.hiddenContent)),
|
|
459
477
|
"aria-hidden": isLoadingState || undefined,
|
|
460
478
|
children: [icon && /*#__PURE__*/_jsx("span", {
|
|
461
|
-
...stylex.props(styles.iconWrapper,
|
|
462
|
-
children:
|
|
463
|
-
value: iconSize,
|
|
464
|
-
children: icon
|
|
465
|
-
})
|
|
479
|
+
...stylex.props(styles.iconWrapper, iconSizeStyles[size]),
|
|
480
|
+
children: icon
|
|
466
481
|
}), isIconOnly ? null : /*#__PURE__*/_jsx("span", {
|
|
467
482
|
...{
|
|
468
483
|
className: "xb3r6kr xlyipyv xeuugli"
|
|
@@ -70,25 +70,6 @@ export interface ChatLayoutProps extends BaseProps<HTMLDivElement> {
|
|
|
70
70
|
*/
|
|
71
71
|
density?: Density;
|
|
72
72
|
}
|
|
73
|
-
/**
|
|
74
|
-
* Layout shell for a full chat interface: messages in page flow, composer
|
|
75
|
-
* docked to the bottom behind a frosted glass layer, with auto-scroll and a
|
|
76
|
-
* scroll-to-bottom button wired in.
|
|
77
|
-
*
|
|
78
|
-
* @example
|
|
79
|
-
* ```
|
|
80
|
-
* <ChatLayout
|
|
81
|
-
* density="spacious"
|
|
82
|
-
* composer={<ChatComposer onSubmit={send} />}
|
|
83
|
-
* emptyState={<EmptyState title="No messages yet" />}>
|
|
84
|
-
* <ChatMessageList>
|
|
85
|
-
* <ChatMessage sender="assistant">
|
|
86
|
-
* <ChatMessageBubble>How can I help?</ChatMessageBubble>
|
|
87
|
-
* </ChatMessage>
|
|
88
|
-
* </ChatMessageList>
|
|
89
|
-
* </ChatLayout>
|
|
90
|
-
* ```
|
|
91
|
-
*/
|
|
92
73
|
export declare function ChatLayout({ children, composer, density, emptyState, scrollButton, scrollRef: externalScrollRef, xstyle, className, style, 'data-testid': testId, ref, ...rest }: ChatLayoutProps): import("react").JSX.Element;
|
|
93
74
|
export declare namespace ChatLayout {
|
|
94
75
|
var displayName: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatLayout.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayout.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;AAGtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C,KAAK,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAEnD,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAEhC;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAEhD;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA4KD
|
|
1
|
+
{"version":3,"file":"ChatLayout.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayout.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;AAGtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C,KAAK,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAEnD,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAEhC;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAEhD;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA4KD,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,QAAQ,EACR,OAAoB,EACpB,UAAU,EACV,YAAY,EACZ,SAAS,EAAE,iBAAiB,EAC5B,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,+BA4GjB;yBAzHe,UAAU"}
|
package/dist/Chat/ChatLayout.js
CHANGED
|
@@ -184,25 +184,6 @@ function hasVisibleContent(children) {
|
|
|
184
184
|
// Component
|
|
185
185
|
// =============================================================================
|
|
186
186
|
|
|
187
|
-
/**
|
|
188
|
-
* Layout shell for a full chat interface: messages in page flow, composer
|
|
189
|
-
* docked to the bottom behind a frosted glass layer, with auto-scroll and a
|
|
190
|
-
* scroll-to-bottom button wired in.
|
|
191
|
-
*
|
|
192
|
-
* @example
|
|
193
|
-
* ```
|
|
194
|
-
* <ChatLayout
|
|
195
|
-
* density="spacious"
|
|
196
|
-
* composer={<ChatComposer onSubmit={send} />}
|
|
197
|
-
* emptyState={<EmptyState title="No messages yet" />}>
|
|
198
|
-
* <ChatMessageList>
|
|
199
|
-
* <ChatMessage sender="assistant">
|
|
200
|
-
* <ChatMessageBubble>How can I help?</ChatMessageBubble>
|
|
201
|
-
* </ChatMessage>
|
|
202
|
-
* </ChatMessageList>
|
|
203
|
-
* </ChatLayout>
|
|
204
|
-
* ```
|
|
205
|
-
*/
|
|
206
187
|
export function ChatLayout({
|
|
207
188
|
children,
|
|
208
189
|
composer,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatLayoutScrollButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayoutScrollButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ChatLayoutScrollButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayoutScrollButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,CAAC,cAAc,CAAC,EACzB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qCAAqC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AA2DD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,GAAG,EACH,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,2BAA2B,qBAkC7B;yBA3Ce,sBAAsB"}
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
import React from 'react';
|
|
19
19
|
import * as stylex from '@stylexjs/stylex';
|
|
20
20
|
import "../theme/tokens.stylex.js";
|
|
21
|
-
import { colorVars, spacingVars, radiusVars, shadowVars,
|
|
21
|
+
import { colorVars, spacingVars, radiusVars, shadowVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
|
|
22
22
|
import { Icon } from "../Icon/index.js";
|
|
23
23
|
import { Button } from "../Button/index.js";
|
|
24
24
|
import { mergeProps } from "../utils/index.js";
|
|
@@ -75,50 +75,40 @@ export function ChatLayoutScrollButton({
|
|
|
75
75
|
...rest
|
|
76
76
|
}) {
|
|
77
77
|
const t = useTranslator();
|
|
78
|
-
return (
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
icon: "chevronDown",
|
|
111
|
-
size: "md"
|
|
112
|
-
}),
|
|
113
|
-
variant: "ghost",
|
|
114
|
-
size: "md",
|
|
115
|
-
isIconOnly: !label,
|
|
116
|
-
onClick: onClick,
|
|
117
|
-
xstyle: [styles.button, label ? styles.buttonWithLabel : null],
|
|
118
|
-
children: label ?? undefined
|
|
119
|
-
})
|
|
78
|
+
return /*#__PURE__*/_jsx("div", {
|
|
79
|
+
ref: ref,
|
|
80
|
+
...mergeProps(themeProps('chat-layout-scroll-button'), stylex.props(styles.wrapper, xstyle), className, style),
|
|
81
|
+
...rest,
|
|
82
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
83
|
+
...{
|
|
84
|
+
0: {
|
|
85
|
+
className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x10w6t97 x1apppo2 xlr8y92 x2rcmwa x12w9bfk xg01cxk x47corl x1x67gh"
|
|
86
|
+
},
|
|
87
|
+
2: {
|
|
88
|
+
className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x10w6t97 x1apppo2 xlr8y92 x2rcmwa x12w9bfk x1hc1fzr x67bb7w x1x67gh"
|
|
89
|
+
},
|
|
90
|
+
1: {
|
|
91
|
+
className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x10w6t97 x1apppo2 xlr8y92 x2rcmwa x12w9bfk xg01cxk x47corl x1ncir08"
|
|
92
|
+
},
|
|
93
|
+
3: {
|
|
94
|
+
className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x10w6t97 x1apppo2 xlr8y92 x2rcmwa x12w9bfk x1hc1fzr x67bb7w x1ncir08"
|
|
95
|
+
}
|
|
96
|
+
}[!!isVisible << 1 | !!label << 0],
|
|
97
|
+
children: /*#__PURE__*/_jsx(Button, {
|
|
98
|
+
label: label ?? t('@astryx.chatLayoutScrollButton.scrollToBottom'),
|
|
99
|
+
"aria-label": label ?? t('@astryx.chatLayoutScrollButton.scrollToBottom'),
|
|
100
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
|
101
|
+
icon: "chevronDown",
|
|
102
|
+
size: "md"
|
|
103
|
+
}),
|
|
104
|
+
variant: "ghost",
|
|
105
|
+
size: "md",
|
|
106
|
+
isIconOnly: !label,
|
|
107
|
+
onClick: onClick,
|
|
108
|
+
xstyle: [styles.button, label ? styles.buttonWithLabel : null],
|
|
109
|
+
children: label ?? undefined
|
|
120
110
|
})
|
|
121
111
|
})
|
|
122
|
-
);
|
|
112
|
+
});
|
|
123
113
|
}
|
|
124
114
|
ChatLayoutScrollButton.displayName = 'ChatLayoutScrollButton';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file Citation.tsx
|
|
3
|
-
* @input Uses React, StyleX, theme tokens
|
|
3
|
+
* @input Uses React, StyleX, theme tokens
|
|
4
4
|
* @output Exports Citation component for inline citation references
|
|
5
5
|
* @position Core implementation; consumed by index.ts
|
|
6
6
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Citation.d.ts","sourceRoot":"","sources":["../../src/Citation/Citation.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Citation.d.ts","sourceRoot":"","sources":["../../src/Citation/Citation.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAarC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC3D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B,MAAM,EAAE,cAAc,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B;AAiHD,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,MAAM,EACN,MAAM,EACN,OAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,aAAa,GAAG,KAAK,CAAC,YAAY,CA2FpC;yBArGe,QAAQ"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file Citation.tsx
|
|
7
|
-
* @input Uses React, StyleX, theme tokens
|
|
7
|
+
* @input Uses React, StyleX, theme tokens
|
|
8
8
|
* @output Exports Citation component for inline citation references
|
|
9
9
|
* @position Core implementation; consumed by index.ts
|
|
10
10
|
*
|
|
@@ -19,7 +19,6 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
19
19
|
import "../theme/tokens.stylex.js";
|
|
20
20
|
import { colorVars, spacingVars, radiusVars, typeScaleVars, fontWeightVars, borderVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
|
|
21
21
|
import { mergeProps } from "../utils/index.js";
|
|
22
|
-
import { isSafeUrl } from "../utils/safeUrl.js";
|
|
23
22
|
import { themeProps } from "../utils/themeProps.js";
|
|
24
23
|
import { useTranslator } from "../i18n/index.js";
|
|
25
24
|
import { renderIconSlot } from "../Icon/index.js";
|
|
@@ -104,7 +103,7 @@ export function Citation({
|
|
|
104
103
|
}) {
|
|
105
104
|
const t = useTranslator();
|
|
106
105
|
const title = source.title ?? String(number);
|
|
107
|
-
const href = source.url
|
|
106
|
+
const href = source.url;
|
|
108
107
|
|
|
109
108
|
// Resolve the source icon. A non-string `icon` node renders as-is (an Astryx
|
|
110
109
|
// <Icon>, SVG, avatar, etc.). Otherwise fall back to an image URL: `src`, or
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"highlightRanges.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/highlightRanges.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAc,SAAS,EAAC,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"highlightRanges.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/highlightRanges.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAc,SAAS,EAAC,MAAM,aAAa,CAAC;AA8FxD,UAAU,UAAU;IAClB,KAAK,EAAE,KAAK,CAAC;IACb,SAAS,EAAE,SAAS,CAAC;CACtB;AAgDD,iBAAS,aAAa,CAAC,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAIjD;AA4BD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,WAAW,EACnB,UAAU,EAAE,SAAS,EAAE,GACtB,MAAM,IAAI,CAsHZ;AAED;;;;GAIG;AACH,wBAAgB,yBAAyB,CACvC,MAAM,EAAE,WAAW,EACnB,UAAU,EAAE,SAAS,EAAE,EACvB,SAAS,EAAE,MAAM,GAChB,UAAU,EAAE,CAqBd;AAMD;;;;;;;;GAQG;AACH,wBAAgB,wBAAwB,CACtC,EAAE,EAAE,WAAW,EACf,UAAU,EAAE,SAAS,EAAE,GACtB,MAAM,IAAI,CA2DZ;AAeD;;GAEG;AACH,OAAO,EAAC,aAAa,EAAC,CAAC"}
|
|
@@ -52,20 +52,9 @@ function ensureDynamicHighlightType(tokenType) {
|
|
|
52
52
|
return;
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
// ident VALUE, escapes and all), so dotted, non-ASCII, `_private`, and
|
|
59
|
-
// digit-led token types keep their colours — while nothing a token stream
|
|
60
|
-
// carries can step outside its ident and shape the rule.
|
|
61
|
-
const name = CSS.escape(`astryx-${tokenType}`);
|
|
62
|
-
const colorVar = `var(${CSS.escape(`--color-syntax-${tokenType}`)}, currentColor)`;
|
|
63
|
-
try {
|
|
64
|
-
dynamicStyleSheet.insertRule(`.astryx-code-block code::highlight(${name}), .astryx-codeeditor code::highlight(${name}) { color: ${colorVar}; }`);
|
|
65
|
-
} catch {
|
|
66
|
-
// An engine that still refuses the rule costs that type its colour
|
|
67
|
-
// (ranges paint with currentColor) — never the whole code block.
|
|
68
|
-
}
|
|
55
|
+
const name = `astryx-${tokenType}`;
|
|
56
|
+
const colorVar = `var(--color-syntax-${tokenType}, currentColor)`;
|
|
57
|
+
dynamicStyleSheet.insertRule(`.astryx-code-block code::highlight(${name}), .astryx-codeeditor code::highlight(${name}) { color: ${colorVar}; }`);
|
|
69
58
|
}
|
|
70
59
|
|
|
71
60
|
// ---------------------------------------------------------------------------
|
package/dist/Icon/Icon.d.ts
CHANGED
|
@@ -21,8 +21,6 @@ import React, { type ComponentType, type SVGProps } from 'react';
|
|
|
21
21
|
import * as stylex from '@stylexjs/stylex';
|
|
22
22
|
import type { StyleXStyles } from '@stylexjs/stylex';
|
|
23
23
|
import type { IconName, NamespacedIconName } from './globalIconRegistry';
|
|
24
|
-
import { type IconSize } from './IconSize.stylex';
|
|
25
|
-
export type { IconSize } from './IconSize.stylex';
|
|
26
24
|
declare const colorStyles: Readonly<{
|
|
27
25
|
readonly primary: Readonly<{
|
|
28
26
|
readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#0A1317, #DFE2E5)">;
|
|
@@ -82,7 +80,35 @@ declare const colorStyles: Readonly<{
|
|
|
82
80
|
readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#5B08D8, #7952FF)">;
|
|
83
81
|
}>;
|
|
84
82
|
}>;
|
|
83
|
+
/**
|
|
84
|
+
* Size styles for direct SVG icon components.
|
|
85
|
+
* Uses width/height only — SVG components handle their own viewBox scaling.
|
|
86
|
+
*
|
|
87
|
+
* Sizes are expressed in `rem` (relative to the root font-size) so icons scale
|
|
88
|
+
* in step with text when the document font-size changes, matching the rest of
|
|
89
|
+
* the design system's rem-based type scale. Values are the px-equivalents at a
|
|
90
|
+
* 16px root: 12px → 0.75rem, 16px → 1rem, 20px → 1.25rem, 24px → 1.5rem.
|
|
91
|
+
*/
|
|
92
|
+
declare const sizeStyles: Readonly<{
|
|
93
|
+
readonly xsm: Readonly<{
|
|
94
|
+
readonly width: stylex.StyleXClassNameFor<"width", "0.75rem">;
|
|
95
|
+
readonly height: stylex.StyleXClassNameFor<"height", "0.75rem">;
|
|
96
|
+
}>;
|
|
97
|
+
readonly sm: Readonly<{
|
|
98
|
+
readonly width: stylex.StyleXClassNameFor<"width", "1rem">;
|
|
99
|
+
readonly height: stylex.StyleXClassNameFor<"height", "1rem">;
|
|
100
|
+
}>;
|
|
101
|
+
readonly md: Readonly<{
|
|
102
|
+
readonly width: stylex.StyleXClassNameFor<"width", "1.25rem">;
|
|
103
|
+
readonly height: stylex.StyleXClassNameFor<"height", "1.25rem">;
|
|
104
|
+
}>;
|
|
105
|
+
readonly lg: Readonly<{
|
|
106
|
+
readonly width: stylex.StyleXClassNameFor<"width", "1.5rem">;
|
|
107
|
+
readonly height: stylex.StyleXClassNameFor<"height", "1.5rem">;
|
|
108
|
+
}>;
|
|
109
|
+
}>;
|
|
85
110
|
export type IconColor = keyof typeof colorStyles;
|
|
111
|
+
export type IconSize = keyof typeof sizeStyles;
|
|
86
112
|
/**
|
|
87
113
|
* Type for icon components that can be passed to Icon.
|
|
88
114
|
* Use this type when accepting an icon prop in other components.
|
|
@@ -114,9 +140,7 @@ export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'color'
|
|
|
114
140
|
* - 'sm': 1rem (16px at a 16px root)
|
|
115
141
|
* - 'md': 1.25rem (20px at a 16px root)
|
|
116
142
|
* - 'lg': 1.5rem (24px at a 16px root)
|
|
117
|
-
*
|
|
118
|
-
* An explicit value wins. When omitted, Icon uses the nearest default supplied
|
|
119
|
-
* by an owning Astryx component for its icon slot, then falls back to 'md'.
|
|
143
|
+
* @default 'md'
|
|
120
144
|
*/
|
|
121
145
|
size?: IconSize;
|
|
122
146
|
/**
|
|
@@ -171,7 +195,7 @@ export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'color'
|
|
|
171
195
|
* <Icon icon="close" size="md" color="primary" />
|
|
172
196
|
* ```
|
|
173
197
|
*/
|
|
174
|
-
export declare function Icon({ icon, color, size
|
|
198
|
+
export declare function Icon({ icon, color, size, label, ref, className, style, xstyle, ...props }: IconProps): React.JSX.Element;
|
|
175
199
|
export declare namespace Icon {
|
|
176
200
|
var displayName: string;
|
|
177
201
|
}
|
|
@@ -186,4 +210,5 @@ export declare function renderIconSlot(icon: React.ReactNode | IconType, props?:
|
|
|
186
210
|
size?: IconSize;
|
|
187
211
|
color?: IconColor;
|
|
188
212
|
}): React.ReactNode;
|
|
213
|
+
export {};
|
|
189
214
|
//# sourceMappingURL=Icon.d.ts.map
|
package/dist/Icon/Icon.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAC3C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAInD,OAAO,KAAK,EAAC,QAAQ,EAAE,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAC3C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAInD,OAAO,KAAK,EAAC,QAAQ,EAAE,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AAqBvE,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2Df,CAAC;AAEH;;;;;;;;GAQG;AACH,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;EAiBd,CAAC;AAyCH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACjD,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAC;AAE/C;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,QAAQ,CAAC,aAAa,CAAC,EACvB,KAAK,GAAG,OAAO,CAChB;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;;;OAMG;IACH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,kBAAkB,CAAC;IAC/C;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAyBD;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAiB,EACjB,IAAW,EACX,KAAK,EACL,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACT,EAAE,SAAS,qBA4CX;yBAtDe,IAAI;;;AA+HpB;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,QAAQ,EAChC,KAAK,CAAC,EAAE;IAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAC,GAC3C,KAAK,CAAC,SAAS,CAYjB"}
|
package/dist/Icon/Icon.js
CHANGED
|
@@ -29,13 +29,11 @@ import { useThemeName } from "../theme/useTheme.js";
|
|
|
29
29
|
import { getIcon } from "./globalIconRegistry.js";
|
|
30
30
|
import { mergeProps } from "../utils/index.js";
|
|
31
31
|
import { themeProps } from "../utils/themeProps.js";
|
|
32
|
-
|
|
33
|
-
import { iconBoxSizeStyles, iconSizeStyles } from "./IconSize.stylex.js";
|
|
34
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
32
|
+
|
|
35
33
|
// =============================================================================
|
|
36
34
|
// Styles
|
|
37
35
|
// =============================================================================
|
|
38
|
-
|
|
36
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
39
37
|
const styles = {
|
|
40
38
|
root: {
|
|
41
39
|
kmuXW: "x2lah0s",
|
|
@@ -128,6 +126,72 @@ const colorStyles = {
|
|
|
128
126
|
}
|
|
129
127
|
};
|
|
130
128
|
|
|
129
|
+
/**
|
|
130
|
+
* Size styles for direct SVG icon components.
|
|
131
|
+
* Uses width/height only — SVG components handle their own viewBox scaling.
|
|
132
|
+
*
|
|
133
|
+
* Sizes are expressed in `rem` (relative to the root font-size) so icons scale
|
|
134
|
+
* in step with text when the document font-size changes, matching the rest of
|
|
135
|
+
* the design system's rem-based type scale. Values are the px-equivalents at a
|
|
136
|
+
* 16px root: 12px → 0.75rem, 16px → 1rem, 20px → 1.25rem, 24px → 1.5rem.
|
|
137
|
+
*/
|
|
138
|
+
const sizeStyles = {
|
|
139
|
+
xsm: {
|
|
140
|
+
kzqmXN: "x1jw3ynk",
|
|
141
|
+
kZKoxP: "xvle69y",
|
|
142
|
+
$$css: true
|
|
143
|
+
},
|
|
144
|
+
sm: {
|
|
145
|
+
kzqmXN: "xcdlrvm",
|
|
146
|
+
kZKoxP: "x1l36t39",
|
|
147
|
+
$$css: true
|
|
148
|
+
},
|
|
149
|
+
md: {
|
|
150
|
+
kzqmXN: "xwqq7k2",
|
|
151
|
+
kZKoxP: "xmll18r",
|
|
152
|
+
$$css: true
|
|
153
|
+
},
|
|
154
|
+
lg: {
|
|
155
|
+
kzqmXN: "xp8d6y2",
|
|
156
|
+
kZKoxP: "xam5rvr",
|
|
157
|
+
$$css: true
|
|
158
|
+
}
|
|
159
|
+
};
|
|
160
|
+
|
|
161
|
+
/**
|
|
162
|
+
* Size styles for string-based (registry) icons.
|
|
163
|
+
* Includes fontSize so that 1em-based icons from the registry scale correctly.
|
|
164
|
+
*
|
|
165
|
+
* Expressed in `rem` for the same reason as {@link sizeStyles} — icons track the
|
|
166
|
+
* root font-size instead of being locked to absolute pixels.
|
|
167
|
+
*/
|
|
168
|
+
const spanSizeStyles = {
|
|
169
|
+
xsm: {
|
|
170
|
+
kzqmXN: "x1jw3ynk",
|
|
171
|
+
kZKoxP: "xvle69y",
|
|
172
|
+
kGuDYH: "xboafo0",
|
|
173
|
+
$$css: true
|
|
174
|
+
},
|
|
175
|
+
sm: {
|
|
176
|
+
kzqmXN: "xcdlrvm",
|
|
177
|
+
kZKoxP: "x1l36t39",
|
|
178
|
+
kGuDYH: "x1jchvi3",
|
|
179
|
+
$$css: true
|
|
180
|
+
},
|
|
181
|
+
md: {
|
|
182
|
+
kzqmXN: "xwqq7k2",
|
|
183
|
+
kZKoxP: "xmll18r",
|
|
184
|
+
kGuDYH: "x1603h9y",
|
|
185
|
+
$$css: true
|
|
186
|
+
},
|
|
187
|
+
lg: {
|
|
188
|
+
kzqmXN: "xp8d6y2",
|
|
189
|
+
kZKoxP: "xam5rvr",
|
|
190
|
+
kGuDYH: "xngnso2",
|
|
191
|
+
$$css: true
|
|
192
|
+
}
|
|
193
|
+
};
|
|
194
|
+
|
|
131
195
|
// =============================================================================
|
|
132
196
|
// Types
|
|
133
197
|
// =============================================================================
|
|
@@ -177,7 +241,7 @@ function getIconA11yProps(label) {
|
|
|
177
241
|
export function Icon({
|
|
178
242
|
icon,
|
|
179
243
|
color = 'inherit',
|
|
180
|
-
size
|
|
244
|
+
size = 'md',
|
|
181
245
|
label,
|
|
182
246
|
ref,
|
|
183
247
|
className,
|
|
@@ -185,7 +249,6 @@ export function Icon({
|
|
|
185
249
|
xstyle,
|
|
186
250
|
...props
|
|
187
251
|
}) {
|
|
188
|
-
const size = useIconSize(sizeProp);
|
|
189
252
|
// Derive ARIA from `label`: decorative (aria-hidden) by default, or a
|
|
190
253
|
// meaningful image (role="img" + aria-label) when `label` is non-empty.
|
|
191
254
|
const a11yProps = getIconA11yProps(label);
|
|
@@ -216,7 +279,7 @@ export function Icon({
|
|
|
216
279
|
...mergeProps(themeProps('icon', {
|
|
217
280
|
size,
|
|
218
281
|
color
|
|
219
|
-
}), stylex.props(styles.root, colorStyles[color],
|
|
282
|
+
}), stylex.props(styles.root, colorStyles[color], sizeStyles[size], xstyle), className ?? undefined, style),
|
|
220
283
|
...props
|
|
221
284
|
});
|
|
222
285
|
}
|
|
@@ -261,7 +324,7 @@ function IconFromRegistry({
|
|
|
261
324
|
...mergeProps(themeProps('icon', {
|
|
262
325
|
size,
|
|
263
326
|
color
|
|
264
|
-
}), stylex.props(styles.span, colorStyles[color],
|
|
327
|
+
}), stylex.props(styles.span, colorStyles[color], spanSizeStyles[size], xstyle), className ?? undefined, style),
|
|
265
328
|
children: resolvedIcon
|
|
266
329
|
});
|
|
267
330
|
}
|
|
@@ -1,13 +1,23 @@
|
|
|
1
1
|
import type { LinkComponentType } from './types';
|
|
2
2
|
/**
|
|
3
|
-
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
3
|
+
* Resolves the link component to use.
|
|
4
|
+
*
|
|
5
|
+
* Priority: `as` prop > `LinkProvider` context > native `<a>`.
|
|
6
|
+
*
|
|
7
|
+
* When the resolved component is a custom component (not the native `<a>`),
|
|
8
|
+
* it is wrapped to receive both `href` and `to` props set to the same value.
|
|
9
|
+
* This allows `to`-based routers (React Router, TanStack Router) to work
|
|
10
|
+
* out of the box without a manual adapter.
|
|
11
|
+
*
|
|
12
|
+
* @param as - Per-component override. If provided, takes highest priority.
|
|
13
|
+
* @returns The resolved link component (with `to` injection for custom components).
|
|
6
14
|
*
|
|
7
15
|
* @example
|
|
8
16
|
* ```
|
|
9
|
-
*
|
|
10
|
-
*
|
|
17
|
+
* function MyComponent({ as }: { as?: LinkComponentType }) {
|
|
18
|
+
* const LinkComponent = useLinkComponent(as);
|
|
19
|
+
* return <LinkComponent href="/foo">Click me</LinkComponent>;
|
|
20
|
+
* }
|
|
11
21
|
* ```
|
|
12
22
|
*/
|
|
13
23
|
export declare function useLinkComponent(as?: LinkComponentType): LinkComponentType;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLinkComponent.d.ts","sourceRoot":"","sources":["../../src/Link/useLinkComponent.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useLinkComponent.d.ts","sourceRoot":"","sources":["../../src/Link/useLinkComponent.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAgC/C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,gBAAgB,CAC9B,EAAE,CAAC,EAAE,iBAAiB,GACrB,iBAAiB,CAYnB"}
|