@intentai/react 2.0.2 → 2.1.1

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 (3) hide show
  1. package/dist/index.js +442 -253
  2. package/dist/index.mjs +442 -253
  3. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -204,28 +204,53 @@ var contentVariants = {
204
204
  var BreathingRing = ({ isActive }) => {
205
205
  const { reducedMotion } = useWidget();
206
206
  if (reducedMotion) return null;
207
- return /* @__PURE__ */ jsx(
208
- motion.div,
209
- {
210
- className: "fiq-breathing-ring",
211
- animate: {
212
- scale: isActive ? [1, 1.15, 1] : 1,
213
- opacity: isActive ? [0.5, 0.8, 0.5] : 0.5
214
- },
215
- transition: {
216
- duration: 3,
217
- repeat: Infinity,
218
- ease: "easeInOut"
219
- },
220
- style: {
221
- position: "absolute",
222
- inset: -8,
223
- borderRadius: "50%",
224
- background: "radial-gradient(circle, var(--widget-primary-glow) 0%, transparent 70%)",
225
- pointerEvents: "none"
207
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
208
+ /* @__PURE__ */ jsx(
209
+ motion.div,
210
+ {
211
+ animate: {
212
+ scale: isActive ? [1, 1.3, 1] : 1,
213
+ opacity: isActive ? [0.2, 0.4, 0.2] : 0.2
214
+ },
215
+ transition: {
216
+ duration: 2.5,
217
+ repeat: Infinity,
218
+ ease: "easeInOut"
219
+ },
220
+ style: {
221
+ position: "absolute",
222
+ inset: -16,
223
+ borderRadius: "50%",
224
+ background: "radial-gradient(circle, var(--widget-primary) 0%, transparent 70%)",
225
+ pointerEvents: "none",
226
+ filter: "blur(8px)"
227
+ }
226
228
  }
227
- }
228
- );
229
+ ),
230
+ /* @__PURE__ */ jsx(
231
+ motion.div,
232
+ {
233
+ className: "fiq-breathing-ring",
234
+ animate: {
235
+ scale: isActive ? [1, 1.08, 1] : 1,
236
+ opacity: isActive ? [0.6, 1, 0.6] : 0.6
237
+ },
238
+ transition: {
239
+ duration: 2,
240
+ repeat: Infinity,
241
+ ease: "easeInOut"
242
+ },
243
+ style: {
244
+ position: "absolute",
245
+ inset: -4,
246
+ borderRadius: "50%",
247
+ border: "2px solid var(--widget-primary)",
248
+ pointerEvents: "none",
249
+ opacity: 0.5
250
+ }
251
+ }
252
+ )
253
+ ] });
229
254
  };
230
255
  var AmbientOrb = ({ audioLevel, isRecording }) => {
231
256
  const { reducedMotion } = useWidget();
@@ -297,35 +322,33 @@ var AmbientOrb = ({ audioLevel, isRecording }) => {
297
322
  style: { transformOrigin: "center" }
298
323
  }
299
324
  ),
300
- /* @__PURE__ */ jsxs("g", { transform: "translate(58, 55)", children: [
301
- /* @__PURE__ */ jsx(
302
- motion.path,
303
- {
304
- d: "M20 4a6 6 0 0 0-6 6v16a6 6 0 0 0 12 0V10a6 6 0 0 0-6-6z",
305
- fill: "none",
306
- stroke: "white",
307
- strokeWidth: "2.5",
308
- strokeLinecap: "round",
309
- animate: {
310
- opacity: isRecording ? [1, 0.7, 1] : 1
311
- },
312
- transition: {
313
- duration: 1,
314
- repeat: isRecording ? Infinity : 0
315
- }
316
- }
317
- ),
318
- /* @__PURE__ */ jsx(
319
- "path",
320
- {
321
- d: "M32 20v4a14 14 0 0 1-28 0v-4M20 38v10M12 48h16",
322
- fill: "none",
323
- stroke: "white",
324
- strokeWidth: "2.5",
325
- strokeLinecap: "round"
326
- }
327
- )
328
- ] }),
325
+ /* @__PURE__ */ jsx("g", { transform: "translate(70, 70)", children: /* @__PURE__ */ jsxs(
326
+ motion.g,
327
+ {
328
+ animate: {
329
+ opacity: isRecording ? [1, 0.7, 1] : 1
330
+ },
331
+ transition: {
332
+ duration: 1,
333
+ repeat: isRecording ? Infinity : 0
334
+ },
335
+ children: [
336
+ /* @__PURE__ */ jsx("rect", { x: "-8", y: "-20", width: "16", height: "26", rx: "8", fill: "white" }),
337
+ /* @__PURE__ */ jsx(
338
+ "path",
339
+ {
340
+ d: "M-14 0 v6 a14 14 0 0 0 28 0 v-6",
341
+ fill: "none",
342
+ stroke: "white",
343
+ strokeWidth: "3",
344
+ strokeLinecap: "round"
345
+ }
346
+ ),
347
+ /* @__PURE__ */ jsx("line", { x1: "0", y1: "20", x2: "0", y2: "28", stroke: "white", strokeWidth: "3", strokeLinecap: "round" }),
348
+ /* @__PURE__ */ jsx("line", { x1: "-8", y1: "28", x2: "8", y2: "28", stroke: "white", strokeWidth: "3", strokeLinecap: "round" })
349
+ ]
350
+ }
351
+ ) }),
329
352
  particles.map((particle) => /* @__PURE__ */ jsx(
330
353
  motion.circle,
331
354
  {
@@ -505,11 +528,13 @@ var CategorySelector = ({ categories, selected, onSelect }) => {
505
528
  style: {
506
529
  display: "block",
507
530
  fontSize: 12,
508
- fontWeight: 500,
531
+ fontWeight: 600,
509
532
  color: "var(--widget-text-muted)",
510
- marginBottom: 10
533
+ marginBottom: 12,
534
+ textTransform: "uppercase",
535
+ letterSpacing: "0.05em"
511
536
  },
512
- children: "What's this about?"
537
+ children: "Category"
513
538
  }
514
539
  ),
515
540
  /* @__PURE__ */ jsx(
@@ -520,31 +545,50 @@ var CategorySelector = ({ categories, selected, onSelect }) => {
520
545
  flexWrap: "wrap",
521
546
  gap: 8
522
547
  },
523
- children: categories.map((category) => /* @__PURE__ */ jsx(
548
+ children: categories.map((category) => /* @__PURE__ */ jsxs(
524
549
  motion.button,
525
550
  {
526
- whileHover: { scale: 1.03 },
527
- whileTap: { scale: 0.97 },
551
+ whileHover: { scale: 1.04, y: -1 },
552
+ whileTap: { scale: 0.96 },
528
553
  onClick: () => onSelect(category.id),
529
554
  style: {
530
- padding: "8px 16px",
531
- background: selected === category.id ? "var(--widget-primary)" : "transparent",
532
- border: `1.5px solid ${selected === category.id ? "var(--widget-primary)" : "var(--widget-glass-border)"}`,
533
- borderRadius: 20,
555
+ padding: "10px 18px",
556
+ background: selected === category.id ? "linear-gradient(145deg, var(--widget-primary) 0%, var(--widget-accent) 100%)" : "var(--widget-glass-bg)",
557
+ border: `1.5px solid ${selected === category.id ? "transparent" : "var(--widget-glass-border)"}`,
558
+ borderRadius: 24,
534
559
  cursor: "pointer",
535
- transition: "all 0.2s ease"
560
+ transition: "all 0.2s ease",
561
+ boxShadow: selected === category.id ? "0 4px 12px -2px var(--widget-primary-glow)" : "0 2px 4px rgba(0,0,0,0.1)",
562
+ position: "relative",
563
+ overflow: "hidden"
536
564
  },
537
- children: /* @__PURE__ */ jsx(
538
- "span",
539
- {
540
- style: {
541
- fontSize: 13,
542
- fontWeight: 500,
543
- color: selected === category.id ? "white" : "var(--widget-text-primary)"
544
- },
545
- children: category.label
546
- }
547
- )
565
+ children: [
566
+ selected === category.id && /* @__PURE__ */ jsx(
567
+ "div",
568
+ {
569
+ style: {
570
+ position: "absolute",
571
+ inset: 0,
572
+ background: "linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 50%)",
573
+ borderRadius: "inherit",
574
+ pointerEvents: "none"
575
+ }
576
+ }
577
+ ),
578
+ /* @__PURE__ */ jsx(
579
+ "span",
580
+ {
581
+ style: {
582
+ fontSize: 13,
583
+ fontWeight: 600,
584
+ color: selected === category.id ? "white" : "var(--widget-text-primary)",
585
+ position: "relative",
586
+ zIndex: 1
587
+ },
588
+ children: category.label
589
+ }
590
+ )
591
+ ]
548
592
  },
549
593
  category.id
550
594
  ))
@@ -708,8 +752,8 @@ var MagneticButton = ({ children, onClick, onPressStart, onPressEnd, variant = "
708
752
  const centerX = rect.left + rect.width / 2;
709
753
  const centerY = rect.top + rect.height / 2;
710
754
  setMagnetOffset({
711
- x: (e.clientX - centerX) * 0.1,
712
- y: (e.clientY - centerY) * 0.1
755
+ x: (e.clientX - centerX) * 0.08,
756
+ y: (e.clientY - centerY) * 0.08
713
757
  });
714
758
  };
715
759
  const handleMouseLeave = () => {
@@ -717,35 +761,49 @@ var MagneticButton = ({ children, onClick, onPressStart, onPressEnd, variant = "
717
761
  };
718
762
  const baseStyles = {
719
763
  width: "100%",
720
- padding: "14px 24px",
764
+ padding: "16px 28px",
721
765
  fontSize: 15,
722
766
  fontWeight: 600,
723
- borderRadius: 12,
767
+ borderRadius: 14,
724
768
  border: "none",
725
769
  cursor: disabled ? "not-allowed" : "pointer",
726
- transition: "background 0.2s, opacity 0.2s",
770
+ transition: "all 0.2s ease",
727
771
  display: "flex",
728
772
  alignItems: "center",
729
773
  justifyContent: "center",
730
- gap: 8
774
+ gap: 10,
775
+ letterSpacing: "0.01em",
776
+ position: "relative",
777
+ overflow: "hidden"
731
778
  };
732
779
  const variantStyles = {
733
780
  primary: {
734
- background: "var(--widget-primary)",
735
- color: "white"
781
+ background: "linear-gradient(145deg, var(--widget-primary) 0%, var(--widget-accent) 100%)",
782
+ color: "white",
783
+ boxShadow: `
784
+ 0 4px 16px -2px var(--widget-primary-glow),
785
+ 0 2px 8px -2px rgba(0, 0, 0, 0.3),
786
+ inset 0 1px 1px rgba(255, 255, 255, 0.2)
787
+ `
736
788
  },
737
789
  secondary: {
738
790
  background: "var(--widget-glass-bg)",
739
791
  color: "var(--widget-text-primary)",
740
- border: "1px solid var(--widget-glass-border)"
792
+ border: "1px solid var(--widget-glass-border)",
793
+ boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)"
741
794
  },
742
795
  ghost: {
743
796
  background: "transparent",
744
797
  color: "var(--widget-text-secondary)"
745
798
  },
746
799
  recording: {
747
- background: "var(--widget-recording)",
748
- color: "white"
800
+ background: "linear-gradient(145deg, #ef4444 0%, #dc2626 100%)",
801
+ color: "white",
802
+ boxShadow: `
803
+ 0 4px 20px -2px var(--widget-recording-glow),
804
+ 0 0 40px -5px var(--widget-recording-glow),
805
+ inset 0 1px 1px rgba(255, 255, 255, 0.2)
806
+ `
749
807
  }
750
808
  };
751
809
  const handlePressStart = () => {
@@ -756,7 +814,7 @@ var MagneticButton = ({ children, onClick, onPressStart, onPressEnd, variant = "
756
814
  if (disabled || loading) return;
757
815
  onPressEnd?.();
758
816
  };
759
- return /* @__PURE__ */ jsx(
817
+ return /* @__PURE__ */ jsxs(
760
818
  motion.button,
761
819
  {
762
820
  ref: buttonRef,
@@ -776,24 +834,38 @@ var MagneticButton = ({ children, onClick, onPressStart, onPressEnd, variant = "
776
834
  y: magnetOffset.y,
777
835
  opacity: disabled ? 0.5 : 1
778
836
  },
779
- whileHover: { scale: disabled ? 1 : 1.02 },
837
+ whileHover: { scale: disabled ? 1 : 1.02, y: -1 },
780
838
  whileTap: { scale: disabled ? 1 : 0.97 },
781
839
  transition: springPresets.snappy,
782
840
  style: { ...baseStyles, ...variantStyles[variant] },
783
- children: loading ? /* @__PURE__ */ jsx(
784
- motion.div,
785
- {
786
- animate: { rotate: 360 },
787
- transition: { duration: 1, repeat: Infinity, ease: "linear" },
788
- style: {
789
- width: 18,
790
- height: 18,
791
- border: "2px solid rgba(255,255,255,0.3)",
792
- borderTopColor: "white",
793
- borderRadius: "50%"
841
+ children: [
842
+ /* @__PURE__ */ jsx(
843
+ "div",
844
+ {
845
+ style: {
846
+ position: "absolute",
847
+ inset: 0,
848
+ background: "linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%)",
849
+ borderRadius: "inherit",
850
+ pointerEvents: "none"
851
+ }
794
852
  }
795
- }
796
- ) : children
853
+ ),
854
+ loading ? /* @__PURE__ */ jsx(
855
+ motion.div,
856
+ {
857
+ animate: { rotate: 360 },
858
+ transition: { duration: 1, repeat: Infinity, ease: "linear" },
859
+ style: {
860
+ width: 20,
861
+ height: 20,
862
+ border: "2.5px solid rgba(255,255,255,0.3)",
863
+ borderTopColor: "white",
864
+ borderRadius: "50%"
865
+ }
866
+ }
867
+ ) : /* @__PURE__ */ jsx("span", { style: { position: "relative", zIndex: 1, display: "flex", alignItems: "center", gap: 10 }, children })
868
+ ]
797
869
  }
798
870
  );
799
871
  };
@@ -992,19 +1064,18 @@ var PremiumVoiceWidget = ({
992
1064
  "aria-label": "Open feedback widget",
993
1065
  "aria-expanded": isExpanded,
994
1066
  style: {
995
- width: 56,
996
- height: 56,
1067
+ width: 60,
1068
+ height: 60,
997
1069
  borderRadius: "50%",
998
1070
  border: "none",
999
1071
  cursor: "pointer",
1000
1072
  position: "relative",
1001
- background: "var(--widget-glass-bg)",
1002
- backdropFilter: "blur(20px) saturate(180%)",
1003
- WebkitBackdropFilter: "blur(20px) saturate(180%)",
1073
+ background: `linear-gradient(145deg, var(--widget-primary) 0%, var(--widget-accent) 100%)`,
1004
1074
  boxShadow: `
1005
- inset 0 0 0 1px var(--widget-glass-highlight),
1006
- 0 4px 24px -4px rgba(0, 0, 0, 0.5),
1007
- 0 0 40px -10px var(--widget-primary-glow)
1075
+ 0 8px 32px -4px var(--widget-primary-glow),
1076
+ 0 4px 16px -2px rgba(0, 0, 0, 0.4),
1077
+ inset 0 1px 1px rgba(255, 255, 255, 0.3),
1078
+ inset 0 -1px 1px rgba(0, 0, 0, 0.2)
1008
1079
  `
1009
1080
  },
1010
1081
  children: [
@@ -1014,47 +1085,83 @@ var PremiumVoiceWidget = ({
1014
1085
  {
1015
1086
  style: {
1016
1087
  position: "absolute",
1017
- inset: 3,
1088
+ inset: 0,
1018
1089
  borderRadius: "50%",
1019
- background: `linear-gradient(135deg, var(--widget-primary) 0%, var(--widget-accent) 100%)`,
1020
- opacity: 0.9
1090
+ background: "linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 100%)",
1091
+ pointerEvents: "none"
1021
1092
  }
1022
1093
  }
1023
1094
  ),
1024
- /* @__PURE__ */ jsxs(
1025
- "svg",
1095
+ /* @__PURE__ */ jsx(
1096
+ "div",
1026
1097
  {
1027
- width: 24,
1028
- height: 24,
1029
- viewBox: "0 0 24 24",
1030
- fill: "none",
1031
- stroke: "white",
1032
- strokeWidth: 2,
1033
- strokeLinecap: "round",
1034
1098
  style: {
1035
1099
  position: "absolute",
1036
1100
  top: "50%",
1037
1101
  left: "50%",
1038
1102
  transform: "translate(-50%, -50%)",
1039
- zIndex: 1
1103
+ zIndex: 1,
1104
+ display: "flex",
1105
+ alignItems: "center",
1106
+ justifyContent: "center"
1040
1107
  },
1041
- children: [
1042
- /* @__PURE__ */ jsx("path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }),
1043
- /* @__PURE__ */ jsx("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
1044
- /* @__PURE__ */ jsx("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
1045
- /* @__PURE__ */ jsx("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
1046
- ]
1108
+ children: /* @__PURE__ */ jsxs(
1109
+ "svg",
1110
+ {
1111
+ width: 26,
1112
+ height: 26,
1113
+ viewBox: "0 0 24 24",
1114
+ fill: "none",
1115
+ style: { filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.2))" },
1116
+ children: [
1117
+ /* @__PURE__ */ jsx(
1118
+ "path",
1119
+ {
1120
+ d: "M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z",
1121
+ fill: "white",
1122
+ opacity: "0.15"
1123
+ }
1124
+ ),
1125
+ /* @__PURE__ */ jsx(
1126
+ "path",
1127
+ {
1128
+ d: "M12 3a2.5 2.5 0 0 0-2.5 2.5v5a2.5 2.5 0 0 0 5 0v-5A2.5 2.5 0 0 0 12 3z",
1129
+ fill: "white"
1130
+ }
1131
+ ),
1132
+ /* @__PURE__ */ jsx(
1133
+ "path",
1134
+ {
1135
+ d: "M16.5 10.5v1a4.5 4.5 0 0 1-9 0v-1",
1136
+ stroke: "white",
1137
+ strokeWidth: "2",
1138
+ strokeLinecap: "round",
1139
+ fill: "none"
1140
+ }
1141
+ ),
1142
+ /* @__PURE__ */ jsx(
1143
+ "path",
1144
+ {
1145
+ d: "M12 15.5v2.5M9.5 18h5",
1146
+ stroke: "white",
1147
+ strokeWidth: "2",
1148
+ strokeLinecap: "round"
1149
+ }
1150
+ )
1151
+ ]
1152
+ }
1153
+ )
1047
1154
  }
1048
1155
  ),
1049
1156
  shouldShowAttentionPulse && /* @__PURE__ */ jsx(
1050
1157
  motion.div,
1051
1158
  {
1052
1159
  initial: { scale: 1, opacity: 1 },
1053
- animate: { scale: 1.5, opacity: 0 },
1054
- transition: { duration: 1, repeat: 3 },
1160
+ animate: { scale: 1.6, opacity: 0 },
1161
+ transition: { duration: 1.2, repeat: 3 },
1055
1162
  style: {
1056
1163
  position: "absolute",
1057
- inset: 0,
1164
+ inset: -2,
1058
1165
  borderRadius: "50%",
1059
1166
  border: "2px solid var(--widget-primary)",
1060
1167
  pointerEvents: "none"
@@ -1068,19 +1175,22 @@ var PremiumVoiceWidget = ({
1068
1175
  animate: { scale: 1 },
1069
1176
  style: {
1070
1177
  position: "absolute",
1071
- top: -4,
1072
- right: -4,
1073
- width: 16,
1074
- height: 16,
1178
+ top: -2,
1179
+ right: -2,
1180
+ width: 18,
1181
+ height: 18,
1075
1182
  borderRadius: "50%",
1076
- background: "var(--widget-frustrated)",
1077
- border: "2px solid var(--widget-glass-bg)",
1183
+ background: "linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%)",
1184
+ border: "2px solid white",
1078
1185
  display: "flex",
1079
1186
  alignItems: "center",
1080
1187
  justifyContent: "center",
1081
- fontSize: 10
1188
+ fontSize: 11,
1189
+ fontWeight: 700,
1190
+ color: "white",
1191
+ boxShadow: "0 2px 8px rgba(239, 68, 68, 0.5)"
1082
1192
  },
1083
- children: "?"
1193
+ children: "!"
1084
1194
  }
1085
1195
  )
1086
1196
  ]
@@ -1144,11 +1254,15 @@ var PremiumVoiceWidget = ({
1144
1254
  animate: "expanded",
1145
1255
  exit: "trigger",
1146
1256
  style: {
1147
- background: "var(--widget-glass-bg)",
1148
- backdropFilter: "blur(20px) saturate(180%)",
1149
- WebkitBackdropFilter: "blur(20px) saturate(180%)",
1257
+ background: theme === "dark" ? "linear-gradient(180deg, rgba(28, 28, 32, 0.95) 0%, rgba(20, 20, 24, 0.98) 100%)" : "linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 248, 250, 0.98) 100%)",
1258
+ backdropFilter: "blur(24px) saturate(200%)",
1259
+ WebkitBackdropFilter: "blur(24px) saturate(200%)",
1150
1260
  border: "1px solid var(--widget-glass-border)",
1151
- boxShadow: "0 20px 60px -12px rgba(0, 0, 0, 0.5)",
1261
+ boxShadow: `
1262
+ 0 24px 80px -12px rgba(0, 0, 0, 0.6),
1263
+ 0 0 1px 0 rgba(255, 255, 255, 0.1) inset,
1264
+ 0 1px 0 0 rgba(255, 255, 255, 0.05) inset
1265
+ `,
1152
1266
  overflow: "hidden",
1153
1267
  display: "flex",
1154
1268
  flexDirection: "column"
@@ -1173,26 +1287,50 @@ var PremiumVoiceWidget = ({
1173
1287
  justifyContent: "space-between",
1174
1288
  alignItems: "center",
1175
1289
  padding: "20px 24px",
1176
- borderBottom: "1px solid var(--widget-glass-border)"
1290
+ borderBottom: "1px solid var(--widget-glass-border)",
1291
+ background: theme === "dark" ? "linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%)" : "linear-gradient(180deg, rgba(0,0,0,0.01) 0%, transparent 100%)"
1177
1292
  },
1178
1293
  children: [
1179
- /* @__PURE__ */ jsx(
1180
- "h2",
1181
- {
1182
- id: "widget-title",
1183
- style: {
1184
- fontSize: 18,
1185
- fontWeight: 700,
1186
- color: "var(--widget-text-primary)",
1187
- margin: 0
1188
- },
1189
- children: "Share Your Thoughts"
1190
- }
1191
- ),
1294
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
1295
+ /* @__PURE__ */ jsx(
1296
+ "div",
1297
+ {
1298
+ style: {
1299
+ width: 36,
1300
+ height: 36,
1301
+ borderRadius: 10,
1302
+ background: "linear-gradient(145deg, var(--widget-primary) 0%, var(--widget-accent) 100%)",
1303
+ display: "flex",
1304
+ alignItems: "center",
1305
+ justifyContent: "center",
1306
+ boxShadow: "0 2px 8px -2px var(--widget-primary-glow)"
1307
+ },
1308
+ children: /* @__PURE__ */ jsxs("svg", { width: 18, height: 18, viewBox: "0 0 24 24", fill: "white", children: [
1309
+ /* @__PURE__ */ jsx("path", { d: "M12 3a2.5 2.5 0 0 0-2.5 2.5v5a2.5 2.5 0 0 0 5 0v-5A2.5 2.5 0 0 0 12 3z" }),
1310
+ /* @__PURE__ */ jsx("path", { d: "M16.5 10.5v1a4.5 4.5 0 0 1-9 0v-1", stroke: "white", strokeWidth: "2", strokeLinecap: "round", fill: "none" }),
1311
+ /* @__PURE__ */ jsx("path", { d: "M12 15.5v2.5M9.5 18h5", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
1312
+ ] })
1313
+ }
1314
+ ),
1315
+ /* @__PURE__ */ jsx(
1316
+ "h2",
1317
+ {
1318
+ id: "widget-title",
1319
+ style: {
1320
+ fontSize: 17,
1321
+ fontWeight: 700,
1322
+ color: "var(--widget-text-primary)",
1323
+ margin: 0,
1324
+ letterSpacing: "-0.01em"
1325
+ },
1326
+ children: "Share Feedback"
1327
+ }
1328
+ )
1329
+ ] }),
1192
1330
  /* @__PURE__ */ jsx(
1193
1331
  motion.button,
1194
1332
  {
1195
- whileHover: { scale: 1.1, rotate: 90 },
1333
+ whileHover: { scale: 1.1, backgroundColor: "var(--widget-glass-border)" },
1196
1334
  whileTap: { scale: 0.9 },
1197
1335
  onClick: handleClose,
1198
1336
  "aria-label": "Close widget",
@@ -1206,17 +1344,19 @@ var PremiumVoiceWidget = ({
1206
1344
  cursor: "pointer",
1207
1345
  display: "flex",
1208
1346
  alignItems: "center",
1209
- justifyContent: "center"
1347
+ justifyContent: "center",
1348
+ transition: "background 0.15s ease"
1210
1349
  },
1211
1350
  children: /* @__PURE__ */ jsx(
1212
1351
  "svg",
1213
1352
  {
1214
- width: 20,
1215
- height: 20,
1353
+ width: 18,
1354
+ height: 18,
1216
1355
  viewBox: "0 0 24 24",
1217
1356
  fill: "none",
1218
1357
  stroke: "currentColor",
1219
- strokeWidth: 2,
1358
+ strokeWidth: 2.5,
1359
+ strokeLinecap: "round",
1220
1360
  children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" })
1221
1361
  }
1222
1362
  )
@@ -1230,41 +1370,44 @@ var PremiumVoiceWidget = ({
1230
1370
  {
1231
1371
  style: {
1232
1372
  display: "flex",
1233
- borderBottom: "1px solid var(--widget-glass-border)"
1373
+ padding: "8px 12px",
1374
+ gap: 4,
1375
+ background: "var(--widget-glass-bg)",
1376
+ margin: "0 16px",
1377
+ marginTop: 16,
1378
+ borderRadius: 12,
1379
+ border: "1px solid var(--widget-glass-border)"
1234
1380
  },
1235
1381
  children: ["voice", "text"].map((tab) => /* @__PURE__ */ jsxs(
1236
1382
  motion.button,
1237
1383
  {
1238
1384
  onClick: () => setActiveTab(tab),
1239
- whileHover: { backgroundColor: "rgba(255,255,255,0.05)" },
1240
1385
  style: {
1241
1386
  flex: 1,
1242
- padding: "14px 0",
1387
+ padding: "10px 0",
1243
1388
  border: "none",
1244
- background: "transparent",
1245
- fontSize: 14,
1246
- fontWeight: 500,
1247
- color: activeTab === tab ? "var(--widget-primary)" : "var(--widget-text-secondary)",
1389
+ background: activeTab === tab ? "linear-gradient(145deg, var(--widget-primary) 0%, var(--widget-accent) 100%)" : "transparent",
1390
+ fontSize: 13,
1391
+ fontWeight: 600,
1392
+ color: activeTab === tab ? "white" : "var(--widget-text-secondary)",
1248
1393
  cursor: "pointer",
1249
- position: "relative"
1394
+ position: "relative",
1395
+ borderRadius: 8,
1396
+ transition: "all 0.2s ease",
1397
+ display: "flex",
1398
+ alignItems: "center",
1399
+ justifyContent: "center",
1400
+ gap: 6,
1401
+ boxShadow: activeTab === tab ? "0 2px 8px -2px var(--widget-primary-glow)" : "none"
1250
1402
  },
1403
+ whileHover: { scale: activeTab === tab ? 1 : 1.02 },
1404
+ whileTap: { scale: 0.98 },
1251
1405
  children: [
1252
- tab === "voice" ? "Voice" : "Text",
1253
- activeTab === tab && /* @__PURE__ */ jsx(
1254
- motion.div,
1255
- {
1256
- layoutId: "activeTab",
1257
- style: {
1258
- position: "absolute",
1259
- bottom: -1,
1260
- left: 0,
1261
- right: 0,
1262
- height: 2,
1263
- background: "var(--widget-primary)"
1264
- },
1265
- transition: springPresets.smooth
1266
- }
1267
- )
1406
+ tab === "voice" ? /* @__PURE__ */ jsxs("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "currentColor", children: [
1407
+ /* @__PURE__ */ jsx("path", { d: "M12 3a2.5 2.5 0 0 0-2.5 2.5v5a2.5 2.5 0 0 0 5 0v-5A2.5 2.5 0 0 0 12 3z" }),
1408
+ /* @__PURE__ */ jsx("path", { d: "M16.5 10.5v1a4.5 4.5 0 0 1-9 0v-1", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", fill: "none" })
1409
+ ] }) : /* @__PURE__ */ jsx("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx("path", { d: "M4 6h16M4 12h16M4 18h10" }) }),
1410
+ tab === "voice" ? "Voice" : "Text"
1268
1411
  ]
1269
1412
  },
1270
1413
  tab
@@ -1281,108 +1424,154 @@ var PremiumVoiceWidget = ({
1281
1424
  }
1282
1425
  ) }),
1283
1426
  activeTab === "voice" && /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
1284
- /* @__PURE__ */ jsx(AmbientOrb, { audioLevel, isRecording }),
1285
- isRecording && /* @__PURE__ */ jsx(
1286
- RecordingTimer,
1287
- {
1288
- seconds: recordingSeconds,
1289
- maxDuration: maxRecordingDuration
1290
- }
1291
- ),
1292
- !isRecording && recordingSeconds === 0 && /* @__PURE__ */ jsx(
1293
- "p",
1427
+ /* @__PURE__ */ jsxs(
1428
+ "div",
1294
1429
  {
1295
1430
  style: {
1296
- color: "var(--widget-text-secondary)",
1297
- fontSize: 14,
1298
- marginTop: 16
1431
+ background: "var(--widget-glass-bg)",
1432
+ borderRadius: 16,
1433
+ padding: "24px 16px",
1434
+ border: "1px solid var(--widget-glass-border)",
1435
+ marginBottom: 16
1299
1436
  },
1300
- children: "Hold to record"
1437
+ children: [
1438
+ /* @__PURE__ */ jsx(AmbientOrb, { audioLevel, isRecording }),
1439
+ isRecording && /* @__PURE__ */ jsx(
1440
+ RecordingTimer,
1441
+ {
1442
+ seconds: recordingSeconds,
1443
+ maxDuration: maxRecordingDuration
1444
+ }
1445
+ ),
1446
+ !isRecording && recordingSeconds === 0 && !transcription && /* @__PURE__ */ jsx(
1447
+ "p",
1448
+ {
1449
+ style: {
1450
+ color: "var(--widget-text-muted)",
1451
+ fontSize: 13,
1452
+ marginTop: 12,
1453
+ marginBottom: 0
1454
+ },
1455
+ children: "Click Record to start"
1456
+ }
1457
+ )
1458
+ ]
1301
1459
  }
1302
1460
  ),
1303
- (isRecording || transcription) && /* @__PURE__ */ jsx("div", { style: { marginTop: 20 }, children: /* @__PURE__ */ jsx(
1461
+ (isRecording || transcription) && /* @__PURE__ */ jsx("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsx(
1304
1462
  TranscriptionDisplay,
1305
1463
  {
1306
1464
  text: transcription,
1307
1465
  isLive: isRecording
1308
1466
  }
1309
1467
  ) }),
1310
- /* @__PURE__ */ jsx("div", { style: { marginTop: 20 }, children: /* @__PURE__ */ jsx(
1468
+ /* @__PURE__ */ jsx(
1311
1469
  MagneticButton,
1312
1470
  {
1313
- onPressStart: handleStartRecording,
1314
- onPressEnd: handleStopRecording,
1471
+ onClick: isRecording ? handleStopRecording : handleStartRecording,
1315
1472
  variant: isRecording ? "recording" : "primary",
1316
1473
  children: isRecording ? /* @__PURE__ */ jsxs(Fragment, { children: [
1317
1474
  /* @__PURE__ */ jsx(
1318
- "svg",
1475
+ motion.div,
1319
1476
  {
1320
- width: 16,
1321
- height: 16,
1322
- viewBox: "0 0 24 24",
1323
- fill: "currentColor",
1324
- children: /* @__PURE__ */ jsx("circle", { cx: 12, cy: 12, r: 6 })
1477
+ animate: { scale: [1, 1.2, 1] },
1478
+ transition: { duration: 1, repeat: Infinity },
1479
+ style: {
1480
+ width: 10,
1481
+ height: 10,
1482
+ borderRadius: 2,
1483
+ background: "white"
1484
+ }
1325
1485
  }
1326
1486
  ),
1327
- "Recording..."
1328
- ] }) : transcription ? "Hold to record more" : "Hold to record"
1329
- }
1330
- ) })
1331
- ] }),
1332
- activeTab === "text" && /* @__PURE__ */ jsxs("div", { children: [
1333
- /* @__PURE__ */ jsx(
1334
- "textarea",
1335
- {
1336
- value: textContent,
1337
- onChange: (e) => setTextContent(e.target.value),
1338
- placeholder: "Tell us what you think...",
1339
- style: {
1340
- width: "100%",
1341
- minHeight: 150,
1342
- padding: 16,
1343
- fontSize: 14,
1344
- lineHeight: 1.6,
1345
- color: "var(--widget-text-primary)",
1346
- background: "var(--widget-glass-bg)",
1347
- border: "1px solid var(--widget-glass-border)",
1348
- borderRadius: 12,
1349
- resize: "vertical",
1350
- fontFamily: "inherit"
1351
- }
1352
- }
1353
- ),
1354
- /* @__PURE__ */ jsxs(
1355
- "div",
1356
- {
1357
- style: {
1358
- display: "flex",
1359
- justifyContent: "flex-end",
1360
- marginTop: 8,
1361
- fontSize: 12,
1362
- color: "var(--widget-text-muted)"
1363
- },
1364
- children: [
1365
- textContent.length,
1366
- " / 5000"
1367
- ]
1487
+ "Stop Recording"
1488
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
1489
+ /* @__PURE__ */ jsx("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12 3a2.5 2.5 0 0 0-2.5 2.5v5a2.5 2.5 0 0 0 5 0v-5A2.5 2.5 0 0 0 12 3z" }) }),
1490
+ transcription ? "Record Again" : "Record"
1491
+ ] })
1368
1492
  }
1369
1493
  )
1370
- ] })
1494
+ ] }),
1495
+ activeTab === "text" && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
1496
+ "div",
1497
+ {
1498
+ style: {
1499
+ position: "relative",
1500
+ background: "var(--widget-glass-bg)",
1501
+ border: "1px solid var(--widget-glass-border)",
1502
+ borderRadius: 14,
1503
+ overflow: "hidden"
1504
+ },
1505
+ children: [
1506
+ /* @__PURE__ */ jsx(
1507
+ "textarea",
1508
+ {
1509
+ value: textContent,
1510
+ onChange: (e) => setTextContent(e.target.value),
1511
+ placeholder: "Share your thoughts, ideas, or feedback...",
1512
+ style: {
1513
+ width: "100%",
1514
+ minHeight: 140,
1515
+ padding: 16,
1516
+ fontSize: 14,
1517
+ lineHeight: 1.7,
1518
+ color: "var(--widget-text-primary)",
1519
+ background: "transparent",
1520
+ border: "none",
1521
+ resize: "none",
1522
+ fontFamily: "inherit",
1523
+ outline: "none"
1524
+ }
1525
+ }
1526
+ ),
1527
+ /* @__PURE__ */ jsx(
1528
+ "div",
1529
+ {
1530
+ style: {
1531
+ display: "flex",
1532
+ justifyContent: "flex-end",
1533
+ padding: "8px 12px",
1534
+ borderTop: "1px solid var(--widget-glass-border)",
1535
+ background: theme === "dark" ? "rgba(0,0,0,0.2)" : "rgba(0,0,0,0.02)"
1536
+ },
1537
+ children: /* @__PURE__ */ jsxs(
1538
+ "span",
1539
+ {
1540
+ style: {
1541
+ fontSize: 11,
1542
+ fontWeight: 500,
1543
+ color: textContent.length > 4500 ? "var(--widget-recording)" : "var(--widget-text-muted)"
1544
+ },
1545
+ children: [
1546
+ textContent.length.toLocaleString(),
1547
+ " / 5,000"
1548
+ ]
1549
+ }
1550
+ )
1551
+ }
1552
+ )
1553
+ ]
1554
+ }
1555
+ ) })
1371
1556
  ] }),
1372
1557
  /* @__PURE__ */ jsx(
1373
1558
  "div",
1374
1559
  {
1375
1560
  style: {
1376
- padding: "16px 24px",
1377
- borderTop: "1px solid var(--widget-glass-border)"
1561
+ padding: "16px 24px 20px",
1562
+ borderTop: "1px solid var(--widget-glass-border)",
1563
+ background: theme === "dark" ? "linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.2) 100%)" : "linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.02) 100%)"
1378
1564
  },
1379
- children: /* @__PURE__ */ jsx(
1565
+ children: /* @__PURE__ */ jsxs(
1380
1566
  MagneticButton,
1381
1567
  {
1382
1568
  onClick: handleSubmit,
1383
1569
  disabled: !selectedCategory || activeTab === "voice" && !transcription || activeTab === "text" && !textContent.trim(),
1384
1570
  loading: isSubmitting,
1385
- children: "Submit Feedback"
1571
+ children: [
1572
+ /* @__PURE__ */ jsx("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: /* @__PURE__ */ jsx("path", { d: "M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" }) }),
1573
+ "Submit Feedback"
1574
+ ]
1386
1575
  }
1387
1576
  )
1388
1577
  }