@astryxdesign/core 0.1.8-canary.4bbba65 → 0.1.8-canary.4c46f53
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/ChatDictationButton.d.ts.map +1 -1
- package/dist/Chat/ChatDictationButton.js +1 -1
- package/dist/Chat/ChatLayoutScrollButton.d.ts.map +1 -1
- package/dist/Chat/ChatLayoutScrollButton.js +4 -4
- package/dist/Chat/ChatSendButton.d.ts.map +1 -1
- package/dist/Chat/ChatSendButton.js +1 -7
- package/dist/Chat/ChatToolCalls.d.ts.map +1 -1
- package/dist/Chat/ChatToolCalls.js +6 -6
- package/dist/Thumbnail/Thumbnail.d.ts +2 -15
- package/dist/Thumbnail/Thumbnail.d.ts.map +1 -1
- package/dist/Thumbnail/Thumbnail.js +47 -67
- package/dist/astryx.css +0 -4
- package/dist/astryx.umd.js +43 -43
- package/dist/astryx.umd.js.map +4 -4
- package/package.json +1 -1
- package/src/Chat/ChatDictationButton.tsx +1 -4
- package/src/Chat/ChatLayoutScrollButton.tsx +1 -4
- package/src/Chat/ChatSendButton.tsx +0 -6
- package/src/Chat/ChatToolCalls.tsx +3 -12
- package/src/Thumbnail/Thumbnail.doc.mjs +0 -9
- package/src/Thumbnail/Thumbnail.test.tsx +0 -56
- package/src/Thumbnail/Thumbnail.tsx +5 -53
- package/dist/Thumbnail/thumbnail.markers.stylex.d.ts +0 -9
- package/dist/Thumbnail/thumbnail.markers.stylex.d.ts.map +0 -1
- package/dist/Thumbnail/thumbnail.markers.stylex.js +0 -14
- package/src/Thumbnail/thumbnail.markers.stylex.ts +0 -12
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatDictationButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatDictationButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAC,0BAA0B,EAAC,MAAM,wBAAwB,CAAC;AAMvE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,MAAM,WAAW,wBAAyB,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC1E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC,sEAAsE;IACtE,SAAS,EAAE,0BAA0B,CAAC;IACtC,iCAAiC;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,6EAA6E;IAC7E,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;
|
|
1
|
+
{"version":3,"file":"ChatDictationButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatDictationButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAC,0BAA0B,EAAC,MAAM,wBAAwB,CAAC;AAMvE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,MAAM,WAAW,wBAAyB,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC1E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC,sEAAsE;IACtE,SAAS,EAAE,0BAA0B,CAAC;IACtC,iCAAiC;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,6EAA6E;IAC7E,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8CD;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,SAAS,EACT,IAAW,EACX,uBAA8B,EAC9B,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,wBAAwB,4BA+D1B;yBAzEe,mBAAmB"}
|
|
@@ -126,7 +126,7 @@ export function ChatDictationButton({
|
|
|
126
126
|
const scale = BAR_MIN_SCALE + level * (1 - BAR_MIN_SCALE);
|
|
127
127
|
return /*#__PURE__*/_jsx("span", {
|
|
128
128
|
...mergeProps({
|
|
129
|
-
className: "xjspbzw x1g0ag68 x18dpk69 x11bq7d0
|
|
129
|
+
className: "xjspbzw x1g0ag68 x18dpk69 x11bq7d0 x9lcvmn"
|
|
130
130
|
}, {
|
|
131
131
|
style: {
|
|
132
132
|
width: barWidth,
|
|
@@ -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;AAY1B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,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;
|
|
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;AAQ5C,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;AAwDD;;;;;;;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,qBA4B7B;yBArCe,sBAAsB"}
|
|
@@ -81,16 +81,16 @@ export function ChatLayoutScrollButton({
|
|
|
81
81
|
children: /*#__PURE__*/_jsx("div", {
|
|
82
82
|
...{
|
|
83
83
|
0: {
|
|
84
|
-
className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x10w6t97 x1apppo2 xlr8y92 x2rcmwa
|
|
84
|
+
className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x10w6t97 x1apppo2 xlr8y92 x2rcmwa xg01cxk x47corl x1x67gh"
|
|
85
85
|
},
|
|
86
86
|
2: {
|
|
87
|
-
className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x10w6t97 x1apppo2 xlr8y92 x2rcmwa
|
|
87
|
+
className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x10w6t97 x1apppo2 xlr8y92 x2rcmwa x1hc1fzr x67bb7w x1x67gh"
|
|
88
88
|
},
|
|
89
89
|
1: {
|
|
90
|
-
className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x10w6t97 x1apppo2 xlr8y92 x2rcmwa
|
|
90
|
+
className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x10w6t97 x1apppo2 xlr8y92 x2rcmwa xg01cxk x47corl x1ncir08"
|
|
91
91
|
},
|
|
92
92
|
3: {
|
|
93
|
-
className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x10w6t97 x1apppo2 xlr8y92 x2rcmwa
|
|
93
|
+
className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x10w6t97 x1apppo2 xlr8y92 x2rcmwa x1hc1fzr x67bb7w x1ncir08"
|
|
94
94
|
}
|
|
95
95
|
}[!!isVisible << 1 | !!label << 0],
|
|
96
96
|
children: /*#__PURE__*/_jsx(Button, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatSendButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatSendButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAM5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACvE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,kFAAkF;IAClF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gFAAgF;IAChF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iFAAiF;IACjF,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iCAAiC;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAiBD;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,SAAS,
|
|
1
|
+
{"version":3,"file":"ChatSendButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatSendButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAM5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACvE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,kFAAkF;IAClF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gFAAgF;IAChF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iFAAiF;IACjF,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iCAAiC;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAiBD;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,SAAS,CAwCpE;yBAxCe,cAAc"}
|
|
@@ -67,10 +67,7 @@ export function ChatSendButton(props) {
|
|
|
67
67
|
stopIcon,
|
|
68
68
|
size = 'md',
|
|
69
69
|
xstyle,
|
|
70
|
-
|
|
71
|
-
style,
|
|
72
|
-
ref,
|
|
73
|
-
...rest
|
|
70
|
+
ref
|
|
74
71
|
} = props;
|
|
75
72
|
const handleSend = onSend ?? (() => context?.onSubmit(''));
|
|
76
73
|
return /*#__PURE__*/_jsx(Button, {
|
|
@@ -82,10 +79,7 @@ export function ChatSendButton(props) {
|
|
|
82
79
|
isIconOnly: true,
|
|
83
80
|
isDisabled: !isStopShown && isDisabled,
|
|
84
81
|
onClick: isStopShown ? onStop : handleSend,
|
|
85
|
-
...rest,
|
|
86
82
|
...themeProps('chat-send-button'),
|
|
87
|
-
className: className,
|
|
88
|
-
style: style,
|
|
89
83
|
xstyle: [styles.root, xstyle]
|
|
90
84
|
});
|
|
91
85
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatToolCalls.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatToolCalls.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAA+B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuB5C,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAE9E,MAAM,WAAW,gBAAgB;IAC/B,0BAA0B;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,2FAA2F;IAC3F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oFAAoF;IACpF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6FAA6F;IAC7F,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,+BAA+B;IAC/B,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wEAAwE;IACxE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;
|
|
1
|
+
{"version":3,"file":"ChatToolCalls.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatToolCalls.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAA+B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuB5C,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAE9E,MAAM,WAAW,gBAAgB;IAC/B,0BAA0B;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,2FAA2F;IAC3F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oFAAoF;IACpF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6FAA6F;IAC7F,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,+BAA+B;IAC/B,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wEAAwE;IACxE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AA4XD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,4BAqJtD;yBArJe,aAAa"}
|
|
@@ -199,10 +199,10 @@ function CallRow({
|
|
|
199
199
|
}), hasDetail && /*#__PURE__*/_jsx("span", {
|
|
200
200
|
...{
|
|
201
201
|
0: {
|
|
202
|
-
className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s x6jxa94 x1v9usgg xnbbluu x1ob6yzd
|
|
202
|
+
className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s x6jxa94 x1v9usgg xnbbluu x1ob6yzd xvc5jky"
|
|
203
203
|
},
|
|
204
204
|
1: {
|
|
205
|
-
className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s x6jxa94 x1v9usgg xnbbluu x1ob6yzd
|
|
205
|
+
className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s x6jxa94 x1v9usgg xnbbluu x1ob6yzd xvc5jky x19jd1h0"
|
|
206
206
|
}
|
|
207
207
|
}[!!isDetailOpen << 0],
|
|
208
208
|
children: /*#__PURE__*/_jsx(Icon, {
|
|
@@ -380,10 +380,10 @@ export function ChatToolCalls(props) {
|
|
|
380
380
|
}), /*#__PURE__*/_jsx("span", {
|
|
381
381
|
...{
|
|
382
382
|
0: {
|
|
383
|
-
className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s x6jxa94 x1v9usgg xnbbluu x1ob6yzd
|
|
383
|
+
className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s x6jxa94 x1v9usgg xnbbluu x1ob6yzd"
|
|
384
384
|
},
|
|
385
385
|
1: {
|
|
386
|
-
className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s x6jxa94 x1v9usgg xnbbluu x1ob6yzd
|
|
386
|
+
className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s x6jxa94 x1v9usgg xnbbluu x1ob6yzd x19jd1h0"
|
|
387
387
|
}
|
|
388
388
|
}[!!isExpanded << 0],
|
|
389
389
|
children: /*#__PURE__*/_jsx(Icon, {
|
|
@@ -396,10 +396,10 @@ export function ChatToolCalls(props) {
|
|
|
396
396
|
id: contentId,
|
|
397
397
|
...{
|
|
398
398
|
0: {
|
|
399
|
-
className: "xrvj5dj xihq33y xb0j27v
|
|
399
|
+
className: "xrvj5dj xihq33y xb0j27v"
|
|
400
400
|
},
|
|
401
401
|
1: {
|
|
402
|
-
className: "xrvj5dj xb0j27v
|
|
402
|
+
className: "xrvj5dj xb0j27v x1tu4anv"
|
|
403
403
|
}
|
|
404
404
|
}[!!isExpanded << 0],
|
|
405
405
|
children: /*#__PURE__*/_jsx("div", {
|
|
@@ -51,17 +51,6 @@ export interface ThumbnailProps extends BaseProps<HTMLDivElement> {
|
|
|
51
51
|
* @default false
|
|
52
52
|
*/
|
|
53
53
|
isDisabled?: boolean;
|
|
54
|
-
/**
|
|
55
|
-
* When the remove button is visible.
|
|
56
|
-
* - `'hover'` — the button is revealed on hover, and on keyboard focus so
|
|
57
|
-
* it stays reachable. On any touch-capable device it stays visible.
|
|
58
|
-
* This is the default.
|
|
59
|
-
* - `'always'` — the button is always shown.
|
|
60
|
-
*
|
|
61
|
-
* Only has an effect when `onRemove` is set.
|
|
62
|
-
* @default 'hover'
|
|
63
|
-
*/
|
|
64
|
-
showRemoveOn?: 'always' | 'hover';
|
|
65
54
|
/**
|
|
66
55
|
* Test ID for testing frameworks.
|
|
67
56
|
*/
|
|
@@ -72,8 +61,7 @@ export interface ThumbnailProps extends BaseProps<HTMLDivElement> {
|
|
|
72
61
|
*
|
|
73
62
|
* Shows a skeleton shimmer while the image loads, the image on success, or
|
|
74
63
|
* a placeholder icon on failure / when no src is provided. An overlaid
|
|
75
|
-
* remove button appears when `onRemove` is set
|
|
76
|
-
* keyboard focus by default (`showRemoveOn`), or always shown.
|
|
64
|
+
* remove button appears when `onRemove` is set.
|
|
77
65
|
*
|
|
78
66
|
* The remove button uses a fixed `--color-overlay` scrim with an
|
|
79
67
|
* `--color-on-dark` icon so it stays legible on any image without sampling
|
|
@@ -83,10 +71,9 @@ export interface ThumbnailProps extends BaseProps<HTMLDivElement> {
|
|
|
83
71
|
* ```
|
|
84
72
|
* <Thumbnail src="/photo.jpg" alt="Vacation photo" onRemove={() => {}} />
|
|
85
73
|
* <Thumbnail src="/preview.png" alt="Preview" onClick={() => {}} label="preview.png" />
|
|
86
|
-
* <Thumbnail src="/logo.png" alt="Logo" onRemove={() => {}} showRemoveOn="always" />
|
|
87
74
|
* ```
|
|
88
75
|
*/
|
|
89
|
-
export declare function Thumbnail({ src, alt, label, onRemove, onClick, isLoading, isDisabled,
|
|
76
|
+
export declare function Thumbnail({ src, alt, label, onRemove, onClick, isLoading, isDisabled, xstyle, className, style, 'data-testid': testId, ref, ...props }: ThumbnailProps): import("react").JSX.Element;
|
|
90
77
|
export declare namespace Thumbnail {
|
|
91
78
|
var displayName: string;
|
|
92
79
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Thumbnail.d.ts","sourceRoot":"","sources":["../../src/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"AAyCA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Thumbnail.d.ts","sourceRoot":"","sources":["../../src/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"AAyCA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;;;OASG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAgJD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,SAAS,CAAC,EACxB,GAAG,EACH,GAAG,EACH,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAiB,EACjB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,+BAyHhB;yBAvIe,SAAS"}
|
|
@@ -36,8 +36,6 @@ import { useDevWarning } from "../hooks/useDevWarning.js";
|
|
|
36
36
|
import { mergeProps } from "../utils/index.js";
|
|
37
37
|
import { themeProps } from "../utils/themeProps.js";
|
|
38
38
|
import { useTranslator } from "../i18n/index.js";
|
|
39
|
-
import "./thumbnail.markers.stylex.js";
|
|
40
|
-
import { thumbnailScope } from "./thumbnail.markers.stylex.js";
|
|
41
39
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
42
40
|
// =============================================================================
|
|
43
41
|
// Styles
|
|
@@ -53,39 +51,11 @@ const styles = {
|
|
|
53
51
|
kHBbk8: "xc8icb0",
|
|
54
52
|
$$css: true
|
|
55
53
|
},
|
|
56
|
-
imageContainer: {
|
|
57
|
-
kVAEAm: "x1n2onr6",
|
|
58
|
-
kzqmXN: "xh8yej3",
|
|
59
|
-
kOBAk4: "x1plog1",
|
|
60
|
-
kaIpWk: "xh6dtrn",
|
|
61
|
-
kVQacm: "xb3r6kr",
|
|
62
|
-
kWkggS: "x17x4s8c",
|
|
63
|
-
$$css: true
|
|
64
|
-
},
|
|
65
|
-
interactive: {
|
|
66
|
-
kkrTdU: "x1ypdohk",
|
|
67
|
-
kI3sdo: "x1irc7jg",
|
|
68
|
-
kInvED: "x1wfwxd8 xdjuwb3",
|
|
69
|
-
$$css: true
|
|
70
|
-
},
|
|
71
|
-
overlay: {
|
|
72
|
-
k5JduY: "x1s928wv",
|
|
73
|
-
kwXMNM: "x1j6awrg",
|
|
74
|
-
kv0HGH: "xarstr8",
|
|
75
|
-
kUfP38: "x1k48kgn",
|
|
76
|
-
kloYau: "x2q1x1w",
|
|
77
|
-
kRicXK: "x1ywzrc5",
|
|
78
|
-
kPNhGg: "x97pup0",
|
|
79
|
-
kA8PQs: "x1dlmc9c",
|
|
80
|
-
ks3ayO: "xyhc2n1",
|
|
81
|
-
kAcZsS: "x1k7wiig",
|
|
82
|
-
$$css: true
|
|
83
|
-
},
|
|
84
|
-
hoverOnPointer: {
|
|
85
|
-
kJs8I2: "xi14tyy",
|
|
86
|
-
$$css: true
|
|
87
|
-
},
|
|
88
54
|
removeButtonOverrides: {
|
|
55
|
+
kVAEAm: "x10l6tqk",
|
|
56
|
+
k87sOh: "x8d4r5l",
|
|
57
|
+
kCIrl2: "xs7l08f",
|
|
58
|
+
kY2c9j: "x1vjfegm",
|
|
89
59
|
"--_button-radius": "xh8ntw8",
|
|
90
60
|
kZKoxP: "x1qx5ct2",
|
|
91
61
|
k7Eaqz: "xt4ypqs",
|
|
@@ -126,8 +96,7 @@ function ImagePlaceholder() {
|
|
|
126
96
|
*
|
|
127
97
|
* Shows a skeleton shimmer while the image loads, the image on success, or
|
|
128
98
|
* a placeholder icon on failure / when no src is provided. An overlaid
|
|
129
|
-
* remove button appears when `onRemove` is set
|
|
130
|
-
* keyboard focus by default (`showRemoveOn`), or always shown.
|
|
99
|
+
* remove button appears when `onRemove` is set.
|
|
131
100
|
*
|
|
132
101
|
* The remove button uses a fixed `--color-overlay` scrim with an
|
|
133
102
|
* `--color-on-dark` icon so it stays legible on any image without sampling
|
|
@@ -137,7 +106,6 @@ function ImagePlaceholder() {
|
|
|
137
106
|
* ```
|
|
138
107
|
* <Thumbnail src="/photo.jpg" alt="Vacation photo" onRemove={() => {}} />
|
|
139
108
|
* <Thumbnail src="/preview.png" alt="Preview" onClick={() => {}} label="preview.png" />
|
|
140
|
-
* <Thumbnail src="/logo.png" alt="Logo" onRemove={() => {}} showRemoveOn="always" />
|
|
141
109
|
* ```
|
|
142
110
|
*/
|
|
143
111
|
export function Thumbnail({
|
|
@@ -148,7 +116,6 @@ export function Thumbnail({
|
|
|
148
116
|
onClick,
|
|
149
117
|
isLoading = false,
|
|
150
118
|
isDisabled = false,
|
|
151
|
-
showRemoveOn = 'hover',
|
|
152
119
|
xstyle,
|
|
153
120
|
className,
|
|
154
121
|
style,
|
|
@@ -163,8 +130,6 @@ export function Thumbnail({
|
|
|
163
130
|
const showUploadOverlay = isLoading && hasSrc;
|
|
164
131
|
const showPlaceholder = !isLoading && !hasSrc;
|
|
165
132
|
const isInteractive = onClick != null && !isDisabled && !isLoading;
|
|
166
|
-
const hasRemove = onRemove != null && !isDisabled;
|
|
167
|
-
const isHoverReveal = hasRemove && showRemoveOn === 'hover';
|
|
168
133
|
const accessibleName = label && alt ? `${label} — ${alt}` : label ?? alt ?? t('@astryx.thumbnail.fallbackName');
|
|
169
134
|
|
|
170
135
|
// Without `alt`, the image is explicitly decorative rather than silently
|
|
@@ -196,32 +161,22 @@ export function Thumbnail({
|
|
|
196
161
|
children: /*#__PURE__*/_jsx(ImagePlaceholder, {})
|
|
197
162
|
})]
|
|
198
163
|
});
|
|
199
|
-
const removeButtonEl =
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
}),
|
|
216
|
-
variant: "secondary",
|
|
217
|
-
size: "sm",
|
|
218
|
-
isIconOnly: true,
|
|
219
|
-
onClick: e => {
|
|
220
|
-
e.stopPropagation();
|
|
221
|
-
onRemove(e);
|
|
222
|
-
},
|
|
223
|
-
xstyle: styles.removeButtonOverrides
|
|
224
|
-
})
|
|
164
|
+
const removeButtonEl = onRemove != null && !isDisabled ? /*#__PURE__*/_jsx(Button, {
|
|
165
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
|
166
|
+
icon: "close",
|
|
167
|
+
size: "xsm"
|
|
168
|
+
}),
|
|
169
|
+
label: t('@astryx.thumbnail.remove', {
|
|
170
|
+
accessibleName
|
|
171
|
+
}),
|
|
172
|
+
variant: "secondary",
|
|
173
|
+
size: "sm",
|
|
174
|
+
isIconOnly: true,
|
|
175
|
+
onClick: e => {
|
|
176
|
+
e.stopPropagation();
|
|
177
|
+
onRemove(e);
|
|
178
|
+
},
|
|
179
|
+
xstyle: styles.removeButtonOverrides
|
|
225
180
|
}) : null;
|
|
226
181
|
const thumbnail = /*#__PURE__*/_jsx("div", {
|
|
227
182
|
ref: ref,
|
|
@@ -231,7 +186,32 @@ export function Thumbnail({
|
|
|
231
186
|
...mergeProps(themeProps('thumbnail'), stylex.props(styles.root, isDisabled && styles.disabled, xstyle), className, style),
|
|
232
187
|
...props,
|
|
233
188
|
children: /*#__PURE__*/_jsxs("div", {
|
|
234
|
-
...
|
|
189
|
+
...{
|
|
190
|
+
0: {
|
|
191
|
+
className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c"
|
|
192
|
+
},
|
|
193
|
+
4: {
|
|
194
|
+
className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c x1ypdohk x1irc7jg x1wfwxd8 xdjuwb3"
|
|
195
|
+
},
|
|
196
|
+
2: {
|
|
197
|
+
className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c x1s928wv x1j6awrg xarstr8 x1k48kgn x2q1x1w x1ywzrc5 x97pup0 x1dlmc9c xyhc2n1 x1k7wiig"
|
|
198
|
+
},
|
|
199
|
+
6: {
|
|
200
|
+
className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c x1ypdohk x1irc7jg x1wfwxd8 xdjuwb3 x1s928wv x1j6awrg xarstr8 x1k48kgn x2q1x1w x1ywzrc5 x97pup0 x1dlmc9c xyhc2n1 x1k7wiig"
|
|
201
|
+
},
|
|
202
|
+
1: {
|
|
203
|
+
className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c xi14tyy"
|
|
204
|
+
},
|
|
205
|
+
5: {
|
|
206
|
+
className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c x1ypdohk x1irc7jg x1wfwxd8 xdjuwb3 xi14tyy"
|
|
207
|
+
},
|
|
208
|
+
3: {
|
|
209
|
+
className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c x1s928wv x1j6awrg xarstr8 x1k48kgn x2q1x1w x1ywzrc5 x97pup0 x1dlmc9c xyhc2n1 x1k7wiig xi14tyy"
|
|
210
|
+
},
|
|
211
|
+
7: {
|
|
212
|
+
className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c x1ypdohk x1irc7jg x1wfwxd8 xdjuwb3 x1s928wv x1j6awrg xarstr8 x1k48kgn x2q1x1w x1ywzrc5 x97pup0 x1dlmc9c xyhc2n1 x1k7wiig xi14tyy"
|
|
213
|
+
}
|
|
214
|
+
}[!!isInteractive << 2 | !!isInteractive << 1 | !!isInteractive << 0],
|
|
235
215
|
children: [isInteractive ? /*#__PURE__*/_jsx("button", {
|
|
236
216
|
type: "button",
|
|
237
217
|
onClick: onClick,
|
package/dist/astryx.css
CHANGED
|
@@ -459,7 +459,6 @@
|
|
|
459
459
|
.xh2mrf5:focus:not(#\#):not(#\#){padding-block:var(--spacing-2)}
|
|
460
460
|
.x1cf3d6k:focus:not(#\#):not(#\#){padding-inline:var(--spacing-4)}
|
|
461
461
|
@media (max-width: 480px){.x1a1jff.x1a1jff:not(#\#):not(#\#){gap:var(--spacing-4)}}
|
|
462
|
-
@media (prefers-reduced-motion: reduce){.x9kvfbb.x9kvfbb:not(#\#):not(#\#){transition:none}}
|
|
463
462
|
@media (hover: hover){.x1od6ugu.x1od6ugu.x1od6ugu:where(.x1tspnpo:hover *):not(#\#):not(#\#){border-color:color-mix(in srgb,var(--color-accent),var(--color-tint-hover) 15%)}}
|
|
464
463
|
@media (hover: hover){.xaq2ahg.xaq2ahg.xaq2ahg:where(.xklqth5:hover *):not(#\#):not(#\#){border-color:color-mix(in srgb,var(--color-accent),var(--color-tint-hover) 15%)}}
|
|
465
464
|
@media (hover: hover){.x1jtjlen.x1jtjlen.x1jtjlen:where(.x1tspnpo:hover *):not(#\#):not(#\#){border-color:color-mix(in srgb,var(--color-border-emphasized),var(--color-tint-hover) 20%)}}
|
|
@@ -1053,7 +1052,6 @@
|
|
|
1053
1052
|
.xzkaem6:not(#\#):not(#\#):not(#\#){z-index:3}
|
|
1054
1053
|
.x6cuj84:not(#\#):not(#\#):not(#\#){z-index:500}
|
|
1055
1054
|
.x1q2oy4v:not(#\#):not(#\#):not(#\#){z-index:9999}
|
|
1056
|
-
.x1cyvi8a.x1cyvi8a:where(.x9jk0ni:focus-within *):not(#\#):not(#\#):not(#\#){opacity:1}
|
|
1057
1055
|
.x1v2claj.x1v2claj:where(.x84s7jz:focus-within *):not(#\#):not(#\#):not(#\#){opacity:1}
|
|
1058
1056
|
.x3730vf.x3730vf:where(.x84s7jz:focus-within *):not(#\#):not(#\#):not(#\#){pointer-events:auto}
|
|
1059
1057
|
.xuqivmr.xuqivmr:where(.x84s7jz:focus-within *):not(#\#):not(#\#):not(#\#){transform:translateY(0)}
|
|
@@ -1128,7 +1126,6 @@
|
|
|
1128
1126
|
@media (pointer: coarse){.x6pjikd.x6pjikd:not(#\#):not(#\#):not(#\#){font-size:max(1rem,var(--text-body-size))}}
|
|
1129
1127
|
@media (pointer: coarse){.xdk3u5w.xdk3u5w:not(#\#):not(#\#):not(#\#){font-size:max(1rem,var(--text-label-size))}}
|
|
1130
1128
|
@media (pointer: coarse){.x1jymrmb.x1jymrmb:not(#\#):not(#\#):not(#\#){margin-inline-start:auto}}
|
|
1131
|
-
@media (any-pointer: coarse){.xhva3ql.xhva3ql:not(#\#):not(#\#):not(#\#){opacity:1}}
|
|
1132
1129
|
@media (pointer: coarse){.xozvky.xozvky:not(#\#):not(#\#):not(#\#){order:1}}
|
|
1133
1130
|
@media (prefers-reduced-motion: reduce){.xg83hb1.xg83hb1:not(#\#):not(#\#):not(#\#){scroll-behavior:auto}}
|
|
1134
1131
|
@media (prefers-reduced-motion: reduce){.xsagj69.xsagj69:not(#\#):not(#\#):not(#\#){transition-duration:.01ms}}
|
|
@@ -1145,7 +1142,6 @@
|
|
|
1145
1142
|
@media (hover: hover){.x1pe4z86.x1pe4z86.x1pe4z86:where(.x-default-marker:hover *):not(#\#):not(#\#):not(#\#){background-color:var(--color-icon-primary)}}
|
|
1146
1143
|
@media (hover: hover){.x1a1zr74.x1a1zr74.x1a1zr74:where(.x1u3b27q:hover *):not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-hover)}}
|
|
1147
1144
|
@media (hover: hover){.x1t9gxa6.x1t9gxa6.x1t9gxa6:where(.x-default-marker:hover *):not(#\#):not(#\#):not(#\#){color:var(--color-text-primary)}}
|
|
1148
|
-
@media (hover: hover){.xb7nc9r.xb7nc9r.xb7nc9r:where(.x9jk0ni:hover *):not(#\#):not(#\#):not(#\#){opacity:1}}
|
|
1149
1145
|
@media (hover: hover){.xcwhr9z.xcwhr9z.xcwhr9z:where(.x84s7jz:hover *):not(#\#):not(#\#):not(#\#){opacity:1}}
|
|
1150
1146
|
@media (hover: hover){.x8ydxbz.x8ydxbz.x8ydxbz:where(.x84s7jz:hover *):not(#\#):not(#\#):not(#\#){pointer-events:auto}}
|
|
1151
1147
|
@media (hover: hover){.x17hxqr7.x17hxqr7.x17hxqr7:where(.x84s7jz:hover *):not(#\#):not(#\#):not(#\#){transform:translateY(0)}}
|