@metamask-previews/design-system-react-native 0.0.0-preview.5f5c97a → 0.0.0-preview.646ebcc

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 (61) hide show
  1. package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.cjs +32 -55
  2. package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.cjs.map +1 -1
  3. package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.d.cts +1 -1
  4. package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.d.cts.map +1 -1
  5. package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.d.mts +1 -1
  6. package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.d.mts.map +1 -1
  7. package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.mjs +34 -57
  8. package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.mjs.map +1 -1
  9. package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.cjs +48 -50
  10. package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.cjs.map +1 -1
  11. package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.d.cts +1 -1
  12. package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.d.cts.map +1 -1
  13. package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.d.mts +1 -1
  14. package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.d.mts.map +1 -1
  15. package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.mjs +49 -51
  16. package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.mjs.map +1 -1
  17. package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.cjs +52 -55
  18. package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.cjs.map +1 -1
  19. package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.d.cts +1 -1
  20. package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.d.cts.map +1 -1
  21. package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.d.mts +1 -1
  22. package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.d.mts.map +1 -1
  23. package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.mjs +53 -56
  24. package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.mjs.map +1 -1
  25. package/dist/components/ButtonBase/ButtonBase.cjs +110 -28
  26. package/dist/components/ButtonBase/ButtonBase.cjs.map +1 -1
  27. package/dist/components/ButtonBase/ButtonBase.constants.cjs +10 -0
  28. package/dist/components/ButtonBase/ButtonBase.constants.cjs.map +1 -0
  29. package/dist/components/ButtonBase/ButtonBase.constants.d.cts +3 -0
  30. package/dist/components/ButtonBase/ButtonBase.constants.d.cts.map +1 -0
  31. package/dist/components/ButtonBase/ButtonBase.constants.d.mts +3 -0
  32. package/dist/components/ButtonBase/ButtonBase.constants.d.mts.map +1 -0
  33. package/dist/components/ButtonBase/ButtonBase.constants.mjs +7 -0
  34. package/dist/components/ButtonBase/ButtonBase.constants.mjs.map +1 -0
  35. package/dist/components/ButtonBase/ButtonBase.d.cts +1 -1
  36. package/dist/components/ButtonBase/ButtonBase.d.cts.map +1 -1
  37. package/dist/components/ButtonBase/ButtonBase.d.mts +1 -1
  38. package/dist/components/ButtonBase/ButtonBase.d.mts.map +1 -1
  39. package/dist/components/ButtonBase/ButtonBase.mjs +88 -26
  40. package/dist/components/ButtonBase/ButtonBase.mjs.map +1 -1
  41. package/dist/components/ButtonBase/ButtonBase.types.cjs.map +1 -1
  42. package/dist/components/ButtonBase/ButtonBase.types.d.cts +42 -2
  43. package/dist/components/ButtonBase/ButtonBase.types.d.cts.map +1 -1
  44. package/dist/components/ButtonBase/ButtonBase.types.d.mts +42 -2
  45. package/dist/components/ButtonBase/ButtonBase.types.d.mts.map +1 -1
  46. package/dist/components/ButtonBase/ButtonBase.types.mjs.map +1 -1
  47. package/dist/components/ButtonBase/index.cjs +3 -1
  48. package/dist/components/ButtonBase/index.cjs.map +1 -1
  49. package/dist/components/ButtonBase/index.d.cts +1 -0
  50. package/dist/components/ButtonBase/index.d.cts.map +1 -1
  51. package/dist/components/ButtonBase/index.d.mts +1 -0
  52. package/dist/components/ButtonBase/index.d.mts.map +1 -1
  53. package/dist/components/ButtonBase/index.mjs +1 -0
  54. package/dist/components/ButtonBase/index.mjs.map +1 -1
  55. package/dist/types/index.cjs +3 -3
  56. package/dist/types/index.cjs.map +1 -1
  57. package/dist/types/index.d.cts +3 -3
  58. package/dist/types/index.d.mts +3 -3
  59. package/dist/types/index.mjs +3 -3
  60. package/dist/types/index.mjs.map +1 -1
  61. package/package.json +3 -3
package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.cjs CHANGED
@@ -29,78 +29,55 @@ const react_1 = __importStar(require("react"));
29
29
  const ButtonBase_1 = require("../../../ButtonBase/index.cjs");
30
30
  const Icon_1 = require("../../../Icon/index.cjs");
31
31
  const Text_1 = require("../../../Text/index.cjs");
32
- const ButtonPrimaryBase = ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger = false, isInverse, isLoading = false, onPressIn, onPressOut, twClassName = '', style, ...props }) => {
33
- const [isPressed, setIsPressed] = (0, react_1.useState)(false);
32
+ const ButtonPrimary = ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger = false, isInverse = false, isLoading = false, twClassName = '', style, ...props }) => {
34
33
  const tw = (0, design_system_twrnc_preset_1.useTailwind)();
35
- const twContainerClassNames = `
36
- ${isInverse && isDanger
37
- ? isPressed || isLoading
38
- ? 'bg-default-pressed'
39
- : 'bg-default'
40
- : isDanger
41
- ? isPressed || isLoading
42
- ? 'bg-error-default-pressed'
43
- : 'bg-error-default'
44
- : isInverse
45
- ? isPressed || isLoading
46
- ? 'bg-default-pressed'
47
- : 'bg-default'
48
- : isPressed || isLoading
49
- ? 'bg-primary-default-pressed'
50
- : 'bg-primary-default'}
51
- ${twClassName}
52
- `;
53
- const twTextClassNames = isInverse && isDanger
54
- ? isPressed || isLoading
55
- ? 'text-error-default-pressed'
56
- : 'text-error-default'
57
- : isDanger
58
- ? 'text-primary-inverse'
59
- : isInverse
60
- ? 'text-default'
61
- : 'text-primary-inverse';
62
- const onPressInHandler = (event) => {
63
- setIsPressed(true);
64
- onPressIn?.(event);
65
- };
66
- const onPressOutHandler = (event) => {
67
- setIsPressed(false);
68
- onPressOut?.(event);
69
- };
34
+ const getContainerClassName = (0, react_1.useCallback)((pressed) => {
35
+ if (isInverse && isDanger) {
36
+ return `${pressed || isLoading ? 'bg-default-pressed' : 'bg-default'} ${twClassName}`;
37
+ }
38
+ else if (isDanger) {
39
+ return `${pressed || isLoading ? 'bg-error-default-pressed' : 'bg-error-default'} ${twClassName}`;
40
+ }
41
+ else if (isInverse) {
42
+ return `${pressed || isLoading ? 'bg-default-pressed' : 'bg-default'} ${twClassName}`;
43
+ }
44
+ else {
45
+ return `${pressed || isLoading ? 'bg-icon-default-pressed' : 'bg-icon-default'} ${twClassName}`;
46
+ }
47
+ }, [isInverse, isDanger, isLoading, twClassName]);
48
+ const getTextClassName = (0, react_1.useCallback)((pressed) => {
49
+ if (isInverse && isDanger) {
50
+ return pressed || isLoading
51
+ ? 'text-error-default-pressed'
52
+ : 'text-error-default';
53
+ }
54
+ else if (isDanger) {
55
+ return 'text-primary-inverse';
56
+ }
57
+ else if (isInverse) {
58
+ return 'text-default';
59
+ }
60
+ else {
61
+ return 'text-primary-inverse';
62
+ }
63
+ }, [isInverse, isDanger, isLoading]);
70
64
  return (<ButtonBase_1.ButtonBase textProps={{
71
65
  variant: Text_1.TextVariant.BodyMd,
72
66
  fontWeight: Text_1.FontWeight.Medium,
73
67
  numberOfLines: 1,
74
68
  ellipsizeMode: 'clip',
75
69
  ...textProps,
76
- twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,
77
70
  }} spinnerProps={{
78
- color: twTextClassNames,
79
- loadingTextProps: {
80
- twClassName: twTextClassNames,
81
- },
82
71
  ...spinnerProps,
83
72
  }} startIconProps={{
84
73
  size: Icon_1.IconSize.Sm,
85
74
  ...startIconProps,
86
- twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,
87
75
  }} endIconProps={{
88
76
  size: Icon_1.IconSize.Sm,
89
77
  ...endIconProps,
90
- twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,
91
- }} isLoading={isLoading} onPressIn={onPressInHandler} onPressOut={onPressOutHandler} style={[tw `${twContainerClassNames}`, style]} {...props}>
78
+ }} isLoading={isLoading} twClassName={getContainerClassName} textClassName={getTextClassName} iconClassName={getTextClassName} style={style} {...props}>
92
79
  {children}
93
80
  </ButtonBase_1.ButtonBase>);
94
81
  };
95
- const ButtonPrimary = ({ isInverse = false, ...props }) => {
96
- // If inverse, use the current theme context
97
- if (isInverse) {
98
- return <ButtonPrimaryBase isInverse {...props}/>;
99
- }
100
- // Otherwise, force light theme
101
- return (<design_system_twrnc_preset_1.ThemeProvider theme={design_system_twrnc_preset_1.Theme.Light}>
102
- <ButtonPrimaryBase isInverse={false} {...props}/>
103
- </design_system_twrnc_preset_1.ThemeProvider>);
104
- };
105
82
  exports.ButtonPrimary = ButtonPrimary;
106
83
  //# sourceMappingURL=ButtonPrimary.cjs.map
package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonPrimary.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useTailwind,\n ThemeProvider,\n Theme,\n} from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useState } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonBase } from '../../../ButtonBase';\nimport type { IconColor } from '../../../Icon';\nimport { IconSize } from '../../../Icon';\nimport { TextVariant, FontWeight } from '../../../Text';\n\nimport type { ButtonPrimaryProps } from './ButtonPrimary.types';\n\nconst ButtonPrimaryBase = ({\n children,\n textProps,\n spinnerProps,\n startIconProps,\n endIconProps,\n isDanger = false,\n isInverse,\n isLoading = false,\n onPressIn,\n onPressOut,\n twClassName = '',\n style,\n ...props\n}: ButtonPrimaryProps) => {\n const [isPressed, setIsPressed] = useState(false);\n const tw = useTailwind();\n\n const twContainerClassNames = `\n ${\n isInverse && isDanger\n ? isPressed || isLoading\n ? 'bg-default-pressed'\n : 'bg-default'\n : isDanger\n ? isPressed || isLoading\n ? 'bg-error-default-pressed'\n : 'bg-error-default'\n : isInverse\n ? isPressed || isLoading\n ? 'bg-default-pressed'\n : 'bg-default'\n : isPressed || isLoading\n ? 'bg-primary-default-pressed'\n : 'bg-primary-default'\n }\n ${twClassName}\n `;\n\n const twTextClassNames =\n isInverse && isDanger\n ? isPressed || isLoading\n ? 'text-error-default-pressed'\n : 'text-error-default'\n : isDanger\n ? 'text-primary-inverse'\n : isInverse\n ? 'text-default'\n : 'text-primary-inverse';\n\n const onPressInHandler = (event: GestureResponderEvent) => {\n setIsPressed(true);\n onPressIn?.(event);\n };\n\n const onPressOutHandler = (event: GestureResponderEvent) => {\n setIsPressed(false);\n onPressOut?.(event);\n };\n\n return (\n <ButtonBase\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n numberOfLines: 1,\n ellipsizeMode: 'clip',\n ...textProps,\n twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,\n }}\n spinnerProps={{\n color: twTextClassNames as IconColor,\n loadingTextProps: {\n twClassName: twTextClassNames,\n },\n ...spinnerProps,\n }}\n startIconProps={{\n size: IconSize.Sm,\n ...startIconProps,\n twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,\n }}\n endIconProps={{\n size: IconSize.Sm,\n ...endIconProps,\n twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,\n }}\n isLoading={isLoading}\n onPressIn={onPressInHandler}\n onPressOut={onPressOutHandler}\n style={[tw`${twContainerClassNames}`, style]}\n {...props}\n >\n {children}\n </ButtonBase>\n );\n};\n\nexport const ButtonPrimary = ({\n isInverse = false,\n ...props\n}: ButtonPrimaryProps) => {\n // If inverse, use the current theme context\n if (isInverse) {\n return <ButtonPrimaryBase isInverse {...props} />;\n }\n // Otherwise, force light theme\n return (\n <ThemeProvider theme={Theme.Light}>\n <ButtonPrimaryBase isInverse={false} {...props} />\n </ThemeProvider>\n );\n};\n"]}
1
+ {"version":3,"file":"ButtonPrimary.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8FAA4E;AAC5E,+CAA2C;AAE3C,8DAAiD;AAEjD,kDAAyC;AACzC,kDAAwD;AAIjD,MAAM,aAAa,GAAG,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,KAAK,EACjB,WAAW,GAAG,EAAE,EAChB,KAAK,EACL,GAAG,KAAK,EACW,EAAE,EAAE;IACvB,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,MAAM,qBAAqB,GAAG,IAAA,mBAAW,EACvC,CAAC,OAAgB,EAAU,EAAE;QAC3B,IAAI,SAAS,IAAI,QAAQ,EAAE;YACzB,OAAO,GAAG,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,YAAY,IAAI,WAAW,EAAE,CAAC;SACvF;aAAM,IAAI,QAAQ,EAAE;YACnB,OAAO,GAAG,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,kBAAkB,IAAI,WAAW,EAAE,CAAC;SACnG;aAAM,IAAI,SAAS,EAAE;YACpB,OAAO,GAAG,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,YAAY,IAAI,WAAW,EAAE,CAAC;SACvF;aAAM;YACL,OAAO,GAAG,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,iBAAiB,IAAI,WAAW,EAAE,CAAC;SACjG;IACH,CAAC,EACD,CAAC,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,CAC9C,CAAC;IAEF,MAAM,gBAAgB,GAAG,IAAA,mBAAW,EAClC,CAAC,OAAgB,EAAU,EAAE;QAC3B,IAAI,SAAS,IAAI,QAAQ,EAAE;YACzB,OAAO,OAAO,IAAI,SAAS;gBACzB,CAAC,CAAC,4BAA4B;gBAC9B,CAAC,CAAC,oBAAoB,CAAC;SAC1B;aAAM,IAAI,QAAQ,EAAE;YACnB,OAAO,sBAAsB,CAAC;SAC/B;aAAM,IAAI,SAAS,EAAE;YACpB,OAAO,cAAc,CAAC;SACvB;aAAM;YACL,OAAO,sBAAsB,CAAC;SAC/B;IACH,CAAC,EACD,CAAC,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC,CACjC,CAAC;IAEF,OAAO,CACL,CAAC,uBAAU,CACT,SAAS,CAAC,CAAC;YACT,OAAO,EAAE,kBAAW,CAAC,MAAM;YAC3B,UAAU,EAAE,iBAAU,CAAC,MAAM;YAC7B,aAAa,EAAE,CAAC;YAChB,aAAa,EAAE,MAAM;YACrB,GAAG,SAAS;SACb,CAAC,CACF,YAAY,CAAC,CAAC;YACZ,GAAG,YAAY;SAChB,CAAC,CACF,cAAc,CAAC,CAAC;YACd,IAAI,EAAE,eAAQ,CAAC,EAAE;YACjB,GAAG,cAAc;SAClB,CAAC,CACF,YAAY,CAAC,CAAC;YACZ,IAAI,EAAE,eAAQ,CAAC,EAAE;YACjB,GAAG,YAAY;SAChB,CAAC,CACF,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,WAAW,CAAC,CAAC,qBAAqB,CAAC,CACnC,aAAa,CAAC,CAAC,gBAAgB,CAAC,CAChC,aAAa,CAAC,CAAC,gBAAgB,CAAC,CAChC,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,uBAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AA7EW,QAAA,aAAa,iBA6ExB","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useCallback } from 'react';\n\nimport { ButtonBase } from '../../../ButtonBase';\nimport type { IconColor } from '../../../Icon';\nimport { IconSize } from '../../../Icon';\nimport { TextVariant, FontWeight } from '../../../Text';\n\nimport type { ButtonPrimaryProps } from './ButtonPrimary.types';\n\nexport const ButtonPrimary = ({\n children,\n textProps,\n spinnerProps,\n startIconProps,\n endIconProps,\n isDanger = false,\n isInverse = false,\n isLoading = false,\n twClassName = '',\n style,\n ...props\n}: ButtonPrimaryProps) => {\n const tw = useTailwind();\n\n const getContainerClassName = useCallback(\n (pressed: boolean): string => {\n if (isInverse && isDanger) {\n return `${pressed || isLoading ? 'bg-default-pressed' : 'bg-default'} ${twClassName}`;\n } else if (isDanger) {\n return `${pressed || isLoading ? 'bg-error-default-pressed' : 'bg-error-default'} ${twClassName}`;\n } else if (isInverse) {\n return `${pressed || isLoading ? 'bg-default-pressed' : 'bg-default'} ${twClassName}`;\n } else {\n return `${pressed || isLoading ? 'bg-icon-default-pressed' : 'bg-icon-default'} ${twClassName}`;\n }\n },\n [isInverse, isDanger, isLoading, twClassName],\n );\n\n const getTextClassName = useCallback(\n (pressed: boolean): string => {\n if (isInverse && isDanger) {\n return pressed || isLoading\n ? 'text-error-default-pressed'\n : 'text-error-default';\n } else if (isDanger) {\n return 'text-primary-inverse';\n } else if (isInverse) {\n return 'text-default';\n } else {\n return 'text-primary-inverse';\n }\n },\n [isInverse, isDanger, isLoading],\n );\n\n return (\n <ButtonBase\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n numberOfLines: 1,\n ellipsizeMode: 'clip',\n ...textProps,\n }}\n spinnerProps={{\n ...spinnerProps,\n }}\n startIconProps={{\n size: IconSize.Sm,\n ...startIconProps,\n }}\n endIconProps={{\n size: IconSize.Sm,\n ...endIconProps,\n }}\n isLoading={isLoading}\n twClassName={getContainerClassName}\n textClassName={getTextClassName}\n iconClassName={getTextClassName}\n style={style}\n {...props}\n >\n {children}\n </ButtonBase>\n );\n};\n"]}
package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.d.cts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import type { ButtonPrimaryProps } from "./ButtonPrimary.types.cjs";
3
- export declare const ButtonPrimary: ({ isInverse, ...props }: ButtonPrimaryProps) => React.JSX.Element;
3
+ export declare const ButtonPrimary: ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger, isInverse, isLoading, twClassName, style, ...props }: ButtonPrimaryProps) => React.JSX.Element;
4
4
  //# sourceMappingURL=ButtonPrimary.d.cts.map
package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.d.cts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonPrimary.d.cts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmB,cAAc;AAQxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAoGhE,eAAO,MAAM,aAAa,4BAGvB,kBAAkB,sBAWpB,CAAC"}
1
+ {"version":3,"file":"ButtonPrimary.d.cts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,cAAc;AAO3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,sIAYvB,kBAAkB,sBAiEpB,CAAC"}
package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.d.mts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import type { ButtonPrimaryProps } from "./ButtonPrimary.types.mjs";
3
- export declare const ButtonPrimary: ({ isInverse, ...props }: ButtonPrimaryProps) => React.JSX.Element;
3
+ export declare const ButtonPrimary: ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger, isInverse, isLoading, twClassName, style, ...props }: ButtonPrimaryProps) => React.JSX.Element;
4
4
  //# sourceMappingURL=ButtonPrimary.d.mts.map
package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.d.mts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonPrimary.d.mts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmB,cAAc;AAQxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAoGhE,eAAO,MAAM,aAAa,4BAGvB,kBAAkB,sBAWpB,CAAC"}
1
+ {"version":3,"file":"ButtonPrimary.d.mts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,cAAc;AAO3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,sIAYvB,kBAAkB,sBAiEpB,CAAC"}
package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.mjs CHANGED
@@ -4,83 +4,60 @@ function $importDefault(module) {
4
4
  }
5
5
  return module;
6
6
  }
7
- import { useTailwind, ThemeProvider, Theme } from "@metamask-previews/design-system-twrnc-preset";
8
- import $React, { useState } from "react";
7
+ import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
8
+ import $React, { useCallback } from "react";
9
9
  const React = $importDefault($React);
10
10
  import { ButtonBase } from "../../../ButtonBase/index.mjs";
11
11
  import { IconSize } from "../../../Icon/index.mjs";
12
12
  import { TextVariant, FontWeight } from "../../../Text/index.mjs";
13
- const ButtonPrimaryBase = ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger = false, isInverse, isLoading = false, onPressIn, onPressOut, twClassName = '', style, ...props }) => {
14
- const [isPressed, setIsPressed] = useState(false);
13
+ export const ButtonPrimary = ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger = false, isInverse = false, isLoading = false, twClassName = '', style, ...props }) => {
15
14
  const tw = useTailwind();
16
- const twContainerClassNames = `
17
- ${isInverse && isDanger
18
- ? isPressed || isLoading
19
- ? 'bg-default-pressed'
20
- : 'bg-default'
21
- : isDanger
22
- ? isPressed || isLoading
23
- ? 'bg-error-default-pressed'
24
- : 'bg-error-default'
25
- : isInverse
26
- ? isPressed || isLoading
27
- ? 'bg-default-pressed'
28
- : 'bg-default'
29
- : isPressed || isLoading
30
- ? 'bg-primary-default-pressed'
31
- : 'bg-primary-default'}
32
- ${twClassName}
33
- `;
34
- const twTextClassNames = isInverse && isDanger
35
- ? isPressed || isLoading
36
- ? 'text-error-default-pressed'
37
- : 'text-error-default'
38
- : isDanger
39
- ? 'text-primary-inverse'
40
- : isInverse
41
- ? 'text-default'
42
- : 'text-primary-inverse';
43
- const onPressInHandler = (event) => {
44
- setIsPressed(true);
45
- onPressIn?.(event);
46
- };
47
- const onPressOutHandler = (event) => {
48
- setIsPressed(false);
49
- onPressOut?.(event);
50
- };
15
+ const getContainerClassName = useCallback((pressed) => {
16
+ if (isInverse && isDanger) {
17
+ return `${pressed || isLoading ? 'bg-default-pressed' : 'bg-default'} ${twClassName}`;
18
+ }
19
+ else if (isDanger) {
20
+ return `${pressed || isLoading ? 'bg-error-default-pressed' : 'bg-error-default'} ${twClassName}`;
21
+ }
22
+ else if (isInverse) {
23
+ return `${pressed || isLoading ? 'bg-default-pressed' : 'bg-default'} ${twClassName}`;
24
+ }
25
+ else {
26
+ return `${pressed || isLoading ? 'bg-icon-default-pressed' : 'bg-icon-default'} ${twClassName}`;
27
+ }
28
+ }, [isInverse, isDanger, isLoading, twClassName]);
29
+ const getTextClassName = useCallback((pressed) => {
30
+ if (isInverse && isDanger) {
31
+ return pressed || isLoading
32
+ ? 'text-error-default-pressed'
33
+ : 'text-error-default';
34
+ }
35
+ else if (isDanger) {
36
+ return 'text-primary-inverse';
37
+ }
38
+ else if (isInverse) {
39
+ return 'text-default';
40
+ }
41
+ else {
42
+ return 'text-primary-inverse';
43
+ }
44
+ }, [isInverse, isDanger, isLoading]);
51
45
  return (<ButtonBase textProps={{
52
46
  variant: TextVariant.BodyMd,
53
47
  fontWeight: FontWeight.Medium,
54
48
  numberOfLines: 1,
55
49
  ellipsizeMode: 'clip',
56
50
  ...textProps,
57
- twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,
58
51
  }} spinnerProps={{
59
- color: twTextClassNames,
60
- loadingTextProps: {
61
- twClassName: twTextClassNames,
62
- },
63
52
  ...spinnerProps,
64
53
  }} startIconProps={{
65
54
  size: IconSize.Sm,
66
55
  ...startIconProps,
67
- twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,
68
56
  }} endIconProps={{
69
57
  size: IconSize.Sm,
70
58
  ...endIconProps,
71
- twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,
72
- }} isLoading={isLoading} onPressIn={onPressInHandler} onPressOut={onPressOutHandler} style={[tw `${twContainerClassNames}`, style]} {...props}>
59
+ }} isLoading={isLoading} twClassName={getContainerClassName} textClassName={getTextClassName} iconClassName={getTextClassName} style={style} {...props}>
73
60
  {children}
74
61
  </ButtonBase>);
75
62
  };
76
- export const ButtonPrimary = ({ isInverse = false, ...props }) => {
77
- // If inverse, use the current theme context
78
- if (isInverse) {
79
- return <ButtonPrimaryBase isInverse {...props}/>;
80
- }
81
- // Otherwise, force light theme
82
- return (<ThemeProvider theme={Theme.Light}>
83
- <ButtonPrimaryBase isInverse={false} {...props}/>
84
- </ThemeProvider>);
85
- };
86
63
  //# sourceMappingURL=ButtonPrimary.mjs.map
package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonPrimary.mjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useTailwind,\n ThemeProvider,\n Theme,\n} from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useState } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonBase } from '../../../ButtonBase';\nimport type { IconColor } from '../../../Icon';\nimport { IconSize } from '../../../Icon';\nimport { TextVariant, FontWeight } from '../../../Text';\n\nimport type { ButtonPrimaryProps } from './ButtonPrimary.types';\n\nconst ButtonPrimaryBase = ({\n children,\n textProps,\n spinnerProps,\n startIconProps,\n endIconProps,\n isDanger = false,\n isInverse,\n isLoading = false,\n onPressIn,\n onPressOut,\n twClassName = '',\n style,\n ...props\n}: ButtonPrimaryProps) => {\n const [isPressed, setIsPressed] = useState(false);\n const tw = useTailwind();\n\n const twContainerClassNames = `\n ${\n isInverse && isDanger\n ? isPressed || isLoading\n ? 'bg-default-pressed'\n : 'bg-default'\n : isDanger\n ? isPressed || isLoading\n ? 'bg-error-default-pressed'\n : 'bg-error-default'\n : isInverse\n ? isPressed || isLoading\n ? 'bg-default-pressed'\n : 'bg-default'\n : isPressed || isLoading\n ? 'bg-primary-default-pressed'\n : 'bg-primary-default'\n }\n ${twClassName}\n `;\n\n const twTextClassNames =\n isInverse && isDanger\n ? isPressed || isLoading\n ? 'text-error-default-pressed'\n : 'text-error-default'\n : isDanger\n ? 'text-primary-inverse'\n : isInverse\n ? 'text-default'\n : 'text-primary-inverse';\n\n const onPressInHandler = (event: GestureResponderEvent) => {\n setIsPressed(true);\n onPressIn?.(event);\n };\n\n const onPressOutHandler = (event: GestureResponderEvent) => {\n setIsPressed(false);\n onPressOut?.(event);\n };\n\n return (\n <ButtonBase\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n numberOfLines: 1,\n ellipsizeMode: 'clip',\n ...textProps,\n twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,\n }}\n spinnerProps={{\n color: twTextClassNames as IconColor,\n loadingTextProps: {\n twClassName: twTextClassNames,\n },\n ...spinnerProps,\n }}\n startIconProps={{\n size: IconSize.Sm,\n ...startIconProps,\n twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,\n }}\n endIconProps={{\n size: IconSize.Sm,\n ...endIconProps,\n twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,\n }}\n isLoading={isLoading}\n onPressIn={onPressInHandler}\n onPressOut={onPressOutHandler}\n style={[tw`${twContainerClassNames}`, style]}\n {...props}\n >\n {children}\n </ButtonBase>\n );\n};\n\nexport const ButtonPrimary = ({\n isInverse = false,\n ...props\n}: ButtonPrimaryProps) => {\n // If inverse, use the current theme context\n if (isInverse) {\n return <ButtonPrimaryBase isInverse {...props} />;\n }\n // Otherwise, force light theme\n return (\n <ThemeProvider theme={Theme.Light}>\n <ButtonPrimaryBase isInverse={false} {...props} />\n </ThemeProvider>\n );\n};\n"]}
1
+ {"version":3,"file":"ButtonPrimary.mjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useCallback } from 'react';\n\nimport { ButtonBase } from '../../../ButtonBase';\nimport type { IconColor } from '../../../Icon';\nimport { IconSize } from '../../../Icon';\nimport { TextVariant, FontWeight } from '../../../Text';\n\nimport type { ButtonPrimaryProps } from './ButtonPrimary.types';\n\nexport const ButtonPrimary = ({\n children,\n textProps,\n spinnerProps,\n startIconProps,\n endIconProps,\n isDanger = false,\n isInverse = false,\n isLoading = false,\n twClassName = '',\n style,\n ...props\n}: ButtonPrimaryProps) => {\n const tw = useTailwind();\n\n const getContainerClassName = useCallback(\n (pressed: boolean): string => {\n if (isInverse && isDanger) {\n return `${pressed || isLoading ? 'bg-default-pressed' : 'bg-default'} ${twClassName}`;\n } else if (isDanger) {\n return `${pressed || isLoading ? 'bg-error-default-pressed' : 'bg-error-default'} ${twClassName}`;\n } else if (isInverse) {\n return `${pressed || isLoading ? 'bg-default-pressed' : 'bg-default'} ${twClassName}`;\n } else {\n return `${pressed || isLoading ? 'bg-icon-default-pressed' : 'bg-icon-default'} ${twClassName}`;\n }\n },\n [isInverse, isDanger, isLoading, twClassName],\n );\n\n const getTextClassName = useCallback(\n (pressed: boolean): string => {\n if (isInverse && isDanger) {\n return pressed || isLoading\n ? 'text-error-default-pressed'\n : 'text-error-default';\n } else if (isDanger) {\n return 'text-primary-inverse';\n } else if (isInverse) {\n return 'text-default';\n } else {\n return 'text-primary-inverse';\n }\n },\n [isInverse, isDanger, isLoading],\n );\n\n return (\n <ButtonBase\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n numberOfLines: 1,\n ellipsizeMode: 'clip',\n ...textProps,\n }}\n spinnerProps={{\n ...spinnerProps,\n }}\n startIconProps={{\n size: IconSize.Sm,\n ...startIconProps,\n }}\n endIconProps={{\n size: IconSize.Sm,\n ...endIconProps,\n }}\n isLoading={isLoading}\n twClassName={getContainerClassName}\n textClassName={getTextClassName}\n iconClassName={getTextClassName}\n style={style}\n {...props}\n >\n {children}\n </ButtonBase>\n );\n};\n"]}
package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.cjs CHANGED
@@ -29,72 +29,70 @@ const react_1 = __importStar(require("react"));
29
29
  const ButtonBase_1 = require("../../../ButtonBase/index.cjs");
30
30
  const Icon_1 = require("../../../Icon/index.cjs");
31
31
  const Text_1 = require("../../../Text/index.cjs");
32
- const ButtonSecondary = ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger = false, isInverse = false, isLoading = false, onPressIn, onPressOut, twClassName = '', style, ...props }) => {
33
- const [isPressed, setIsPressed] = (0, react_1.useState)(false);
32
+ const ButtonSecondary = ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger = false, isInverse = false, isLoading = false, twClassName = '', style, ...props }) => {
34
33
  const tw = (0, design_system_twrnc_preset_1.useTailwind)();
35
- const twContainerClassNames = `
36
- ${isInverse && isDanger
37
- ? isPressed || isLoading
38
- ? 'bg-default-pressed'
39
- : 'bg-default'
40
- : isDanger
41
- ? isPressed || isLoading
42
- ? 'bg-error-muted-pressed'
43
- : 'bg-transparent'
44
- : isPressed || isLoading
45
- ? 'bg-pressed'
46
- : 'bg-transparent'}
47
- border-[1.5px]
48
- ${isInverse && isDanger
49
- ? isPressed || isLoading
50
- ? 'border-background-default-pressed'
51
- : 'border-background-default'
52
- : isDanger
53
- ? isPressed || isLoading
54
- ? 'border-error-default-pressed'
55
- : 'border-error-default'
56
- : isInverse
34
+ const getContainerClassName = (0, react_1.useCallback)((pressed) => {
35
+ const baseClasses = `
36
+ border-[1.5px]
37
+ ${twClassName}
38
+ `;
39
+ let backgroundClass = '';
40
+ let borderClass = '';
41
+ if (isInverse && isDanger) {
42
+ backgroundClass =
43
+ pressed || isLoading ? 'bg-default-pressed' : 'bg-default';
44
+ borderClass =
45
+ pressed || isLoading
46
+ ? 'border-background-default-pressed'
47
+ : 'border-background-default';
48
+ }
49
+ else if (isDanger) {
50
+ backgroundClass =
51
+ pressed || isLoading ? 'bg-muted-pressed' : 'bg-muted';
52
+ borderClass = 'border-transparent';
53
+ }
54
+ else {
55
+ backgroundClass = isInverse
56
+ ? pressed || isLoading
57
+ ? 'bg-pressed'
58
+ : 'bg-transparent'
59
+ : pressed || isLoading
60
+ ? 'bg-muted-pressed'
61
+ : 'bg-muted';
62
+ borderClass = isInverse
57
63
  ? 'border-primary-inverse'
58
- : 'border-icon-default'}
59
- ${twClassName}
60
- `;
61
- const twTextClassNames = isDanger
62
- ? isPressed || isLoading
63
- ? 'text-error-default-pressed'
64
- : 'text-error-default'
65
- : isInverse
66
- ? 'text-primary-inverse'
67
- : 'text-default';
68
- const onPressInHandler = (event) => {
69
- setIsPressed(true);
70
- onPressIn?.(event);
71
- };
72
- const onPressOutHandler = (event) => {
73
- setIsPressed(false);
74
- onPressOut?.(event);
75
- };
64
+ : 'border-transparent';
65
+ }
66
+ return `${backgroundClass} ${borderClass} ${baseClasses}`;
67
+ }, [isInverse, isDanger, isLoading, twClassName]);
68
+ const getTextClassName = (0, react_1.useCallback)((pressed) => {
69
+ if (isDanger) {
70
+ return pressed || isLoading
71
+ ? 'text-error-default-pressed'
72
+ : 'text-error-default';
73
+ }
74
+ else if (isInverse) {
75
+ return 'text-primary-inverse';
76
+ }
77
+ else {
78
+ return 'text-default';
79
+ }
80
+ }, [isDanger, isInverse, isLoading]);
76
81
  return (<ButtonBase_1.ButtonBase textProps={{
77
82
  variant: Text_1.TextVariant.BodyMd,
78
83
  fontWeight: Text_1.FontWeight.Medium,
79
84
  numberOfLines: 1,
80
85
  ellipsizeMode: 'clip',
81
86
  ...textProps,
82
- twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,
83
87
  }} spinnerProps={{
84
- color: twTextClassNames,
85
- loadingTextProps: {
86
- twClassName: twTextClassNames,
87
- },
88
88
  ...spinnerProps,
89
89
  }} startIconProps={{
90
90
  size: Icon_1.IconSize.Sm,
91
91
  ...startIconProps,
92
- twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,
93
92
  }} endIconProps={{
94
93
  size: Icon_1.IconSize.Sm,
95
94
  ...endIconProps,
96
- twClassName: `${twTextClassNames} ${endIconProps?.twClassName ?? ''}`,
97
- }} isLoading={isLoading} onPressIn={onPressInHandler} onPressOut={onPressOutHandler} style={[tw `${twContainerClassNames}`, style]} {...props}>
95
+ }} isLoading={isLoading} twClassName={getContainerClassName} textClassName={getTextClassName} iconClassName={getTextClassName} style={style} {...props}>
98
96
  {children}
99
97
  </ButtonBase_1.ButtonBase>);
100
98
  };
package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonSecondary.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useState } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonBase } from '../../../ButtonBase';\nimport type { IconColor } from '../../../Icon';\nimport { IconSize } from '../../../Icon';\nimport { TextVariant, FontWeight } from '../../../Text';\n\nimport type { ButtonSecondaryProps } from './ButtonSecondary.types';\n\nexport const ButtonSecondary = ({\n children,\n textProps,\n spinnerProps,\n startIconProps,\n endIconProps,\n isDanger = false,\n isInverse = false,\n isLoading = false,\n onPressIn,\n onPressOut,\n twClassName = '',\n style,\n ...props\n}: ButtonSecondaryProps) => {\n const [isPressed, setIsPressed] = useState(false);\n const tw = useTailwind();\n const twContainerClassNames = `\n ${\n isInverse && isDanger\n ? isPressed || isLoading\n ? 'bg-default-pressed'\n : 'bg-default'\n : isDanger\n ? isPressed || isLoading\n ? 'bg-error-muted-pressed'\n : 'bg-transparent'\n : isPressed || isLoading\n ? 'bg-pressed'\n : 'bg-transparent'\n }\n border-[1.5px]\n ${\n isInverse && isDanger\n ? isPressed || isLoading\n ? 'border-background-default-pressed'\n : 'border-background-default'\n : isDanger\n ? isPressed || isLoading\n ? 'border-error-default-pressed'\n : 'border-error-default'\n : isInverse\n ? 'border-primary-inverse'\n : 'border-icon-default'\n }\n ${twClassName}\n `;\n\n const twTextClassNames = isDanger\n ? isPressed || isLoading\n ? 'text-error-default-pressed'\n : 'text-error-default'\n : isInverse\n ? 'text-primary-inverse'\n : 'text-default';\n\n const onPressInHandler = (event: GestureResponderEvent) => {\n setIsPressed(true);\n onPressIn?.(event);\n };\n\n const onPressOutHandler = (event: GestureResponderEvent) => {\n setIsPressed(false);\n onPressOut?.(event);\n };\n\n return (\n <ButtonBase\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n numberOfLines: 1,\n ellipsizeMode: 'clip',\n ...textProps,\n twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,\n }}\n spinnerProps={{\n color: twTextClassNames as IconColor,\n loadingTextProps: {\n twClassName: twTextClassNames,\n },\n ...spinnerProps,\n }}\n startIconProps={{\n size: IconSize.Sm,\n ...startIconProps,\n twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,\n }}\n endIconProps={{\n size: IconSize.Sm,\n ...endIconProps,\n twClassName: `${twTextClassNames} ${endIconProps?.twClassName ?? ''}`,\n }}\n isLoading={isLoading}\n onPressIn={onPressInHandler}\n onPressOut={onPressOutHandler}\n style={[tw`${twContainerClassNames}`, style]}\n {...props}\n >\n {children}\n </ButtonBase>\n );\n};\n"]}
1
+ {"version":3,"file":"ButtonSecondary.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useCallback } from 'react';\n\nimport { ButtonBase } from '../../../ButtonBase';\nimport type { IconColor } from '../../../Icon';\nimport { IconSize } from '../../../Icon';\nimport { TextVariant, FontWeight } from '../../../Text';\n\nimport type { ButtonSecondaryProps } from './ButtonSecondary.types';\n\nexport const ButtonSecondary = ({\n children,\n textProps,\n spinnerProps,\n startIconProps,\n endIconProps,\n isDanger = false,\n isInverse = false,\n isLoading = false,\n twClassName = '',\n style,\n ...props\n}: ButtonSecondaryProps) => {\n const tw = useTailwind();\n\n const getContainerClassName = useCallback(\n (pressed: boolean): string => {\n const baseClasses = `\n border-[1.5px]\n ${twClassName}\n `;\n\n let backgroundClass = '';\n let borderClass = '';\n\n if (isInverse && isDanger) {\n backgroundClass =\n pressed || isLoading ? 'bg-default-pressed' : 'bg-default';\n borderClass =\n pressed || isLoading\n ? 'border-background-default-pressed'\n : 'border-background-default';\n } else if (isDanger) {\n backgroundClass =\n pressed || isLoading ? 'bg-muted-pressed' : 'bg-muted';\n borderClass = 'border-transparent';\n } else {\n backgroundClass = isInverse\n ? pressed || isLoading\n ? 'bg-pressed'\n : 'bg-transparent'\n : pressed || isLoading\n ? 'bg-muted-pressed'\n : 'bg-muted';\n borderClass = isInverse\n ? 'border-primary-inverse'\n : 'border-transparent';\n }\n\n return `${backgroundClass} ${borderClass} ${baseClasses}`;\n },\n [isInverse, isDanger, isLoading, twClassName],\n );\n\n const getTextClassName = useCallback(\n (pressed: boolean): string => {\n if (isDanger) {\n return pressed || isLoading\n ? 'text-error-default-pressed'\n : 'text-error-default';\n } else if (isInverse) {\n return 'text-primary-inverse';\n } else {\n return 'text-default';\n }\n },\n [isDanger, isInverse, isLoading],\n );\n\n return (\n <ButtonBase\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n numberOfLines: 1,\n ellipsizeMode: 'clip',\n ...textProps,\n }}\n spinnerProps={{\n ...spinnerProps,\n }}\n startIconProps={{\n size: IconSize.Sm,\n ...startIconProps,\n }}\n endIconProps={{\n size: IconSize.Sm,\n ...endIconProps,\n }}\n isLoading={isLoading}\n twClassName={getContainerClassName}\n textClassName={getTextClassName}\n iconClassName={getTextClassName}\n style={style}\n {...props}\n >\n {children}\n </ButtonBase>\n );\n};\n"]}
package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.d.cts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import type { ButtonSecondaryProps } from "./ButtonSecondary.types.cjs";
3
- export declare const ButtonSecondary: ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger, isInverse, isLoading, onPressIn, onPressOut, twClassName, style, ...props }: ButtonSecondaryProps) => React.JSX.Element;
3
+ export declare const ButtonSecondary: ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger, isInverse, isLoading, twClassName, style, ...props }: ButtonSecondaryProps) => React.JSX.Element;
4
4
  //# sourceMappingURL=ButtonSecondary.d.cts.map
package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.d.cts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonSecondary.d.cts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,cAAc;AAQxC,OAAO,KAAK,EAAE,oBAAoB,EAAE,oCAAgC;AAEpE,eAAO,MAAM,eAAe,6JAczB,oBAAoB,sBAwFtB,CAAC"}
1
+ {"version":3,"file":"ButtonSecondary.d.cts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,cAAc;AAO3C,OAAO,KAAK,EAAE,oBAAoB,EAAE,oCAAgC;AAEpE,eAAO,MAAM,eAAe,sIAYzB,oBAAoB,sBAuFtB,CAAC"}
package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.d.mts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import type { ButtonSecondaryProps } from "./ButtonSecondary.types.mjs";
3
- export declare const ButtonSecondary: ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger, isInverse, isLoading, onPressIn, onPressOut, twClassName, style, ...props }: ButtonSecondaryProps) => React.JSX.Element;
3
+ export declare const ButtonSecondary: ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger, isInverse, isLoading, twClassName, style, ...props }: ButtonSecondaryProps) => React.JSX.Element;
4
4
  //# sourceMappingURL=ButtonSecondary.d.mts.map
package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.d.mts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonSecondary.d.mts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,cAAc;AAQxC,OAAO,KAAK,EAAE,oBAAoB,EAAE,oCAAgC;AAEpE,eAAO,MAAM,eAAe,6JAczB,oBAAoB,sBAwFtB,CAAC"}
1
+ {"version":3,"file":"ButtonSecondary.d.mts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,cAAc;AAO3C,OAAO,KAAK,EAAE,oBAAoB,EAAE,oCAAgC;AAEpE,eAAO,MAAM,eAAe,sIAYzB,oBAAoB,sBAuFtB,CAAC"}