@metamask-previews/design-system-react 0.0.0-preview.ff8ed96 → 0.2.0-preview.a7d80d5

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 (172) hide show
  1. package/CHANGELOG.md +39 -1
  2. package/dist/components/AvatarFavicon/AvatarFavicon.cjs +1 -1
  3. package/dist/components/AvatarFavicon/AvatarFavicon.cjs.map +1 -1
  4. package/dist/components/AvatarFavicon/AvatarFavicon.mjs +1 -1
  5. package/dist/components/AvatarFavicon/AvatarFavicon.mjs.map +1 -1
  6. package/dist/components/AvatarNetwork/AvatarNetwork.cjs +1 -1
  7. package/dist/components/AvatarNetwork/AvatarNetwork.cjs.map +1 -1
  8. package/dist/components/AvatarNetwork/AvatarNetwork.mjs +1 -1
  9. package/dist/components/AvatarNetwork/AvatarNetwork.mjs.map +1 -1
  10. package/dist/components/AvatarToken/AvatarToken.cjs +1 -1
  11. package/dist/components/AvatarToken/AvatarToken.cjs.map +1 -1
  12. package/dist/components/AvatarToken/AvatarToken.mjs +1 -1
  13. package/dist/components/AvatarToken/AvatarToken.mjs.map +1 -1
  14. package/dist/components/BadgeIcon/BadgeIcon.cjs +1 -1
  15. package/dist/components/BadgeIcon/BadgeIcon.cjs.map +1 -1
  16. package/dist/components/BadgeIcon/BadgeIcon.mjs +1 -1
  17. package/dist/components/BadgeIcon/BadgeIcon.mjs.map +1 -1
  18. package/dist/components/Box/Box.cjs +16 -2
  19. package/dist/components/Box/Box.cjs.map +1 -1
  20. package/dist/components/Box/Box.constants.cjs +218 -1
  21. package/dist/components/Box/Box.constants.cjs.map +1 -1
  22. package/dist/components/Box/Box.constants.d.cts +16 -1
  23. package/dist/components/Box/Box.constants.d.cts.map +1 -1
  24. package/dist/components/Box/Box.constants.d.mts +16 -1
  25. package/dist/components/Box/Box.constants.d.mts.map +1 -1
  26. package/dist/components/Box/Box.constants.mjs +217 -0
  27. package/dist/components/Box/Box.constants.mjs.map +1 -1
  28. package/dist/components/Box/Box.d.cts +1 -1
  29. package/dist/components/Box/Box.d.cts.map +1 -1
  30. package/dist/components/Box/Box.d.mts +1 -1
  31. package/dist/components/Box/Box.d.mts.map +1 -1
  32. package/dist/components/Box/Box.mjs +17 -3
  33. package/dist/components/Box/Box.mjs.map +1 -1
  34. package/dist/components/Box/Box.types.cjs.map +1 -1
  35. package/dist/components/Box/Box.types.d.cts +84 -1
  36. package/dist/components/Box/Box.types.d.cts.map +1 -1
  37. package/dist/components/Box/Box.types.d.mts +84 -1
  38. package/dist/components/Box/Box.types.d.mts.map +1 -1
  39. package/dist/components/Box/Box.types.mjs.map +1 -1
  40. package/dist/components/Box/index.cjs +3 -1
  41. package/dist/components/Box/index.cjs.map +1 -1
  42. package/dist/components/Box/index.d.cts +1 -1
  43. package/dist/components/Box/index.d.cts.map +1 -1
  44. package/dist/components/Box/index.d.mts +1 -1
  45. package/dist/components/Box/index.d.mts.map +1 -1
  46. package/dist/components/Box/index.mjs +1 -1
  47. package/dist/components/Box/index.mjs.map +1 -1
  48. package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.cjs +8 -6
  49. package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.cjs.map +1 -1
  50. package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.d.cts.map +1 -1
  51. package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.d.mts.map +1 -1
  52. package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.mjs +8 -6
  53. package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.mjs.map +1 -1
  54. package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.cjs +12 -12
  55. package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.cjs.map +1 -1
  56. package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.d.cts.map +1 -1
  57. package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.d.mts.map +1 -1
  58. package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.mjs +12 -12
  59. package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.mjs.map +1 -1
  60. package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.cjs +3 -1
  61. package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.cjs.map +1 -1
  62. package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.d.cts.map +1 -1
  63. package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.d.mts.map +1 -1
  64. package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.mjs +3 -1
  65. package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.mjs.map +1 -1
  66. package/dist/components/ButtonBase/ButtonBase.cjs +20 -12
  67. package/dist/components/ButtonBase/ButtonBase.cjs.map +1 -1
  68. package/dist/components/ButtonBase/ButtonBase.constants.cjs +2 -2
  69. package/dist/components/ButtonBase/ButtonBase.constants.cjs.map +1 -1
  70. package/dist/components/ButtonBase/ButtonBase.constants.d.cts +1 -1
  71. package/dist/components/ButtonBase/ButtonBase.constants.d.cts.map +1 -1
  72. package/dist/components/ButtonBase/ButtonBase.constants.d.mts +1 -1
  73. package/dist/components/ButtonBase/ButtonBase.constants.d.mts.map +1 -1
  74. package/dist/components/ButtonBase/ButtonBase.constants.mjs +1 -1
  75. package/dist/components/ButtonBase/ButtonBase.constants.mjs.map +1 -1
  76. package/dist/components/ButtonBase/ButtonBase.d.cts.map +1 -1
  77. package/dist/components/ButtonBase/ButtonBase.d.mts.map +1 -1
  78. package/dist/components/ButtonBase/ButtonBase.mjs +21 -13
  79. package/dist/components/ButtonBase/ButtonBase.mjs.map +1 -1
  80. package/dist/components/ButtonBase/ButtonBase.types.cjs.map +1 -1
  81. package/dist/components/ButtonBase/ButtonBase.types.d.cts +35 -0
  82. package/dist/components/ButtonBase/ButtonBase.types.d.cts.map +1 -1
  83. package/dist/components/ButtonBase/ButtonBase.types.d.mts +35 -0
  84. package/dist/components/ButtonBase/ButtonBase.types.d.mts.map +1 -1
  85. package/dist/components/ButtonBase/ButtonBase.types.mjs.map +1 -1
  86. package/dist/components/ButtonIcon/ButtonIcon.cjs +1 -1
  87. package/dist/components/ButtonIcon/ButtonIcon.cjs.map +1 -1
  88. package/dist/components/ButtonIcon/ButtonIcon.mjs +1 -1
  89. package/dist/components/ButtonIcon/ButtonIcon.mjs.map +1 -1
  90. package/dist/components/Checkbox/Checkbox.cjs +2 -2
  91. package/dist/components/Checkbox/Checkbox.cjs.map +1 -1
  92. package/dist/components/Checkbox/Checkbox.mjs +2 -2
  93. package/dist/components/Checkbox/Checkbox.mjs.map +1 -1
  94. package/dist/components/Icon/Icon.cjs +1 -1
  95. package/dist/components/Icon/Icon.cjs.map +1 -1
  96. package/dist/components/Icon/Icon.constants.cjs +2 -2
  97. package/dist/components/Icon/Icon.constants.cjs.map +1 -1
  98. package/dist/components/Icon/Icon.constants.d.cts +1 -1
  99. package/dist/components/Icon/Icon.constants.d.cts.map +1 -1
  100. package/dist/components/Icon/Icon.constants.d.mts +1 -1
  101. package/dist/components/Icon/Icon.constants.d.mts.map +1 -1
  102. package/dist/components/Icon/Icon.constants.mjs +1 -1
  103. package/dist/components/Icon/Icon.constants.mjs.map +1 -1
  104. package/dist/components/Icon/Icon.mjs +2 -2
  105. package/dist/components/Icon/Icon.mjs.map +1 -1
  106. package/dist/components/Text/Text.constants.cjs +15 -0
  107. package/dist/components/Text/Text.constants.cjs.map +1 -1
  108. package/dist/components/Text/Text.constants.d.cts.map +1 -1
  109. package/dist/components/Text/Text.constants.d.mts.map +1 -1
  110. package/dist/components/Text/Text.constants.mjs +15 -0
  111. package/dist/components/Text/Text.constants.mjs.map +1 -1
  112. package/dist/components/Text/Text.types.cjs.map +1 -1
  113. package/dist/components/Text/Text.types.d.cts +1 -1
  114. package/dist/components/Text/Text.types.d.mts +1 -1
  115. package/dist/components/Text/Text.types.mjs.map +1 -1
  116. package/dist/components/TextButton/TextButton.cjs +1 -1
  117. package/dist/components/TextButton/TextButton.cjs.map +1 -1
  118. package/dist/components/TextButton/TextButton.mjs +1 -1
  119. package/dist/components/TextButton/TextButton.mjs.map +1 -1
  120. package/dist/components/index.cjs +4 -2
  121. package/dist/components/index.cjs.map +1 -1
  122. package/dist/components/index.d.cts +1 -1
  123. package/dist/components/index.d.cts.map +1 -1
  124. package/dist/components/index.d.mts +1 -1
  125. package/dist/components/index.d.mts.map +1 -1
  126. package/dist/components/index.mjs +1 -1
  127. package/dist/components/index.mjs.map +1 -1
  128. package/dist/components/temp-components/Jazzicon/Jazzicon.cjs +5 -2
  129. package/dist/components/temp-components/Jazzicon/Jazzicon.cjs.map +1 -1
  130. package/dist/components/temp-components/Jazzicon/Jazzicon.d.cts.map +1 -1
  131. package/dist/components/temp-components/Jazzicon/Jazzicon.d.mts.map +1 -1
  132. package/dist/components/temp-components/Jazzicon/Jazzicon.mjs +5 -2
  133. package/dist/components/temp-components/Jazzicon/Jazzicon.mjs.map +1 -1
  134. package/dist/components/temp-components/Jazzicon/Jazzicon.utilities.cjs +6 -3
  135. package/dist/components/temp-components/Jazzicon/Jazzicon.utilities.cjs.map +1 -1
  136. package/dist/components/temp-components/Jazzicon/Jazzicon.utilities.d.cts +6 -3
  137. package/dist/components/temp-components/Jazzicon/Jazzicon.utilities.d.cts.map +1 -1
  138. package/dist/components/temp-components/Jazzicon/Jazzicon.utilities.d.mts +6 -3
  139. package/dist/components/temp-components/Jazzicon/Jazzicon.utilities.d.mts.map +1 -1
  140. package/dist/components/temp-components/Jazzicon/Jazzicon.utilities.mjs +6 -3
  141. package/dist/components/temp-components/Jazzicon/Jazzicon.utilities.mjs.map +1 -1
  142. package/dist/index.cjs +1 -0
  143. package/dist/index.cjs.map +1 -1
  144. package/dist/index.d.cts +1 -0
  145. package/dist/index.d.cts.map +1 -1
  146. package/dist/index.d.mts +1 -0
  147. package/dist/index.d.mts.map +1 -1
  148. package/dist/index.mjs +1 -0
  149. package/dist/index.mjs.map +1 -1
  150. package/dist/types/index.cjs +143 -1
  151. package/dist/types/index.cjs.map +1 -1
  152. package/dist/types/index.d.cts +138 -1
  153. package/dist/types/index.d.cts.map +1 -1
  154. package/dist/types/index.d.mts +138 -1
  155. package/dist/types/index.d.mts.map +1 -1
  156. package/dist/types/index.mjs +142 -0
  157. package/dist/types/index.mjs.map +1 -1
  158. package/dist/utils/index.cjs +6 -0
  159. package/dist/utils/index.cjs.map +1 -0
  160. package/dist/utils/index.d.cts +2 -0
  161. package/dist/utils/index.d.cts.map +1 -0
  162. package/dist/utils/index.d.mts +2 -0
  163. package/dist/utils/index.d.mts.map +1 -0
  164. package/dist/utils/index.mjs +2 -0
  165. package/dist/utils/index.mjs.map +1 -0
  166. package/dist/utils/tw-merge.cjs +1 -5
  167. package/dist/utils/tw-merge.cjs.map +1 -1
  168. package/dist/utils/tw-merge.d.cts.map +1 -1
  169. package/dist/utils/tw-merge.d.mts.map +1 -1
  170. package/dist/utils/tw-merge.mjs +1 -5
  171. package/dist/utils/tw-merge.mjs.map +1 -1
  172. package/package.json +9 -9
@@ -33,9 +33,9 @@ exports.ButtonPrimary = (0, react_1.forwardRef)(({ className, isDanger, isInvers
33
33
  // Default primary styles
34
34
  !isDanger &&
35
35
  !isInverse && [
36
- 'bg-primary-default text-primary-inverse',
36
+ 'bg-icon-default text-primary-inverse',
37
37
  // Loading state uses pressed color
38
- isLoading && 'bg-primary-default-pressed',
38
+ isLoading && 'bg-icon-default-pressed',
39
39
  ],
40
40
  // Danger styles
41
41
  isDanger &&
@@ -62,8 +62,8 @@ exports.ButtonPrimary = (0, react_1.forwardRef)(({ className, isDanger, isInvers
62
62
  isInteractive && [
63
63
  !isDanger &&
64
64
  !isInverse && [
65
- 'hover:bg-primary-default-hover',
66
- 'active:bg-primary-default-pressed',
65
+ 'hover:bg-icon-default-hover',
66
+ 'active:bg-icon-default-pressed',
67
67
  ],
68
68
  isDanger &&
69
69
  !isInverse && [
@@ -74,12 +74,14 @@ exports.ButtonPrimary = (0, react_1.forwardRef)(({ className, isDanger, isInvers
74
74
  !isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],
75
75
  isInverse &&
76
76
  isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],
77
- ],
77
+ ], 'focus-visible:outline-none focus-visible:ring-0', isInverse
78
+ ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'
79
+ : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',
78
80
  // Loading styles
79
81
  isLoading && 'cursor-not-allowed',
80
82
  // Disabled styles (but not loading)
81
83
  isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'], className);
82
- return (react_1.default.createElement(ButtonBase_1.ButtonBase, { ref: ref, className: mergedClassName, isDisabled: isDisabled, isLoading: isLoading, "data-theme": !isInverse && 'light', ...props }));
84
+ return (react_1.default.createElement(ButtonBase_1.ButtonBase, { ref: ref, className: mergedClassName, isDisabled: isDisabled, isLoading: isLoading, ...props }));
83
85
  });
84
86
  exports.ButtonPrimary.displayName = 'ButtonPrimary';
85
87
  //# sourceMappingURL=ButtonPrimary.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonPrimary.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,6DAAqD;AACrD,8DAAiD;AAIpC,QAAA,aAAa,GAAG,IAAA,kBAAU,EACrC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,yBAAyB;IACzB,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,yCAAyC;QACzC,mCAAmC;QACnC,SAAS,IAAI,4BAA4B;KAC1C;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,0BAA0B;KACxC;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,yBAAyB;QACzB,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,+BAA+B;QAC/B,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,CAAC,QAAQ;YACP,CAAC,SAAS,IAAI;YACZ,gCAAgC;YAChC,mCAAmC;SACpC;QACH,QAAQ;YACN,CAAC,SAAS,IAAI;YACZ,8BAA8B;YAC9B,iCAAiC;SAClC;QACH,SAAS;YACP,CAAC,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;QACtE,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;KACtE;IACD,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,gBACR,CAAC,SAAS,IAAI,OAAO,KAC7B,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../../../utils/tw-merge';\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonPrimaryProps } from './ButtonPrimary.types';\n\nexport const ButtonPrimary = forwardRef<HTMLButtonElement, ButtonPrimaryProps>(\n (\n { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n ref,\n ) => {\n const isInteractive = !(isDisabled ?? isLoading);\n\n const mergedClassName = twMerge(\n // Default primary styles\n !isDanger &&\n !isInverse && [\n 'bg-primary-default text-primary-inverse',\n // Loading state uses pressed color\n isLoading && 'bg-primary-default-pressed',\n ],\n // Danger styles\n isDanger &&\n !isInverse && [\n 'bg-error-default text-error-inverse',\n // Loading state uses pressed color\n isLoading && 'bg-error-default-pressed',\n ],\n // Inverse styles\n isInverse &&\n !isDanger && [\n 'bg-default text-default',\n // Loading state uses pressed color\n isLoading && 'bg-default-pressed',\n ],\n // Inverse danger styles\n isInverse &&\n isDanger && [\n 'bg-default text-error-default',\n // Loading state uses pressed color\n isLoading && 'bg-default-pressed',\n ],\n // Hover/Active states - only applied when interactive\n isInteractive && [\n !isDanger &&\n !isInverse && [\n 'hover:bg-primary-default-hover',\n 'active:bg-primary-default-pressed',\n ],\n isDanger &&\n !isInverse && [\n 'hover:bg-error-default-hover',\n 'active:bg-error-default-pressed',\n ],\n isInverse &&\n !isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n isInverse &&\n isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n ],\n // Loading styles\n isLoading && 'cursor-not-allowed',\n // Disabled styles (but not loading)\n isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n className,\n );\n\n return (\n <ButtonBase\n ref={ref}\n className={mergedClassName}\n isDisabled={isDisabled}\n isLoading={isLoading}\n data-theme={!isInverse && 'light'} // Lock button primary to light theme\n {...props}\n />\n );\n },\n);\n\nButtonPrimary.displayName = 'ButtonPrimary';\n"]}
1
+ {"version":3,"file":"ButtonPrimary.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,6DAAqD;AACrD,8DAAiD;AAIpC,QAAA,aAAa,GAAG,IAAA,kBAAU,EACrC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,yBAAyB;IACzB,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,sCAAsC;QACtC,mCAAmC;QACnC,SAAS,IAAI,yBAAyB;KACvC;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,0BAA0B;KACxC;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,yBAAyB;QACzB,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,+BAA+B;QAC/B,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,CAAC,QAAQ;YACP,CAAC,SAAS,IAAI;YACZ,6BAA6B;YAC7B,gCAAgC;SACjC;QACH,QAAQ;YACN,CAAC,SAAS,IAAI;YACZ,8BAA8B;YAC9B,iCAAiC;SAClC;QACH,SAAS;YACP,CAAC,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;QACtE,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;KACtE,EACD,iDAAiD,EACjD,SAAS;QACP,CAAC,CAAC,uHAAuH;QACzH,CAAC,CAAC,oHAAoH;IACxH,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../../../utils/tw-merge';\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonPrimaryProps } from './ButtonPrimary.types';\n\nexport const ButtonPrimary = forwardRef<HTMLButtonElement, ButtonPrimaryProps>(\n (\n { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n ref,\n ) => {\n const isInteractive = !(isDisabled ?? isLoading);\n\n const mergedClassName = twMerge(\n // Default primary styles\n !isDanger &&\n !isInverse && [\n 'bg-icon-default text-primary-inverse',\n // Loading state uses pressed color\n isLoading && 'bg-icon-default-pressed',\n ],\n // Danger styles\n isDanger &&\n !isInverse && [\n 'bg-error-default text-error-inverse',\n // Loading state uses pressed color\n isLoading && 'bg-error-default-pressed',\n ],\n // Inverse styles\n isInverse &&\n !isDanger && [\n 'bg-default text-default',\n // Loading state uses pressed color\n isLoading && 'bg-default-pressed',\n ],\n // Inverse danger styles\n isInverse &&\n isDanger && [\n 'bg-default text-error-default',\n // Loading state uses pressed color\n isLoading && 'bg-default-pressed',\n ],\n // Hover/Active states - only applied when interactive\n isInteractive && [\n !isDanger &&\n !isInverse && [\n 'hover:bg-icon-default-hover',\n 'active:bg-icon-default-pressed',\n ],\n isDanger &&\n !isInverse && [\n 'hover:bg-error-default-hover',\n 'active:bg-error-default-pressed',\n ],\n isInverse &&\n !isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n isInverse &&\n isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n ],\n 'focus-visible:outline-none focus-visible:ring-0',\n isInverse\n ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'\n : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n // Loading styles\n isLoading && 'cursor-not-allowed',\n // Disabled styles (but not loading)\n isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n className,\n );\n\n return (\n <ButtonBase\n ref={ref}\n className={mergedClassName}\n isDisabled={isDisabled}\n isLoading={isLoading}\n {...props}\n />\n );\n },\n);\n\nButtonPrimary.displayName = 'ButtonPrimary';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonPrimary.d.cts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAK1C,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,2GAuEzB,CAAC"}
1
+ {"version":3,"file":"ButtonPrimary.d.cts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAK1C,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,2GA0EzB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonPrimary.d.mts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAK1C,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,2GAuEzB,CAAC"}
1
+ {"version":3,"file":"ButtonPrimary.d.mts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAK1C,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,2GA0EzB,CAAC"}
@@ -14,9 +14,9 @@ export const ButtonPrimary = forwardRef(({ className, isDanger, isInverse, isDis
14
14
  // Default primary styles
15
15
  !isDanger &&
16
16
  !isInverse && [
17
- 'bg-primary-default text-primary-inverse',
17
+ 'bg-icon-default text-primary-inverse',
18
18
  // Loading state uses pressed color
19
- isLoading && 'bg-primary-default-pressed',
19
+ isLoading && 'bg-icon-default-pressed',
20
20
  ],
21
21
  // Danger styles
22
22
  isDanger &&
@@ -43,8 +43,8 @@ export const ButtonPrimary = forwardRef(({ className, isDanger, isInverse, isDis
43
43
  isInteractive && [
44
44
  !isDanger &&
45
45
  !isInverse && [
46
- 'hover:bg-primary-default-hover',
47
- 'active:bg-primary-default-pressed',
46
+ 'hover:bg-icon-default-hover',
47
+ 'active:bg-icon-default-pressed',
48
48
  ],
49
49
  isDanger &&
50
50
  !isInverse && [
@@ -55,12 +55,14 @@ export const ButtonPrimary = forwardRef(({ className, isDanger, isInverse, isDis
55
55
  !isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],
56
56
  isInverse &&
57
57
  isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],
58
- ],
58
+ ], 'focus-visible:outline-none focus-visible:ring-0', isInverse
59
+ ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'
60
+ : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',
59
61
  // Loading styles
60
62
  isLoading && 'cursor-not-allowed',
61
63
  // Disabled styles (but not loading)
62
64
  isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'], className);
63
- return (React.createElement(ButtonBase, { ref: ref, className: mergedClassName, isDisabled: isDisabled, isLoading: isLoading, "data-theme": !isInverse && 'light', ...props }));
65
+ return (React.createElement(ButtonBase, { ref: ref, className: mergedClassName, isDisabled: isDisabled, isLoading: isLoading, ...props }));
64
66
  });
65
67
  ButtonPrimary.displayName = 'ButtonPrimary';
66
68
  //# sourceMappingURL=ButtonPrimary.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonPrimary.mjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,uCAAmC;AACrD,OAAO,EAAE,UAAU,EAAE,sCAA4B;AAIjD,MAAM,CAAC,MAAM,aAAa,GAAG,UAAU,CACrC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,OAAO;IAC7B,yBAAyB;IACzB,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,yCAAyC;QACzC,mCAAmC;QACnC,SAAS,IAAI,4BAA4B;KAC1C;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,0BAA0B;KACxC;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,yBAAyB;QACzB,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,+BAA+B;QAC/B,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,CAAC,QAAQ;YACP,CAAC,SAAS,IAAI;YACZ,gCAAgC;YAChC,mCAAmC;SACpC;QACH,QAAQ;YACN,CAAC,SAAS,IAAI;YACZ,8BAA8B;YAC9B,iCAAiC;SAClC;QACH,SAAS;YACP,CAAC,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;QACtE,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;KACtE;IACD,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,gBACR,CAAC,SAAS,IAAI,OAAO,KAC7B,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../../../utils/tw-merge';\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonPrimaryProps } from './ButtonPrimary.types';\n\nexport const ButtonPrimary = forwardRef<HTMLButtonElement, ButtonPrimaryProps>(\n (\n { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n ref,\n ) => {\n const isInteractive = !(isDisabled ?? isLoading);\n\n const mergedClassName = twMerge(\n // Default primary styles\n !isDanger &&\n !isInverse && [\n 'bg-primary-default text-primary-inverse',\n // Loading state uses pressed color\n isLoading && 'bg-primary-default-pressed',\n ],\n // Danger styles\n isDanger &&\n !isInverse && [\n 'bg-error-default text-error-inverse',\n // Loading state uses pressed color\n isLoading && 'bg-error-default-pressed',\n ],\n // Inverse styles\n isInverse &&\n !isDanger && [\n 'bg-default text-default',\n // Loading state uses pressed color\n isLoading && 'bg-default-pressed',\n ],\n // Inverse danger styles\n isInverse &&\n isDanger && [\n 'bg-default text-error-default',\n // Loading state uses pressed color\n isLoading && 'bg-default-pressed',\n ],\n // Hover/Active states - only applied when interactive\n isInteractive && [\n !isDanger &&\n !isInverse && [\n 'hover:bg-primary-default-hover',\n 'active:bg-primary-default-pressed',\n ],\n isDanger &&\n !isInverse && [\n 'hover:bg-error-default-hover',\n 'active:bg-error-default-pressed',\n ],\n isInverse &&\n !isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n isInverse &&\n isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n ],\n // Loading styles\n isLoading && 'cursor-not-allowed',\n // Disabled styles (but not loading)\n isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n className,\n );\n\n return (\n <ButtonBase\n ref={ref}\n className={mergedClassName}\n isDisabled={isDisabled}\n isLoading={isLoading}\n data-theme={!isInverse && 'light'} // Lock button primary to light theme\n {...props}\n />\n );\n },\n);\n\nButtonPrimary.displayName = 'ButtonPrimary';\n"]}
1
+ {"version":3,"file":"ButtonPrimary.mjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,uCAAmC;AACrD,OAAO,EAAE,UAAU,EAAE,sCAA4B;AAIjD,MAAM,CAAC,MAAM,aAAa,GAAG,UAAU,CACrC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,OAAO;IAC7B,yBAAyB;IACzB,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,sCAAsC;QACtC,mCAAmC;QACnC,SAAS,IAAI,yBAAyB;KACvC;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,0BAA0B;KACxC;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,yBAAyB;QACzB,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,+BAA+B;QAC/B,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,CAAC,QAAQ;YACP,CAAC,SAAS,IAAI;YACZ,6BAA6B;YAC7B,gCAAgC;SACjC;QACH,QAAQ;YACN,CAAC,SAAS,IAAI;YACZ,8BAA8B;YAC9B,iCAAiC;SAClC;QACH,SAAS;YACP,CAAC,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;QACtE,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;KACtE,EACD,iDAAiD,EACjD,SAAS;QACP,CAAC,CAAC,uHAAuH;QACzH,CAAC,CAAC,oHAAoH;IACxH,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../../../utils/tw-merge';\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonPrimaryProps } from './ButtonPrimary.types';\n\nexport const ButtonPrimary = forwardRef<HTMLButtonElement, ButtonPrimaryProps>(\n (\n { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n ref,\n ) => {\n const isInteractive = !(isDisabled ?? isLoading);\n\n const mergedClassName = twMerge(\n // Default primary styles\n !isDanger &&\n !isInverse && [\n 'bg-icon-default text-primary-inverse',\n // Loading state uses pressed color\n isLoading && 'bg-icon-default-pressed',\n ],\n // Danger styles\n isDanger &&\n !isInverse && [\n 'bg-error-default text-error-inverse',\n // Loading state uses pressed color\n isLoading && 'bg-error-default-pressed',\n ],\n // Inverse styles\n isInverse &&\n !isDanger && [\n 'bg-default text-default',\n // Loading state uses pressed color\n isLoading && 'bg-default-pressed',\n ],\n // Inverse danger styles\n isInverse &&\n isDanger && [\n 'bg-default text-error-default',\n // Loading state uses pressed color\n isLoading && 'bg-default-pressed',\n ],\n // Hover/Active states - only applied when interactive\n isInteractive && [\n !isDanger &&\n !isInverse && [\n 'hover:bg-icon-default-hover',\n 'active:bg-icon-default-pressed',\n ],\n isDanger &&\n !isInverse && [\n 'hover:bg-error-default-hover',\n 'active:bg-error-default-pressed',\n ],\n isInverse &&\n !isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n isInverse &&\n isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n ],\n 'focus-visible:outline-none focus-visible:ring-0',\n isInverse\n ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'\n : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n // Loading styles\n isLoading && 'cursor-not-allowed',\n // Disabled styles (but not loading)\n isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n className,\n );\n\n return (\n <ButtonBase\n ref={ref}\n className={mergedClassName}\n isDisabled={isDisabled}\n isLoading={isLoading}\n {...props}\n />\n );\n },\n);\n\nButtonPrimary.displayName = 'ButtonPrimary';\n"]}
@@ -33,21 +33,21 @@ exports.ButtonSecondary = (0, react_1.forwardRef)(({ className, isDanger, isInve
33
33
  // Default secondary styles
34
34
  !isDanger &&
35
35
  !isInverse && [
36
- 'bg-transparent border-2 border-icon-muted text-default',
36
+ 'bg-muted text-default',
37
37
  // Loading state uses pressed color
38
- isLoading && 'bg-pressed',
38
+ isLoading && 'bg-muted-pressed',
39
39
  ],
40
40
  // Danger styles
41
41
  isDanger &&
42
42
  !isInverse && [
43
- 'bg-transparent border-2 border-error-default text-error-default',
44
- // Loading state uses error muted pressed color
45
- isLoading && 'bg-error-muted-pressed text-error-default-pressed',
43
+ 'bg-muted text-error-default',
44
+ // Loading state uses pressed color
45
+ isLoading && 'bg-muted-pressed',
46
46
  ],
47
47
  // Inverse styles
48
48
  isInverse &&
49
49
  !isDanger && [
50
- 'bg-transparent border-2 border-primary-inverse text-primary-inverse',
50
+ 'border-2 border-primary-inverse bg-transparent text-primary-inverse',
51
51
  // Loading state uses pressed color
52
52
  isLoading && 'bg-pressed',
53
53
  ],
@@ -60,16 +60,16 @@ exports.ButtonSecondary = (0, react_1.forwardRef)(({ className, isDanger, isInve
60
60
  ],
61
61
  // Hover/Active states - only applied when interactive
62
62
  isInteractive && [
63
- !isDanger && !isInverse && ['hover:bg-hover', 'active:bg-pressed'],
63
+ !isDanger &&
64
+ !isInverse && ['hover:bg-muted-hover', 'active:bg-muted-pressed'],
64
65
  isDanger &&
65
- !isInverse && [
66
- 'hover:bg-error-muted-hover',
67
- 'active:bg-error-muted-pressed',
68
- ],
66
+ !isInverse && ['hover:bg-muted-hover', 'active:bg-muted-pressed'],
69
67
  isInverse && !isDanger && ['hover:bg-hover', 'active:bg-pressed'],
70
68
  isInverse &&
71
69
  isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],
72
- ],
70
+ ], 'focus-visible:outline-none focus-visible:ring-0', isInverse
71
+ ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'
72
+ : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',
73
73
  // Loading styles
74
74
  isLoading && 'cursor-not-allowed',
75
75
  // Disabled styles (but not loading)
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonSecondary.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,6DAAqD;AACrD,8DAAiD;AAIpC,QAAA,eAAe,GAAG,IAAA,kBAAU,EAIvC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,2BAA2B;IAC3B,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,wDAAwD;QACxD,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,iEAAiE;QACjE,+CAA+C;QAC/C,SAAS,IAAI,mDAAmD;KACjE;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,qEAAqE;QACrE,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,wCAAwC;QACxC,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,gBAAgB,EAAE,mBAAmB,CAAC;QAClE,QAAQ;YACN,CAAC,SAAS,IAAI;YACZ,4BAA4B;YAC5B,+BAA+B;SAChC;QACH,SAAS,IAAI,CAAC,QAAQ,IAAI,CAAC,gBAAgB,EAAE,mBAAmB,CAAC;QACjE,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;KACtE;IACD,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,uBAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../../../utils/tw-merge';\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonSecondaryProps } from './ButtonSecondary.types';\n\nexport const ButtonSecondary = forwardRef<\n HTMLButtonElement,\n ButtonSecondaryProps\n>(\n (\n { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n ref,\n ) => {\n const isInteractive = !(isDisabled ?? isLoading);\n\n const mergedClassName = twMerge(\n // Default secondary styles\n !isDanger &&\n !isInverse && [\n 'bg-transparent border-2 border-icon-muted text-default',\n // Loading state uses pressed color\n isLoading && 'bg-pressed',\n ],\n // Danger styles\n isDanger &&\n !isInverse && [\n 'bg-transparent border-2 border-error-default text-error-default',\n // Loading state uses error muted pressed color\n isLoading && 'bg-error-muted-pressed text-error-default-pressed',\n ],\n // Inverse styles\n isInverse &&\n !isDanger && [\n 'bg-transparent border-2 border-primary-inverse text-primary-inverse',\n // Loading state uses pressed color\n isLoading && 'bg-pressed',\n ],\n // Inverse danger styles\n isInverse &&\n isDanger && [\n 'border-0 bg-default text-error-default',\n // Loading state uses pressed color\n isLoading && 'bg-default-pressed',\n ],\n // Hover/Active states - only applied when interactive\n isInteractive && [\n !isDanger && !isInverse && ['hover:bg-hover', 'active:bg-pressed'],\n isDanger &&\n !isInverse && [\n 'hover:bg-error-muted-hover',\n 'active:bg-error-muted-pressed',\n ],\n isInverse && !isDanger && ['hover:bg-hover', 'active:bg-pressed'],\n isInverse &&\n isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n ],\n // Loading styles\n isLoading && 'cursor-not-allowed',\n // Disabled styles (but not loading)\n isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n className,\n );\n\n return (\n <ButtonBase\n ref={ref}\n className={mergedClassName}\n isDisabled={isDisabled}\n isLoading={isLoading}\n {...props}\n />\n );\n },\n);\n\nButtonSecondary.displayName = 'ButtonSecondary';\n"]}
1
+ {"version":3,"file":"ButtonSecondary.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,6DAAqD;AACrD,8DAAiD;AAIpC,QAAA,eAAe,GAAG,IAAA,kBAAU,EAIvC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,2BAA2B;IAC3B,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,uBAAuB;QACvB,mCAAmC;QACnC,SAAS,IAAI,kBAAkB;KAChC;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,6BAA6B;QAC7B,mCAAmC;QACnC,SAAS,IAAI,kBAAkB;KAChC;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,qEAAqE;QACrE,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,wCAAwC;QACxC,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,CAAC,QAAQ;YACP,CAAC,SAAS,IAAI,CAAC,sBAAsB,EAAE,yBAAyB,CAAC;QACnE,QAAQ;YACN,CAAC,SAAS,IAAI,CAAC,sBAAsB,EAAE,yBAAyB,CAAC;QACnE,SAAS,IAAI,CAAC,QAAQ,IAAI,CAAC,gBAAgB,EAAE,mBAAmB,CAAC;QACjE,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;KACtE,EACD,iDAAiD,EACjD,SAAS;QACP,CAAC,CAAC,uHAAuH;QACzH,CAAC,CAAC,oHAAoH;IACxH,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,uBAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../../../utils/tw-merge';\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonSecondaryProps } from './ButtonSecondary.types';\n\nexport const ButtonSecondary = forwardRef<\n HTMLButtonElement,\n ButtonSecondaryProps\n>(\n (\n { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n ref,\n ) => {\n const isInteractive = !(isDisabled ?? isLoading);\n\n const mergedClassName = twMerge(\n // Default secondary styles\n !isDanger &&\n !isInverse && [\n 'bg-muted text-default',\n // Loading state uses pressed color\n isLoading && 'bg-muted-pressed',\n ],\n // Danger styles\n isDanger &&\n !isInverse && [\n 'bg-muted text-error-default',\n // Loading state uses pressed color\n isLoading && 'bg-muted-pressed',\n ],\n // Inverse styles\n isInverse &&\n !isDanger && [\n 'border-2 border-primary-inverse bg-transparent text-primary-inverse',\n // Loading state uses pressed color\n isLoading && 'bg-pressed',\n ],\n // Inverse danger styles\n isInverse &&\n isDanger && [\n 'border-0 bg-default text-error-default',\n // Loading state uses pressed color\n isLoading && 'bg-default-pressed',\n ],\n // Hover/Active states - only applied when interactive\n isInteractive && [\n !isDanger &&\n !isInverse && ['hover:bg-muted-hover', 'active:bg-muted-pressed'],\n isDanger &&\n !isInverse && ['hover:bg-muted-hover', 'active:bg-muted-pressed'],\n isInverse && !isDanger && ['hover:bg-hover', 'active:bg-pressed'],\n isInverse &&\n isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n ],\n 'focus-visible:outline-none focus-visible:ring-0',\n isInverse\n ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'\n : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n // Loading styles\n isLoading && 'cursor-not-allowed',\n // Disabled styles (but not loading)\n isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n className,\n );\n\n return (\n <ButtonBase\n ref={ref}\n className={mergedClassName}\n isDisabled={isDisabled}\n isLoading={isLoading}\n {...props}\n />\n );\n },\n);\n\nButtonSecondary.displayName = 'ButtonSecondary';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonSecondary.d.cts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAK1C,OAAO,KAAK,EAAE,oBAAoB,EAAE,oCAAgC;AAEpE,eAAO,MAAM,eAAe,6GAoE3B,CAAC"}
1
+ {"version":3,"file":"ButtonSecondary.d.cts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAK1C,OAAO,KAAK,EAAE,oBAAoB,EAAE,oCAAgC;AAEpE,eAAO,MAAM,eAAe,6GAsE3B,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonSecondary.d.mts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAK1C,OAAO,KAAK,EAAE,oBAAoB,EAAE,oCAAgC;AAEpE,eAAO,MAAM,eAAe,6GAoE3B,CAAC"}
1
+ {"version":3,"file":"ButtonSecondary.d.mts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAK1C,OAAO,KAAK,EAAE,oBAAoB,EAAE,oCAAgC;AAEpE,eAAO,MAAM,eAAe,6GAsE3B,CAAC"}
@@ -14,21 +14,21 @@ export const ButtonSecondary = forwardRef(({ className, isDanger, isInverse, isD
14
14
  // Default secondary styles
15
15
  !isDanger &&
16
16
  !isInverse && [
17
- 'bg-transparent border-2 border-icon-muted text-default',
17
+ 'bg-muted text-default',
18
18
  // Loading state uses pressed color
19
- isLoading && 'bg-pressed',
19
+ isLoading && 'bg-muted-pressed',
20
20
  ],
21
21
  // Danger styles
22
22
  isDanger &&
23
23
  !isInverse && [
24
- 'bg-transparent border-2 border-error-default text-error-default',
25
- // Loading state uses error muted pressed color
26
- isLoading && 'bg-error-muted-pressed text-error-default-pressed',
24
+ 'bg-muted text-error-default',
25
+ // Loading state uses pressed color
26
+ isLoading && 'bg-muted-pressed',
27
27
  ],
28
28
  // Inverse styles
29
29
  isInverse &&
30
30
  !isDanger && [
31
- 'bg-transparent border-2 border-primary-inverse text-primary-inverse',
31
+ 'border-2 border-primary-inverse bg-transparent text-primary-inverse',
32
32
  // Loading state uses pressed color
33
33
  isLoading && 'bg-pressed',
34
34
  ],
@@ -41,16 +41,16 @@ export const ButtonSecondary = forwardRef(({ className, isDanger, isInverse, isD
41
41
  ],
42
42
  // Hover/Active states - only applied when interactive
43
43
  isInteractive && [
44
- !isDanger && !isInverse && ['hover:bg-hover', 'active:bg-pressed'],
44
+ !isDanger &&
45
+ !isInverse && ['hover:bg-muted-hover', 'active:bg-muted-pressed'],
45
46
  isDanger &&
46
- !isInverse && [
47
- 'hover:bg-error-muted-hover',
48
- 'active:bg-error-muted-pressed',
49
- ],
47
+ !isInverse && ['hover:bg-muted-hover', 'active:bg-muted-pressed'],
50
48
  isInverse && !isDanger && ['hover:bg-hover', 'active:bg-pressed'],
51
49
  isInverse &&
52
50
  isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],
53
- ],
51
+ ], 'focus-visible:outline-none focus-visible:ring-0', isInverse
52
+ ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'
53
+ : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',
54
54
  // Loading styles
55
55
  isLoading && 'cursor-not-allowed',
56
56
  // Disabled styles (but not loading)
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonSecondary.mjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,uCAAmC;AACrD,OAAO,EAAE,UAAU,EAAE,sCAA4B;AAIjD,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CAIvC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,OAAO;IAC7B,2BAA2B;IAC3B,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,wDAAwD;QACxD,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,iEAAiE;QACjE,+CAA+C;QAC/C,SAAS,IAAI,mDAAmD;KACjE;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,qEAAqE;QACrE,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,wCAAwC;QACxC,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,gBAAgB,EAAE,mBAAmB,CAAC;QAClE,QAAQ;YACN,CAAC,SAAS,IAAI;YACZ,4BAA4B;YAC5B,+BAA+B;SAChC;QACH,SAAS,IAAI,CAAC,QAAQ,IAAI,CAAC,gBAAgB,EAAE,mBAAmB,CAAC;QACjE,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;KACtE;IACD,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../../../utils/tw-merge';\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonSecondaryProps } from './ButtonSecondary.types';\n\nexport const ButtonSecondary = forwardRef<\n HTMLButtonElement,\n ButtonSecondaryProps\n>(\n (\n { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n ref,\n ) => {\n const isInteractive = !(isDisabled ?? isLoading);\n\n const mergedClassName = twMerge(\n // Default secondary styles\n !isDanger &&\n !isInverse && [\n 'bg-transparent border-2 border-icon-muted text-default',\n // Loading state uses pressed color\n isLoading && 'bg-pressed',\n ],\n // Danger styles\n isDanger &&\n !isInverse && [\n 'bg-transparent border-2 border-error-default text-error-default',\n // Loading state uses error muted pressed color\n isLoading && 'bg-error-muted-pressed text-error-default-pressed',\n ],\n // Inverse styles\n isInverse &&\n !isDanger && [\n 'bg-transparent border-2 border-primary-inverse text-primary-inverse',\n // Loading state uses pressed color\n isLoading && 'bg-pressed',\n ],\n // Inverse danger styles\n isInverse &&\n isDanger && [\n 'border-0 bg-default text-error-default',\n // Loading state uses pressed color\n isLoading && 'bg-default-pressed',\n ],\n // Hover/Active states - only applied when interactive\n isInteractive && [\n !isDanger && !isInverse && ['hover:bg-hover', 'active:bg-pressed'],\n isDanger &&\n !isInverse && [\n 'hover:bg-error-muted-hover',\n 'active:bg-error-muted-pressed',\n ],\n isInverse && !isDanger && ['hover:bg-hover', 'active:bg-pressed'],\n isInverse &&\n isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n ],\n // Loading styles\n isLoading && 'cursor-not-allowed',\n // Disabled styles (but not loading)\n isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n className,\n );\n\n return (\n <ButtonBase\n ref={ref}\n className={mergedClassName}\n isDisabled={isDisabled}\n isLoading={isLoading}\n {...props}\n />\n );\n },\n);\n\nButtonSecondary.displayName = 'ButtonSecondary';\n"]}
1
+ {"version":3,"file":"ButtonSecondary.mjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,uCAAmC;AACrD,OAAO,EAAE,UAAU,EAAE,sCAA4B;AAIjD,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CAIvC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,OAAO;IAC7B,2BAA2B;IAC3B,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,uBAAuB;QACvB,mCAAmC;QACnC,SAAS,IAAI,kBAAkB;KAChC;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,6BAA6B;QAC7B,mCAAmC;QACnC,SAAS,IAAI,kBAAkB;KAChC;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,qEAAqE;QACrE,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,wCAAwC;QACxC,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,CAAC,QAAQ;YACP,CAAC,SAAS,IAAI,CAAC,sBAAsB,EAAE,yBAAyB,CAAC;QACnE,QAAQ;YACN,CAAC,SAAS,IAAI,CAAC,sBAAsB,EAAE,yBAAyB,CAAC;QACnE,SAAS,IAAI,CAAC,QAAQ,IAAI,CAAC,gBAAgB,EAAE,mBAAmB,CAAC;QACjE,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;KACtE,EACD,iDAAiD,EACjD,SAAS;QACP,CAAC,CAAC,uHAAuH;QACzH,CAAC,CAAC,oHAAoH;IACxH,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../../../utils/tw-merge';\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonSecondaryProps } from './ButtonSecondary.types';\n\nexport const ButtonSecondary = forwardRef<\n HTMLButtonElement,\n ButtonSecondaryProps\n>(\n (\n { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n ref,\n ) => {\n const isInteractive = !(isDisabled ?? isLoading);\n\n const mergedClassName = twMerge(\n // Default secondary styles\n !isDanger &&\n !isInverse && [\n 'bg-muted text-default',\n // Loading state uses pressed color\n isLoading && 'bg-muted-pressed',\n ],\n // Danger styles\n isDanger &&\n !isInverse && [\n 'bg-muted text-error-default',\n // Loading state uses pressed color\n isLoading && 'bg-muted-pressed',\n ],\n // Inverse styles\n isInverse &&\n !isDanger && [\n 'border-2 border-primary-inverse bg-transparent text-primary-inverse',\n // Loading state uses pressed color\n isLoading && 'bg-pressed',\n ],\n // Inverse danger styles\n isInverse &&\n isDanger && [\n 'border-0 bg-default text-error-default',\n // Loading state uses pressed color\n isLoading && 'bg-default-pressed',\n ],\n // Hover/Active states - only applied when interactive\n isInteractive && [\n !isDanger &&\n !isInverse && ['hover:bg-muted-hover', 'active:bg-muted-pressed'],\n isDanger &&\n !isInverse && ['hover:bg-muted-hover', 'active:bg-muted-pressed'],\n isInverse && !isDanger && ['hover:bg-hover', 'active:bg-pressed'],\n isInverse &&\n isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n ],\n 'focus-visible:outline-none focus-visible:ring-0',\n isInverse\n ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'\n : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n // Loading styles\n isLoading && 'cursor-not-allowed',\n // Disabled styles (but not loading)\n isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n className,\n );\n\n return (\n <ButtonBase\n ref={ref}\n className={mergedClassName}\n isDisabled={isDisabled}\n isLoading={isLoading}\n {...props}\n />\n );\n },\n);\n\nButtonSecondary.displayName = 'ButtonSecondary';\n"]}
@@ -69,7 +69,9 @@ exports.ButtonTertiary = (0, react_1.forwardRef)(({ className, isDanger, isInver
69
69
  'hover:bg-error-muted-hover',
70
70
  'active:bg-error-muted-pressed',
71
71
  ],
72
- ],
72
+ ], 'focus-visible:outline-none focus-visible:ring-0', isInverse
73
+ ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'
74
+ : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',
73
75
  // Loading styles
74
76
  isLoading && 'cursor-not-allowed',
75
77
  // Disabled styles (but not loading)
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonTertiary.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,6DAAqD;AACrD,8DAAiD;AAIpC,QAAA,cAAc,GAAG,IAAA,kBAAU,EAItC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,0BAA0B;IAC1B,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,mCAAmC;QACnC,+CAA+C;QAC/C,SAAS,IAAI,mDAAmD;KACjE;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,+BAA+B;QAC/B,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,gBAAgB;QAChB,mBAAmB;QACnB,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;QACrE,QAAQ;YACN,CAAC,SAAS,IAAI;YACZ,4BAA4B;YAC5B,+BAA+B;SAChC;KACJ;IACD,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../../../utils/tw-merge';\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonTertiaryProps } from './ButtonTertiary.types';\n\nexport const ButtonTertiary = forwardRef<\n HTMLButtonElement,\n ButtonTertiaryProps\n>(\n (\n { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n ref,\n ) => {\n const isInteractive = !(isDisabled ?? isLoading);\n\n const mergedClassName = twMerge(\n // Default tertiary styles\n !isDanger &&\n !isInverse && [\n 'bg-transparent text-primary-default',\n // Loading state uses pressed color\n isLoading && 'bg-pressed',\n ],\n // Danger styles\n isDanger &&\n !isInverse && [\n 'bg-transparent text-error-default',\n // Loading state uses error muted pressed color\n isLoading && 'bg-error-muted-pressed text-error-default-pressed',\n ],\n // Inverse styles\n isInverse &&\n !isDanger && [\n 'bg-transparent text-primary-inverse',\n // Loading state uses pressed color\n isLoading && 'bg-pressed',\n ],\n // Inverse danger styles\n isInverse &&\n isDanger && [\n 'bg-default text-error-default',\n // Loading state uses pressed color\n isLoading && 'bg-default-pressed',\n ],\n // Hover/Active states - only applied when interactive\n isInteractive && [\n 'hover:bg-hover',\n 'active:bg-pressed',\n isInverse &&\n isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n isDanger &&\n !isInverse && [\n 'hover:bg-error-muted-hover',\n 'active:bg-error-muted-pressed',\n ],\n ],\n // Loading styles\n isLoading && 'cursor-not-allowed',\n // Disabled styles (but not loading)\n isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n className,\n );\n\n return (\n <ButtonBase\n ref={ref}\n className={mergedClassName}\n isDisabled={isDisabled}\n isLoading={isLoading}\n {...props}\n />\n );\n },\n);\n\nButtonTertiary.displayName = 'ButtonTertiary';\n"]}
1
+ {"version":3,"file":"ButtonTertiary.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,6DAAqD;AACrD,8DAAiD;AAIpC,QAAA,cAAc,GAAG,IAAA,kBAAU,EAItC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,0BAA0B;IAC1B,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,mCAAmC;QACnC,+CAA+C;QAC/C,SAAS,IAAI,mDAAmD;KACjE;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,+BAA+B;QAC/B,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,gBAAgB;QAChB,mBAAmB;QACnB,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;QACrE,QAAQ;YACN,CAAC,SAAS,IAAI;YACZ,4BAA4B;YAC5B,+BAA+B;SAChC;KACJ,EACD,iDAAiD,EACjD,SAAS;QACP,CAAC,CAAC,uHAAuH;QACzH,CAAC,CAAC,oHAAoH;IACxH,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../../../utils/tw-merge';\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonTertiaryProps } from './ButtonTertiary.types';\n\nexport const ButtonTertiary = forwardRef<\n HTMLButtonElement,\n ButtonTertiaryProps\n>(\n (\n { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n ref,\n ) => {\n const isInteractive = !(isDisabled ?? isLoading);\n\n const mergedClassName = twMerge(\n // Default tertiary styles\n !isDanger &&\n !isInverse && [\n 'bg-transparent text-primary-default',\n // Loading state uses pressed color\n isLoading && 'bg-pressed',\n ],\n // Danger styles\n isDanger &&\n !isInverse && [\n 'bg-transparent text-error-default',\n // Loading state uses error muted pressed color\n isLoading && 'bg-error-muted-pressed text-error-default-pressed',\n ],\n // Inverse styles\n isInverse &&\n !isDanger && [\n 'bg-transparent text-primary-inverse',\n // Loading state uses pressed color\n isLoading && 'bg-pressed',\n ],\n // Inverse danger styles\n isInverse &&\n isDanger && [\n 'bg-default text-error-default',\n // Loading state uses pressed color\n isLoading && 'bg-default-pressed',\n ],\n // Hover/Active states - only applied when interactive\n isInteractive && [\n 'hover:bg-hover',\n 'active:bg-pressed',\n isInverse &&\n isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n isDanger &&\n !isInverse && [\n 'hover:bg-error-muted-hover',\n 'active:bg-error-muted-pressed',\n ],\n ],\n 'focus-visible:outline-none focus-visible:ring-0',\n isInverse\n ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'\n : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n // Loading styles\n isLoading && 'cursor-not-allowed',\n // Disabled styles (but not loading)\n isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n className,\n );\n\n return (\n <ButtonBase\n ref={ref}\n className={mergedClassName}\n isDisabled={isDisabled}\n isLoading={isLoading}\n {...props}\n />\n );\n },\n);\n\nButtonTertiary.displayName = 'ButtonTertiary';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonTertiary.d.cts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAK1C,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAElE,eAAO,MAAM,cAAc,4GAoE1B,CAAC"}
1
+ {"version":3,"file":"ButtonTertiary.d.cts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAK1C,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAElE,eAAO,MAAM,cAAc,4GAwE1B,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonTertiary.d.mts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAK1C,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAElE,eAAO,MAAM,cAAc,4GAoE1B,CAAC"}
1
+ {"version":3,"file":"ButtonTertiary.d.mts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAK1C,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAElE,eAAO,MAAM,cAAc,4GAwE1B,CAAC"}
@@ -50,7 +50,9 @@ export const ButtonTertiary = forwardRef(({ className, isDanger, isInverse, isDi
50
50
  'hover:bg-error-muted-hover',
51
51
  'active:bg-error-muted-pressed',
52
52
  ],
53
- ],
53
+ ], 'focus-visible:outline-none focus-visible:ring-0', isInverse
54
+ ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'
55
+ : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',
54
56
  // Loading styles
55
57
  isLoading && 'cursor-not-allowed',
56
58
  // Disabled styles (but not loading)
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonTertiary.mjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,uCAAmC;AACrD,OAAO,EAAE,UAAU,EAAE,sCAA4B;AAIjD,MAAM,CAAC,MAAM,cAAc,GAAG,UAAU,CAItC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,OAAO;IAC7B,0BAA0B;IAC1B,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,mCAAmC;QACnC,+CAA+C;QAC/C,SAAS,IAAI,mDAAmD;KACjE;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,+BAA+B;QAC/B,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,gBAAgB;QAChB,mBAAmB;QACnB,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;QACrE,QAAQ;YACN,CAAC,SAAS,IAAI;YACZ,4BAA4B;YAC5B,+BAA+B;SAChC;KACJ;IACD,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../../../utils/tw-merge';\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonTertiaryProps } from './ButtonTertiary.types';\n\nexport const ButtonTertiary = forwardRef<\n HTMLButtonElement,\n ButtonTertiaryProps\n>(\n (\n { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n ref,\n ) => {\n const isInteractive = !(isDisabled ?? isLoading);\n\n const mergedClassName = twMerge(\n // Default tertiary styles\n !isDanger &&\n !isInverse && [\n 'bg-transparent text-primary-default',\n // Loading state uses pressed color\n isLoading && 'bg-pressed',\n ],\n // Danger styles\n isDanger &&\n !isInverse && [\n 'bg-transparent text-error-default',\n // Loading state uses error muted pressed color\n isLoading && 'bg-error-muted-pressed text-error-default-pressed',\n ],\n // Inverse styles\n isInverse &&\n !isDanger && [\n 'bg-transparent text-primary-inverse',\n // Loading state uses pressed color\n isLoading && 'bg-pressed',\n ],\n // Inverse danger styles\n isInverse &&\n isDanger && [\n 'bg-default text-error-default',\n // Loading state uses pressed color\n isLoading && 'bg-default-pressed',\n ],\n // Hover/Active states - only applied when interactive\n isInteractive && [\n 'hover:bg-hover',\n 'active:bg-pressed',\n isInverse &&\n isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n isDanger &&\n !isInverse && [\n 'hover:bg-error-muted-hover',\n 'active:bg-error-muted-pressed',\n ],\n ],\n // Loading styles\n isLoading && 'cursor-not-allowed',\n // Disabled styles (but not loading)\n isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n className,\n );\n\n return (\n <ButtonBase\n ref={ref}\n className={mergedClassName}\n isDisabled={isDisabled}\n isLoading={isLoading}\n {...props}\n />\n );\n },\n);\n\nButtonTertiary.displayName = 'ButtonTertiary';\n"]}
1
+ {"version":3,"file":"ButtonTertiary.mjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,uCAAmC;AACrD,OAAO,EAAE,UAAU,EAAE,sCAA4B;AAIjD,MAAM,CAAC,MAAM,cAAc,GAAG,UAAU,CAItC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,OAAO;IAC7B,0BAA0B;IAC1B,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,mCAAmC;QACnC,+CAA+C;QAC/C,SAAS,IAAI,mDAAmD;KACjE;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,+BAA+B;QAC/B,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,gBAAgB;QAChB,mBAAmB;QACnB,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;QACrE,QAAQ;YACN,CAAC,SAAS,IAAI;YACZ,4BAA4B;YAC5B,+BAA+B;SAChC;KACJ,EACD,iDAAiD,EACjD,SAAS;QACP,CAAC,CAAC,uHAAuH;QACzH,CAAC,CAAC,oHAAoH;IACxH,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../../../utils/tw-merge';\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonTertiaryProps } from './ButtonTertiary.types';\n\nexport const ButtonTertiary = forwardRef<\n HTMLButtonElement,\n ButtonTertiaryProps\n>(\n (\n { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n ref,\n ) => {\n const isInteractive = !(isDisabled ?? isLoading);\n\n const mergedClassName = twMerge(\n // Default tertiary styles\n !isDanger &&\n !isInverse && [\n 'bg-transparent text-primary-default',\n // Loading state uses pressed color\n isLoading && 'bg-pressed',\n ],\n // Danger styles\n isDanger &&\n !isInverse && [\n 'bg-transparent text-error-default',\n // Loading state uses error muted pressed color\n isLoading && 'bg-error-muted-pressed text-error-default-pressed',\n ],\n // Inverse styles\n isInverse &&\n !isDanger && [\n 'bg-transparent text-primary-inverse',\n // Loading state uses pressed color\n isLoading && 'bg-pressed',\n ],\n // Inverse danger styles\n isInverse &&\n isDanger && [\n 'bg-default text-error-default',\n // Loading state uses pressed color\n isLoading && 'bg-default-pressed',\n ],\n // Hover/Active states - only applied when interactive\n isInteractive && [\n 'hover:bg-hover',\n 'active:bg-pressed',\n isInverse &&\n isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n isDanger &&\n !isInverse && [\n 'hover:bg-error-muted-hover',\n 'active:bg-error-muted-pressed',\n ],\n ],\n 'focus-visible:outline-none focus-visible:ring-0',\n isInverse\n ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'\n : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n // Loading styles\n isLoading && 'cursor-not-allowed',\n // Disabled styles (but not loading)\n isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n className,\n );\n\n return (\n <ButtonBase\n ref={ref}\n className={mergedClassName}\n isDisabled={isDisabled}\n isLoading={isLoading}\n {...props}\n />\n );\n },\n);\n\nButtonTertiary.displayName = 'ButtonTertiary';\n"]}
@@ -31,30 +31,38 @@ const tw_merge_1 = require("../../utils/tw-merge.cjs");
31
31
  const Icon_1 = require("../Icon/index.cjs");
32
32
  const Text_1 = require("../Text/index.cjs");
33
33
  const ButtonBase_constants_1 = require("./ButtonBase.constants.cjs");
34
- exports.ButtonBase = (0, react_1.forwardRef)(({ children, className, size = types_1.ButtonBaseSize.Lg, isFullWidth, asChild, isDisabled, isLoading, loadingText, loadingIconProps, loadingTextProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, textProps, style, ...props }, ref) => {
34
+ exports.ButtonBase = (0, react_1.forwardRef)(({ children, className, size = types_1.ButtonBaseSize.Lg, isFullWidth, asChild, isDisabled, isLoading, loadingText, loadingIconProps, loadingTextProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, textProps, style, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-pressed': ariaPressed, 'aria-expanded': ariaExpanded, 'aria-controls': ariaControls, 'aria-haspopup': ariaHaspopup, ...props }, ref) => {
35
35
  const Component = asChild ? react_slot_1.Slot : 'button';
36
36
  const isInteractive = !(isDisabled ?? isLoading);
37
+ // Calculate tabIndex based on asChild and disabled state
38
+ const getTabIndex = () => {
39
+ if (asChild) {
40
+ return undefined;
41
+ }
42
+ return isDisabled ? -1 : undefined;
43
+ };
37
44
  const renderLoadingState = () => (react_1.default.createElement(react_1.default.Fragment, null,
38
- react_1.default.createElement("span", { className: "absolute inline-flex items-center" },
39
- react_1.default.createElement(Icon_1.Icon, { name: Icon_1.IconName.Loading, size: Icon_1.IconSize.Sm, className: (0, tw_merge_1.twMerge)('text-inherit mr-2 animate-spin', loadingIconProps?.className), ...loadingIconProps }),
45
+ react_1.default.createElement("span", { className: "absolute inline-flex items-center", "aria-hidden": "true" },
46
+ react_1.default.createElement(Icon_1.Icon, { name: Icon_1.IconName.Loading, size: Icon_1.IconSize.Sm, className: (0, tw_merge_1.twMerge)('mr-2 animate-spin text-inherit', loadingIconProps?.className), ...loadingIconProps }),
40
47
  react_1.default.createElement(Text_1.Text, { fontWeight: Text_1.FontWeight.Medium, color: Text_1.TextColor.Inherit, asChild: true, ...loadingTextProps },
41
48
  react_1.default.createElement("span", null, loadingText))),
42
- react_1.default.createElement("span", { className: "invisible inline-flex items-center" }, children)));
49
+ react_1.default.createElement("span", { className: "invisible inline-flex items-center" }, children),
50
+ react_1.default.createElement("span", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, loadingText || 'Loading')));
43
51
  const renderStartContent = () => {
44
52
  if (startIconName) {
45
- return (react_1.default.createElement(Icon_1.Icon, { name: startIconName, size: Icon_1.IconSize.Sm, className: (0, tw_merge_1.twMerge)('text-inherit mr-2 flex-shrink-0', startIconProps?.className), ...startIconProps }));
53
+ return (react_1.default.createElement(Icon_1.Icon, { name: startIconName, size: Icon_1.IconSize.Sm, className: (0, tw_merge_1.twMerge)('mr-2 shrink-0 text-inherit', startIconProps?.className), "aria-hidden": "true", ...startIconProps }));
46
54
  }
47
55
  if (startAccessory) {
48
- return react_1.default.createElement("span", { className: "mr-2" }, startAccessory);
56
+ return (react_1.default.createElement("span", { className: "mr-2", "aria-hidden": "true" }, startAccessory));
49
57
  }
50
58
  return null;
51
59
  };
52
60
  const renderEndContent = () => {
53
61
  if (endIconName) {
54
- return (react_1.default.createElement(Icon_1.Icon, { name: endIconName, size: Icon_1.IconSize.Sm, className: (0, tw_merge_1.twMerge)('text-inherit ml-2 flex-shrink-0', endIconProps?.className), ...endIconProps }));
62
+ return (react_1.default.createElement(Icon_1.Icon, { name: endIconName, size: Icon_1.IconSize.Sm, className: (0, tw_merge_1.twMerge)('ml-2 shrink-0 text-inherit', endIconProps?.className), "aria-hidden": "true", ...endIconProps }));
55
63
  }
56
64
  if (endAccessory) {
57
- return react_1.default.createElement("span", { className: "ml-2" }, endAccessory);
65
+ return (react_1.default.createElement("span", { className: "ml-2", "aria-hidden": "true" }, endAccessory));
58
66
  }
59
67
  return null;
60
68
  };
@@ -67,16 +75,16 @@ exports.ButtonBase = (0, react_1.forwardRef)(({ children, className, size = type
67
75
  };
68
76
  const mergedClassName = (0, tw_merge_1.twMerge)(
69
77
  // Base styles
70
- 'inline-flex items-center justify-center', 'rounded-full px-4', 'font-medium text-default', 'bg-muted', 'min-w-[80px] overflow-hidden',
78
+ 'inline-flex items-center justify-center', 'rounded-xl px-4', 'font-medium text-default', 'bg-muted', 'min-w-20 overflow-hidden',
71
79
  // Add relative positioning for loading state
72
80
  'relative',
73
81
  // Size
74
- ButtonBase_constants_1.BUTTON_BASE_SIZE_CLASS_MAP[size],
82
+ ButtonBase_constants_1.TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],
75
83
  // Full width
76
84
  isFullWidth && 'w-full',
77
85
  // Animation classes - only applied when interactive
78
86
  isInteractive && [
79
- 'transition-[transform,colors,opacity]',
87
+ 'transition-all',
80
88
  'duration-100',
81
89
  'ease-linear',
82
90
  'active:scale-[0.97]',
@@ -86,7 +94,7 @@ exports.ButtonBase = (0, react_1.forwardRef)(({ children, className, size = type
86
94
  (isDisabled || isLoading) && 'cursor-not-allowed', isDisabled && 'opacity-50',
87
95
  // Custom classes
88
96
  className);
89
- return (react_1.default.createElement(Component, { ref: ref, className: mergedClassName, disabled: asChild ? undefined : (isDisabled ?? isLoading), style: style, ...props },
97
+ return (react_1.default.createElement(Component, { ref: ref, className: mergedClassName, disabled: asChild ? undefined : (isDisabled ?? isLoading), "aria-disabled": isDisabled ? 'true' : undefined, "aria-busy": isLoading ? 'true' : undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-pressed": ariaPressed, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-haspopup": ariaHaspopup, role: asChild ? undefined : 'button', tabIndex: getTabIndex(), style: style, ...props },
90
98
  renderStartContent(),
91
99
  react_1.default.createElement(react_slot_1.Slottable, null, isLoading ? renderLoadingState() : renderContent()),
92
100
  renderEndContent()));
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonBase.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Slot, Slottable } from '@radix-ui/react-slot';\nimport React, { forwardRef } from 'react';\n\nimport { ButtonBaseSize } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon, IconName, IconSize } from '../Icon';\nimport { Text, FontWeight, TextColor } from '../Text';\n\nimport { BUTTON_BASE_SIZE_CLASS_MAP } from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = forwardRef<HTMLButtonElement, ButtonBaseProps>(\n (\n {\n children,\n className,\n size = ButtonBaseSize.Lg,\n isFullWidth,\n asChild,\n isDisabled,\n isLoading,\n loadingText,\n loadingIconProps,\n loadingTextProps,\n startIconName,\n startIconProps,\n startAccessory,\n endIconName,\n endIconProps,\n endAccessory,\n textProps,\n style,\n ...props\n },\n ref,\n ) => {\n const Component = asChild ? Slot : 'button';\n const isInteractive = !(isDisabled ?? isLoading);\n\n const renderLoadingState = () => (\n <>\n <span className=\"absolute inline-flex items-center\">\n <Icon\n name={IconName.Loading}\n size={IconSize.Sm}\n className={twMerge(\n 'text-inherit mr-2 animate-spin',\n loadingIconProps?.className,\n )}\n {...loadingIconProps}\n />\n <Text\n fontWeight={FontWeight.Medium}\n color={TextColor.Inherit}\n asChild\n {...loadingTextProps}\n >\n <span>{loadingText}</span>\n </Text>\n </span>\n <span className=\"invisible inline-flex items-center\">{children}</span>\n </>\n );\n\n const renderStartContent = () => {\n if (startIconName) {\n return (\n <Icon\n name={startIconName}\n size={IconSize.Sm}\n className={twMerge(\n 'text-inherit mr-2 flex-shrink-0',\n startIconProps?.className,\n )}\n {...startIconProps}\n />\n );\n }\n if (startAccessory) {\n return <span className=\"mr-2\">{startAccessory}</span>;\n }\n return null;\n };\n\n const renderEndContent = () => {\n if (endIconName) {\n return (\n <Icon\n name={endIconName}\n size={IconSize.Sm}\n className={twMerge(\n 'text-inherit ml-2 flex-shrink-0',\n endIconProps?.className,\n )}\n {...endIconProps}\n />\n );\n }\n if (endAccessory) {\n return <span className=\"ml-2\">{endAccessory}</span>;\n }\n return null;\n };\n\n const renderContent = () => {\n if (children && typeof children === 'string') {\n return (\n <Text\n fontWeight={FontWeight.Medium}\n color={TextColor.Inherit}\n asChild\n {...textProps}\n >\n <span>{children}</span>\n </Text>\n );\n }\n return children;\n };\n\n const mergedClassName = twMerge(\n // Base styles\n 'inline-flex items-center justify-center',\n 'rounded-full px-4',\n 'font-medium text-default',\n 'bg-muted',\n 'min-w-[80px] overflow-hidden',\n // Add relative positioning for loading state\n 'relative',\n // Size\n BUTTON_BASE_SIZE_CLASS_MAP[size],\n // Full width\n isFullWidth && 'w-full',\n // Animation classes - only applied when interactive\n isInteractive && [\n 'transition-[transform,colors,opacity]',\n 'duration-100',\n 'ease-linear',\n 'active:scale-[0.97]',\n 'active:ease-[cubic-bezier(0.3,0.8,0.3,1)]',\n ],\n // Disabled state - apply to both isDisabled and isLoading\n (isDisabled || isLoading) && 'cursor-not-allowed',\n isDisabled && 'opacity-50',\n // Custom classes\n className,\n );\n\n return (\n <Component\n ref={ref}\n className={mergedClassName}\n disabled={asChild ? undefined : (isDisabled ?? isLoading)}\n style={style}\n {...props}\n >\n {renderStartContent()}\n <Slottable>\n {isLoading ? renderLoadingState() : renderContent()}\n </Slottable>\n {renderEndContent()}\n </Component>\n );\n },\n);\n\nButtonBase.displayName = 'ButtonBase';\n"]}
1
+ {"version":3,"file":"ButtonBase.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Slot, Slottable } from '@radix-ui/react-slot';\nimport React, { forwardRef } from 'react';\n\nimport { ButtonBaseSize } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon, IconName, IconSize } from '../Icon';\nimport { Text, FontWeight, TextColor } from '../Text';\n\nimport { TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = forwardRef<HTMLButtonElement, ButtonBaseProps>(\n (\n {\n children,\n className,\n size = ButtonBaseSize.Lg,\n isFullWidth,\n asChild,\n isDisabled,\n isLoading,\n loadingText,\n loadingIconProps,\n loadingTextProps,\n startIconName,\n startIconProps,\n startAccessory,\n endIconName,\n endIconProps,\n endAccessory,\n textProps,\n style,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n 'aria-pressed': ariaPressed,\n 'aria-expanded': ariaExpanded,\n 'aria-controls': ariaControls,\n 'aria-haspopup': ariaHaspopup,\n ...props\n },\n ref,\n ) => {\n const Component = asChild ? Slot : 'button';\n const isInteractive = !(isDisabled ?? isLoading);\n\n // Calculate tabIndex based on asChild and disabled state\n const getTabIndex = () => {\n if (asChild) {\n return undefined;\n }\n return isDisabled ? -1 : undefined;\n };\n\n const renderLoadingState = () => (\n <>\n <span className=\"absolute inline-flex items-center\" aria-hidden=\"true\">\n <Icon\n name={IconName.Loading}\n size={IconSize.Sm}\n className={twMerge(\n 'mr-2 animate-spin text-inherit',\n loadingIconProps?.className,\n )}\n {...loadingIconProps}\n />\n <Text\n fontWeight={FontWeight.Medium}\n color={TextColor.Inherit}\n asChild\n {...loadingTextProps}\n >\n <span>{loadingText}</span>\n </Text>\n </span>\n <span className=\"invisible inline-flex items-center\">{children}</span>\n {/* Screen reader announcement for loading */}\n <span className=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n {loadingText || 'Loading'}\n </span>\n </>\n );\n\n const renderStartContent = () => {\n if (startIconName) {\n return (\n <Icon\n name={startIconName}\n size={IconSize.Sm}\n className={twMerge(\n 'mr-2 shrink-0 text-inherit',\n startIconProps?.className,\n )}\n aria-hidden=\"true\"\n {...startIconProps}\n />\n );\n }\n if (startAccessory) {\n return (\n <span className=\"mr-2\" aria-hidden=\"true\">\n {startAccessory}\n </span>\n );\n }\n return null;\n };\n\n const renderEndContent = () => {\n if (endIconName) {\n return (\n <Icon\n name={endIconName}\n size={IconSize.Sm}\n className={twMerge(\n 'ml-2 shrink-0 text-inherit',\n endIconProps?.className,\n )}\n aria-hidden=\"true\"\n {...endIconProps}\n />\n );\n }\n if (endAccessory) {\n return (\n <span className=\"ml-2\" aria-hidden=\"true\">\n {endAccessory}\n </span>\n );\n }\n return null;\n };\n\n const renderContent = () => {\n if (children && typeof children === 'string') {\n return (\n <Text\n fontWeight={FontWeight.Medium}\n color={TextColor.Inherit}\n asChild\n {...textProps}\n >\n <span>{children}</span>\n </Text>\n );\n }\n return children;\n };\n\n const mergedClassName = twMerge(\n // Base styles\n 'inline-flex items-center justify-center',\n 'rounded-xl px-4',\n 'font-medium text-default',\n 'bg-muted',\n 'min-w-20 overflow-hidden',\n // Add relative positioning for loading state\n 'relative',\n // Size\n TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],\n // Full width\n isFullWidth && 'w-full',\n // Animation classes - only applied when interactive\n isInteractive && [\n 'transition-all',\n 'duration-100',\n 'ease-linear',\n 'active:scale-[0.97]',\n 'active:ease-[cubic-bezier(0.3,0.8,0.3,1)]',\n ],\n // Disabled state - apply to both isDisabled and isLoading\n (isDisabled || isLoading) && 'cursor-not-allowed',\n isDisabled && 'opacity-50',\n // Custom classes\n className,\n );\n\n return (\n <Component\n ref={ref}\n className={mergedClassName}\n disabled={asChild ? undefined : (isDisabled ?? isLoading)}\n aria-disabled={isDisabled ? 'true' : undefined}\n aria-busy={isLoading ? 'true' : undefined}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n aria-pressed={ariaPressed}\n aria-expanded={ariaExpanded}\n aria-controls={ariaControls}\n aria-haspopup={ariaHaspopup}\n role={asChild ? undefined : 'button'}\n tabIndex={getTabIndex()}\n style={style}\n {...props}\n >\n {renderStartContent()}\n <Slottable>\n {isLoading ? renderLoadingState() : renderContent()}\n </Slottable>\n {renderEndContent()}\n </Component>\n );\n },\n);\n\nButtonBase.displayName = 'ButtonBase';\n"]}
@@ -1,8 +1,8 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.BUTTON_BASE_SIZE_CLASS_MAP = void 0;
3
+ exports.TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION = void 0;
4
4
  const types_1 = require("../../types/index.cjs");
5
- exports.BUTTON_BASE_SIZE_CLASS_MAP = {
5
+ exports.TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION = {
6
6
  [types_1.ButtonBaseSize.Sm]: 'h-8',
7
7
  [types_1.ButtonBaseSize.Md]: 'h-10',
8
8
  [types_1.ButtonBaseSize.Lg]: 'h-12', // size (48px).
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonBase.constants.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":";;;AAAA,iDAA6C;AAEhC,QAAA,0BAA0B,GAAmC;IACxE,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,KAAK;IAC1B,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,MAAM;IAC3B,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,eAAe;CAC7C,CAAC","sourcesContent":["import { ButtonBaseSize } from '../../types';\n\nexport const BUTTON_BASE_SIZE_CLASS_MAP: Record<ButtonBaseSize, string> = {\n [ButtonBaseSize.Sm]: 'h-8', // size (32px).\n [ButtonBaseSize.Md]: 'h-10', // size (40px).\n [ButtonBaseSize.Lg]: 'h-12', // size (48px).\n};\n"]}
1
+ {"version":3,"file":"ButtonBase.constants.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":";;;AAAA,iDAA6C;AAEhC,QAAA,oCAAoC,GAG7C;IACF,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,KAAK;IAC1B,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,MAAM;IAC3B,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,eAAe;CAC7C,CAAC","sourcesContent":["import { ButtonBaseSize } from '../../types';\n\nexport const TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION: Record<\n ButtonBaseSize,\n string\n> = {\n [ButtonBaseSize.Sm]: 'h-8', // size (32px).\n [ButtonBaseSize.Md]: 'h-10', // size (40px).\n [ButtonBaseSize.Lg]: 'h-12', // size (48px).\n};\n"]}
@@ -1,3 +1,3 @@
1
1
  import { ButtonBaseSize } from "../../types/index.cjs";
2
- export declare const BUTTON_BASE_SIZE_CLASS_MAP: Record<ButtonBaseSize, string>;
2
+ export declare const TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION: Record<ButtonBaseSize, string>;
3
3
  //# sourceMappingURL=ButtonBase.constants.d.cts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonBase.constants.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAE7C,eAAO,MAAM,0BAA0B,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAIrE,CAAC"}
1
+ {"version":3,"file":"ButtonBase.constants.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAE7C,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,cAAc,EACd,MAAM,CAKP,CAAC"}
@@ -1,3 +1,3 @@
1
1
  import { ButtonBaseSize } from "../../types/index.mjs";
2
- export declare const BUTTON_BASE_SIZE_CLASS_MAP: Record<ButtonBaseSize, string>;
2
+ export declare const TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION: Record<ButtonBaseSize, string>;
3
3
  //# sourceMappingURL=ButtonBase.constants.d.mts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonBase.constants.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAE7C,eAAO,MAAM,0BAA0B,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAIrE,CAAC"}
1
+ {"version":3,"file":"ButtonBase.constants.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAE7C,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,cAAc,EACd,MAAM,CAKP,CAAC"}
@@ -1,5 +1,5 @@
1
1
  import { ButtonBaseSize } from "../../types/index.mjs";
2
- export const BUTTON_BASE_SIZE_CLASS_MAP = {
2
+ export const TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION = {
3
3
  [ButtonBaseSize.Sm]: 'h-8',
4
4
  [ButtonBaseSize.Md]: 'h-10',
5
5
  [ButtonBaseSize.Lg]: 'h-12', // size (48px).
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonBase.constants.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAE7C,MAAM,CAAC,MAAM,0BAA0B,GAAmC;IACxE,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,KAAK;IAC1B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,MAAM;IAC3B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,eAAe;CAC7C,CAAC","sourcesContent":["import { ButtonBaseSize } from '../../types';\n\nexport const BUTTON_BASE_SIZE_CLASS_MAP: Record<ButtonBaseSize, string> = {\n [ButtonBaseSize.Sm]: 'h-8', // size (32px).\n [ButtonBaseSize.Md]: 'h-10', // size (40px).\n [ButtonBaseSize.Lg]: 'h-12', // size (48px).\n};\n"]}
1
+ {"version":3,"file":"ButtonBase.constants.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAE7C,MAAM,CAAC,MAAM,oCAAoC,GAG7C;IACF,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,KAAK;IAC1B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,MAAM;IAC3B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,eAAe;CAC7C,CAAC","sourcesContent":["import { ButtonBaseSize } from '../../types';\n\nexport const TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION: Record<\n ButtonBaseSize,\n string\n> = {\n [ButtonBaseSize.Sm]: 'h-8', // size (32px).\n [ButtonBaseSize.Md]: 'h-10', // size (40px).\n [ButtonBaseSize.Lg]: 'h-12', // size (48px).\n};\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonBase.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,cAAc;AAQ1C,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,wGAyJtB,CAAC"}
1
+ {"version":3,"file":"ButtonBase.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,cAAc;AAQ1C,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,wGAiMtB,CAAC"}