@quilltap/theme-storybook 1.0.21 → 1.0.23

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.
Files changed (24) hide show
  1. package/dist/{chunk-W3J7BRAL.mjs → chunk-45RKCZL3.mjs} +843 -136
  2. package/dist/index.css +62 -0
  3. package/dist/index.d.mts +1 -1
  4. package/dist/index.d.ts +1 -1
  5. package/dist/index.js +845 -135
  6. package/dist/index.mjs +7 -1
  7. package/dist/stories/index.d.mts +25 -1
  8. package/dist/stories/index.d.ts +25 -1
  9. package/dist/stories/index.js +845 -135
  10. package/dist/stories/index.mjs +7 -1
  11. package/package.json +3 -3
  12. package/src/css/qt-components.css +75 -0
  13. package/src/stories/components/Badges.tsx +90 -0
  14. package/src/stories/components/Cards.tsx +21 -0
  15. package/src/stories/components/Chat.tsx +262 -11
  16. package/src/stories/components/ColorPalette.tsx +10 -0
  17. package/src/stories/components/Dialogs.tsx +50 -2
  18. package/src/stories/components/EmptyState.tsx +102 -0
  19. package/src/stories/components/Inputs.tsx +62 -24
  20. package/src/stories/components/Loading.tsx +125 -0
  21. package/src/stories/components/Participant.tsx +187 -0
  22. package/src/stories/components/Spacing.tsx +169 -67
  23. package/src/stories/components/Typography.tsx +163 -46
  24. package/src/stories/index.ts +3 -0
package/dist/index.js CHANGED
@@ -29,8 +29,11 @@ __export(src_exports, {
29
29
  ColorPalette: () => ColorPalette,
30
30
  ColorSwatch: () => ColorSwatch,
31
31
  Dialogs: () => Dialogs,
32
+ EmptyState: () => EmptyState,
32
33
  FilePreview: () => FilePreview,
33
34
  Inputs: () => Inputs,
35
+ Loading: () => Loading,
36
+ Participant: () => Participant,
34
37
  Spacing: () => Spacing,
35
38
  Tabs: () => Tabs,
36
39
  ThemeComparison: () => ThemeComparison,
@@ -156,13 +159,22 @@ var ColorPalette = () => {
156
159
  { name: "Chat User", variable: "--color-chat-user", description: "User message background" },
157
160
  { name: "Chat User Foreground", variable: "--color-chat-user-foreground", description: "User message text" }
158
161
  ];
162
+ const componentTokens = [
163
+ { name: "Button Primary BG", variable: "--qt-button-primary-bg", description: "Primary button background" },
164
+ { name: "Button Primary Hover", variable: "--qt-button-primary-hover-bg", description: "Primary button hover" },
165
+ { name: "Card BG", variable: "--qt-card-bg", description: "Card background" },
166
+ { name: "Card Border", variable: "--qt-card-border", description: "Card border" },
167
+ { name: "Input BG", variable: "--qt-input-bg", description: "Input background" },
168
+ { name: "Input Border", variable: "--qt-input-border", description: "Input border" }
169
+ ];
159
170
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { padding: "1.5rem" }, children: [
160
171
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Color Palette" }),
161
172
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "2rem" }, children: "These colors are defined by the current theme. Switch themes using the toolbar to see how they change." }),
162
173
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ColorGroup, { title: "Base Colors", colors: baseColors }),
163
174
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ColorGroup, { title: "Semantic Colors", colors: semanticColors }),
164
175
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ColorGroup, { title: "Status Colors", colors: statusColors }),
165
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ColorGroup, { title: "Chat Colors", colors: chatColors })
176
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ColorGroup, { title: "Chat Colors", colors: chatColors }),
177
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ColorGroup, { title: "Component Tokens", colors: componentTokens })
166
178
  ] });
167
179
  };
168
180
 
@@ -172,63 +184,152 @@ var Typography = () => {
172
184
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { padding: "1.5rem" }, children: [
173
185
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Typography" }),
174
186
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
175
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Font Families" }),
176
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
187
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Headings (qt-heading-*)" }),
188
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
177
189
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
178
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "--font-sans" }),
179
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { fontFamily: "var(--font-sans)", fontSize: "1.125rem", marginTop: "0.25rem" }, children: "The quick brown fox jumps over the lazy dog." })
190
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h1", { className: "qt-heading-1", children: "Heading 1 - The quick brown fox" }),
191
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-heading-1" })
180
192
  ] }),
181
193
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
182
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "--font-serif" }),
183
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { fontFamily: "var(--font-serif)", fontSize: "1.125rem", marginTop: "0.25rem" }, children: "The quick brown fox jumps over the lazy dog." })
194
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: "qt-heading-2", children: "Heading 2 - The quick brown fox" }),
195
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-heading-2" })
184
196
  ] }),
185
197
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
186
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "--font-mono" }),
187
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { fontFamily: "var(--font-mono)", fontSize: "1.125rem", marginTop: "0.25rem" }, children: "The quick brown fox jumps over the lazy dog." })
198
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "qt-heading-3", children: "Heading 3 - The quick brown fox" }),
199
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-heading-3" })
200
+ ] }),
201
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
202
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h4", { className: "qt-heading-4", children: "Heading 4 - The quick brown fox" }),
203
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-heading-4" })
188
204
  ] })
189
205
  ] })
190
206
  ] }),
191
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
192
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Headings" }),
193
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
194
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h1", { style: { fontSize: "2.25rem", fontWeight: 700, lineHeight: 1.2 }, children: "Heading 1 (2.25rem)" }),
195
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { style: { fontSize: "1.875rem", fontWeight: 700, lineHeight: 1.2 }, children: "Heading 2 (1.875rem)" }),
196
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { style: { fontSize: "1.5rem", fontWeight: 600, lineHeight: 1.3 }, children: "Heading 3 (1.5rem)" }),
197
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h4", { style: { fontSize: "1.25rem", fontWeight: 600, lineHeight: 1.3 }, children: "Heading 4 (1.25rem)" }),
198
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h5", { style: { fontSize: "1.125rem", fontWeight: 600, lineHeight: 1.4 }, children: "Heading 5 (1.125rem)" }),
199
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h6", { style: { fontSize: "1rem", fontWeight: 600, lineHeight: 1.4 }, children: "Heading 6 (1rem)" })
200
- ] })
201
- ] }),
202
207
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
203
208
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Body Text" }),
204
209
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "40rem" }, children: [
205
210
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
206
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Large (1.125rem)" }),
207
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { fontSize: "1.125rem", lineHeight: 1.6 }, children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." })
211
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "qt-text-lead", children: "Lead text - Used for introductory paragraphs that need more emphasis. The quick brown fox jumps over the lazy dog." }),
212
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-text-lead" })
213
+ ] }),
214
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
215
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "qt-text-large", children: "Large text - Slightly larger than body text for emphasis. The quick brown fox jumps over the lazy dog." }),
216
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-text-large" })
208
217
  ] }),
209
218
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
210
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Base (1rem)" }),
211
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { fontSize: "1rem", lineHeight: 1.6 }, children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." })
219
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: "Default body text - The standard text size for most content. The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs." }),
220
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "default / no class" })
212
221
  ] }),
213
222
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
214
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Small (0.875rem)" }),
215
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { fontSize: "0.875rem", lineHeight: 1.5 }, children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." })
223
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "qt-text-small", children: "Small text - For less important or supplementary information. The quick brown fox jumps over the lazy dog." }),
224
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-text-small" })
216
225
  ] }),
217
226
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
218
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Extra Small (0.75rem)" }),
219
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { fontSize: "0.75rem", lineHeight: 1.5 }, children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." })
227
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "qt-text-xs", children: "Extra small text - For fine print, captions, or metadata. The quick brown fox jumps over the lazy dog." }),
228
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-text-xs" })
220
229
  ] })
221
230
  ] })
222
231
  ] }),
223
232
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
224
233
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Text Colors" }),
225
234
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
226
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { color: "var(--color-foreground)" }, children: "Primary text (--color-foreground)" }),
227
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { color: "var(--color-muted-foreground)" }, children: "Secondary text (--color-muted-foreground)" }),
228
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { color: "var(--color-primary)" }, children: "Primary color text (--color-primary)" }),
229
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { color: "var(--color-destructive)" }, children: "Destructive text (--color-destructive)" }),
230
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { color: "var(--color-success)" }, children: "Success text (--color-success)" }),
231
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { color: "var(--color-warning)" }, children: "Warning text (--color-warning)" })
235
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
236
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: "Default text color" }),
237
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "default" })
238
+ ] }),
239
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
240
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "qt-text-muted", children: "Muted text - For secondary content" }),
241
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-text-muted" })
242
+ ] }),
243
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
244
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "qt-text-primary", children: "Primary text - For emphasis and links" }),
245
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-text-primary" })
246
+ ] }),
247
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
248
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "qt-text-success", children: "Success text - For positive messages" }),
249
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-text-success" })
250
+ ] }),
251
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
252
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "qt-text-warning", children: "Warning text - For caution messages" }),
253
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-text-warning" })
254
+ ] }),
255
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
256
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "qt-text-destructive", children: "Destructive text - For error messages" }),
257
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-text-destructive" })
258
+ ] }),
259
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
260
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "qt-text-info", children: "Info text - For informational messages" }),
261
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-text-info" })
262
+ ] })
263
+ ] })
264
+ ] }),
265
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
266
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Labels & UI Text" }),
267
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
268
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
269
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "qt-label", children: "Form Label" }),
270
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)", marginLeft: "1rem" }, children: ".qt-label" })
271
+ ] }),
272
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
273
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "qt-hint", children: "Hint text for form fields" }),
274
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)", marginLeft: "1rem" }, children: ".qt-hint" })
275
+ ] }),
276
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
277
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "qt-text-label", children: "UI Label Text" }),
278
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)", marginLeft: "1rem" }, children: ".qt-text-label" })
279
+ ] }),
280
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
281
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "qt-text-section", children: "Section Header" }),
282
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)", marginLeft: "1rem" }, children: ".qt-text-section" })
283
+ ] })
284
+ ] })
285
+ ] }),
286
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
287
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Code & Monospace" }),
288
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
289
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
290
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { className: "qt-code-inline", children: "inline code example" }),
291
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)", marginLeft: "1rem" }, children: ".qt-code-inline" })
292
+ ] }),
293
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
294
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("pre", { className: "qt-code-block", children: `function greet(name: string): string {
295
+ return \`Hello, \${name}!\`;
296
+ }
297
+
298
+ console.log(greet('World'));` }),
299
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-code-block" })
300
+ ] })
301
+ ] })
302
+ ] }),
303
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
304
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Prose (Long-form Content)" }),
305
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "qt-prose", style: { maxWidth: "40rem" }, children: [
306
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { children: "Article Title" }),
307
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { children: [
308
+ "This is an example of the ",
309
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { children: ".qt-prose" }),
310
+ " class applied to a container. It provides sensible defaults for long-form content like articles, documentation, and chat messages."
311
+ ] }),
312
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: "The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump! The five boxing wizards jump quickly." }),
313
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h4", { children: "Subsection" }),
314
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris." })
315
+ ] }),
316
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-prose" })
317
+ ] }),
318
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
319
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Font Families" }),
320
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
321
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
322
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "--font-sans" }),
323
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { fontFamily: "var(--font-sans)", fontSize: "1.125rem", marginTop: "0.25rem" }, children: "The quick brown fox jumps over the lazy dog." })
324
+ ] }),
325
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
326
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "--font-serif" }),
327
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { fontFamily: "var(--font-serif)", fontSize: "1.125rem", marginTop: "0.25rem" }, children: "The quick brown fox jumps over the lazy dog." })
328
+ ] }),
329
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
330
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "--font-mono" }),
331
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { fontFamily: "var(--font-mono)", fontSize: "1.125rem", marginTop: "0.25rem" }, children: "The quick brown fox jumps over the lazy dog." })
332
+ ] })
232
333
  ] })
233
334
  ] })
234
335
  ] });
@@ -237,134 +338,214 @@ var Typography = () => {
237
338
  // src/stories/components/Spacing.tsx
238
339
  var import_jsx_runtime4 = require("react/jsx-runtime");
239
340
  var Spacing = () => {
240
- const radii = [
341
+ const radiusTokens = [
342
+ { name: "None", variable: "0", value: "0" },
241
343
  { name: "Small", variable: "--radius-sm", value: "var(--radius-sm)" },
242
344
  { name: "Medium", variable: "--radius-md", value: "var(--radius-md)" },
243
- { name: "Large", variable: "--radius-lg", value: "var(--radius-lg)" }
345
+ { name: "Large", variable: "--radius-lg", value: "var(--radius-lg)" },
346
+ { name: "Extra Large", variable: "--radius-xl", value: "var(--radius-xl)" },
347
+ { name: "Full", variable: "9999px", value: "9999px" }
348
+ ];
349
+ const componentRadii = [
350
+ { name: "Button", variable: "--qt-button-radius" },
351
+ { name: "Card", variable: "--qt-card-radius" },
352
+ { name: "Input", variable: "--qt-input-radius" },
353
+ { name: "Dialog", variable: "--qt-dialog-radius" },
354
+ { name: "Badge", variable: "--qt-badge-radius" },
355
+ { name: "Avatar", variable: "--qt-avatar-radius" },
356
+ { name: "Chat Message", variable: "--qt-chat-message-radius" }
357
+ ];
358
+ const shadowTokens = [
359
+ { name: "Card Shadow", variable: "--qt-card-shadow" },
360
+ { name: "Card Hover Shadow", variable: "--qt-card-shadow-hover" },
361
+ { name: "Panel Shadow", variable: "--qt-panel-shadow" },
362
+ { name: "Dialog Shadow", variable: "--qt-dialog-shadow" },
363
+ { name: "Popover Shadow", variable: "--qt-popover-shadow" },
364
+ { name: "Button Primary Shadow", variable: "--qt-button-primary-shadow" },
365
+ { name: "Chat Message Shadow", variable: "--qt-chat-message-shadow" }
244
366
  ];
245
367
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { padding: "1.5rem" }, children: [
246
368
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Spacing & Borders" }),
247
369
  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
248
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Border Radius" }),
249
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", gap: "2rem", flexWrap: "wrap" }, children: [
250
- radii.map(({ name, variable, value }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { textAlign: "center" }, children: [
370
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Border Radius Scale" }),
371
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(6rem, 1fr))", gap: "1.5rem" }, children: radiusTokens.map(({ name, variable, value }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { textAlign: "center" }, children: [
372
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
373
+ "div",
374
+ {
375
+ style: {
376
+ width: "5rem",
377
+ height: "5rem",
378
+ backgroundColor: "var(--color-primary)",
379
+ borderRadius: value,
380
+ margin: "0 auto 0.5rem"
381
+ }
382
+ }
383
+ ),
384
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontWeight: 500, fontSize: "0.875rem" }, children: name }),
385
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: variable })
386
+ ] }, variable)) })
387
+ ] }),
388
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
389
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Component Border Radii" }),
390
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(8rem, 1fr))", gap: "1.5rem" }, children: componentRadii.map(({ name, variable }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { textAlign: "center" }, children: [
391
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
392
+ "div",
393
+ {
394
+ style: {
395
+ width: "6rem",
396
+ height: "4rem",
397
+ backgroundColor: "var(--color-muted)",
398
+ border: "1px solid var(--color-border)",
399
+ borderRadius: `var(${variable})`,
400
+ margin: "0 auto 0.5rem"
401
+ }
402
+ }
403
+ ),
404
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontWeight: 500, fontSize: "0.875rem" }, children: name }),
405
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: variable })
406
+ ] }, variable)) })
407
+ ] }),
408
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
409
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Shadows" }),
410
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(10rem, 1fr))", gap: "1.5rem" }, children: shadowTokens.map(({ name, variable }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { padding: "1rem" }, children: [
411
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
412
+ "div",
413
+ {
414
+ style: {
415
+ width: "100%",
416
+ height: "6rem",
417
+ backgroundColor: "var(--color-background)",
418
+ borderRadius: "var(--radius-lg)",
419
+ boxShadow: `var(${variable})`,
420
+ marginBottom: "0.5rem"
421
+ }
422
+ }
423
+ ),
424
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontWeight: 500, fontSize: "0.875rem" }, children: name }),
425
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: variable })
426
+ ] }, variable)) })
427
+ ] }),
428
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
429
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Padding Tokens" }),
430
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
431
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
251
432
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
252
433
  "div",
253
434
  {
254
435
  style: {
255
- width: "6rem",
256
- height: "6rem",
257
436
  backgroundColor: "var(--color-primary)",
258
- borderRadius: value
259
- }
437
+ color: "var(--color-background)",
438
+ padding: "var(--qt-button-padding-y) var(--qt-button-padding-x)",
439
+ borderRadius: "var(--radius-md)"
440
+ },
441
+ children: "Button padding"
260
442
  }
261
443
  ),
262
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { marginTop: "0.5rem", fontWeight: 500 }, children: name }),
263
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: variable })
264
- ] }, variable)),
265
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { textAlign: "center" }, children: [
444
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "--qt-button-padding-x, --qt-button-padding-y" })
445
+ ] }),
446
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
266
447
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
267
448
  "div",
268
449
  {
269
450
  style: {
270
- width: "6rem",
271
- height: "6rem",
272
- backgroundColor: "var(--color-primary)",
273
- borderRadius: "9999px"
274
- }
451
+ backgroundColor: "var(--color-muted)",
452
+ padding: "var(--qt-card-padding)",
453
+ border: "1px solid var(--color-border)",
454
+ borderRadius: "var(--radius-md)"
455
+ },
456
+ children: "Card padding"
275
457
  }
276
458
  ),
277
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { marginTop: "0.5rem", fontWeight: 500 }, children: "Full / Pill" }),
278
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "9999px" })
279
- ] })
280
- ] })
281
- ] }),
282
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
283
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Spacing Scale" }),
284
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64].map((px) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
285
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
286
- "div",
287
- {
288
- style: {
289
- width: `${px}px`,
290
- height: "1.5rem",
291
- backgroundColor: "var(--color-primary)",
292
- borderRadius: "2px"
293
- }
294
- }
295
- ),
296
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { fontSize: "0.875rem", fontWeight: 500, minWidth: "3rem" }, children: [
297
- px,
298
- "px"
459
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "--qt-card-padding" })
299
460
  ] }),
300
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: [
301
- (px / 16).toFixed(px % 16 === 0 ? 0 : 2),
302
- "rem"
303
- ] })
304
- ] }, px)) })
305
- ] }),
306
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { children: [
307
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Shadows" }),
308
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", gap: "2rem", flexWrap: "wrap" }, children: [
309
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { textAlign: "center" }, children: [
461
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
310
462
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
311
463
  "div",
312
464
  {
313
465
  style: {
314
- width: "8rem",
315
- height: "5rem",
316
- backgroundColor: "var(--color-card)",
317
- borderRadius: "var(--radius-lg)",
318
- boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
319
- }
466
+ backgroundColor: "var(--color-muted)",
467
+ padding: "var(--qt-input-padding-y) var(--qt-input-padding-x)",
468
+ border: "1px solid var(--color-border)",
469
+ borderRadius: "var(--radius-md)"
470
+ },
471
+ children: "Input padding"
320
472
  }
321
473
  ),
322
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { marginTop: "0.5rem", fontWeight: 500 }, children: "Small" })
474
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "--qt-input-padding-x, --qt-input-padding-y" })
323
475
  ] }),
324
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { textAlign: "center" }, children: [
476
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
477
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
478
+ "div",
479
+ {
480
+ style: {
481
+ backgroundColor: "var(--color-muted)",
482
+ padding: "var(--qt-chat-message-padding)",
483
+ border: "1px solid var(--color-border)",
484
+ borderRadius: "var(--radius-md)"
485
+ },
486
+ children: "Chat message padding"
487
+ }
488
+ ),
489
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "--qt-chat-message-padding" })
490
+ ] })
491
+ ] })
492
+ ] }),
493
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { children: [
494
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Layout Dimensions" }),
495
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
496
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
325
497
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
326
498
  "div",
327
499
  {
328
500
  style: {
329
- width: "8rem",
330
- height: "5rem",
331
- backgroundColor: "var(--color-card)",
332
- borderRadius: "var(--radius-lg)",
333
- boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
334
- }
501
+ backgroundColor: "var(--color-muted)",
502
+ display: "flex",
503
+ alignItems: "center",
504
+ justifyContent: "center",
505
+ height: "var(--qt-navbar-height)",
506
+ width: "200px",
507
+ border: "1px solid var(--color-border)"
508
+ },
509
+ children: "Navbar height"
335
510
  }
336
511
  ),
337
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { marginTop: "0.5rem", fontWeight: 500 }, children: "Medium" })
512
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "--qt-navbar-height" })
338
513
  ] }),
339
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { textAlign: "center" }, children: [
514
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
340
515
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
341
516
  "div",
342
517
  {
343
518
  style: {
344
- width: "8rem",
345
- height: "5rem",
346
- backgroundColor: "var(--color-card)",
347
- borderRadius: "var(--radius-lg)",
348
- boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
349
- }
519
+ backgroundColor: "var(--color-muted)",
520
+ display: "flex",
521
+ alignItems: "center",
522
+ justifyContent: "center",
523
+ width: "var(--qt-sidebar-width)",
524
+ height: "100px",
525
+ border: "1px solid var(--color-border)"
526
+ },
527
+ children: "Sidebar width"
350
528
  }
351
529
  ),
352
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { marginTop: "0.5rem", fontWeight: 500 }, children: "Large" })
530
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "--qt-sidebar-width" })
353
531
  ] }),
354
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { textAlign: "center" }, children: [
532
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
355
533
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
356
534
  "div",
357
535
  {
358
536
  style: {
359
- width: "8rem",
360
- height: "5rem",
361
- backgroundColor: "var(--color-card)",
362
- borderRadius: "var(--radius-lg)",
363
- boxShadow: "0 25px 50px -12px rgb(0 0 0 / 0.25)"
364
- }
537
+ backgroundColor: "var(--color-muted)",
538
+ display: "flex",
539
+ alignItems: "center",
540
+ justifyContent: "center",
541
+ width: "var(--qt-chat-sidebar-width)",
542
+ height: "100px",
543
+ border: "1px solid var(--color-border)"
544
+ },
545
+ children: "Chat sidebar width"
365
546
  }
366
547
  ),
367
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { marginTop: "0.5rem", fontWeight: 500 }, children: "XL" })
548
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "--qt-chat-sidebar-width" })
368
549
  ] })
369
550
  ] })
370
551
  ] })
@@ -467,6 +648,23 @@ var Cards = () => {
467
648
  ] })
468
649
  ] }) }, name)) })
469
650
  ] }),
651
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
652
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Card Grid" }),
653
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "qt-card-grid-3", children: [
654
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "qt-card", style: { padding: "1rem" }, children: [
655
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h4", { style: { fontWeight: 600, marginBottom: "0.5rem" }, children: "Card 1" }),
656
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: "Grid card content" })
657
+ ] }),
658
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "qt-card", style: { padding: "1rem" }, children: [
659
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h4", { style: { fontWeight: 600, marginBottom: "0.5rem" }, children: "Card 2" }),
660
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: "Grid card content" })
661
+ ] }),
662
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "qt-card", style: { padding: "1rem" }, children: [
663
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h4", { style: { fontWeight: 600, marginBottom: "0.5rem" }, children: "Card 3" }),
664
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: "Grid card content" })
665
+ ] })
666
+ ] })
667
+ ] }),
470
668
  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
471
669
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Panels" }),
472
670
  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: "1rem", flexWrap: "wrap" }, children: [
@@ -492,23 +690,33 @@ var Inputs = () => {
492
690
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Text Inputs" }),
493
691
  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "24rem" }, children: [
494
692
  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
495
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Default" }),
693
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "qt-label", children: "Default" }),
496
694
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { className: "qt-input", type: "text", placeholder: "Enter text..." })
497
695
  ] }),
498
696
  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
499
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "With Value" }),
697
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "qt-label", children: "With Hint" }),
698
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { className: "qt-input", type: "text", placeholder: "Enter email..." }),
699
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "qt-hint", children: "We'll never share your email." })
700
+ ] }),
701
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
702
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "qt-label", children: "With Value" }),
500
703
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { className: "qt-input", type: "text", defaultValue: "Sample text" })
501
704
  ] }),
502
705
  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
503
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Disabled" }),
706
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "qt-label", children: "Disabled" }),
504
707
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { className: "qt-input", type: "text", placeholder: "Disabled input", disabled: true })
708
+ ] }),
709
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
710
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "qt-label", children: "With Error" }),
711
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { className: "qt-input qt-input-error", type: "text", placeholder: "Invalid input" }),
712
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "qt-hint", style: { color: "var(--color-destructive)" }, children: "This field is required." })
505
713
  ] })
506
714
  ] })
507
715
  ] }),
508
716
  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
509
717
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Textarea" }),
510
718
  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { maxWidth: "24rem" }, children: [
511
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Message" }),
719
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "qt-label", children: "Message" }),
512
720
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
513
721
  "textarea",
514
722
  {
@@ -522,7 +730,7 @@ var Inputs = () => {
522
730
  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
523
731
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Select" }),
524
732
  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { maxWidth: "24rem" }, children: [
525
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Choose an option" }),
733
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "qt-label", children: "Choose an option" }),
526
734
  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("select", { className: "qt-input qt-select", children: [
527
735
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "", children: "Select an option..." }),
528
736
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "1", children: "Option 1" }),
@@ -531,6 +739,38 @@ var Inputs = () => {
531
739
  ] })
532
740
  ] })
533
741
  ] }),
742
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
743
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Checkboxes & Radios" }),
744
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem", maxWidth: "24rem" }, children: [
745
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
746
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { type: "checkbox", id: "check1", className: "qt-checkbox" }),
747
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { htmlFor: "check1", style: { margin: 0 }, children: "Checkbox option" })
748
+ ] }),
749
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
750
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { type: "checkbox", id: "check2", className: "qt-checkbox", defaultChecked: true }),
751
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { htmlFor: "check2", style: { margin: 0 }, children: "Checked checkbox" })
752
+ ] }),
753
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
754
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { type: "checkbox", id: "check3", className: "qt-checkbox", disabled: true }),
755
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { htmlFor: "check3", style: { margin: 0, color: "var(--color-muted-foreground)" }, children: "Disabled checkbox" })
756
+ ] }),
757
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", marginTop: "0.5rem" }, children: [
758
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { type: "radio", name: "radio", id: "radio1", className: "qt-radio" }),
759
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { htmlFor: "radio1", style: { margin: 0 }, children: "Radio option 1" })
760
+ ] }),
761
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
762
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { type: "radio", name: "radio", id: "radio2", className: "qt-radio", defaultChecked: true }),
763
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { htmlFor: "radio2", style: { margin: 0 }, children: "Radio option 2" })
764
+ ] })
765
+ ] })
766
+ ] }),
767
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
768
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Links" }),
769
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
770
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("a", { href: "#", className: "qt-link", children: "Default link" }) }),
771
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("a", { href: "#", className: "qt-link-subtle", children: "Subtle link" }) })
772
+ ] })
773
+ ] }),
534
774
  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { children: [
535
775
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Form Example" }),
536
776
  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "qt-card", style: { maxWidth: "24rem" }, children: [
@@ -540,15 +780,15 @@ var Inputs = () => {
540
780
  ] }),
541
781
  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "qt-card-body", style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
542
782
  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
543
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Name" }),
783
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "qt-label", children: "Name" }),
544
784
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { className: "qt-input", type: "text", placeholder: "Your name" })
545
785
  ] }),
546
786
  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
547
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Email" }),
787
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "qt-label", children: "Email" }),
548
788
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { className: "qt-input", type: "email", placeholder: "you@example.com" })
549
789
  ] }),
550
790
  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
551
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Message" }),
791
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "qt-label", children: "Message" }),
552
792
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("textarea", { className: "qt-input qt-textarea", placeholder: "Your message...", style: { minHeight: "5rem" } })
553
793
  ] })
554
794
  ] }),
@@ -614,6 +854,64 @@ var Badges = () => {
614
854
  ] })
615
855
  ] })
616
856
  ] }),
857
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
858
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Entity Type Badges" }),
859
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.75rem", alignItems: "center" }, children: [
860
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "qt-badge qt-badge-character", children: "Character" }),
861
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "qt-badge qt-badge-persona", children: "Persona" }),
862
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "qt-badge qt-badge-chat", children: "Chat" }),
863
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "qt-badge qt-badge-tag", children: "Tag" }),
864
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "qt-badge qt-badge-memory", children: "Memory" })
865
+ ] })
866
+ ] }),
867
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
868
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "State Badges" }),
869
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.75rem", alignItems: "center" }, children: [
870
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "qt-badge qt-badge-enabled", children: "Enabled" }),
871
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "qt-badge qt-badge-disabled", children: "Disabled" }),
872
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "qt-badge qt-badge-related", children: "Related" }),
873
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "qt-badge qt-badge-manual", children: "Manual" }),
874
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "qt-badge qt-badge-auto", children: "Auto" })
875
+ ] })
876
+ ] }),
877
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
878
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Plugin Source Badges" }),
879
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.75rem", alignItems: "center" }, children: [
880
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "qt-badge qt-badge-source-included", children: "Included" }),
881
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "qt-badge qt-badge-source-npm", children: "NPM" }),
882
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "qt-badge qt-badge-source-git", children: "Git" }),
883
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "qt-badge qt-badge-source-manual", children: "Manual" })
884
+ ] })
885
+ ] }),
886
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
887
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Tag Badges" }),
888
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
889
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "0.75rem", fontSize: "0.875rem" }, children: "Basic tags" }),
890
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.75rem", alignItems: "center" }, children: [
891
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "qt-tag-badge", children: "Fantasy" }),
892
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "qt-tag-badge", children: "Sci-Fi" }),
893
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "qt-tag-badge", children: "Romance" })
894
+ ] })
895
+ ] }),
896
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
897
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "0.75rem", fontSize: "0.875rem" }, children: "Emoji tag" }),
898
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.75rem", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "qt-tag-badge qt-tag-badge-emoji", children: "Adventure" }) })
899
+ ] }),
900
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
901
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "0.75rem", fontSize: "0.875rem" }, children: "Removable tag" }),
902
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.75rem", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "qt-tag-badge", children: [
903
+ "Fantasy",
904
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { className: "qt-tag-badge-remove", children: "\xD7" })
905
+ ] }) })
906
+ ] }),
907
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
908
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "0.75rem", fontSize: "0.875rem" }, children: "Small tags in card context" }),
909
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "qt-card", style: { maxWidth: "24rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "qt-card-body", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: [
910
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "qt-tag-badge qt-tag-badge-sm", children: "Fantasy" }),
911
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "qt-tag-badge qt-tag-badge-sm", children: "Sci-Fi" })
912
+ ] }) }) })
913
+ ] })
914
+ ] }),
617
915
  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("section", { children: [
618
916
  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Usage Examples" }),
619
917
  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
@@ -734,17 +1032,19 @@ var Dialogs = () => {
734
1032
  basicOpen && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "qt-dialog-overlay", onClick: () => setBasicOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "qt-dialog", onClick: (e) => e.stopPropagation(), children: [
735
1033
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "qt-dialog-header", children: [
736
1034
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "qt-dialog-title", children: "Basic Dialog" }),
1035
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "qt-dialog-description", children: "This is a basic dialog with some content. Dialogs are used to show important information or gather user input." }),
737
1036
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "qt-button-icon", onClick: () => setBasicOpen(false), "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
738
1037
  ] }),
739
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "qt-dialog-body", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { children: "This is a basic dialog with some content. Dialogs are used to show important information or gather user input." }) }),
1038
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "qt-dialog-body", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { children: "Dialog content area with additional details and information." }) }),
740
1039
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "qt-dialog-footer", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "qt-button qt-button-primary", onClick: () => setBasicOpen(false), children: "Got it" }) })
741
1040
  ] }) }),
742
1041
  confirmOpen && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "qt-dialog-overlay", onClick: () => setConfirmOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "qt-dialog", onClick: (e) => e.stopPropagation(), children: [
743
1042
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "qt-dialog-header", children: [
744
1043
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "qt-dialog-title", children: "Delete Item?" }),
1044
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "qt-dialog-description", children: "Are you sure you want to delete this item? This action cannot be undone." }),
745
1045
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "qt-button-icon", onClick: () => setConfirmOpen(false), "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
746
1046
  ] }),
747
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "qt-dialog-body", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { children: "Are you sure you want to delete this item? This action cannot be undone." }) }),
1047
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "qt-dialog-body", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { children: "This will remove the item from your collection permanently." }) }),
748
1048
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "qt-dialog-footer", children: [
749
1049
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "qt-button qt-button-ghost", onClick: () => setConfirmOpen(false), children: "Cancel" }),
750
1050
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "qt-button qt-button-destructive", onClick: () => setConfirmOpen(false), children: "Delete" })
@@ -753,6 +1053,7 @@ var Dialogs = () => {
753
1053
  formOpen && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "qt-dialog-overlay", onClick: () => setFormOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "qt-dialog", onClick: (e) => e.stopPropagation(), style: { maxWidth: "28rem" }, children: [
754
1054
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "qt-dialog-header", children: [
755
1055
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "qt-dialog-title", children: "Create New Item" }),
1056
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "qt-dialog-description", children: "Fill in the details below to create a new item." }),
756
1057
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "qt-button-icon", onClick: () => setFormOpen(false), "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
757
1058
  ] }),
758
1059
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "qt-dialog-body", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
@@ -784,6 +1085,7 @@ var Dialogs = () => {
784
1085
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { backgroundColor: "var(--color-muted)", padding: "2rem", borderRadius: "var(--radius-lg)" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "qt-dialog", style: { position: "relative", transform: "none", margin: "0 auto" }, children: [
785
1086
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "qt-dialog-header", children: [
786
1087
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "qt-dialog-title", children: "Dialog Title" }),
1088
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "qt-dialog-description", children: "This is a dialog with a title and description." }),
787
1089
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "qt-button-icon", "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
788
1090
  ] }),
789
1091
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "qt-dialog-body", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { children: "Dialog content area. This can contain text, forms, or any other content." }) }),
@@ -811,6 +1113,32 @@ var Dialogs = () => {
811
1113
  ] }) })
812
1114
  ] })
813
1115
  ] })
1116
+ ] }),
1117
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
1118
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Popover" }),
1119
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { position: "relative", display: "inline-block", marginTop: "2rem" }, children: [
1120
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "qt-button qt-button-secondary", children: "Hover for popover" }),
1121
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "qt-popover", style: { position: "absolute", left: 0, top: "100%", marginTop: "0.5rem", display: "block" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { padding: "0.75rem" }, children: [
1122
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { style: { fontWeight: 600, marginBottom: "0.25rem" }, children: "Popover Title" }),
1123
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: "This is popover content that provides additional context." })
1124
+ ] }) })
1125
+ ] })
1126
+ ] }),
1127
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
1128
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Dropdown Menu" }),
1129
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "qt-dropdown", style: { display: "inline-block", position: "relative" }, children: [
1130
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "qt-dropdown-item", children: "Profile" }),
1131
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "qt-dropdown-item", children: "Settings" }),
1132
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "qt-dropdown-separator" }),
1133
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "qt-dropdown-item", style: { color: "var(--color-destructive)" }, children: "Sign Out" })
1134
+ ] })
1135
+ ] }),
1136
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("section", { children: [
1137
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Tooltip" }),
1138
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { display: "flex", alignItems: "center", gap: "2rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { position: "relative", display: "inline-block", marginTop: "2rem" }, children: [
1139
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "qt-button qt-button-secondary", children: "Hover me" }),
1140
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "qt-tooltip", style: { position: "absolute", left: "50%", transform: "translateX(-50%)", bottom: "100%", marginBottom: "0.5rem", display: "block" }, children: "Helpful tooltip text" })
1141
+ ] }) })
814
1142
  ] })
815
1143
  ] });
816
1144
  };
@@ -914,24 +1242,50 @@ var Chat = () => {
914
1242
  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
915
1243
  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Message Bubbles" }),
916
1244
  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
917
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-chat-message qt-chat-message-user", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "Hello! How are you today?" }) }) }),
1245
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "qt-chat-message qt-chat-message-user", children: [
1246
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "qt-chat-message-header", children: [
1247
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "qt-chat-message-author", children: "You" }),
1248
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "qt-chat-message-time", children: "2:30 PM" })
1249
+ ] }),
1250
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "Hello! How are you today?" }) })
1251
+ ] }) }),
918
1252
  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { display: "flex", gap: "0.5rem" }, children: [
919
1253
  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-avatar-fallback", children: "AI" }) }),
920
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-chat-message qt-chat-message-assistant", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "Hello! I'm doing well, thank you for asking. How can I help you today?" }) })
1254
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
1255
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "qt-chat-message-header", children: [
1256
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "qt-chat-message-author", children: "Assistant" }),
1257
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "qt-chat-message-time", children: "2:30 PM" })
1258
+ ] }),
1259
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "Hello! I'm doing well, thank you for asking. How can I help you today?" }) })
1260
+ ] })
921
1261
  ] }),
922
1262
  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { display: "flex", gap: "0.5rem" }, children: [
923
1263
  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-avatar-fallback", children: "AI" }) }),
924
1264
  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
925
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "Here's some information you might find helpful:" }),
926
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("ul", { style: { marginTop: "0.5rem", paddingLeft: "1.25rem" }, children: [
927
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { children: "First point of interest" }),
928
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { children: "Second important detail" }),
929
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { children: "Third relevant fact" })
1265
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "qt-chat-message-header", children: [
1266
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "qt-chat-message-author", children: "Assistant" }),
1267
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "qt-chat-message-time", children: "2:31 PM" })
1268
+ ] }),
1269
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "qt-chat-message-content", children: [
1270
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "Here's some information you might find helpful:" }),
1271
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("ul", { style: { marginTop: "0.5rem", paddingLeft: "1.25rem" }, children: [
1272
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { children: "First point of interest" }),
1273
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { children: "Second important detail" }),
1274
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { children: "Third relevant fact" })
1275
+ ] }),
1276
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { style: { marginTop: "0.5rem" }, children: "Let me know if you'd like more details about any of these!" })
930
1277
  ] }),
931
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { style: { marginTop: "0.5rem" }, children: "Let me know if you'd like more details about any of these!" })
1278
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "qt-chat-message-actions", children: [
1279
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { className: "qt-button-icon", title: "Edit", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" }) }) }),
1280
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { className: "qt-button-icon", title: "Copy", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) }) })
1281
+ ] })
932
1282
  ] })
933
1283
  ] }),
934
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-chat-message qt-chat-message-user", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "That's exactly what I needed, thanks!" }) }) })
1284
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-chat-message qt-chat-message-system", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "Alice has joined the conversation." }) }) }),
1285
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "qt-chat-message qt-chat-message-user", children: [
1286
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-chat-message-header", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "qt-chat-message-author", children: "You" }) }),
1287
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "That's exactly what I needed, thanks!" }) })
1288
+ ] }) })
935
1289
  ] })
936
1290
  ] }),
937
1291
  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
@@ -954,6 +1308,115 @@ var Chat = () => {
954
1308
  ] })
955
1309
  ] })
956
1310
  ] }),
1311
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
1312
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Roleplay Annotations" }),
1313
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Special text formatting for roleplay-style messages with narration, inner thoughts, and out-of-character text." }),
1314
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
1315
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { display: "flex", gap: "0.5rem" }, children: [
1316
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-avatar-fallback", children: "A" }) }),
1317
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
1318
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-chat-message-header", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "qt-chat-message-author", children: "Alice" }) }),
1319
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { children: [
1320
+ '"Hello there!" ',
1321
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "qt-chat-narration", children: "she said with a warm smile, stepping forward to greet you." })
1322
+ ] }) })
1323
+ ] })
1324
+ ] }),
1325
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { display: "flex", gap: "0.5rem" }, children: [
1326
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-avatar-fallback", children: "A" }) }),
1327
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
1328
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-chat-message-header", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "qt-chat-message-author", children: "Alice" }) }),
1329
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { children: [
1330
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "qt-chat-narration", children: "She paused for a moment, considering her words carefully." }),
1331
+ " ",
1332
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "qt-chat-inner-monologue", children: "I wonder if they noticed..." })
1333
+ ] }) })
1334
+ ] })
1335
+ ] }),
1336
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { display: "flex", gap: "0.5rem" }, children: [
1337
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-avatar-fallback", children: "A" }) }),
1338
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
1339
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-chat-message-header", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "qt-chat-message-author", children: "Alice" }) }),
1340
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "qt-chat-ooc", children: "((OOC: Should we continue the scene or take a break?))" }) }) })
1341
+ ] })
1342
+ ] })
1343
+ ] })
1344
+ ] }),
1345
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
1346
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Whisper Messages" }),
1347
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Private messages visible only to sender and recipient. Overheard whispers have a faded style." }),
1348
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
1349
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-chat-message-row qt-chat-message-row-assistant", style: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "qt-chat-message-body qt-chat-message-assistant qt-chat-message-whisper", children: [
1350
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-chat-whisper-label", children: "whispered to Elena" }),
1351
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "I don't trust the merchant. Meet me at the tavern tonight\u2014alone." })
1352
+ ] }) }),
1353
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-chat-message-row qt-chat-message-row-assistant", style: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "qt-chat-message-body qt-chat-message-assistant qt-chat-message-whisper qt-chat-message-whisper-overheard", children: [
1354
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-chat-whisper-label", children: "whispered to Marcus" }),
1355
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "Keep an eye on the door. We may need a quick exit." })
1356
+ ] }) })
1357
+ ] })
1358
+ ] }),
1359
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
1360
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Toolbar" }),
1361
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Formatting and action buttons for chat composition." }),
1362
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "qt-chat-toolbar", style: { maxWidth: "32rem", display: "flex", gap: "0.5rem", flexWrap: "wrap" }, children: [
1363
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { className: "qt-chat-toolbar-button", title: "Bold", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 4h8a4 4 0 014 4v2M6 4v16M6 4h8a2 2 0 012 2v2M6 12h12" }) }) }),
1364
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { className: "qt-chat-toolbar-button", title: "Italic", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 5h4m-4 14h4M9 5h6M9 19H3" }) }) }),
1365
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { className: "qt-chat-toolbar-button", title: "Underline", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 5v10a4 4 0 008 0V5m0 14H7" }) }) }),
1366
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { flex: 1 } }),
1367
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { className: "qt-chat-toolbar-button", title: "Settings", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
1368
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" }),
1369
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })
1370
+ ] }) })
1371
+ ] })
1372
+ ] }),
1373
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
1374
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "RP Annotation Buttons" }),
1375
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Quick-insert buttons for roleplay annotation types." }),
1376
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "qt-rp-annotation-toolbar", style: { maxWidth: "32rem", display: "flex", gap: "0.5rem", flexWrap: "wrap" }, children: [
1377
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("button", { className: "qt-rp-annotation-button-narration", title: "Narration", children: [
1378
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h7" }) }),
1379
+ "Narration"
1380
+ ] }),
1381
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("button", { className: "qt-rp-annotation-button-internal", title: "Inner Monologue", children: [
1382
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" }) }),
1383
+ "Internal"
1384
+ ] }),
1385
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("button", { className: "qt-rp-annotation-button-ooc", title: "Out of Character", children: [
1386
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }),
1387
+ "OOC"
1388
+ ] })
1389
+ ] })
1390
+ ] }),
1391
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
1392
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Attachments" }),
1393
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "File attachment chips and attachment button." }),
1394
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "qt-chat-composer", style: { maxWidth: "32rem" }, children: [
1395
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "qt-chat-attachment-list", style: { display: "flex", gap: "0.5rem", marginBottom: "0.75rem", flexWrap: "wrap" }, children: [
1396
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "qt-chat-attachment-chip", children: [
1397
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: "document.pdf" }),
1398
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { className: "ml-2 text-gray-400 hover:text-gray-600", style: { marginLeft: "0.5rem" }, children: "\xD7" })
1399
+ ] }),
1400
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "qt-chat-attachment-chip", children: [
1401
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: "image.png" }),
1402
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { className: "ml-2 text-gray-400 hover:text-gray-600", style: { marginLeft: "0.5rem" }, children: "\xD7" })
1403
+ ] })
1404
+ ] }),
1405
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1406
+ "textarea",
1407
+ {
1408
+ className: "qt-chat-composer-input",
1409
+ placeholder: "Add a message about your files...",
1410
+ rows: 1,
1411
+ style: { width: "100%", padding: "0.5rem", marginBottom: "0.5rem" }
1412
+ }
1413
+ ),
1414
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "qt-chat-composer-actions", style: { display: "flex", gap: "0.5rem" }, children: [
1415
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { className: "qt-chat-attachment-button", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) }) }),
1416
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { className: "qt-button qt-button-primary", children: "Send" })
1417
+ ] })
1418
+ ] })
1419
+ ] }),
957
1420
  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
958
1421
  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Input" }),
959
1422
  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-chat-composer", style: { maxWidth: "32rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "qt-chat-composer-inner", style: { display: "flex", alignItems: "flex-end", gap: "0.5rem", flex: 1 }, children: [
@@ -966,7 +1429,7 @@ var Chat = () => {
966
1429
  rows: 1
967
1430
  }
968
1431
  ),
969
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { className: "qt-button qt-button-primary qt-button-sm", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 19l9 2-9-18-9 18 9-2zm0 0v-8" }) }) })
1432
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { className: "qt-button qt-button-primary qt-chat-composer-send", style: { height: "auto", padding: "0.5rem 1rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 19l9 2-9-18-9 18 9-2zm0 0v-8" }) }) })
970
1433
  ] }) })
971
1434
  ] }),
972
1435
  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
@@ -980,6 +1443,26 @@ var Chat = () => {
980
1443
  ] }) })
981
1444
  ] })
982
1445
  ] }),
1446
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
1447
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Control Buttons" }),
1448
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Continue and stop buttons for controlling AI response generation." }),
1449
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { display: "flex", gap: "1rem", maxWidth: "32rem" }, children: [
1450
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("button", { className: "qt-chat-continue-button", children: [
1451
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { className: "w-4 h-4 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
1452
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" }),
1453
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z" })
1454
+ ] }),
1455
+ "Continue"
1456
+ ] }),
1457
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("button", { className: "qt-chat-stop-button", children: [
1458
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { className: "w-4 h-4 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
1459
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }),
1460
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" })
1461
+ ] }),
1462
+ "Stop"
1463
+ ] })
1464
+ ] })
1465
+ ] }),
983
1466
  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { children: [
984
1467
  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Full Chat Layout" }),
985
1468
  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "qt-chat-layout", style: { height: "24rem", border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)", display: "flex", flexDirection: "column" }, children: [
@@ -1291,6 +1774,230 @@ var ThemeComparison = () => {
1291
1774
  ] })
1292
1775
  ] });
1293
1776
  };
1777
+
1778
+ // src/stories/components/EmptyState.tsx
1779
+ var import_jsx_runtime15 = require("react/jsx-runtime");
1780
+ var EmptyState = () => {
1781
+ return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { padding: "1.5rem" }, children: [
1782
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Empty States" }),
1783
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
1784
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Basic Empty State" }),
1785
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "qt-empty-state", children: [
1786
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "qt-empty-state-icon", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "w-12 h-12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" }) }) }),
1787
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h4", { className: "qt-empty-state-title", children: "No messages yet" }),
1788
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "qt-empty-state-description", children: "Start a conversation to see messages appear here." })
1789
+ ] })
1790
+ ] }),
1791
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
1792
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Empty State with Action" }),
1793
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "qt-empty-state", children: [
1794
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "qt-empty-state-icon", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "w-12 h-12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" }) }) }),
1795
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h4", { className: "qt-empty-state-title", children: "No characters" }),
1796
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "qt-empty-state-description", children: "You haven't created any characters yet. Create your first character to get started." }),
1797
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "qt-empty-state-action", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { className: "qt-button qt-button-primary", children: "Create Character" }) })
1798
+ ] })
1799
+ ] }),
1800
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
1801
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Search Empty State" }),
1802
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "qt-empty-state", children: [
1803
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "qt-empty-state-icon", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "w-12 h-12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }) }),
1804
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h4", { className: "qt-empty-state-title", children: "No results found" }),
1805
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "qt-empty-state-description", children: "Try adjusting your search or filters to find what you're looking for." }),
1806
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "qt-empty-state-action", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { className: "qt-button qt-button-secondary", children: "Clear Filters" }) })
1807
+ ] })
1808
+ ] }),
1809
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("section", { children: [
1810
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Error Empty State" }),
1811
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "qt-empty-state", children: [
1812
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "qt-empty-state-icon text-red-500", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "w-12 h-12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }) }),
1813
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h4", { className: "qt-empty-state-title", children: "Something went wrong" }),
1814
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "qt-empty-state-description", children: "We couldn't load the content. Please try again." }),
1815
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "qt-empty-state-action", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { className: "qt-button qt-button-primary", children: "Try Again" }) })
1816
+ ] })
1817
+ ] })
1818
+ ] });
1819
+ };
1820
+
1821
+ // src/stories/components/Loading.tsx
1822
+ var import_jsx_runtime16 = require("react/jsx-runtime");
1823
+ var Loading = () => {
1824
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { padding: "1.5rem" }, children: [
1825
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Loading States" }),
1826
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
1827
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Spinners" }),
1828
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", gap: "2rem", alignItems: "center" }, children: [
1829
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { textAlign: "center" }, children: [
1830
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-spinner qt-spinner-sm", style: { margin: "0 auto" } }),
1831
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { style: { fontSize: "0.75rem", marginTop: "0.5rem" }, children: "Small" })
1832
+ ] }),
1833
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { textAlign: "center" }, children: [
1834
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-spinner", style: { margin: "0 auto" } }),
1835
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { style: { fontSize: "0.75rem", marginTop: "0.5rem" }, children: "Default" })
1836
+ ] }),
1837
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { textAlign: "center" }, children: [
1838
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-spinner qt-spinner-lg", style: { margin: "0 auto" } }),
1839
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { style: { fontSize: "0.75rem", marginTop: "0.5rem" }, children: "Large" })
1840
+ ] })
1841
+ ] })
1842
+ ] }),
1843
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
1844
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Skeleton Text" }),
1845
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { maxWidth: "28rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
1846
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "100%" } }),
1847
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "80%" } }),
1848
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "60%" } })
1849
+ ] })
1850
+ ] }),
1851
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
1852
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Skeleton Card" }),
1853
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "qt-card", style: { maxWidth: "24rem", padding: "1rem" }, children: [
1854
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", gap: "0.75rem", marginBottom: "1rem", alignItems: "flex-start" }, children: [
1855
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-skeleton qt-skeleton-circle", style: { width: "40px", height: "40px", flexShrink: 0 } }),
1856
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
1857
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "60%" } }),
1858
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "40%" } })
1859
+ ] })
1860
+ ] }),
1861
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
1862
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-skeleton qt-skeleton-text" }),
1863
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-skeleton qt-skeleton-text" }),
1864
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "75%" } })
1865
+ ] })
1866
+ ] })
1867
+ ] }),
1868
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
1869
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Skeleton Message" }),
1870
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { maxWidth: "42rem", display: "flex", flexDirection: "column", gap: "1rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", gap: "0.75rem" }, children: [
1871
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-skeleton qt-skeleton-circle", style: { width: "32px", height: "32px", flexShrink: 0 } }),
1872
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
1873
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "120px" } }),
1874
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-card", style: { padding: "1rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
1875
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-skeleton qt-skeleton-text" }),
1876
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-skeleton qt-skeleton-text" }),
1877
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "60%" } })
1878
+ ] }) })
1879
+ ] })
1880
+ ] }) })
1881
+ ] }),
1882
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
1883
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Skeleton List" }),
1884
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { maxWidth: "24rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [1, 2, 3].map((i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "qt-card", style: { padding: "0.75rem", display: "flex", gap: "0.75rem", alignItems: "center" }, children: [
1885
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-skeleton qt-skeleton-circle", style: { width: "32px", height: "32px", flexShrink: 0 } }),
1886
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "70%" } }) })
1887
+ ] }, i)) })
1888
+ ] }),
1889
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("section", { children: [
1890
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Loading Button" }),
1891
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", gap: "1rem" }, children: [
1892
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("button", { className: "qt-button qt-button-primary", disabled: true, style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
1893
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-spinner qt-spinner-sm" }),
1894
+ "Loading..."
1895
+ ] }),
1896
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("button", { className: "qt-button qt-button-secondary", disabled: true, style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
1897
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-spinner qt-spinner-sm" }),
1898
+ "Saving..."
1899
+ ] })
1900
+ ] })
1901
+ ] })
1902
+ ] });
1903
+ };
1904
+
1905
+ // src/stories/components/Participant.tsx
1906
+ var import_jsx_runtime17 = require("react/jsx-runtime");
1907
+ var Participant = () => {
1908
+ return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { padding: "1.5rem" }, children: [
1909
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Participants" }),
1910
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
1911
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Participant Cards" }),
1912
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { maxWidth: "20rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
1913
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "qt-participant-card-header", children: [
1914
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-avatar", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-avatar-fallback", children: "AC" }) }) }),
1915
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "qt-participant-card-info", children: [
1916
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-name", children: "Alice Character" }),
1917
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-status", children: "AI Assistant" })
1918
+ ] })
1919
+ ] }) }),
1920
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card qt-participant-card-active", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "qt-participant-card-header", children: [
1921
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-avatar", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-avatar-fallback", children: "BC" }) }) }),
1922
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "qt-participant-card-info", children: [
1923
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-name", children: "Bob Character" }),
1924
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-status", children: "Currently Speaking" })
1925
+ ] })
1926
+ ] }) }),
1927
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "qt-participant-card-header", children: [
1928
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-avatar", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-avatar-fallback", children: "YO" }) }) }),
1929
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "qt-participant-card-info", children: [
1930
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-name", children: "You" }),
1931
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-status", children: "Human" })
1932
+ ] })
1933
+ ] }) })
1934
+ ] })
1935
+ ] }),
1936
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
1937
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Active Participant" }),
1938
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { maxWidth: "20rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card qt-participant-card-active", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "qt-participant-card-header", children: [
1939
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-avatar", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-avatar-fallback", children: "AC" }) }) }),
1940
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "qt-participant-card-info", children: [
1941
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-name", children: "Alice Character" }),
1942
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-status", children: "Currently Speaking" })
1943
+ ] })
1944
+ ] }) }) })
1945
+ ] }),
1946
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
1947
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Sidebar Layout" }),
1948
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { display: "flex", gap: "1rem" }, children: [
1949
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-card", style: { flex: 1, padding: "1rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { style: { color: "var(--color-text-muted)" }, children: "Chat messages area" }) }),
1950
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "qt-chat-sidebar", style: { width: "16rem" }, children: [
1951
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { padding: "1rem", borderBottom: "1px solid var(--qt-chat-sidebar-header-border)" }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h4", { style: { fontWeight: 600, color: "var(--qt-chat-sidebar-heading)" }, children: "Participants" }) }),
1952
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { padding: "0.5rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
1953
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card qt-participant-card-active", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "qt-participant-card-header", children: [
1954
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-avatar-fallback", children: "AC" }) }) }),
1955
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-info", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-name", style: { fontSize: "0.875rem" }, children: "Alice" }) })
1956
+ ] }) }),
1957
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "qt-participant-card-header", children: [
1958
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-avatar-fallback", children: "YO" }) }) }),
1959
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-info", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-name", style: { fontSize: "0.875rem" }, children: "You" }) })
1960
+ ] }) })
1961
+ ] })
1962
+ ] })
1963
+ ] })
1964
+ ] }),
1965
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("section", { children: [
1966
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Connection Profile Dropdown" }),
1967
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { maxWidth: "20rem", display: "flex", flexDirection: "column", gap: "1rem" }, children: [
1968
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "qt-participant-card-header", children: [
1969
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-avatar", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-avatar-fallback", children: "AC" }) }) }),
1970
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "qt-participant-card-info", children: [
1971
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-name", children: "Alice Character" }),
1972
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-status", children: "AI Assistant" }),
1973
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { marginTop: "0.25rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("select", { className: "qt-select qt-select-sm", style: { width: "100%" }, defaultValue: "gpt-4", children: [
1974
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: "", children: "Select a provider..." }),
1975
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: "__user__", children: "User (you type)" }),
1976
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: "gpt-4", children: "gpt-4-turbo" }),
1977
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: "claude", children: "claude-3-opus" }),
1978
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: "gemini", children: "gemini-pro" })
1979
+ ] }) })
1980
+ ] })
1981
+ ] }) }),
1982
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "qt-participant-card-header", children: [
1983
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-avatar", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-avatar-fallback", children: "BC" }) }) }),
1984
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "qt-participant-card-info", children: [
1985
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
1986
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-name", children: "Bob Character" }),
1987
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "qt-badge-secondary", style: { fontSize: "0.75rem" }, children: "You" })
1988
+ ] }),
1989
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { marginTop: "0.25rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("select", { className: "qt-select qt-select-sm", style: { width: "100%" }, defaultValue: "__user__", children: [
1990
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: "", children: "Select a provider..." }),
1991
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: "__user__", children: "User (you type)" }),
1992
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: "gpt-4", children: "gpt-4-turbo" }),
1993
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: "claude", children: "claude-3-opus" })
1994
+ ] }) })
1995
+ ] })
1996
+ ] }) })
1997
+ ] })
1998
+ ] })
1999
+ ] });
2000
+ };
1294
2001
  // Annotate the CommonJS export names for ESM import in node:
1295
2002
  0 && (module.exports = {
1296
2003
  Avatars,
@@ -1302,8 +2009,11 @@ var ThemeComparison = () => {
1302
2009
  ColorPalette,
1303
2010
  ColorSwatch,
1304
2011
  Dialogs,
2012
+ EmptyState,
1305
2013
  FilePreview,
1306
2014
  Inputs,
2015
+ Loading,
2016
+ Participant,
1307
2017
  Spacing,
1308
2018
  Tabs,
1309
2019
  ThemeComparison,