@vaultix.ai/react 0.3.7 → 0.3.9

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 +51 -21
  2. package/dist/index.mjs +51 -21
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -759,7 +759,7 @@ function SignIn({
759
759
  "backdrop-blur-[16px]",
760
760
  className
761
761
  ),
762
- style: { background: cardBg },
762
+ style: { background: cardBg, color: textColor },
763
763
  children: [
764
764
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "px-8 pt-8 pb-6 text-center", children: [
765
765
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -936,25 +936,32 @@ function SignIn({
936
936
  );
937
937
  }
938
938
  function Input({ onChange, className, primaryColor, ...props }) {
939
+ const restBorder = "color-mix(in srgb, currentColor 18%, transparent)";
939
940
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
940
941
  "input",
941
942
  {
942
943
  ...props,
943
944
  onChange: (e) => onChange(e.target.value),
944
945
  className: (0, import_clsx.clsx)(
945
- "w-full bg-white/5 border border-white/8 rounded-xl px-4 py-2.5",
946
- "text-sm text-white/90 placeholder:text-[#475569]",
946
+ "w-full rounded-xl px-4 py-2.5",
947
+ "text-sm placeholder:text-[#94a3b8]",
947
948
  "focus:outline-none transition-colors",
948
- !primaryColor && "focus:border-purple-500/60",
949
949
  className
950
950
  ),
951
- style: primaryColor ? { "--vx-focus": primaryColor } : void 0,
951
+ style: {
952
+ color: "inherit",
953
+ borderWidth: 1,
954
+ borderStyle: "solid",
955
+ borderColor: restBorder,
956
+ background: "color-mix(in srgb, currentColor 4%, transparent)",
957
+ ...primaryColor ? { "--vx-focus": primaryColor } : {}
958
+ },
952
959
  onFocus: (e) => {
953
- if (primaryColor) e.currentTarget.style.borderColor = `${primaryColor}99`;
960
+ e.currentTarget.style.borderColor = primaryColor ? `${primaryColor}99` : "color-mix(in srgb, currentColor 40%, transparent)";
954
961
  props.onFocus?.(e);
955
962
  },
956
963
  onBlur: (e) => {
957
- if (primaryColor) e.currentTarget.style.borderColor = "";
964
+ e.currentTarget.style.borderColor = restBorder;
958
965
  props.onBlur?.(e);
959
966
  }
960
967
  }
@@ -1002,11 +1009,19 @@ function OAuthButton({
1002
1009
  onClick,
1003
1010
  className: (0, import_clsx.clsx)(
1004
1011
  "w-full flex items-center justify-center gap-3 px-4 py-2.5 rounded-xl",
1005
- "text-sm font-medium text-white/80",
1006
- "bg-white/5 border border-white/10",
1007
- "hover:bg-white/10 hover:border-white/20",
1008
- "transition-all duration-150"
1012
+ "text-sm font-medium transition-all duration-150"
1009
1013
  ),
1014
+ style: {
1015
+ color: "inherit",
1016
+ border: "1px solid color-mix(in srgb, currentColor 22%, transparent)",
1017
+ background: "color-mix(in srgb, currentColor 5%, transparent)"
1018
+ },
1019
+ onMouseEnter: (e) => {
1020
+ e.currentTarget.style.background = "color-mix(in srgb, currentColor 12%, transparent)";
1021
+ },
1022
+ onMouseLeave: (e) => {
1023
+ e.currentTarget.style.background = "color-mix(in srgb, currentColor 5%, transparent)";
1024
+ },
1010
1025
  children: [
1011
1026
  icon,
1012
1027
  label
@@ -1290,7 +1305,7 @@ function SignUp({
1290
1305
  "w-full max-w-sm mx-auto rounded-2xl border border-white/8 shadow-2xl backdrop-blur-[16px]",
1291
1306
  className
1292
1307
  ),
1293
- style: { background: cardBg },
1308
+ style: { background: cardBg, color: textColor },
1294
1309
  children: [
1295
1310
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "px-8 pt-8 pb-6 text-center", children: [
1296
1311
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -1377,24 +1392,31 @@ function SignUp({
1377
1392
  );
1378
1393
  }
1379
1394
  function Input2({ onChange, className, primaryColor, ...props }) {
1395
+ const restBorder = "color-mix(in srgb, currentColor 18%, transparent)";
1380
1396
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1381
1397
  "input",
1382
1398
  {
1383
1399
  ...props,
1384
1400
  onChange: (e) => onChange(e.target.value),
1385
1401
  className: (0, import_clsx2.clsx)(
1386
- "w-full bg-white/5 border border-white/8 rounded-xl px-4 py-2.5",
1387
- "text-sm text-white/90 placeholder:text-[#475569]",
1402
+ "w-full rounded-xl px-4 py-2.5",
1403
+ "text-sm placeholder:text-[#94a3b8]",
1388
1404
  "focus:outline-none transition-colors",
1389
- !primaryColor && "focus:border-emerald-500/60",
1390
1405
  className
1391
1406
  ),
1407
+ style: {
1408
+ color: "inherit",
1409
+ borderWidth: 1,
1410
+ borderStyle: "solid",
1411
+ borderColor: restBorder,
1412
+ background: "color-mix(in srgb, currentColor 4%, transparent)"
1413
+ },
1392
1414
  onFocus: (e) => {
1393
- if (primaryColor) e.currentTarget.style.borderColor = `${primaryColor}99`;
1415
+ e.currentTarget.style.borderColor = primaryColor ? `${primaryColor}99` : "color-mix(in srgb, currentColor 40%, transparent)";
1394
1416
  props.onFocus?.(e);
1395
1417
  },
1396
1418
  onBlur: (e) => {
1397
- if (primaryColor) e.currentTarget.style.borderColor = "";
1419
+ e.currentTarget.style.borderColor = restBorder;
1398
1420
  props.onBlur?.(e);
1399
1421
  }
1400
1422
  }
@@ -1433,11 +1455,19 @@ function OAuthButton2({
1433
1455
  onClick,
1434
1456
  className: (0, import_clsx2.clsx)(
1435
1457
  "w-full flex items-center justify-center gap-3 px-4 py-2.5 rounded-xl",
1436
- "text-sm font-medium text-white/80",
1437
- "bg-white/5 border border-white/10",
1438
- "hover:bg-white/10 hover:border-white/20",
1439
- "transition-all duration-150"
1458
+ "text-sm font-medium transition-all duration-150"
1440
1459
  ),
1460
+ style: {
1461
+ color: "inherit",
1462
+ border: "1px solid color-mix(in srgb, currentColor 22%, transparent)",
1463
+ background: "color-mix(in srgb, currentColor 5%, transparent)"
1464
+ },
1465
+ onMouseEnter: (e) => {
1466
+ e.currentTarget.style.background = "color-mix(in srgb, currentColor 12%, transparent)";
1467
+ },
1468
+ onMouseLeave: (e) => {
1469
+ e.currentTarget.style.background = "color-mix(in srgb, currentColor 5%, transparent)";
1470
+ },
1441
1471
  children: [
1442
1472
  icon,
1443
1473
  label
package/dist/index.mjs CHANGED
@@ -724,7 +724,7 @@ function SignIn({
724
724
  "backdrop-blur-[16px]",
725
725
  className
726
726
  ),
727
- style: { background: cardBg },
727
+ style: { background: cardBg, color: textColor },
728
728
  children: [
729
729
  /* @__PURE__ */ jsxs("div", { className: "px-8 pt-8 pb-6 text-center", children: [
730
730
  /* @__PURE__ */ jsx2(
@@ -901,25 +901,32 @@ function SignIn({
901
901
  );
902
902
  }
903
903
  function Input({ onChange, className, primaryColor, ...props }) {
904
+ const restBorder = "color-mix(in srgb, currentColor 18%, transparent)";
904
905
  return /* @__PURE__ */ jsx2(
905
906
  "input",
906
907
  {
907
908
  ...props,
908
909
  onChange: (e) => onChange(e.target.value),
909
910
  className: clsx(
910
- "w-full bg-white/5 border border-white/8 rounded-xl px-4 py-2.5",
911
- "text-sm text-white/90 placeholder:text-[#475569]",
911
+ "w-full rounded-xl px-4 py-2.5",
912
+ "text-sm placeholder:text-[#94a3b8]",
912
913
  "focus:outline-none transition-colors",
913
- !primaryColor && "focus:border-purple-500/60",
914
914
  className
915
915
  ),
916
- style: primaryColor ? { "--vx-focus": primaryColor } : void 0,
916
+ style: {
917
+ color: "inherit",
918
+ borderWidth: 1,
919
+ borderStyle: "solid",
920
+ borderColor: restBorder,
921
+ background: "color-mix(in srgb, currentColor 4%, transparent)",
922
+ ...primaryColor ? { "--vx-focus": primaryColor } : {}
923
+ },
917
924
  onFocus: (e) => {
918
- if (primaryColor) e.currentTarget.style.borderColor = `${primaryColor}99`;
925
+ e.currentTarget.style.borderColor = primaryColor ? `${primaryColor}99` : "color-mix(in srgb, currentColor 40%, transparent)";
919
926
  props.onFocus?.(e);
920
927
  },
921
928
  onBlur: (e) => {
922
- if (primaryColor) e.currentTarget.style.borderColor = "";
929
+ e.currentTarget.style.borderColor = restBorder;
923
930
  props.onBlur?.(e);
924
931
  }
925
932
  }
@@ -967,11 +974,19 @@ function OAuthButton({
967
974
  onClick,
968
975
  className: clsx(
969
976
  "w-full flex items-center justify-center gap-3 px-4 py-2.5 rounded-xl",
970
- "text-sm font-medium text-white/80",
971
- "bg-white/5 border border-white/10",
972
- "hover:bg-white/10 hover:border-white/20",
973
- "transition-all duration-150"
977
+ "text-sm font-medium transition-all duration-150"
974
978
  ),
979
+ style: {
980
+ color: "inherit",
981
+ border: "1px solid color-mix(in srgb, currentColor 22%, transparent)",
982
+ background: "color-mix(in srgb, currentColor 5%, transparent)"
983
+ },
984
+ onMouseEnter: (e) => {
985
+ e.currentTarget.style.background = "color-mix(in srgb, currentColor 12%, transparent)";
986
+ },
987
+ onMouseLeave: (e) => {
988
+ e.currentTarget.style.background = "color-mix(in srgb, currentColor 5%, transparent)";
989
+ },
975
990
  children: [
976
991
  icon,
977
992
  label
@@ -1255,7 +1270,7 @@ function SignUp({
1255
1270
  "w-full max-w-sm mx-auto rounded-2xl border border-white/8 shadow-2xl backdrop-blur-[16px]",
1256
1271
  className
1257
1272
  ),
1258
- style: { background: cardBg },
1273
+ style: { background: cardBg, color: textColor },
1259
1274
  children: [
1260
1275
  /* @__PURE__ */ jsxs2("div", { className: "px-8 pt-8 pb-6 text-center", children: [
1261
1276
  /* @__PURE__ */ jsx3(
@@ -1342,24 +1357,31 @@ function SignUp({
1342
1357
  );
1343
1358
  }
1344
1359
  function Input2({ onChange, className, primaryColor, ...props }) {
1360
+ const restBorder = "color-mix(in srgb, currentColor 18%, transparent)";
1345
1361
  return /* @__PURE__ */ jsx3(
1346
1362
  "input",
1347
1363
  {
1348
1364
  ...props,
1349
1365
  onChange: (e) => onChange(e.target.value),
1350
1366
  className: clsx2(
1351
- "w-full bg-white/5 border border-white/8 rounded-xl px-4 py-2.5",
1352
- "text-sm text-white/90 placeholder:text-[#475569]",
1367
+ "w-full rounded-xl px-4 py-2.5",
1368
+ "text-sm placeholder:text-[#94a3b8]",
1353
1369
  "focus:outline-none transition-colors",
1354
- !primaryColor && "focus:border-emerald-500/60",
1355
1370
  className
1356
1371
  ),
1372
+ style: {
1373
+ color: "inherit",
1374
+ borderWidth: 1,
1375
+ borderStyle: "solid",
1376
+ borderColor: restBorder,
1377
+ background: "color-mix(in srgb, currentColor 4%, transparent)"
1378
+ },
1357
1379
  onFocus: (e) => {
1358
- if (primaryColor) e.currentTarget.style.borderColor = `${primaryColor}99`;
1380
+ e.currentTarget.style.borderColor = primaryColor ? `${primaryColor}99` : "color-mix(in srgb, currentColor 40%, transparent)";
1359
1381
  props.onFocus?.(e);
1360
1382
  },
1361
1383
  onBlur: (e) => {
1362
- if (primaryColor) e.currentTarget.style.borderColor = "";
1384
+ e.currentTarget.style.borderColor = restBorder;
1363
1385
  props.onBlur?.(e);
1364
1386
  }
1365
1387
  }
@@ -1398,11 +1420,19 @@ function OAuthButton2({
1398
1420
  onClick,
1399
1421
  className: clsx2(
1400
1422
  "w-full flex items-center justify-center gap-3 px-4 py-2.5 rounded-xl",
1401
- "text-sm font-medium text-white/80",
1402
- "bg-white/5 border border-white/10",
1403
- "hover:bg-white/10 hover:border-white/20",
1404
- "transition-all duration-150"
1423
+ "text-sm font-medium transition-all duration-150"
1405
1424
  ),
1425
+ style: {
1426
+ color: "inherit",
1427
+ border: "1px solid color-mix(in srgb, currentColor 22%, transparent)",
1428
+ background: "color-mix(in srgb, currentColor 5%, transparent)"
1429
+ },
1430
+ onMouseEnter: (e) => {
1431
+ e.currentTarget.style.background = "color-mix(in srgb, currentColor 12%, transparent)";
1432
+ },
1433
+ onMouseLeave: (e) => {
1434
+ e.currentTarget.style.background = "color-mix(in srgb, currentColor 5%, transparent)";
1435
+ },
1406
1436
  children: [
1407
1437
  icon,
1408
1438
  label
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaultix.ai/react",
3
- "version": "0.3.7",
3
+ "version": "0.3.9",
4
4
  "description": "Vaultix-ID React SDK — drop-in auth components for any React app",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",