@metamask-previews/design-system-react 0.25.0-preview.1f40f69f → 0.27.0-preview.0a4d6f8

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 (160) hide show
  1. package/CHANGELOG.md +27 -1
  2. package/dist/components/AvatarIcon/AvatarIcon.constants.cjs +2 -2
  3. package/dist/components/AvatarIcon/AvatarIcon.constants.cjs.map +1 -1
  4. package/dist/components/AvatarIcon/AvatarIcon.constants.mjs +2 -2
  5. package/dist/components/AvatarIcon/AvatarIcon.constants.mjs.map +1 -1
  6. package/dist/components/AvatarNetwork/AvatarNetwork.cjs +1 -2
  7. package/dist/components/AvatarNetwork/AvatarNetwork.cjs.map +1 -1
  8. package/dist/components/AvatarNetwork/AvatarNetwork.d.cts.map +1 -1
  9. package/dist/components/AvatarNetwork/AvatarNetwork.d.mts.map +1 -1
  10. package/dist/components/AvatarNetwork/AvatarNetwork.mjs +1 -2
  11. package/dist/components/AvatarNetwork/AvatarNetwork.mjs.map +1 -1
  12. package/dist/components/AvatarNetwork/index.cjs +2 -2
  13. package/dist/components/AvatarNetwork/index.cjs.map +1 -1
  14. package/dist/components/AvatarNetwork/index.d.cts +1 -1
  15. package/dist/components/AvatarNetwork/index.d.cts.map +1 -1
  16. package/dist/components/AvatarNetwork/index.d.mts +1 -1
  17. package/dist/components/AvatarNetwork/index.d.mts.map +1 -1
  18. package/dist/components/AvatarNetwork/index.mjs +1 -1
  19. package/dist/components/AvatarNetwork/index.mjs.map +1 -1
  20. package/dist/components/BannerAlert/BannerAlert.cjs +1 -2
  21. package/dist/components/BannerAlert/BannerAlert.cjs.map +1 -1
  22. package/dist/components/BannerAlert/BannerAlert.constants.cjs +8 -9
  23. package/dist/components/BannerAlert/BannerAlert.constants.cjs.map +1 -1
  24. package/dist/components/BannerAlert/BannerAlert.constants.d.cts +1 -2
  25. package/dist/components/BannerAlert/BannerAlert.constants.d.cts.map +1 -1
  26. package/dist/components/BannerAlert/BannerAlert.constants.d.mts +1 -2
  27. package/dist/components/BannerAlert/BannerAlert.constants.d.mts.map +1 -1
  28. package/dist/components/BannerAlert/BannerAlert.constants.mjs +1 -2
  29. package/dist/components/BannerAlert/BannerAlert.constants.mjs.map +1 -1
  30. package/dist/components/BannerAlert/BannerAlert.d.cts.map +1 -1
  31. package/dist/components/BannerAlert/BannerAlert.d.mts.map +1 -1
  32. package/dist/components/BannerAlert/BannerAlert.mjs +1 -2
  33. package/dist/components/BannerAlert/BannerAlert.mjs.map +1 -1
  34. package/dist/components/Icon/Icon.cjs +2 -2
  35. package/dist/components/Icon/Icon.cjs.map +1 -1
  36. package/dist/components/Icon/Icon.constants.cjs +6 -6
  37. package/dist/components/Icon/Icon.constants.cjs.map +1 -1
  38. package/dist/components/Icon/Icon.constants.d.cts +1 -1
  39. package/dist/components/Icon/Icon.constants.d.cts.map +1 -1
  40. package/dist/components/Icon/Icon.constants.d.mts +1 -1
  41. package/dist/components/Icon/Icon.constants.d.mts.map +1 -1
  42. package/dist/components/Icon/Icon.constants.mjs +1 -1
  43. package/dist/components/Icon/Icon.constants.mjs.map +1 -1
  44. package/dist/components/Icon/Icon.d.cts.map +1 -1
  45. package/dist/components/Icon/Icon.d.mts.map +1 -1
  46. package/dist/components/Icon/Icon.mjs +1 -1
  47. package/dist/components/Icon/Icon.mjs.map +1 -1
  48. package/dist/components/Icon/icons/Trophy.cjs +32 -0
  49. package/dist/components/Icon/icons/Trophy.cjs.map +1 -0
  50. package/dist/components/Icon/icons/Trophy.d.cts +4 -0
  51. package/dist/components/Icon/icons/Trophy.d.cts.map +1 -0
  52. package/dist/components/Icon/icons/Trophy.d.mts +4 -0
  53. package/dist/components/Icon/icons/Trophy.d.mts.map +1 -0
  54. package/dist/components/Icon/icons/Trophy.mjs +7 -0
  55. package/dist/components/Icon/icons/Trophy.mjs.map +1 -0
  56. package/dist/components/Icon/icons/index.cjs +2 -0
  57. package/dist/components/Icon/icons/index.cjs.map +1 -1
  58. package/dist/components/Icon/icons/index.d.cts +1 -0
  59. package/dist/components/Icon/icons/index.d.cts.map +1 -1
  60. package/dist/components/Icon/icons/index.d.mts +1 -0
  61. package/dist/components/Icon/icons/index.d.mts.map +1 -1
  62. package/dist/components/Icon/icons/index.mjs +2 -0
  63. package/dist/components/Icon/icons/index.mjs.map +1 -1
  64. package/dist/components/Icon/index.cjs +4 -4
  65. package/dist/components/Icon/index.cjs.map +1 -1
  66. package/dist/components/Icon/index.d.cts +1 -1
  67. package/dist/components/Icon/index.d.cts.map +1 -1
  68. package/dist/components/Icon/index.d.mts +1 -1
  69. package/dist/components/Icon/index.d.mts.map +1 -1
  70. package/dist/components/Icon/index.mjs +1 -1
  71. package/dist/components/Icon/index.mjs.map +1 -1
  72. package/dist/components/Tag/Tag.cjs +51 -0
  73. package/dist/components/Tag/Tag.cjs.map +1 -0
  74. package/dist/components/Tag/Tag.constants.cjs +26 -0
  75. package/dist/components/Tag/Tag.constants.cjs.map +1 -0
  76. package/dist/components/Tag/Tag.constants.d.cts +5 -0
  77. package/dist/components/Tag/Tag.constants.d.cts.map +1 -0
  78. package/dist/components/Tag/Tag.constants.d.mts +5 -0
  79. package/dist/components/Tag/Tag.constants.d.mts.map +1 -0
  80. package/dist/components/Tag/Tag.constants.mjs +23 -0
  81. package/dist/components/Tag/Tag.constants.mjs.map +1 -0
  82. package/dist/components/Tag/Tag.d.cts +4 -0
  83. package/dist/components/Tag/Tag.d.cts.map +1 -0
  84. package/dist/components/Tag/Tag.d.mts +4 -0
  85. package/dist/components/Tag/Tag.d.mts.map +1 -0
  86. package/dist/components/Tag/Tag.mjs +32 -0
  87. package/dist/components/Tag/Tag.mjs.map +1 -0
  88. package/dist/components/Tag/Tag.types.cjs +3 -0
  89. package/dist/components/Tag/Tag.types.cjs.map +1 -0
  90. package/dist/components/Tag/Tag.types.d.cts +31 -0
  91. package/dist/components/Tag/Tag.types.d.cts.map +1 -0
  92. package/dist/components/Tag/Tag.types.d.mts +31 -0
  93. package/dist/components/Tag/Tag.types.d.mts.map +1 -0
  94. package/dist/components/Tag/Tag.types.mjs +2 -0
  95. package/dist/components/Tag/Tag.types.mjs.map +1 -0
  96. package/dist/components/Tag/index.cjs +8 -0
  97. package/dist/components/Tag/index.cjs.map +1 -0
  98. package/dist/components/Tag/index.d.cts +4 -0
  99. package/dist/components/Tag/index.d.cts.map +1 -0
  100. package/dist/components/Tag/index.d.mts +4 -0
  101. package/dist/components/Tag/index.d.mts.map +1 -0
  102. package/dist/components/Tag/index.mjs +3 -0
  103. package/dist/components/Tag/index.mjs.map +1 -0
  104. package/dist/components/TextButton/TextButton.cjs +7 -28
  105. package/dist/components/TextButton/TextButton.cjs.map +1 -1
  106. package/dist/components/TextButton/TextButton.d.cts.map +1 -1
  107. package/dist/components/TextButton/TextButton.d.mts.map +1 -1
  108. package/dist/components/TextButton/TextButton.mjs +7 -28
  109. package/dist/components/TextButton/TextButton.mjs.map +1 -1
  110. package/dist/components/TextButton/TextButton.types.cjs.map +1 -1
  111. package/dist/components/TextButton/TextButton.types.d.cts +9 -25
  112. package/dist/components/TextButton/TextButton.types.d.cts.map +1 -1
  113. package/dist/components/TextButton/TextButton.types.d.mts +9 -25
  114. package/dist/components/TextButton/TextButton.types.d.mts.map +1 -1
  115. package/dist/components/TextButton/TextButton.types.mjs.map +1 -1
  116. package/dist/components/TextButton/index.cjs +1 -3
  117. package/dist/components/TextButton/index.cjs.map +1 -1
  118. package/dist/components/TextButton/index.d.cts +0 -1
  119. package/dist/components/TextButton/index.d.cts.map +1 -1
  120. package/dist/components/TextButton/index.d.mts +0 -1
  121. package/dist/components/TextButton/index.d.mts.map +1 -1
  122. package/dist/components/TextButton/index.mjs +0 -1
  123. package/dist/components/TextButton/index.mjs.map +1 -1
  124. package/dist/components/Toast/Toast.cjs +1 -2
  125. package/dist/components/Toast/Toast.cjs.map +1 -1
  126. package/dist/components/Toast/Toast.constants.cjs +6 -7
  127. package/dist/components/Toast/Toast.constants.cjs.map +1 -1
  128. package/dist/components/Toast/Toast.constants.d.cts.map +1 -1
  129. package/dist/components/Toast/Toast.constants.d.mts.map +1 -1
  130. package/dist/components/Toast/Toast.constants.mjs +1 -2
  131. package/dist/components/Toast/Toast.constants.mjs.map +1 -1
  132. package/dist/components/Toast/Toast.d.cts.map +1 -1
  133. package/dist/components/Toast/Toast.d.mts.map +1 -1
  134. package/dist/components/Toast/Toast.mjs +1 -2
  135. package/dist/components/Toast/Toast.mjs.map +1 -1
  136. package/dist/components/index.cjs +5 -3
  137. package/dist/components/index.cjs.map +1 -1
  138. package/dist/components/index.d.cts +3 -1
  139. package/dist/components/index.d.cts.map +1 -1
  140. package/dist/components/index.d.mts +3 -1
  141. package/dist/components/index.d.mts.map +1 -1
  142. package/dist/components/index.mjs +2 -1
  143. package/dist/components/index.mjs.map +1 -1
  144. package/dist/types/index.cjs +2 -23
  145. package/dist/types/index.cjs.map +1 -1
  146. package/dist/types/index.d.cts +1 -14
  147. package/dist/types/index.d.cts.map +1 -1
  148. package/dist/types/index.d.mts +1 -14
  149. package/dist/types/index.d.mts.map +1 -1
  150. package/dist/types/index.mjs +1 -15
  151. package/dist/types/index.mjs.map +1 -1
  152. package/package.json +5 -3
  153. package/dist/components/TextButton/TextButton.constants.cjs +0 -12
  154. package/dist/components/TextButton/TextButton.constants.cjs.map +0 -1
  155. package/dist/components/TextButton/TextButton.constants.d.cts +0 -4
  156. package/dist/components/TextButton/TextButton.constants.d.cts.map +0 -1
  157. package/dist/components/TextButton/TextButton.constants.d.mts +0 -4
  158. package/dist/components/TextButton/TextButton.constants.d.mts.map +0 -1
  159. package/dist/components/TextButton/TextButton.constants.mjs +0 -9
  160. package/dist/components/TextButton/TextButton.constants.mjs.map +0 -1
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tag.constants.d.cts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,SAAS,EACT,WAAW,EACX,SAAS,EACV,gDAAgD;AAEjD,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAC9C,WAAW,EACX,kBAAkB,CAOnB,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,WAAW,EAAE,SAAS,CAMtE,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,WAAW,EAAE,SAAS,CAMtE,CAAC"}
@@ -0,0 +1,5 @@
1
+ import { BoxBackgroundColor, IconColor, TagSeverity, TextColor } from "@metamask-previews/design-system-shared";
2
+ export declare const MAP_TAG_SEVERITY_BACKGROUND: Record<TagSeverity, BoxBackgroundColor>;
3
+ export declare const MAP_TAG_SEVERITY_TEXT_COLOR: Record<TagSeverity, TextColor>;
4
+ export declare const MAP_TAG_SEVERITY_ICON_COLOR: Record<TagSeverity, IconColor>;
5
+ //# sourceMappingURL=Tag.constants.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tag.constants.d.mts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,SAAS,EACT,WAAW,EACX,SAAS,EACV,gDAAgD;AAEjD,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAC9C,WAAW,EACX,kBAAkB,CAOnB,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,WAAW,EAAE,SAAS,CAMtE,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,WAAW,EAAE,SAAS,CAMtE,CAAC"}
@@ -0,0 +1,23 @@
1
+ import { BoxBackgroundColor, IconColor, TagSeverity, TextColor } from "@metamask-previews/design-system-shared";
2
+ export const MAP_TAG_SEVERITY_BACKGROUND = {
3
+ [TagSeverity.Neutral]: BoxBackgroundColor.BackgroundMuted,
4
+ [TagSeverity.Success]: BoxBackgroundColor.SuccessMuted,
5
+ [TagSeverity.Danger]: BoxBackgroundColor.ErrorMuted,
6
+ [TagSeverity.Warning]: BoxBackgroundColor.WarningMuted,
7
+ [TagSeverity.Info]: BoxBackgroundColor.InfoMuted,
8
+ };
9
+ export const MAP_TAG_SEVERITY_TEXT_COLOR = {
10
+ [TagSeverity.Neutral]: TextColor.TextDefault,
11
+ [TagSeverity.Success]: TextColor.SuccessDefault,
12
+ [TagSeverity.Danger]: TextColor.ErrorDefault,
13
+ [TagSeverity.Warning]: TextColor.WarningDefault,
14
+ [TagSeverity.Info]: TextColor.InfoDefault,
15
+ };
16
+ export const MAP_TAG_SEVERITY_ICON_COLOR = {
17
+ [TagSeverity.Neutral]: IconColor.IconDefault,
18
+ [TagSeverity.Success]: IconColor.SuccessDefault,
19
+ [TagSeverity.Danger]: IconColor.ErrorDefault,
20
+ [TagSeverity.Warning]: IconColor.WarningDefault,
21
+ [TagSeverity.Info]: IconColor.InfoDefault,
22
+ };
23
+ //# sourceMappingURL=Tag.constants.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tag.constants.mjs","sourceRoot":"","sources":["../../../src/components/Tag/Tag.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,SAAS,EACT,WAAW,EACX,SAAS,EACV,gDAAgD;AAEjD,MAAM,CAAC,MAAM,2BAA2B,GAGpC;IACF,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,kBAAkB,CAAC,eAAe;IACzD,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,kBAAkB,CAAC,YAAY;IACtD,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,kBAAkB,CAAC,UAAU;IACnD,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,kBAAkB,CAAC,YAAY;IACtD,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,kBAAkB,CAAC,SAAS;CACjD,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAmC;IACzE,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,WAAW;IAC5C,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;IAC/C,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC,YAAY;IAC5C,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;IAC/C,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,WAAW;CAC1C,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAmC;IACzE,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,WAAW;IAC5C,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;IAC/C,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC,YAAY;IAC5C,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;IAC/C,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,WAAW;CAC1C,CAAC","sourcesContent":["import {\n BoxBackgroundColor,\n IconColor,\n TagSeverity,\n TextColor,\n} from '@metamask-previews/design-system-shared';\n\nexport const MAP_TAG_SEVERITY_BACKGROUND: Record<\n TagSeverity,\n BoxBackgroundColor\n> = {\n [TagSeverity.Neutral]: BoxBackgroundColor.BackgroundMuted,\n [TagSeverity.Success]: BoxBackgroundColor.SuccessMuted,\n [TagSeverity.Danger]: BoxBackgroundColor.ErrorMuted,\n [TagSeverity.Warning]: BoxBackgroundColor.WarningMuted,\n [TagSeverity.Info]: BoxBackgroundColor.InfoMuted,\n};\n\nexport const MAP_TAG_SEVERITY_TEXT_COLOR: Record<TagSeverity, TextColor> = {\n [TagSeverity.Neutral]: TextColor.TextDefault,\n [TagSeverity.Success]: TextColor.SuccessDefault,\n [TagSeverity.Danger]: TextColor.ErrorDefault,\n [TagSeverity.Warning]: TextColor.WarningDefault,\n [TagSeverity.Info]: TextColor.InfoDefault,\n};\n\nexport const MAP_TAG_SEVERITY_ICON_COLOR: Record<TagSeverity, IconColor> = {\n [TagSeverity.Neutral]: IconColor.IconDefault,\n [TagSeverity.Success]: IconColor.SuccessDefault,\n [TagSeverity.Danger]: IconColor.ErrorDefault,\n [TagSeverity.Warning]: IconColor.WarningDefault,\n [TagSeverity.Info]: IconColor.InfoDefault,\n};\n"]}
@@ -0,0 +1,4 @@
1
+ import React from "react";
2
+ import type { TagProps } from "./Tag.types.cjs";
3
+ export declare const Tag: React.ForwardRefExoticComponent<Omit<TagProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
4
+ //# sourceMappingURL=Tag.d.cts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tag.d.cts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAqB,cAAc;AAY1C,OAAO,KAAK,EAAE,QAAQ,EAAE,wBAAoB;AAK5C,eAAO,MAAM,GAAG,8FAmFf,CAAC"}
@@ -0,0 +1,4 @@
1
+ import React from "react";
2
+ import type { TagProps } from "./Tag.types.mjs";
3
+ export declare const Tag: React.ForwardRefExoticComponent<Omit<TagProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
4
+ //# sourceMappingURL=Tag.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tag.d.mts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAqB,cAAc;AAY1C,OAAO,KAAK,EAAE,QAAQ,EAAE,wBAAoB;AAK5C,eAAO,MAAM,GAAG,8FAmFf,CAAC"}
@@ -0,0 +1,32 @@
1
+ function $importDefault(module) {
2
+ if (module?.__esModule) {
3
+ return module.default;
4
+ }
5
+ return module;
6
+ }
7
+ import { BoxAlignItems, BoxFlexDirection, FontWeight, IconSize, TagSeverity, TextVariant } from "@metamask-previews/design-system-shared";
8
+ import $React, { forwardRef } from "react";
9
+ const React = $importDefault($React);
10
+ import { twMerge } from "../../utils/tw-merge.mjs";
11
+ import { Box } from "../Box/index.mjs";
12
+ import { Icon } from "../Icon/index.mjs";
13
+ import { Text } from "../Text/index.mjs";
14
+ import { MAP_TAG_SEVERITY_BACKGROUND, MAP_TAG_SEVERITY_ICON_COLOR, MAP_TAG_SEVERITY_TEXT_COLOR } from "./Tag.constants.mjs";
15
+ const isTextContent = (content) => typeof content === 'string' || typeof content === 'number';
16
+ export const Tag = forwardRef(({ children, severity = TagSeverity.Neutral, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, className, style, ...props }, ref) => {
17
+ const backgroundColor = MAP_TAG_SEVERITY_BACKGROUND[severity];
18
+ const textColor = MAP_TAG_SEVERITY_TEXT_COLOR[severity];
19
+ const iconColor = MAP_TAG_SEVERITY_ICON_COLOR[severity];
20
+ const finalStartIconName = startIconName ?? startIconProps?.name;
21
+ const finalEndIconName = endIconName ?? endIconProps?.name;
22
+ const resolvedStartAccessory = finalStartIconName ? (React.createElement(Icon, { name: finalStartIconName, color: iconColor, size: IconSize.Xs, className: "shrink-0", ...startIconProps })) : ((startAccessory ?? null));
23
+ const resolvedEndAccessory = finalEndIconName ? (React.createElement(Icon, { name: finalEndIconName, color: iconColor, size: IconSize.Xs, className: "shrink-0", ...endIconProps })) : ((endAccessory ?? null));
24
+ const content = isTextContent(children) ? (React.createElement(Text, { variant: TextVariant.BodyXs, color: textColor, fontWeight: FontWeight.Medium }, children)) : (children);
25
+ const mergedClassName = twMerge('inline-flex gap-0.5 self-start rounded-md', finalStartIconName ? 'pl-1' : 'pl-1.5', finalEndIconName ? 'pr-1' : 'pr-1.5', className);
26
+ return (React.createElement(Box, { ref: ref, flexDirection: BoxFlexDirection.Row, alignItems: BoxAlignItems.Center, backgroundColor: backgroundColor, className: mergedClassName, style: style, ...props },
27
+ resolvedStartAccessory,
28
+ content,
29
+ resolvedEndAccessory));
30
+ });
31
+ Tag.displayName = 'Tag';
32
+ //# sourceMappingURL=Tag.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tag.mjs","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,aAAa,EACb,gBAAgB,EAChB,UAAU,EACV,QAAQ,EACR,WAAW,EACX,WAAW,EACZ,gDAAgD;AACjD,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,GAAG,EAAE,yBAAe;AAC7B,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAC/B,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EACL,2BAA2B,EAC3B,2BAA2B,EAC3B,2BAA2B,EAC5B,4BAAwB;AAGzB,MAAM,aAAa,GAAG,CAAC,OAAwB,EAA8B,EAAE,CAC7E,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,OAAO,KAAK,QAAQ,CAAC;AAE7D,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,CAC3B,CACE,EACE,QAAQ,EACR,QAAQ,GAAG,WAAW,CAAC,OAAO,EAC9B,aAAa,EACb,cAAc,EACd,cAAc,EACd,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,eAAe,GAAG,2BAA2B,CAAC,QAAQ,CAAC,CAAC;IAC9D,MAAM,SAAS,GAAG,2BAA2B,CAAC,QAAQ,CAAC,CAAC;IACxD,MAAM,SAAS,GAAG,2BAA2B,CAAC,QAAQ,CAAC,CAAC;IAExD,MAAM,kBAAkB,GAAG,aAAa,IAAI,cAAc,EAAE,IAAI,CAAC;IACjE,MAAM,gBAAgB,GAAG,WAAW,IAAI,YAAY,EAAE,IAAI,CAAC;IAE3D,MAAM,sBAAsB,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAClD,oBAAC,IAAI,IACH,IAAI,EAAE,kBAAkB,EACxB,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,QAAQ,CAAC,EAAE,EACjB,SAAS,EAAC,UAAU,KAChB,cAAc,GAClB,CACH,CAAC,CAAC,CAAC,CACF,CAAC,cAAc,IAAI,IAAI,CAAC,CACzB,CAAC;IAEF,MAAM,oBAAoB,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAC9C,oBAAC,IAAI,IACH,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,QAAQ,CAAC,EAAE,EACjB,SAAS,EAAC,UAAU,KAChB,YAAY,GAChB,CACH,CAAC,CAAC,CAAC,CACF,CAAC,YAAY,IAAI,IAAI,CAAC,CACvB,CAAC;IAEF,MAAM,OAAO,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CACxC,oBAAC,IAAI,IACH,OAAO,EAAE,WAAW,CAAC,MAAM,EAC3B,KAAK,EAAE,SAAS,EAChB,UAAU,EAAE,UAAU,CAAC,MAAM,IAE5B,QAAQ,CACJ,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CAAC;IAEF,MAAM,eAAe,GAAG,OAAO,CAC7B,2CAA2C,EAC3C,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EACtC,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EACpC,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,GAAG,IACF,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,gBAAgB,CAAC,GAAG,EACnC,UAAU,EAAE,aAAa,CAAC,MAAM,EAChC,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,KAAK,KACR,KAAK;QAER,sBAAsB;QACtB,OAAO;QACP,oBAAoB,CACjB,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,GAAG,CAAC,WAAW,GAAG,KAAK,CAAC","sourcesContent":["import {\n BoxAlignItems,\n BoxFlexDirection,\n FontWeight,\n IconSize,\n TagSeverity,\n TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box } from '../Box';\nimport { Icon } from '../Icon';\nimport { Text } from '../Text';\n\nimport {\n MAP_TAG_SEVERITY_BACKGROUND,\n MAP_TAG_SEVERITY_ICON_COLOR,\n MAP_TAG_SEVERITY_TEXT_COLOR,\n} from './Tag.constants';\nimport type { TagProps } from './Tag.types';\n\nconst isTextContent = (content: React.ReactNode): content is string | number =>\n typeof content === 'string' || typeof content === 'number';\n\nexport const Tag = forwardRef<HTMLDivElement, TagProps>(\n (\n {\n children,\n severity = TagSeverity.Neutral,\n startIconName,\n startIconProps,\n startAccessory,\n endIconName,\n endIconProps,\n endAccessory,\n className,\n style,\n ...props\n },\n ref,\n ) => {\n const backgroundColor = MAP_TAG_SEVERITY_BACKGROUND[severity];\n const textColor = MAP_TAG_SEVERITY_TEXT_COLOR[severity];\n const iconColor = MAP_TAG_SEVERITY_ICON_COLOR[severity];\n\n const finalStartIconName = startIconName ?? startIconProps?.name;\n const finalEndIconName = endIconName ?? endIconProps?.name;\n\n const resolvedStartAccessory = finalStartIconName ? (\n <Icon\n name={finalStartIconName}\n color={iconColor}\n size={IconSize.Xs}\n className=\"shrink-0\"\n {...startIconProps}\n />\n ) : (\n (startAccessory ?? null)\n );\n\n const resolvedEndAccessory = finalEndIconName ? (\n <Icon\n name={finalEndIconName}\n color={iconColor}\n size={IconSize.Xs}\n className=\"shrink-0\"\n {...endIconProps}\n />\n ) : (\n (endAccessory ?? null)\n );\n\n const content = isTextContent(children) ? (\n <Text\n variant={TextVariant.BodyXs}\n color={textColor}\n fontWeight={FontWeight.Medium}\n >\n {children}\n </Text>\n ) : (\n children\n );\n\n const mergedClassName = twMerge(\n 'inline-flex gap-0.5 self-start rounded-md',\n finalStartIconName ? 'pl-1' : 'pl-1.5',\n finalEndIconName ? 'pr-1' : 'pr-1.5',\n className,\n );\n\n return (\n <Box\n ref={ref}\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Center}\n backgroundColor={backgroundColor}\n className={mergedClassName}\n style={style}\n {...props}\n >\n {resolvedStartAccessory}\n {content}\n {resolvedEndAccessory}\n </Box>\n );\n },\n);\n\nTag.displayName = 'Tag';\n"]}
@@ -0,0 +1,3 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ //# sourceMappingURL=Tag.types.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tag.types.cjs","sourceRoot":"","sources":["../../../src/components/Tag/Tag.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TagPropsShared } from '@metamask-previews/design-system-shared';\nimport type { IconName } from '@metamask-previews/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { IconProps } from '../Icon';\n\n/**\n * Tag component props (React / extension).\n * Extends {@link TagPropsShared} with platform `Icon` passthroughs and `className`.\n */\nexport type TagProps = TagPropsShared &\n Omit<ComponentProps<'div'>, 'children'> & {\n /**\n * Optional icon at the start of the tag (`IconSize.Xs` unless overridden in `startIconProps`).\n */\n startIconName?: IconName;\n /**\n * Optional props for the start icon. You may set `name` here instead of `startIconName`.\n */\n startIconProps?: Partial<IconProps>;\n /**\n * Optional icon at the end of the tag (`IconSize.Xs` unless overridden in `endIconProps`).\n */\n endIconName?: IconName;\n /**\n * Optional props for the end icon. You may set `name` here instead of `endIconName`.\n */\n endIconProps?: Partial<IconProps>;\n /**\n * Optional CSS classes merged onto the tag container.\n */\n className?: string;\n };\n"]}
@@ -0,0 +1,31 @@
1
+ import type { TagPropsShared } from "@metamask-previews/design-system-shared";
2
+ import type { IconName } from "@metamask-previews/design-system-shared";
3
+ import type { ComponentProps } from "react";
4
+ import type { IconProps } from "../Icon/index.cjs";
5
+ /**
6
+ * Tag component props (React / extension).
7
+ * Extends {@link TagPropsShared} with platform `Icon` passthroughs and `className`.
8
+ */
9
+ export type TagProps = TagPropsShared & Omit<ComponentProps<'div'>, 'children'> & {
10
+ /**
11
+ * Optional icon at the start of the tag (`IconSize.Xs` unless overridden in `startIconProps`).
12
+ */
13
+ startIconName?: IconName;
14
+ /**
15
+ * Optional props for the start icon. You may set `name` here instead of `startIconName`.
16
+ */
17
+ startIconProps?: Partial<IconProps>;
18
+ /**
19
+ * Optional icon at the end of the tag (`IconSize.Xs` unless overridden in `endIconProps`).
20
+ */
21
+ endIconName?: IconName;
22
+ /**
23
+ * Optional props for the end icon. You may set `name` here instead of `endIconName`.
24
+ */
25
+ endIconProps?: Partial<IconProps>;
26
+ /**
27
+ * Optional CSS classes merged onto the tag container.
28
+ */
29
+ className?: string;
30
+ };
31
+ //# sourceMappingURL=Tag.types.d.cts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tag.types.d.cts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,gDAAgD;AAC9E,OAAO,KAAK,EAAE,QAAQ,EAAE,gDAAgD;AACxE,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,cAAc,GACnC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACxC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC"}
@@ -0,0 +1,31 @@
1
+ import type { TagPropsShared } from "@metamask-previews/design-system-shared";
2
+ import type { IconName } from "@metamask-previews/design-system-shared";
3
+ import type { ComponentProps } from "react";
4
+ import type { IconProps } from "../Icon/index.mjs";
5
+ /**
6
+ * Tag component props (React / extension).
7
+ * Extends {@link TagPropsShared} with platform `Icon` passthroughs and `className`.
8
+ */
9
+ export type TagProps = TagPropsShared & Omit<ComponentProps<'div'>, 'children'> & {
10
+ /**
11
+ * Optional icon at the start of the tag (`IconSize.Xs` unless overridden in `startIconProps`).
12
+ */
13
+ startIconName?: IconName;
14
+ /**
15
+ * Optional props for the start icon. You may set `name` here instead of `startIconName`.
16
+ */
17
+ startIconProps?: Partial<IconProps>;
18
+ /**
19
+ * Optional icon at the end of the tag (`IconSize.Xs` unless overridden in `endIconProps`).
20
+ */
21
+ endIconName?: IconName;
22
+ /**
23
+ * Optional props for the end icon. You may set `name` here instead of `endIconName`.
24
+ */
25
+ endIconProps?: Partial<IconProps>;
26
+ /**
27
+ * Optional CSS classes merged onto the tag container.
28
+ */
29
+ className?: string;
30
+ };
31
+ //# sourceMappingURL=Tag.types.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tag.types.d.mts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,gDAAgD;AAC9E,OAAO,KAAK,EAAE,QAAQ,EAAE,gDAAgD;AACxE,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,cAAc,GACnC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACxC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=Tag.types.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tag.types.mjs","sourceRoot":"","sources":["../../../src/components/Tag/Tag.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TagPropsShared } from '@metamask-previews/design-system-shared';\nimport type { IconName } from '@metamask-previews/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { IconProps } from '../Icon';\n\n/**\n * Tag component props (React / extension).\n * Extends {@link TagPropsShared} with platform `Icon` passthroughs and `className`.\n */\nexport type TagProps = TagPropsShared &\n Omit<ComponentProps<'div'>, 'children'> & {\n /**\n * Optional icon at the start of the tag (`IconSize.Xs` unless overridden in `startIconProps`).\n */\n startIconName?: IconName;\n /**\n * Optional props for the start icon. You may set `name` here instead of `startIconName`.\n */\n startIconProps?: Partial<IconProps>;\n /**\n * Optional icon at the end of the tag (`IconSize.Xs` unless overridden in `endIconProps`).\n */\n endIconName?: IconName;\n /**\n * Optional props for the end icon. You may set `name` here instead of `endIconName`.\n */\n endIconProps?: Partial<IconProps>;\n /**\n * Optional CSS classes merged onto the tag container.\n */\n className?: string;\n };\n"]}
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.TagSeverity = exports.Tag = void 0;
4
+ var Tag_1 = require("./Tag.cjs");
5
+ Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return Tag_1.Tag; } });
6
+ var design_system_shared_1 = require("@metamask-previews/design-system-shared");
7
+ Object.defineProperty(exports, "TagSeverity", { enumerable: true, get: function () { return design_system_shared_1.TagSeverity; } });
8
+ //# sourceMappingURL=index.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/Tag/index.ts"],"names":[],"mappings":";;;AAAA,iCAA4B;AAAnB,0FAAA,GAAG,OAAA;AACZ,gFAAsE;AAA7D,mHAAA,WAAW,OAAA","sourcesContent":["export { Tag } from './Tag';\nexport { TagSeverity } from '@metamask-previews/design-system-shared';\nexport type { TagProps } from './Tag.types';\n"]}
@@ -0,0 +1,4 @@
1
+ export { Tag } from "./Tag.cjs";
2
+ export { TagSeverity } from "@metamask-previews/design-system-shared";
3
+ export type { TagProps } from "./Tag.types.cjs";
4
+ //# sourceMappingURL=index.d.cts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Tag/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,kBAAc;AAC5B,OAAO,EAAE,WAAW,EAAE,gDAAgD;AACtE,YAAY,EAAE,QAAQ,EAAE,wBAAoB"}
@@ -0,0 +1,4 @@
1
+ export { Tag } from "./Tag.mjs";
2
+ export { TagSeverity } from "@metamask-previews/design-system-shared";
3
+ export type { TagProps } from "./Tag.types.mjs";
4
+ //# sourceMappingURL=index.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/Tag/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,kBAAc;AAC5B,OAAO,EAAE,WAAW,EAAE,gDAAgD;AACtE,YAAY,EAAE,QAAQ,EAAE,wBAAoB"}
@@ -0,0 +1,3 @@
1
+ export { Tag } from "./Tag.mjs";
2
+ export { TagSeverity } from "@metamask-previews/design-system-shared";
3
+ //# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/Tag/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,kBAAc;AAC5B,OAAO,EAAE,WAAW,EAAE,gDAAgD","sourcesContent":["export { Tag } from './Tag';\nexport { TagSeverity } from '@metamask-previews/design-system-shared';\nexport type { TagProps } from './Tag.types';\n"]}
@@ -24,36 +24,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
24
24
  };
25
25
  Object.defineProperty(exports, "__esModule", { value: true });
26
26
  exports.TextButton = void 0;
27
+ const design_system_shared_1 = require("@metamask-previews/design-system-shared");
28
+ const react_slot_1 = require("@radix-ui/react-slot");
27
29
  const react_1 = __importStar(require("react"));
28
- const types_1 = require("../../types/index.cjs");
29
30
  const tw_merge_1 = require("../../utils/tw-merge.cjs");
30
- const ButtonBase_1 = require("../ButtonBase/index.cjs");
31
- const TextButton_constants_1 = require("./TextButton.constants.cjs");
32
- exports.TextButton = (0, react_1.forwardRef)(({ className, isInverse, isDisabled, size = types_1.TextButtonSize.BodyMd, textProps, ...props }, ref) => {
33
- const mergedClassName = (0, tw_merge_1.twMerge)(
34
- // Reset padding, height and animations
35
- 'h-auto rounded-none bg-transparent px-0', 'transform-none transition-none active:scale-100',
36
- // Default text button styles
37
- !isInverse && 'text-primary-default',
38
- // Inverse styles
39
- isInverse && 'text-primary-inverse',
40
- // Hover/Active states - only applied when interactive
41
- !isDisabled && [
42
- !isInverse && [
43
- 'hover:text-primary-default-hover hover:underline hover:decoration-primary-default-hover hover:decoration-2 hover:underline-offset-4',
44
- 'active:text-primary-default-pressed active:decoration-primary-default-pressed',
45
- ],
46
- isInverse && [
47
- 'hover:text-primary-inverse hover:underline hover:decoration-primary-inverse hover:decoration-2 hover:underline-offset-4',
48
- 'active:text-primary-inverse active:decoration-primary-inverse',
49
- ],
50
- ],
51
- // Disabled styles
52
- isDisabled && ['opacity-50', 'cursor-not-allowed'], className);
53
- return (react_1.default.createElement(ButtonBase_1.ButtonBase, { ref: ref, className: mergedClassName, isDisabled: isDisabled, textProps: {
54
- variant: TextButton_constants_1.MAP_TEXTBUTTON_SIZE_TEXTVARIANT[size],
55
- ...textProps,
56
- }, ...props }));
31
+ const Text_1 = require("../Text/index.cjs");
32
+ exports.TextButton = (0, react_1.forwardRef)(({ children, className, variant = design_system_shared_1.TextVariant.BodyMd, fontWeight = design_system_shared_1.FontWeight.Medium, fontFamily, fontStyle, textTransform, textAlign, overflowWrap, ellipsis, style, onClick, asChild, type = 'button', ...rest }, ref) => {
33
+ const mergedClassName = (0, tw_merge_1.twMerge)('inline cursor-pointer appearance-none border-0 bg-transparent p-0 text-primary-default', 'hover:text-primary-default-hover hover:underline hover:decoration-primary-default-hover hover:decoration-2 hover:underline-offset-4', 'active:text-primary-default-pressed active:decoration-primary-default-pressed', className);
34
+ const textButtonContent = asChild ? (react_1.default.createElement(react_slot_1.Slot, { ref: ref, onClick: onClick, ...rest }, children)) : (react_1.default.createElement("button", { ref: ref, type: type, onClick: onClick, ...rest }, children));
35
+ return (react_1.default.createElement(Text_1.Text, { asChild: true, variant: variant, fontWeight: fontWeight, fontFamily: fontFamily, fontStyle: fontStyle, textTransform: textTransform, textAlign: textAlign, overflowWrap: overflowWrap, ellipsis: ellipsis, color: design_system_shared_1.TextColor.PrimaryDefault, className: mergedClassName, style: style }, textButtonContent));
57
36
  });
58
37
  exports.TextButton.displayName = 'TextButton';
59
38
  //# sourceMappingURL=TextButton.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"TextButton.cjs","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,iDAA6C;AAC7C,uDAA+C;AAC/C,wDAA2C;AAE3C,qEAAyE;AAG5D,QAAA,UAAU,GAAG,IAAA,kBAAU,EAClC,CACE,EACE,SAAS,EACT,SAAS,EACT,UAAU,EACV,IAAI,GAAG,sBAAc,CAAC,MAAM,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,uCAAuC;IACvC,yCAAyC,EACzC,iDAAiD;IACjD,6BAA6B;IAC7B,CAAC,SAAS,IAAI,sBAAsB;IACpC,iBAAiB;IACjB,SAAS,IAAI,sBAAsB;IACnC,sDAAsD;IACtD,CAAC,UAAU,IAAI;QACb,CAAC,SAAS,IAAI;YACZ,qIAAqI;YACrI,+EAA+E;SAChF;QACD,SAAS,IAAI;YACX,yHAAyH;YACzH,+DAA+D;SAChE;KACF;IACD,kBAAkB;IAClB,UAAU,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAClD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE;YACT,OAAO,EAAE,sDAA+B,CAAC,IAAI,CAAC;YAC9C,GAAG,SAAS;SACb,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { TextButtonSize } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { ButtonBase } from '../ButtonBase';\n\nimport { MAP_TEXTBUTTON_SIZE_TEXTVARIANT } from './TextButton.constants';\nimport type { TextButtonProps } from './TextButton.types';\n\nexport const TextButton = forwardRef<HTMLButtonElement, TextButtonProps>(\n (\n {\n className,\n isInverse,\n isDisabled,\n size = TextButtonSize.BodyMd,\n textProps,\n ...props\n },\n ref,\n ) => {\n const mergedClassName = twMerge(\n // Reset padding, height and animations\n 'h-auto rounded-none bg-transparent px-0',\n 'transform-none transition-none active:scale-100',\n // Default text button styles\n !isInverse && 'text-primary-default',\n // Inverse styles\n isInverse && 'text-primary-inverse',\n // Hover/Active states - only applied when interactive\n !isDisabled && [\n !isInverse && [\n 'hover:text-primary-default-hover hover:underline hover:decoration-primary-default-hover hover:decoration-2 hover:underline-offset-4',\n 'active:text-primary-default-pressed active:decoration-primary-default-pressed',\n ],\n isInverse && [\n 'hover:text-primary-inverse hover:underline hover:decoration-primary-inverse hover:decoration-2 hover:underline-offset-4',\n 'active:text-primary-inverse active:decoration-primary-inverse',\n ],\n ],\n // Disabled styles\n isDisabled && ['opacity-50', 'cursor-not-allowed'],\n className,\n );\n\n return (\n <ButtonBase\n ref={ref}\n className={mergedClassName}\n isDisabled={isDisabled}\n textProps={{\n variant: MAP_TEXTBUTTON_SIZE_TEXTVARIANT[size],\n ...textProps,\n }}\n {...props}\n />\n );\n },\n);\n\nTextButton.displayName = 'TextButton';\n"]}
1
+ {"version":3,"file":"TextButton.cjs","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAIiD;AACjD,qDAA4C;AAC5C,+CAA0C;AAE1C,uDAA+C;AAC/C,4CAA+B;AAIlB,QAAA,UAAU,GAAG,IAAA,kBAAU,EAClC,CACE,EACE,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,kCAAW,CAAC,MAAM,EAC5B,UAAU,GAAG,iCAAU,CAAC,MAAM,EAC9B,UAAU,EACV,SAAS,EACT,aAAa,EACb,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,OAAO,EACP,OAAO,EACP,IAAI,GAAG,QAAQ,EACf,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,eAAe,GAAG,IAAA,kBAAO,EAC7B,wFAAwF,EACxF,qIAAqI,EACrI,+EAA+E,EAC/E,SAAS,CACV,CAAC;IAEF,MAAM,iBAAiB,GAAG,OAAO,CAAC,CAAC,CAAC,CAClC,8BAAC,iBAAI,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,KAAM,IAAI,IACvC,QAAQ,CACJ,CACR,CAAC,CAAC,CAAC,CACF,0CAAQ,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,KAAM,IAAI,IACrD,QAAQ,CACF,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,WAAI,IACH,OAAO,QACP,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,gCAAS,CAAC,cAAc,EAC/B,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,KAAK,IAEX,iBAAiB,CACb,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import {\n FontWeight,\n TextColor,\n TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Text } from '../Text';\n\nimport type { TextButtonProps } from './TextButton.types';\n\nexport const TextButton = forwardRef<HTMLButtonElement, TextButtonProps>(\n (\n {\n children,\n className,\n variant = TextVariant.BodyMd,\n fontWeight = FontWeight.Medium,\n fontFamily,\n fontStyle,\n textTransform,\n textAlign,\n overflowWrap,\n ellipsis,\n style,\n onClick,\n asChild,\n type = 'button',\n ...rest\n },\n ref,\n ) => {\n const mergedClassName = twMerge(\n 'inline cursor-pointer appearance-none border-0 bg-transparent p-0 text-primary-default',\n 'hover:text-primary-default-hover hover:underline hover:decoration-primary-default-hover hover:decoration-2 hover:underline-offset-4',\n 'active:text-primary-default-pressed active:decoration-primary-default-pressed',\n className,\n );\n\n const textButtonContent = asChild ? (\n <Slot ref={ref} onClick={onClick} {...rest}>\n {children}\n </Slot>\n ) : (\n <button ref={ref} type={type} onClick={onClick} {...rest}>\n {children}\n </button>\n );\n\n return (\n <Text\n asChild\n variant={variant}\n fontWeight={fontWeight}\n fontFamily={fontFamily}\n fontStyle={fontStyle}\n textTransform={textTransform}\n textAlign={textAlign}\n overflowWrap={overflowWrap}\n ellipsis={ellipsis}\n color={TextColor.PrimaryDefault}\n className={mergedClassName}\n style={style}\n >\n {textButtonContent}\n </Text>\n );\n },\n);\n\nTextButton.displayName = 'TextButton';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"TextButton.d.cts","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAO1C,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,wGAiDtB,CAAC"}
1
+ {"version":3,"file":"TextButton.d.cts","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAqB,cAAc;AAK1C,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,wGAyDtB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"TextButton.d.mts","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAO1C,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,wGAiDtB,CAAC"}
1
+ {"version":3,"file":"TextButton.d.mts","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAqB,cAAc;AAK1C,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,wGAyDtB,CAAC"}
@@ -4,37 +4,16 @@ function $importDefault(module) {
4
4
  }
5
5
  return module;
6
6
  }
7
+ import { FontWeight, TextColor, TextVariant } from "@metamask-previews/design-system-shared";
8
+ import { Slot } from "@radix-ui/react-slot";
7
9
  import $React, { forwardRef } from "react";
8
10
  const React = $importDefault($React);
9
- import { TextButtonSize } from "../../types/index.mjs";
10
11
  import { twMerge } from "../../utils/tw-merge.mjs";
11
- import { ButtonBase } from "../ButtonBase/index.mjs";
12
- import { MAP_TEXTBUTTON_SIZE_TEXTVARIANT } from "./TextButton.constants.mjs";
13
- export const TextButton = forwardRef(({ className, isInverse, isDisabled, size = TextButtonSize.BodyMd, textProps, ...props }, ref) => {
14
- const mergedClassName = twMerge(
15
- // Reset padding, height and animations
16
- 'h-auto rounded-none bg-transparent px-0', 'transform-none transition-none active:scale-100',
17
- // Default text button styles
18
- !isInverse && 'text-primary-default',
19
- // Inverse styles
20
- isInverse && 'text-primary-inverse',
21
- // Hover/Active states - only applied when interactive
22
- !isDisabled && [
23
- !isInverse && [
24
- 'hover:text-primary-default-hover hover:underline hover:decoration-primary-default-hover hover:decoration-2 hover:underline-offset-4',
25
- 'active:text-primary-default-pressed active:decoration-primary-default-pressed',
26
- ],
27
- isInverse && [
28
- 'hover:text-primary-inverse hover:underline hover:decoration-primary-inverse hover:decoration-2 hover:underline-offset-4',
29
- 'active:text-primary-inverse active:decoration-primary-inverse',
30
- ],
31
- ],
32
- // Disabled styles
33
- isDisabled && ['opacity-50', 'cursor-not-allowed'], className);
34
- return (React.createElement(ButtonBase, { ref: ref, className: mergedClassName, isDisabled: isDisabled, textProps: {
35
- variant: MAP_TEXTBUTTON_SIZE_TEXTVARIANT[size],
36
- ...textProps,
37
- }, ...props }));
12
+ import { Text } from "../Text/index.mjs";
13
+ export const TextButton = forwardRef(({ children, className, variant = TextVariant.BodyMd, fontWeight = FontWeight.Medium, fontFamily, fontStyle, textTransform, textAlign, overflowWrap, ellipsis, style, onClick, asChild, type = 'button', ...rest }, ref) => {
14
+ const mergedClassName = twMerge('inline cursor-pointer appearance-none border-0 bg-transparent p-0 text-primary-default', 'hover:text-primary-default-hover hover:underline hover:decoration-primary-default-hover hover:decoration-2 hover:underline-offset-4', 'active:text-primary-default-pressed active:decoration-primary-default-pressed', className);
15
+ const textButtonContent = asChild ? (React.createElement(Slot, { ref: ref, onClick: onClick, ...rest }, children)) : (React.createElement("button", { ref: ref, type: type, onClick: onClick, ...rest }, children));
16
+ return (React.createElement(Text, { asChild: true, variant: variant, fontWeight: fontWeight, fontFamily: fontFamily, fontStyle: fontStyle, textTransform: textTransform, textAlign: textAlign, overflowWrap: overflowWrap, ellipsis: ellipsis, color: TextColor.PrimaryDefault, className: mergedClassName, style: style }, textButtonContent));
38
17
  });
39
18
  TextButton.displayName = 'TextButton';
40
19
  //# sourceMappingURL=TextButton.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"TextButton.mjs","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAE3C,OAAO,EAAE,+BAA+B,EAAE,mCAA+B;AAGzE,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,SAAS,EACT,SAAS,EACT,UAAU,EACV,IAAI,GAAG,cAAc,CAAC,MAAM,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,eAAe,GAAG,OAAO;IAC7B,uCAAuC;IACvC,yCAAyC,EACzC,iDAAiD;IACjD,6BAA6B;IAC7B,CAAC,SAAS,IAAI,sBAAsB;IACpC,iBAAiB;IACjB,SAAS,IAAI,sBAAsB;IACnC,sDAAsD;IACtD,CAAC,UAAU,IAAI;QACb,CAAC,SAAS,IAAI;YACZ,qIAAqI;YACrI,+EAA+E;SAChF;QACD,SAAS,IAAI;YACX,yHAAyH;YACzH,+DAA+D;SAChE;KACF;IACD,kBAAkB;IAClB,UAAU,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAClD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE;YACT,OAAO,EAAE,+BAA+B,CAAC,IAAI,CAAC;YAC9C,GAAG,SAAS;SACb,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { TextButtonSize } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { ButtonBase } from '../ButtonBase';\n\nimport { MAP_TEXTBUTTON_SIZE_TEXTVARIANT } from './TextButton.constants';\nimport type { TextButtonProps } from './TextButton.types';\n\nexport const TextButton = forwardRef<HTMLButtonElement, TextButtonProps>(\n (\n {\n className,\n isInverse,\n isDisabled,\n size = TextButtonSize.BodyMd,\n textProps,\n ...props\n },\n ref,\n ) => {\n const mergedClassName = twMerge(\n // Reset padding, height and animations\n 'h-auto rounded-none bg-transparent px-0',\n 'transform-none transition-none active:scale-100',\n // Default text button styles\n !isInverse && 'text-primary-default',\n // Inverse styles\n isInverse && 'text-primary-inverse',\n // Hover/Active states - only applied when interactive\n !isDisabled && [\n !isInverse && [\n 'hover:text-primary-default-hover hover:underline hover:decoration-primary-default-hover hover:decoration-2 hover:underline-offset-4',\n 'active:text-primary-default-pressed active:decoration-primary-default-pressed',\n ],\n isInverse && [\n 'hover:text-primary-inverse hover:underline hover:decoration-primary-inverse hover:decoration-2 hover:underline-offset-4',\n 'active:text-primary-inverse active:decoration-primary-inverse',\n ],\n ],\n // Disabled styles\n isDisabled && ['opacity-50', 'cursor-not-allowed'],\n className,\n );\n\n return (\n <ButtonBase\n ref={ref}\n className={mergedClassName}\n isDisabled={isDisabled}\n textProps={{\n variant: MAP_TEXTBUTTON_SIZE_TEXTVARIANT[size],\n ...textProps,\n }}\n {...props}\n />\n );\n },\n);\n\nTextButton.displayName = 'TextButton';\n"]}
1
+ {"version":3,"file":"TextButton.mjs","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,UAAU,EACV,SAAS,EACT,WAAW,EACZ,gDAAgD;AACjD,OAAO,EAAE,IAAI,EAAE,6BAA6B;AAC5C,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAI/B,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,WAAW,CAAC,MAAM,EAC5B,UAAU,GAAG,UAAU,CAAC,MAAM,EAC9B,UAAU,EACV,SAAS,EACT,aAAa,EACb,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,OAAO,EACP,OAAO,EACP,IAAI,GAAG,QAAQ,EACf,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,eAAe,GAAG,OAAO,CAC7B,wFAAwF,EACxF,qIAAqI,EACrI,+EAA+E,EAC/E,SAAS,CACV,CAAC;IAEF,MAAM,iBAAiB,GAAG,OAAO,CAAC,CAAC,CAAC,CAClC,oBAAC,IAAI,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,KAAM,IAAI,IACvC,QAAQ,CACJ,CACR,CAAC,CAAC,CAAC,CACF,gCAAQ,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,KAAM,IAAI,IACrD,QAAQ,CACF,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,IAAI,IACH,OAAO,QACP,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,SAAS,CAAC,cAAc,EAC/B,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,KAAK,IAEX,iBAAiB,CACb,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import {\n FontWeight,\n TextColor,\n TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Text } from '../Text';\n\nimport type { TextButtonProps } from './TextButton.types';\n\nexport const TextButton = forwardRef<HTMLButtonElement, TextButtonProps>(\n (\n {\n children,\n className,\n variant = TextVariant.BodyMd,\n fontWeight = FontWeight.Medium,\n fontFamily,\n fontStyle,\n textTransform,\n textAlign,\n overflowWrap,\n ellipsis,\n style,\n onClick,\n asChild,\n type = 'button',\n ...rest\n },\n ref,\n ) => {\n const mergedClassName = twMerge(\n 'inline cursor-pointer appearance-none border-0 bg-transparent p-0 text-primary-default',\n 'hover:text-primary-default-hover hover:underline hover:decoration-primary-default-hover hover:decoration-2 hover:underline-offset-4',\n 'active:text-primary-default-pressed active:decoration-primary-default-pressed',\n className,\n );\n\n const textButtonContent = asChild ? (\n <Slot ref={ref} onClick={onClick} {...rest}>\n {children}\n </Slot>\n ) : (\n <button ref={ref} type={type} onClick={onClick} {...rest}>\n {children}\n </button>\n );\n\n return (\n <Text\n asChild\n variant={variant}\n fontWeight={fontWeight}\n fontFamily={fontFamily}\n fontStyle={fontStyle}\n textTransform={textTransform}\n textAlign={textAlign}\n overflowWrap={overflowWrap}\n ellipsis={ellipsis}\n color={TextColor.PrimaryDefault}\n className={mergedClassName}\n style={style}\n >\n {textButtonContent}\n </Text>\n );\n },\n);\n\nTextButton.displayName = 'TextButton';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"TextButton.types.cjs","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TextButtonSize } from '../../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\nexport type TextButtonProps = Omit<\n ButtonBaseProps,\n // We handle these props in TextButton\n | 'className'\n | 'isDisabled'\n | 'isLoading'\n | 'loadingIconProps'\n | 'loadingTextProps'\n | 'style'\n | 'size'\n> & {\n /**\n * Optional prop for additional CSS classes to be applied to the TextButton component\n */\n className?: string;\n /**\n * Optional prop that when true, applies inverse styling to the button\n *\n * @default false\n */\n isInverse?: boolean;\n /**\n * Optional prop that when true, disables the button\n *\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Optional prop to specify the size of the TextButton\n *\n * @default TextButtonSize.BodyMd\n */\n size?: TextButtonSize;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n};\n"]}
1
+ {"version":3,"file":"TextButton.types.cjs","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TextButtonPropsShared } from '@metamask-previews/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { TextProps } from '../Text';\n\nexport type TextButtonProps = TextButtonPropsShared &\n Omit<TextProps, 'asChild' | 'children' | 'color'> &\n Omit<\n ComponentProps<'button'>,\n 'children' | 'color' | 'disabled' | 'onClick'\n > & {\n /**\n * Called when the user clicks the label. Primary interaction for this control.\n */\n onClick?: ComponentProps<'button'>['onClick'];\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a button element.\n *\n * @default false\n */\n asChild?: boolean;\n };\n"]}
@@ -1,33 +1,17 @@
1
- /// <reference types="react" />
2
- import type { TextButtonSize } from "../../types/index.cjs";
3
- import type { ButtonBaseProps } from "../ButtonBase/index.cjs";
4
- export type TextButtonProps = Omit<ButtonBaseProps, 'className' | 'isDisabled' | 'isLoading' | 'loadingIconProps' | 'loadingTextProps' | 'style' | 'size'> & {
1
+ import type { TextButtonPropsShared } from "@metamask-previews/design-system-shared";
2
+ import type { ComponentProps } from "react";
3
+ import type { TextProps } from "../Text/index.cjs";
4
+ export type TextButtonProps = TextButtonPropsShared & Omit<TextProps, 'asChild' | 'children' | 'color'> & Omit<ComponentProps<'button'>, 'children' | 'color' | 'disabled' | 'onClick'> & {
5
5
  /**
6
- * Optional prop for additional CSS classes to be applied to the TextButton component
6
+ * Called when the user clicks the label. Primary interaction for this control.
7
7
  */
8
- className?: string;
8
+ onClick?: ComponentProps<'button'>['onClick'];
9
9
  /**
10
- * Optional prop that when true, applies inverse styling to the button
10
+ * Optional boolean that determines if the component should merge its props onto its immediate child
11
+ * instead of rendering a button element.
11
12
  *
12
13
  * @default false
13
14
  */
14
- isInverse?: boolean;
15
- /**
16
- * Optional prop that when true, disables the button
17
- *
18
- * @default false
19
- */
20
- isDisabled?: boolean;
21
- /**
22
- * Optional prop to specify the size of the TextButton
23
- *
24
- * @default TextButtonSize.BodyMd
25
- */
26
- size?: TextButtonSize;
27
- /**
28
- * Optional CSS styles to be applied to the component.
29
- * Should be used sparingly and only for dynamic styles that can't be achieved with className.
30
- */
31
- style?: React.CSSProperties;
15
+ asChild?: boolean;
32
16
  };
33
17
  //# sourceMappingURL=TextButton.types.d.cts.map
@@ -1 +1 @@
1
- {"version":3,"file":"TextButton.types.d.cts","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,8BAAoB;AAClD,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,eAAe,EAEb,WAAW,GACX,YAAY,GACZ,WAAW,GACX,kBAAkB,GAClB,kBAAkB,GAClB,OAAO,GACP,MAAM,CACT,GAAG;IACF;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}
1
+ {"version":3,"file":"TextButton.types.d.cts","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,gDAAgD;AACrF,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,eAAe,GAAG,qBAAqB,GACjD,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC,GACjD,IAAI,CACF,cAAc,CAAC,QAAQ,CAAC,EACxB,UAAU,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAC9C,GAAG;IACF;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC;IAC9C;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC"}
@@ -1,33 +1,17 @@
1
- /// <reference types="react" />
2
- import type { TextButtonSize } from "../../types/index.mjs";
3
- import type { ButtonBaseProps } from "../ButtonBase/index.mjs";
4
- export type TextButtonProps = Omit<ButtonBaseProps, 'className' | 'isDisabled' | 'isLoading' | 'loadingIconProps' | 'loadingTextProps' | 'style' | 'size'> & {
1
+ import type { TextButtonPropsShared } from "@metamask-previews/design-system-shared";
2
+ import type { ComponentProps } from "react";
3
+ import type { TextProps } from "../Text/index.mjs";
4
+ export type TextButtonProps = TextButtonPropsShared & Omit<TextProps, 'asChild' | 'children' | 'color'> & Omit<ComponentProps<'button'>, 'children' | 'color' | 'disabled' | 'onClick'> & {
5
5
  /**
6
- * Optional prop for additional CSS classes to be applied to the TextButton component
6
+ * Called when the user clicks the label. Primary interaction for this control.
7
7
  */
8
- className?: string;
8
+ onClick?: ComponentProps<'button'>['onClick'];
9
9
  /**
10
- * Optional prop that when true, applies inverse styling to the button
10
+ * Optional boolean that determines if the component should merge its props onto its immediate child
11
+ * instead of rendering a button element.
11
12
  *
12
13
  * @default false
13
14
  */
14
- isInverse?: boolean;
15
- /**
16
- * Optional prop that when true, disables the button
17
- *
18
- * @default false
19
- */
20
- isDisabled?: boolean;
21
- /**
22
- * Optional prop to specify the size of the TextButton
23
- *
24
- * @default TextButtonSize.BodyMd
25
- */
26
- size?: TextButtonSize;
27
- /**
28
- * Optional CSS styles to be applied to the component.
29
- * Should be used sparingly and only for dynamic styles that can't be achieved with className.
30
- */
31
- style?: React.CSSProperties;
15
+ asChild?: boolean;
32
16
  };
33
17
  //# sourceMappingURL=TextButton.types.d.mts.map
@@ -1 +1 @@
1
- {"version":3,"file":"TextButton.types.d.mts","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,8BAAoB;AAClD,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,eAAe,EAEb,WAAW,GACX,YAAY,GACZ,WAAW,GACX,kBAAkB,GAClB,kBAAkB,GAClB,OAAO,GACP,MAAM,CACT,GAAG;IACF;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}
1
+ {"version":3,"file":"TextButton.types.d.mts","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,gDAAgD;AACrF,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,eAAe,GAAG,qBAAqB,GACjD,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC,GACjD,IAAI,CACF,cAAc,CAAC,QAAQ,CAAC,EACxB,UAAU,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAC9C,GAAG;IACF;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC;IAC9C;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"TextButton.types.mjs","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TextButtonSize } from '../../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\nexport type TextButtonProps = Omit<\n ButtonBaseProps,\n // We handle these props in TextButton\n | 'className'\n | 'isDisabled'\n | 'isLoading'\n | 'loadingIconProps'\n | 'loadingTextProps'\n | 'style'\n | 'size'\n> & {\n /**\n * Optional prop for additional CSS classes to be applied to the TextButton component\n */\n className?: string;\n /**\n * Optional prop that when true, applies inverse styling to the button\n *\n * @default false\n */\n isInverse?: boolean;\n /**\n * Optional prop that when true, disables the button\n *\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Optional prop to specify the size of the TextButton\n *\n * @default TextButtonSize.BodyMd\n */\n size?: TextButtonSize;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n};\n"]}
1
+ {"version":3,"file":"TextButton.types.mjs","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TextButtonPropsShared } from '@metamask-previews/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { TextProps } from '../Text';\n\nexport type TextButtonProps = TextButtonPropsShared &\n Omit<TextProps, 'asChild' | 'children' | 'color'> &\n Omit<\n ComponentProps<'button'>,\n 'children' | 'color' | 'disabled' | 'onClick'\n > & {\n /**\n * Called when the user clicks the label. Primary interaction for this control.\n */\n onClick?: ComponentProps<'button'>['onClick'];\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a button element.\n *\n * @default false\n */\n asChild?: boolean;\n };\n"]}
@@ -1,8 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.TextButton = exports.TextButtonSize = void 0;
4
- var types_1 = require("../../types/index.cjs");
5
- Object.defineProperty(exports, "TextButtonSize", { enumerable: true, get: function () { return types_1.TextButtonSize; } });
3
+ exports.TextButton = void 0;
6
4
  var TextButton_1 = require("./TextButton.cjs");
7
5
  Object.defineProperty(exports, "TextButton", { enumerable: true, get: function () { return TextButton_1.TextButton; } });
8
6
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/TextButton/index.ts"],"names":[],"mappings":";;;AAAA,+CAA6C;AAApC,uGAAA,cAAc,OAAA;AACvB,+CAA0C;AAAjC,wGAAA,UAAU,OAAA","sourcesContent":["export { TextButtonSize } from '../../types';\nexport { TextButton } from './TextButton';\nexport type { TextButtonProps } from './TextButton.types';\n"]}
1
+ {"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/TextButton/index.ts"],"names":[],"mappings":";;;AAAA,+CAA0C;AAAjC,wGAAA,UAAU,OAAA","sourcesContent":["export { TextButton } from './TextButton';\nexport type { TextButtonProps } from './TextButton.types';\n"]}
@@ -1,4 +1,3 @@
1
- export { TextButtonSize } from "../../types/index.cjs";
2
1
  export { TextButton } from "./TextButton.cjs";
3
2
  export type { TextButtonProps } from "./TextButton.types.cjs";
4
3
  //# sourceMappingURL=index.d.cts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/TextButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}
1
+ {"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/TextButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}
@@ -1,4 +1,3 @@
1
- export { TextButtonSize } from "../../types/index.mjs";
2
1
  export { TextButton } from "./TextButton.mjs";
3
2
  export type { TextButtonProps } from "./TextButton.types.mjs";
4
3
  //# sourceMappingURL=index.d.mts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/TextButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}
1
+ {"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/TextButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}
@@ -1,3 +1,2 @@
1
- export { TextButtonSize } from "../../types/index.mjs";
2
1
  export { TextButton } from "./TextButton.mjs";
3
2
  //# sourceMappingURL=index.mjs.map