@quilltap/theme-storybook 1.0.18 → 1.0.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/README.md +5 -5
  3. package/dist/{chunk-SQTWU3PB.mjs → chunk-W3J7BRAL.mjs} +73 -178
  4. package/dist/index.css +246 -2
  5. package/dist/index.js +73 -178
  6. package/dist/index.mjs +1 -1
  7. package/dist/stories/index.js +73 -178
  8. package/dist/stories/index.mjs +1 -1
  9. package/package.json +1 -1
  10. package/src/css/qt-components.css +306 -2
  11. package/src/css/quilltap-defaults.css +13 -0
  12. package/src/stories/components/Avatars.tsx +0 -40
  13. package/src/stories/components/Chat.tsx +42 -90
  14. package/src/stories/components/Dialogs.tsx +8 -8
  15. package/src/stories/components/Tabs.tsx +69 -126
  16. package/src/stories/components/ThemeComparison.tsx +4 -4
package/CHANGELOG.md CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
  All notable changes to `@quilltap/theme-storybook` will be documented in this file.
4
4
 
5
+ ## [1.0.20] - 2026-02-09
6
+
7
+ ### Added
8
+ - `qt-shadow-lg` utility class for elevated surfaces (dropdowns, modals)
9
+ - `hover:qt-bg-primary/10` hover background utility class
10
+
5
11
  ## [1.0.18] - 2026-02-08
6
12
 
7
13
  ### Changed
package/README.md CHANGED
@@ -275,19 +275,19 @@ All Quilltap components use `qt-*` prefixed classes. Your theme CSS can override
275
275
 
276
276
  ### Chat
277
277
  - `.qt-chat-message` - Message container
278
- - `.qt-chat-bubble` - Message bubble
279
- - `.qt-chat-bubble-user`, `.qt-chat-bubble-assistant` - Role variants
278
+ - `.qt-chat-message` - Chat message container
279
+ - `.qt-chat-message-user`, `.qt-chat-message-assistant` - Role variants
280
280
  - `.qt-chat-input` - Chat input field
281
281
  - `.qt-typing-indicator` - Typing animation
282
282
 
283
283
  ### Dialogs
284
284
  - `.qt-dialog-overlay` - Modal backdrop
285
285
  - `.qt-dialog` - Dialog container
286
- - `.qt-dialog-header`, `.qt-dialog-content`, `.qt-dialog-footer` - Sections
286
+ - `.qt-dialog-header`, `.qt-dialog-body`, `.qt-dialog-footer` - Sections
287
287
 
288
288
  ### Navigation
289
- - `.qt-tabs`, `.qt-tab` - Tab components
290
- - `.qt-navbar`, `.qt-nav-link` - Navigation bar
289
+ - `.qt-tab-group`, `.qt-tab` - Tab components
290
+ - `.qt-navbar`, `.qt-navbar-link` - Navigation bar
291
291
 
292
292
  ## Development Workflow
293
293
 
package/dist/{chunk-SQTWU3PB.mjs → chunk-W3J7BRAL.mjs} RENAMED
@@ -542,7 +542,6 @@ var Avatars = () => {
542
542
  /* @__PURE__ */ jsxs8("section", { style: { marginBottom: "2rem" }, children: [
543
543
  /* @__PURE__ */ jsx8("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Avatar Sizes" }),
544
544
  /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
545
- /* @__PURE__ */ jsx8("div", { className: "qt-avatar qt-avatar-xs", children: /* @__PURE__ */ jsx8("div", { className: "qt-avatar-fallback", children: "XS" }) }),
546
545
  /* @__PURE__ */ jsx8("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx8("div", { className: "qt-avatar-fallback", children: "SM" }) }),
547
546
  /* @__PURE__ */ jsx8("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx8("div", { className: "qt-avatar-fallback", children: "MD" }) }),
548
547
  /* @__PURE__ */ jsx8("div", { className: "qt-avatar qt-avatar-lg", children: /* @__PURE__ */ jsx8("div", { className: "qt-avatar-fallback", children: "LG" }) }),
@@ -575,31 +574,6 @@ var Avatars = () => {
575
574
  ] })
576
575
  ] })
577
576
  ] }),
578
- /* @__PURE__ */ jsxs8("section", { style: { marginBottom: "2rem" }, children: [
579
- /* @__PURE__ */ jsx8("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Avatar with Status" }),
580
- /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "center", gap: "1.5rem" }, children: [
581
- /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, children: [
582
- /* @__PURE__ */ jsx8("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx8("div", { className: "qt-avatar-fallback", children: "ON" }) }),
583
- /* @__PURE__ */ jsx8("span", { className: "qt-avatar-status qt-avatar-status-online" }),
584
- /* @__PURE__ */ jsx8("p", { style: { marginTop: "0.5rem", fontSize: "0.75rem", color: "var(--color-muted-foreground)", textAlign: "center" }, children: "Online" })
585
- ] }),
586
- /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, children: [
587
- /* @__PURE__ */ jsx8("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx8("div", { className: "qt-avatar-fallback", children: "AW" }) }),
588
- /* @__PURE__ */ jsx8("span", { className: "qt-avatar-status qt-avatar-status-away" }),
589
- /* @__PURE__ */ jsx8("p", { style: { marginTop: "0.5rem", fontSize: "0.75rem", color: "var(--color-muted-foreground)", textAlign: "center" }, children: "Away" })
590
- ] }),
591
- /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, children: [
592
- /* @__PURE__ */ jsx8("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx8("div", { className: "qt-avatar-fallback", children: "BS" }) }),
593
- /* @__PURE__ */ jsx8("span", { className: "qt-avatar-status qt-avatar-status-busy" }),
594
- /* @__PURE__ */ jsx8("p", { style: { marginTop: "0.5rem", fontSize: "0.75rem", color: "var(--color-muted-foreground)", textAlign: "center" }, children: "Busy" })
595
- ] }),
596
- /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, children: [
597
- /* @__PURE__ */ jsx8("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx8("div", { className: "qt-avatar-fallback", children: "OF" }) }),
598
- /* @__PURE__ */ jsx8("span", { className: "qt-avatar-status qt-avatar-status-offline" }),
599
- /* @__PURE__ */ jsx8("p", { style: { marginTop: "0.5rem", fontSize: "0.75rem", color: "var(--color-muted-foreground)", textAlign: "center" }, children: "Offline" })
600
- ] })
601
- ] })
602
- ] }),
603
577
  /* @__PURE__ */ jsxs8("section", { style: { marginBottom: "2rem" }, children: [
604
578
  /* @__PURE__ */ jsx8("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Avatar Groups" }),
605
579
  /* @__PURE__ */ jsxs8("div", { className: "qt-avatar-group", children: [
@@ -659,7 +633,7 @@ var Dialogs = () => {
659
633
  /* @__PURE__ */ jsx9("h3", { className: "qt-dialog-title", children: "Basic Dialog" }),
660
634
  /* @__PURE__ */ jsx9("button", { className: "qt-button-icon", onClick: () => setBasicOpen(false), "aria-label": "Close", children: /* @__PURE__ */ jsx9("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
661
635
  ] }),
662
- /* @__PURE__ */ jsx9("div", { className: "qt-dialog-content", children: /* @__PURE__ */ jsx9("p", { children: "This is a basic dialog with some content. Dialogs are used to show important information or gather user input." }) }),
636
+ /* @__PURE__ */ jsx9("div", { className: "qt-dialog-body", children: /* @__PURE__ */ jsx9("p", { children: "This is a basic dialog with some content. Dialogs are used to show important information or gather user input." }) }),
663
637
  /* @__PURE__ */ jsx9("div", { className: "qt-dialog-footer", children: /* @__PURE__ */ jsx9("button", { className: "qt-button qt-button-primary", onClick: () => setBasicOpen(false), children: "Got it" }) })
664
638
  ] }) }),
665
639
  confirmOpen && /* @__PURE__ */ jsx9("div", { className: "qt-dialog-overlay", onClick: () => setConfirmOpen(false), children: /* @__PURE__ */ jsxs9("div", { className: "qt-dialog", onClick: (e) => e.stopPropagation(), children: [
@@ -667,7 +641,7 @@ var Dialogs = () => {
667
641
  /* @__PURE__ */ jsx9("h3", { className: "qt-dialog-title", children: "Delete Item?" }),
668
642
  /* @__PURE__ */ jsx9("button", { className: "qt-button-icon", onClick: () => setConfirmOpen(false), "aria-label": "Close", children: /* @__PURE__ */ jsx9("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
669
643
  ] }),
670
- /* @__PURE__ */ jsx9("div", { className: "qt-dialog-content", children: /* @__PURE__ */ jsx9("p", { children: "Are you sure you want to delete this item? This action cannot be undone." }) }),
644
+ /* @__PURE__ */ jsx9("div", { className: "qt-dialog-body", children: /* @__PURE__ */ jsx9("p", { children: "Are you sure you want to delete this item? This action cannot be undone." }) }),
671
645
  /* @__PURE__ */ jsxs9("div", { className: "qt-dialog-footer", children: [
672
646
  /* @__PURE__ */ jsx9("button", { className: "qt-button qt-button-ghost", onClick: () => setConfirmOpen(false), children: "Cancel" }),
673
647
  /* @__PURE__ */ jsx9("button", { className: "qt-button qt-button-destructive", onClick: () => setConfirmOpen(false), children: "Delete" })
@@ -678,7 +652,7 @@ var Dialogs = () => {
678
652
  /* @__PURE__ */ jsx9("h3", { className: "qt-dialog-title", children: "Create New Item" }),
679
653
  /* @__PURE__ */ jsx9("button", { className: "qt-button-icon", onClick: () => setFormOpen(false), "aria-label": "Close", children: /* @__PURE__ */ jsx9("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
680
654
  ] }),
681
- /* @__PURE__ */ jsx9("div", { className: "qt-dialog-content", children: /* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
655
+ /* @__PURE__ */ jsx9("div", { className: "qt-dialog-body", children: /* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
682
656
  /* @__PURE__ */ jsxs9("div", { children: [
683
657
  /* @__PURE__ */ jsx9("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Name" }),
684
658
  /* @__PURE__ */ jsx9("input", { className: "qt-input", type: "text", placeholder: "Enter name..." })
@@ -709,7 +683,7 @@ var Dialogs = () => {
709
683
  /* @__PURE__ */ jsx9("h3", { className: "qt-dialog-title", children: "Dialog Title" }),
710
684
  /* @__PURE__ */ jsx9("button", { className: "qt-button-icon", "aria-label": "Close", children: /* @__PURE__ */ jsx9("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
711
685
  ] }),
712
- /* @__PURE__ */ jsx9("div", { className: "qt-dialog-content", children: /* @__PURE__ */ jsx9("p", { children: "Dialog content area. This can contain text, forms, or any other content." }) }),
686
+ /* @__PURE__ */ jsx9("div", { className: "qt-dialog-body", children: /* @__PURE__ */ jsx9("p", { children: "Dialog content area. This can contain text, forms, or any other content." }) }),
713
687
  /* @__PURE__ */ jsxs9("div", { className: "qt-dialog-footer", children: [
714
688
  /* @__PURE__ */ jsx9("button", { className: "qt-button qt-button-ghost", children: "Secondary Action" }),
715
689
  /* @__PURE__ */ jsx9("button", { className: "qt-button qt-button-primary", children: "Primary Action" })
@@ -721,16 +695,16 @@ var Dialogs = () => {
721
695
  /* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
722
696
  /* @__PURE__ */ jsxs9("div", { children: [
723
697
  /* @__PURE__ */ jsx9("span", { style: { fontSize: "0.875rem", fontWeight: 500, color: "var(--color-muted-foreground)" }, children: "Small (max-width: 24rem)" }),
724
- /* @__PURE__ */ jsx9("div", { style: { backgroundColor: "var(--color-muted)", padding: "1rem", borderRadius: "var(--radius-lg)", marginTop: "0.5rem" }, children: /* @__PURE__ */ jsxs9("div", { className: "qt-dialog qt-dialog-sm", style: { position: "relative", transform: "none", margin: 0, maxWidth: "24rem" }, children: [
698
+ /* @__PURE__ */ jsx9("div", { style: { backgroundColor: "var(--color-muted)", padding: "1rem", borderRadius: "var(--radius-lg)", marginTop: "0.5rem" }, children: /* @__PURE__ */ jsxs9("div", { className: "qt-dialog", style: { position: "relative", transform: "none", margin: 0, maxWidth: "24rem" }, children: [
725
699
  /* @__PURE__ */ jsx9("div", { className: "qt-dialog-header", children: /* @__PURE__ */ jsx9("h3", { className: "qt-dialog-title", children: "Small Dialog" }) }),
726
- /* @__PURE__ */ jsx9("div", { className: "qt-dialog-content", children: /* @__PURE__ */ jsx9("p", { children: "Compact dialog for simple confirmations." }) })
700
+ /* @__PURE__ */ jsx9("div", { className: "qt-dialog-body", children: /* @__PURE__ */ jsx9("p", { children: "Compact dialog for simple confirmations." }) })
727
701
  ] }) })
728
702
  ] }),
729
703
  /* @__PURE__ */ jsxs9("div", { children: [
730
704
  /* @__PURE__ */ jsx9("span", { style: { fontSize: "0.875rem", fontWeight: 500, color: "var(--color-muted-foreground)" }, children: "Large (max-width: 42rem)" }),
731
- /* @__PURE__ */ jsx9("div", { style: { backgroundColor: "var(--color-muted)", padding: "1rem", borderRadius: "var(--radius-lg)", marginTop: "0.5rem" }, children: /* @__PURE__ */ jsxs9("div", { className: "qt-dialog qt-dialog-lg", style: { position: "relative", transform: "none", margin: 0, maxWidth: "42rem" }, children: [
705
+ /* @__PURE__ */ jsx9("div", { style: { backgroundColor: "var(--color-muted)", padding: "1rem", borderRadius: "var(--radius-lg)", marginTop: "0.5rem" }, children: /* @__PURE__ */ jsxs9("div", { className: "qt-dialog qt-dialog-wide", style: { position: "relative", transform: "none", margin: 0, maxWidth: "42rem" }, children: [
732
706
  /* @__PURE__ */ jsx9("div", { className: "qt-dialog-header", children: /* @__PURE__ */ jsx9("h3", { className: "qt-dialog-title", children: "Large Dialog" }) }),
733
- /* @__PURE__ */ jsx9("div", { className: "qt-dialog-content", children: /* @__PURE__ */ jsx9("p", { children: "Larger dialog for complex forms or detailed content that needs more space." }) })
707
+ /* @__PURE__ */ jsx9("div", { className: "qt-dialog-body", children: /* @__PURE__ */ jsx9("p", { children: "Larger dialog for complex forms or detailed content that needs more space." }) })
734
708
  ] }) })
735
709
  ] })
736
710
  ] })
@@ -743,86 +717,54 @@ import { useState as useState2 } from "react";
743
717
  import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
744
718
  var Tabs = () => {
745
719
  const [activeTab, setActiveTab] = useState2("tab1");
746
- const [pillTab, setPillTab] = useState2("overview");
747
720
  return /* @__PURE__ */ jsxs10("div", { style: { padding: "1.5rem" }, children: [
748
721
  /* @__PURE__ */ jsx10("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Tabs & Navigation" }),
749
722
  /* @__PURE__ */ jsxs10("section", { style: { marginBottom: "2rem" }, children: [
750
723
  /* @__PURE__ */ jsx10("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Basic Tabs" }),
751
- /* @__PURE__ */ jsxs10("div", { className: "qt-tabs", children: [
752
- /* @__PURE__ */ jsxs10("div", { className: "qt-tabs-list", children: [
753
- /* @__PURE__ */ jsx10(
754
- "button",
755
- {
756
- className: `qt-tab ${activeTab === "tab1" ? "qt-tab-active" : ""}`,
757
- onClick: () => setActiveTab("tab1"),
758
- children: "Account"
759
- }
760
- ),
761
- /* @__PURE__ */ jsx10(
762
- "button",
763
- {
764
- className: `qt-tab ${activeTab === "tab2" ? "qt-tab-active" : ""}`,
765
- onClick: () => setActiveTab("tab2"),
766
- children: "Settings"
767
- }
768
- ),
769
- /* @__PURE__ */ jsx10(
770
- "button",
771
- {
772
- className: `qt-tab ${activeTab === "tab3" ? "qt-tab-active" : ""}`,
773
- onClick: () => setActiveTab("tab3"),
774
- children: "Notifications"
775
- }
776
- )
777
- ] }),
778
- /* @__PURE__ */ jsxs10("div", { className: "qt-tabs-content", children: [
779
- activeTab === "tab1" && /* @__PURE__ */ jsxs10("div", { className: "qt-tab-panel", children: [
780
- /* @__PURE__ */ jsx10("h4", { style: { fontWeight: 600, marginBottom: "0.5rem" }, children: "Account Settings" }),
781
- /* @__PURE__ */ jsx10("p", { style: { color: "var(--color-muted-foreground)" }, children: "Manage your account settings and preferences." })
782
- ] }),
783
- activeTab === "tab2" && /* @__PURE__ */ jsxs10("div", { className: "qt-tab-panel", children: [
784
- /* @__PURE__ */ jsx10("h4", { style: { fontWeight: 600, marginBottom: "0.5rem" }, children: "General Settings" }),
785
- /* @__PURE__ */ jsx10("p", { style: { color: "var(--color-muted-foreground)" }, children: "Configure general application settings." })
786
- ] }),
787
- activeTab === "tab3" && /* @__PURE__ */ jsxs10("div", { className: "qt-tab-panel", children: [
788
- /* @__PURE__ */ jsx10("h4", { style: { fontWeight: 600, marginBottom: "0.5rem" }, children: "Notification Preferences" }),
789
- /* @__PURE__ */ jsx10("p", { style: { color: "var(--color-muted-foreground)" }, children: "Choose how you want to receive notifications." })
790
- ] })
791
- ] })
792
- ] })
793
- ] }),
794
- /* @__PURE__ */ jsxs10("section", { style: { marginBottom: "2rem" }, children: [
795
- /* @__PURE__ */ jsx10("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Pill Tabs" }),
796
- /* @__PURE__ */ jsx10("div", { className: "qt-tabs qt-tabs-pill", children: /* @__PURE__ */ jsxs10("div", { className: "qt-tabs-list", children: [
724
+ /* @__PURE__ */ jsxs10("div", { className: "qt-tab-group", children: [
797
725
  /* @__PURE__ */ jsx10(
798
726
  "button",
799
727
  {
800
- className: `qt-tab qt-tab-pill ${pillTab === "overview" ? "qt-tab-active" : ""}`,
801
- onClick: () => setPillTab("overview"),
802
- children: "Overview"
728
+ className: `qt-tab ${activeTab === "tab1" ? "qt-tab-active" : ""}`,
729
+ onClick: () => setActiveTab("tab1"),
730
+ children: "Account"
803
731
  }
804
732
  ),
805
733
  /* @__PURE__ */ jsx10(
806
734
  "button",
807
735
  {
808
- className: `qt-tab qt-tab-pill ${pillTab === "analytics" ? "qt-tab-active" : ""}`,
809
- onClick: () => setPillTab("analytics"),
810
- children: "Analytics"
736
+ className: `qt-tab ${activeTab === "tab2" ? "qt-tab-active" : ""}`,
737
+ onClick: () => setActiveTab("tab2"),
738
+ children: "Settings"
811
739
  }
812
740
  ),
813
741
  /* @__PURE__ */ jsx10(
814
742
  "button",
815
743
  {
816
- className: `qt-tab qt-tab-pill ${pillTab === "reports" ? "qt-tab-active" : ""}`,
817
- onClick: () => setPillTab("reports"),
818
- children: "Reports"
744
+ className: `qt-tab ${activeTab === "tab3" ? "qt-tab-active" : ""}`,
745
+ onClick: () => setActiveTab("tab3"),
746
+ children: "Notifications"
819
747
  }
820
748
  )
821
- ] }) })
749
+ ] }),
750
+ /* @__PURE__ */ jsxs10("div", { children: [
751
+ activeTab === "tab1" && /* @__PURE__ */ jsxs10("div", { className: "qt-tab-content", children: [
752
+ /* @__PURE__ */ jsx10("h4", { style: { fontWeight: 600, marginBottom: "0.5rem" }, children: "Account Settings" }),
753
+ /* @__PURE__ */ jsx10("p", { style: { color: "var(--color-muted-foreground)" }, children: "Manage your account settings and preferences." })
754
+ ] }),
755
+ activeTab === "tab2" && /* @__PURE__ */ jsxs10("div", { className: "qt-tab-content", children: [
756
+ /* @__PURE__ */ jsx10("h4", { style: { fontWeight: 600, marginBottom: "0.5rem" }, children: "General Settings" }),
757
+ /* @__PURE__ */ jsx10("p", { style: { color: "var(--color-muted-foreground)" }, children: "Configure general application settings." })
758
+ ] }),
759
+ activeTab === "tab3" && /* @__PURE__ */ jsxs10("div", { className: "qt-tab-content", children: [
760
+ /* @__PURE__ */ jsx10("h4", { style: { fontWeight: 600, marginBottom: "0.5rem" }, children: "Notification Preferences" }),
761
+ /* @__PURE__ */ jsx10("p", { style: { color: "var(--color-muted-foreground)" }, children: "Choose how you want to receive notifications." })
762
+ ] })
763
+ ] })
822
764
  ] }),
823
765
  /* @__PURE__ */ jsxs10("section", { style: { marginBottom: "2rem" }, children: [
824
766
  /* @__PURE__ */ jsx10("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Tabs with Icons" }),
825
- /* @__PURE__ */ jsx10("div", { className: "qt-tabs", children: /* @__PURE__ */ jsxs10("div", { className: "qt-tabs-list", children: [
767
+ /* @__PURE__ */ jsxs10("div", { className: "qt-tab-group", children: [
826
768
  /* @__PURE__ */ jsxs10("button", { className: "qt-tab qt-tab-active", style: { display: "inline-flex", alignItems: "center", gap: "0.5rem" }, children: [
827
769
  /* @__PURE__ */ jsx10("svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx10("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" }) }),
828
770
  "Home"
@@ -838,21 +780,6 @@ var Tabs = () => {
838
780
  ] }),
839
781
  "Settings"
840
782
  ] })
841
- ] }) })
842
- ] }),
843
- /* @__PURE__ */ jsxs10("section", { style: { marginBottom: "2rem" }, children: [
844
- /* @__PURE__ */ jsx10("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Vertical Tabs" }),
845
- /* @__PURE__ */ jsxs10("div", { className: "qt-tabs qt-tabs-vertical", style: { display: "flex", gap: "1.5rem" }, children: [
846
- /* @__PURE__ */ jsxs10("div", { className: "qt-tabs-list", style: { flexDirection: "column", borderBottom: "none", borderRight: "1px solid var(--color-border)", paddingRight: "1rem" }, children: [
847
- /* @__PURE__ */ jsx10("button", { className: "qt-tab qt-tab-active", style: { justifyContent: "flex-start" }, children: "General" }),
848
- /* @__PURE__ */ jsx10("button", { className: "qt-tab", style: { justifyContent: "flex-start" }, children: "Security" }),
849
- /* @__PURE__ */ jsx10("button", { className: "qt-tab", style: { justifyContent: "flex-start" }, children: "Integrations" }),
850
- /* @__PURE__ */ jsx10("button", { className: "qt-tab", style: { justifyContent: "flex-start" }, children: "Billing" })
851
- ] }),
852
- /* @__PURE__ */ jsx10("div", { className: "qt-tabs-content", style: { flex: 1 }, children: /* @__PURE__ */ jsxs10("div", { className: "qt-tab-panel", children: [
853
- /* @__PURE__ */ jsx10("h4", { style: { fontWeight: 600, marginBottom: "0.5rem" }, children: "General Settings" }),
854
- /* @__PURE__ */ jsx10("p", { style: { color: "var(--color-muted-foreground)" }, children: "Configure general settings for your application." })
855
- ] }) })
856
783
  ] })
857
784
  ] }),
858
785
  /* @__PURE__ */ jsxs10("section", { children: [
@@ -860,11 +787,11 @@ var Tabs = () => {
860
787
  /* @__PURE__ */ jsxs10("div", { className: "qt-navbar", children: [
861
788
  /* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
862
789
  /* @__PURE__ */ jsx10("div", { style: { fontWeight: 700, fontSize: "1.125rem" }, children: "Quilltap" }),
863
- /* @__PURE__ */ jsxs10("nav", { className: "qt-nav", children: [
864
- /* @__PURE__ */ jsx10("a", { href: "#", className: "qt-nav-link qt-nav-link-active", children: "Dashboard" }),
865
- /* @__PURE__ */ jsx10("a", { href: "#", className: "qt-nav-link", children: "Characters" }),
866
- /* @__PURE__ */ jsx10("a", { href: "#", className: "qt-nav-link", children: "Chats" }),
867
- /* @__PURE__ */ jsx10("a", { href: "#", className: "qt-nav-link", children: "Settings" })
790
+ /* @__PURE__ */ jsxs10("nav", { style: { display: "flex", gap: "0.25rem" }, children: [
791
+ /* @__PURE__ */ jsx10("a", { href: "#", className: "qt-navbar-link qt-navbar-link-active", children: "Dashboard" }),
792
+ /* @__PURE__ */ jsx10("a", { href: "#", className: "qt-navbar-link", children: "Characters" }),
793
+ /* @__PURE__ */ jsx10("a", { href: "#", className: "qt-navbar-link", children: "Chats" }),
794
+ /* @__PURE__ */ jsx10("a", { href: "#", className: "qt-navbar-link", children: "Settings" })
868
795
  ] })
869
796
  ] }),
870
797
  /* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
@@ -884,66 +811,54 @@ var Chat = () => {
884
811
  /* @__PURE__ */ jsxs11("section", { style: { marginBottom: "2rem" }, children: [
885
812
  /* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Message Bubbles" }),
886
813
  /* @__PURE__ */ jsxs11("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
887
- /* @__PURE__ */ jsxs11("div", { className: "qt-chat-message qt-chat-message-user", children: [
888
- /* @__PURE__ */ jsx11("div", { className: "qt-chat-bubble qt-chat-bubble-user", children: /* @__PURE__ */ jsx11("p", { children: "Hello! How are you today?" }) }),
889
- /* @__PURE__ */ jsx11("span", { className: "qt-chat-timestamp", children: "2:30 PM" })
890
- ] }),
891
- /* @__PURE__ */ jsxs11("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
814
+ /* @__PURE__ */ jsx11("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx11("div", { className: "qt-chat-message qt-chat-message-user", children: /* @__PURE__ */ jsx11("p", { children: "Hello! How are you today?" }) }) }),
815
+ /* @__PURE__ */ jsxs11("div", { style: { display: "flex", gap: "0.5rem" }, children: [
892
816
  /* @__PURE__ */ jsx11("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx11("div", { className: "qt-avatar-fallback", children: "AI" }) }),
893
- /* @__PURE__ */ jsxs11("div", { children: [
894
- /* @__PURE__ */ jsx11("div", { className: "qt-chat-bubble qt-chat-bubble-assistant", children: /* @__PURE__ */ jsx11("p", { children: "Hello! I'm doing well, thank you for asking. How can I help you today?" }) }),
895
- /* @__PURE__ */ jsx11("span", { className: "qt-chat-timestamp", children: "2:30 PM" })
896
- ] })
817
+ /* @__PURE__ */ jsx11("div", { className: "qt-chat-message qt-chat-message-assistant", children: /* @__PURE__ */ jsx11("p", { children: "Hello! I'm doing well, thank you for asking. How can I help you today?" }) })
897
818
  ] }),
898
- /* @__PURE__ */ jsxs11("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
819
+ /* @__PURE__ */ jsxs11("div", { style: { display: "flex", gap: "0.5rem" }, children: [
899
820
  /* @__PURE__ */ jsx11("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx11("div", { className: "qt-avatar-fallback", children: "AI" }) }),
900
- /* @__PURE__ */ jsxs11("div", { children: [
901
- /* @__PURE__ */ jsxs11("div", { className: "qt-chat-bubble qt-chat-bubble-assistant", children: [
902
- /* @__PURE__ */ jsx11("p", { children: "Here's some information you might find helpful:" }),
903
- /* @__PURE__ */ jsxs11("ul", { style: { marginTop: "0.5rem", paddingLeft: "1.25rem" }, children: [
904
- /* @__PURE__ */ jsx11("li", { children: "First point of interest" }),
905
- /* @__PURE__ */ jsx11("li", { children: "Second important detail" }),
906
- /* @__PURE__ */ jsx11("li", { children: "Third relevant fact" })
907
- ] }),
908
- /* @__PURE__ */ jsx11("p", { style: { marginTop: "0.5rem" }, children: "Let me know if you'd like more details about any of these!" })
821
+ /* @__PURE__ */ jsxs11("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
822
+ /* @__PURE__ */ jsx11("p", { children: "Here's some information you might find helpful:" }),
823
+ /* @__PURE__ */ jsxs11("ul", { style: { marginTop: "0.5rem", paddingLeft: "1.25rem" }, children: [
824
+ /* @__PURE__ */ jsx11("li", { children: "First point of interest" }),
825
+ /* @__PURE__ */ jsx11("li", { children: "Second important detail" }),
826
+ /* @__PURE__ */ jsx11("li", { children: "Third relevant fact" })
909
827
  ] }),
910
- /* @__PURE__ */ jsx11("span", { className: "qt-chat-timestamp", children: "2:31 PM" })
828
+ /* @__PURE__ */ jsx11("p", { style: { marginTop: "0.5rem" }, children: "Let me know if you'd like more details about any of these!" })
911
829
  ] })
912
830
  ] }),
913
- /* @__PURE__ */ jsxs11("div", { className: "qt-chat-message qt-chat-message-user", children: [
914
- /* @__PURE__ */ jsx11("div", { className: "qt-chat-bubble qt-chat-bubble-user", children: /* @__PURE__ */ jsx11("p", { children: "That's exactly what I needed, thanks!" }) }),
915
- /* @__PURE__ */ jsx11("span", { className: "qt-chat-timestamp", children: "2:32 PM" })
916
- ] })
831
+ /* @__PURE__ */ jsx11("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx11("div", { className: "qt-chat-message qt-chat-message-user", children: /* @__PURE__ */ jsx11("p", { children: "That's exactly what I needed, thanks!" }) }) })
917
832
  ] })
918
833
  ] }),
919
834
  /* @__PURE__ */ jsxs11("section", { style: { marginBottom: "2rem" }, children: [
920
835
  /* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Character Messages" }),
921
836
  /* @__PURE__ */ jsx11("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Messages from different characters with their avatars." }),
922
837
  /* @__PURE__ */ jsxs11("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
923
- /* @__PURE__ */ jsxs11("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
838
+ /* @__PURE__ */ jsxs11("div", { style: { display: "flex", gap: "0.5rem" }, children: [
924
839
  /* @__PURE__ */ jsx11("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx11("div", { className: "qt-avatar-fallback", children: "A" }) }),
925
840
  /* @__PURE__ */ jsxs11("div", { children: [
926
- /* @__PURE__ */ jsx11("div", { className: "qt-chat-name", children: "Alice" }),
927
- /* @__PURE__ */ jsx11("div", { className: "qt-chat-bubble qt-chat-bubble-assistant", children: /* @__PURE__ */ jsx11("p", { children: "*waves cheerfully* Hi there! I'm so glad to meet you!" }) })
841
+ /* @__PURE__ */ jsx11("div", { className: "qt-chat-message-author", style: { fontSize: "0.75rem", fontWeight: 600, marginBottom: "0.25rem" }, children: "Alice" }),
842
+ /* @__PURE__ */ jsx11("div", { className: "qt-chat-message qt-chat-message-assistant", children: /* @__PURE__ */ jsx11("p", { children: "*waves cheerfully* Hi there! I'm so glad to meet you!" }) })
928
843
  ] })
929
844
  ] }),
930
- /* @__PURE__ */ jsxs11("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
845
+ /* @__PURE__ */ jsxs11("div", { style: { display: "flex", gap: "0.5rem" }, children: [
931
846
  /* @__PURE__ */ jsx11("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx11("div", { className: "qt-avatar-fallback", children: "B" }) }),
932
847
  /* @__PURE__ */ jsxs11("div", { children: [
933
- /* @__PURE__ */ jsx11("div", { className: "qt-chat-name", children: "Bob" }),
934
- /* @__PURE__ */ jsx11("div", { className: "qt-chat-bubble qt-chat-bubble-assistant", children: /* @__PURE__ */ jsx11("p", { children: "*nods thoughtfully* Interesting point. Let me think about that..." }) })
848
+ /* @__PURE__ */ jsx11("div", { className: "qt-chat-message-author", style: { fontSize: "0.75rem", fontWeight: 600, marginBottom: "0.25rem" }, children: "Bob" }),
849
+ /* @__PURE__ */ jsx11("div", { className: "qt-chat-message qt-chat-message-assistant", children: /* @__PURE__ */ jsx11("p", { children: "*nods thoughtfully* Interesting point. Let me think about that..." }) })
935
850
  ] })
936
851
  ] })
937
852
  ] })
938
853
  ] }),
939
854
  /* @__PURE__ */ jsxs11("section", { style: { marginBottom: "2rem" }, children: [
940
855
  /* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Input" }),
941
- /* @__PURE__ */ jsx11("div", { className: "qt-chat-input-container", style: { maxWidth: "32rem" }, children: /* @__PURE__ */ jsxs11("div", { className: "qt-chat-input-wrapper", children: [
856
+ /* @__PURE__ */ jsx11("div", { className: "qt-chat-composer", style: { maxWidth: "32rem" }, children: /* @__PURE__ */ jsxs11("div", { className: "qt-chat-composer-inner", style: { display: "flex", alignItems: "flex-end", gap: "0.5rem", flex: 1 }, children: [
942
857
  /* @__PURE__ */ jsx11("button", { className: "qt-button-icon", "aria-label": "Attach file", 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: "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" }) }) }),
943
858
  /* @__PURE__ */ jsx11(
944
859
  "textarea",
945
860
  {
946
- className: "qt-chat-input",
861
+ className: "qt-chat-composer-input qt-input",
947
862
  placeholder: "Type a message...",
948
863
  rows: 1
949
864
  }
@@ -953,39 +868,19 @@ var Chat = () => {
953
868
  ] }),
954
869
  /* @__PURE__ */ jsxs11("section", { style: { marginBottom: "2rem" }, children: [
955
870
  /* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Typing Indicator" }),
956
- /* @__PURE__ */ jsxs11("div", { className: "qt-chat-message qt-chat-message-assistant", style: { maxWidth: "32rem" }, children: [
871
+ /* @__PURE__ */ jsxs11("div", { style: { display: "flex", gap: "0.5rem", maxWidth: "32rem" }, children: [
957
872
  /* @__PURE__ */ jsx11("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx11("div", { className: "qt-avatar-fallback", children: "AI" }) }),
958
- /* @__PURE__ */ jsx11("div", { className: "qt-chat-bubble qt-chat-bubble-assistant", children: /* @__PURE__ */ jsxs11("div", { className: "qt-typing-indicator", children: [
873
+ /* @__PURE__ */ jsx11("div", { className: "qt-chat-message qt-chat-message-assistant", children: /* @__PURE__ */ jsxs11("div", { className: "qt-typing-indicator", children: [
959
874
  /* @__PURE__ */ jsx11("span", {}),
960
875
  /* @__PURE__ */ jsx11("span", {}),
961
876
  /* @__PURE__ */ jsx11("span", {})
962
877
  ] }) })
963
878
  ] })
964
879
  ] }),
965
- /* @__PURE__ */ jsxs11("section", { style: { marginBottom: "2rem" }, children: [
966
- /* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat List" }),
967
- /* @__PURE__ */ jsx11("div", { className: "qt-chat-list", style: { maxWidth: "24rem" }, children: [
968
- { name: "Alice Character", preview: "Hi there! I'm so glad to...", time: "2:30 PM", unread: 2 },
969
- { name: "Bob Character", preview: "Let me think about that...", time: "1:15 PM", unread: 0 },
970
- { name: "Carol Character", preview: "That's a great question!", time: "Yesterday", unread: 0 }
971
- ].map((chat, i) => /* @__PURE__ */ jsxs11("div", { className: `qt-chat-list-item ${chat.unread > 0 ? "qt-chat-list-item-unread" : ""}`, children: [
972
- /* @__PURE__ */ jsx11("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx11("div", { className: "qt-avatar-fallback", children: chat.name[0] }) }),
973
- /* @__PURE__ */ jsxs11("div", { style: { flex: 1, minWidth: 0 }, children: [
974
- /* @__PURE__ */ jsxs11("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
975
- /* @__PURE__ */ jsx11("span", { style: { fontWeight: chat.unread > 0 ? 600 : 500 }, children: chat.name }),
976
- /* @__PURE__ */ jsx11("span", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: chat.time })
977
- ] }),
978
- /* @__PURE__ */ jsxs11("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: "0.125rem" }, children: [
979
- /* @__PURE__ */ jsx11("span", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: chat.preview }),
980
- chat.unread > 0 && /* @__PURE__ */ jsx11("span", { className: "qt-badge qt-badge-primary", style: { borderRadius: "9999px", minWidth: "1.25rem", textAlign: "center" }, children: chat.unread })
981
- ] })
982
- ] })
983
- ] }, i)) })
984
- ] }),
985
880
  /* @__PURE__ */ jsxs11("section", { children: [
986
881
  /* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Full Chat Layout" }),
987
- /* @__PURE__ */ jsxs11("div", { className: "qt-chat-container", style: { height: "24rem", border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)" }, children: [
988
- /* @__PURE__ */ jsxs11("div", { className: "qt-chat-header", children: [
882
+ /* @__PURE__ */ jsxs11("div", { className: "qt-chat-layout", style: { height: "24rem", border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)", display: "flex", flexDirection: "column" }, children: [
883
+ /* @__PURE__ */ jsxs11("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0.75rem 1rem", borderBottom: "1px solid var(--color-border)" }, children: [
989
884
  /* @__PURE__ */ jsxs11("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem" }, children: [
990
885
  /* @__PURE__ */ jsx11("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx11("div", { className: "qt-avatar-fallback", children: "AI" }) }),
991
886
  /* @__PURE__ */ jsxs11("div", { children: [
@@ -998,24 +893,24 @@ var Chat = () => {
998
893
  /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })
999
894
  ] }) }) })
1000
895
  ] }),
1001
- /* @__PURE__ */ jsxs11("div", { className: "qt-chat-messages", children: [
1002
- /* @__PURE__ */ jsxs11("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
896
+ /* @__PURE__ */ jsxs11("div", { style: { flex: 1, overflow: "auto", padding: "1rem", display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
897
+ /* @__PURE__ */ jsxs11("div", { style: { display: "flex", gap: "0.5rem" }, children: [
1003
898
  /* @__PURE__ */ jsx11("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx11("div", { className: "qt-avatar-fallback", children: "AI" }) }),
1004
- /* @__PURE__ */ jsx11("div", { children: /* @__PURE__ */ jsx11("div", { className: "qt-chat-bubble qt-chat-bubble-assistant", children: /* @__PURE__ */ jsx11("p", { children: "Hello! How can I help you today?" }) }) })
899
+ /* @__PURE__ */ jsx11("div", { className: "qt-chat-message qt-chat-message-assistant", children: /* @__PURE__ */ jsx11("p", { children: "Hello! How can I help you today?" }) })
1005
900
  ] }),
1006
- /* @__PURE__ */ jsx11("div", { className: "qt-chat-message qt-chat-message-user", children: /* @__PURE__ */ jsx11("div", { className: "qt-chat-bubble qt-chat-bubble-user", children: /* @__PURE__ */ jsx11("p", { children: "I'd like to know more about theming." }) }) })
901
+ /* @__PURE__ */ jsx11("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx11("div", { className: "qt-chat-message qt-chat-message-user", children: /* @__PURE__ */ jsx11("p", { children: "I'd like to know more about theming." }) }) })
1007
902
  ] }),
1008
- /* @__PURE__ */ jsx11("div", { className: "qt-chat-footer", children: /* @__PURE__ */ jsxs11("div", { className: "qt-chat-input-wrapper", children: [
903
+ /* @__PURE__ */ jsxs11("div", { className: "qt-chat-composer", style: { margin: "0.5rem", borderRadius: "var(--radius-lg)" }, children: [
1009
904
  /* @__PURE__ */ jsx11(
1010
905
  "textarea",
1011
906
  {
1012
- className: "qt-chat-input",
907
+ className: "qt-chat-composer-input qt-input",
1013
908
  placeholder: "Type a message...",
1014
909
  rows: 1
1015
910
  }
1016
911
  ),
1017
912
  /* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-primary qt-button-sm", children: "Send" })
1018
- ] }) })
913
+ ] })
1019
914
  ] })
1020
915
  ] })
1021
916
  ] });
@@ -1175,11 +1070,11 @@ var ThemePanel = ({ title, description }) => {
1175
1070
  ] })
1176
1071
  ] }),
1177
1072
  /* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
1178
- /* @__PURE__ */ jsxs13("div", { className: "qt-chat-message qt-chat-message-assistant", style: { maxWidth: "100%" }, children: [
1073
+ /* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: "0.5rem" }, children: [
1179
1074
  /* @__PURE__ */ jsx13("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx13("div", { className: "qt-avatar-fallback", children: "AI" }) }),
1180
- /* @__PURE__ */ jsx13("div", { className: "qt-chat-bubble qt-chat-bubble-assistant", children: /* @__PURE__ */ jsx13("p", { style: { fontSize: "0.875rem" }, children: "Hello! This is a chat message." }) })
1075
+ /* @__PURE__ */ jsx13("div", { className: "qt-chat-message qt-chat-message-assistant", style: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx13("p", { style: { fontSize: "0.875rem" }, children: "Hello! This is a chat message." }) })
1181
1076
  ] }),
1182
- /* @__PURE__ */ jsx13("div", { className: "qt-chat-message qt-chat-message-user", style: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx13("div", { className: "qt-chat-bubble qt-chat-bubble-user", children: /* @__PURE__ */ jsx13("p", { style: { fontSize: "0.875rem" }, children: "Great, thanks!" }) }) })
1077
+ /* @__PURE__ */ jsx13("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx13("div", { className: "qt-chat-message qt-chat-message-user", style: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx13("p", { style: { fontSize: "0.875rem" }, children: "Great, thanks!" }) }) })
1183
1078
  ] })
1184
1079
  ] });
1185
1080
  };