@deframe-sdk/components 0.1.14 → 0.1.15

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 (8) hide show
  1. package/dist/index.d.mts +9 -5
  2. package/dist/index.d.ts +9 -5
  3. package/dist/index.js +72 -34
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +72 -34
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +58 -114
  8. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -168,14 +168,14 @@ function PrimaryButton(_a) {
168
168
  /** enabled state */
169
169
  enabled: [
170
170
  "hover:opacity-90",
171
- "text-[var(--deframe-widget-color-text-primary)]",
171
+ "text-[color:var(--deframe-widget-color-text-inverse)]",
172
172
  "bg-[var(--deframe-widget-color-brand-primary)]",
173
173
  "border-[color:var(--deframe-widget-color-border-primary)]",
174
174
  "cursor-pointer"
175
175
  ].join(" "),
176
176
  /** disabled state */
177
177
  disabled: [
178
- "text-[var(--deframe-widget-color-text-primary-disabled)]",
178
+ "text-[color:var(--deframe-widget-color-text-inverse-disabled)]",
179
179
  "bg-[var(--deframe-widget-color-brand-primary-disabled)]",
180
180
  "border-[color:var(--deframe-widget-color-border-primary-disabled)]",
181
181
  "cursor-not-allowed"
@@ -231,7 +231,7 @@ function SecondaryButton(_a) {
231
231
  ].join(" ");
232
232
  const stateClasses = {
233
233
  enabled: [
234
- "text-[color:var(--deframe-widget-color-brand-secondary)]",
234
+ "text-[color:var(--deframe-widget-color-text-secondary)]",
235
235
  "border-[color:var(--deframe-widget-color-border-secondary)]",
236
236
  "hover:opacity-90",
237
237
  "cursor-pointer"
@@ -291,7 +291,7 @@ function TertiaryButton(_a) {
291
291
  ].join(" ");
292
292
  const stateClasses = {
293
293
  enabled: [
294
- "text-[color:var(--deframe-widget-color-brand-tertiary)]",
294
+ "text-[color:var(--deframe-widget-color-text-tertiary)]",
295
295
  "hover:opacity-90",
296
296
  "cursor-pointer"
297
297
  ].join(" "),
@@ -418,12 +418,12 @@ function Link(_a) {
418
418
  ].join(" ");
419
419
  const stateClasses = {
420
420
  enabled: [
421
- "text-[color:var(--deframe-widget-color-brand-primary)]",
421
+ "text-[color:var(--deframe-widget-color-text-highlight)]",
422
422
  "underline",
423
423
  "cursor-pointer"
424
424
  ].join(" "),
425
425
  disabled: [
426
- "text-[var(--deframe-widget-color-brand-primary-disabled)]",
426
+ "text-[color:var(--deframe-widget-color-text-highlight-disabled)]",
427
427
  "cursor-not-allowed",
428
428
  "pointer-events-none"
429
429
  ].join(" ")
@@ -885,25 +885,35 @@ var Text = React6.forwardRef(
885
885
  var _b = _a, {
886
886
  children,
887
887
  as: Component = "p",
888
+ disabled = false,
888
889
  className = ""
889
890
  } = _b, props = __objRest(_b, [
890
891
  "children",
891
892
  "as",
893
+ "disabled",
892
894
  "className"
893
895
  ]);
894
896
  const baseClasses = [
895
897
  "[font-family:var(--deframe-widget-font-family)]",
896
898
  "[font-size:var(--deframe-widget-font-size-md)]",
897
899
  "[line-height:var(--deframe-widget-font-leading-md)]",
898
- "[font-weight:var(--deframe-widget-font-weight-regular)]",
899
- "text-[color:var(--deframe-widget-color-text-primary)]"
900
+ "[font-weight:var(--deframe-widget-font-weight-regular)]"
900
901
  ].join(" ");
901
- const textClasses = twMerge(baseClasses, className);
902
+ const stateClasses = {
903
+ enabled: "text-[color:var(--deframe-widget-color-text-primary)]",
904
+ disabled: "text-[color:var(--deframe-widget-color-text-primary-disabled)]"
905
+ };
906
+ const textClasses = twMerge(
907
+ baseClasses,
908
+ stateClasses[disabled ? "disabled" : "enabled"],
909
+ className
910
+ );
902
911
  return React6.createElement(
903
912
  Component,
904
913
  __spreadValues({
905
914
  ref,
906
- className: textClasses
915
+ className: textClasses,
916
+ "aria-disabled": disabled || void 0
907
917
  }, props),
908
918
  children
909
919
  );
@@ -916,10 +926,12 @@ var TextAccent = React6.forwardRef(
916
926
  var _b = _a, {
917
927
  as = "span",
918
928
  variant = "accent-medium",
929
+ disabled = false,
919
930
  className = ""
920
931
  } = _b, props = __objRest(_b, [
921
932
  "as",
922
933
  "variant",
934
+ "disabled",
923
935
  "className"
924
936
  ]);
925
937
  const accentVariants = {
@@ -939,8 +951,16 @@ var TextAccent = React6.forwardRef(
939
951
  "[font-weight:var(--deframe-widget-font-weight-semibold)]"
940
952
  ].join(" ")
941
953
  };
954
+ const stateClasses = {
955
+ enabled: "text-[color:var(--deframe-widget-color-text-primary)]",
956
+ disabled: "text-[color:var(--deframe-widget-color-text-primary-disabled)]"
957
+ };
942
958
  const variantClass = accentVariants[variant];
943
- const accentClasses = twMerge(variantClass, className);
959
+ const accentClasses = twMerge(
960
+ variantClass,
961
+ stateClasses[disabled ? "disabled" : "enabled"],
962
+ className
963
+ );
944
964
  return /* @__PURE__ */ jsx(
945
965
  Text_default,
946
966
  __spreadValues({
@@ -948,7 +968,8 @@ var TextAccent = React6.forwardRef(
948
968
  as,
949
969
  className: accentClasses,
950
970
  "data-slot": "text-accent",
951
- "data-test-id": "text-accent"
971
+ "data-test-id": "text-accent",
972
+ "aria-disabled": disabled || void 0
952
973
  }, props)
953
974
  );
954
975
  }
@@ -959,18 +980,15 @@ var TextBody = React6.forwardRef(
959
980
  var _b = _a, {
960
981
  as = "p",
961
982
  variant = "text-medium",
983
+ disabled = false,
962
984
  className = ""
963
985
  } = _b, props = __objRest(_b, [
964
986
  "as",
965
987
  "variant",
988
+ "disabled",
966
989
  "className"
967
990
  ]);
968
991
  const bodyVariants = {
969
- "[font-size:var(--deframe-widget-font-size-lg)] [line-height:var(--deframe-widget-font-leading-lg)]": [
970
- "[font-size:var(--deframe-widget-font-size-lg)]",
971
- "[line-height:var(--deframe-widget-font-leading-lg)]",
972
- "[font-weight:var(--deframe-widget-font-weight-regular)]"
973
- ].join(" "),
974
992
  "text-large": [
975
993
  "[font-size:var(--deframe-widget-font-size-lg)]",
976
994
  "[line-height:var(--deframe-widget-font-leading-lg)]",
@@ -987,8 +1005,16 @@ var TextBody = React6.forwardRef(
987
1005
  "[font-weight:var(--deframe-widget-font-weight-regular)]"
988
1006
  ].join(" ")
989
1007
  };
1008
+ const stateClasses = {
1009
+ enabled: "text-[color:var(--deframe-widget-color-text-primary)]",
1010
+ disabled: "text-[color:var(--deframe-widget-color-text-primary-disabled)]"
1011
+ };
990
1012
  const variantClass = bodyVariants[variant];
991
- const bodyClasses = twMerge(variantClass, className);
1013
+ const bodyClasses = twMerge(
1014
+ variantClass,
1015
+ stateClasses[disabled ? "disabled" : "enabled"],
1016
+ className
1017
+ );
992
1018
  return /* @__PURE__ */ jsx(
993
1019
  Text_default,
994
1020
  __spreadValues({
@@ -996,7 +1022,8 @@ var TextBody = React6.forwardRef(
996
1022
  as,
997
1023
  className: bodyClasses,
998
1024
  "data-slot": "text-body",
999
- "data-test-id": "text-body"
1025
+ "data-test-id": "text-body",
1026
+ "aria-disabled": disabled || void 0
1000
1027
  }, props)
1001
1028
  );
1002
1029
  }
@@ -1007,10 +1034,12 @@ var TextHeading = React6.forwardRef(
1007
1034
  var _b = _a, {
1008
1035
  as,
1009
1036
  variant = "h2",
1037
+ disabled = false,
1010
1038
  className = ""
1011
1039
  } = _b, props = __objRest(_b, [
1012
1040
  "as",
1013
1041
  "variant",
1042
+ "disabled",
1014
1043
  "className"
1015
1044
  ]);
1016
1045
  const headingVariants = {
@@ -1045,8 +1074,16 @@ var TextHeading = React6.forwardRef(
1045
1074
  "[font-weight:var(--deframe-widget-font-weight-bold)]"
1046
1075
  ].join(" ")
1047
1076
  };
1077
+ const stateClasses = {
1078
+ enabled: "text-[color:var(--deframe-widget-color-text-primary)]",
1079
+ disabled: "text-[color:var(--deframe-widget-color-text-primary-disabled)]"
1080
+ };
1048
1081
  const variantClass = headingVariants[variant];
1049
- const headingClasses = twMerge(variantClass, className);
1082
+ const headingClasses = twMerge(
1083
+ variantClass,
1084
+ stateClasses[disabled ? "disabled" : "enabled"],
1085
+ className
1086
+ );
1050
1087
  return /* @__PURE__ */ jsx(
1051
1088
  Text_default,
1052
1089
  __spreadValues({
@@ -1054,7 +1091,8 @@ var TextHeading = React6.forwardRef(
1054
1091
  as: variant === "h-large" ? "h1" : variant,
1055
1092
  className: headingClasses,
1056
1093
  "data-slot": "text-heading",
1057
- "data-test-id": "text-heading"
1094
+ "data-test-id": "text-heading",
1095
+ "aria-disabled": disabled || void 0
1058
1096
  }, props)
1059
1097
  );
1060
1098
  }
@@ -1573,7 +1611,7 @@ function BannerNotificationMessage(_a) {
1573
1611
  return /* @__PURE__ */ jsx(
1574
1612
  TextBody,
1575
1613
  __spreadValues({
1576
- variant: "[font-size:var(--deframe-widget-font-size-md)] [line-height:var(--deframe-widget-font-leading-md)]",
1614
+ variant: "text-medium",
1577
1615
  "data-slot": "banner-notification-message",
1578
1616
  "data-test-id": "banner-notification-message",
1579
1617
  className: twMerge("text-inherit", className)
@@ -1879,7 +1917,7 @@ var SummaryDetails = ({
1879
1917
  /* @__PURE__ */ jsx(
1880
1918
  TextBody,
1881
1919
  {
1882
- variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]",
1920
+ variant: "text-small",
1883
1921
  className: twMerge("text-[color:var(--deframe-widget-color-text-tertiary)]", item.labelClassName),
1884
1922
  children: item.label
1885
1923
  }
@@ -1887,7 +1925,7 @@ var SummaryDetails = ({
1887
1925
  typeof item.value === "string" ? /* @__PURE__ */ jsx(
1888
1926
  TextBody,
1889
1927
  {
1890
- variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]",
1928
+ variant: "text-small",
1891
1929
  className: twMerge("text-[color:var(--deframe-widget-color-text-primary)] [font-weight:var(--deframe-widget-font-weight-medium)]", item.valueClassName),
1892
1930
  children: item.value
1893
1931
  }
@@ -2583,7 +2621,7 @@ var SwapNetworkSelectorView = ({
2583
2621
  }) => {
2584
2622
  const baseClasses = "flex flex-row items-center gap-[var(--deframe-widget-size-gap-xs)]";
2585
2623
  return /* @__PURE__ */ jsxs("div", { "data-test-id": testId, className: twMerge(baseClasses, className), children: [
2586
- /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", className: "tracking-wide text-[color:var(--deframe-widget-color-text-tertiary)]", children: directionLabel }),
2624
+ /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "tracking-wide text-[color:var(--deframe-widget-color-text-tertiary)]", children: directionLabel }),
2587
2625
  /* @__PURE__ */ jsxs(
2588
2626
  "button",
2589
2627
  {
@@ -2608,7 +2646,7 @@ var SwapQuoteHeaderView = ({
2608
2646
  }) => {
2609
2647
  const baseClasses = "border-b border-[color:var(--deframe-widget-color-border-secondary)] pb-[var(--deframe-widget-size-padding-y-sm)]";
2610
2648
  return /* @__PURE__ */ jsx("div", { "data-test-id": "swap-quote-header", className: twMerge(baseClasses, className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
2611
- /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", className: "[font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-secondary)] inline-flex items-center", children: label }),
2649
+ /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "[font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-secondary)] inline-flex items-center", children: label }),
2612
2650
  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-md)]", children: timerElement })
2613
2651
  ] }) });
2614
2652
  };
@@ -2677,7 +2715,7 @@ var SwapOutputAmountView = ({
2677
2715
  className
2678
2716
  }) => {
2679
2717
  const baseClasses = "[font-size:var(--deframe-widget-font-size-xxl)] [line-height:var(--deframe-widget-font-leading-xxl)] [font-weight:var(--deframe-widget-font-weight-extrabold)] text-right w-full min-w-[120px] text-[color:var(--deframe-widget-color-text-primary)]";
2680
- return /* @__PURE__ */ jsx("div", { "data-test-id": "swap-flow-output-amount", className: twMerge(baseClasses, className), children: isLoading ? /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", className: "text-[color:var(--deframe-widget-color-text-primary-disabled)] inline-flex items-center", children: loadingElement != null ? loadingElement : searchingQuoteLabel }) : displayOutput });
2718
+ return /* @__PURE__ */ jsx("div", { "data-test-id": "swap-flow-output-amount", className: twMerge(baseClasses, className), children: isLoading ? /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-primary-disabled)] inline-flex items-center", children: loadingElement != null ? loadingElement : searchingQuoteLabel }) : displayOutput });
2681
2719
  };
2682
2720
  var SwapQuoteErrorsView = ({
2683
2721
  hasQuoteError,
@@ -2832,7 +2870,7 @@ var ChooseAStrategyActionsheetView = ({
2832
2870
  /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx("img", { src: logoUrl, alt: assetName, className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]" }) }),
2833
2871
  /* @__PURE__ */ jsxs(ListItemContent, { className: "gap-[var(--deframe-widget-size-gap-xs)]", children: [
2834
2872
  /* @__PURE__ */ jsx(TextBody, { children: resolvedYieldLabel }),
2835
- /* @__PURE__ */ jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: Badge })
2873
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: Badge })
2836
2874
  ] }),
2837
2875
  /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-center items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
2838
2876
  /* @__PURE__ */ jsxs("span", { className: "text-[color:var(--deframe-widget-color-state-success)]", children: [
@@ -2867,7 +2905,7 @@ var StrategyDetailsView = ({
2867
2905
  /* @__PURE__ */ jsx("img", { "data-test-id": "strategy-logo", src: logoUrl, alt: title, className: "w-20 h-20 rounded-[var(--deframe-widget-size-radius-full)]" }),
2868
2906
  /* @__PURE__ */ jsx(TextHeading, { variant: "h5", children: title })
2869
2907
  ] }),
2870
- /* @__PURE__ */ jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: description }),
2908
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: description }),
2871
2909
  /* @__PURE__ */ jsx(
2872
2910
  SummaryDetails,
2873
2911
  {
@@ -2960,7 +2998,7 @@ var SearchEmptyState = ({
2960
2998
  /* @__PURE__ */ jsx("div", { className: "w-20 h-20 bg-[var(--deframe-widget-color-bg-tertiary)] rounded-[var(--deframe-widget-size-radius-full)] flex justify-center items-center", children: /* @__PURE__ */ jsx(MdOutlineSearchOff, { className: "w-10 h-10 text-[color:var(--deframe-widget-color-text-tertiary)]" }) }),
2961
2999
  /* @__PURE__ */ jsx(TextHeading, { variant: "h3", children: title })
2962
3000
  ] }),
2963
- /* @__PURE__ */ jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: description }) })
3001
+ /* @__PURE__ */ jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: description }) })
2964
3002
  ] }) });
2965
3003
  };
2966
3004
  var CollapsibleSection = ({
@@ -2995,7 +3033,7 @@ var CollapsibleSection = ({
2995
3033
  children: [
2996
3034
  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-xs)]", children: /* @__PURE__ */ jsx(TextBody, { className: "text-[color:var(--deframe-widget-color-text-primary-dark)] [font-weight:var(--deframe-widget-font-weight-medium)]", children: title }) }),
2997
3035
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
2998
- subtitle && /* @__PURE__ */ jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: subtitle }),
3036
+ subtitle && /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: subtitle }),
2999
3037
  /* @__PURE__ */ jsx(
3000
3038
  motion.svg,
3001
3039
  {
@@ -4030,7 +4068,7 @@ var ChooseAnAssetSwapView = ({
4030
4068
  ] }),
4031
4069
  searchValue && displayedTokens.length === 0 && !isFetching ? /* @__PURE__ */ jsx(SearchEmptyState, { title: labels.searchEmptyTitle, description: labels.searchEmptyDescription }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] w-full mt-[var(--deframe-widget-size-gap-md)] overflow-y-auto flex-1 min-h-0", children: [
4032
4070
  isFetching && /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center w-full py-[var(--deframe-widget-size-padding-y-md)]", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
4033
- /* @__PURE__ */ jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.searchingText }),
4071
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.searchingText }),
4034
4072
  /* @__PURE__ */ jsx(LoadingDots, {})
4035
4073
  ] }) }),
4036
4074
  displayedTokens.map((token, index) => {
@@ -4050,11 +4088,11 @@ var ChooseAnAssetSwapView = ({
4050
4088
  /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx("img", { src: token.logoURI || "", alt: token.name, className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]" }) }),
4051
4089
  /* @__PURE__ */ jsxs(ListItemContent, { children: [
4052
4090
  /* @__PURE__ */ jsx(TextBody, { children: token.name }),
4053
- /* @__PURE__ */ jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: token.symbol })
4091
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: token.symbol })
4054
4092
  ] }),
4055
4093
  /* @__PURE__ */ jsxs(ListItemRightSide, { children: [
4056
4094
  /* @__PURE__ */ jsx(TextBody, { children: formattedBalance }),
4057
- /* @__PURE__ */ jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: formatCurrencyValue(Number(balance == null ? void 0 : balance.amountInUSD) || 0) })
4095
+ /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: formatCurrencyValue(Number(balance == null ? void 0 : balance.amountInUSD) || 0) })
4058
4096
  ] })
4059
4097
  ]
4060
4098
  },