@quilltap/theme-storybook 1.0.41 → 1.0.43
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/{chunk-U2PTQQL5.mjs → chunk-MKFVWQPL.mjs} +858 -755
- package/dist/index.css +10 -0
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +859 -755
- package/dist/index.mjs +3 -1
- package/dist/stories/index.d.mts +13 -1
- package/dist/stories/index.d.ts +13 -1
- package/dist/stories/index.js +859 -755
- package/dist/stories/index.mjs +3 -1
- package/package.json +1 -1
- package/src/css/qt-components.css +20 -0
- package/src/stories/components/Icons.tsx +2 -2
- package/src/stories/components/Surfaces.tsx +107 -0
- package/src/stories/index.ts +1 -0
|
@@ -88,6 +88,7 @@ var ICON_GROUPS = [
|
|
|
88
88
|
"trash",
|
|
89
89
|
"copy",
|
|
90
90
|
"plus",
|
|
91
|
+
"minus",
|
|
91
92
|
"search",
|
|
92
93
|
"download",
|
|
93
94
|
"upload",
|
|
@@ -114,7 +115,8 @@ var ICON_GROUPS = [
|
|
|
114
115
|
"arrow-left",
|
|
115
116
|
"arrow-right",
|
|
116
117
|
"arrow-up",
|
|
117
|
-
"arrow-down"
|
|
118
|
+
"arrow-down",
|
|
119
|
+
"sort"
|
|
118
120
|
]
|
|
119
121
|
},
|
|
120
122
|
{
|
|
@@ -1025,75 +1027,175 @@ var Badges = () => {
|
|
|
1025
1027
|
] });
|
|
1026
1028
|
};
|
|
1027
1029
|
|
|
1028
|
-
// src/stories/components/
|
|
1030
|
+
// src/stories/components/Surfaces.tsx
|
|
1029
1031
|
import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
1030
|
-
var
|
|
1032
|
+
var sectionHeading2 = {
|
|
1033
|
+
fontSize: "1.125rem",
|
|
1034
|
+
fontWeight: 700,
|
|
1035
|
+
marginBottom: "1rem",
|
|
1036
|
+
borderBottom: "1px solid var(--color-border)",
|
|
1037
|
+
paddingBottom: "0.5rem"
|
|
1038
|
+
};
|
|
1039
|
+
var note = {
|
|
1040
|
+
color: "var(--color-muted-foreground)",
|
|
1041
|
+
marginBottom: "1rem",
|
|
1042
|
+
fontSize: "0.875rem"
|
|
1043
|
+
};
|
|
1044
|
+
var Surfaces = () => {
|
|
1031
1045
|
return /* @__PURE__ */ jsxs9("div", { style: { padding: "1.5rem" }, children: [
|
|
1032
|
-
/* @__PURE__ */ jsx9("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "
|
|
1046
|
+
/* @__PURE__ */ jsx9("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "0.5rem" }, children: "Surfaces" }),
|
|
1047
|
+
/* @__PURE__ */ jsxs9("p", { style: { ...note, maxWidth: "44rem" }, children: [
|
|
1048
|
+
"How accent-coloured surfaces stay legible no matter how bold a theme makes its ",
|
|
1049
|
+
/* @__PURE__ */ jsx9("code", { children: "accent" }),
|
|
1050
|
+
" token. Filled surfaces pair the background with",
|
|
1051
|
+
" ",
|
|
1052
|
+
/* @__PURE__ */ jsx9("code", { children: "qt-text-on-accent" }),
|
|
1053
|
+
"; hover rows use ",
|
|
1054
|
+
/* @__PURE__ */ jsx9("code", { children: "qt-hover-accent" }),
|
|
1055
|
+
"; quiet selected/panel surfaces lean on ",
|
|
1056
|
+
/* @__PURE__ */ jsx9("code", { children: "muted" }),
|
|
1057
|
+
" and faint",
|
|
1058
|
+
" ",
|
|
1059
|
+
/* @__PURE__ */ jsx9("code", { children: "primary" }),
|
|
1060
|
+
" instead of the accent."
|
|
1061
|
+
] }),
|
|
1033
1062
|
/* @__PURE__ */ jsxs9("section", { style: { marginBottom: "2rem" }, children: [
|
|
1034
|
-
/* @__PURE__ */ jsx9("h3", { style:
|
|
1035
|
-
/* @__PURE__ */ jsxs9("
|
|
1036
|
-
|
|
1037
|
-
/* @__PURE__ */ jsx9("
|
|
1038
|
-
|
|
1039
|
-
/* @__PURE__ */ jsx9("
|
|
1063
|
+
/* @__PURE__ */ jsx9("h3", { style: sectionHeading2, children: "Filled accent surfaces" }),
|
|
1064
|
+
/* @__PURE__ */ jsxs9("p", { style: note, children: [
|
|
1065
|
+
"A solid ",
|
|
1066
|
+
/* @__PURE__ */ jsx9("code", { children: "qt-bg-accent" }),
|
|
1067
|
+
" fill ",
|
|
1068
|
+
/* @__PURE__ */ jsx9("strong", { children: "must" }),
|
|
1069
|
+
" be paired with",
|
|
1070
|
+
" ",
|
|
1071
|
+
/* @__PURE__ */ jsx9("code", { children: "qt-text-on-accent" }),
|
|
1072
|
+
" (the theme's ",
|
|
1073
|
+
/* @__PURE__ */ jsx9("code", { children: "accentForeground" }),
|
|
1074
|
+
"). A fill without it falls back to the page foreground and washes out on bold accents."
|
|
1075
|
+
] }),
|
|
1076
|
+
/* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.75rem", alignItems: "center" }, children: [
|
|
1077
|
+
/* @__PURE__ */ jsx9("span", { className: "qt-bg-accent qt-text-on-accent", style: { padding: "0.125rem 0.5rem", borderRadius: "0.25rem", fontSize: "0.75rem" }, children: "keyword" }),
|
|
1078
|
+
/* @__PURE__ */ jsx9("span", { className: "qt-bg-accent qt-text-on-accent", style: { padding: "0.125rem 0.5rem", borderRadius: "0.25rem", fontSize: "0.75rem" }, children: "another keyword" }),
|
|
1079
|
+
/* @__PURE__ */ jsx9("kbd", { className: "qt-bg-accent qt-text-on-accent", style: { padding: "0.125rem 0.375rem", borderRadius: "0.25rem", fontSize: "0.75rem" }, children: "\u21B5" })
|
|
1040
1080
|
] })
|
|
1041
1081
|
] }),
|
|
1042
1082
|
/* @__PURE__ */ jsxs9("section", { style: { marginBottom: "2rem" }, children: [
|
|
1043
|
-
/* @__PURE__ */
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1083
|
+
/* @__PURE__ */ jsxs9("h3", { style: sectionHeading2, children: [
|
|
1084
|
+
"Hover-highlight rows \u2014 ",
|
|
1085
|
+
/* @__PURE__ */ jsx9("code", { children: "qt-hover-accent" })
|
|
1086
|
+
] }),
|
|
1087
|
+
/* @__PURE__ */ jsxs9("p", { style: note, children: [
|
|
1088
|
+
"For list rows, menu items, and option cards. On hover it paints the accent background and forces the accent foreground onto the row ",
|
|
1089
|
+
/* @__PURE__ */ jsx9("em", { children: "and every descendant" }),
|
|
1090
|
+
" \u2014 so children that carry their own colour (the title and the muted subtitle below) flip too, instead of washing out (or, when their colour matches the accent, vanishing). Hover the rows to see it."
|
|
1091
|
+
] }),
|
|
1092
|
+
/* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexDirection: "column", gap: "0.25rem", maxWidth: "24rem", border: "1px solid var(--color-border)", borderRadius: "0.5rem", padding: "0.375rem" }, children: [
|
|
1093
|
+
/* @__PURE__ */ jsxs9("div", { className: "qt-hover-accent", style: { display: "flex", flexDirection: "column", padding: "0.5rem 0.75rem", borderRadius: "0.375rem", cursor: "pointer" }, children: [
|
|
1094
|
+
/* @__PURE__ */ jsx9("span", { className: "qt-text-primary", children: "Compose a reply" }),
|
|
1095
|
+
/* @__PURE__ */ jsx9("span", { className: "qt-text-secondary", style: { fontSize: "0.8125rem" }, children: "Draft a response in this thread" })
|
|
1096
|
+
] }),
|
|
1097
|
+
/* @__PURE__ */ jsxs9("div", { className: "qt-hover-accent", style: { display: "flex", flexDirection: "column", padding: "0.5rem 0.75rem", borderRadius: "0.375rem", cursor: "pointer" }, children: [
|
|
1098
|
+
/* @__PURE__ */ jsx9("span", { className: "qt-text-primary", children: "Mark as resolved" }),
|
|
1099
|
+
/* @__PURE__ */ jsx9("span", { className: "qt-text-secondary", style: { fontSize: "0.8125rem" }, children: "Close and archive this item" })
|
|
1100
|
+
] }),
|
|
1101
|
+
/* @__PURE__ */ jsxs9("div", { className: "qt-hover-accent", style: { display: "flex", flexDirection: "column", padding: "0.5rem 0.75rem", borderRadius: "0.375rem", cursor: "pointer" }, children: [
|
|
1102
|
+
/* @__PURE__ */ jsx9("span", { className: "qt-text-primary", children: "Delete" }),
|
|
1103
|
+
/* @__PURE__ */ jsx9("span", { className: "qt-text-secondary", style: { fontSize: "0.8125rem" }, children: "Remove permanently" })
|
|
1104
|
+
] })
|
|
1049
1105
|
] })
|
|
1050
1106
|
] }),
|
|
1051
|
-
/* @__PURE__ */ jsxs9("section", {
|
|
1052
|
-
/* @__PURE__ */ jsx9("h3", { style:
|
|
1053
|
-
/* @__PURE__ */ jsxs9("
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
/* @__PURE__ */ jsx9("div", { className: "qt-
|
|
1064
|
-
|
|
1107
|
+
/* @__PURE__ */ jsxs9("section", { children: [
|
|
1108
|
+
/* @__PURE__ */ jsx9("h3", { style: sectionHeading2, children: "Quiet selected & panel surfaces" }),
|
|
1109
|
+
/* @__PURE__ */ jsxs9("p", { style: note, children: [
|
|
1110
|
+
"Persistent surfaces (selected cards, informational panels) deliberately avoid the bold accent. Selected states use a faint ",
|
|
1111
|
+
/* @__PURE__ */ jsx9("code", { children: "qt-bg-primary/10" }),
|
|
1112
|
+
" tint; informational panels use the neutral ",
|
|
1113
|
+
/* @__PURE__ */ jsx9("code", { children: "qt-bg-muted" }),
|
|
1114
|
+
" surface."
|
|
1115
|
+
] }),
|
|
1116
|
+
/* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexWrap: "wrap", gap: "1rem" }, children: [
|
|
1117
|
+
/* @__PURE__ */ jsxs9("div", { className: "qt-bg-primary/10", style: { padding: "0.75rem 1rem", borderRadius: "0.5rem", border: "1px solid var(--color-primary)", maxWidth: "16rem" }, children: [
|
|
1118
|
+
/* @__PURE__ */ jsx9("div", { className: "qt-text-primary", style: { fontWeight: 600 }, children: "Selected option" }),
|
|
1119
|
+
/* @__PURE__ */ jsx9("div", { className: "qt-text-secondary", style: { fontSize: "0.8125rem" }, children: "Faint primary tint marks the choice." })
|
|
1120
|
+
] }),
|
|
1121
|
+
/* @__PURE__ */ jsxs9("div", { className: "qt-bg-muted", style: { padding: "0.75rem 1rem", borderRadius: "0.5rem", border: "1px solid var(--color-border)", maxWidth: "16rem" }, children: [
|
|
1122
|
+
/* @__PURE__ */ jsx9("div", { style: { fontWeight: 600 }, children: "Informational panel" }),
|
|
1123
|
+
/* @__PURE__ */ jsx9("div", { className: "qt-text-secondary", style: { fontSize: "0.8125rem" }, children: "Neutral muted surface, never the accent." })
|
|
1065
1124
|
] })
|
|
1066
1125
|
] })
|
|
1126
|
+
] })
|
|
1127
|
+
] });
|
|
1128
|
+
};
|
|
1129
|
+
|
|
1130
|
+
// src/stories/components/Avatars.tsx
|
|
1131
|
+
import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
1132
|
+
var Avatars = () => {
|
|
1133
|
+
return /* @__PURE__ */ jsxs10("div", { style: { padding: "1.5rem" }, children: [
|
|
1134
|
+
/* @__PURE__ */ jsx10("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Avatars" }),
|
|
1135
|
+
/* @__PURE__ */ jsxs10("section", { style: { marginBottom: "2rem" }, children: [
|
|
1136
|
+
/* @__PURE__ */ jsx10("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Avatar Sizes" }),
|
|
1137
|
+
/* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
|
|
1138
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "SM" }) }),
|
|
1139
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "MD" }) }),
|
|
1140
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar qt-avatar-lg", children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "LG" }) }),
|
|
1141
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar qt-avatar-xl", children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "XL" }) })
|
|
1142
|
+
] })
|
|
1067
1143
|
] }),
|
|
1068
|
-
/* @__PURE__ */
|
|
1069
|
-
/* @__PURE__ */
|
|
1070
|
-
/* @__PURE__ */
|
|
1071
|
-
|
|
1072
|
-
/* @__PURE__ */
|
|
1073
|
-
/* @__PURE__ */
|
|
1074
|
-
/* @__PURE__ */
|
|
1075
|
-
/* @__PURE__ */ jsx9("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx9("div", { className: "qt-avatar-fallback", children: "+3" }) })
|
|
1144
|
+
/* @__PURE__ */ jsxs10("section", { style: { marginBottom: "2rem" }, children: [
|
|
1145
|
+
/* @__PURE__ */ jsx10("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Avatar with Images" }),
|
|
1146
|
+
/* @__PURE__ */ jsx10("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Avatars gracefully fall back to initials when image is unavailable." }),
|
|
1147
|
+
/* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
|
|
1148
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "AB" }) }),
|
|
1149
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "CD" }) }),
|
|
1150
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "EF" }) })
|
|
1076
1151
|
] })
|
|
1077
1152
|
] }),
|
|
1078
|
-
/* @__PURE__ */
|
|
1079
|
-
/* @__PURE__ */
|
|
1080
|
-
/* @__PURE__ */
|
|
1081
|
-
/* @__PURE__ */
|
|
1082
|
-
/* @__PURE__ */
|
|
1083
|
-
/* @__PURE__ */
|
|
1084
|
-
|
|
1085
|
-
|
|
1153
|
+
/* @__PURE__ */ jsxs10("section", { style: { marginBottom: "2rem" }, children: [
|
|
1154
|
+
/* @__PURE__ */ jsx10("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Avatar Shapes" }),
|
|
1155
|
+
/* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
|
|
1156
|
+
/* @__PURE__ */ jsxs10("div", { children: [
|
|
1157
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar", style: { borderRadius: "9999px" }, children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "CR" }) }),
|
|
1158
|
+
/* @__PURE__ */ jsx10("p", { style: { marginTop: "0.5rem", fontSize: "0.75rem", color: "var(--color-muted-foreground)", textAlign: "center" }, children: "Circle" })
|
|
1159
|
+
] }),
|
|
1160
|
+
/* @__PURE__ */ jsxs10("div", { children: [
|
|
1161
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar", style: { borderRadius: "var(--radius-lg)" }, children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "RD" }) }),
|
|
1162
|
+
/* @__PURE__ */ jsx10("p", { style: { marginTop: "0.5rem", fontSize: "0.75rem", color: "var(--color-muted-foreground)", textAlign: "center" }, children: "Rounded" })
|
|
1163
|
+
] }),
|
|
1164
|
+
/* @__PURE__ */ jsxs10("div", { children: [
|
|
1165
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar", style: { borderRadius: "var(--radius-sm)" }, children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "SQ" }) }),
|
|
1166
|
+
/* @__PURE__ */ jsx10("p", { style: { marginTop: "0.5rem", fontSize: "0.75rem", color: "var(--color-muted-foreground)", textAlign: "center" }, children: "Square" })
|
|
1167
|
+
] })
|
|
1168
|
+
] })
|
|
1169
|
+
] }),
|
|
1170
|
+
/* @__PURE__ */ jsxs10("section", { style: { marginBottom: "2rem" }, children: [
|
|
1171
|
+
/* @__PURE__ */ jsx10("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Avatar Groups" }),
|
|
1172
|
+
/* @__PURE__ */ jsxs10("div", { className: "qt-avatar-group", children: [
|
|
1173
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "A" }) }),
|
|
1174
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "B" }) }),
|
|
1175
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "C" }) }),
|
|
1176
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "D" }) }),
|
|
1177
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "+3" }) })
|
|
1178
|
+
] })
|
|
1179
|
+
] }),
|
|
1180
|
+
/* @__PURE__ */ jsxs10("section", { children: [
|
|
1181
|
+
/* @__PURE__ */ jsx10("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Usage in Context" }),
|
|
1182
|
+
/* @__PURE__ */ jsxs10("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
|
|
1183
|
+
/* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem", padding: "0.75rem", backgroundColor: "var(--color-muted)", borderRadius: "var(--radius-lg)" }, children: [
|
|
1184
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "JD" }) }),
|
|
1185
|
+
/* @__PURE__ */ jsxs10("div", { style: { flex: 1 }, children: [
|
|
1186
|
+
/* @__PURE__ */ jsx10("div", { style: { fontWeight: 600 }, children: "John Doe" }),
|
|
1187
|
+
/* @__PURE__ */ jsx10("div", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: "john@example.com" })
|
|
1086
1188
|
] }),
|
|
1087
|
-
/* @__PURE__ */
|
|
1088
|
-
] }),
|
|
1089
|
-
/* @__PURE__ */
|
|
1090
|
-
/* @__PURE__ */
|
|
1091
|
-
/* @__PURE__ */
|
|
1092
|
-
/* @__PURE__ */
|
|
1093
|
-
/* @__PURE__ */
|
|
1094
|
-
/* @__PURE__ */
|
|
1189
|
+
/* @__PURE__ */ jsx10("span", { className: "qt-badge qt-badge-success", children: "Active" })
|
|
1190
|
+
] }),
|
|
1191
|
+
/* @__PURE__ */ jsxs10("div", { style: { display: "flex", gap: "0.75rem" }, children: [
|
|
1192
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "SM" }) }),
|
|
1193
|
+
/* @__PURE__ */ jsxs10("div", { style: { flex: 1 }, children: [
|
|
1194
|
+
/* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
1195
|
+
/* @__PURE__ */ jsx10("span", { style: { fontWeight: 600, fontSize: "0.875rem" }, children: "Sarah Miller" }),
|
|
1196
|
+
/* @__PURE__ */ jsx10("span", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "2 hours ago" })
|
|
1095
1197
|
] }),
|
|
1096
|
-
/* @__PURE__ */
|
|
1198
|
+
/* @__PURE__ */ jsx10("p", { style: { fontSize: "0.875rem", marginTop: "0.25rem" }, children: "This is a sample comment with an avatar." })
|
|
1097
1199
|
] })
|
|
1098
1200
|
] })
|
|
1099
1201
|
] })
|
|
@@ -1103,131 +1205,131 @@ var Avatars = () => {
|
|
|
1103
1205
|
|
|
1104
1206
|
// src/stories/components/Dialogs.tsx
|
|
1105
1207
|
import { useState } from "react";
|
|
1106
|
-
import { jsx as
|
|
1208
|
+
import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1107
1209
|
var Dialogs = () => {
|
|
1108
1210
|
const [basicOpen, setBasicOpen] = useState(false);
|
|
1109
1211
|
const [confirmOpen, setConfirmOpen] = useState(false);
|
|
1110
1212
|
const [formOpen, setFormOpen] = useState(false);
|
|
1111
|
-
return /* @__PURE__ */
|
|
1112
|
-
/* @__PURE__ */
|
|
1113
|
-
/* @__PURE__ */
|
|
1114
|
-
/* @__PURE__ */
|
|
1115
|
-
/* @__PURE__ */
|
|
1116
|
-
/* @__PURE__ */
|
|
1117
|
-
/* @__PURE__ */
|
|
1118
|
-
/* @__PURE__ */
|
|
1119
|
-
/* @__PURE__ */
|
|
1120
|
-
] })
|
|
1121
|
-
] }),
|
|
1122
|
-
basicOpen && /* @__PURE__ */
|
|
1123
|
-
/* @__PURE__ */
|
|
1124
|
-
/* @__PURE__ */
|
|
1125
|
-
/* @__PURE__ */
|
|
1126
|
-
/* @__PURE__ */
|
|
1213
|
+
return /* @__PURE__ */ jsxs11("div", { style: { padding: "1.5rem" }, children: [
|
|
1214
|
+
/* @__PURE__ */ jsx11("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Dialogs & Modals" }),
|
|
1215
|
+
/* @__PURE__ */ jsxs11("section", { style: { marginBottom: "2rem" }, children: [
|
|
1216
|
+
/* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Dialog Examples" }),
|
|
1217
|
+
/* @__PURE__ */ jsx11("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Click the buttons below to open different dialog types." }),
|
|
1218
|
+
/* @__PURE__ */ jsxs11("div", { style: { display: "flex", flexWrap: "wrap", gap: "1rem" }, children: [
|
|
1219
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-secondary", onClick: () => setBasicOpen(true), children: "Basic Dialog" }),
|
|
1220
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-destructive", onClick: () => setConfirmOpen(true), children: "Confirmation Dialog" }),
|
|
1221
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-primary", onClick: () => setFormOpen(true), children: "Form Dialog" })
|
|
1222
|
+
] })
|
|
1223
|
+
] }),
|
|
1224
|
+
basicOpen && /* @__PURE__ */ jsx11("div", { className: "qt-dialog-overlay", onClick: () => setBasicOpen(false), children: /* @__PURE__ */ jsxs11("div", { className: "qt-dialog", onClick: (e) => e.stopPropagation(), children: [
|
|
1225
|
+
/* @__PURE__ */ jsxs11("div", { className: "qt-dialog-header", children: [
|
|
1226
|
+
/* @__PURE__ */ jsx11("h3", { className: "qt-dialog-title", children: "Basic Dialog" }),
|
|
1227
|
+
/* @__PURE__ */ jsx11("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." }),
|
|
1228
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button-icon", onClick: () => setBasicOpen(false), "aria-label": "Close", children: /* @__PURE__ */ jsx11("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
|
|
1127
1229
|
] }),
|
|
1128
|
-
/* @__PURE__ */
|
|
1129
|
-
/* @__PURE__ */
|
|
1230
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-dialog-body", children: /* @__PURE__ */ jsx11("p", { children: "Dialog content area with additional details and information." }) }),
|
|
1231
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-dialog-footer", children: /* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-primary", onClick: () => setBasicOpen(false), children: "Got it" }) })
|
|
1130
1232
|
] }) }),
|
|
1131
|
-
confirmOpen && /* @__PURE__ */
|
|
1132
|
-
/* @__PURE__ */
|
|
1133
|
-
/* @__PURE__ */
|
|
1134
|
-
/* @__PURE__ */
|
|
1135
|
-
/* @__PURE__ */
|
|
1233
|
+
confirmOpen && /* @__PURE__ */ jsx11("div", { className: "qt-dialog-overlay", onClick: () => setConfirmOpen(false), children: /* @__PURE__ */ jsxs11("div", { className: "qt-dialog", onClick: (e) => e.stopPropagation(), children: [
|
|
1234
|
+
/* @__PURE__ */ jsxs11("div", { className: "qt-dialog-header", children: [
|
|
1235
|
+
/* @__PURE__ */ jsx11("h3", { className: "qt-dialog-title", children: "Delete Item?" }),
|
|
1236
|
+
/* @__PURE__ */ jsx11("p", { className: "qt-dialog-description", children: "Are you sure you want to delete this item? This action cannot be undone." }),
|
|
1237
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button-icon", onClick: () => setConfirmOpen(false), "aria-label": "Close", children: /* @__PURE__ */ jsx11("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
|
|
1136
1238
|
] }),
|
|
1137
|
-
/* @__PURE__ */
|
|
1138
|
-
/* @__PURE__ */
|
|
1139
|
-
/* @__PURE__ */
|
|
1140
|
-
/* @__PURE__ */
|
|
1239
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-dialog-body", children: /* @__PURE__ */ jsx11("p", { children: "This will remove the item from your collection permanently." }) }),
|
|
1240
|
+
/* @__PURE__ */ jsxs11("div", { className: "qt-dialog-footer", children: [
|
|
1241
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-ghost", onClick: () => setConfirmOpen(false), children: "Cancel" }),
|
|
1242
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-destructive", onClick: () => setConfirmOpen(false), children: "Delete" })
|
|
1141
1243
|
] })
|
|
1142
1244
|
] }) }),
|
|
1143
|
-
formOpen && /* @__PURE__ */
|
|
1144
|
-
/* @__PURE__ */
|
|
1145
|
-
/* @__PURE__ */
|
|
1146
|
-
/* @__PURE__ */
|
|
1147
|
-
/* @__PURE__ */
|
|
1245
|
+
formOpen && /* @__PURE__ */ jsx11("div", { className: "qt-dialog-overlay", onClick: () => setFormOpen(false), children: /* @__PURE__ */ jsxs11("div", { className: "qt-dialog", onClick: (e) => e.stopPropagation(), style: { maxWidth: "28rem" }, children: [
|
|
1246
|
+
/* @__PURE__ */ jsxs11("div", { className: "qt-dialog-header", children: [
|
|
1247
|
+
/* @__PURE__ */ jsx11("h3", { className: "qt-dialog-title", children: "Create New Item" }),
|
|
1248
|
+
/* @__PURE__ */ jsx11("p", { className: "qt-dialog-description", children: "Fill in the details below to create a new item." }),
|
|
1249
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button-icon", onClick: () => setFormOpen(false), "aria-label": "Close", children: /* @__PURE__ */ jsx11("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
|
|
1148
1250
|
] }),
|
|
1149
|
-
/* @__PURE__ */
|
|
1150
|
-
/* @__PURE__ */
|
|
1151
|
-
/* @__PURE__ */
|
|
1152
|
-
/* @__PURE__ */
|
|
1153
|
-
] }),
|
|
1154
|
-
/* @__PURE__ */
|
|
1155
|
-
/* @__PURE__ */
|
|
1156
|
-
/* @__PURE__ */
|
|
1157
|
-
] }),
|
|
1158
|
-
/* @__PURE__ */
|
|
1159
|
-
/* @__PURE__ */
|
|
1160
|
-
/* @__PURE__ */
|
|
1161
|
-
/* @__PURE__ */
|
|
1162
|
-
/* @__PURE__ */
|
|
1163
|
-
/* @__PURE__ */
|
|
1164
|
-
/* @__PURE__ */
|
|
1251
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-dialog-body", children: /* @__PURE__ */ jsxs11("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
|
|
1252
|
+
/* @__PURE__ */ jsxs11("div", { children: [
|
|
1253
|
+
/* @__PURE__ */ jsx11("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Name" }),
|
|
1254
|
+
/* @__PURE__ */ jsx11("input", { className: "qt-input", type: "text", placeholder: "Enter name..." })
|
|
1255
|
+
] }),
|
|
1256
|
+
/* @__PURE__ */ jsxs11("div", { children: [
|
|
1257
|
+
/* @__PURE__ */ jsx11("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Description" }),
|
|
1258
|
+
/* @__PURE__ */ jsx11("textarea", { className: "qt-input qt-textarea", placeholder: "Enter description...", style: { minHeight: "5rem" } })
|
|
1259
|
+
] }),
|
|
1260
|
+
/* @__PURE__ */ jsxs11("div", { children: [
|
|
1261
|
+
/* @__PURE__ */ jsx11("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Category" }),
|
|
1262
|
+
/* @__PURE__ */ jsxs11("select", { className: "qt-input qt-select", children: [
|
|
1263
|
+
/* @__PURE__ */ jsx11("option", { value: "", children: "Select category..." }),
|
|
1264
|
+
/* @__PURE__ */ jsx11("option", { value: "1", children: "Category 1" }),
|
|
1265
|
+
/* @__PURE__ */ jsx11("option", { value: "2", children: "Category 2" }),
|
|
1266
|
+
/* @__PURE__ */ jsx11("option", { value: "3", children: "Category 3" })
|
|
1165
1267
|
] })
|
|
1166
1268
|
] })
|
|
1167
1269
|
] }) }),
|
|
1168
|
-
/* @__PURE__ */
|
|
1169
|
-
/* @__PURE__ */
|
|
1170
|
-
/* @__PURE__ */
|
|
1270
|
+
/* @__PURE__ */ jsxs11("div", { className: "qt-dialog-footer", children: [
|
|
1271
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-ghost", onClick: () => setFormOpen(false), children: "Cancel" }),
|
|
1272
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-primary", onClick: () => setFormOpen(false), children: "Create" })
|
|
1171
1273
|
] })
|
|
1172
1274
|
] }) }),
|
|
1173
|
-
/* @__PURE__ */
|
|
1174
|
-
/* @__PURE__ */
|
|
1175
|
-
/* @__PURE__ */
|
|
1176
|
-
/* @__PURE__ */
|
|
1177
|
-
/* @__PURE__ */
|
|
1178
|
-
/* @__PURE__ */
|
|
1179
|
-
/* @__PURE__ */
|
|
1180
|
-
] }),
|
|
1181
|
-
/* @__PURE__ */
|
|
1182
|
-
/* @__PURE__ */
|
|
1183
|
-
/* @__PURE__ */
|
|
1184
|
-
/* @__PURE__ */
|
|
1275
|
+
/* @__PURE__ */ jsxs11("section", { style: { marginBottom: "2rem" }, children: [
|
|
1276
|
+
/* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Dialog Structure (Static Preview)" }),
|
|
1277
|
+
/* @__PURE__ */ jsx11("div", { style: { backgroundColor: "var(--color-muted)", padding: "2rem", borderRadius: "var(--radius-lg)" }, children: /* @__PURE__ */ jsxs11("div", { className: "qt-dialog", style: { position: "relative", transform: "none", margin: "0 auto" }, children: [
|
|
1278
|
+
/* @__PURE__ */ jsxs11("div", { className: "qt-dialog-header", children: [
|
|
1279
|
+
/* @__PURE__ */ jsx11("h3", { className: "qt-dialog-title", children: "Dialog Title" }),
|
|
1280
|
+
/* @__PURE__ */ jsx11("p", { className: "qt-dialog-description", children: "This is a dialog with a title and description." }),
|
|
1281
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button-icon", "aria-label": "Close", children: /* @__PURE__ */ jsx11("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
|
|
1282
|
+
] }),
|
|
1283
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-dialog-body", children: /* @__PURE__ */ jsx11("p", { children: "Dialog content area. This can contain text, forms, or any other content." }) }),
|
|
1284
|
+
/* @__PURE__ */ jsxs11("div", { className: "qt-dialog-footer", children: [
|
|
1285
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-ghost", children: "Secondary Action" }),
|
|
1286
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-primary", children: "Primary Action" })
|
|
1185
1287
|
] })
|
|
1186
1288
|
] }) })
|
|
1187
1289
|
] }),
|
|
1188
|
-
/* @__PURE__ */
|
|
1189
|
-
/* @__PURE__ */
|
|
1190
|
-
/* @__PURE__ */
|
|
1191
|
-
/* @__PURE__ */
|
|
1192
|
-
/* @__PURE__ */
|
|
1193
|
-
/* @__PURE__ */
|
|
1194
|
-
/* @__PURE__ */
|
|
1195
|
-
/* @__PURE__ */
|
|
1290
|
+
/* @__PURE__ */ jsxs11("section", { children: [
|
|
1291
|
+
/* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Dialog Sizes" }),
|
|
1292
|
+
/* @__PURE__ */ jsxs11("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
|
|
1293
|
+
/* @__PURE__ */ jsxs11("div", { children: [
|
|
1294
|
+
/* @__PURE__ */ jsx11("span", { style: { fontSize: "0.875rem", fontWeight: 500, color: "var(--color-muted-foreground)" }, children: "Small (max-width: 24rem)" }),
|
|
1295
|
+
/* @__PURE__ */ jsx11("div", { style: { backgroundColor: "var(--color-muted)", padding: "1rem", borderRadius: "var(--radius-lg)", marginTop: "0.5rem" }, children: /* @__PURE__ */ jsxs11("div", { className: "qt-dialog", style: { position: "relative", transform: "none", margin: 0, maxWidth: "24rem" }, children: [
|
|
1296
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-dialog-header", children: /* @__PURE__ */ jsx11("h3", { className: "qt-dialog-title", children: "Small Dialog" }) }),
|
|
1297
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-dialog-body", children: /* @__PURE__ */ jsx11("p", { children: "Compact dialog for simple confirmations." }) })
|
|
1196
1298
|
] }) })
|
|
1197
1299
|
] }),
|
|
1198
|
-
/* @__PURE__ */
|
|
1199
|
-
/* @__PURE__ */
|
|
1200
|
-
/* @__PURE__ */
|
|
1201
|
-
/* @__PURE__ */
|
|
1202
|
-
/* @__PURE__ */
|
|
1300
|
+
/* @__PURE__ */ jsxs11("div", { children: [
|
|
1301
|
+
/* @__PURE__ */ jsx11("span", { style: { fontSize: "0.875rem", fontWeight: 500, color: "var(--color-muted-foreground)" }, children: "Large (max-width: 42rem)" }),
|
|
1302
|
+
/* @__PURE__ */ jsx11("div", { style: { backgroundColor: "var(--color-muted)", padding: "1rem", borderRadius: "var(--radius-lg)", marginTop: "0.5rem" }, children: /* @__PURE__ */ jsxs11("div", { className: "qt-dialog qt-dialog-wide", style: { position: "relative", transform: "none", margin: 0, maxWidth: "42rem" }, children: [
|
|
1303
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-dialog-header", children: /* @__PURE__ */ jsx11("h3", { className: "qt-dialog-title", children: "Large Dialog" }) }),
|
|
1304
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-dialog-body", children: /* @__PURE__ */ jsx11("p", { children: "Larger dialog for complex forms or detailed content that needs more space." }) })
|
|
1203
1305
|
] }) })
|
|
1204
1306
|
] })
|
|
1205
1307
|
] })
|
|
1206
1308
|
] }),
|
|
1207
|
-
/* @__PURE__ */
|
|
1208
|
-
/* @__PURE__ */
|
|
1209
|
-
/* @__PURE__ */
|
|
1210
|
-
/* @__PURE__ */
|
|
1211
|
-
/* @__PURE__ */
|
|
1212
|
-
/* @__PURE__ */
|
|
1213
|
-
/* @__PURE__ */
|
|
1309
|
+
/* @__PURE__ */ jsxs11("section", { style: { marginBottom: "2rem" }, children: [
|
|
1310
|
+
/* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Popover" }),
|
|
1311
|
+
/* @__PURE__ */ jsxs11("div", { style: { position: "relative", display: "inline-block", marginTop: "2rem" }, children: [
|
|
1312
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-secondary", children: "Hover for popover" }),
|
|
1313
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-popover", style: { position: "absolute", left: 0, top: "100%", marginTop: "0.5rem", display: "block" }, children: /* @__PURE__ */ jsxs11("div", { style: { padding: "0.75rem" }, children: [
|
|
1314
|
+
/* @__PURE__ */ jsx11("p", { style: { fontWeight: 600, marginBottom: "0.25rem" }, children: "Popover Title" }),
|
|
1315
|
+
/* @__PURE__ */ jsx11("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: "This is popover content that provides additional context." })
|
|
1214
1316
|
] }) })
|
|
1215
1317
|
] })
|
|
1216
1318
|
] }),
|
|
1217
|
-
/* @__PURE__ */
|
|
1218
|
-
/* @__PURE__ */
|
|
1219
|
-
/* @__PURE__ */
|
|
1220
|
-
/* @__PURE__ */
|
|
1221
|
-
/* @__PURE__ */
|
|
1222
|
-
/* @__PURE__ */
|
|
1223
|
-
/* @__PURE__ */
|
|
1319
|
+
/* @__PURE__ */ jsxs11("section", { style: { marginBottom: "2rem" }, children: [
|
|
1320
|
+
/* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Dropdown Menu" }),
|
|
1321
|
+
/* @__PURE__ */ jsxs11("div", { className: "qt-dropdown", style: { display: "inline-block", position: "relative" }, children: [
|
|
1322
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-dropdown-item", children: "Profile" }),
|
|
1323
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-dropdown-item", children: "Settings" }),
|
|
1324
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-dropdown-separator" }),
|
|
1325
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-dropdown-item", style: { color: "var(--color-destructive)" }, children: "Sign Out" })
|
|
1224
1326
|
] })
|
|
1225
1327
|
] }),
|
|
1226
|
-
/* @__PURE__ */
|
|
1227
|
-
/* @__PURE__ */
|
|
1228
|
-
/* @__PURE__ */
|
|
1229
|
-
/* @__PURE__ */
|
|
1230
|
-
/* @__PURE__ */
|
|
1328
|
+
/* @__PURE__ */ jsxs11("section", { children: [
|
|
1329
|
+
/* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Tooltip" }),
|
|
1330
|
+
/* @__PURE__ */ jsx11("div", { style: { display: "flex", alignItems: "center", gap: "2rem" }, children: /* @__PURE__ */ jsxs11("div", { style: { position: "relative", display: "inline-block", marginTop: "2rem" }, children: [
|
|
1331
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-secondary", children: "Hover me" }),
|
|
1332
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-tooltip", style: { position: "absolute", left: "50%", transform: "translateX(-50%)", bottom: "100%", marginBottom: "0.5rem", display: "block" }, children: "Helpful tooltip text" })
|
|
1231
1333
|
] }) })
|
|
1232
1334
|
] })
|
|
1233
1335
|
] });
|
|
@@ -1235,15 +1337,15 @@ var Dialogs = () => {
|
|
|
1235
1337
|
|
|
1236
1338
|
// src/stories/components/Tabs.tsx
|
|
1237
1339
|
import { useState as useState2 } from "react";
|
|
1238
|
-
import { jsx as
|
|
1340
|
+
import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1239
1341
|
var Tabs = () => {
|
|
1240
1342
|
const [activeTab, setActiveTab] = useState2("tab1");
|
|
1241
|
-
return /* @__PURE__ */
|
|
1242
|
-
/* @__PURE__ */
|
|
1243
|
-
/* @__PURE__ */
|
|
1244
|
-
/* @__PURE__ */
|
|
1245
|
-
/* @__PURE__ */
|
|
1246
|
-
/* @__PURE__ */
|
|
1343
|
+
return /* @__PURE__ */ jsxs12("div", { style: { padding: "1.5rem" }, children: [
|
|
1344
|
+
/* @__PURE__ */ jsx12("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Tabs & Navigation" }),
|
|
1345
|
+
/* @__PURE__ */ jsxs12("section", { style: { marginBottom: "2rem" }, children: [
|
|
1346
|
+
/* @__PURE__ */ jsx12("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Basic Tabs" }),
|
|
1347
|
+
/* @__PURE__ */ jsxs12("div", { className: "qt-tab-group", children: [
|
|
1348
|
+
/* @__PURE__ */ jsx12(
|
|
1247
1349
|
"button",
|
|
1248
1350
|
{
|
|
1249
1351
|
className: `qt-tab ${activeTab === "tab1" ? "qt-tab-active" : ""}`,
|
|
@@ -1251,7 +1353,7 @@ var Tabs = () => {
|
|
|
1251
1353
|
children: "Account"
|
|
1252
1354
|
}
|
|
1253
1355
|
),
|
|
1254
|
-
/* @__PURE__ */
|
|
1356
|
+
/* @__PURE__ */ jsx12(
|
|
1255
1357
|
"button",
|
|
1256
1358
|
{
|
|
1257
1359
|
className: `qt-tab ${activeTab === "tab2" ? "qt-tab-active" : ""}`,
|
|
@@ -1259,7 +1361,7 @@ var Tabs = () => {
|
|
|
1259
1361
|
children: "Settings"
|
|
1260
1362
|
}
|
|
1261
1363
|
),
|
|
1262
|
-
/* @__PURE__ */
|
|
1364
|
+
/* @__PURE__ */ jsx12(
|
|
1263
1365
|
"button",
|
|
1264
1366
|
{
|
|
1265
1367
|
className: `qt-tab ${activeTab === "tab3" ? "qt-tab-active" : ""}`,
|
|
@@ -1268,56 +1370,56 @@ var Tabs = () => {
|
|
|
1268
1370
|
}
|
|
1269
1371
|
)
|
|
1270
1372
|
] }),
|
|
1271
|
-
/* @__PURE__ */
|
|
1272
|
-
activeTab === "tab1" && /* @__PURE__ */
|
|
1273
|
-
/* @__PURE__ */
|
|
1274
|
-
/* @__PURE__ */
|
|
1275
|
-
] }),
|
|
1276
|
-
activeTab === "tab2" && /* @__PURE__ */
|
|
1277
|
-
/* @__PURE__ */
|
|
1278
|
-
/* @__PURE__ */
|
|
1279
|
-
] }),
|
|
1280
|
-
activeTab === "tab3" && /* @__PURE__ */
|
|
1281
|
-
/* @__PURE__ */
|
|
1282
|
-
/* @__PURE__ */
|
|
1373
|
+
/* @__PURE__ */ jsxs12("div", { children: [
|
|
1374
|
+
activeTab === "tab1" && /* @__PURE__ */ jsxs12("div", { className: "qt-tab-content", children: [
|
|
1375
|
+
/* @__PURE__ */ jsx12("h4", { style: { fontWeight: 600, marginBottom: "0.5rem" }, children: "Account Settings" }),
|
|
1376
|
+
/* @__PURE__ */ jsx12("p", { style: { color: "var(--color-muted-foreground)" }, children: "Manage your account settings and preferences." })
|
|
1377
|
+
] }),
|
|
1378
|
+
activeTab === "tab2" && /* @__PURE__ */ jsxs12("div", { className: "qt-tab-content", children: [
|
|
1379
|
+
/* @__PURE__ */ jsx12("h4", { style: { fontWeight: 600, marginBottom: "0.5rem" }, children: "General Settings" }),
|
|
1380
|
+
/* @__PURE__ */ jsx12("p", { style: { color: "var(--color-muted-foreground)" }, children: "Configure general application settings." })
|
|
1381
|
+
] }),
|
|
1382
|
+
activeTab === "tab3" && /* @__PURE__ */ jsxs12("div", { className: "qt-tab-content", children: [
|
|
1383
|
+
/* @__PURE__ */ jsx12("h4", { style: { fontWeight: 600, marginBottom: "0.5rem" }, children: "Notification Preferences" }),
|
|
1384
|
+
/* @__PURE__ */ jsx12("p", { style: { color: "var(--color-muted-foreground)" }, children: "Choose how you want to receive notifications." })
|
|
1283
1385
|
] })
|
|
1284
1386
|
] })
|
|
1285
1387
|
] }),
|
|
1286
|
-
/* @__PURE__ */
|
|
1287
|
-
/* @__PURE__ */
|
|
1288
|
-
/* @__PURE__ */
|
|
1289
|
-
/* @__PURE__ */
|
|
1290
|
-
/* @__PURE__ */
|
|
1388
|
+
/* @__PURE__ */ jsxs12("section", { style: { marginBottom: "2rem" }, children: [
|
|
1389
|
+
/* @__PURE__ */ jsx12("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Tabs with Icons" }),
|
|
1390
|
+
/* @__PURE__ */ jsxs12("div", { className: "qt-tab-group", children: [
|
|
1391
|
+
/* @__PURE__ */ jsxs12("button", { className: "qt-tab qt-tab-active", style: { display: "inline-flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
1392
|
+
/* @__PURE__ */ jsx12("svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" }) }),
|
|
1291
1393
|
"Home"
|
|
1292
1394
|
] }),
|
|
1293
|
-
/* @__PURE__ */
|
|
1294
|
-
/* @__PURE__ */
|
|
1395
|
+
/* @__PURE__ */ jsxs12("button", { className: "qt-tab", style: { display: "inline-flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
1396
|
+
/* @__PURE__ */ jsx12("svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" }) }),
|
|
1295
1397
|
"Profile"
|
|
1296
1398
|
] }),
|
|
1297
|
-
/* @__PURE__ */
|
|
1298
|
-
/* @__PURE__ */
|
|
1299
|
-
/* @__PURE__ */
|
|
1300
|
-
/* @__PURE__ */
|
|
1399
|
+
/* @__PURE__ */ jsxs12("button", { className: "qt-tab", style: { display: "inline-flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
1400
|
+
/* @__PURE__ */ jsxs12("svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
|
|
1401
|
+
/* @__PURE__ */ jsx12("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" }),
|
|
1402
|
+
/* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })
|
|
1301
1403
|
] }),
|
|
1302
1404
|
"Settings"
|
|
1303
1405
|
] })
|
|
1304
1406
|
] })
|
|
1305
1407
|
] }),
|
|
1306
|
-
/* @__PURE__ */
|
|
1307
|
-
/* @__PURE__ */
|
|
1308
|
-
/* @__PURE__ */
|
|
1309
|
-
/* @__PURE__ */
|
|
1310
|
-
/* @__PURE__ */
|
|
1311
|
-
/* @__PURE__ */
|
|
1312
|
-
/* @__PURE__ */
|
|
1313
|
-
/* @__PURE__ */
|
|
1314
|
-
/* @__PURE__ */
|
|
1315
|
-
/* @__PURE__ */
|
|
1408
|
+
/* @__PURE__ */ jsxs12("section", { children: [
|
|
1409
|
+
/* @__PURE__ */ jsx12("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Navigation Bar" }),
|
|
1410
|
+
/* @__PURE__ */ jsxs12("div", { className: "qt-navbar", children: [
|
|
1411
|
+
/* @__PURE__ */ jsxs12("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
|
|
1412
|
+
/* @__PURE__ */ jsx12("div", { style: { fontWeight: 700, fontSize: "1.125rem" }, children: "Quilltap" }),
|
|
1413
|
+
/* @__PURE__ */ jsxs12("nav", { style: { display: "flex", gap: "0.25rem" }, children: [
|
|
1414
|
+
/* @__PURE__ */ jsx12("a", { href: "#", className: "qt-navbar-link qt-navbar-link-active", children: "Dashboard" }),
|
|
1415
|
+
/* @__PURE__ */ jsx12("a", { href: "#", className: "qt-navbar-link", children: "Characters" }),
|
|
1416
|
+
/* @__PURE__ */ jsx12("a", { href: "#", className: "qt-navbar-link", children: "Chats" }),
|
|
1417
|
+
/* @__PURE__ */ jsx12("a", { href: "#", className: "qt-navbar-link", children: "Settings" })
|
|
1316
1418
|
] })
|
|
1317
1419
|
] }),
|
|
1318
|
-
/* @__PURE__ */
|
|
1319
|
-
/* @__PURE__ */
|
|
1320
|
-
/* @__PURE__ */
|
|
1420
|
+
/* @__PURE__ */ jsxs12("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
1421
|
+
/* @__PURE__ */ jsx12("button", { className: "qt-button-icon", "aria-label": "Notifications", children: /* @__PURE__ */ jsx12("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" }) }) }),
|
|
1422
|
+
/* @__PURE__ */ jsx12("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx12("div", { className: "qt-avatar-fallback", children: "U" }) })
|
|
1321
1423
|
] })
|
|
1322
1424
|
] })
|
|
1323
1425
|
] })
|
|
@@ -1325,215 +1427,215 @@ var Tabs = () => {
|
|
|
1325
1427
|
};
|
|
1326
1428
|
|
|
1327
1429
|
// src/stories/components/Chat.tsx
|
|
1328
|
-
import { jsx as
|
|
1430
|
+
import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1329
1431
|
var Chat = () => {
|
|
1330
|
-
return /* @__PURE__ */
|
|
1331
|
-
/* @__PURE__ */
|
|
1332
|
-
/* @__PURE__ */
|
|
1333
|
-
/* @__PURE__ */
|
|
1334
|
-
/* @__PURE__ */
|
|
1335
|
-
/* @__PURE__ */
|
|
1336
|
-
/* @__PURE__ */
|
|
1337
|
-
/* @__PURE__ */
|
|
1338
|
-
/* @__PURE__ */
|
|
1432
|
+
return /* @__PURE__ */ jsxs13("div", { style: { padding: "1.5rem" }, children: [
|
|
1433
|
+
/* @__PURE__ */ jsx13("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Chat Components" }),
|
|
1434
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1435
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Message Bubbles" }),
|
|
1436
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
|
|
1437
|
+
/* @__PURE__ */ jsx13("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsxs13("div", { className: "qt-chat-message qt-chat-message-user", children: [
|
|
1438
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-message-header", children: [
|
|
1439
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-chat-message-author", children: "You" }),
|
|
1440
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-chat-message-time", children: "2:30 PM" })
|
|
1339
1441
|
] }),
|
|
1340
|
-
/* @__PURE__ */
|
|
1442
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ jsx13("p", { children: "Hello! How are you today?" }) })
|
|
1341
1443
|
] }) }),
|
|
1342
|
-
/* @__PURE__ */
|
|
1343
|
-
/* @__PURE__ */
|
|
1344
|
-
/* @__PURE__ */
|
|
1345
|
-
/* @__PURE__ */
|
|
1346
|
-
/* @__PURE__ */
|
|
1347
|
-
/* @__PURE__ */
|
|
1444
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1445
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx13("div", { className: "qt-avatar-fallback", children: "AI" }) }),
|
|
1446
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
|
|
1447
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-message-header", children: [
|
|
1448
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-chat-message-author", children: "Assistant" }),
|
|
1449
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-chat-message-time", children: "2:30 PM" })
|
|
1348
1450
|
] }),
|
|
1349
|
-
/* @__PURE__ */
|
|
1451
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ jsx13("p", { children: "Hello! I'm doing well, thank you for asking. How can I help you today?" }) })
|
|
1350
1452
|
] })
|
|
1351
1453
|
] }),
|
|
1352
|
-
/* @__PURE__ */
|
|
1353
|
-
/* @__PURE__ */
|
|
1354
|
-
/* @__PURE__ */
|
|
1355
|
-
/* @__PURE__ */
|
|
1356
|
-
/* @__PURE__ */
|
|
1357
|
-
/* @__PURE__ */
|
|
1454
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1455
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx13("div", { className: "qt-avatar-fallback", children: "AI" }) }),
|
|
1456
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
|
|
1457
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-message-header", children: [
|
|
1458
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-chat-message-author", children: "Assistant" }),
|
|
1459
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-chat-message-time", children: "2:31 PM" })
|
|
1358
1460
|
] }),
|
|
1359
|
-
/* @__PURE__ */
|
|
1360
|
-
/* @__PURE__ */
|
|
1361
|
-
/* @__PURE__ */
|
|
1362
|
-
/* @__PURE__ */
|
|
1363
|
-
/* @__PURE__ */
|
|
1364
|
-
/* @__PURE__ */
|
|
1461
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-message-content", children: [
|
|
1462
|
+
/* @__PURE__ */ jsx13("p", { children: "Here's some information you might find helpful:" }),
|
|
1463
|
+
/* @__PURE__ */ jsxs13("ul", { style: { marginTop: "0.5rem", paddingLeft: "1.25rem" }, children: [
|
|
1464
|
+
/* @__PURE__ */ jsx13("li", { children: "First point of interest" }),
|
|
1465
|
+
/* @__PURE__ */ jsx13("li", { children: "Second important detail" }),
|
|
1466
|
+
/* @__PURE__ */ jsx13("li", { children: "Third relevant fact" })
|
|
1365
1467
|
] }),
|
|
1366
|
-
/* @__PURE__ */
|
|
1468
|
+
/* @__PURE__ */ jsx13("p", { style: { marginTop: "0.5rem" }, children: "Let me know if you'd like more details about any of these!" })
|
|
1367
1469
|
] }),
|
|
1368
|
-
/* @__PURE__ */
|
|
1369
|
-
/* @__PURE__ */
|
|
1370
|
-
/* @__PURE__ */
|
|
1470
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-message-actions", children: [
|
|
1471
|
+
/* @__PURE__ */ jsx13("button", { className: "qt-button-icon", title: "Edit", children: /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("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" }) }) }),
|
|
1472
|
+
/* @__PURE__ */ jsx13("button", { className: "qt-button-icon", title: "Copy", children: /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("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" }) }) })
|
|
1371
1473
|
] })
|
|
1372
1474
|
] })
|
|
1373
1475
|
] }),
|
|
1374
|
-
/* @__PURE__ */
|
|
1375
|
-
/* @__PURE__ */
|
|
1376
|
-
/* @__PURE__ */
|
|
1377
|
-
/* @__PURE__ */
|
|
1476
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message qt-chat-message-system", children: /* @__PURE__ */ jsx13("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ jsx13("p", { children: "Alice has joined the conversation." }) }) }),
|
|
1477
|
+
/* @__PURE__ */ jsx13("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsxs13("div", { className: "qt-chat-message qt-chat-message-user", children: [
|
|
1478
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-header", children: /* @__PURE__ */ jsx13("span", { className: "qt-chat-message-author", children: "You" }) }),
|
|
1479
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ jsx13("p", { children: "That's exactly what I needed, thanks!" }) })
|
|
1378
1480
|
] }) })
|
|
1379
1481
|
] })
|
|
1380
1482
|
] }),
|
|
1381
|
-
/* @__PURE__ */
|
|
1382
|
-
/* @__PURE__ */
|
|
1383
|
-
/* @__PURE__ */
|
|
1384
|
-
/* @__PURE__ */
|
|
1385
|
-
/* @__PURE__ */
|
|
1386
|
-
/* @__PURE__ */
|
|
1387
|
-
/* @__PURE__ */
|
|
1388
|
-
/* @__PURE__ */
|
|
1389
|
-
/* @__PURE__ */
|
|
1483
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1484
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Character Messages" }),
|
|
1485
|
+
/* @__PURE__ */ jsx13("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Messages from different characters with their avatars." }),
|
|
1486
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
|
|
1487
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1488
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx13("div", { className: "qt-avatar-fallback", children: "A" }) }),
|
|
1489
|
+
/* @__PURE__ */ jsxs13("div", { children: [
|
|
1490
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-author", style: { fontSize: "0.75rem", fontWeight: 600, marginBottom: "0.25rem" }, children: "Alice" }),
|
|
1491
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message qt-chat-message-assistant", children: /* @__PURE__ */ jsx13("p", { children: "*waves cheerfully* Hi there! I'm so glad to meet you!" }) })
|
|
1390
1492
|
] })
|
|
1391
1493
|
] }),
|
|
1392
|
-
/* @__PURE__ */
|
|
1393
|
-
/* @__PURE__ */
|
|
1394
|
-
/* @__PURE__ */
|
|
1395
|
-
/* @__PURE__ */
|
|
1396
|
-
/* @__PURE__ */
|
|
1494
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1495
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx13("div", { className: "qt-avatar-fallback", children: "B" }) }),
|
|
1496
|
+
/* @__PURE__ */ jsxs13("div", { children: [
|
|
1497
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-author", style: { fontSize: "0.75rem", fontWeight: 600, marginBottom: "0.25rem" }, children: "Bob" }),
|
|
1498
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message qt-chat-message-assistant", children: /* @__PURE__ */ jsx13("p", { children: "*nods thoughtfully* Interesting point. Let me think about that..." }) })
|
|
1397
1499
|
] })
|
|
1398
1500
|
] })
|
|
1399
1501
|
] })
|
|
1400
1502
|
] }),
|
|
1401
|
-
/* @__PURE__ */
|
|
1402
|
-
/* @__PURE__ */
|
|
1403
|
-
/* @__PURE__ */
|
|
1404
|
-
/* @__PURE__ */
|
|
1405
|
-
/* @__PURE__ */
|
|
1406
|
-
/* @__PURE__ */
|
|
1407
|
-
/* @__PURE__ */
|
|
1408
|
-
/* @__PURE__ */
|
|
1409
|
-
/* @__PURE__ */
|
|
1503
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1504
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Roleplay Annotations" }),
|
|
1505
|
+
/* @__PURE__ */ jsx13("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." }),
|
|
1506
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
|
|
1507
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1508
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx13("div", { className: "qt-avatar-fallback", children: "A" }) }),
|
|
1509
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
|
|
1510
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-header", children: /* @__PURE__ */ jsx13("span", { className: "qt-chat-message-author", children: "Alice" }) }),
|
|
1511
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ jsxs13("p", { children: [
|
|
1410
1512
|
'"Hello there!" ',
|
|
1411
|
-
/* @__PURE__ */
|
|
1513
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-chat-narration", children: "she said with a warm smile, stepping forward to greet you." })
|
|
1412
1514
|
] }) })
|
|
1413
1515
|
] })
|
|
1414
1516
|
] }),
|
|
1415
|
-
/* @__PURE__ */
|
|
1416
|
-
/* @__PURE__ */
|
|
1417
|
-
/* @__PURE__ */
|
|
1418
|
-
/* @__PURE__ */
|
|
1419
|
-
/* @__PURE__ */
|
|
1420
|
-
/* @__PURE__ */
|
|
1517
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1518
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx13("div", { className: "qt-avatar-fallback", children: "A" }) }),
|
|
1519
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
|
|
1520
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-header", children: /* @__PURE__ */ jsx13("span", { className: "qt-chat-message-author", children: "Alice" }) }),
|
|
1521
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ jsxs13("p", { children: [
|
|
1522
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-chat-narration", children: "She paused for a moment, considering her words carefully." }),
|
|
1421
1523
|
" ",
|
|
1422
|
-
/* @__PURE__ */
|
|
1524
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-chat-inner-monologue", children: "I wonder if they noticed..." })
|
|
1423
1525
|
] }) })
|
|
1424
1526
|
] })
|
|
1425
1527
|
] }),
|
|
1426
|
-
/* @__PURE__ */
|
|
1427
|
-
/* @__PURE__ */
|
|
1428
|
-
/* @__PURE__ */
|
|
1429
|
-
/* @__PURE__ */
|
|
1430
|
-
/* @__PURE__ */
|
|
1528
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1529
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx13("div", { className: "qt-avatar-fallback", children: "A" }) }),
|
|
1530
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
|
|
1531
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-header", children: /* @__PURE__ */ jsx13("span", { className: "qt-chat-message-author", children: "Alice" }) }),
|
|
1532
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ jsx13("p", { children: /* @__PURE__ */ jsx13("span", { className: "qt-chat-ooc", children: "((OOC: Should we continue the scene or take a break?))" }) }) })
|
|
1431
1533
|
] })
|
|
1432
1534
|
] })
|
|
1433
1535
|
] })
|
|
1434
1536
|
] }),
|
|
1435
|
-
/* @__PURE__ */
|
|
1436
|
-
/* @__PURE__ */
|
|
1437
|
-
/* @__PURE__ */
|
|
1438
|
-
/* @__PURE__ */
|
|
1439
|
-
/* @__PURE__ */
|
|
1440
|
-
/* @__PURE__ */
|
|
1441
|
-
/* @__PURE__ */
|
|
1537
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1538
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Whisper Messages" }),
|
|
1539
|
+
/* @__PURE__ */ jsx13("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Private messages visible only to sender and recipient. Overheard whispers have a faded style." }),
|
|
1540
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
|
|
1541
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-row qt-chat-message-row-assistant", style: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsxs13("div", { className: "qt-chat-message-body qt-chat-message-assistant qt-chat-message-whisper", children: [
|
|
1542
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-whisper-label", children: "whispered to Elena" }),
|
|
1543
|
+
/* @__PURE__ */ jsx13("p", { children: "I don't trust the merchant. Meet me at the tavern tonight\u2014alone." })
|
|
1442
1544
|
] }) }),
|
|
1443
|
-
/* @__PURE__ */
|
|
1444
|
-
/* @__PURE__ */
|
|
1445
|
-
/* @__PURE__ */
|
|
1545
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-row qt-chat-message-row-assistant", style: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsxs13("div", { className: "qt-chat-message-body qt-chat-message-assistant qt-chat-message-whisper qt-chat-message-whisper-overheard", children: [
|
|
1546
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-whisper-label", children: "whispered to Marcus" }),
|
|
1547
|
+
/* @__PURE__ */ jsx13("p", { children: "Keep an eye on the door. We may need a quick exit." })
|
|
1446
1548
|
] }) })
|
|
1447
1549
|
] })
|
|
1448
1550
|
] }),
|
|
1449
|
-
/* @__PURE__ */
|
|
1450
|
-
/* @__PURE__ */
|
|
1451
|
-
/* @__PURE__ */
|
|
1452
|
-
/* @__PURE__ */
|
|
1453
|
-
/* @__PURE__ */
|
|
1454
|
-
/* @__PURE__ */
|
|
1455
|
-
/* @__PURE__ */
|
|
1551
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1552
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Silent Messages" }),
|
|
1553
|
+
/* @__PURE__ */ jsx13("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Inner thoughts and actions from characters in silent mode. They can think and act physically, but cannot speak aloud. Distinguished from whispers by dotted borders and sage/teal tones." }),
|
|
1554
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
|
|
1555
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-row qt-chat-message-row-assistant", style: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsxs13("div", { className: "qt-chat-message-body qt-chat-message-assistant qt-chat-message-silent", children: [
|
|
1556
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-silent-label", children: "silent \u2014 inner thoughts and actions only" }),
|
|
1557
|
+
/* @__PURE__ */ jsx13("p", { children: "*glances at the door, weighing whether to follow or stay behind*" })
|
|
1456
1558
|
] }) }),
|
|
1457
|
-
/* @__PURE__ */
|
|
1458
|
-
/* @__PURE__ */
|
|
1459
|
-
/* @__PURE__ */
|
|
1559
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-row qt-chat-message-row-assistant", style: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsxs13("div", { className: "qt-chat-message-body qt-chat-message-assistant qt-chat-message-silent", children: [
|
|
1560
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-silent-label", children: "silent \u2014 inner thoughts and actions only" }),
|
|
1561
|
+
/* @__PURE__ */ jsx13("p", { children: "*quietly pockets the letter before anyone notices, mind racing with questions about its contents*" })
|
|
1460
1562
|
] }) })
|
|
1461
1563
|
] })
|
|
1462
1564
|
] }),
|
|
1463
|
-
/* @__PURE__ */
|
|
1464
|
-
/* @__PURE__ */
|
|
1465
|
-
/* @__PURE__ */
|
|
1466
|
-
/* @__PURE__ */
|
|
1467
|
-
/* @__PURE__ */
|
|
1468
|
-
/* @__PURE__ */
|
|
1469
|
-
/* @__PURE__ */
|
|
1470
|
-
/* @__PURE__ */
|
|
1471
|
-
/* @__PURE__ */
|
|
1565
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1566
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Wardrobe Action Notices" }),
|
|
1567
|
+
/* @__PURE__ */ jsx13("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Inline summaries of outfit changes (equip, unequip, gift). Distinguished from whispers (dashed purple) and silent messages (dotted teal) by a double border and warm amber/gold tones." }),
|
|
1568
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
|
|
1569
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-wardrobe-notice", children: [
|
|
1570
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-wardrobe-label", children: "Wardrobe" }),
|
|
1571
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-wardrobe-summary", children: [
|
|
1572
|
+
/* @__PURE__ */ jsx13("div", { children: "Equipped \u201CCrimson Evening Gown\u201D in the top slot." }),
|
|
1573
|
+
/* @__PURE__ */ jsx13("div", { children: "Wearing: Crimson Evening Gown (top, bottom), Glass Slippers (footwear)" })
|
|
1472
1574
|
] })
|
|
1473
1575
|
] }),
|
|
1474
|
-
/* @__PURE__ */
|
|
1475
|
-
/* @__PURE__ */
|
|
1476
|
-
/* @__PURE__ */
|
|
1477
|
-
/* @__PURE__ */
|
|
1478
|
-
/* @__PURE__ */
|
|
1576
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-wardrobe-notice", children: [
|
|
1577
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-wardrobe-label", children: "Wardrobe" }),
|
|
1578
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-wardrobe-summary", children: [
|
|
1579
|
+
/* @__PURE__ */ jsx13("div", { children: "Removed item from the footwear slot." }),
|
|
1580
|
+
/* @__PURE__ */ jsx13("div", { children: "Wearing: Crimson Evening Gown (top, bottom), barefoot" })
|
|
1479
1581
|
] })
|
|
1480
1582
|
] }),
|
|
1481
|
-
/* @__PURE__ */
|
|
1482
|
-
/* @__PURE__ */
|
|
1483
|
-
/* @__PURE__ */
|
|
1484
|
-
/* @__PURE__ */
|
|
1485
|
-
/* @__PURE__ */
|
|
1583
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-wardrobe-notice", children: [
|
|
1584
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-wardrobe-label", children: "Wardrobe" }),
|
|
1585
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-wardrobe-summary", children: [
|
|
1586
|
+
/* @__PURE__ */ jsx13("div", { children: "Gifted \u201CSilver Pocket Watch\u201D to Marcus." }),
|
|
1587
|
+
/* @__PURE__ */ jsx13("div", { children: "Marcus put it on immediately." })
|
|
1486
1588
|
] })
|
|
1487
1589
|
] })
|
|
1488
1590
|
] })
|
|
1489
1591
|
] }),
|
|
1490
|
-
/* @__PURE__ */
|
|
1491
|
-
/* @__PURE__ */
|
|
1492
|
-
/* @__PURE__ */
|
|
1493
|
-
/* @__PURE__ */
|
|
1494
|
-
/* @__PURE__ */
|
|
1495
|
-
/* @__PURE__ */
|
|
1496
|
-
/* @__PURE__ */
|
|
1497
|
-
/* @__PURE__ */
|
|
1498
|
-
/* @__PURE__ */
|
|
1499
|
-
/* @__PURE__ */
|
|
1500
|
-
/* @__PURE__ */
|
|
1592
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1593
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Toolbar" }),
|
|
1594
|
+
/* @__PURE__ */ jsx13("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Formatting and action buttons for chat composition." }),
|
|
1595
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-toolbar", style: { maxWidth: "32rem", display: "flex", gap: "0.5rem", flexWrap: "wrap" }, children: [
|
|
1596
|
+
/* @__PURE__ */ jsx13("button", { className: "qt-chat-toolbar-button", title: "Bold", children: /* @__PURE__ */ jsx13("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 4h8a4 4 0 014 4v2M6 4v16M6 4h8a2 2 0 012 2v2M6 12h12" }) }) }),
|
|
1597
|
+
/* @__PURE__ */ jsx13("button", { className: "qt-chat-toolbar-button", title: "Italic", children: /* @__PURE__ */ jsx13("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 5h4m-4 14h4M9 5h6M9 19H3" }) }) }),
|
|
1598
|
+
/* @__PURE__ */ jsx13("button", { className: "qt-chat-toolbar-button", title: "Underline", children: /* @__PURE__ */ jsx13("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 5v10a4 4 0 008 0V5m0 14H7" }) }) }),
|
|
1599
|
+
/* @__PURE__ */ jsx13("div", { style: { flex: 1 } }),
|
|
1600
|
+
/* @__PURE__ */ jsx13("button", { className: "qt-chat-toolbar-button", title: "Settings", children: /* @__PURE__ */ jsxs13("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
|
|
1601
|
+
/* @__PURE__ */ jsx13("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" }),
|
|
1602
|
+
/* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })
|
|
1501
1603
|
] }) })
|
|
1502
1604
|
] })
|
|
1503
1605
|
] }),
|
|
1504
|
-
/* @__PURE__ */
|
|
1505
|
-
/* @__PURE__ */
|
|
1506
|
-
/* @__PURE__ */
|
|
1507
|
-
/* @__PURE__ */
|
|
1508
|
-
/* @__PURE__ */
|
|
1509
|
-
/* @__PURE__ */
|
|
1606
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1607
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "RP Annotation Buttons" }),
|
|
1608
|
+
/* @__PURE__ */ jsx13("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Quick-insert buttons for roleplay annotation types." }),
|
|
1609
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-rp-annotation-toolbar", style: { maxWidth: "32rem", display: "flex", gap: "0.5rem", flexWrap: "wrap" }, children: [
|
|
1610
|
+
/* @__PURE__ */ jsxs13("button", { className: "qt-rp-annotation-button-narration", title: "Narration", children: [
|
|
1611
|
+
/* @__PURE__ */ jsx13("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h7" }) }),
|
|
1510
1612
|
"Narration"
|
|
1511
1613
|
] }),
|
|
1512
|
-
/* @__PURE__ */
|
|
1513
|
-
/* @__PURE__ */
|
|
1614
|
+
/* @__PURE__ */ jsxs13("button", { className: "qt-rp-annotation-button-internal", title: "Inner Monologue", children: [
|
|
1615
|
+
/* @__PURE__ */ jsx13("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("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" }) }),
|
|
1514
1616
|
"Internal"
|
|
1515
1617
|
] }),
|
|
1516
|
-
/* @__PURE__ */
|
|
1517
|
-
/* @__PURE__ */
|
|
1618
|
+
/* @__PURE__ */ jsxs13("button", { className: "qt-rp-annotation-button-ooc", title: "Out of Character", children: [
|
|
1619
|
+
/* @__PURE__ */ jsx13("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("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" }) }),
|
|
1518
1620
|
"OOC"
|
|
1519
1621
|
] })
|
|
1520
1622
|
] })
|
|
1521
1623
|
] }),
|
|
1522
|
-
/* @__PURE__ */
|
|
1523
|
-
/* @__PURE__ */
|
|
1524
|
-
/* @__PURE__ */
|
|
1525
|
-
/* @__PURE__ */
|
|
1526
|
-
/* @__PURE__ */
|
|
1527
|
-
/* @__PURE__ */
|
|
1528
|
-
/* @__PURE__ */
|
|
1529
|
-
/* @__PURE__ */
|
|
1624
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1625
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Attachments" }),
|
|
1626
|
+
/* @__PURE__ */ jsx13("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "File attachment chips and attachment button." }),
|
|
1627
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-composer", style: { maxWidth: "32rem" }, children: [
|
|
1628
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-attachment-list", style: { display: "flex", gap: "0.5rem", marginBottom: "0.75rem", flexWrap: "wrap" }, children: [
|
|
1629
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-attachment-chip", children: [
|
|
1630
|
+
/* @__PURE__ */ jsx13("span", { children: "document.pdf" }),
|
|
1631
|
+
/* @__PURE__ */ jsx13("button", { className: "ml-2 text-gray-400 hover:text-gray-600", style: { marginLeft: "0.5rem" }, children: "\xD7" })
|
|
1530
1632
|
] }),
|
|
1531
|
-
/* @__PURE__ */
|
|
1532
|
-
/* @__PURE__ */
|
|
1533
|
-
/* @__PURE__ */
|
|
1633
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-attachment-chip", children: [
|
|
1634
|
+
/* @__PURE__ */ jsx13("span", { children: "image.png" }),
|
|
1635
|
+
/* @__PURE__ */ jsx13("button", { className: "ml-2 text-gray-400 hover:text-gray-600", style: { marginLeft: "0.5rem" }, children: "\xD7" })
|
|
1534
1636
|
] })
|
|
1535
1637
|
] }),
|
|
1536
|
-
/* @__PURE__ */
|
|
1638
|
+
/* @__PURE__ */ jsx13(
|
|
1537
1639
|
"textarea",
|
|
1538
1640
|
{
|
|
1539
1641
|
className: "qt-chat-composer-input",
|
|
@@ -1542,17 +1644,17 @@ var Chat = () => {
|
|
|
1542
1644
|
style: { width: "100%", padding: "0.5rem", marginBottom: "0.5rem" }
|
|
1543
1645
|
}
|
|
1544
1646
|
),
|
|
1545
|
-
/* @__PURE__ */
|
|
1546
|
-
/* @__PURE__ */
|
|
1547
|
-
/* @__PURE__ */
|
|
1647
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-composer-actions", style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1648
|
+
/* @__PURE__ */ jsx13("button", { className: "qt-chat-attachment-button", children: /* @__PURE__ */ jsx13("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) }) }),
|
|
1649
|
+
/* @__PURE__ */ jsx13("button", { className: "qt-button qt-button-primary", children: "Send" })
|
|
1548
1650
|
] })
|
|
1549
1651
|
] })
|
|
1550
1652
|
] }),
|
|
1551
|
-
/* @__PURE__ */
|
|
1552
|
-
/* @__PURE__ */
|
|
1553
|
-
/* @__PURE__ */
|
|
1554
|
-
/* @__PURE__ */
|
|
1555
|
-
/* @__PURE__ */
|
|
1653
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1654
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Input" }),
|
|
1655
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-composer", style: { maxWidth: "32rem" }, children: /* @__PURE__ */ jsxs13("div", { className: "qt-chat-composer-inner", style: { display: "flex", alignItems: "flex-end", gap: "0.5rem", flex: 1 }, children: [
|
|
1656
|
+
/* @__PURE__ */ jsx13("button", { className: "qt-button-icon", "aria-label": "Attach file", children: /* @__PURE__ */ jsx13("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" }) }) }),
|
|
1657
|
+
/* @__PURE__ */ jsx13(
|
|
1556
1658
|
"textarea",
|
|
1557
1659
|
{
|
|
1558
1660
|
className: "qt-chat-composer-input qt-input",
|
|
@@ -1560,65 +1662,65 @@ var Chat = () => {
|
|
|
1560
1662
|
rows: 1
|
|
1561
1663
|
}
|
|
1562
1664
|
),
|
|
1563
|
-
/* @__PURE__ */
|
|
1665
|
+
/* @__PURE__ */ jsx13("button", { className: "qt-button qt-button-primary qt-chat-composer-send", style: { height: "auto", padding: "0.5rem 1rem" }, children: /* @__PURE__ */ jsx13("svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 19l9 2-9-18-9 18 9-2zm0 0v-8" }) }) })
|
|
1564
1666
|
] }) })
|
|
1565
1667
|
] }),
|
|
1566
|
-
/* @__PURE__ */
|
|
1567
|
-
/* @__PURE__ */
|
|
1568
|
-
/* @__PURE__ */
|
|
1569
|
-
/* @__PURE__ */
|
|
1570
|
-
/* @__PURE__ */
|
|
1571
|
-
/* @__PURE__ */
|
|
1572
|
-
/* @__PURE__ */
|
|
1573
|
-
/* @__PURE__ */
|
|
1668
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1669
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Typing Indicator" }),
|
|
1670
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: "0.5rem", maxWidth: "32rem" }, children: [
|
|
1671
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx13("div", { className: "qt-avatar-fallback", children: "AI" }) }),
|
|
1672
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message qt-chat-message-assistant", children: /* @__PURE__ */ jsxs13("div", { className: "qt-typing-indicator", children: [
|
|
1673
|
+
/* @__PURE__ */ jsx13("span", {}),
|
|
1674
|
+
/* @__PURE__ */ jsx13("span", {}),
|
|
1675
|
+
/* @__PURE__ */ jsx13("span", {})
|
|
1574
1676
|
] }) })
|
|
1575
1677
|
] })
|
|
1576
1678
|
] }),
|
|
1577
|
-
/* @__PURE__ */
|
|
1578
|
-
/* @__PURE__ */
|
|
1579
|
-
/* @__PURE__ */
|
|
1580
|
-
/* @__PURE__ */
|
|
1581
|
-
/* @__PURE__ */
|
|
1582
|
-
/* @__PURE__ */
|
|
1583
|
-
/* @__PURE__ */
|
|
1584
|
-
/* @__PURE__ */
|
|
1679
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1680
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Control Buttons" }),
|
|
1681
|
+
/* @__PURE__ */ jsx13("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Continue and stop buttons for controlling AI response generation." }),
|
|
1682
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: "1rem", maxWidth: "32rem" }, children: [
|
|
1683
|
+
/* @__PURE__ */ jsxs13("button", { className: "qt-chat-continue-button", children: [
|
|
1684
|
+
/* @__PURE__ */ jsxs13("svg", { className: "w-4 h-4 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
|
|
1685
|
+
/* @__PURE__ */ jsx13("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" }),
|
|
1686
|
+
/* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z" })
|
|
1585
1687
|
] }),
|
|
1586
1688
|
"Continue"
|
|
1587
1689
|
] }),
|
|
1588
|
-
/* @__PURE__ */
|
|
1589
|
-
/* @__PURE__ */
|
|
1590
|
-
/* @__PURE__ */
|
|
1591
|
-
/* @__PURE__ */
|
|
1690
|
+
/* @__PURE__ */ jsxs13("button", { className: "qt-chat-stop-button", children: [
|
|
1691
|
+
/* @__PURE__ */ jsxs13("svg", { className: "w-4 h-4 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
|
|
1692
|
+
/* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }),
|
|
1693
|
+
/* @__PURE__ */ jsx13("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" })
|
|
1592
1694
|
] }),
|
|
1593
1695
|
"Stop"
|
|
1594
1696
|
] })
|
|
1595
1697
|
] })
|
|
1596
1698
|
] }),
|
|
1597
|
-
/* @__PURE__ */
|
|
1598
|
-
/* @__PURE__ */
|
|
1599
|
-
/* @__PURE__ */
|
|
1600
|
-
/* @__PURE__ */
|
|
1601
|
-
/* @__PURE__ */
|
|
1602
|
-
/* @__PURE__ */
|
|
1603
|
-
/* @__PURE__ */
|
|
1604
|
-
/* @__PURE__ */
|
|
1605
|
-
/* @__PURE__ */
|
|
1699
|
+
/* @__PURE__ */ jsxs13("section", { children: [
|
|
1700
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Full Chat Layout" }),
|
|
1701
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-layout", style: { height: "24rem", border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)", display: "flex", flexDirection: "column" }, children: [
|
|
1702
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0.75rem 1rem", borderBottom: "1px solid var(--color-border)" }, children: [
|
|
1703
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem" }, children: [
|
|
1704
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx13("div", { className: "qt-avatar-fallback", children: "AI" }) }),
|
|
1705
|
+
/* @__PURE__ */ jsxs13("div", { children: [
|
|
1706
|
+
/* @__PURE__ */ jsx13("div", { style: { fontWeight: 600 }, children: "Assistant" }),
|
|
1707
|
+
/* @__PURE__ */ jsx13("div", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Online" })
|
|
1606
1708
|
] })
|
|
1607
1709
|
] }),
|
|
1608
|
-
/* @__PURE__ */
|
|
1609
|
-
/* @__PURE__ */
|
|
1610
|
-
/* @__PURE__ */
|
|
1710
|
+
/* @__PURE__ */ jsx13("div", { style: { display: "flex", gap: "0.5rem" }, children: /* @__PURE__ */ jsx13("button", { className: "qt-button-icon", "aria-label": "Settings", children: /* @__PURE__ */ jsxs13("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
|
|
1711
|
+
/* @__PURE__ */ jsx13("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" }),
|
|
1712
|
+
/* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })
|
|
1611
1713
|
] }) }) })
|
|
1612
1714
|
] }),
|
|
1613
|
-
/* @__PURE__ */
|
|
1614
|
-
/* @__PURE__ */
|
|
1615
|
-
/* @__PURE__ */
|
|
1616
|
-
/* @__PURE__ */
|
|
1715
|
+
/* @__PURE__ */ jsxs13("div", { style: { flex: 1, overflow: "auto", padding: "1rem", display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
|
|
1716
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1717
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx13("div", { className: "qt-avatar-fallback", children: "AI" }) }),
|
|
1718
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message qt-chat-message-assistant", children: /* @__PURE__ */ jsx13("p", { children: "Hello! How can I help you today?" }) })
|
|
1617
1719
|
] }),
|
|
1618
|
-
/* @__PURE__ */
|
|
1720
|
+
/* @__PURE__ */ jsx13("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx13("div", { className: "qt-chat-message qt-chat-message-user", children: /* @__PURE__ */ jsx13("p", { children: "I'd like to know more about theming." }) }) })
|
|
1619
1721
|
] }),
|
|
1620
|
-
/* @__PURE__ */
|
|
1621
|
-
/* @__PURE__ */
|
|
1722
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-composer", style: { margin: "0.5rem", borderRadius: "var(--radius-lg)" }, children: [
|
|
1723
|
+
/* @__PURE__ */ jsx13(
|
|
1622
1724
|
"textarea",
|
|
1623
1725
|
{
|
|
1624
1726
|
className: "qt-chat-composer-input qt-input",
|
|
@@ -1626,7 +1728,7 @@ var Chat = () => {
|
|
|
1626
1728
|
rows: 1
|
|
1627
1729
|
}
|
|
1628
1730
|
),
|
|
1629
|
-
/* @__PURE__ */
|
|
1731
|
+
/* @__PURE__ */ jsx13("button", { className: "qt-button qt-button-primary qt-button-sm", children: "Send" })
|
|
1630
1732
|
] })
|
|
1631
1733
|
] })
|
|
1632
1734
|
] })
|
|
@@ -1634,7 +1736,7 @@ var Chat = () => {
|
|
|
1634
1736
|
};
|
|
1635
1737
|
|
|
1636
1738
|
// src/stories/components/Terminal.tsx
|
|
1637
|
-
import { jsx as
|
|
1739
|
+
import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1638
1740
|
var sampleOutput = `$ git status
|
|
1639
1741
|
On branch main
|
|
1640
1742
|
Your branch is up to date with 'origin/main'.
|
|
@@ -1646,117 +1748,117 @@ $ npm run dev
|
|
|
1646
1748
|
- Local: http://localhost:3000
|
|
1647
1749
|
- ready started server on 0.0.0.0:3000`;
|
|
1648
1750
|
var Terminal = () => {
|
|
1649
|
-
return /* @__PURE__ */
|
|
1650
|
-
/* @__PURE__ */
|
|
1651
|
-
/* @__PURE__ */
|
|
1751
|
+
return /* @__PURE__ */ jsxs14("div", { style: { padding: "1.5rem" }, children: [
|
|
1752
|
+
/* @__PURE__ */ jsx14("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Terminal Components" }),
|
|
1753
|
+
/* @__PURE__ */ jsxs14("p", { style: { marginBottom: "1.5rem", color: "var(--color-muted-foreground)" }, children: [
|
|
1652
1754
|
"The terminal carries its own identity. By default it stays dark in both light and dark themes \u2014 but a theme can override",
|
|
1653
1755
|
" ",
|
|
1654
|
-
/* @__PURE__ */
|
|
1756
|
+
/* @__PURE__ */ jsx14("code", { children: "--qt-terminal-bg" }),
|
|
1655
1757
|
", ",
|
|
1656
|
-
/* @__PURE__ */
|
|
1758
|
+
/* @__PURE__ */ jsx14("code", { children: "--qt-terminal-fg" }),
|
|
1657
1759
|
", and the",
|
|
1658
|
-
/* @__PURE__ */
|
|
1760
|
+
/* @__PURE__ */ jsx14("code", { children: "--qt-terminal-chrome-*" }),
|
|
1659
1761
|
" tokens to reskin every surface below."
|
|
1660
1762
|
] }),
|
|
1661
|
-
/* @__PURE__ */
|
|
1662
|
-
/* @__PURE__ */
|
|
1663
|
-
/* @__PURE__ */
|
|
1664
|
-
/* @__PURE__ */
|
|
1763
|
+
/* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
|
|
1764
|
+
/* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "In-chat embed" }),
|
|
1765
|
+
/* @__PURE__ */ jsxs14("p", { style: { marginBottom: "0.75rem", fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: [
|
|
1766
|
+
/* @__PURE__ */ jsx14("code", { children: ".qt-terminal-embed" }),
|
|
1665
1767
|
" wraps the embed card; the header and footer strips inherit the surrounding theme so they nest cleanly with chat bubbles."
|
|
1666
1768
|
] }),
|
|
1667
|
-
/* @__PURE__ */
|
|
1668
|
-
/* @__PURE__ */
|
|
1669
|
-
/* @__PURE__ */
|
|
1670
|
-
/* @__PURE__ */
|
|
1671
|
-
/* @__PURE__ */
|
|
1672
|
-
/* @__PURE__ */
|
|
1769
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-terminal-embed", style: { maxWidth: "36rem" }, children: [
|
|
1770
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-terminal-embed-header", children: [
|
|
1771
|
+
/* @__PURE__ */ jsx14("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: /* @__PURE__ */ jsx14("h4", { style: { fontSize: "0.875rem", fontWeight: 500, margin: 0 }, children: "Terminal \u2014 zsh" }) }),
|
|
1772
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1773
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button-icon", type: "button", children: "Pop out" }),
|
|
1774
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button-icon qt-text-destructive", type: "button", children: "Kill" })
|
|
1673
1775
|
] })
|
|
1674
1776
|
] }),
|
|
1675
|
-
/* @__PURE__ */
|
|
1777
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-terminal-surface", style: { padding: "0.75rem", fontFamily: "var(--qt-font-mono, monospace)", color: "var(--qt-terminal-fg)", fontSize: "0.8125rem", whiteSpace: "pre-wrap" }, children: sampleOutput })
|
|
1676
1778
|
] })
|
|
1677
1779
|
] }),
|
|
1678
|
-
/* @__PURE__ */
|
|
1679
|
-
/* @__PURE__ */
|
|
1680
|
-
/* @__PURE__ */
|
|
1681
|
-
/* @__PURE__ */
|
|
1682
|
-
/* @__PURE__ */
|
|
1683
|
-
/* @__PURE__ */
|
|
1684
|
-
/* @__PURE__ */
|
|
1780
|
+
/* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
|
|
1781
|
+
/* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Embed footer (handed off to Terminal Mode pane)" }),
|
|
1782
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-terminal-embed", style: { maxWidth: "36rem" }, children: [
|
|
1783
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-terminal-embed-header", children: /* @__PURE__ */ jsx14("h4", { style: { fontSize: "0.875rem", fontWeight: 500, margin: 0 }, children: "Terminal \u2014 zsh" }) }),
|
|
1784
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-terminal-embed-footer", children: [
|
|
1785
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-text-secondary", children: "Showing in Terminal Mode pane." }),
|
|
1786
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button-secondary", type: "button", style: { fontSize: "0.75rem", padding: "0.25rem 0.5rem" }, children: "Go to pane \u2192" })
|
|
1685
1787
|
] })
|
|
1686
1788
|
] })
|
|
1687
1789
|
] }),
|
|
1688
|
-
/* @__PURE__ */
|
|
1689
|
-
/* @__PURE__ */
|
|
1690
|
-
/* @__PURE__ */
|
|
1790
|
+
/* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
|
|
1791
|
+
/* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Pop-out page chrome" }),
|
|
1792
|
+
/* @__PURE__ */ jsxs14("p", { style: { marginBottom: "0.75rem", fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: [
|
|
1691
1793
|
"The full-screen pop-out page uses",
|
|
1692
1794
|
" ",
|
|
1693
|
-
/* @__PURE__ */
|
|
1795
|
+
/* @__PURE__ */ jsx14("code", { children: ".qt-terminal-popout-page" }),
|
|
1694
1796
|
" as the outer canvas and",
|
|
1695
1797
|
" ",
|
|
1696
|
-
/* @__PURE__ */
|
|
1798
|
+
/* @__PURE__ */ jsx14("code", { children: ".qt-terminal-popout-header" }),
|
|
1697
1799
|
" for the breadcrumb bar."
|
|
1698
1800
|
] }),
|
|
1699
|
-
/* @__PURE__ */
|
|
1700
|
-
/* @__PURE__ */
|
|
1701
|
-
/* @__PURE__ */
|
|
1702
|
-
/* @__PURE__ */
|
|
1703
|
-
/* @__PURE__ */
|
|
1704
|
-
/* @__PURE__ */
|
|
1705
|
-
/* @__PURE__ */
|
|
1801
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-terminal-popout-page", style: { borderRadius: "0.5rem", overflow: "hidden", border: "1px solid var(--color-border)", height: "240px", display: "flex", flexDirection: "column" }, children: [
|
|
1802
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-terminal-popout-header", children: [
|
|
1803
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem" }, children: [
|
|
1804
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button-icon", type: "button", style: { color: "inherit" }, children: "\u2190" }),
|
|
1805
|
+
/* @__PURE__ */ jsx14("a", { href: "#", className: "qt-terminal-popout-link", style: { fontSize: "0.875rem" }, children: "Chat" }),
|
|
1806
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-terminal-popout-separator", children: "/" }),
|
|
1807
|
+
/* @__PURE__ */ jsx14("h1", { className: "qt-terminal-popout-title", style: { fontSize: "1rem", margin: 0 }, children: "Terminal \u2014 zsh" })
|
|
1706
1808
|
] }),
|
|
1707
|
-
/* @__PURE__ */
|
|
1809
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button-destructive", type: "button", style: { fontSize: "0.875rem" }, children: "Kill Session" })
|
|
1708
1810
|
] }),
|
|
1709
|
-
/* @__PURE__ */
|
|
1811
|
+
/* @__PURE__ */ jsx14("div", { style: { flex: 1, padding: "0.75rem", fontFamily: "var(--qt-font-mono, monospace)", color: "var(--qt-terminal-fg)", fontSize: "0.8125rem", whiteSpace: "pre-wrap" }, children: sampleOutput })
|
|
1710
1812
|
] })
|
|
1711
1813
|
] }),
|
|
1712
|
-
/* @__PURE__ */
|
|
1713
|
-
/* @__PURE__ */
|
|
1714
|
-
/* @__PURE__ */
|
|
1814
|
+
/* @__PURE__ */ jsxs14("section", { children: [
|
|
1815
|
+
/* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Session-exited overlay" }),
|
|
1816
|
+
/* @__PURE__ */ jsxs14("p", { style: { marginBottom: "0.75rem", fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: [
|
|
1715
1817
|
"When the PTY exits but the terminal stays mounted, the",
|
|
1716
1818
|
" ",
|
|
1717
|
-
/* @__PURE__ */
|
|
1819
|
+
/* @__PURE__ */ jsx14("code", { children: ".qt-terminal-closed-badge" }),
|
|
1718
1820
|
" overlay marks it."
|
|
1719
1821
|
] }),
|
|
1720
|
-
/* @__PURE__ */
|
|
1822
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-terminal-surface", style: { position: "relative", height: "120px", borderRadius: "0.5rem" }, children: /* @__PURE__ */ jsx14("span", { className: "qt-terminal-closed-badge", children: "Closed" }) })
|
|
1721
1823
|
] })
|
|
1722
1824
|
] });
|
|
1723
1825
|
};
|
|
1724
1826
|
|
|
1725
1827
|
// src/stories/components/FilePreview.tsx
|
|
1726
|
-
import { jsx as
|
|
1828
|
+
import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1727
1829
|
var FilePreview = () => {
|
|
1728
|
-
return /* @__PURE__ */
|
|
1729
|
-
/* @__PURE__ */
|
|
1730
|
-
/* @__PURE__ */
|
|
1731
|
-
/* @__PURE__ */
|
|
1732
|
-
/* @__PURE__ */
|
|
1733
|
-
/* @__PURE__ */
|
|
1830
|
+
return /* @__PURE__ */ jsxs15("div", { style: { padding: "1.5rem" }, children: [
|
|
1831
|
+
/* @__PURE__ */ jsx15("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "File Preview Components" }),
|
|
1832
|
+
/* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
|
|
1833
|
+
/* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Scroll Container" }),
|
|
1834
|
+
/* @__PURE__ */ jsxs15("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
1835
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-file-preview-scroll" }),
|
|
1734
1836
|
" - Scrollable container for file content with configurable max height."
|
|
1735
1837
|
] }),
|
|
1736
|
-
/* @__PURE__ */
|
|
1838
|
+
/* @__PURE__ */ jsx15("div", { className: "qt-file-preview-scroll", style: { height: "150px", border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)" }, children: /* @__PURE__ */ jsx15("div", { style: { padding: "1rem" }, children: Array.from({ length: 20 }, (_, i) => /* @__PURE__ */ jsxs15("p", { style: { margin: "0.5rem 0" }, children: [
|
|
1737
1839
|
"Line ",
|
|
1738
1840
|
i + 1,
|
|
1739
1841
|
": Lorem ipsum dolor sit amet, consectetur adipiscing elit."
|
|
1740
1842
|
] }, i)) }) })
|
|
1741
1843
|
] }),
|
|
1742
|
-
/* @__PURE__ */
|
|
1743
|
-
/* @__PURE__ */
|
|
1744
|
-
/* @__PURE__ */
|
|
1745
|
-
/* @__PURE__ */
|
|
1844
|
+
/* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
|
|
1845
|
+
/* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Content Panel" }),
|
|
1846
|
+
/* @__PURE__ */ jsxs15("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
1847
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-file-preview-panel" }),
|
|
1746
1848
|
" - Background panel for rendered markdown content."
|
|
1747
1849
|
] }),
|
|
1748
|
-
/* @__PURE__ */
|
|
1749
|
-
/* @__PURE__ */
|
|
1750
|
-
/* @__PURE__ */
|
|
1850
|
+
/* @__PURE__ */ jsxs15("div", { className: "qt-file-preview-panel", children: [
|
|
1851
|
+
/* @__PURE__ */ jsx15("h4", { style: { margin: "0 0 0.5rem 0" }, children: "Document Title" }),
|
|
1852
|
+
/* @__PURE__ */ jsx15("p", { style: { margin: 0 }, children: "This is a content panel used for displaying rendered markdown files with a subtle background." })
|
|
1751
1853
|
] })
|
|
1752
1854
|
] }),
|
|
1753
|
-
/* @__PURE__ */
|
|
1754
|
-
/* @__PURE__ */
|
|
1755
|
-
/* @__PURE__ */
|
|
1756
|
-
/* @__PURE__ */
|
|
1855
|
+
/* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
|
|
1856
|
+
/* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Code Block" }),
|
|
1857
|
+
/* @__PURE__ */ jsxs15("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
1858
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-file-preview-code" }),
|
|
1757
1859
|
" - Styled code block for plain text and source files with word wrap."
|
|
1758
1860
|
] }),
|
|
1759
|
-
/* @__PURE__ */
|
|
1861
|
+
/* @__PURE__ */ jsx15("pre", { className: "qt-file-preview-code", children: `function greet(name: string): string {
|
|
1760
1862
|
return \`Hello, \${name}!\`;
|
|
1761
1863
|
}
|
|
1762
1864
|
|
|
@@ -1764,133 +1866,133 @@ var FilePreview = () => {
|
|
|
1764
1866
|
const message = greet("World");
|
|
1765
1867
|
console.log(message);` })
|
|
1766
1868
|
] }),
|
|
1767
|
-
/* @__PURE__ */
|
|
1768
|
-
/* @__PURE__ */
|
|
1769
|
-
/* @__PURE__ */
|
|
1770
|
-
/* @__PURE__ */
|
|
1869
|
+
/* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
|
|
1870
|
+
/* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Loading State" }),
|
|
1871
|
+
/* @__PURE__ */ jsxs15("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
1872
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-file-preview-loading" }),
|
|
1771
1873
|
" + ",
|
|
1772
|
-
/* @__PURE__ */
|
|
1874
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-file-preview-loading-text" }),
|
|
1773
1875
|
" - Loading indicator."
|
|
1774
1876
|
] }),
|
|
1775
|
-
/* @__PURE__ */
|
|
1877
|
+
/* @__PURE__ */ jsx15("div", { style: { border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)" }, children: /* @__PURE__ */ jsx15("div", { className: "qt-file-preview-loading", style: { minHeight: "150px" }, children: /* @__PURE__ */ jsx15("div", { className: "qt-file-preview-loading-text", children: "Loading file..." }) }) })
|
|
1776
1878
|
] }),
|
|
1777
|
-
/* @__PURE__ */
|
|
1778
|
-
/* @__PURE__ */
|
|
1779
|
-
/* @__PURE__ */
|
|
1780
|
-
/* @__PURE__ */
|
|
1879
|
+
/* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
|
|
1880
|
+
/* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Empty / Error State" }),
|
|
1881
|
+
/* @__PURE__ */ jsxs15("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
1882
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-file-preview-empty" }),
|
|
1781
1883
|
" + ",
|
|
1782
|
-
/* @__PURE__ */
|
|
1884
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-file-preview-empty-icon" }),
|
|
1783
1885
|
" - Empty or error state display."
|
|
1784
1886
|
] }),
|
|
1785
|
-
/* @__PURE__ */
|
|
1786
|
-
/* @__PURE__ */
|
|
1787
|
-
/* @__PURE__ */
|
|
1788
|
-
/* @__PURE__ */
|
|
1887
|
+
/* @__PURE__ */ jsxs15("div", { style: { display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "1rem" }, children: [
|
|
1888
|
+
/* @__PURE__ */ jsx15("div", { style: { border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)" }, children: /* @__PURE__ */ jsxs15("div", { className: "qt-file-preview-empty", style: { minHeight: "150px" }, children: [
|
|
1889
|
+
/* @__PURE__ */ jsx15("div", { className: "qt-file-preview-empty-icon", children: "\u{1F4C4}" }),
|
|
1890
|
+
/* @__PURE__ */ jsx15("p", { children: "No content available" })
|
|
1789
1891
|
] }) }),
|
|
1790
|
-
/* @__PURE__ */
|
|
1791
|
-
/* @__PURE__ */
|
|
1792
|
-
/* @__PURE__ */
|
|
1892
|
+
/* @__PURE__ */ jsx15("div", { style: { border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)" }, children: /* @__PURE__ */ jsxs15("div", { className: "qt-file-preview-empty", style: { minHeight: "150px" }, children: [
|
|
1893
|
+
/* @__PURE__ */ jsx15("div", { className: "qt-file-preview-empty-icon", children: "\u26A0\uFE0F" }),
|
|
1894
|
+
/* @__PURE__ */ jsx15("p", { children: "Failed to load file" })
|
|
1793
1895
|
] }) })
|
|
1794
1896
|
] })
|
|
1795
1897
|
] }),
|
|
1796
|
-
/* @__PURE__ */
|
|
1797
|
-
/* @__PURE__ */
|
|
1798
|
-
/* @__PURE__ */
|
|
1799
|
-
/* @__PURE__ */
|
|
1898
|
+
/* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
|
|
1899
|
+
/* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Wikilinks" }),
|
|
1900
|
+
/* @__PURE__ */ jsxs15("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
1901
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-wikilink" }),
|
|
1800
1902
|
" + ",
|
|
1801
|
-
/* @__PURE__ */
|
|
1903
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-wikilink-broken" }),
|
|
1802
1904
|
" - Internal document links in markdown."
|
|
1803
1905
|
] }),
|
|
1804
|
-
/* @__PURE__ */
|
|
1906
|
+
/* @__PURE__ */ jsx15("div", { className: "qt-file-preview-panel", children: /* @__PURE__ */ jsxs15("p", { style: { margin: 0, lineHeight: 2 }, children: [
|
|
1805
1907
|
"This document references ",
|
|
1806
|
-
/* @__PURE__ */
|
|
1908
|
+
/* @__PURE__ */ jsx15("button", { type: "button", className: "qt-wikilink", children: "Character Profile" }),
|
|
1807
1909
|
" and links to ",
|
|
1808
|
-
/* @__PURE__ */
|
|
1910
|
+
/* @__PURE__ */ jsx15("button", { type: "button", className: "qt-wikilink", children: "World Building \u2192 Geography" }),
|
|
1809
1911
|
". There's also a ",
|
|
1810
|
-
/* @__PURE__ */
|
|
1912
|
+
/* @__PURE__ */ jsx15("button", { type: "button", className: "qt-wikilink-broken", children: "Missing Document" }),
|
|
1811
1913
|
" that doesn't exist yet."
|
|
1812
1914
|
] }) })
|
|
1813
1915
|
] }),
|
|
1814
|
-
/* @__PURE__ */
|
|
1815
|
-
/* @__PURE__ */
|
|
1816
|
-
/* @__PURE__ */
|
|
1916
|
+
/* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
|
|
1917
|
+
/* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "CSS Variables" }),
|
|
1918
|
+
/* @__PURE__ */ jsx15("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: "0.5rem" }, children: [
|
|
1817
1919
|
{ name: "--qt-file-preview-max-height", value: "70vh", desc: "Max height of scroll container" },
|
|
1818
1920
|
{ name: "--qt-file-preview-min-height", value: "300px", desc: "Min height of loading/empty states" },
|
|
1819
1921
|
{ name: "--qt-file-preview-panel-bg", value: "muted/30%", desc: "Content panel background" },
|
|
1820
1922
|
{ name: "--qt-code-bg", value: "muted", desc: "Code block background" },
|
|
1821
1923
|
{ name: "--qt-code-fg", value: "foreground", desc: "Code block text color" },
|
|
1822
1924
|
{ name: "--qt-code-font", value: "monospace", desc: "Code block font family" }
|
|
1823
|
-
].map(({ name, value, desc }) => /* @__PURE__ */
|
|
1824
|
-
/* @__PURE__ */
|
|
1825
|
-
/* @__PURE__ */
|
|
1925
|
+
].map(({ name, value, desc }) => /* @__PURE__ */ jsxs15("div", { style: { padding: "0.75rem", background: "var(--color-muted)", borderRadius: "var(--radius-md)" }, children: [
|
|
1926
|
+
/* @__PURE__ */ jsx15("code", { style: { fontSize: "0.75rem", fontWeight: 600 }, children: name }),
|
|
1927
|
+
/* @__PURE__ */ jsxs15("div", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)", marginTop: "0.25rem" }, children: [
|
|
1826
1928
|
"Default: ",
|
|
1827
1929
|
value
|
|
1828
1930
|
] }),
|
|
1829
|
-
/* @__PURE__ */
|
|
1931
|
+
/* @__PURE__ */ jsx15("div", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: desc })
|
|
1830
1932
|
] }, name)) })
|
|
1831
1933
|
] })
|
|
1832
1934
|
] });
|
|
1833
1935
|
};
|
|
1834
1936
|
|
|
1835
1937
|
// src/stories/components/ThemeComparison.tsx
|
|
1836
|
-
import { jsx as
|
|
1938
|
+
import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1837
1939
|
var ThemePanel = ({ title, description }) => {
|
|
1838
|
-
return /* @__PURE__ */
|
|
1839
|
-
/* @__PURE__ */
|
|
1840
|
-
/* @__PURE__ */
|
|
1841
|
-
/* @__PURE__ */
|
|
1842
|
-
] }),
|
|
1843
|
-
/* @__PURE__ */
|
|
1844
|
-
/* @__PURE__ */
|
|
1845
|
-
/* @__PURE__ */
|
|
1846
|
-
/* @__PURE__ */
|
|
1940
|
+
return /* @__PURE__ */ jsxs16("div", { style: { flex: 1, minWidth: "20rem" }, children: [
|
|
1941
|
+
/* @__PURE__ */ jsxs16("div", { style: { marginBottom: "1rem" }, children: [
|
|
1942
|
+
/* @__PURE__ */ jsx16("h4", { style: { fontWeight: 600 }, children: title }),
|
|
1943
|
+
/* @__PURE__ */ jsx16("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: description })
|
|
1944
|
+
] }),
|
|
1945
|
+
/* @__PURE__ */ jsxs16("div", { className: "qt-card", style: { marginBottom: "1rem" }, children: [
|
|
1946
|
+
/* @__PURE__ */ jsxs16("div", { className: "qt-card-header", children: [
|
|
1947
|
+
/* @__PURE__ */ jsx16("h5", { className: "qt-card-title", children: "Sample Card" }),
|
|
1948
|
+
/* @__PURE__ */ jsx16("p", { className: "qt-card-description", children: "This is how cards look in this theme." })
|
|
1847
1949
|
] }),
|
|
1848
|
-
/* @__PURE__ */
|
|
1849
|
-
/* @__PURE__ */
|
|
1850
|
-
/* @__PURE__ */
|
|
1851
|
-
/* @__PURE__ */
|
|
1852
|
-
/* @__PURE__ */
|
|
1853
|
-
/* @__PURE__ */
|
|
1950
|
+
/* @__PURE__ */ jsxs16("div", { className: "qt-card-body", children: [
|
|
1951
|
+
/* @__PURE__ */ jsx16("p", { style: { marginBottom: "1rem" }, children: "Cards are used throughout the application for grouping content." }),
|
|
1952
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", gap: "0.5rem", flexWrap: "wrap" }, children: [
|
|
1953
|
+
/* @__PURE__ */ jsx16("span", { className: "qt-badge qt-badge-primary", children: "Primary" }),
|
|
1954
|
+
/* @__PURE__ */ jsx16("span", { className: "qt-badge qt-badge-secondary", children: "Secondary" }),
|
|
1955
|
+
/* @__PURE__ */ jsx16("span", { className: "qt-badge qt-badge-success", children: "Success" })
|
|
1854
1956
|
] })
|
|
1855
1957
|
] }),
|
|
1856
|
-
/* @__PURE__ */
|
|
1857
|
-
/* @__PURE__ */
|
|
1858
|
-
/* @__PURE__ */
|
|
1958
|
+
/* @__PURE__ */ jsxs16("div", { className: "qt-card-footer", children: [
|
|
1959
|
+
/* @__PURE__ */ jsx16("button", { className: "qt-button qt-button-ghost", children: "Cancel" }),
|
|
1960
|
+
/* @__PURE__ */ jsx16("button", { className: "qt-button qt-button-primary", children: "Save" })
|
|
1859
1961
|
] })
|
|
1860
1962
|
] }),
|
|
1861
|
-
/* @__PURE__ */
|
|
1862
|
-
/* @__PURE__ */
|
|
1863
|
-
/* @__PURE__ */
|
|
1864
|
-
/* @__PURE__ */
|
|
1963
|
+
/* @__PURE__ */ jsxs16("div", { className: "qt-panel", style: { padding: "1rem", marginBottom: "1rem" }, children: [
|
|
1964
|
+
/* @__PURE__ */ jsxs16("div", { style: { marginBottom: "0.75rem" }, children: [
|
|
1965
|
+
/* @__PURE__ */ jsx16("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Text Input" }),
|
|
1966
|
+
/* @__PURE__ */ jsx16("input", { className: "qt-input", type: "text", placeholder: "Enter text..." })
|
|
1865
1967
|
] }),
|
|
1866
|
-
/* @__PURE__ */
|
|
1867
|
-
/* @__PURE__ */
|
|
1868
|
-
/* @__PURE__ */
|
|
1869
|
-
/* @__PURE__ */
|
|
1870
|
-
/* @__PURE__ */
|
|
1968
|
+
/* @__PURE__ */ jsxs16("div", { style: { marginBottom: "0.75rem" }, children: [
|
|
1969
|
+
/* @__PURE__ */ jsx16("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Select" }),
|
|
1970
|
+
/* @__PURE__ */ jsxs16("select", { className: "qt-input qt-select", children: [
|
|
1971
|
+
/* @__PURE__ */ jsx16("option", { children: "Option 1" }),
|
|
1972
|
+
/* @__PURE__ */ jsx16("option", { children: "Option 2" })
|
|
1871
1973
|
] })
|
|
1872
1974
|
] }),
|
|
1873
|
-
/* @__PURE__ */
|
|
1874
|
-
/* @__PURE__ */
|
|
1875
|
-
/* @__PURE__ */
|
|
1975
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1976
|
+
/* @__PURE__ */ jsx16("button", { className: "qt-button qt-button-secondary qt-button-sm", children: "Secondary" }),
|
|
1977
|
+
/* @__PURE__ */ jsx16("button", { className: "qt-button qt-button-primary qt-button-sm", children: "Primary" })
|
|
1876
1978
|
] })
|
|
1877
1979
|
] }),
|
|
1878
|
-
/* @__PURE__ */
|
|
1879
|
-
/* @__PURE__ */
|
|
1880
|
-
/* @__PURE__ */
|
|
1881
|
-
/* @__PURE__ */
|
|
1980
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
1981
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1982
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx16("div", { className: "qt-avatar-fallback", children: "AI" }) }),
|
|
1983
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-chat-message qt-chat-message-assistant", style: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx16("p", { style: { fontSize: "0.875rem" }, children: "Hello! This is a chat message." }) })
|
|
1882
1984
|
] }),
|
|
1883
|
-
/* @__PURE__ */
|
|
1985
|
+
/* @__PURE__ */ jsx16("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx16("div", { className: "qt-chat-message qt-chat-message-user", style: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx16("p", { style: { fontSize: "0.875rem" }, children: "Great, thanks!" }) }) })
|
|
1884
1986
|
] })
|
|
1885
1987
|
] });
|
|
1886
1988
|
};
|
|
1887
1989
|
var ThemeComparison = () => {
|
|
1888
|
-
return /* @__PURE__ */
|
|
1889
|
-
/* @__PURE__ */
|
|
1890
|
-
/* @__PURE__ */
|
|
1891
|
-
/* @__PURE__ */
|
|
1892
|
-
/* @__PURE__ */
|
|
1893
|
-
/* @__PURE__ */
|
|
1990
|
+
return /* @__PURE__ */ jsxs16("div", { style: { padding: "1.5rem" }, children: [
|
|
1991
|
+
/* @__PURE__ */ jsx16("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "0.5rem" }, children: "Theme Comparison" }),
|
|
1992
|
+
/* @__PURE__ */ jsx16("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1.5rem" }, children: "Compare your custom theme against the default Quilltap theme. Use the theme toggle above to switch between themes." }),
|
|
1993
|
+
/* @__PURE__ */ jsxs16("section", { style: { marginBottom: "2rem" }, children: [
|
|
1994
|
+
/* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Current Theme Preview" }),
|
|
1995
|
+
/* @__PURE__ */ jsx16(
|
|
1894
1996
|
ThemePanel,
|
|
1895
1997
|
{
|
|
1896
1998
|
title: "Active Theme",
|
|
@@ -1898,9 +2000,9 @@ var ThemeComparison = () => {
|
|
|
1898
2000
|
}
|
|
1899
2001
|
)
|
|
1900
2002
|
] }),
|
|
1901
|
-
/* @__PURE__ */
|
|
1902
|
-
/* @__PURE__ */
|
|
1903
|
-
/* @__PURE__ */
|
|
2003
|
+
/* @__PURE__ */ jsxs16("section", { style: { marginBottom: "2rem" }, children: [
|
|
2004
|
+
/* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Key Theme Colors" }),
|
|
2005
|
+
/* @__PURE__ */ jsx16("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(8rem, 1fr))", gap: "0.75rem" }, children: [
|
|
1904
2006
|
{ name: "Background", var: "--color-background" },
|
|
1905
2007
|
{ name: "Foreground", var: "--color-foreground" },
|
|
1906
2008
|
{ name: "Card", var: "--color-card" },
|
|
@@ -1909,8 +2011,8 @@ var ThemeComparison = () => {
|
|
|
1909
2011
|
{ name: "Muted", var: "--color-muted" },
|
|
1910
2012
|
{ name: "Accent", var: "--color-accent" },
|
|
1911
2013
|
{ name: "Border", var: "--color-border" }
|
|
1912
|
-
].map(({ name, var: cssVar }) => /* @__PURE__ */
|
|
1913
|
-
/* @__PURE__ */
|
|
2014
|
+
].map(({ name, var: cssVar }) => /* @__PURE__ */ jsxs16("div", { style: { textAlign: "center" }, children: [
|
|
2015
|
+
/* @__PURE__ */ jsx16(
|
|
1914
2016
|
"div",
|
|
1915
2017
|
{
|
|
1916
2018
|
style: {
|
|
@@ -1922,17 +2024,17 @@ var ThemeComparison = () => {
|
|
|
1922
2024
|
}
|
|
1923
2025
|
}
|
|
1924
2026
|
),
|
|
1925
|
-
/* @__PURE__ */
|
|
2027
|
+
/* @__PURE__ */ jsx16("div", { style: { marginTop: "0.25rem", fontSize: "0.75rem", fontWeight: 500 }, children: name })
|
|
1926
2028
|
] }, cssVar)) })
|
|
1927
2029
|
] }),
|
|
1928
|
-
/* @__PURE__ */
|
|
1929
|
-
/* @__PURE__ */
|
|
1930
|
-
/* @__PURE__ */
|
|
2030
|
+
/* @__PURE__ */ jsxs16("section", { style: { marginBottom: "2rem" }, children: [
|
|
2031
|
+
/* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Semantic Colors" }),
|
|
2032
|
+
/* @__PURE__ */ jsx16("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(8rem, 1fr))", gap: "0.75rem" }, children: [
|
|
1931
2033
|
{ name: "Destructive", var: "--color-destructive" },
|
|
1932
2034
|
{ name: "Success", var: "--color-success" },
|
|
1933
2035
|
{ name: "Warning", var: "--color-warning" }
|
|
1934
|
-
].map(({ name, var: cssVar }) => /* @__PURE__ */
|
|
1935
|
-
/* @__PURE__ */
|
|
2036
|
+
].map(({ name, var: cssVar }) => /* @__PURE__ */ jsxs16("div", { style: { textAlign: "center" }, children: [
|
|
2037
|
+
/* @__PURE__ */ jsx16(
|
|
1936
2038
|
"div",
|
|
1937
2039
|
{
|
|
1938
2040
|
style: {
|
|
@@ -1944,50 +2046,50 @@ var ThemeComparison = () => {
|
|
|
1944
2046
|
}
|
|
1945
2047
|
}
|
|
1946
2048
|
),
|
|
1947
|
-
/* @__PURE__ */
|
|
2049
|
+
/* @__PURE__ */ jsx16("div", { style: { marginTop: "0.25rem", fontSize: "0.75rem", fontWeight: 500 }, children: name })
|
|
1948
2050
|
] }, cssVar)) })
|
|
1949
2051
|
] }),
|
|
1950
|
-
/* @__PURE__ */
|
|
1951
|
-
/* @__PURE__ */
|
|
1952
|
-
/* @__PURE__ */
|
|
1953
|
-
/* @__PURE__ */
|
|
1954
|
-
/* @__PURE__ */
|
|
1955
|
-
/* @__PURE__ */
|
|
1956
|
-
/* @__PURE__ */
|
|
1957
|
-
/* @__PURE__ */
|
|
1958
|
-
/* @__PURE__ */
|
|
1959
|
-
/* @__PURE__ */
|
|
2052
|
+
/* @__PURE__ */ jsxs16("section", { children: [
|
|
2053
|
+
/* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Component Showcase" }),
|
|
2054
|
+
/* @__PURE__ */ jsxs16("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
2055
|
+
/* @__PURE__ */ jsx16("h4", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Buttons" }),
|
|
2056
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: [
|
|
2057
|
+
/* @__PURE__ */ jsx16("button", { className: "qt-button qt-button-primary", children: "Primary" }),
|
|
2058
|
+
/* @__PURE__ */ jsx16("button", { className: "qt-button qt-button-secondary", children: "Secondary" }),
|
|
2059
|
+
/* @__PURE__ */ jsx16("button", { className: "qt-button qt-button-ghost", children: "Ghost" }),
|
|
2060
|
+
/* @__PURE__ */ jsx16("button", { className: "qt-button qt-button-destructive", children: "Destructive" }),
|
|
2061
|
+
/* @__PURE__ */ jsx16("button", { className: "qt-button qt-button-primary", disabled: true, children: "Disabled" })
|
|
1960
2062
|
] })
|
|
1961
2063
|
] }),
|
|
1962
|
-
/* @__PURE__ */
|
|
1963
|
-
/* @__PURE__ */
|
|
1964
|
-
/* @__PURE__ */
|
|
1965
|
-
/* @__PURE__ */
|
|
1966
|
-
/* @__PURE__ */
|
|
1967
|
-
/* @__PURE__ */
|
|
1968
|
-
/* @__PURE__ */
|
|
1969
|
-
/* @__PURE__ */
|
|
1970
|
-
/* @__PURE__ */
|
|
2064
|
+
/* @__PURE__ */ jsxs16("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
2065
|
+
/* @__PURE__ */ jsx16("h4", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Badges" }),
|
|
2066
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: [
|
|
2067
|
+
/* @__PURE__ */ jsx16("span", { className: "qt-badge qt-badge-default", children: "Default" }),
|
|
2068
|
+
/* @__PURE__ */ jsx16("span", { className: "qt-badge qt-badge-primary", children: "Primary" }),
|
|
2069
|
+
/* @__PURE__ */ jsx16("span", { className: "qt-badge qt-badge-secondary", children: "Secondary" }),
|
|
2070
|
+
/* @__PURE__ */ jsx16("span", { className: "qt-badge qt-badge-success", children: "Success" }),
|
|
2071
|
+
/* @__PURE__ */ jsx16("span", { className: "qt-badge qt-badge-warning", children: "Warning" }),
|
|
2072
|
+
/* @__PURE__ */ jsx16("span", { className: "qt-badge qt-badge-destructive", children: "Destructive" })
|
|
1971
2073
|
] })
|
|
1972
2074
|
] }),
|
|
1973
|
-
/* @__PURE__ */
|
|
1974
|
-
/* @__PURE__ */
|
|
1975
|
-
/* @__PURE__ */
|
|
1976
|
-
/* @__PURE__ */
|
|
1977
|
-
/* @__PURE__ */
|
|
1978
|
-
/* @__PURE__ */
|
|
1979
|
-
/* @__PURE__ */
|
|
2075
|
+
/* @__PURE__ */ jsxs16("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
2076
|
+
/* @__PURE__ */ jsx16("h4", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Interactive Card" }),
|
|
2077
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-card qt-card-interactive", style: { maxWidth: "20rem", cursor: "pointer" }, children: /* @__PURE__ */ jsx16("div", { className: "qt-card-header", children: /* @__PURE__ */ jsxs16("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem" }, children: [
|
|
2078
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx16("div", { className: "qt-avatar-fallback", children: "A" }) }),
|
|
2079
|
+
/* @__PURE__ */ jsxs16("div", { children: [
|
|
2080
|
+
/* @__PURE__ */ jsx16("h5", { className: "qt-card-title", children: "Character Name" }),
|
|
2081
|
+
/* @__PURE__ */ jsx16("p", { className: "qt-card-description", children: "Click to interact" })
|
|
1980
2082
|
] })
|
|
1981
2083
|
] }) }) })
|
|
1982
2084
|
] }),
|
|
1983
|
-
/* @__PURE__ */
|
|
1984
|
-
/* @__PURE__ */
|
|
1985
|
-
/* @__PURE__ */
|
|
1986
|
-
/* @__PURE__ */
|
|
1987
|
-
/* @__PURE__ */
|
|
1988
|
-
/* @__PURE__ */
|
|
1989
|
-
/* @__PURE__ */
|
|
1990
|
-
/* @__PURE__ */
|
|
2085
|
+
/* @__PURE__ */ jsxs16("div", { children: [
|
|
2086
|
+
/* @__PURE__ */ jsx16("h4", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Form Elements" }),
|
|
2087
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", gap: "1rem", flexWrap: "wrap", maxWidth: "32rem" }, children: [
|
|
2088
|
+
/* @__PURE__ */ jsx16("input", { className: "qt-input", type: "text", placeholder: "Text input", style: { flex: "1 1 10rem" } }),
|
|
2089
|
+
/* @__PURE__ */ jsxs16("select", { className: "qt-input qt-select", style: { flex: "1 1 10rem" }, children: [
|
|
2090
|
+
/* @__PURE__ */ jsx16("option", { children: "Select option" }),
|
|
2091
|
+
/* @__PURE__ */ jsx16("option", { children: "Option 1" }),
|
|
2092
|
+
/* @__PURE__ */ jsx16("option", { children: "Option 2" })
|
|
1991
2093
|
] })
|
|
1992
2094
|
] })
|
|
1993
2095
|
] })
|
|
@@ -1996,125 +2098,125 @@ var ThemeComparison = () => {
|
|
|
1996
2098
|
};
|
|
1997
2099
|
|
|
1998
2100
|
// src/stories/components/EmptyState.tsx
|
|
1999
|
-
import { jsx as
|
|
2101
|
+
import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
2000
2102
|
var EmptyState = () => {
|
|
2001
|
-
return /* @__PURE__ */
|
|
2002
|
-
/* @__PURE__ */
|
|
2003
|
-
/* @__PURE__ */
|
|
2004
|
-
/* @__PURE__ */
|
|
2005
|
-
/* @__PURE__ */
|
|
2006
|
-
/* @__PURE__ */
|
|
2007
|
-
/* @__PURE__ */
|
|
2008
|
-
/* @__PURE__ */
|
|
2103
|
+
return /* @__PURE__ */ jsxs17("div", { style: { padding: "1.5rem" }, children: [
|
|
2104
|
+
/* @__PURE__ */ jsx17("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Empty States" }),
|
|
2105
|
+
/* @__PURE__ */ jsxs17("section", { style: { marginBottom: "2rem" }, children: [
|
|
2106
|
+
/* @__PURE__ */ jsx17("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Basic Empty State" }),
|
|
2107
|
+
/* @__PURE__ */ jsxs17("div", { className: "qt-empty-state", children: [
|
|
2108
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-empty-state-icon", children: /* @__PURE__ */ jsx17("svg", { className: "w-12 h-12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("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" }) }) }),
|
|
2109
|
+
/* @__PURE__ */ jsx17("h4", { className: "qt-empty-state-title", children: "No messages yet" }),
|
|
2110
|
+
/* @__PURE__ */ jsx17("p", { className: "qt-empty-state-description", children: "Start a conversation to see messages appear here." })
|
|
2009
2111
|
] })
|
|
2010
2112
|
] }),
|
|
2011
|
-
/* @__PURE__ */
|
|
2012
|
-
/* @__PURE__ */
|
|
2013
|
-
/* @__PURE__ */
|
|
2014
|
-
/* @__PURE__ */
|
|
2015
|
-
/* @__PURE__ */
|
|
2016
|
-
/* @__PURE__ */
|
|
2017
|
-
/* @__PURE__ */
|
|
2113
|
+
/* @__PURE__ */ jsxs17("section", { style: { marginBottom: "2rem" }, children: [
|
|
2114
|
+
/* @__PURE__ */ jsx17("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Empty State with Action" }),
|
|
2115
|
+
/* @__PURE__ */ jsxs17("div", { className: "qt-empty-state", children: [
|
|
2116
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-empty-state-icon", children: /* @__PURE__ */ jsx17("svg", { className: "w-12 h-12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("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" }) }) }),
|
|
2117
|
+
/* @__PURE__ */ jsx17("h4", { className: "qt-empty-state-title", children: "No characters" }),
|
|
2118
|
+
/* @__PURE__ */ jsx17("p", { className: "qt-empty-state-description", children: "You haven't created any characters yet. Create your first character to get started." }),
|
|
2119
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-empty-state-action", children: /* @__PURE__ */ jsx17("button", { className: "qt-button qt-button-primary", children: "Create Character" }) })
|
|
2018
2120
|
] })
|
|
2019
2121
|
] }),
|
|
2020
|
-
/* @__PURE__ */
|
|
2021
|
-
/* @__PURE__ */
|
|
2022
|
-
/* @__PURE__ */
|
|
2023
|
-
/* @__PURE__ */
|
|
2024
|
-
/* @__PURE__ */
|
|
2025
|
-
/* @__PURE__ */
|
|
2026
|
-
/* @__PURE__ */
|
|
2122
|
+
/* @__PURE__ */ jsxs17("section", { style: { marginBottom: "2rem" }, children: [
|
|
2123
|
+
/* @__PURE__ */ jsx17("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Search Empty State" }),
|
|
2124
|
+
/* @__PURE__ */ jsxs17("div", { className: "qt-empty-state", children: [
|
|
2125
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-empty-state-icon", children: /* @__PURE__ */ jsx17("svg", { className: "w-12 h-12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }) }),
|
|
2126
|
+
/* @__PURE__ */ jsx17("h4", { className: "qt-empty-state-title", children: "No results found" }),
|
|
2127
|
+
/* @__PURE__ */ jsx17("p", { className: "qt-empty-state-description", children: "Try adjusting your search or filters to find what you're looking for." }),
|
|
2128
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-empty-state-action", children: /* @__PURE__ */ jsx17("button", { className: "qt-button qt-button-secondary", children: "Clear Filters" }) })
|
|
2027
2129
|
] })
|
|
2028
2130
|
] }),
|
|
2029
|
-
/* @__PURE__ */
|
|
2030
|
-
/* @__PURE__ */
|
|
2031
|
-
/* @__PURE__ */
|
|
2032
|
-
/* @__PURE__ */
|
|
2033
|
-
/* @__PURE__ */
|
|
2034
|
-
/* @__PURE__ */
|
|
2035
|
-
/* @__PURE__ */
|
|
2131
|
+
/* @__PURE__ */ jsxs17("section", { children: [
|
|
2132
|
+
/* @__PURE__ */ jsx17("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Error Empty State" }),
|
|
2133
|
+
/* @__PURE__ */ jsxs17("div", { className: "qt-empty-state", children: [
|
|
2134
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-empty-state-icon text-red-500", children: /* @__PURE__ */ jsx17("svg", { className: "w-12 h-12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("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" }) }) }),
|
|
2135
|
+
/* @__PURE__ */ jsx17("h4", { className: "qt-empty-state-title", children: "Something went wrong" }),
|
|
2136
|
+
/* @__PURE__ */ jsx17("p", { className: "qt-empty-state-description", children: "We couldn't load the content. Please try again." }),
|
|
2137
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-empty-state-action", children: /* @__PURE__ */ jsx17("button", { className: "qt-button qt-button-primary", children: "Try Again" }) })
|
|
2036
2138
|
] })
|
|
2037
2139
|
] })
|
|
2038
2140
|
] });
|
|
2039
2141
|
};
|
|
2040
2142
|
|
|
2041
2143
|
// src/stories/components/Loading.tsx
|
|
2042
|
-
import { jsx as
|
|
2144
|
+
import { jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
2043
2145
|
var Loading = () => {
|
|
2044
|
-
return /* @__PURE__ */
|
|
2045
|
-
/* @__PURE__ */
|
|
2046
|
-
/* @__PURE__ */
|
|
2047
|
-
/* @__PURE__ */
|
|
2048
|
-
/* @__PURE__ */
|
|
2049
|
-
/* @__PURE__ */
|
|
2050
|
-
/* @__PURE__ */
|
|
2051
|
-
/* @__PURE__ */
|
|
2052
|
-
] }),
|
|
2053
|
-
/* @__PURE__ */
|
|
2054
|
-
/* @__PURE__ */
|
|
2055
|
-
/* @__PURE__ */
|
|
2056
|
-
] }),
|
|
2057
|
-
/* @__PURE__ */
|
|
2058
|
-
/* @__PURE__ */
|
|
2059
|
-
/* @__PURE__ */
|
|
2146
|
+
return /* @__PURE__ */ jsxs18("div", { style: { padding: "1.5rem" }, children: [
|
|
2147
|
+
/* @__PURE__ */ jsx18("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Loading States" }),
|
|
2148
|
+
/* @__PURE__ */ jsxs18("section", { style: { marginBottom: "2rem" }, children: [
|
|
2149
|
+
/* @__PURE__ */ jsx18("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Spinners" }),
|
|
2150
|
+
/* @__PURE__ */ jsxs18("div", { style: { display: "flex", gap: "2rem", alignItems: "center" }, children: [
|
|
2151
|
+
/* @__PURE__ */ jsxs18("div", { style: { textAlign: "center" }, children: [
|
|
2152
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-spinner qt-spinner-sm", style: { margin: "0 auto" } }),
|
|
2153
|
+
/* @__PURE__ */ jsx18("p", { style: { fontSize: "0.75rem", marginTop: "0.5rem" }, children: "Small" })
|
|
2154
|
+
] }),
|
|
2155
|
+
/* @__PURE__ */ jsxs18("div", { style: { textAlign: "center" }, children: [
|
|
2156
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-spinner", style: { margin: "0 auto" } }),
|
|
2157
|
+
/* @__PURE__ */ jsx18("p", { style: { fontSize: "0.75rem", marginTop: "0.5rem" }, children: "Default" })
|
|
2158
|
+
] }),
|
|
2159
|
+
/* @__PURE__ */ jsxs18("div", { style: { textAlign: "center" }, children: [
|
|
2160
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-spinner qt-spinner-lg", style: { margin: "0 auto" } }),
|
|
2161
|
+
/* @__PURE__ */ jsx18("p", { style: { fontSize: "0.75rem", marginTop: "0.5rem" }, children: "Large" })
|
|
2060
2162
|
] })
|
|
2061
2163
|
] })
|
|
2062
2164
|
] }),
|
|
2063
|
-
/* @__PURE__ */
|
|
2064
|
-
/* @__PURE__ */
|
|
2065
|
-
/* @__PURE__ */
|
|
2066
|
-
/* @__PURE__ */
|
|
2067
|
-
/* @__PURE__ */
|
|
2068
|
-
/* @__PURE__ */
|
|
2165
|
+
/* @__PURE__ */ jsxs18("section", { style: { marginBottom: "2rem" }, children: [
|
|
2166
|
+
/* @__PURE__ */ jsx18("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Skeleton Text" }),
|
|
2167
|
+
/* @__PURE__ */ jsxs18("div", { style: { maxWidth: "28rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2168
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "100%" } }),
|
|
2169
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "80%" } }),
|
|
2170
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "60%" } })
|
|
2069
2171
|
] })
|
|
2070
2172
|
] }),
|
|
2071
|
-
/* @__PURE__ */
|
|
2072
|
-
/* @__PURE__ */
|
|
2073
|
-
/* @__PURE__ */
|
|
2074
|
-
/* @__PURE__ */
|
|
2075
|
-
/* @__PURE__ */
|
|
2076
|
-
/* @__PURE__ */
|
|
2077
|
-
/* @__PURE__ */
|
|
2078
|
-
/* @__PURE__ */
|
|
2173
|
+
/* @__PURE__ */ jsxs18("section", { style: { marginBottom: "2rem" }, children: [
|
|
2174
|
+
/* @__PURE__ */ jsx18("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Skeleton Card" }),
|
|
2175
|
+
/* @__PURE__ */ jsxs18("div", { className: "qt-card", style: { maxWidth: "24rem", padding: "1rem" }, children: [
|
|
2176
|
+
/* @__PURE__ */ jsxs18("div", { style: { display: "flex", gap: "0.75rem", marginBottom: "1rem", alignItems: "flex-start" }, children: [
|
|
2177
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-circle", style: { width: "40px", height: "40px", flexShrink: 0 } }),
|
|
2178
|
+
/* @__PURE__ */ jsxs18("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2179
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "60%" } }),
|
|
2180
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "40%" } })
|
|
2079
2181
|
] })
|
|
2080
2182
|
] }),
|
|
2081
|
-
/* @__PURE__ */
|
|
2082
|
-
/* @__PURE__ */
|
|
2083
|
-
/* @__PURE__ */
|
|
2084
|
-
/* @__PURE__ */
|
|
2183
|
+
/* @__PURE__ */ jsxs18("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2184
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text" }),
|
|
2185
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text" }),
|
|
2186
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "75%" } })
|
|
2085
2187
|
] })
|
|
2086
2188
|
] })
|
|
2087
2189
|
] }),
|
|
2088
|
-
/* @__PURE__ */
|
|
2089
|
-
/* @__PURE__ */
|
|
2090
|
-
/* @__PURE__ */
|
|
2091
|
-
/* @__PURE__ */
|
|
2092
|
-
/* @__PURE__ */
|
|
2093
|
-
/* @__PURE__ */
|
|
2094
|
-
/* @__PURE__ */
|
|
2095
|
-
/* @__PURE__ */
|
|
2096
|
-
/* @__PURE__ */
|
|
2097
|
-
/* @__PURE__ */
|
|
2190
|
+
/* @__PURE__ */ jsxs18("section", { style: { marginBottom: "2rem" }, children: [
|
|
2191
|
+
/* @__PURE__ */ jsx18("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Skeleton Message" }),
|
|
2192
|
+
/* @__PURE__ */ jsx18("div", { style: { maxWidth: "42rem", display: "flex", flexDirection: "column", gap: "1rem" }, children: /* @__PURE__ */ jsxs18("div", { style: { display: "flex", gap: "0.75rem" }, children: [
|
|
2193
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-circle", style: { width: "32px", height: "32px", flexShrink: 0 } }),
|
|
2194
|
+
/* @__PURE__ */ jsxs18("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2195
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "120px" } }),
|
|
2196
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-card", style: { padding: "1rem" }, children: /* @__PURE__ */ jsxs18("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2197
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text" }),
|
|
2198
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text" }),
|
|
2199
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "60%" } })
|
|
2098
2200
|
] }) })
|
|
2099
2201
|
] })
|
|
2100
2202
|
] }) })
|
|
2101
2203
|
] }),
|
|
2102
|
-
/* @__PURE__ */
|
|
2103
|
-
/* @__PURE__ */
|
|
2104
|
-
/* @__PURE__ */
|
|
2105
|
-
/* @__PURE__ */
|
|
2106
|
-
/* @__PURE__ */
|
|
2204
|
+
/* @__PURE__ */ jsxs18("section", { style: { marginBottom: "2rem" }, children: [
|
|
2205
|
+
/* @__PURE__ */ jsx18("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Skeleton List" }),
|
|
2206
|
+
/* @__PURE__ */ jsx18("div", { style: { maxWidth: "24rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs18("div", { className: "qt-card", style: { padding: "0.75rem", display: "flex", gap: "0.75rem", alignItems: "center" }, children: [
|
|
2207
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-circle", style: { width: "32px", height: "32px", flexShrink: 0 } }),
|
|
2208
|
+
/* @__PURE__ */ jsx18("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "70%" } }) })
|
|
2107
2209
|
] }, i)) })
|
|
2108
2210
|
] }),
|
|
2109
|
-
/* @__PURE__ */
|
|
2110
|
-
/* @__PURE__ */
|
|
2111
|
-
/* @__PURE__ */
|
|
2112
|
-
/* @__PURE__ */
|
|
2113
|
-
/* @__PURE__ */
|
|
2211
|
+
/* @__PURE__ */ jsxs18("section", { children: [
|
|
2212
|
+
/* @__PURE__ */ jsx18("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Loading Button" }),
|
|
2213
|
+
/* @__PURE__ */ jsxs18("div", { style: { display: "flex", gap: "1rem" }, children: [
|
|
2214
|
+
/* @__PURE__ */ jsxs18("button", { className: "qt-button qt-button-primary", disabled: true, style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
2215
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-spinner qt-spinner-sm" }),
|
|
2114
2216
|
"Loading..."
|
|
2115
2217
|
] }),
|
|
2116
|
-
/* @__PURE__ */
|
|
2117
|
-
/* @__PURE__ */
|
|
2218
|
+
/* @__PURE__ */ jsxs18("button", { className: "qt-button qt-button-secondary", disabled: true, style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
2219
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-spinner qt-spinner-sm" }),
|
|
2118
2220
|
"Saving..."
|
|
2119
2221
|
] })
|
|
2120
2222
|
] })
|
|
@@ -2123,130 +2225,130 @@ var Loading = () => {
|
|
|
2123
2225
|
};
|
|
2124
2226
|
|
|
2125
2227
|
// src/stories/components/Participant.tsx
|
|
2126
|
-
import { jsx as
|
|
2228
|
+
import { jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
2127
2229
|
var Participant = () => {
|
|
2128
|
-
return /* @__PURE__ */
|
|
2129
|
-
/* @__PURE__ */
|
|
2130
|
-
/* @__PURE__ */
|
|
2131
|
-
/* @__PURE__ */
|
|
2132
|
-
/* @__PURE__ */
|
|
2133
|
-
/* @__PURE__ */
|
|
2134
|
-
/* @__PURE__ */
|
|
2135
|
-
/* @__PURE__ */
|
|
2136
|
-
/* @__PURE__ */
|
|
2137
|
-
/* @__PURE__ */
|
|
2230
|
+
return /* @__PURE__ */ jsxs19("div", { style: { padding: "1.5rem" }, children: [
|
|
2231
|
+
/* @__PURE__ */ jsx19("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Participants" }),
|
|
2232
|
+
/* @__PURE__ */ jsxs19("section", { style: { marginBottom: "2rem" }, children: [
|
|
2233
|
+
/* @__PURE__ */ jsx19("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Participant Cards" }),
|
|
2234
|
+
/* @__PURE__ */ jsxs19("div", { style: { maxWidth: "20rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2235
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2236
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar-fallback", children: "AC" }) }) }),
|
|
2237
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-info", children: [
|
|
2238
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", children: "Alice Character" }),
|
|
2239
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-status", children: "AI Assistant" })
|
|
2138
2240
|
] })
|
|
2139
2241
|
] }) }),
|
|
2140
|
-
/* @__PURE__ */
|
|
2141
|
-
/* @__PURE__ */
|
|
2142
|
-
/* @__PURE__ */
|
|
2143
|
-
/* @__PURE__ */
|
|
2144
|
-
/* @__PURE__ */
|
|
2242
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card qt-participant-card-active", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2243
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar-fallback", children: "BC" }) }) }),
|
|
2244
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-info", children: [
|
|
2245
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", children: "Bob Character" }),
|
|
2246
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-status", children: "Currently Speaking" })
|
|
2145
2247
|
] })
|
|
2146
2248
|
] }) }),
|
|
2147
|
-
/* @__PURE__ */
|
|
2148
|
-
/* @__PURE__ */
|
|
2149
|
-
/* @__PURE__ */
|
|
2150
|
-
/* @__PURE__ */
|
|
2151
|
-
/* @__PURE__ */
|
|
2249
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2250
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar-fallback", children: "YO" }) }) }),
|
|
2251
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-info", children: [
|
|
2252
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", children: "You" }),
|
|
2253
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-status", children: "Human" })
|
|
2152
2254
|
] })
|
|
2153
2255
|
] }) })
|
|
2154
2256
|
] })
|
|
2155
2257
|
] }),
|
|
2156
|
-
/* @__PURE__ */
|
|
2157
|
-
/* @__PURE__ */
|
|
2158
|
-
/* @__PURE__ */
|
|
2159
|
-
/* @__PURE__ */
|
|
2160
|
-
/* @__PURE__ */
|
|
2161
|
-
/* @__PURE__ */
|
|
2162
|
-
/* @__PURE__ */
|
|
2163
|
-
/* @__PURE__ */
|
|
2164
|
-
/* @__PURE__ */
|
|
2258
|
+
/* @__PURE__ */ jsxs19("section", { style: { marginBottom: "2rem" }, children: [
|
|
2259
|
+
/* @__PURE__ */ jsx19("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Participant Status States" }),
|
|
2260
|
+
/* @__PURE__ */ jsx19("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Characters can be active, silent (thinking but not speaking), absent (away from the scene), or removed." }),
|
|
2261
|
+
/* @__PURE__ */ jsxs19("div", { style: { maxWidth: "20rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2262
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card qt-participant-card-active", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2263
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar-fallback", children: "AC" }) }) }),
|
|
2264
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-info", children: [
|
|
2265
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", children: "Alice Character" }),
|
|
2266
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-status", children: "Currently Speaking" })
|
|
2165
2267
|
] })
|
|
2166
2268
|
] }) }),
|
|
2167
|
-
/* @__PURE__ */
|
|
2168
|
-
/* @__PURE__ */
|
|
2169
|
-
/* @__PURE__ */
|
|
2170
|
-
/* @__PURE__ */
|
|
2269
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card qt-participant-card-silent", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2270
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-avatar", style: { position: "relative" }, children: [
|
|
2271
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar-fallback", children: "BC" }) }),
|
|
2272
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-status-overlay qt-participant-status-overlay-silent", children: /* @__PURE__ */ jsx19("svg", { width: "10", height: "10", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx19("path", { d: "M16.5 12A4.5 4.5 0 0 0 12 7.5v4.09l3.13 3.13A4.46 4.46 0 0 0 16.5 12ZM19 12c0 1.68-.59 3.22-1.57 4.43L21 20l-1.41 1.41-18-18L3 2l4.57 4.57A7.97 7.97 0 0 1 12 4c4.42 0 8 3.58 8 8Zm-7-8a6 6 0 0 0-6 6c0 1.33.44 2.56 1.17 3.56L5 11.44A7.94 7.94 0 0 1 4 8" }) }) })
|
|
2171
2273
|
] }),
|
|
2172
|
-
/* @__PURE__ */
|
|
2173
|
-
/* @__PURE__ */
|
|
2174
|
-
/* @__PURE__ */
|
|
2175
|
-
/* @__PURE__ */
|
|
2274
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-info", children: [
|
|
2275
|
+
/* @__PURE__ */ jsxs19("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
2276
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", children: "Bob Character" }),
|
|
2277
|
+
/* @__PURE__ */ jsx19("span", { className: "qt-badge-silent", style: { fontSize: "0.625rem" }, children: "Silent" })
|
|
2176
2278
|
] }),
|
|
2177
|
-
/* @__PURE__ */
|
|
2279
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-status", children: "Inner thoughts only" })
|
|
2178
2280
|
] })
|
|
2179
2281
|
] }) }),
|
|
2180
|
-
/* @__PURE__ */
|
|
2181
|
-
/* @__PURE__ */
|
|
2182
|
-
/* @__PURE__ */
|
|
2183
|
-
/* @__PURE__ */
|
|
2282
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card", style: { opacity: 0.7 }, children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2283
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-avatar", style: { position: "relative" }, children: [
|
|
2284
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar-fallback", children: "CC" }) }),
|
|
2285
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-status-overlay qt-participant-status-overlay-absent", children: /* @__PURE__ */ jsx19("svg", { width: "10", height: "10", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx19("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) }) })
|
|
2184
2286
|
] }),
|
|
2185
|
-
/* @__PURE__ */
|
|
2186
|
-
/* @__PURE__ */
|
|
2187
|
-
/* @__PURE__ */
|
|
2188
|
-
/* @__PURE__ */
|
|
2287
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-info", children: [
|
|
2288
|
+
/* @__PURE__ */ jsxs19("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
2289
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", children: "Clara Character" }),
|
|
2290
|
+
/* @__PURE__ */ jsx19("span", { className: "qt-badge-absent", style: { fontSize: "0.625rem" }, children: "Absent" })
|
|
2189
2291
|
] }),
|
|
2190
|
-
/* @__PURE__ */
|
|
2292
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-status", children: "Away from the scene" })
|
|
2191
2293
|
] })
|
|
2192
2294
|
] }) }),
|
|
2193
|
-
/* @__PURE__ */
|
|
2194
|
-
/* @__PURE__ */
|
|
2195
|
-
/* @__PURE__ */
|
|
2196
|
-
/* @__PURE__ */
|
|
2197
|
-
/* @__PURE__ */
|
|
2295
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2296
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar-fallback", children: "YO" }) }) }),
|
|
2297
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-info", children: [
|
|
2298
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", children: "You" }),
|
|
2299
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-status", children: "Human" })
|
|
2198
2300
|
] })
|
|
2199
2301
|
] }) })
|
|
2200
2302
|
] })
|
|
2201
2303
|
] }),
|
|
2202
|
-
/* @__PURE__ */
|
|
2203
|
-
/* @__PURE__ */
|
|
2204
|
-
/* @__PURE__ */
|
|
2205
|
-
/* @__PURE__ */
|
|
2206
|
-
/* @__PURE__ */
|
|
2207
|
-
/* @__PURE__ */
|
|
2208
|
-
/* @__PURE__ */
|
|
2209
|
-
/* @__PURE__ */
|
|
2210
|
-
/* @__PURE__ */
|
|
2211
|
-
/* @__PURE__ */
|
|
2304
|
+
/* @__PURE__ */ jsxs19("section", { style: { marginBottom: "2rem" }, children: [
|
|
2305
|
+
/* @__PURE__ */ jsx19("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Sidebar Layout" }),
|
|
2306
|
+
/* @__PURE__ */ jsxs19("div", { style: { display: "flex", gap: "1rem" }, children: [
|
|
2307
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-card", style: { flex: 1, padding: "1rem" }, children: /* @__PURE__ */ jsx19("p", { style: { color: "var(--color-text-muted)" }, children: "Chat messages area" }) }),
|
|
2308
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-chat-sidebar", style: { width: "16rem" }, children: [
|
|
2309
|
+
/* @__PURE__ */ jsx19("div", { style: { padding: "1rem", borderBottom: "1px solid var(--qt-chat-sidebar-header-border)" }, children: /* @__PURE__ */ jsx19("h4", { style: { fontWeight: 600, color: "var(--qt-chat-sidebar-heading)" }, children: "Participants" }) }),
|
|
2310
|
+
/* @__PURE__ */ jsxs19("div", { style: { padding: "0.5rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2311
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card qt-participant-card-active", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2312
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar-fallback", children: "AC" }) }) }),
|
|
2313
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-info", children: /* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", style: { fontSize: "0.875rem" }, children: "Alice" }) })
|
|
2212
2314
|
] }) }),
|
|
2213
|
-
/* @__PURE__ */
|
|
2214
|
-
/* @__PURE__ */
|
|
2215
|
-
/* @__PURE__ */
|
|
2315
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2316
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar-fallback", children: "YO" }) }) }),
|
|
2317
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-info", children: /* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", style: { fontSize: "0.875rem" }, children: "You" }) })
|
|
2216
2318
|
] }) })
|
|
2217
2319
|
] })
|
|
2218
2320
|
] })
|
|
2219
2321
|
] })
|
|
2220
2322
|
] }),
|
|
2221
|
-
/* @__PURE__ */
|
|
2222
|
-
/* @__PURE__ */
|
|
2223
|
-
/* @__PURE__ */
|
|
2224
|
-
/* @__PURE__ */
|
|
2225
|
-
/* @__PURE__ */
|
|
2226
|
-
/* @__PURE__ */
|
|
2227
|
-
/* @__PURE__ */
|
|
2228
|
-
/* @__PURE__ */
|
|
2229
|
-
/* @__PURE__ */
|
|
2230
|
-
/* @__PURE__ */
|
|
2231
|
-
/* @__PURE__ */
|
|
2232
|
-
/* @__PURE__ */
|
|
2233
|
-
/* @__PURE__ */
|
|
2234
|
-
/* @__PURE__ */
|
|
2323
|
+
/* @__PURE__ */ jsxs19("section", { children: [
|
|
2324
|
+
/* @__PURE__ */ jsx19("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Connection Profile Dropdown" }),
|
|
2325
|
+
/* @__PURE__ */ jsxs19("div", { style: { maxWidth: "20rem", display: "flex", flexDirection: "column", gap: "1rem" }, children: [
|
|
2326
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2327
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar-fallback", children: "AC" }) }) }),
|
|
2328
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-info", children: [
|
|
2329
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", children: "Alice Character" }),
|
|
2330
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-status", children: "AI Assistant" }),
|
|
2331
|
+
/* @__PURE__ */ jsx19("div", { style: { marginTop: "0.25rem" }, children: /* @__PURE__ */ jsxs19("select", { className: "qt-select qt-select-sm", style: { width: "100%" }, defaultValue: "gpt-4", children: [
|
|
2332
|
+
/* @__PURE__ */ jsx19("option", { value: "", children: "Select a provider..." }),
|
|
2333
|
+
/* @__PURE__ */ jsx19("option", { value: "__user__", children: "User (you type)" }),
|
|
2334
|
+
/* @__PURE__ */ jsx19("option", { value: "gpt-4", children: "gpt-4-turbo" }),
|
|
2335
|
+
/* @__PURE__ */ jsx19("option", { value: "claude", children: "claude-3-opus" }),
|
|
2336
|
+
/* @__PURE__ */ jsx19("option", { value: "gemini", children: "gemini-pro" })
|
|
2235
2337
|
] }) })
|
|
2236
2338
|
] })
|
|
2237
2339
|
] }) }),
|
|
2238
|
-
/* @__PURE__ */
|
|
2239
|
-
/* @__PURE__ */
|
|
2240
|
-
/* @__PURE__ */
|
|
2241
|
-
/* @__PURE__ */
|
|
2242
|
-
/* @__PURE__ */
|
|
2243
|
-
/* @__PURE__ */
|
|
2340
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2341
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar-fallback", children: "BC" }) }) }),
|
|
2342
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-info", children: [
|
|
2343
|
+
/* @__PURE__ */ jsxs19("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
2344
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", children: "Bob Character" }),
|
|
2345
|
+
/* @__PURE__ */ jsx19("span", { className: "qt-badge-secondary", style: { fontSize: "0.75rem" }, children: "You" })
|
|
2244
2346
|
] }),
|
|
2245
|
-
/* @__PURE__ */
|
|
2246
|
-
/* @__PURE__ */
|
|
2247
|
-
/* @__PURE__ */
|
|
2248
|
-
/* @__PURE__ */
|
|
2249
|
-
/* @__PURE__ */
|
|
2347
|
+
/* @__PURE__ */ jsx19("div", { style: { marginTop: "0.25rem" }, children: /* @__PURE__ */ jsxs19("select", { className: "qt-select qt-select-sm", style: { width: "100%" }, defaultValue: "__user__", children: [
|
|
2348
|
+
/* @__PURE__ */ jsx19("option", { value: "", children: "Select a provider..." }),
|
|
2349
|
+
/* @__PURE__ */ jsx19("option", { value: "__user__", children: "User (you type)" }),
|
|
2350
|
+
/* @__PURE__ */ jsx19("option", { value: "gpt-4", children: "gpt-4-turbo" }),
|
|
2351
|
+
/* @__PURE__ */ jsx19("option", { value: "claude", children: "claude-3-opus" })
|
|
2250
2352
|
] }) })
|
|
2251
2353
|
] })
|
|
2252
2354
|
] }) })
|
|
@@ -2266,6 +2368,7 @@ export {
|
|
|
2266
2368
|
Cards,
|
|
2267
2369
|
Inputs,
|
|
2268
2370
|
Badges,
|
|
2371
|
+
Surfaces,
|
|
2269
2372
|
Avatars,
|
|
2270
2373
|
Dialogs,
|
|
2271
2374
|
Tabs,
|