@quilltap/theme-storybook 1.0.22 → 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 +58 -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 +71 -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/{chunk-W3J7BRAL.mjs → chunk-45RKCZL3.mjs} RENAMED
@@ -53,13 +53,22 @@ var ColorPalette = () => {
53
53
  { name: "Chat User", variable: "--color-chat-user", description: "User message background" },
54
54
  { name: "Chat User Foreground", variable: "--color-chat-user-foreground", description: "User message text" }
55
55
  ];
56
+ const componentTokens = [
57
+ { name: "Button Primary BG", variable: "--qt-button-primary-bg", description: "Primary button background" },
58
+ { name: "Button Primary Hover", variable: "--qt-button-primary-hover-bg", description: "Primary button hover" },
59
+ { name: "Card BG", variable: "--qt-card-bg", description: "Card background" },
60
+ { name: "Card Border", variable: "--qt-card-border", description: "Card border" },
61
+ { name: "Input BG", variable: "--qt-input-bg", description: "Input background" },
62
+ { name: "Input Border", variable: "--qt-input-border", description: "Input border" }
63
+ ];
56
64
  return /* @__PURE__ */ jsxs("div", { style: { padding: "1.5rem" }, children: [
57
65
  /* @__PURE__ */ jsx("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Color Palette" }),
58
66
  /* @__PURE__ */ 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." }),
59
67
  /* @__PURE__ */ jsx(ColorGroup, { title: "Base Colors", colors: baseColors }),
60
68
  /* @__PURE__ */ jsx(ColorGroup, { title: "Semantic Colors", colors: semanticColors }),
61
69
  /* @__PURE__ */ jsx(ColorGroup, { title: "Status Colors", colors: statusColors }),
62
- /* @__PURE__ */ jsx(ColorGroup, { title: "Chat Colors", colors: chatColors })
70
+ /* @__PURE__ */ jsx(ColorGroup, { title: "Chat Colors", colors: chatColors }),
71
+ /* @__PURE__ */ jsx(ColorGroup, { title: "Component Tokens", colors: componentTokens })
63
72
  ] });
64
73
  };
65
74
 
@@ -69,63 +78,152 @@ var Typography = () => {
69
78
  return /* @__PURE__ */ jsxs2("div", { style: { padding: "1.5rem" }, children: [
70
79
  /* @__PURE__ */ jsx2("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Typography" }),
71
80
  /* @__PURE__ */ jsxs2("section", { style: { marginBottom: "2rem" }, children: [
72
- /* @__PURE__ */ jsx2("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Font Families" }),
73
- /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
81
+ /* @__PURE__ */ jsx2("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Headings (qt-heading-*)" }),
82
+ /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
74
83
  /* @__PURE__ */ jsxs2("div", { children: [
75
- /* @__PURE__ */ jsx2("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "--font-sans" }),
76
- /* @__PURE__ */ jsx2("p", { style: { fontFamily: "var(--font-sans)", fontSize: "1.125rem", marginTop: "0.25rem" }, children: "The quick brown fox jumps over the lazy dog." })
84
+ /* @__PURE__ */ jsx2("h1", { className: "qt-heading-1", children: "Heading 1 - The quick brown fox" }),
85
+ /* @__PURE__ */ jsx2("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-heading-1" })
77
86
  ] }),
78
87
  /* @__PURE__ */ jsxs2("div", { children: [
79
- /* @__PURE__ */ jsx2("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "--font-serif" }),
80
- /* @__PURE__ */ jsx2("p", { style: { fontFamily: "var(--font-serif)", fontSize: "1.125rem", marginTop: "0.25rem" }, children: "The quick brown fox jumps over the lazy dog." })
88
+ /* @__PURE__ */ jsx2("h2", { className: "qt-heading-2", children: "Heading 2 - The quick brown fox" }),
89
+ /* @__PURE__ */ jsx2("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-heading-2" })
81
90
  ] }),
82
91
  /* @__PURE__ */ jsxs2("div", { children: [
83
- /* @__PURE__ */ jsx2("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "--font-mono" }),
84
- /* @__PURE__ */ jsx2("p", { style: { fontFamily: "var(--font-mono)", fontSize: "1.125rem", marginTop: "0.25rem" }, children: "The quick brown fox jumps over the lazy dog." })
92
+ /* @__PURE__ */ jsx2("h3", { className: "qt-heading-3", children: "Heading 3 - The quick brown fox" }),
93
+ /* @__PURE__ */ jsx2("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-heading-3" })
94
+ ] }),
95
+ /* @__PURE__ */ jsxs2("div", { children: [
96
+ /* @__PURE__ */ jsx2("h4", { className: "qt-heading-4", children: "Heading 4 - The quick brown fox" }),
97
+ /* @__PURE__ */ jsx2("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-heading-4" })
85
98
  ] })
86
99
  ] })
87
100
  ] }),
88
- /* @__PURE__ */ jsxs2("section", { style: { marginBottom: "2rem" }, children: [
89
- /* @__PURE__ */ jsx2("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Headings" }),
90
- /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
91
- /* @__PURE__ */ jsx2("h1", { style: { fontSize: "2.25rem", fontWeight: 700, lineHeight: 1.2 }, children: "Heading 1 (2.25rem)" }),
92
- /* @__PURE__ */ jsx2("h2", { style: { fontSize: "1.875rem", fontWeight: 700, lineHeight: 1.2 }, children: "Heading 2 (1.875rem)" }),
93
- /* @__PURE__ */ jsx2("h3", { style: { fontSize: "1.5rem", fontWeight: 600, lineHeight: 1.3 }, children: "Heading 3 (1.5rem)" }),
94
- /* @__PURE__ */ jsx2("h4", { style: { fontSize: "1.25rem", fontWeight: 600, lineHeight: 1.3 }, children: "Heading 4 (1.25rem)" }),
95
- /* @__PURE__ */ jsx2("h5", { style: { fontSize: "1.125rem", fontWeight: 600, lineHeight: 1.4 }, children: "Heading 5 (1.125rem)" }),
96
- /* @__PURE__ */ jsx2("h6", { style: { fontSize: "1rem", fontWeight: 600, lineHeight: 1.4 }, children: "Heading 6 (1rem)" })
97
- ] })
98
- ] }),
99
101
  /* @__PURE__ */ jsxs2("section", { style: { marginBottom: "2rem" }, children: [
100
102
  /* @__PURE__ */ jsx2("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Body Text" }),
101
103
  /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "40rem" }, children: [
102
104
  /* @__PURE__ */ jsxs2("div", { children: [
103
- /* @__PURE__ */ jsx2("span", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Large (1.125rem)" }),
104
- /* @__PURE__ */ jsx2("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." })
105
+ /* @__PURE__ */ jsx2("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." }),
106
+ /* @__PURE__ */ jsx2("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-text-lead" })
107
+ ] }),
108
+ /* @__PURE__ */ jsxs2("div", { children: [
109
+ /* @__PURE__ */ jsx2("p", { className: "qt-text-large", children: "Large text - Slightly larger than body text for emphasis. The quick brown fox jumps over the lazy dog." }),
110
+ /* @__PURE__ */ jsx2("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-text-large" })
105
111
  ] }),
106
112
  /* @__PURE__ */ jsxs2("div", { children: [
107
- /* @__PURE__ */ jsx2("span", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Base (1rem)" }),
108
- /* @__PURE__ */ jsx2("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." })
113
+ /* @__PURE__ */ jsx2("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." }),
114
+ /* @__PURE__ */ jsx2("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "default / no class" })
109
115
  ] }),
110
116
  /* @__PURE__ */ jsxs2("div", { children: [
111
- /* @__PURE__ */ jsx2("span", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Small (0.875rem)" }),
112
- /* @__PURE__ */ jsx2("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." })
117
+ /* @__PURE__ */ jsx2("p", { className: "qt-text-small", children: "Small text - For less important or supplementary information. The quick brown fox jumps over the lazy dog." }),
118
+ /* @__PURE__ */ jsx2("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-text-small" })
113
119
  ] }),
114
120
  /* @__PURE__ */ jsxs2("div", { children: [
115
- /* @__PURE__ */ jsx2("span", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Extra Small (0.75rem)" }),
116
- /* @__PURE__ */ jsx2("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." })
121
+ /* @__PURE__ */ jsx2("p", { className: "qt-text-xs", children: "Extra small text - For fine print, captions, or metadata. The quick brown fox jumps over the lazy dog." }),
122
+ /* @__PURE__ */ jsx2("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-text-xs" })
117
123
  ] })
118
124
  ] })
119
125
  ] }),
120
126
  /* @__PURE__ */ jsxs2("section", { style: { marginBottom: "2rem" }, children: [
121
127
  /* @__PURE__ */ jsx2("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Text Colors" }),
122
128
  /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
123
- /* @__PURE__ */ jsx2("p", { style: { color: "var(--color-foreground)" }, children: "Primary text (--color-foreground)" }),
124
- /* @__PURE__ */ jsx2("p", { style: { color: "var(--color-muted-foreground)" }, children: "Secondary text (--color-muted-foreground)" }),
125
- /* @__PURE__ */ jsx2("p", { style: { color: "var(--color-primary)" }, children: "Primary color text (--color-primary)" }),
126
- /* @__PURE__ */ jsx2("p", { style: { color: "var(--color-destructive)" }, children: "Destructive text (--color-destructive)" }),
127
- /* @__PURE__ */ jsx2("p", { style: { color: "var(--color-success)" }, children: "Success text (--color-success)" }),
128
- /* @__PURE__ */ jsx2("p", { style: { color: "var(--color-warning)" }, children: "Warning text (--color-warning)" })
129
+ /* @__PURE__ */ jsxs2("div", { children: [
130
+ /* @__PURE__ */ jsx2("p", { children: "Default text color" }),
131
+ /* @__PURE__ */ jsx2("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "default" })
132
+ ] }),
133
+ /* @__PURE__ */ jsxs2("div", { children: [
134
+ /* @__PURE__ */ jsx2("p", { className: "qt-text-muted", children: "Muted text - For secondary content" }),
135
+ /* @__PURE__ */ jsx2("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-text-muted" })
136
+ ] }),
137
+ /* @__PURE__ */ jsxs2("div", { children: [
138
+ /* @__PURE__ */ jsx2("p", { className: "qt-text-primary", children: "Primary text - For emphasis and links" }),
139
+ /* @__PURE__ */ jsx2("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-text-primary" })
140
+ ] }),
141
+ /* @__PURE__ */ jsxs2("div", { children: [
142
+ /* @__PURE__ */ jsx2("p", { className: "qt-text-success", children: "Success text - For positive messages" }),
143
+ /* @__PURE__ */ jsx2("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-text-success" })
144
+ ] }),
145
+ /* @__PURE__ */ jsxs2("div", { children: [
146
+ /* @__PURE__ */ jsx2("p", { className: "qt-text-warning", children: "Warning text - For caution messages" }),
147
+ /* @__PURE__ */ jsx2("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-text-warning" })
148
+ ] }),
149
+ /* @__PURE__ */ jsxs2("div", { children: [
150
+ /* @__PURE__ */ jsx2("p", { className: "qt-text-destructive", children: "Destructive text - For error messages" }),
151
+ /* @__PURE__ */ jsx2("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-text-destructive" })
152
+ ] }),
153
+ /* @__PURE__ */ jsxs2("div", { children: [
154
+ /* @__PURE__ */ jsx2("p", { className: "qt-text-info", children: "Info text - For informational messages" }),
155
+ /* @__PURE__ */ jsx2("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-text-info" })
156
+ ] })
157
+ ] })
158
+ ] }),
159
+ /* @__PURE__ */ jsxs2("section", { style: { marginBottom: "2rem" }, children: [
160
+ /* @__PURE__ */ jsx2("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Labels & UI Text" }),
161
+ /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
162
+ /* @__PURE__ */ jsxs2("div", { children: [
163
+ /* @__PURE__ */ jsx2("span", { className: "qt-label", children: "Form Label" }),
164
+ /* @__PURE__ */ jsx2("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)", marginLeft: "1rem" }, children: ".qt-label" })
165
+ ] }),
166
+ /* @__PURE__ */ jsxs2("div", { children: [
167
+ /* @__PURE__ */ jsx2("span", { className: "qt-hint", children: "Hint text for form fields" }),
168
+ /* @__PURE__ */ jsx2("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)", marginLeft: "1rem" }, children: ".qt-hint" })
169
+ ] }),
170
+ /* @__PURE__ */ jsxs2("div", { children: [
171
+ /* @__PURE__ */ jsx2("span", { className: "qt-text-label", children: "UI Label Text" }),
172
+ /* @__PURE__ */ jsx2("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)", marginLeft: "1rem" }, children: ".qt-text-label" })
173
+ ] }),
174
+ /* @__PURE__ */ jsxs2("div", { children: [
175
+ /* @__PURE__ */ jsx2("span", { className: "qt-text-section", children: "Section Header" }),
176
+ /* @__PURE__ */ jsx2("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)", marginLeft: "1rem" }, children: ".qt-text-section" })
177
+ ] })
178
+ ] })
179
+ ] }),
180
+ /* @__PURE__ */ jsxs2("section", { style: { marginBottom: "2rem" }, children: [
181
+ /* @__PURE__ */ jsx2("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Code & Monospace" }),
182
+ /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
183
+ /* @__PURE__ */ jsxs2("div", { children: [
184
+ /* @__PURE__ */ jsx2("code", { className: "qt-code-inline", children: "inline code example" }),
185
+ /* @__PURE__ */ jsx2("span", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)", marginLeft: "1rem" }, children: ".qt-code-inline" })
186
+ ] }),
187
+ /* @__PURE__ */ jsxs2("div", { children: [
188
+ /* @__PURE__ */ jsx2("pre", { className: "qt-code-block", children: `function greet(name: string): string {
189
+ return \`Hello, \${name}!\`;
190
+ }
191
+
192
+ console.log(greet('World'));` }),
193
+ /* @__PURE__ */ jsx2("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-code-block" })
194
+ ] })
195
+ ] })
196
+ ] }),
197
+ /* @__PURE__ */ jsxs2("section", { style: { marginBottom: "2rem" }, children: [
198
+ /* @__PURE__ */ jsx2("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Prose (Long-form Content)" }),
199
+ /* @__PURE__ */ jsxs2("div", { className: "qt-prose", style: { maxWidth: "40rem" }, children: [
200
+ /* @__PURE__ */ jsx2("h3", { children: "Article Title" }),
201
+ /* @__PURE__ */ jsxs2("p", { children: [
202
+ "This is an example of the ",
203
+ /* @__PURE__ */ jsx2("code", { children: ".qt-prose" }),
204
+ " class applied to a container. It provides sensible defaults for long-form content like articles, documentation, and chat messages."
205
+ ] }),
206
+ /* @__PURE__ */ jsx2("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." }),
207
+ /* @__PURE__ */ jsx2("h4", { children: "Subsection" }),
208
+ /* @__PURE__ */ jsx2("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." })
209
+ ] }),
210
+ /* @__PURE__ */ jsx2("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: ".qt-prose" })
211
+ ] }),
212
+ /* @__PURE__ */ jsxs2("section", { style: { marginBottom: "2rem" }, children: [
213
+ /* @__PURE__ */ jsx2("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Font Families" }),
214
+ /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
215
+ /* @__PURE__ */ jsxs2("div", { children: [
216
+ /* @__PURE__ */ jsx2("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "--font-sans" }),
217
+ /* @__PURE__ */ jsx2("p", { style: { fontFamily: "var(--font-sans)", fontSize: "1.125rem", marginTop: "0.25rem" }, children: "The quick brown fox jumps over the lazy dog." })
218
+ ] }),
219
+ /* @__PURE__ */ jsxs2("div", { children: [
220
+ /* @__PURE__ */ jsx2("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "--font-serif" }),
221
+ /* @__PURE__ */ jsx2("p", { style: { fontFamily: "var(--font-serif)", fontSize: "1.125rem", marginTop: "0.25rem" }, children: "The quick brown fox jumps over the lazy dog." })
222
+ ] }),
223
+ /* @__PURE__ */ jsxs2("div", { children: [
224
+ /* @__PURE__ */ jsx2("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "--font-mono" }),
225
+ /* @__PURE__ */ jsx2("p", { style: { fontFamily: "var(--font-mono)", fontSize: "1.125rem", marginTop: "0.25rem" }, children: "The quick brown fox jumps over the lazy dog." })
226
+ ] })
129
227
  ] })
130
228
  ] })
131
229
  ] });
@@ -134,134 +232,214 @@ var Typography = () => {
134
232
  // src/stories/components/Spacing.tsx
135
233
  import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
136
234
  var Spacing = () => {
137
- const radii = [
235
+ const radiusTokens = [
236
+ { name: "None", variable: "0", value: "0" },
138
237
  { name: "Small", variable: "--radius-sm", value: "var(--radius-sm)" },
139
238
  { name: "Medium", variable: "--radius-md", value: "var(--radius-md)" },
140
- { name: "Large", variable: "--radius-lg", value: "var(--radius-lg)" }
239
+ { name: "Large", variable: "--radius-lg", value: "var(--radius-lg)" },
240
+ { name: "Extra Large", variable: "--radius-xl", value: "var(--radius-xl)" },
241
+ { name: "Full", variable: "9999px", value: "9999px" }
242
+ ];
243
+ const componentRadii = [
244
+ { name: "Button", variable: "--qt-button-radius" },
245
+ { name: "Card", variable: "--qt-card-radius" },
246
+ { name: "Input", variable: "--qt-input-radius" },
247
+ { name: "Dialog", variable: "--qt-dialog-radius" },
248
+ { name: "Badge", variable: "--qt-badge-radius" },
249
+ { name: "Avatar", variable: "--qt-avatar-radius" },
250
+ { name: "Chat Message", variable: "--qt-chat-message-radius" }
251
+ ];
252
+ const shadowTokens = [
253
+ { name: "Card Shadow", variable: "--qt-card-shadow" },
254
+ { name: "Card Hover Shadow", variable: "--qt-card-shadow-hover" },
255
+ { name: "Panel Shadow", variable: "--qt-panel-shadow" },
256
+ { name: "Dialog Shadow", variable: "--qt-dialog-shadow" },
257
+ { name: "Popover Shadow", variable: "--qt-popover-shadow" },
258
+ { name: "Button Primary Shadow", variable: "--qt-button-primary-shadow" },
259
+ { name: "Chat Message Shadow", variable: "--qt-chat-message-shadow" }
141
260
  ];
142
261
  return /* @__PURE__ */ jsxs3("div", { style: { padding: "1.5rem" }, children: [
143
262
  /* @__PURE__ */ jsx3("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Spacing & Borders" }),
144
263
  /* @__PURE__ */ jsxs3("section", { style: { marginBottom: "2rem" }, children: [
145
- /* @__PURE__ */ jsx3("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Border Radius" }),
146
- /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: "2rem", flexWrap: "wrap" }, children: [
147
- radii.map(({ name, variable, value }) => /* @__PURE__ */ jsxs3("div", { style: { textAlign: "center" }, children: [
264
+ /* @__PURE__ */ jsx3("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Border Radius Scale" }),
265
+ /* @__PURE__ */ jsx3("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(6rem, 1fr))", gap: "1.5rem" }, children: radiusTokens.map(({ name, variable, value }) => /* @__PURE__ */ jsxs3("div", { style: { textAlign: "center" }, children: [
266
+ /* @__PURE__ */ jsx3(
267
+ "div",
268
+ {
269
+ style: {
270
+ width: "5rem",
271
+ height: "5rem",
272
+ backgroundColor: "var(--color-primary)",
273
+ borderRadius: value,
274
+ margin: "0 auto 0.5rem"
275
+ }
276
+ }
277
+ ),
278
+ /* @__PURE__ */ jsx3("div", { style: { fontWeight: 500, fontSize: "0.875rem" }, children: name }),
279
+ /* @__PURE__ */ jsx3("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: variable })
280
+ ] }, variable)) })
281
+ ] }),
282
+ /* @__PURE__ */ jsxs3("section", { style: { marginBottom: "2rem" }, children: [
283
+ /* @__PURE__ */ jsx3("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Component Border Radii" }),
284
+ /* @__PURE__ */ jsx3("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(8rem, 1fr))", gap: "1.5rem" }, children: componentRadii.map(({ name, variable }) => /* @__PURE__ */ jsxs3("div", { style: { textAlign: "center" }, children: [
285
+ /* @__PURE__ */ jsx3(
286
+ "div",
287
+ {
288
+ style: {
289
+ width: "6rem",
290
+ height: "4rem",
291
+ backgroundColor: "var(--color-muted)",
292
+ border: "1px solid var(--color-border)",
293
+ borderRadius: `var(${variable})`,
294
+ margin: "0 auto 0.5rem"
295
+ }
296
+ }
297
+ ),
298
+ /* @__PURE__ */ jsx3("div", { style: { fontWeight: 500, fontSize: "0.875rem" }, children: name }),
299
+ /* @__PURE__ */ jsx3("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: variable })
300
+ ] }, variable)) })
301
+ ] }),
302
+ /* @__PURE__ */ jsxs3("section", { style: { marginBottom: "2rem" }, children: [
303
+ /* @__PURE__ */ jsx3("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Shadows" }),
304
+ /* @__PURE__ */ jsx3("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(10rem, 1fr))", gap: "1.5rem" }, children: shadowTokens.map(({ name, variable }) => /* @__PURE__ */ jsxs3("div", { style: { padding: "1rem" }, children: [
305
+ /* @__PURE__ */ jsx3(
306
+ "div",
307
+ {
308
+ style: {
309
+ width: "100%",
310
+ height: "6rem",
311
+ backgroundColor: "var(--color-background)",
312
+ borderRadius: "var(--radius-lg)",
313
+ boxShadow: `var(${variable})`,
314
+ marginBottom: "0.5rem"
315
+ }
316
+ }
317
+ ),
318
+ /* @__PURE__ */ jsx3("div", { style: { fontWeight: 500, fontSize: "0.875rem" }, children: name }),
319
+ /* @__PURE__ */ jsx3("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: variable })
320
+ ] }, variable)) })
321
+ ] }),
322
+ /* @__PURE__ */ jsxs3("section", { style: { marginBottom: "2rem" }, children: [
323
+ /* @__PURE__ */ jsx3("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Padding Tokens" }),
324
+ /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
325
+ /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
148
326
  /* @__PURE__ */ jsx3(
149
327
  "div",
150
328
  {
151
329
  style: {
152
- width: "6rem",
153
- height: "6rem",
154
330
  backgroundColor: "var(--color-primary)",
155
- borderRadius: value
156
- }
331
+ color: "var(--color-background)",
332
+ padding: "var(--qt-button-padding-y) var(--qt-button-padding-x)",
333
+ borderRadius: "var(--radius-md)"
334
+ },
335
+ children: "Button padding"
157
336
  }
158
337
  ),
159
- /* @__PURE__ */ jsx3("div", { style: { marginTop: "0.5rem", fontWeight: 500 }, children: name }),
160
- /* @__PURE__ */ jsx3("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: variable })
161
- ] }, variable)),
162
- /* @__PURE__ */ jsxs3("div", { style: { textAlign: "center" }, children: [
338
+ /* @__PURE__ */ jsx3("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "--qt-button-padding-x, --qt-button-padding-y" })
339
+ ] }),
340
+ /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
163
341
  /* @__PURE__ */ jsx3(
164
342
  "div",
165
343
  {
166
344
  style: {
167
- width: "6rem",
168
- height: "6rem",
169
- backgroundColor: "var(--color-primary)",
170
- borderRadius: "9999px"
171
- }
345
+ backgroundColor: "var(--color-muted)",
346
+ padding: "var(--qt-card-padding)",
347
+ border: "1px solid var(--color-border)",
348
+ borderRadius: "var(--radius-md)"
349
+ },
350
+ children: "Card padding"
172
351
  }
173
352
  ),
174
- /* @__PURE__ */ jsx3("div", { style: { marginTop: "0.5rem", fontWeight: 500 }, children: "Full / Pill" }),
175
- /* @__PURE__ */ jsx3("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "9999px" })
176
- ] })
177
- ] })
178
- ] }),
179
- /* @__PURE__ */ jsxs3("section", { style: { marginBottom: "2rem" }, children: [
180
- /* @__PURE__ */ jsx3("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Spacing Scale" }),
181
- /* @__PURE__ */ jsx3("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64].map((px) => /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
182
- /* @__PURE__ */ jsx3(
183
- "div",
184
- {
185
- style: {
186
- width: `${px}px`,
187
- height: "1.5rem",
188
- backgroundColor: "var(--color-primary)",
189
- borderRadius: "2px"
190
- }
191
- }
192
- ),
193
- /* @__PURE__ */ jsxs3("span", { style: { fontSize: "0.875rem", fontWeight: 500, minWidth: "3rem" }, children: [
194
- px,
195
- "px"
353
+ /* @__PURE__ */ jsx3("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "--qt-card-padding" })
196
354
  ] }),
197
- /* @__PURE__ */ jsxs3("span", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: [
198
- (px / 16).toFixed(px % 16 === 0 ? 0 : 2),
199
- "rem"
200
- ] })
201
- ] }, px)) })
202
- ] }),
203
- /* @__PURE__ */ jsxs3("section", { children: [
204
- /* @__PURE__ */ jsx3("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Shadows" }),
205
- /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: "2rem", flexWrap: "wrap" }, children: [
206
- /* @__PURE__ */ jsxs3("div", { style: { textAlign: "center" }, children: [
355
+ /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
207
356
  /* @__PURE__ */ jsx3(
208
357
  "div",
209
358
  {
210
359
  style: {
211
- width: "8rem",
212
- height: "5rem",
213
- backgroundColor: "var(--color-card)",
214
- borderRadius: "var(--radius-lg)",
215
- boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
216
- }
360
+ backgroundColor: "var(--color-muted)",
361
+ padding: "var(--qt-input-padding-y) var(--qt-input-padding-x)",
362
+ border: "1px solid var(--color-border)",
363
+ borderRadius: "var(--radius-md)"
364
+ },
365
+ children: "Input padding"
217
366
  }
218
367
  ),
219
- /* @__PURE__ */ jsx3("div", { style: { marginTop: "0.5rem", fontWeight: 500 }, children: "Small" })
368
+ /* @__PURE__ */ jsx3("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "--qt-input-padding-x, --qt-input-padding-y" })
220
369
  ] }),
221
- /* @__PURE__ */ jsxs3("div", { style: { textAlign: "center" }, children: [
370
+ /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
371
+ /* @__PURE__ */ jsx3(
372
+ "div",
373
+ {
374
+ style: {
375
+ backgroundColor: "var(--color-muted)",
376
+ padding: "var(--qt-chat-message-padding)",
377
+ border: "1px solid var(--color-border)",
378
+ borderRadius: "var(--radius-md)"
379
+ },
380
+ children: "Chat message padding"
381
+ }
382
+ ),
383
+ /* @__PURE__ */ jsx3("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "--qt-chat-message-padding" })
384
+ ] })
385
+ ] })
386
+ ] }),
387
+ /* @__PURE__ */ jsxs3("section", { children: [
388
+ /* @__PURE__ */ jsx3("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Layout Dimensions" }),
389
+ /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
390
+ /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
222
391
  /* @__PURE__ */ jsx3(
223
392
  "div",
224
393
  {
225
394
  style: {
226
- width: "8rem",
227
- height: "5rem",
228
- backgroundColor: "var(--color-card)",
229
- borderRadius: "var(--radius-lg)",
230
- boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
231
- }
395
+ backgroundColor: "var(--color-muted)",
396
+ display: "flex",
397
+ alignItems: "center",
398
+ justifyContent: "center",
399
+ height: "var(--qt-navbar-height)",
400
+ width: "200px",
401
+ border: "1px solid var(--color-border)"
402
+ },
403
+ children: "Navbar height"
232
404
  }
233
405
  ),
234
- /* @__PURE__ */ jsx3("div", { style: { marginTop: "0.5rem", fontWeight: 500 }, children: "Medium" })
406
+ /* @__PURE__ */ jsx3("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "--qt-navbar-height" })
235
407
  ] }),
236
- /* @__PURE__ */ jsxs3("div", { style: { textAlign: "center" }, children: [
408
+ /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
237
409
  /* @__PURE__ */ jsx3(
238
410
  "div",
239
411
  {
240
412
  style: {
241
- width: "8rem",
242
- height: "5rem",
243
- backgroundColor: "var(--color-card)",
244
- borderRadius: "var(--radius-lg)",
245
- boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
246
- }
413
+ backgroundColor: "var(--color-muted)",
414
+ display: "flex",
415
+ alignItems: "center",
416
+ justifyContent: "center",
417
+ width: "var(--qt-sidebar-width)",
418
+ height: "100px",
419
+ border: "1px solid var(--color-border)"
420
+ },
421
+ children: "Sidebar width"
247
422
  }
248
423
  ),
249
- /* @__PURE__ */ jsx3("div", { style: { marginTop: "0.5rem", fontWeight: 500 }, children: "Large" })
424
+ /* @__PURE__ */ jsx3("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "--qt-sidebar-width" })
250
425
  ] }),
251
- /* @__PURE__ */ jsxs3("div", { style: { textAlign: "center" }, children: [
426
+ /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
252
427
  /* @__PURE__ */ jsx3(
253
428
  "div",
254
429
  {
255
430
  style: {
256
- width: "8rem",
257
- height: "5rem",
258
- backgroundColor: "var(--color-card)",
259
- borderRadius: "var(--radius-lg)",
260
- boxShadow: "0 25px 50px -12px rgb(0 0 0 / 0.25)"
261
- }
431
+ backgroundColor: "var(--color-muted)",
432
+ display: "flex",
433
+ alignItems: "center",
434
+ justifyContent: "center",
435
+ width: "var(--qt-chat-sidebar-width)",
436
+ height: "100px",
437
+ border: "1px solid var(--color-border)"
438
+ },
439
+ children: "Chat sidebar width"
262
440
  }
263
441
  ),
264
- /* @__PURE__ */ jsx3("div", { style: { marginTop: "0.5rem", fontWeight: 500 }, children: "XL" })
442
+ /* @__PURE__ */ jsx3("code", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "--qt-chat-sidebar-width" })
265
443
  ] })
266
444
  ] })
267
445
  ] })
@@ -364,6 +542,23 @@ var Cards = () => {
364
542
  ] })
365
543
  ] }) }, name)) })
366
544
  ] }),
545
+ /* @__PURE__ */ jsxs5("section", { style: { marginBottom: "2rem" }, children: [
546
+ /* @__PURE__ */ jsx5("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Card Grid" }),
547
+ /* @__PURE__ */ jsxs5("div", { className: "qt-card-grid-3", children: [
548
+ /* @__PURE__ */ jsxs5("div", { className: "qt-card", style: { padding: "1rem" }, children: [
549
+ /* @__PURE__ */ jsx5("h4", { style: { fontWeight: 600, marginBottom: "0.5rem" }, children: "Card 1" }),
550
+ /* @__PURE__ */ jsx5("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: "Grid card content" })
551
+ ] }),
552
+ /* @__PURE__ */ jsxs5("div", { className: "qt-card", style: { padding: "1rem" }, children: [
553
+ /* @__PURE__ */ jsx5("h4", { style: { fontWeight: 600, marginBottom: "0.5rem" }, children: "Card 2" }),
554
+ /* @__PURE__ */ jsx5("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: "Grid card content" })
555
+ ] }),
556
+ /* @__PURE__ */ jsxs5("div", { className: "qt-card", style: { padding: "1rem" }, children: [
557
+ /* @__PURE__ */ jsx5("h4", { style: { fontWeight: 600, marginBottom: "0.5rem" }, children: "Card 3" }),
558
+ /* @__PURE__ */ jsx5("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: "Grid card content" })
559
+ ] })
560
+ ] })
561
+ ] }),
367
562
  /* @__PURE__ */ jsxs5("section", { style: { marginBottom: "2rem" }, children: [
368
563
  /* @__PURE__ */ jsx5("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Panels" }),
369
564
  /* @__PURE__ */ jsxs5("div", { style: { display: "flex", gap: "1rem", flexWrap: "wrap" }, children: [
@@ -389,23 +584,33 @@ var Inputs = () => {
389
584
  /* @__PURE__ */ jsx6("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Text Inputs" }),
390
585
  /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "24rem" }, children: [
391
586
  /* @__PURE__ */ jsxs6("div", { children: [
392
- /* @__PURE__ */ jsx6("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Default" }),
587
+ /* @__PURE__ */ jsx6("label", { className: "qt-label", children: "Default" }),
393
588
  /* @__PURE__ */ jsx6("input", { className: "qt-input", type: "text", placeholder: "Enter text..." })
394
589
  ] }),
395
590
  /* @__PURE__ */ jsxs6("div", { children: [
396
- /* @__PURE__ */ jsx6("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "With Value" }),
591
+ /* @__PURE__ */ jsx6("label", { className: "qt-label", children: "With Hint" }),
592
+ /* @__PURE__ */ jsx6("input", { className: "qt-input", type: "text", placeholder: "Enter email..." }),
593
+ /* @__PURE__ */ jsx6("span", { className: "qt-hint", children: "We'll never share your email." })
594
+ ] }),
595
+ /* @__PURE__ */ jsxs6("div", { children: [
596
+ /* @__PURE__ */ jsx6("label", { className: "qt-label", children: "With Value" }),
397
597
  /* @__PURE__ */ jsx6("input", { className: "qt-input", type: "text", defaultValue: "Sample text" })
398
598
  ] }),
399
599
  /* @__PURE__ */ jsxs6("div", { children: [
400
- /* @__PURE__ */ jsx6("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Disabled" }),
600
+ /* @__PURE__ */ jsx6("label", { className: "qt-label", children: "Disabled" }),
401
601
  /* @__PURE__ */ jsx6("input", { className: "qt-input", type: "text", placeholder: "Disabled input", disabled: true })
602
+ ] }),
603
+ /* @__PURE__ */ jsxs6("div", { children: [
604
+ /* @__PURE__ */ jsx6("label", { className: "qt-label", children: "With Error" }),
605
+ /* @__PURE__ */ jsx6("input", { className: "qt-input qt-input-error", type: "text", placeholder: "Invalid input" }),
606
+ /* @__PURE__ */ jsx6("span", { className: "qt-hint", style: { color: "var(--color-destructive)" }, children: "This field is required." })
402
607
  ] })
403
608
  ] })
404
609
  ] }),
405
610
  /* @__PURE__ */ jsxs6("section", { style: { marginBottom: "2rem" }, children: [
406
611
  /* @__PURE__ */ jsx6("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Textarea" }),
407
612
  /* @__PURE__ */ jsxs6("div", { style: { maxWidth: "24rem" }, children: [
408
- /* @__PURE__ */ jsx6("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Message" }),
613
+ /* @__PURE__ */ jsx6("label", { className: "qt-label", children: "Message" }),
409
614
  /* @__PURE__ */ jsx6(
410
615
  "textarea",
411
616
  {
@@ -419,7 +624,7 @@ var Inputs = () => {
419
624
  /* @__PURE__ */ jsxs6("section", { style: { marginBottom: "2rem" }, children: [
420
625
  /* @__PURE__ */ jsx6("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Select" }),
421
626
  /* @__PURE__ */ jsxs6("div", { style: { maxWidth: "24rem" }, children: [
422
- /* @__PURE__ */ jsx6("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Choose an option" }),
627
+ /* @__PURE__ */ jsx6("label", { className: "qt-label", children: "Choose an option" }),
423
628
  /* @__PURE__ */ jsxs6("select", { className: "qt-input qt-select", children: [
424
629
  /* @__PURE__ */ jsx6("option", { value: "", children: "Select an option..." }),
425
630
  /* @__PURE__ */ jsx6("option", { value: "1", children: "Option 1" }),
@@ -428,6 +633,38 @@ var Inputs = () => {
428
633
  ] })
429
634
  ] })
430
635
  ] }),
636
+ /* @__PURE__ */ jsxs6("section", { style: { marginBottom: "2rem" }, children: [
637
+ /* @__PURE__ */ jsx6("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Checkboxes & Radios" }),
638
+ /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem", maxWidth: "24rem" }, children: [
639
+ /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
640
+ /* @__PURE__ */ jsx6("input", { type: "checkbox", id: "check1", className: "qt-checkbox" }),
641
+ /* @__PURE__ */ jsx6("label", { htmlFor: "check1", style: { margin: 0 }, children: "Checkbox option" })
642
+ ] }),
643
+ /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
644
+ /* @__PURE__ */ jsx6("input", { type: "checkbox", id: "check2", className: "qt-checkbox", defaultChecked: true }),
645
+ /* @__PURE__ */ jsx6("label", { htmlFor: "check2", style: { margin: 0 }, children: "Checked checkbox" })
646
+ ] }),
647
+ /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
648
+ /* @__PURE__ */ jsx6("input", { type: "checkbox", id: "check3", className: "qt-checkbox", disabled: true }),
649
+ /* @__PURE__ */ jsx6("label", { htmlFor: "check3", style: { margin: 0, color: "var(--color-muted-foreground)" }, children: "Disabled checkbox" })
650
+ ] }),
651
+ /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", marginTop: "0.5rem" }, children: [
652
+ /* @__PURE__ */ jsx6("input", { type: "radio", name: "radio", id: "radio1", className: "qt-radio" }),
653
+ /* @__PURE__ */ jsx6("label", { htmlFor: "radio1", style: { margin: 0 }, children: "Radio option 1" })
654
+ ] }),
655
+ /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
656
+ /* @__PURE__ */ jsx6("input", { type: "radio", name: "radio", id: "radio2", className: "qt-radio", defaultChecked: true }),
657
+ /* @__PURE__ */ jsx6("label", { htmlFor: "radio2", style: { margin: 0 }, children: "Radio option 2" })
658
+ ] })
659
+ ] })
660
+ ] }),
661
+ /* @__PURE__ */ jsxs6("section", { style: { marginBottom: "2rem" }, children: [
662
+ /* @__PURE__ */ jsx6("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Links" }),
663
+ /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
664
+ /* @__PURE__ */ jsx6("div", { children: /* @__PURE__ */ jsx6("a", { href: "#", className: "qt-link", children: "Default link" }) }),
665
+ /* @__PURE__ */ jsx6("div", { children: /* @__PURE__ */ jsx6("a", { href: "#", className: "qt-link-subtle", children: "Subtle link" }) })
666
+ ] })
667
+ ] }),
431
668
  /* @__PURE__ */ jsxs6("section", { children: [
432
669
  /* @__PURE__ */ jsx6("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Form Example" }),
433
670
  /* @__PURE__ */ jsxs6("div", { className: "qt-card", style: { maxWidth: "24rem" }, children: [
@@ -437,15 +674,15 @@ var Inputs = () => {
437
674
  ] }),
438
675
  /* @__PURE__ */ jsxs6("div", { className: "qt-card-body", style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
439
676
  /* @__PURE__ */ jsxs6("div", { children: [
440
- /* @__PURE__ */ jsx6("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Name" }),
677
+ /* @__PURE__ */ jsx6("label", { className: "qt-label", children: "Name" }),
441
678
  /* @__PURE__ */ jsx6("input", { className: "qt-input", type: "text", placeholder: "Your name" })
442
679
  ] }),
443
680
  /* @__PURE__ */ jsxs6("div", { children: [
444
- /* @__PURE__ */ jsx6("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Email" }),
681
+ /* @__PURE__ */ jsx6("label", { className: "qt-label", children: "Email" }),
445
682
  /* @__PURE__ */ jsx6("input", { className: "qt-input", type: "email", placeholder: "you@example.com" })
446
683
  ] }),
447
684
  /* @__PURE__ */ jsxs6("div", { children: [
448
- /* @__PURE__ */ jsx6("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Message" }),
685
+ /* @__PURE__ */ jsx6("label", { className: "qt-label", children: "Message" }),
449
686
  /* @__PURE__ */ jsx6("textarea", { className: "qt-input qt-textarea", placeholder: "Your message...", style: { minHeight: "5rem" } })
450
687
  ] })
451
688
  ] }),
@@ -511,6 +748,64 @@ var Badges = () => {
511
748
  ] })
512
749
  ] })
513
750
  ] }),
751
+ /* @__PURE__ */ jsxs7("section", { style: { marginBottom: "2rem" }, children: [
752
+ /* @__PURE__ */ jsx7("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Entity Type Badges" }),
753
+ /* @__PURE__ */ jsxs7("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.75rem", alignItems: "center" }, children: [
754
+ /* @__PURE__ */ jsx7("span", { className: "qt-badge qt-badge-character", children: "Character" }),
755
+ /* @__PURE__ */ jsx7("span", { className: "qt-badge qt-badge-persona", children: "Persona" }),
756
+ /* @__PURE__ */ jsx7("span", { className: "qt-badge qt-badge-chat", children: "Chat" }),
757
+ /* @__PURE__ */ jsx7("span", { className: "qt-badge qt-badge-tag", children: "Tag" }),
758
+ /* @__PURE__ */ jsx7("span", { className: "qt-badge qt-badge-memory", children: "Memory" })
759
+ ] })
760
+ ] }),
761
+ /* @__PURE__ */ jsxs7("section", { style: { marginBottom: "2rem" }, children: [
762
+ /* @__PURE__ */ jsx7("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "State Badges" }),
763
+ /* @__PURE__ */ jsxs7("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.75rem", alignItems: "center" }, children: [
764
+ /* @__PURE__ */ jsx7("span", { className: "qt-badge qt-badge-enabled", children: "Enabled" }),
765
+ /* @__PURE__ */ jsx7("span", { className: "qt-badge qt-badge-disabled", children: "Disabled" }),
766
+ /* @__PURE__ */ jsx7("span", { className: "qt-badge qt-badge-related", children: "Related" }),
767
+ /* @__PURE__ */ jsx7("span", { className: "qt-badge qt-badge-manual", children: "Manual" }),
768
+ /* @__PURE__ */ jsx7("span", { className: "qt-badge qt-badge-auto", children: "Auto" })
769
+ ] })
770
+ ] }),
771
+ /* @__PURE__ */ jsxs7("section", { style: { marginBottom: "2rem" }, children: [
772
+ /* @__PURE__ */ jsx7("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Plugin Source Badges" }),
773
+ /* @__PURE__ */ jsxs7("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.75rem", alignItems: "center" }, children: [
774
+ /* @__PURE__ */ jsx7("span", { className: "qt-badge qt-badge-source-included", children: "Included" }),
775
+ /* @__PURE__ */ jsx7("span", { className: "qt-badge qt-badge-source-npm", children: "NPM" }),
776
+ /* @__PURE__ */ jsx7("span", { className: "qt-badge qt-badge-source-git", children: "Git" }),
777
+ /* @__PURE__ */ jsx7("span", { className: "qt-badge qt-badge-source-manual", children: "Manual" })
778
+ ] })
779
+ ] }),
780
+ /* @__PURE__ */ jsxs7("section", { style: { marginBottom: "2rem" }, children: [
781
+ /* @__PURE__ */ jsx7("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Tag Badges" }),
782
+ /* @__PURE__ */ jsxs7("div", { style: { marginBottom: "1.5rem" }, children: [
783
+ /* @__PURE__ */ jsx7("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "0.75rem", fontSize: "0.875rem" }, children: "Basic tags" }),
784
+ /* @__PURE__ */ jsxs7("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.75rem", alignItems: "center" }, children: [
785
+ /* @__PURE__ */ jsx7("span", { className: "qt-tag-badge", children: "Fantasy" }),
786
+ /* @__PURE__ */ jsx7("span", { className: "qt-tag-badge", children: "Sci-Fi" }),
787
+ /* @__PURE__ */ jsx7("span", { className: "qt-tag-badge", children: "Romance" })
788
+ ] })
789
+ ] }),
790
+ /* @__PURE__ */ jsxs7("div", { style: { marginBottom: "1.5rem" }, children: [
791
+ /* @__PURE__ */ jsx7("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "0.75rem", fontSize: "0.875rem" }, children: "Emoji tag" }),
792
+ /* @__PURE__ */ jsx7("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.75rem", alignItems: "center" }, children: /* @__PURE__ */ jsx7("span", { className: "qt-tag-badge qt-tag-badge-emoji", children: "Adventure" }) })
793
+ ] }),
794
+ /* @__PURE__ */ jsxs7("div", { style: { marginBottom: "1.5rem" }, children: [
795
+ /* @__PURE__ */ jsx7("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "0.75rem", fontSize: "0.875rem" }, children: "Removable tag" }),
796
+ /* @__PURE__ */ jsx7("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.75rem", alignItems: "center" }, children: /* @__PURE__ */ jsxs7("span", { className: "qt-tag-badge", children: [
797
+ "Fantasy",
798
+ /* @__PURE__ */ jsx7("button", { className: "qt-tag-badge-remove", children: "\xD7" })
799
+ ] }) })
800
+ ] }),
801
+ /* @__PURE__ */ jsxs7("div", { children: [
802
+ /* @__PURE__ */ jsx7("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "0.75rem", fontSize: "0.875rem" }, children: "Small tags in card context" }),
803
+ /* @__PURE__ */ jsx7("div", { className: "qt-card", style: { maxWidth: "24rem" }, children: /* @__PURE__ */ jsx7("div", { className: "qt-card-body", children: /* @__PURE__ */ jsxs7("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: [
804
+ /* @__PURE__ */ jsx7("span", { className: "qt-tag-badge qt-tag-badge-sm", children: "Fantasy" }),
805
+ /* @__PURE__ */ jsx7("span", { className: "qt-tag-badge qt-tag-badge-sm", children: "Sci-Fi" })
806
+ ] }) }) })
807
+ ] })
808
+ ] }),
514
809
  /* @__PURE__ */ jsxs7("section", { children: [
515
810
  /* @__PURE__ */ jsx7("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Usage Examples" }),
516
811
  /* @__PURE__ */ jsxs7("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
@@ -631,17 +926,19 @@ var Dialogs = () => {
631
926
  basicOpen && /* @__PURE__ */ jsx9("div", { className: "qt-dialog-overlay", onClick: () => setBasicOpen(false), children: /* @__PURE__ */ jsxs9("div", { className: "qt-dialog", onClick: (e) => e.stopPropagation(), children: [
632
927
  /* @__PURE__ */ jsxs9("div", { className: "qt-dialog-header", children: [
633
928
  /* @__PURE__ */ jsx9("h3", { className: "qt-dialog-title", children: "Basic Dialog" }),
929
+ /* @__PURE__ */ jsx9("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." }),
634
930
  /* @__PURE__ */ jsx9("button", { className: "qt-button-icon", onClick: () => setBasicOpen(false), "aria-label": "Close", children: /* @__PURE__ */ jsx9("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
635
931
  ] }),
636
- /* @__PURE__ */ jsx9("div", { className: "qt-dialog-body", children: /* @__PURE__ */ jsx9("p", { children: "This is a basic dialog with some content. Dialogs are used to show important information or gather user input." }) }),
932
+ /* @__PURE__ */ jsx9("div", { className: "qt-dialog-body", children: /* @__PURE__ */ jsx9("p", { children: "Dialog content area with additional details and information." }) }),
637
933
  /* @__PURE__ */ jsx9("div", { className: "qt-dialog-footer", children: /* @__PURE__ */ jsx9("button", { className: "qt-button qt-button-primary", onClick: () => setBasicOpen(false), children: "Got it" }) })
638
934
  ] }) }),
639
935
  confirmOpen && /* @__PURE__ */ jsx9("div", { className: "qt-dialog-overlay", onClick: () => setConfirmOpen(false), children: /* @__PURE__ */ jsxs9("div", { className: "qt-dialog", onClick: (e) => e.stopPropagation(), children: [
640
936
  /* @__PURE__ */ jsxs9("div", { className: "qt-dialog-header", children: [
641
937
  /* @__PURE__ */ jsx9("h3", { className: "qt-dialog-title", children: "Delete Item?" }),
938
+ /* @__PURE__ */ jsx9("p", { className: "qt-dialog-description", children: "Are you sure you want to delete this item? This action cannot be undone." }),
642
939
  /* @__PURE__ */ jsx9("button", { className: "qt-button-icon", onClick: () => setConfirmOpen(false), "aria-label": "Close", children: /* @__PURE__ */ jsx9("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
643
940
  ] }),
644
- /* @__PURE__ */ jsx9("div", { className: "qt-dialog-body", children: /* @__PURE__ */ jsx9("p", { children: "Are you sure you want to delete this item? This action cannot be undone." }) }),
941
+ /* @__PURE__ */ jsx9("div", { className: "qt-dialog-body", children: /* @__PURE__ */ jsx9("p", { children: "This will remove the item from your collection permanently." }) }),
645
942
  /* @__PURE__ */ jsxs9("div", { className: "qt-dialog-footer", children: [
646
943
  /* @__PURE__ */ jsx9("button", { className: "qt-button qt-button-ghost", onClick: () => setConfirmOpen(false), children: "Cancel" }),
647
944
  /* @__PURE__ */ jsx9("button", { className: "qt-button qt-button-destructive", onClick: () => setConfirmOpen(false), children: "Delete" })
@@ -650,6 +947,7 @@ var Dialogs = () => {
650
947
  formOpen && /* @__PURE__ */ jsx9("div", { className: "qt-dialog-overlay", onClick: () => setFormOpen(false), children: /* @__PURE__ */ jsxs9("div", { className: "qt-dialog", onClick: (e) => e.stopPropagation(), style: { maxWidth: "28rem" }, children: [
651
948
  /* @__PURE__ */ jsxs9("div", { className: "qt-dialog-header", children: [
652
949
  /* @__PURE__ */ jsx9("h3", { className: "qt-dialog-title", children: "Create New Item" }),
950
+ /* @__PURE__ */ jsx9("p", { className: "qt-dialog-description", children: "Fill in the details below to create a new item." }),
653
951
  /* @__PURE__ */ jsx9("button", { className: "qt-button-icon", onClick: () => setFormOpen(false), "aria-label": "Close", children: /* @__PURE__ */ jsx9("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
654
952
  ] }),
655
953
  /* @__PURE__ */ jsx9("div", { className: "qt-dialog-body", children: /* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
@@ -681,6 +979,7 @@ var Dialogs = () => {
681
979
  /* @__PURE__ */ jsx9("div", { style: { backgroundColor: "var(--color-muted)", padding: "2rem", borderRadius: "var(--radius-lg)" }, children: /* @__PURE__ */ jsxs9("div", { className: "qt-dialog", style: { position: "relative", transform: "none", margin: "0 auto" }, children: [
682
980
  /* @__PURE__ */ jsxs9("div", { className: "qt-dialog-header", children: [
683
981
  /* @__PURE__ */ jsx9("h3", { className: "qt-dialog-title", children: "Dialog Title" }),
982
+ /* @__PURE__ */ jsx9("p", { className: "qt-dialog-description", children: "This is a dialog with a title and description." }),
684
983
  /* @__PURE__ */ jsx9("button", { className: "qt-button-icon", "aria-label": "Close", children: /* @__PURE__ */ jsx9("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
685
984
  ] }),
686
985
  /* @__PURE__ */ jsx9("div", { className: "qt-dialog-body", children: /* @__PURE__ */ jsx9("p", { children: "Dialog content area. This can contain text, forms, or any other content." }) }),
@@ -708,6 +1007,32 @@ var Dialogs = () => {
708
1007
  ] }) })
709
1008
  ] })
710
1009
  ] })
1010
+ ] }),
1011
+ /* @__PURE__ */ jsxs9("section", { style: { marginBottom: "2rem" }, children: [
1012
+ /* @__PURE__ */ jsx9("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Popover" }),
1013
+ /* @__PURE__ */ jsxs9("div", { style: { position: "relative", display: "inline-block", marginTop: "2rem" }, children: [
1014
+ /* @__PURE__ */ jsx9("button", { className: "qt-button qt-button-secondary", children: "Hover for popover" }),
1015
+ /* @__PURE__ */ jsx9("div", { className: "qt-popover", style: { position: "absolute", left: 0, top: "100%", marginTop: "0.5rem", display: "block" }, children: /* @__PURE__ */ jsxs9("div", { style: { padding: "0.75rem" }, children: [
1016
+ /* @__PURE__ */ jsx9("p", { style: { fontWeight: 600, marginBottom: "0.25rem" }, children: "Popover Title" }),
1017
+ /* @__PURE__ */ jsx9("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: "This is popover content that provides additional context." })
1018
+ ] }) })
1019
+ ] })
1020
+ ] }),
1021
+ /* @__PURE__ */ jsxs9("section", { style: { marginBottom: "2rem" }, children: [
1022
+ /* @__PURE__ */ jsx9("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Dropdown Menu" }),
1023
+ /* @__PURE__ */ jsxs9("div", { className: "qt-dropdown", style: { display: "inline-block", position: "relative" }, children: [
1024
+ /* @__PURE__ */ jsx9("div", { className: "qt-dropdown-item", children: "Profile" }),
1025
+ /* @__PURE__ */ jsx9("div", { className: "qt-dropdown-item", children: "Settings" }),
1026
+ /* @__PURE__ */ jsx9("div", { className: "qt-dropdown-separator" }),
1027
+ /* @__PURE__ */ jsx9("div", { className: "qt-dropdown-item", style: { color: "var(--color-destructive)" }, children: "Sign Out" })
1028
+ ] })
1029
+ ] }),
1030
+ /* @__PURE__ */ jsxs9("section", { children: [
1031
+ /* @__PURE__ */ jsx9("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Tooltip" }),
1032
+ /* @__PURE__ */ jsx9("div", { style: { display: "flex", alignItems: "center", gap: "2rem" }, children: /* @__PURE__ */ jsxs9("div", { style: { position: "relative", display: "inline-block", marginTop: "2rem" }, children: [
1033
+ /* @__PURE__ */ jsx9("button", { className: "qt-button qt-button-secondary", children: "Hover me" }),
1034
+ /* @__PURE__ */ jsx9("div", { className: "qt-tooltip", style: { position: "absolute", left: "50%", transform: "translateX(-50%)", bottom: "100%", marginBottom: "0.5rem", display: "block" }, children: "Helpful tooltip text" })
1035
+ ] }) })
711
1036
  ] })
712
1037
  ] });
713
1038
  };
@@ -811,24 +1136,50 @@ var Chat = () => {
811
1136
  /* @__PURE__ */ jsxs11("section", { style: { marginBottom: "2rem" }, children: [
812
1137
  /* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Message Bubbles" }),
813
1138
  /* @__PURE__ */ jsxs11("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
814
- /* @__PURE__ */ jsx11("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx11("div", { className: "qt-chat-message qt-chat-message-user", children: /* @__PURE__ */ jsx11("p", { children: "Hello! How are you today?" }) }) }),
1139
+ /* @__PURE__ */ jsx11("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsxs11("div", { className: "qt-chat-message qt-chat-message-user", children: [
1140
+ /* @__PURE__ */ jsxs11("div", { className: "qt-chat-message-header", children: [
1141
+ /* @__PURE__ */ jsx11("span", { className: "qt-chat-message-author", children: "You" }),
1142
+ /* @__PURE__ */ jsx11("span", { className: "qt-chat-message-time", children: "2:30 PM" })
1143
+ ] }),
1144
+ /* @__PURE__ */ jsx11("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ jsx11("p", { children: "Hello! How are you today?" }) })
1145
+ ] }) }),
815
1146
  /* @__PURE__ */ jsxs11("div", { style: { display: "flex", gap: "0.5rem" }, children: [
816
1147
  /* @__PURE__ */ jsx11("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx11("div", { className: "qt-avatar-fallback", children: "AI" }) }),
817
- /* @__PURE__ */ jsx11("div", { className: "qt-chat-message qt-chat-message-assistant", children: /* @__PURE__ */ jsx11("p", { children: "Hello! I'm doing well, thank you for asking. How can I help you today?" }) })
1148
+ /* @__PURE__ */ jsxs11("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
1149
+ /* @__PURE__ */ jsxs11("div", { className: "qt-chat-message-header", children: [
1150
+ /* @__PURE__ */ jsx11("span", { className: "qt-chat-message-author", children: "Assistant" }),
1151
+ /* @__PURE__ */ jsx11("span", { className: "qt-chat-message-time", children: "2:30 PM" })
1152
+ ] }),
1153
+ /* @__PURE__ */ jsx11("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ jsx11("p", { children: "Hello! I'm doing well, thank you for asking. How can I help you today?" }) })
1154
+ ] })
818
1155
  ] }),
819
1156
  /* @__PURE__ */ jsxs11("div", { style: { display: "flex", gap: "0.5rem" }, children: [
820
1157
  /* @__PURE__ */ jsx11("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx11("div", { className: "qt-avatar-fallback", children: "AI" }) }),
821
1158
  /* @__PURE__ */ jsxs11("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
822
- /* @__PURE__ */ jsx11("p", { children: "Here's some information you might find helpful:" }),
823
- /* @__PURE__ */ jsxs11("ul", { style: { marginTop: "0.5rem", paddingLeft: "1.25rem" }, children: [
824
- /* @__PURE__ */ jsx11("li", { children: "First point of interest" }),
825
- /* @__PURE__ */ jsx11("li", { children: "Second important detail" }),
826
- /* @__PURE__ */ jsx11("li", { children: "Third relevant fact" })
1159
+ /* @__PURE__ */ jsxs11("div", { className: "qt-chat-message-header", children: [
1160
+ /* @__PURE__ */ jsx11("span", { className: "qt-chat-message-author", children: "Assistant" }),
1161
+ /* @__PURE__ */ jsx11("span", { className: "qt-chat-message-time", children: "2:31 PM" })
1162
+ ] }),
1163
+ /* @__PURE__ */ jsxs11("div", { className: "qt-chat-message-content", children: [
1164
+ /* @__PURE__ */ jsx11("p", { children: "Here's some information you might find helpful:" }),
1165
+ /* @__PURE__ */ jsxs11("ul", { style: { marginTop: "0.5rem", paddingLeft: "1.25rem" }, children: [
1166
+ /* @__PURE__ */ jsx11("li", { children: "First point of interest" }),
1167
+ /* @__PURE__ */ jsx11("li", { children: "Second important detail" }),
1168
+ /* @__PURE__ */ jsx11("li", { children: "Third relevant fact" })
1169
+ ] }),
1170
+ /* @__PURE__ */ jsx11("p", { style: { marginTop: "0.5rem" }, children: "Let me know if you'd like more details about any of these!" })
827
1171
  ] }),
828
- /* @__PURE__ */ jsx11("p", { style: { marginTop: "0.5rem" }, children: "Let me know if you'd like more details about any of these!" })
1172
+ /* @__PURE__ */ jsxs11("div", { className: "qt-chat-message-actions", children: [
1173
+ /* @__PURE__ */ jsx11("button", { className: "qt-button-icon", title: "Edit", children: /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("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" }) }) }),
1174
+ /* @__PURE__ */ jsx11("button", { className: "qt-button-icon", title: "Copy", children: /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("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" }) }) })
1175
+ ] })
829
1176
  ] })
830
1177
  ] }),
831
- /* @__PURE__ */ jsx11("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx11("div", { className: "qt-chat-message qt-chat-message-user", children: /* @__PURE__ */ jsx11("p", { children: "That's exactly what I needed, thanks!" }) }) })
1178
+ /* @__PURE__ */ jsx11("div", { className: "qt-chat-message qt-chat-message-system", children: /* @__PURE__ */ jsx11("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ jsx11("p", { children: "Alice has joined the conversation." }) }) }),
1179
+ /* @__PURE__ */ jsx11("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsxs11("div", { className: "qt-chat-message qt-chat-message-user", children: [
1180
+ /* @__PURE__ */ jsx11("div", { className: "qt-chat-message-header", children: /* @__PURE__ */ jsx11("span", { className: "qt-chat-message-author", children: "You" }) }),
1181
+ /* @__PURE__ */ jsx11("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ jsx11("p", { children: "That's exactly what I needed, thanks!" }) })
1182
+ ] }) })
832
1183
  ] })
833
1184
  ] }),
834
1185
  /* @__PURE__ */ jsxs11("section", { style: { marginBottom: "2rem" }, children: [
@@ -851,6 +1202,115 @@ var Chat = () => {
851
1202
  ] })
852
1203
  ] })
853
1204
  ] }),
1205
+ /* @__PURE__ */ jsxs11("section", { style: { marginBottom: "2rem" }, children: [
1206
+ /* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Roleplay Annotations" }),
1207
+ /* @__PURE__ */ jsx11("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." }),
1208
+ /* @__PURE__ */ jsxs11("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
1209
+ /* @__PURE__ */ jsxs11("div", { style: { display: "flex", gap: "0.5rem" }, children: [
1210
+ /* @__PURE__ */ jsx11("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx11("div", { className: "qt-avatar-fallback", children: "A" }) }),
1211
+ /* @__PURE__ */ jsxs11("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
1212
+ /* @__PURE__ */ jsx11("div", { className: "qt-chat-message-header", children: /* @__PURE__ */ jsx11("span", { className: "qt-chat-message-author", children: "Alice" }) }),
1213
+ /* @__PURE__ */ jsx11("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ jsxs11("p", { children: [
1214
+ '"Hello there!" ',
1215
+ /* @__PURE__ */ jsx11("span", { className: "qt-chat-narration", children: "she said with a warm smile, stepping forward to greet you." })
1216
+ ] }) })
1217
+ ] })
1218
+ ] }),
1219
+ /* @__PURE__ */ jsxs11("div", { style: { display: "flex", gap: "0.5rem" }, children: [
1220
+ /* @__PURE__ */ jsx11("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx11("div", { className: "qt-avatar-fallback", children: "A" }) }),
1221
+ /* @__PURE__ */ jsxs11("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
1222
+ /* @__PURE__ */ jsx11("div", { className: "qt-chat-message-header", children: /* @__PURE__ */ jsx11("span", { className: "qt-chat-message-author", children: "Alice" }) }),
1223
+ /* @__PURE__ */ jsx11("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ jsxs11("p", { children: [
1224
+ /* @__PURE__ */ jsx11("span", { className: "qt-chat-narration", children: "She paused for a moment, considering her words carefully." }),
1225
+ " ",
1226
+ /* @__PURE__ */ jsx11("span", { className: "qt-chat-inner-monologue", children: "I wonder if they noticed..." })
1227
+ ] }) })
1228
+ ] })
1229
+ ] }),
1230
+ /* @__PURE__ */ jsxs11("div", { style: { display: "flex", gap: "0.5rem" }, children: [
1231
+ /* @__PURE__ */ jsx11("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx11("div", { className: "qt-avatar-fallback", children: "A" }) }),
1232
+ /* @__PURE__ */ jsxs11("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
1233
+ /* @__PURE__ */ jsx11("div", { className: "qt-chat-message-header", children: /* @__PURE__ */ jsx11("span", { className: "qt-chat-message-author", children: "Alice" }) }),
1234
+ /* @__PURE__ */ jsx11("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ jsx11("p", { children: /* @__PURE__ */ jsx11("span", { className: "qt-chat-ooc", children: "((OOC: Should we continue the scene or take a break?))" }) }) })
1235
+ ] })
1236
+ ] })
1237
+ ] })
1238
+ ] }),
1239
+ /* @__PURE__ */ jsxs11("section", { style: { marginBottom: "2rem" }, children: [
1240
+ /* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Whisper Messages" }),
1241
+ /* @__PURE__ */ jsx11("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Private messages visible only to sender and recipient. Overheard whispers have a faded style." }),
1242
+ /* @__PURE__ */ jsxs11("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
1243
+ /* @__PURE__ */ jsx11("div", { className: "qt-chat-message-row qt-chat-message-row-assistant", style: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsxs11("div", { className: "qt-chat-message-body qt-chat-message-assistant qt-chat-message-whisper", children: [
1244
+ /* @__PURE__ */ jsx11("div", { className: "qt-chat-whisper-label", children: "whispered to Elena" }),
1245
+ /* @__PURE__ */ jsx11("p", { children: "I don't trust the merchant. Meet me at the tavern tonight\u2014alone." })
1246
+ ] }) }),
1247
+ /* @__PURE__ */ jsx11("div", { className: "qt-chat-message-row qt-chat-message-row-assistant", style: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsxs11("div", { className: "qt-chat-message-body qt-chat-message-assistant qt-chat-message-whisper qt-chat-message-whisper-overheard", children: [
1248
+ /* @__PURE__ */ jsx11("div", { className: "qt-chat-whisper-label", children: "whispered to Marcus" }),
1249
+ /* @__PURE__ */ jsx11("p", { children: "Keep an eye on the door. We may need a quick exit." })
1250
+ ] }) })
1251
+ ] })
1252
+ ] }),
1253
+ /* @__PURE__ */ jsxs11("section", { style: { marginBottom: "2rem" }, children: [
1254
+ /* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Toolbar" }),
1255
+ /* @__PURE__ */ jsx11("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Formatting and action buttons for chat composition." }),
1256
+ /* @__PURE__ */ jsxs11("div", { className: "qt-chat-toolbar", style: { maxWidth: "32rem", display: "flex", gap: "0.5rem", flexWrap: "wrap" }, children: [
1257
+ /* @__PURE__ */ jsx11("button", { className: "qt-chat-toolbar-button", title: "Bold", children: /* @__PURE__ */ jsx11("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 4h8a4 4 0 014 4v2M6 4v16M6 4h8a2 2 0 012 2v2M6 12h12" }) }) }),
1258
+ /* @__PURE__ */ jsx11("button", { className: "qt-chat-toolbar-button", title: "Italic", children: /* @__PURE__ */ jsx11("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 5h4m-4 14h4M9 5h6M9 19H3" }) }) }),
1259
+ /* @__PURE__ */ jsx11("button", { className: "qt-chat-toolbar-button", title: "Underline", children: /* @__PURE__ */ jsx11("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 5v10a4 4 0 008 0V5m0 14H7" }) }) }),
1260
+ /* @__PURE__ */ jsx11("div", { style: { flex: 1 } }),
1261
+ /* @__PURE__ */ jsx11("button", { className: "qt-chat-toolbar-button", title: "Settings", children: /* @__PURE__ */ jsxs11("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
1262
+ /* @__PURE__ */ jsx11("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" }),
1263
+ /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })
1264
+ ] }) })
1265
+ ] })
1266
+ ] }),
1267
+ /* @__PURE__ */ jsxs11("section", { style: { marginBottom: "2rem" }, children: [
1268
+ /* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "RP Annotation Buttons" }),
1269
+ /* @__PURE__ */ jsx11("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Quick-insert buttons for roleplay annotation types." }),
1270
+ /* @__PURE__ */ jsxs11("div", { className: "qt-rp-annotation-toolbar", style: { maxWidth: "32rem", display: "flex", gap: "0.5rem", flexWrap: "wrap" }, children: [
1271
+ /* @__PURE__ */ jsxs11("button", { className: "qt-rp-annotation-button-narration", title: "Narration", children: [
1272
+ /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h7" }) }),
1273
+ "Narration"
1274
+ ] }),
1275
+ /* @__PURE__ */ jsxs11("button", { className: "qt-rp-annotation-button-internal", title: "Inner Monologue", children: [
1276
+ /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("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" }) }),
1277
+ "Internal"
1278
+ ] }),
1279
+ /* @__PURE__ */ jsxs11("button", { className: "qt-rp-annotation-button-ooc", title: "Out of Character", children: [
1280
+ /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("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" }) }),
1281
+ "OOC"
1282
+ ] })
1283
+ ] })
1284
+ ] }),
1285
+ /* @__PURE__ */ jsxs11("section", { style: { marginBottom: "2rem" }, children: [
1286
+ /* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Attachments" }),
1287
+ /* @__PURE__ */ jsx11("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "File attachment chips and attachment button." }),
1288
+ /* @__PURE__ */ jsxs11("div", { className: "qt-chat-composer", style: { maxWidth: "32rem" }, children: [
1289
+ /* @__PURE__ */ jsxs11("div", { className: "qt-chat-attachment-list", style: { display: "flex", gap: "0.5rem", marginBottom: "0.75rem", flexWrap: "wrap" }, children: [
1290
+ /* @__PURE__ */ jsxs11("div", { className: "qt-chat-attachment-chip", children: [
1291
+ /* @__PURE__ */ jsx11("span", { children: "document.pdf" }),
1292
+ /* @__PURE__ */ jsx11("button", { className: "ml-2 text-gray-400 hover:text-gray-600", style: { marginLeft: "0.5rem" }, children: "\xD7" })
1293
+ ] }),
1294
+ /* @__PURE__ */ jsxs11("div", { className: "qt-chat-attachment-chip", children: [
1295
+ /* @__PURE__ */ jsx11("span", { children: "image.png" }),
1296
+ /* @__PURE__ */ jsx11("button", { className: "ml-2 text-gray-400 hover:text-gray-600", style: { marginLeft: "0.5rem" }, children: "\xD7" })
1297
+ ] })
1298
+ ] }),
1299
+ /* @__PURE__ */ jsx11(
1300
+ "textarea",
1301
+ {
1302
+ className: "qt-chat-composer-input",
1303
+ placeholder: "Add a message about your files...",
1304
+ rows: 1,
1305
+ style: { width: "100%", padding: "0.5rem", marginBottom: "0.5rem" }
1306
+ }
1307
+ ),
1308
+ /* @__PURE__ */ jsxs11("div", { className: "qt-chat-composer-actions", style: { display: "flex", gap: "0.5rem" }, children: [
1309
+ /* @__PURE__ */ jsx11("button", { className: "qt-chat-attachment-button", children: /* @__PURE__ */ jsx11("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) }) }),
1310
+ /* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-primary", children: "Send" })
1311
+ ] })
1312
+ ] })
1313
+ ] }),
854
1314
  /* @__PURE__ */ jsxs11("section", { style: { marginBottom: "2rem" }, children: [
855
1315
  /* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Input" }),
856
1316
  /* @__PURE__ */ jsx11("div", { className: "qt-chat-composer", style: { maxWidth: "32rem" }, children: /* @__PURE__ */ jsxs11("div", { className: "qt-chat-composer-inner", style: { display: "flex", alignItems: "flex-end", gap: "0.5rem", flex: 1 }, children: [
@@ -863,7 +1323,7 @@ var Chat = () => {
863
1323
  rows: 1
864
1324
  }
865
1325
  ),
866
- /* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-primary qt-button-sm", children: /* @__PURE__ */ jsx11("svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 19l9 2-9-18-9 18 9-2zm0 0v-8" }) }) })
1326
+ /* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-primary qt-chat-composer-send", style: { height: "auto", padding: "0.5rem 1rem" }, children: /* @__PURE__ */ jsx11("svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 19l9 2-9-18-9 18 9-2zm0 0v-8" }) }) })
867
1327
  ] }) })
868
1328
  ] }),
869
1329
  /* @__PURE__ */ jsxs11("section", { style: { marginBottom: "2rem" }, children: [
@@ -877,6 +1337,26 @@ var Chat = () => {
877
1337
  ] }) })
878
1338
  ] })
879
1339
  ] }),
1340
+ /* @__PURE__ */ jsxs11("section", { style: { marginBottom: "2rem" }, children: [
1341
+ /* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Control Buttons" }),
1342
+ /* @__PURE__ */ jsx11("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Continue and stop buttons for controlling AI response generation." }),
1343
+ /* @__PURE__ */ jsxs11("div", { style: { display: "flex", gap: "1rem", maxWidth: "32rem" }, children: [
1344
+ /* @__PURE__ */ jsxs11("button", { className: "qt-chat-continue-button", children: [
1345
+ /* @__PURE__ */ jsxs11("svg", { className: "w-4 h-4 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
1346
+ /* @__PURE__ */ jsx11("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" }),
1347
+ /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z" })
1348
+ ] }),
1349
+ "Continue"
1350
+ ] }),
1351
+ /* @__PURE__ */ jsxs11("button", { className: "qt-chat-stop-button", children: [
1352
+ /* @__PURE__ */ jsxs11("svg", { className: "w-4 h-4 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
1353
+ /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }),
1354
+ /* @__PURE__ */ jsx11("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" })
1355
+ ] }),
1356
+ "Stop"
1357
+ ] })
1358
+ ] })
1359
+ ] }),
880
1360
  /* @__PURE__ */ jsxs11("section", { children: [
881
1361
  /* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Full Chat Layout" }),
882
1362
  /* @__PURE__ */ jsxs11("div", { className: "qt-chat-layout", style: { height: "24rem", border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)", display: "flex", flexDirection: "column" }, children: [
@@ -1189,6 +1669,230 @@ var ThemeComparison = () => {
1189
1669
  ] });
1190
1670
  };
1191
1671
 
1672
+ // src/stories/components/EmptyState.tsx
1673
+ import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
1674
+ var EmptyState = () => {
1675
+ return /* @__PURE__ */ jsxs14("div", { style: { padding: "1.5rem" }, children: [
1676
+ /* @__PURE__ */ jsx14("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Empty States" }),
1677
+ /* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
1678
+ /* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Basic Empty State" }),
1679
+ /* @__PURE__ */ jsxs14("div", { className: "qt-empty-state", children: [
1680
+ /* @__PURE__ */ jsx14("div", { className: "qt-empty-state-icon", children: /* @__PURE__ */ jsx14("svg", { className: "w-12 h-12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14("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" }) }) }),
1681
+ /* @__PURE__ */ jsx14("h4", { className: "qt-empty-state-title", children: "No messages yet" }),
1682
+ /* @__PURE__ */ jsx14("p", { className: "qt-empty-state-description", children: "Start a conversation to see messages appear here." })
1683
+ ] })
1684
+ ] }),
1685
+ /* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
1686
+ /* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Empty State with Action" }),
1687
+ /* @__PURE__ */ jsxs14("div", { className: "qt-empty-state", children: [
1688
+ /* @__PURE__ */ jsx14("div", { className: "qt-empty-state-icon", children: /* @__PURE__ */ jsx14("svg", { className: "w-12 h-12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14("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" }) }) }),
1689
+ /* @__PURE__ */ jsx14("h4", { className: "qt-empty-state-title", children: "No characters" }),
1690
+ /* @__PURE__ */ jsx14("p", { className: "qt-empty-state-description", children: "You haven't created any characters yet. Create your first character to get started." }),
1691
+ /* @__PURE__ */ jsx14("div", { className: "qt-empty-state-action", children: /* @__PURE__ */ jsx14("button", { className: "qt-button qt-button-primary", children: "Create Character" }) })
1692
+ ] })
1693
+ ] }),
1694
+ /* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
1695
+ /* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Search Empty State" }),
1696
+ /* @__PURE__ */ jsxs14("div", { className: "qt-empty-state", children: [
1697
+ /* @__PURE__ */ jsx14("div", { className: "qt-empty-state-icon", children: /* @__PURE__ */ jsx14("svg", { className: "w-12 h-12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }) }),
1698
+ /* @__PURE__ */ jsx14("h4", { className: "qt-empty-state-title", children: "No results found" }),
1699
+ /* @__PURE__ */ jsx14("p", { className: "qt-empty-state-description", children: "Try adjusting your search or filters to find what you're looking for." }),
1700
+ /* @__PURE__ */ jsx14("div", { className: "qt-empty-state-action", children: /* @__PURE__ */ jsx14("button", { className: "qt-button qt-button-secondary", children: "Clear Filters" }) })
1701
+ ] })
1702
+ ] }),
1703
+ /* @__PURE__ */ jsxs14("section", { children: [
1704
+ /* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Error Empty State" }),
1705
+ /* @__PURE__ */ jsxs14("div", { className: "qt-empty-state", children: [
1706
+ /* @__PURE__ */ jsx14("div", { className: "qt-empty-state-icon text-red-500", children: /* @__PURE__ */ jsx14("svg", { className: "w-12 h-12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14("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" }) }) }),
1707
+ /* @__PURE__ */ jsx14("h4", { className: "qt-empty-state-title", children: "Something went wrong" }),
1708
+ /* @__PURE__ */ jsx14("p", { className: "qt-empty-state-description", children: "We couldn't load the content. Please try again." }),
1709
+ /* @__PURE__ */ jsx14("div", { className: "qt-empty-state-action", children: /* @__PURE__ */ jsx14("button", { className: "qt-button qt-button-primary", children: "Try Again" }) })
1710
+ ] })
1711
+ ] })
1712
+ ] });
1713
+ };
1714
+
1715
+ // src/stories/components/Loading.tsx
1716
+ import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
1717
+ var Loading = () => {
1718
+ return /* @__PURE__ */ jsxs15("div", { style: { padding: "1.5rem" }, children: [
1719
+ /* @__PURE__ */ jsx15("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Loading States" }),
1720
+ /* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
1721
+ /* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Spinners" }),
1722
+ /* @__PURE__ */ jsxs15("div", { style: { display: "flex", gap: "2rem", alignItems: "center" }, children: [
1723
+ /* @__PURE__ */ jsxs15("div", { style: { textAlign: "center" }, children: [
1724
+ /* @__PURE__ */ jsx15("div", { className: "qt-spinner qt-spinner-sm", style: { margin: "0 auto" } }),
1725
+ /* @__PURE__ */ jsx15("p", { style: { fontSize: "0.75rem", marginTop: "0.5rem" }, children: "Small" })
1726
+ ] }),
1727
+ /* @__PURE__ */ jsxs15("div", { style: { textAlign: "center" }, children: [
1728
+ /* @__PURE__ */ jsx15("div", { className: "qt-spinner", style: { margin: "0 auto" } }),
1729
+ /* @__PURE__ */ jsx15("p", { style: { fontSize: "0.75rem", marginTop: "0.5rem" }, children: "Default" })
1730
+ ] }),
1731
+ /* @__PURE__ */ jsxs15("div", { style: { textAlign: "center" }, children: [
1732
+ /* @__PURE__ */ jsx15("div", { className: "qt-spinner qt-spinner-lg", style: { margin: "0 auto" } }),
1733
+ /* @__PURE__ */ jsx15("p", { style: { fontSize: "0.75rem", marginTop: "0.5rem" }, children: "Large" })
1734
+ ] })
1735
+ ] })
1736
+ ] }),
1737
+ /* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
1738
+ /* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Skeleton Text" }),
1739
+ /* @__PURE__ */ jsxs15("div", { style: { maxWidth: "28rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
1740
+ /* @__PURE__ */ jsx15("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "100%" } }),
1741
+ /* @__PURE__ */ jsx15("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "80%" } }),
1742
+ /* @__PURE__ */ jsx15("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "60%" } })
1743
+ ] })
1744
+ ] }),
1745
+ /* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
1746
+ /* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Skeleton Card" }),
1747
+ /* @__PURE__ */ jsxs15("div", { className: "qt-card", style: { maxWidth: "24rem", padding: "1rem" }, children: [
1748
+ /* @__PURE__ */ jsxs15("div", { style: { display: "flex", gap: "0.75rem", marginBottom: "1rem", alignItems: "flex-start" }, children: [
1749
+ /* @__PURE__ */ jsx15("div", { className: "qt-skeleton qt-skeleton-circle", style: { width: "40px", height: "40px", flexShrink: 0 } }),
1750
+ /* @__PURE__ */ jsxs15("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
1751
+ /* @__PURE__ */ jsx15("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "60%" } }),
1752
+ /* @__PURE__ */ jsx15("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "40%" } })
1753
+ ] })
1754
+ ] }),
1755
+ /* @__PURE__ */ jsxs15("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
1756
+ /* @__PURE__ */ jsx15("div", { className: "qt-skeleton qt-skeleton-text" }),
1757
+ /* @__PURE__ */ jsx15("div", { className: "qt-skeleton qt-skeleton-text" }),
1758
+ /* @__PURE__ */ jsx15("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "75%" } })
1759
+ ] })
1760
+ ] })
1761
+ ] }),
1762
+ /* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
1763
+ /* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Skeleton Message" }),
1764
+ /* @__PURE__ */ jsx15("div", { style: { maxWidth: "42rem", display: "flex", flexDirection: "column", gap: "1rem" }, children: /* @__PURE__ */ jsxs15("div", { style: { display: "flex", gap: "0.75rem" }, children: [
1765
+ /* @__PURE__ */ jsx15("div", { className: "qt-skeleton qt-skeleton-circle", style: { width: "32px", height: "32px", flexShrink: 0 } }),
1766
+ /* @__PURE__ */ jsxs15("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
1767
+ /* @__PURE__ */ jsx15("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "120px" } }),
1768
+ /* @__PURE__ */ jsx15("div", { className: "qt-card", style: { padding: "1rem" }, children: /* @__PURE__ */ jsxs15("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
1769
+ /* @__PURE__ */ jsx15("div", { className: "qt-skeleton qt-skeleton-text" }),
1770
+ /* @__PURE__ */ jsx15("div", { className: "qt-skeleton qt-skeleton-text" }),
1771
+ /* @__PURE__ */ jsx15("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "60%" } })
1772
+ ] }) })
1773
+ ] })
1774
+ ] }) })
1775
+ ] }),
1776
+ /* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
1777
+ /* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Skeleton List" }),
1778
+ /* @__PURE__ */ jsx15("div", { style: { maxWidth: "24rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs15("div", { className: "qt-card", style: { padding: "0.75rem", display: "flex", gap: "0.75rem", alignItems: "center" }, children: [
1779
+ /* @__PURE__ */ jsx15("div", { className: "qt-skeleton qt-skeleton-circle", style: { width: "32px", height: "32px", flexShrink: 0 } }),
1780
+ /* @__PURE__ */ jsx15("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx15("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "70%" } }) })
1781
+ ] }, i)) })
1782
+ ] }),
1783
+ /* @__PURE__ */ jsxs15("section", { children: [
1784
+ /* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Loading Button" }),
1785
+ /* @__PURE__ */ jsxs15("div", { style: { display: "flex", gap: "1rem" }, children: [
1786
+ /* @__PURE__ */ jsxs15("button", { className: "qt-button qt-button-primary", disabled: true, style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
1787
+ /* @__PURE__ */ jsx15("div", { className: "qt-spinner qt-spinner-sm" }),
1788
+ "Loading..."
1789
+ ] }),
1790
+ /* @__PURE__ */ jsxs15("button", { className: "qt-button qt-button-secondary", disabled: true, style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
1791
+ /* @__PURE__ */ jsx15("div", { className: "qt-spinner qt-spinner-sm" }),
1792
+ "Saving..."
1793
+ ] })
1794
+ ] })
1795
+ ] })
1796
+ ] });
1797
+ };
1798
+
1799
+ // src/stories/components/Participant.tsx
1800
+ import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
1801
+ var Participant = () => {
1802
+ return /* @__PURE__ */ jsxs16("div", { style: { padding: "1.5rem" }, children: [
1803
+ /* @__PURE__ */ jsx16("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Participants" }),
1804
+ /* @__PURE__ */ jsxs16("section", { style: { marginBottom: "2rem" }, children: [
1805
+ /* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Participant Cards" }),
1806
+ /* @__PURE__ */ jsxs16("div", { style: { maxWidth: "20rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
1807
+ /* @__PURE__ */ jsx16("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs16("div", { className: "qt-participant-card-header", children: [
1808
+ /* @__PURE__ */ jsx16("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx16("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx16("div", { className: "qt-avatar-fallback", children: "AC" }) }) }),
1809
+ /* @__PURE__ */ jsxs16("div", { className: "qt-participant-card-info", children: [
1810
+ /* @__PURE__ */ jsx16("div", { className: "qt-participant-card-name", children: "Alice Character" }),
1811
+ /* @__PURE__ */ jsx16("div", { className: "qt-participant-card-status", children: "AI Assistant" })
1812
+ ] })
1813
+ ] }) }),
1814
+ /* @__PURE__ */ jsx16("div", { className: "qt-participant-card qt-participant-card-active", children: /* @__PURE__ */ jsxs16("div", { className: "qt-participant-card-header", children: [
1815
+ /* @__PURE__ */ jsx16("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx16("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx16("div", { className: "qt-avatar-fallback", children: "BC" }) }) }),
1816
+ /* @__PURE__ */ jsxs16("div", { className: "qt-participant-card-info", children: [
1817
+ /* @__PURE__ */ jsx16("div", { className: "qt-participant-card-name", children: "Bob Character" }),
1818
+ /* @__PURE__ */ jsx16("div", { className: "qt-participant-card-status", children: "Currently Speaking" })
1819
+ ] })
1820
+ ] }) }),
1821
+ /* @__PURE__ */ jsx16("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs16("div", { className: "qt-participant-card-header", children: [
1822
+ /* @__PURE__ */ jsx16("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx16("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx16("div", { className: "qt-avatar-fallback", children: "YO" }) }) }),
1823
+ /* @__PURE__ */ jsxs16("div", { className: "qt-participant-card-info", children: [
1824
+ /* @__PURE__ */ jsx16("div", { className: "qt-participant-card-name", children: "You" }),
1825
+ /* @__PURE__ */ jsx16("div", { className: "qt-participant-card-status", children: "Human" })
1826
+ ] })
1827
+ ] }) })
1828
+ ] })
1829
+ ] }),
1830
+ /* @__PURE__ */ jsxs16("section", { style: { marginBottom: "2rem" }, children: [
1831
+ /* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Active Participant" }),
1832
+ /* @__PURE__ */ jsx16("div", { style: { maxWidth: "20rem" }, children: /* @__PURE__ */ jsx16("div", { className: "qt-participant-card qt-participant-card-active", children: /* @__PURE__ */ jsxs16("div", { className: "qt-participant-card-header", children: [
1833
+ /* @__PURE__ */ jsx16("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx16("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx16("div", { className: "qt-avatar-fallback", children: "AC" }) }) }),
1834
+ /* @__PURE__ */ jsxs16("div", { className: "qt-participant-card-info", children: [
1835
+ /* @__PURE__ */ jsx16("div", { className: "qt-participant-card-name", children: "Alice Character" }),
1836
+ /* @__PURE__ */ jsx16("div", { className: "qt-participant-card-status", children: "Currently Speaking" })
1837
+ ] })
1838
+ ] }) }) })
1839
+ ] }),
1840
+ /* @__PURE__ */ jsxs16("section", { style: { marginBottom: "2rem" }, children: [
1841
+ /* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Sidebar Layout" }),
1842
+ /* @__PURE__ */ jsxs16("div", { style: { display: "flex", gap: "1rem" }, children: [
1843
+ /* @__PURE__ */ jsx16("div", { className: "qt-card", style: { flex: 1, padding: "1rem" }, children: /* @__PURE__ */ jsx16("p", { style: { color: "var(--color-text-muted)" }, children: "Chat messages area" }) }),
1844
+ /* @__PURE__ */ jsxs16("div", { className: "qt-chat-sidebar", style: { width: "16rem" }, children: [
1845
+ /* @__PURE__ */ jsx16("div", { style: { padding: "1rem", borderBottom: "1px solid var(--qt-chat-sidebar-header-border)" }, children: /* @__PURE__ */ jsx16("h4", { style: { fontWeight: 600, color: "var(--qt-chat-sidebar-heading)" }, children: "Participants" }) }),
1846
+ /* @__PURE__ */ jsxs16("div", { style: { padding: "0.5rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
1847
+ /* @__PURE__ */ jsx16("div", { className: "qt-participant-card qt-participant-card-active", children: /* @__PURE__ */ jsxs16("div", { className: "qt-participant-card-header", children: [
1848
+ /* @__PURE__ */ jsx16("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx16("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx16("div", { className: "qt-avatar-fallback", children: "AC" }) }) }),
1849
+ /* @__PURE__ */ jsx16("div", { className: "qt-participant-card-info", children: /* @__PURE__ */ jsx16("div", { className: "qt-participant-card-name", style: { fontSize: "0.875rem" }, children: "Alice" }) })
1850
+ ] }) }),
1851
+ /* @__PURE__ */ jsx16("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs16("div", { className: "qt-participant-card-header", children: [
1852
+ /* @__PURE__ */ jsx16("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx16("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx16("div", { className: "qt-avatar-fallback", children: "YO" }) }) }),
1853
+ /* @__PURE__ */ jsx16("div", { className: "qt-participant-card-info", children: /* @__PURE__ */ jsx16("div", { className: "qt-participant-card-name", style: { fontSize: "0.875rem" }, children: "You" }) })
1854
+ ] }) })
1855
+ ] })
1856
+ ] })
1857
+ ] })
1858
+ ] }),
1859
+ /* @__PURE__ */ jsxs16("section", { children: [
1860
+ /* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Connection Profile Dropdown" }),
1861
+ /* @__PURE__ */ jsxs16("div", { style: { maxWidth: "20rem", display: "flex", flexDirection: "column", gap: "1rem" }, children: [
1862
+ /* @__PURE__ */ jsx16("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs16("div", { className: "qt-participant-card-header", children: [
1863
+ /* @__PURE__ */ jsx16("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx16("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx16("div", { className: "qt-avatar-fallback", children: "AC" }) }) }),
1864
+ /* @__PURE__ */ jsxs16("div", { className: "qt-participant-card-info", children: [
1865
+ /* @__PURE__ */ jsx16("div", { className: "qt-participant-card-name", children: "Alice Character" }),
1866
+ /* @__PURE__ */ jsx16("div", { className: "qt-participant-card-status", children: "AI Assistant" }),
1867
+ /* @__PURE__ */ jsx16("div", { style: { marginTop: "0.25rem" }, children: /* @__PURE__ */ jsxs16("select", { className: "qt-select qt-select-sm", style: { width: "100%" }, defaultValue: "gpt-4", children: [
1868
+ /* @__PURE__ */ jsx16("option", { value: "", children: "Select a provider..." }),
1869
+ /* @__PURE__ */ jsx16("option", { value: "__user__", children: "User (you type)" }),
1870
+ /* @__PURE__ */ jsx16("option", { value: "gpt-4", children: "gpt-4-turbo" }),
1871
+ /* @__PURE__ */ jsx16("option", { value: "claude", children: "claude-3-opus" }),
1872
+ /* @__PURE__ */ jsx16("option", { value: "gemini", children: "gemini-pro" })
1873
+ ] }) })
1874
+ ] })
1875
+ ] }) }),
1876
+ /* @__PURE__ */ jsx16("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs16("div", { className: "qt-participant-card-header", children: [
1877
+ /* @__PURE__ */ jsx16("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx16("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx16("div", { className: "qt-avatar-fallback", children: "BC" }) }) }),
1878
+ /* @__PURE__ */ jsxs16("div", { className: "qt-participant-card-info", children: [
1879
+ /* @__PURE__ */ jsxs16("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
1880
+ /* @__PURE__ */ jsx16("div", { className: "qt-participant-card-name", children: "Bob Character" }),
1881
+ /* @__PURE__ */ jsx16("span", { className: "qt-badge-secondary", style: { fontSize: "0.75rem" }, children: "You" })
1882
+ ] }),
1883
+ /* @__PURE__ */ jsx16("div", { style: { marginTop: "0.25rem" }, children: /* @__PURE__ */ jsxs16("select", { className: "qt-select qt-select-sm", style: { width: "100%" }, defaultValue: "__user__", children: [
1884
+ /* @__PURE__ */ jsx16("option", { value: "", children: "Select a provider..." }),
1885
+ /* @__PURE__ */ jsx16("option", { value: "__user__", children: "User (you type)" }),
1886
+ /* @__PURE__ */ jsx16("option", { value: "gpt-4", children: "gpt-4-turbo" }),
1887
+ /* @__PURE__ */ jsx16("option", { value: "claude", children: "claude-3-opus" })
1888
+ ] }) })
1889
+ ] })
1890
+ ] }) })
1891
+ ] })
1892
+ ] })
1893
+ ] });
1894
+ };
1895
+
1192
1896
  export {
1193
1897
  ColorSwatch,
1194
1898
  ColorGroup,
@@ -1204,5 +1908,8 @@ export {
1204
1908
  Tabs,
1205
1909
  Chat,
1206
1910
  FilePreview,
1207
- ThemeComparison
1911
+ ThemeComparison,
1912
+ EmptyState,
1913
+ Loading,
1914
+ Participant
1208
1915
  };