@wallarm-org/design-system 4.3.4 → 4.4.0
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/components/WallySkeleton/WallySkeleton.d.ts +11 -0
- package/dist/components/WallySkeleton/WallySkeleton.js +186 -0
- package/dist/components/WallySkeleton/index.d.ts +1 -0
- package/dist/components/WallySkeleton/index.js +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/metadata/components.json +307 -2
- package/package.json +1 -1
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { FC, HTMLAttributes, Ref } from 'react';
|
|
2
|
+
import type { TestableProps } from '../../utils/testId.js';
|
|
3
|
+
export interface WallySkeletonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, TestableProps {
|
|
4
|
+
ref?: Ref<HTMLDivElement>;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* Shared loading surface for the host, remote and assistant runtime. Give its parent a height.
|
|
8
|
+
* The placeholders and mesh stay static so replacing one loading stage with another cannot
|
|
9
|
+
* restart an animation and flash. This non-interactive surface exposes one loading status.
|
|
10
|
+
*/
|
|
11
|
+
export declare const WallySkeleton: FC<WallySkeletonProps>;
|
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { c } from "react/compiler-runtime";
|
|
3
|
+
import { cn } from "../../utils/cn.js";
|
|
4
|
+
import { Chat, ChatBody, ChatFooter, ChatHeader, ChatHeaderActions, ChatHeaderTitle } from "../Chat/index.js";
|
|
5
|
+
import { Skeleton } from "../Skeleton/index.js";
|
|
6
|
+
const WallySkeleton = (t0)=>{
|
|
7
|
+
const $ = c(21);
|
|
8
|
+
let className;
|
|
9
|
+
let props;
|
|
10
|
+
let ref;
|
|
11
|
+
let testId;
|
|
12
|
+
if ($[0] !== t0) {
|
|
13
|
+
({ ref, className, "data-testid": testId, ...props } = t0);
|
|
14
|
+
$[0] = t0;
|
|
15
|
+
$[1] = className;
|
|
16
|
+
$[2] = props;
|
|
17
|
+
$[3] = ref;
|
|
18
|
+
$[4] = testId;
|
|
19
|
+
} else {
|
|
20
|
+
className = $[1];
|
|
21
|
+
props = $[2];
|
|
22
|
+
ref = $[3];
|
|
23
|
+
testId = $[4];
|
|
24
|
+
}
|
|
25
|
+
let t1;
|
|
26
|
+
if ($[5] !== className) {
|
|
27
|
+
t1 = cn("h-full min-h-0 w-full min-w-0 flex-1", className);
|
|
28
|
+
$[5] = className;
|
|
29
|
+
$[6] = t1;
|
|
30
|
+
} else t1 = $[6];
|
|
31
|
+
const t2 = testId && `${testId}--chat`;
|
|
32
|
+
let t3;
|
|
33
|
+
if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
|
|
34
|
+
t3 = /*#__PURE__*/ jsx(ChatHeaderTitle, {
|
|
35
|
+
children: /*#__PURE__*/ jsx(Skeleton, {
|
|
36
|
+
width: "96px",
|
|
37
|
+
height: "16px"
|
|
38
|
+
})
|
|
39
|
+
});
|
|
40
|
+
$[7] = t3;
|
|
41
|
+
} else t3 = $[7];
|
|
42
|
+
let t4;
|
|
43
|
+
if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
|
|
44
|
+
t4 = /*#__PURE__*/ jsxs(ChatHeader, {
|
|
45
|
+
children: [
|
|
46
|
+
t3,
|
|
47
|
+
/*#__PURE__*/ jsxs(ChatHeaderActions, {
|
|
48
|
+
children: [
|
|
49
|
+
/*#__PURE__*/ jsx(Skeleton, {
|
|
50
|
+
width: "28px",
|
|
51
|
+
height: "28px"
|
|
52
|
+
}),
|
|
53
|
+
/*#__PURE__*/ jsx(Skeleton, {
|
|
54
|
+
width: "28px",
|
|
55
|
+
height: "28px"
|
|
56
|
+
}),
|
|
57
|
+
/*#__PURE__*/ jsx(Skeleton, {
|
|
58
|
+
width: "28px",
|
|
59
|
+
height: "28px"
|
|
60
|
+
})
|
|
61
|
+
]
|
|
62
|
+
})
|
|
63
|
+
]
|
|
64
|
+
});
|
|
65
|
+
$[8] = t4;
|
|
66
|
+
} else t4 = $[8];
|
|
67
|
+
let t5;
|
|
68
|
+
if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
|
|
69
|
+
t5 = /*#__PURE__*/ jsxs("div", {
|
|
70
|
+
className: "flex w-full flex-col items-center gap-12",
|
|
71
|
+
children: [
|
|
72
|
+
/*#__PURE__*/ jsx(Skeleton, {
|
|
73
|
+
width: "64px",
|
|
74
|
+
height: "64px",
|
|
75
|
+
rounded: "full"
|
|
76
|
+
}),
|
|
77
|
+
/*#__PURE__*/ jsx(Skeleton, {
|
|
78
|
+
className: "max-w-[90%]",
|
|
79
|
+
width: "280px",
|
|
80
|
+
height: "24px"
|
|
81
|
+
})
|
|
82
|
+
]
|
|
83
|
+
});
|
|
84
|
+
$[9] = t5;
|
|
85
|
+
} else t5 = $[9];
|
|
86
|
+
let t6;
|
|
87
|
+
if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
|
|
88
|
+
t6 = /*#__PURE__*/ jsx(ChatBody, {
|
|
89
|
+
children: /*#__PURE__*/ jsxs("div", {
|
|
90
|
+
className: "flex flex-col items-center gap-24 pt-103",
|
|
91
|
+
children: [
|
|
92
|
+
t5,
|
|
93
|
+
/*#__PURE__*/ jsxs("div", {
|
|
94
|
+
className: "flex w-full flex-col items-center gap-12",
|
|
95
|
+
children: [
|
|
96
|
+
/*#__PURE__*/ jsx(Skeleton, {
|
|
97
|
+
className: "max-w-[85%]",
|
|
98
|
+
width: "240px",
|
|
99
|
+
height: "28px",
|
|
100
|
+
rounded: 12
|
|
101
|
+
}),
|
|
102
|
+
/*#__PURE__*/ jsx(Skeleton, {
|
|
103
|
+
className: "max-w-[95%]",
|
|
104
|
+
width: "280px",
|
|
105
|
+
height: "28px",
|
|
106
|
+
rounded: 12
|
|
107
|
+
}),
|
|
108
|
+
/*#__PURE__*/ jsx(Skeleton, {
|
|
109
|
+
className: "max-w-[80%]",
|
|
110
|
+
width: "220px",
|
|
111
|
+
height: "28px",
|
|
112
|
+
rounded: 12
|
|
113
|
+
})
|
|
114
|
+
]
|
|
115
|
+
})
|
|
116
|
+
]
|
|
117
|
+
})
|
|
118
|
+
});
|
|
119
|
+
$[10] = t6;
|
|
120
|
+
} else t6 = $[10];
|
|
121
|
+
let t7;
|
|
122
|
+
if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
|
|
123
|
+
t7 = /*#__PURE__*/ jsx(Skeleton, {
|
|
124
|
+
width: "100%",
|
|
125
|
+
height: "92px",
|
|
126
|
+
rounded: 16
|
|
127
|
+
});
|
|
128
|
+
$[11] = t7;
|
|
129
|
+
} else t7 = $[11];
|
|
130
|
+
let t8;
|
|
131
|
+
if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
|
|
132
|
+
t8 = /*#__PURE__*/ jsxs(ChatFooter, {
|
|
133
|
+
children: [
|
|
134
|
+
t7,
|
|
135
|
+
/*#__PURE__*/ jsx("div", {
|
|
136
|
+
className: "flex justify-center pb-8",
|
|
137
|
+
children: /*#__PURE__*/ jsx(Skeleton, {
|
|
138
|
+
className: "max-w-[90%]",
|
|
139
|
+
width: "240px",
|
|
140
|
+
height: "12px"
|
|
141
|
+
})
|
|
142
|
+
})
|
|
143
|
+
]
|
|
144
|
+
});
|
|
145
|
+
$[12] = t8;
|
|
146
|
+
} else t8 = $[12];
|
|
147
|
+
let t9;
|
|
148
|
+
if ($[13] !== t2) {
|
|
149
|
+
t9 = /*#__PURE__*/ jsxs(Chat, {
|
|
150
|
+
background: "strong",
|
|
151
|
+
"aria-hidden": "true",
|
|
152
|
+
"data-testid": t2,
|
|
153
|
+
className: "[&_*]:animate-none! [&_[data-slot=skeleton]]:bg-bg-primary",
|
|
154
|
+
children: [
|
|
155
|
+
t4,
|
|
156
|
+
t6,
|
|
157
|
+
t8
|
|
158
|
+
]
|
|
159
|
+
});
|
|
160
|
+
$[13] = t2;
|
|
161
|
+
$[14] = t9;
|
|
162
|
+
} else t9 = $[14];
|
|
163
|
+
let t10;
|
|
164
|
+
if ($[15] !== props || $[16] !== ref || $[17] !== t1 || $[18] !== t9 || $[19] !== testId) {
|
|
165
|
+
t10 = /*#__PURE__*/ jsx("div", {
|
|
166
|
+
role: "status",
|
|
167
|
+
"aria-label": "Loading Wally",
|
|
168
|
+
"aria-busy": "true",
|
|
169
|
+
...props,
|
|
170
|
+
ref: ref,
|
|
171
|
+
"data-slot": "wally-skeleton",
|
|
172
|
+
"data-testid": testId,
|
|
173
|
+
className: t1,
|
|
174
|
+
children: t9
|
|
175
|
+
});
|
|
176
|
+
$[15] = props;
|
|
177
|
+
$[16] = ref;
|
|
178
|
+
$[17] = t1;
|
|
179
|
+
$[18] = t9;
|
|
180
|
+
$[19] = testId;
|
|
181
|
+
$[20] = t10;
|
|
182
|
+
} else t10 = $[20];
|
|
183
|
+
return t10;
|
|
184
|
+
};
|
|
185
|
+
WallySkeleton.displayName = "WallySkeleton";
|
|
186
|
+
export { WallySkeleton };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { WallySkeleton, type WallySkeletonProps } from './WallySkeleton.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { WallySkeleton } from "./WallySkeleton.js";
|
package/dist/index.d.ts
CHANGED
|
@@ -113,4 +113,5 @@ export { UserMessage, UserMessageBubble, type UserMessageBubbleProps, type UserM
|
|
|
113
113
|
export { UtilityPage, type UtilityPageProps } from './components/UtilityPage/index.js';
|
|
114
114
|
export { ApprovalCardView, type ApprovalCardViewProps, ChainOfThoughtView, type ChainOfThoughtViewProps, type ChatApprovalOption, type ChatApprovalOptionKind, type ChatApprovalPart, type ChatApprovalResponse, type ChatApprovalStatus, type ChatAssistantMessage, type ChatAssistantPart, type ChatChainOfThoughtPart, type ChatContextItem, type ChatCustomPart, type ChatErrorPart, type ChatFeedback, type ChatIconKey, type ChatId, type ChatLabels, type ChatMarkdownProps, type ChatMessage, type ChatMessageActionNodes, ChatMessageView, type ChatMessageViewProps, type ChatMeta, type ChatOpen, type ChatPart, type ChatPartRenderContext, ChatPartView, type ChatPartViewProps, type ChatSnapshot, type ChatStatus, type ChatStep, type ChatStepKind, type ChatStepRenderContext, type ChatStepStatus, type ChatSuggestionItem, type ChatTextPart, type ChatToolPermission, type ChatUserMessage, type ChatUserPart, type ChatViewConfig, ChatViewProvider, type ChatViewProviderProps, type ChatViewState, copyTextOf, DEFAULT_CHAT_LABELS, deriveChatState, WallyAssistant, type WallyAssistantProps, } from './components/WallyAssistant/index.js';
|
|
115
115
|
export { WallyIcon, type WallyIconProps, type WallyIconSize, type WallyIconStyle, } from './components/WallyIcon/index.js';
|
|
116
|
+
export { WallySkeleton, type WallySkeletonProps } from './components/WallySkeleton/index.js';
|
|
116
117
|
export { type TestableProps, TestIdProvider, useTestId } from './utils/testId.js';
|
package/dist/index.js
CHANGED
|
@@ -102,4 +102,5 @@ export { UserMessage, UserMessageBubble, UserMessageShowMore } from "./component
|
|
|
102
102
|
export { UtilityPage } from "./components/UtilityPage/index.js";
|
|
103
103
|
export { ApprovalCardView, ChainOfThoughtView, ChatMessageView, ChatPartView, ChatViewProvider, DEFAULT_CHAT_LABELS, WallyAssistant, copyTextOf, deriveChatState } from "./components/WallyAssistant/index.js";
|
|
104
104
|
export { WallyIcon } from "./components/WallyIcon/index.js";
|
|
105
|
+
export { WallySkeleton } from "./components/WallySkeleton/index.js";
|
|
105
106
|
export { TestIdProvider, useTestId } from "./utils/testId.js";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "4.3.
|
|
3
|
-
"generatedAt": "2026-10-
|
|
2
|
+
"version": "4.3.4",
|
|
3
|
+
"generatedAt": "2026-10-30T11:34:31.521Z",
|
|
4
4
|
"components": [
|
|
5
5
|
{
|
|
6
6
|
"name": "Accordion",
|
|
@@ -138009,6 +138009,311 @@
|
|
|
138009
138009
|
"description": "`xs` to `xl` in both variants. Worth reading down the columns to see where the detail in the bare mark gives out and the badge stops helping."
|
|
138010
138010
|
}
|
|
138011
138011
|
]
|
|
138012
|
+
},
|
|
138013
|
+
{
|
|
138014
|
+
"name": "WallySkeleton",
|
|
138015
|
+
"description": "Shared loading surface for the host, remote and assistant runtime. Give its parent a height.\nThe placeholders and mesh stay static so replacing one loading stage with another cannot\nrestart an animation and flash. This non-interactive surface exposes one loading status.",
|
|
138016
|
+
"importPath": "@wallarm-org/design-system/WallySkeleton",
|
|
138017
|
+
"props": [
|
|
138018
|
+
{
|
|
138019
|
+
"name": "slot",
|
|
138020
|
+
"type": "string | undefined",
|
|
138021
|
+
"required": false
|
|
138022
|
+
},
|
|
138023
|
+
{
|
|
138024
|
+
"name": "title",
|
|
138025
|
+
"type": "string | undefined",
|
|
138026
|
+
"required": false
|
|
138027
|
+
},
|
|
138028
|
+
{
|
|
138029
|
+
"name": "defaultChecked",
|
|
138030
|
+
"type": "boolean | undefined",
|
|
138031
|
+
"required": false
|
|
138032
|
+
},
|
|
138033
|
+
{
|
|
138034
|
+
"name": "defaultValue",
|
|
138035
|
+
"type": "string | number | readonly string[] | undefined",
|
|
138036
|
+
"required": false
|
|
138037
|
+
},
|
|
138038
|
+
{
|
|
138039
|
+
"name": "suppressContentEditableWarning",
|
|
138040
|
+
"type": "boolean | undefined",
|
|
138041
|
+
"required": false
|
|
138042
|
+
},
|
|
138043
|
+
{
|
|
138044
|
+
"name": "suppressHydrationWarning",
|
|
138045
|
+
"type": "boolean | undefined",
|
|
138046
|
+
"required": false
|
|
138047
|
+
},
|
|
138048
|
+
{
|
|
138049
|
+
"name": "accessKey",
|
|
138050
|
+
"type": "string | undefined",
|
|
138051
|
+
"required": false
|
|
138052
|
+
},
|
|
138053
|
+
{
|
|
138054
|
+
"name": "autoCapitalize",
|
|
138055
|
+
"type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
|
|
138056
|
+
"required": false
|
|
138057
|
+
},
|
|
138058
|
+
{
|
|
138059
|
+
"name": "autoFocus",
|
|
138060
|
+
"type": "boolean | undefined",
|
|
138061
|
+
"required": false
|
|
138062
|
+
},
|
|
138063
|
+
{
|
|
138064
|
+
"name": "contentEditable",
|
|
138065
|
+
"type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
|
|
138066
|
+
"required": false
|
|
138067
|
+
},
|
|
138068
|
+
{
|
|
138069
|
+
"name": "contextMenu",
|
|
138070
|
+
"type": "string | undefined",
|
|
138071
|
+
"required": false
|
|
138072
|
+
},
|
|
138073
|
+
{
|
|
138074
|
+
"name": "dir",
|
|
138075
|
+
"type": "string | undefined",
|
|
138076
|
+
"required": false
|
|
138077
|
+
},
|
|
138078
|
+
{
|
|
138079
|
+
"name": "draggable",
|
|
138080
|
+
"type": "Booleanish | undefined",
|
|
138081
|
+
"required": false
|
|
138082
|
+
},
|
|
138083
|
+
{
|
|
138084
|
+
"name": "enterKeyHint",
|
|
138085
|
+
"type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
|
|
138086
|
+
"required": false
|
|
138087
|
+
},
|
|
138088
|
+
{
|
|
138089
|
+
"name": "hidden",
|
|
138090
|
+
"type": "boolean | undefined",
|
|
138091
|
+
"required": false
|
|
138092
|
+
},
|
|
138093
|
+
{
|
|
138094
|
+
"name": "id",
|
|
138095
|
+
"type": "string | undefined",
|
|
138096
|
+
"required": false
|
|
138097
|
+
},
|
|
138098
|
+
{
|
|
138099
|
+
"name": "lang",
|
|
138100
|
+
"type": "string | undefined",
|
|
138101
|
+
"required": false
|
|
138102
|
+
},
|
|
138103
|
+
{
|
|
138104
|
+
"name": "nonce",
|
|
138105
|
+
"type": "string | undefined",
|
|
138106
|
+
"required": false
|
|
138107
|
+
},
|
|
138108
|
+
{
|
|
138109
|
+
"name": "spellCheck",
|
|
138110
|
+
"type": "Booleanish | undefined",
|
|
138111
|
+
"required": false
|
|
138112
|
+
},
|
|
138113
|
+
{
|
|
138114
|
+
"name": "tabIndex",
|
|
138115
|
+
"type": "number | undefined",
|
|
138116
|
+
"required": false
|
|
138117
|
+
},
|
|
138118
|
+
{
|
|
138119
|
+
"name": "translate",
|
|
138120
|
+
"type": "\"yes\" | \"no\" | undefined",
|
|
138121
|
+
"required": false
|
|
138122
|
+
},
|
|
138123
|
+
{
|
|
138124
|
+
"name": "radioGroup",
|
|
138125
|
+
"type": "string | undefined",
|
|
138126
|
+
"required": false
|
|
138127
|
+
},
|
|
138128
|
+
{
|
|
138129
|
+
"name": "role",
|
|
138130
|
+
"type": "AriaRole | undefined",
|
|
138131
|
+
"required": false
|
|
138132
|
+
},
|
|
138133
|
+
{
|
|
138134
|
+
"name": "about",
|
|
138135
|
+
"type": "string | undefined",
|
|
138136
|
+
"required": false
|
|
138137
|
+
},
|
|
138138
|
+
{
|
|
138139
|
+
"name": "content",
|
|
138140
|
+
"type": "string | undefined",
|
|
138141
|
+
"required": false
|
|
138142
|
+
},
|
|
138143
|
+
{
|
|
138144
|
+
"name": "datatype",
|
|
138145
|
+
"type": "string | undefined",
|
|
138146
|
+
"required": false
|
|
138147
|
+
},
|
|
138148
|
+
{
|
|
138149
|
+
"name": "inlist",
|
|
138150
|
+
"type": "any",
|
|
138151
|
+
"required": false
|
|
138152
|
+
},
|
|
138153
|
+
{
|
|
138154
|
+
"name": "prefix",
|
|
138155
|
+
"type": "string | undefined",
|
|
138156
|
+
"required": false
|
|
138157
|
+
},
|
|
138158
|
+
{
|
|
138159
|
+
"name": "property",
|
|
138160
|
+
"type": "string | undefined",
|
|
138161
|
+
"required": false
|
|
138162
|
+
},
|
|
138163
|
+
{
|
|
138164
|
+
"name": "rel",
|
|
138165
|
+
"type": "string | undefined",
|
|
138166
|
+
"required": false
|
|
138167
|
+
},
|
|
138168
|
+
{
|
|
138169
|
+
"name": "resource",
|
|
138170
|
+
"type": "string | undefined",
|
|
138171
|
+
"required": false
|
|
138172
|
+
},
|
|
138173
|
+
{
|
|
138174
|
+
"name": "rev",
|
|
138175
|
+
"type": "string | undefined",
|
|
138176
|
+
"required": false
|
|
138177
|
+
},
|
|
138178
|
+
{
|
|
138179
|
+
"name": "typeof",
|
|
138180
|
+
"type": "string | undefined",
|
|
138181
|
+
"required": false
|
|
138182
|
+
},
|
|
138183
|
+
{
|
|
138184
|
+
"name": "vocab",
|
|
138185
|
+
"type": "string | undefined",
|
|
138186
|
+
"required": false
|
|
138187
|
+
},
|
|
138188
|
+
{
|
|
138189
|
+
"name": "autoCorrect",
|
|
138190
|
+
"type": "string | undefined",
|
|
138191
|
+
"required": false
|
|
138192
|
+
},
|
|
138193
|
+
{
|
|
138194
|
+
"name": "autoSave",
|
|
138195
|
+
"type": "string | undefined",
|
|
138196
|
+
"required": false
|
|
138197
|
+
},
|
|
138198
|
+
{
|
|
138199
|
+
"name": "color",
|
|
138200
|
+
"type": "string | undefined",
|
|
138201
|
+
"required": false
|
|
138202
|
+
},
|
|
138203
|
+
{
|
|
138204
|
+
"name": "itemProp",
|
|
138205
|
+
"type": "string | undefined",
|
|
138206
|
+
"required": false
|
|
138207
|
+
},
|
|
138208
|
+
{
|
|
138209
|
+
"name": "itemScope",
|
|
138210
|
+
"type": "boolean | undefined",
|
|
138211
|
+
"required": false
|
|
138212
|
+
},
|
|
138213
|
+
{
|
|
138214
|
+
"name": "itemType",
|
|
138215
|
+
"type": "string | undefined",
|
|
138216
|
+
"required": false
|
|
138217
|
+
},
|
|
138218
|
+
{
|
|
138219
|
+
"name": "itemID",
|
|
138220
|
+
"type": "string | undefined",
|
|
138221
|
+
"required": false
|
|
138222
|
+
},
|
|
138223
|
+
{
|
|
138224
|
+
"name": "itemRef",
|
|
138225
|
+
"type": "string | undefined",
|
|
138226
|
+
"required": false
|
|
138227
|
+
},
|
|
138228
|
+
{
|
|
138229
|
+
"name": "results",
|
|
138230
|
+
"type": "number | undefined",
|
|
138231
|
+
"required": false
|
|
138232
|
+
},
|
|
138233
|
+
{
|
|
138234
|
+
"name": "security",
|
|
138235
|
+
"type": "string | undefined",
|
|
138236
|
+
"required": false
|
|
138237
|
+
},
|
|
138238
|
+
{
|
|
138239
|
+
"name": "unselectable",
|
|
138240
|
+
"type": "\"off\" | \"on\" | undefined",
|
|
138241
|
+
"required": false
|
|
138242
|
+
},
|
|
138243
|
+
{
|
|
138244
|
+
"name": "popover",
|
|
138245
|
+
"type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
|
|
138246
|
+
"required": false
|
|
138247
|
+
},
|
|
138248
|
+
{
|
|
138249
|
+
"name": "popoverTargetAction",
|
|
138250
|
+
"type": "\"toggle\" | \"show\" | \"hide\" | undefined",
|
|
138251
|
+
"required": false
|
|
138252
|
+
},
|
|
138253
|
+
{
|
|
138254
|
+
"name": "popoverTarget",
|
|
138255
|
+
"type": "string | undefined",
|
|
138256
|
+
"required": false
|
|
138257
|
+
},
|
|
138258
|
+
{
|
|
138259
|
+
"name": "inert",
|
|
138260
|
+
"type": "boolean | undefined",
|
|
138261
|
+
"required": false,
|
|
138262
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert}"
|
|
138263
|
+
},
|
|
138264
|
+
{
|
|
138265
|
+
"name": "inputMode",
|
|
138266
|
+
"type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
|
|
138267
|
+
"required": false,
|
|
138268
|
+
"description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
|
|
138269
|
+
},
|
|
138270
|
+
{
|
|
138271
|
+
"name": "is",
|
|
138272
|
+
"type": "string | undefined",
|
|
138273
|
+
"required": false,
|
|
138274
|
+
"description": "Specify that a standard HTML element should behave like a defined custom built-in element"
|
|
138275
|
+
},
|
|
138276
|
+
{
|
|
138277
|
+
"name": "exportparts",
|
|
138278
|
+
"type": "string | undefined",
|
|
138279
|
+
"required": false,
|
|
138280
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
|
|
138281
|
+
},
|
|
138282
|
+
{
|
|
138283
|
+
"name": "part",
|
|
138284
|
+
"type": "string | undefined",
|
|
138285
|
+
"required": false,
|
|
138286
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
|
|
138287
|
+
},
|
|
138288
|
+
{
|
|
138289
|
+
"name": "data-testid",
|
|
138290
|
+
"type": "string | undefined",
|
|
138291
|
+
"required": false
|
|
138292
|
+
}
|
|
138293
|
+
],
|
|
138294
|
+
"variants": [],
|
|
138295
|
+
"subComponents": [],
|
|
138296
|
+
"examples": [
|
|
138297
|
+
{
|
|
138298
|
+
"name": "Default",
|
|
138299
|
+
"code": "import { WallySkeleton } from '@wallarm-org/design-system/WallySkeleton';\n\nexport const Default = () => (\n <div className='h-640 w-480 max-w-full'>\n <WallySkeleton data-testid='wally-loading' />\n </div>\n);",
|
|
138300
|
+
"storyFile": "WallySkeleton/WallySkeleton.stories.tsx",
|
|
138301
|
+
"storyTitle": "AI/WallySkeleton"
|
|
138302
|
+
},
|
|
138303
|
+
{
|
|
138304
|
+
"name": "Narrow",
|
|
138305
|
+
"code": "import { WallySkeleton } from '@wallarm-org/design-system/WallySkeleton';\n\nexport const Narrow = () => (\n <div className='h-640 w-320 max-w-full'>\n <WallySkeleton data-testid='wally-loading' />\n </div>\n);",
|
|
138306
|
+
"storyFile": "WallySkeleton/WallySkeleton.stories.tsx",
|
|
138307
|
+
"storyTitle": "AI/WallySkeleton"
|
|
138308
|
+
},
|
|
138309
|
+
{
|
|
138310
|
+
"name": "Handoff",
|
|
138311
|
+
"code": "import { useState } from 'react';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { WallySkeleton } from '@wallarm-org/design-system/WallySkeleton';\n\nexport const Handoff = () => {\n const [stage, setStage] = useState(0);\n\n return (\n <div className='flex flex-col gap-12'>\n <Button data-testid='next-stage' onClick={() => setStage(current => current + 1)}>\n Continue loading\n </Button>\n <div className='h-640 w-480 max-w-full'>\n <WallySkeleton key={stage} data-testid='wally-loading' />\n </div>\n </div>\n );\n};",
|
|
138312
|
+
"storyFile": "WallySkeleton/WallySkeleton.stories.tsx",
|
|
138313
|
+
"storyTitle": "AI/WallySkeleton",
|
|
138314
|
+
"description": "Continue loading remounts the skeleton, like replacing the host fallback with the remote’s own loading state. Its geometry, colors and background stay identical."
|
|
138315
|
+
}
|
|
138316
|
+
]
|
|
138012
138317
|
}
|
|
138013
138318
|
],
|
|
138014
138319
|
"tokens": [
|