@intentai/react 2.0.2 → 2.1.0

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 +417 -222
  2. package/dist/index.mjs +417 -222
  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();
@@ -505,11 +530,13 @@ var CategorySelector = ({ categories, selected, onSelect }) => {
505
530
  style: {
506
531
  display: "block",
507
532
  fontSize: 12,
508
- fontWeight: 500,
533
+ fontWeight: 600,
509
534
  color: "var(--widget-text-muted)",
510
- marginBottom: 10
535
+ marginBottom: 12,
536
+ textTransform: "uppercase",
537
+ letterSpacing: "0.05em"
511
538
  },
512
- children: "What's this about?"
539
+ children: "Category"
513
540
  }
514
541
  ),
515
542
  /* @__PURE__ */ jsx(
@@ -520,31 +547,50 @@ var CategorySelector = ({ categories, selected, onSelect }) => {
520
547
  flexWrap: "wrap",
521
548
  gap: 8
522
549
  },
523
- children: categories.map((category) => /* @__PURE__ */ jsx(
550
+ children: categories.map((category) => /* @__PURE__ */ jsxs(
524
551
  motion.button,
525
552
  {
526
- whileHover: { scale: 1.03 },
527
- whileTap: { scale: 0.97 },
553
+ whileHover: { scale: 1.04, y: -1 },
554
+ whileTap: { scale: 0.96 },
528
555
  onClick: () => onSelect(category.id),
529
556
  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,
557
+ padding: "10px 18px",
558
+ background: selected === category.id ? "linear-gradient(145deg, var(--widget-primary) 0%, var(--widget-accent) 100%)" : "var(--widget-glass-bg)",
559
+ border: `1.5px solid ${selected === category.id ? "transparent" : "var(--widget-glass-border)"}`,
560
+ borderRadius: 24,
534
561
  cursor: "pointer",
535
- transition: "all 0.2s ease"
562
+ transition: "all 0.2s ease",
563
+ boxShadow: selected === category.id ? "0 4px 12px -2px var(--widget-primary-glow)" : "0 2px 4px rgba(0,0,0,0.1)",
564
+ position: "relative",
565
+ overflow: "hidden"
536
566
  },
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
- )
567
+ children: [
568
+ selected === category.id && /* @__PURE__ */ jsx(
569
+ "div",
570
+ {
571
+ style: {
572
+ position: "absolute",
573
+ inset: 0,
574
+ background: "linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 50%)",
575
+ borderRadius: "inherit",
576
+ pointerEvents: "none"
577
+ }
578
+ }
579
+ ),
580
+ /* @__PURE__ */ jsx(
581
+ "span",
582
+ {
583
+ style: {
584
+ fontSize: 13,
585
+ fontWeight: 600,
586
+ color: selected === category.id ? "white" : "var(--widget-text-primary)",
587
+ position: "relative",
588
+ zIndex: 1
589
+ },
590
+ children: category.label
591
+ }
592
+ )
593
+ ]
548
594
  },
549
595
  category.id
550
596
  ))
@@ -708,8 +754,8 @@ var MagneticButton = ({ children, onClick, onPressStart, onPressEnd, variant = "
708
754
  const centerX = rect.left + rect.width / 2;
709
755
  const centerY = rect.top + rect.height / 2;
710
756
  setMagnetOffset({
711
- x: (e.clientX - centerX) * 0.1,
712
- y: (e.clientY - centerY) * 0.1
757
+ x: (e.clientX - centerX) * 0.08,
758
+ y: (e.clientY - centerY) * 0.08
713
759
  });
714
760
  };
715
761
  const handleMouseLeave = () => {
@@ -717,35 +763,49 @@ var MagneticButton = ({ children, onClick, onPressStart, onPressEnd, variant = "
717
763
  };
718
764
  const baseStyles = {
719
765
  width: "100%",
720
- padding: "14px 24px",
766
+ padding: "16px 28px",
721
767
  fontSize: 15,
722
768
  fontWeight: 600,
723
- borderRadius: 12,
769
+ borderRadius: 14,
724
770
  border: "none",
725
771
  cursor: disabled ? "not-allowed" : "pointer",
726
- transition: "background 0.2s, opacity 0.2s",
772
+ transition: "all 0.2s ease",
727
773
  display: "flex",
728
774
  alignItems: "center",
729
775
  justifyContent: "center",
730
- gap: 8
776
+ gap: 10,
777
+ letterSpacing: "0.01em",
778
+ position: "relative",
779
+ overflow: "hidden"
731
780
  };
732
781
  const variantStyles = {
733
782
  primary: {
734
- background: "var(--widget-primary)",
735
- color: "white"
783
+ background: "linear-gradient(145deg, var(--widget-primary) 0%, var(--widget-accent) 100%)",
784
+ color: "white",
785
+ boxShadow: `
786
+ 0 4px 16px -2px var(--widget-primary-glow),
787
+ 0 2px 8px -2px rgba(0, 0, 0, 0.3),
788
+ inset 0 1px 1px rgba(255, 255, 255, 0.2)
789
+ `
736
790
  },
737
791
  secondary: {
738
792
  background: "var(--widget-glass-bg)",
739
793
  color: "var(--widget-text-primary)",
740
- border: "1px solid var(--widget-glass-border)"
794
+ border: "1px solid var(--widget-glass-border)",
795
+ boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)"
741
796
  },
742
797
  ghost: {
743
798
  background: "transparent",
744
799
  color: "var(--widget-text-secondary)"
745
800
  },
746
801
  recording: {
747
- background: "var(--widget-recording)",
748
- color: "white"
802
+ background: "linear-gradient(145deg, #ef4444 0%, #dc2626 100%)",
803
+ color: "white",
804
+ boxShadow: `
805
+ 0 4px 20px -2px var(--widget-recording-glow),
806
+ 0 0 40px -5px var(--widget-recording-glow),
807
+ inset 0 1px 1px rgba(255, 255, 255, 0.2)
808
+ `
749
809
  }
750
810
  };
751
811
  const handlePressStart = () => {
@@ -756,7 +816,7 @@ var MagneticButton = ({ children, onClick, onPressStart, onPressEnd, variant = "
756
816
  if (disabled || loading) return;
757
817
  onPressEnd?.();
758
818
  };
759
- return /* @__PURE__ */ jsx(
819
+ return /* @__PURE__ */ jsxs(
760
820
  motion.button,
761
821
  {
762
822
  ref: buttonRef,
@@ -776,24 +836,38 @@ var MagneticButton = ({ children, onClick, onPressStart, onPressEnd, variant = "
776
836
  y: magnetOffset.y,
777
837
  opacity: disabled ? 0.5 : 1
778
838
  },
779
- whileHover: { scale: disabled ? 1 : 1.02 },
839
+ whileHover: { scale: disabled ? 1 : 1.02, y: -1 },
780
840
  whileTap: { scale: disabled ? 1 : 0.97 },
781
841
  transition: springPresets.snappy,
782
842
  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%"
843
+ children: [
844
+ /* @__PURE__ */ jsx(
845
+ "div",
846
+ {
847
+ style: {
848
+ position: "absolute",
849
+ inset: 0,
850
+ background: "linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%)",
851
+ borderRadius: "inherit",
852
+ pointerEvents: "none"
853
+ }
794
854
  }
795
- }
796
- ) : children
855
+ ),
856
+ loading ? /* @__PURE__ */ jsx(
857
+ motion.div,
858
+ {
859
+ animate: { rotate: 360 },
860
+ transition: { duration: 1, repeat: Infinity, ease: "linear" },
861
+ style: {
862
+ width: 20,
863
+ height: 20,
864
+ border: "2.5px solid rgba(255,255,255,0.3)",
865
+ borderTopColor: "white",
866
+ borderRadius: "50%"
867
+ }
868
+ }
869
+ ) : /* @__PURE__ */ jsx("span", { style: { position: "relative", zIndex: 1, display: "flex", alignItems: "center", gap: 10 }, children })
870
+ ]
797
871
  }
798
872
  );
799
873
  };
@@ -992,19 +1066,18 @@ var PremiumVoiceWidget = ({
992
1066
  "aria-label": "Open feedback widget",
993
1067
  "aria-expanded": isExpanded,
994
1068
  style: {
995
- width: 56,
996
- height: 56,
1069
+ width: 60,
1070
+ height: 60,
997
1071
  borderRadius: "50%",
998
1072
  border: "none",
999
1073
  cursor: "pointer",
1000
1074
  position: "relative",
1001
- background: "var(--widget-glass-bg)",
1002
- backdropFilter: "blur(20px) saturate(180%)",
1003
- WebkitBackdropFilter: "blur(20px) saturate(180%)",
1075
+ background: `linear-gradient(145deg, var(--widget-primary) 0%, var(--widget-accent) 100%)`,
1004
1076
  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)
1077
+ 0 8px 32px -4px var(--widget-primary-glow),
1078
+ 0 4px 16px -2px rgba(0, 0, 0, 0.4),
1079
+ inset 0 1px 1px rgba(255, 255, 255, 0.3),
1080
+ inset 0 -1px 1px rgba(0, 0, 0, 0.2)
1008
1081
  `
1009
1082
  },
1010
1083
  children: [
@@ -1014,47 +1087,83 @@ var PremiumVoiceWidget = ({
1014
1087
  {
1015
1088
  style: {
1016
1089
  position: "absolute",
1017
- inset: 3,
1090
+ inset: 0,
1018
1091
  borderRadius: "50%",
1019
- background: `linear-gradient(135deg, var(--widget-primary) 0%, var(--widget-accent) 100%)`,
1020
- opacity: 0.9
1092
+ background: "linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 100%)",
1093
+ pointerEvents: "none"
1021
1094
  }
1022
1095
  }
1023
1096
  ),
1024
- /* @__PURE__ */ jsxs(
1025
- "svg",
1097
+ /* @__PURE__ */ jsx(
1098
+ "div",
1026
1099
  {
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
1100
  style: {
1035
1101
  position: "absolute",
1036
1102
  top: "50%",
1037
1103
  left: "50%",
1038
1104
  transform: "translate(-50%, -50%)",
1039
- zIndex: 1
1105
+ zIndex: 1,
1106
+ display: "flex",
1107
+ alignItems: "center",
1108
+ justifyContent: "center"
1040
1109
  },
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
- ]
1110
+ children: /* @__PURE__ */ jsxs(
1111
+ "svg",
1112
+ {
1113
+ width: 26,
1114
+ height: 26,
1115
+ viewBox: "0 0 24 24",
1116
+ fill: "none",
1117
+ style: { filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.2))" },
1118
+ children: [
1119
+ /* @__PURE__ */ jsx(
1120
+ "path",
1121
+ {
1122
+ 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",
1123
+ fill: "white",
1124
+ opacity: "0.15"
1125
+ }
1126
+ ),
1127
+ /* @__PURE__ */ jsx(
1128
+ "path",
1129
+ {
1130
+ 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",
1131
+ fill: "white"
1132
+ }
1133
+ ),
1134
+ /* @__PURE__ */ jsx(
1135
+ "path",
1136
+ {
1137
+ d: "M16.5 10.5v1a4.5 4.5 0 0 1-9 0v-1",
1138
+ stroke: "white",
1139
+ strokeWidth: "2",
1140
+ strokeLinecap: "round",
1141
+ fill: "none"
1142
+ }
1143
+ ),
1144
+ /* @__PURE__ */ jsx(
1145
+ "path",
1146
+ {
1147
+ d: "M12 15.5v2.5M9.5 18h5",
1148
+ stroke: "white",
1149
+ strokeWidth: "2",
1150
+ strokeLinecap: "round"
1151
+ }
1152
+ )
1153
+ ]
1154
+ }
1155
+ )
1047
1156
  }
1048
1157
  ),
1049
1158
  shouldShowAttentionPulse && /* @__PURE__ */ jsx(
1050
1159
  motion.div,
1051
1160
  {
1052
1161
  initial: { scale: 1, opacity: 1 },
1053
- animate: { scale: 1.5, opacity: 0 },
1054
- transition: { duration: 1, repeat: 3 },
1162
+ animate: { scale: 1.6, opacity: 0 },
1163
+ transition: { duration: 1.2, repeat: 3 },
1055
1164
  style: {
1056
1165
  position: "absolute",
1057
- inset: 0,
1166
+ inset: -2,
1058
1167
  borderRadius: "50%",
1059
1168
  border: "2px solid var(--widget-primary)",
1060
1169
  pointerEvents: "none"
@@ -1068,19 +1177,22 @@ var PremiumVoiceWidget = ({
1068
1177
  animate: { scale: 1 },
1069
1178
  style: {
1070
1179
  position: "absolute",
1071
- top: -4,
1072
- right: -4,
1073
- width: 16,
1074
- height: 16,
1180
+ top: -2,
1181
+ right: -2,
1182
+ width: 18,
1183
+ height: 18,
1075
1184
  borderRadius: "50%",
1076
- background: "var(--widget-frustrated)",
1077
- border: "2px solid var(--widget-glass-bg)",
1185
+ background: "linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%)",
1186
+ border: "2px solid white",
1078
1187
  display: "flex",
1079
1188
  alignItems: "center",
1080
1189
  justifyContent: "center",
1081
- fontSize: 10
1190
+ fontSize: 11,
1191
+ fontWeight: 700,
1192
+ color: "white",
1193
+ boxShadow: "0 2px 8px rgba(239, 68, 68, 0.5)"
1082
1194
  },
1083
- children: "?"
1195
+ children: "!"
1084
1196
  }
1085
1197
  )
1086
1198
  ]
@@ -1144,11 +1256,15 @@ var PremiumVoiceWidget = ({
1144
1256
  animate: "expanded",
1145
1257
  exit: "trigger",
1146
1258
  style: {
1147
- background: "var(--widget-glass-bg)",
1148
- backdropFilter: "blur(20px) saturate(180%)",
1149
- WebkitBackdropFilter: "blur(20px) saturate(180%)",
1259
+ 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%)",
1260
+ backdropFilter: "blur(24px) saturate(200%)",
1261
+ WebkitBackdropFilter: "blur(24px) saturate(200%)",
1150
1262
  border: "1px solid var(--widget-glass-border)",
1151
- boxShadow: "0 20px 60px -12px rgba(0, 0, 0, 0.5)",
1263
+ boxShadow: `
1264
+ 0 24px 80px -12px rgba(0, 0, 0, 0.6),
1265
+ 0 0 1px 0 rgba(255, 255, 255, 0.1) inset,
1266
+ 0 1px 0 0 rgba(255, 255, 255, 0.05) inset
1267
+ `,
1152
1268
  overflow: "hidden",
1153
1269
  display: "flex",
1154
1270
  flexDirection: "column"
@@ -1173,26 +1289,50 @@ var PremiumVoiceWidget = ({
1173
1289
  justifyContent: "space-between",
1174
1290
  alignItems: "center",
1175
1291
  padding: "20px 24px",
1176
- borderBottom: "1px solid var(--widget-glass-border)"
1292
+ borderBottom: "1px solid var(--widget-glass-border)",
1293
+ 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
1294
  },
1178
1295
  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
- ),
1296
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
1297
+ /* @__PURE__ */ jsx(
1298
+ "div",
1299
+ {
1300
+ style: {
1301
+ width: 36,
1302
+ height: 36,
1303
+ borderRadius: 10,
1304
+ background: "linear-gradient(145deg, var(--widget-primary) 0%, var(--widget-accent) 100%)",
1305
+ display: "flex",
1306
+ alignItems: "center",
1307
+ justifyContent: "center",
1308
+ boxShadow: "0 2px 8px -2px var(--widget-primary-glow)"
1309
+ },
1310
+ children: /* @__PURE__ */ jsxs("svg", { width: 18, height: 18, viewBox: "0 0 24 24", fill: "white", children: [
1311
+ /* @__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" }),
1312
+ /* @__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" }),
1313
+ /* @__PURE__ */ jsx("path", { d: "M12 15.5v2.5M9.5 18h5", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
1314
+ ] })
1315
+ }
1316
+ ),
1317
+ /* @__PURE__ */ jsx(
1318
+ "h2",
1319
+ {
1320
+ id: "widget-title",
1321
+ style: {
1322
+ fontSize: 17,
1323
+ fontWeight: 700,
1324
+ color: "var(--widget-text-primary)",
1325
+ margin: 0,
1326
+ letterSpacing: "-0.01em"
1327
+ },
1328
+ children: "Share Feedback"
1329
+ }
1330
+ )
1331
+ ] }),
1192
1332
  /* @__PURE__ */ jsx(
1193
1333
  motion.button,
1194
1334
  {
1195
- whileHover: { scale: 1.1, rotate: 90 },
1335
+ whileHover: { scale: 1.1, backgroundColor: "var(--widget-glass-border)" },
1196
1336
  whileTap: { scale: 0.9 },
1197
1337
  onClick: handleClose,
1198
1338
  "aria-label": "Close widget",
@@ -1206,17 +1346,19 @@ var PremiumVoiceWidget = ({
1206
1346
  cursor: "pointer",
1207
1347
  display: "flex",
1208
1348
  alignItems: "center",
1209
- justifyContent: "center"
1349
+ justifyContent: "center",
1350
+ transition: "background 0.15s ease"
1210
1351
  },
1211
1352
  children: /* @__PURE__ */ jsx(
1212
1353
  "svg",
1213
1354
  {
1214
- width: 20,
1215
- height: 20,
1355
+ width: 18,
1356
+ height: 18,
1216
1357
  viewBox: "0 0 24 24",
1217
1358
  fill: "none",
1218
1359
  stroke: "currentColor",
1219
- strokeWidth: 2,
1360
+ strokeWidth: 2.5,
1361
+ strokeLinecap: "round",
1220
1362
  children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" })
1221
1363
  }
1222
1364
  )
@@ -1230,41 +1372,44 @@ var PremiumVoiceWidget = ({
1230
1372
  {
1231
1373
  style: {
1232
1374
  display: "flex",
1233
- borderBottom: "1px solid var(--widget-glass-border)"
1375
+ padding: "8px 12px",
1376
+ gap: 4,
1377
+ background: "var(--widget-glass-bg)",
1378
+ margin: "0 16px",
1379
+ marginTop: 16,
1380
+ borderRadius: 12,
1381
+ border: "1px solid var(--widget-glass-border)"
1234
1382
  },
1235
1383
  children: ["voice", "text"].map((tab) => /* @__PURE__ */ jsxs(
1236
1384
  motion.button,
1237
1385
  {
1238
1386
  onClick: () => setActiveTab(tab),
1239
- whileHover: { backgroundColor: "rgba(255,255,255,0.05)" },
1240
1387
  style: {
1241
1388
  flex: 1,
1242
- padding: "14px 0",
1389
+ padding: "10px 0",
1243
1390
  border: "none",
1244
- background: "transparent",
1245
- fontSize: 14,
1246
- fontWeight: 500,
1247
- color: activeTab === tab ? "var(--widget-primary)" : "var(--widget-text-secondary)",
1391
+ background: activeTab === tab ? "linear-gradient(145deg, var(--widget-primary) 0%, var(--widget-accent) 100%)" : "transparent",
1392
+ fontSize: 13,
1393
+ fontWeight: 600,
1394
+ color: activeTab === tab ? "white" : "var(--widget-text-secondary)",
1248
1395
  cursor: "pointer",
1249
- position: "relative"
1396
+ position: "relative",
1397
+ borderRadius: 8,
1398
+ transition: "all 0.2s ease",
1399
+ display: "flex",
1400
+ alignItems: "center",
1401
+ justifyContent: "center",
1402
+ gap: 6,
1403
+ boxShadow: activeTab === tab ? "0 2px 8px -2px var(--widget-primary-glow)" : "none"
1250
1404
  },
1405
+ whileHover: { scale: activeTab === tab ? 1 : 1.02 },
1406
+ whileTap: { scale: 0.98 },
1251
1407
  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
- )
1408
+ tab === "voice" ? /* @__PURE__ */ jsxs("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "currentColor", children: [
1409
+ /* @__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" }),
1410
+ /* @__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" })
1411
+ ] }) : /* @__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" }) }),
1412
+ tab === "voice" ? "Voice" : "Text"
1268
1413
  ]
1269
1414
  },
1270
1415
  tab
@@ -1281,33 +1426,48 @@ var PremiumVoiceWidget = ({
1281
1426
  }
1282
1427
  ) }),
1283
1428
  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",
1429
+ /* @__PURE__ */ jsxs(
1430
+ "div",
1294
1431
  {
1295
1432
  style: {
1296
- color: "var(--widget-text-secondary)",
1297
- fontSize: 14,
1298
- marginTop: 16
1433
+ background: "var(--widget-glass-bg)",
1434
+ borderRadius: 16,
1435
+ padding: "24px 16px",
1436
+ border: "1px solid var(--widget-glass-border)",
1437
+ marginBottom: 16
1299
1438
  },
1300
- children: "Hold to record"
1439
+ children: [
1440
+ /* @__PURE__ */ jsx(AmbientOrb, { audioLevel, isRecording }),
1441
+ isRecording && /* @__PURE__ */ jsx(
1442
+ RecordingTimer,
1443
+ {
1444
+ seconds: recordingSeconds,
1445
+ maxDuration: maxRecordingDuration
1446
+ }
1447
+ ),
1448
+ !isRecording && recordingSeconds === 0 && !transcription && /* @__PURE__ */ jsx(
1449
+ "p",
1450
+ {
1451
+ style: {
1452
+ color: "var(--widget-text-muted)",
1453
+ fontSize: 13,
1454
+ marginTop: 12,
1455
+ marginBottom: 0
1456
+ },
1457
+ children: "Press and hold to record your feedback"
1458
+ }
1459
+ )
1460
+ ]
1301
1461
  }
1302
1462
  ),
1303
- (isRecording || transcription) && /* @__PURE__ */ jsx("div", { style: { marginTop: 20 }, children: /* @__PURE__ */ jsx(
1463
+ (isRecording || transcription) && /* @__PURE__ */ jsx("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsx(
1304
1464
  TranscriptionDisplay,
1305
1465
  {
1306
1466
  text: transcription,
1307
1467
  isLive: isRecording
1308
1468
  }
1309
1469
  ) }),
1310
- /* @__PURE__ */ jsx("div", { style: { marginTop: 20 }, children: /* @__PURE__ */ jsx(
1470
+ /* @__PURE__ */ jsx(
1311
1471
  MagneticButton,
1312
1472
  {
1313
1473
  onPressStart: handleStartRecording,
@@ -1315,74 +1475,109 @@ var PremiumVoiceWidget = ({
1315
1475
  variant: isRecording ? "recording" : "primary",
1316
1476
  children: isRecording ? /* @__PURE__ */ jsxs(Fragment, { children: [
1317
1477
  /* @__PURE__ */ jsx(
1318
- "svg",
1478
+ motion.div,
1319
1479
  {
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 })
1480
+ animate: { scale: [1, 1.2, 1] },
1481
+ transition: { duration: 1, repeat: Infinity },
1482
+ style: {
1483
+ width: 8,
1484
+ height: 8,
1485
+ borderRadius: "50%",
1486
+ background: "white"
1487
+ }
1325
1488
  }
1326
1489
  ),
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
- ]
1490
+ "Recording... Release to stop"
1491
+ ] }) : transcription ? /* @__PURE__ */ jsxs(Fragment, { children: [
1492
+ /* @__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" }) }),
1493
+ "Hold to record more"
1494
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
1495
+ /* @__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" }) }),
1496
+ "Hold to Record"
1497
+ ] })
1368
1498
  }
1369
1499
  )
1370
- ] })
1500
+ ] }),
1501
+ activeTab === "text" && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
1502
+ "div",
1503
+ {
1504
+ style: {
1505
+ position: "relative",
1506
+ background: "var(--widget-glass-bg)",
1507
+ border: "1px solid var(--widget-glass-border)",
1508
+ borderRadius: 14,
1509
+ overflow: "hidden"
1510
+ },
1511
+ children: [
1512
+ /* @__PURE__ */ jsx(
1513
+ "textarea",
1514
+ {
1515
+ value: textContent,
1516
+ onChange: (e) => setTextContent(e.target.value),
1517
+ placeholder: "Share your thoughts, ideas, or feedback...",
1518
+ style: {
1519
+ width: "100%",
1520
+ minHeight: 140,
1521
+ padding: 16,
1522
+ fontSize: 14,
1523
+ lineHeight: 1.7,
1524
+ color: "var(--widget-text-primary)",
1525
+ background: "transparent",
1526
+ border: "none",
1527
+ resize: "none",
1528
+ fontFamily: "inherit",
1529
+ outline: "none"
1530
+ }
1531
+ }
1532
+ ),
1533
+ /* @__PURE__ */ jsx(
1534
+ "div",
1535
+ {
1536
+ style: {
1537
+ display: "flex",
1538
+ justifyContent: "flex-end",
1539
+ padding: "8px 12px",
1540
+ borderTop: "1px solid var(--widget-glass-border)",
1541
+ background: theme === "dark" ? "rgba(0,0,0,0.2)" : "rgba(0,0,0,0.02)"
1542
+ },
1543
+ children: /* @__PURE__ */ jsxs(
1544
+ "span",
1545
+ {
1546
+ style: {
1547
+ fontSize: 11,
1548
+ fontWeight: 500,
1549
+ color: textContent.length > 4500 ? "var(--widget-recording)" : "var(--widget-text-muted)"
1550
+ },
1551
+ children: [
1552
+ textContent.length.toLocaleString(),
1553
+ " / 5,000"
1554
+ ]
1555
+ }
1556
+ )
1557
+ }
1558
+ )
1559
+ ]
1560
+ }
1561
+ ) })
1371
1562
  ] }),
1372
1563
  /* @__PURE__ */ jsx(
1373
1564
  "div",
1374
1565
  {
1375
1566
  style: {
1376
- padding: "16px 24px",
1377
- borderTop: "1px solid var(--widget-glass-border)"
1567
+ padding: "16px 24px 20px",
1568
+ borderTop: "1px solid var(--widget-glass-border)",
1569
+ 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
1570
  },
1379
- children: /* @__PURE__ */ jsx(
1571
+ children: /* @__PURE__ */ jsxs(
1380
1572
  MagneticButton,
1381
1573
  {
1382
1574
  onClick: handleSubmit,
1383
1575
  disabled: !selectedCategory || activeTab === "voice" && !transcription || activeTab === "text" && !textContent.trim(),
1384
1576
  loading: isSubmitting,
1385
- children: "Submit Feedback"
1577
+ children: [
1578
+ /* @__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" }) }),
1579
+ "Submit Feedback"
1580
+ ]
1386
1581
  }
1387
1582
  )
1388
1583
  }