@channel.io/bezier-react 2.0.2 → 2.0.4

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 (123) hide show
  1. package/dist/cjs/components/AlphaAvatar/Avatar.js +121 -0
  2. package/dist/cjs/components/AlphaAvatar/Avatar.js.map +1 -0
  3. package/dist/cjs/components/AlphaAvatar/Avatar.module.scss.js +8 -0
  4. package/dist/cjs/components/AlphaAvatar/Avatar.module.scss.js.map +1 -0
  5. package/dist/cjs/components/AlphaAvatar/assets/default-avatar.svg.js +8 -0
  6. package/dist/cjs/components/AlphaAvatar/assets/default-avatar.svg.js.map +1 -0
  7. package/dist/cjs/components/AlphaAvatar/useProgressiveImage.js +48 -0
  8. package/dist/cjs/components/AlphaAvatar/useProgressiveImage.js.map +1 -0
  9. package/dist/cjs/components/AlphaAvatarGroup/AvatarGroup.js +153 -0
  10. package/dist/cjs/components/AlphaAvatarGroup/AvatarGroup.js.map +1 -0
  11. package/dist/cjs/components/AlphaAvatarGroup/AvatarGroup.module.scss.js +8 -0
  12. package/dist/cjs/components/AlphaAvatarGroup/AvatarGroup.module.scss.js.map +1 -0
  13. package/dist/cjs/components/AlphaButton/Button.js +78 -0
  14. package/dist/cjs/components/AlphaButton/Button.js.map +1 -0
  15. package/dist/cjs/components/AlphaButton/Button.module.scss.js +8 -0
  16. package/dist/cjs/components/AlphaButton/Button.module.scss.js.map +1 -0
  17. package/dist/cjs/components/AlphaFloatingButton/FloatingButton.js +77 -0
  18. package/dist/cjs/components/AlphaFloatingButton/FloatingButton.js.map +1 -0
  19. package/dist/cjs/components/AlphaFloatingButton/FloatingButton.module.scss.js +8 -0
  20. package/dist/cjs/components/AlphaFloatingButton/FloatingButton.module.scss.js.map +1 -0
  21. package/dist/cjs/components/BaseButton/BaseButton.js +2 -1
  22. package/dist/cjs/components/BaseButton/BaseButton.js.map +1 -1
  23. package/dist/cjs/components/Button/Button.js +1 -5
  24. package/dist/cjs/components/Button/Button.js.map +1 -1
  25. package/dist/cjs/index.js +16 -7
  26. package/dist/cjs/index.js.map +1 -1
  27. package/dist/cjs/packages/bezier-tokens/dist/esm/global.js +2 -2
  28. package/dist/cjs/packages/bezier-tokens/dist/esm/global.js.map +1 -1
  29. package/dist/cjs/styles.css +1 -1
  30. package/dist/esm/components/AlphaAvatar/Avatar.mjs +115 -0
  31. package/dist/esm/components/AlphaAvatar/Avatar.mjs.map +1 -0
  32. package/dist/esm/components/AlphaAvatar/Avatar.module.scss.mjs +4 -0
  33. package/dist/esm/components/AlphaAvatar/Avatar.module.scss.mjs.map +1 -0
  34. package/dist/esm/components/AlphaAvatar/assets/default-avatar.svg.mjs +4 -0
  35. package/dist/esm/components/AlphaAvatar/assets/default-avatar.svg.mjs.map +1 -0
  36. package/dist/esm/components/AlphaAvatar/useProgressiveImage.mjs +44 -0
  37. package/dist/esm/components/AlphaAvatar/useProgressiveImage.mjs.map +1 -0
  38. package/dist/esm/components/AlphaAvatarGroup/AvatarGroup.mjs +149 -0
  39. package/dist/esm/components/AlphaAvatarGroup/AvatarGroup.mjs.map +1 -0
  40. package/dist/esm/components/AlphaAvatarGroup/AvatarGroup.module.scss.mjs +4 -0
  41. package/dist/esm/components/AlphaAvatarGroup/AvatarGroup.module.scss.mjs.map +1 -0
  42. package/dist/esm/components/AlphaButton/Button.mjs +76 -0
  43. package/dist/esm/components/AlphaButton/Button.mjs.map +1 -0
  44. package/dist/esm/components/AlphaButton/Button.module.scss.mjs +4 -0
  45. package/dist/esm/components/AlphaButton/Button.module.scss.mjs.map +1 -0
  46. package/dist/esm/components/AlphaFloatingButton/FloatingButton.mjs +75 -0
  47. package/dist/esm/components/AlphaFloatingButton/FloatingButton.mjs.map +1 -0
  48. package/dist/esm/components/AlphaFloatingButton/FloatingButton.module.scss.mjs +4 -0
  49. package/dist/esm/components/AlphaFloatingButton/FloatingButton.module.scss.mjs.map +1 -0
  50. package/dist/esm/components/BaseButton/BaseButton.mjs +2 -1
  51. package/dist/esm/components/BaseButton/BaseButton.mjs.map +1 -1
  52. package/dist/esm/components/Button/Button.mjs +1 -5
  53. package/dist/esm/components/Button/Button.mjs.map +1 -1
  54. package/dist/esm/index.mjs +4 -0
  55. package/dist/esm/index.mjs.map +1 -1
  56. package/dist/esm/packages/bezier-tokens/dist/esm/global.mjs +2 -2
  57. package/dist/esm/packages/bezier-tokens/dist/esm/global.mjs.map +1 -1
  58. package/dist/esm/styles.css +1 -1
  59. package/dist/types/components/AlphaAvatar/Avatar.d.ts +22 -0
  60. package/dist/types/components/AlphaAvatar/Avatar.d.ts.map +1 -0
  61. package/dist/types/components/AlphaAvatar/Avatar.types.d.ts +42 -0
  62. package/dist/types/components/AlphaAvatar/Avatar.types.d.ts.map +1 -0
  63. package/dist/types/components/AlphaAvatar/index.d.ts +3 -0
  64. package/dist/types/components/AlphaAvatar/index.d.ts.map +1 -0
  65. package/dist/types/components/AlphaAvatar/useProgressiveImage.d.ts +2 -0
  66. package/dist/types/components/AlphaAvatar/useProgressiveImage.d.ts.map +1 -0
  67. package/dist/types/components/AlphaAvatarGroup/AvatarGroup.d.ts +24 -0
  68. package/dist/types/components/AlphaAvatarGroup/AvatarGroup.d.ts.map +1 -0
  69. package/dist/types/components/AlphaAvatarGroup/AvatarGroup.types.d.ts +28 -0
  70. package/dist/types/components/AlphaAvatarGroup/AvatarGroup.types.d.ts.map +1 -0
  71. package/dist/types/components/AlphaAvatarGroup/index.d.ts +3 -0
  72. package/dist/types/components/AlphaAvatarGroup/index.d.ts.map +1 -0
  73. package/dist/types/components/AlphaButton/Button.d.ts +4 -0
  74. package/dist/types/components/AlphaButton/Button.d.ts.map +1 -0
  75. package/dist/types/components/AlphaButton/Button.types.d.ts +44 -0
  76. package/dist/types/components/AlphaButton/Button.types.d.ts.map +1 -0
  77. package/dist/types/components/AlphaButton/index.d.ts +3 -0
  78. package/dist/types/components/AlphaButton/index.d.ts.map +1 -0
  79. package/dist/types/components/AlphaFloatingButton/FloatingButton.d.ts +4 -0
  80. package/dist/types/components/AlphaFloatingButton/FloatingButton.d.ts.map +1 -0
  81. package/dist/types/components/AlphaFloatingButton/FloatingButton.types.d.ts +43 -0
  82. package/dist/types/components/AlphaFloatingButton/FloatingButton.types.d.ts.map +1 -0
  83. package/dist/types/components/AlphaFloatingButton/index.d.ts +3 -0
  84. package/dist/types/components/AlphaFloatingButton/index.d.ts.map +1 -0
  85. package/dist/types/components/BaseButton/BaseButton.d.ts.map +1 -1
  86. package/dist/types/components/Button/Button.d.ts.map +1 -1
  87. package/dist/types/index.d.ts +4 -0
  88. package/dist/types/index.d.ts.map +1 -1
  89. package/package.json +3 -3
  90. package/src/components/AlphaAvatar/AlphaAvatar.stories.tsx +63 -0
  91. package/src/components/AlphaAvatar/Avatar.module.scss +54 -0
  92. package/src/components/AlphaAvatar/Avatar.test.tsx +111 -0
  93. package/src/components/AlphaAvatar/Avatar.tsx +159 -0
  94. package/src/components/AlphaAvatar/Avatar.types.ts +64 -0
  95. package/src/components/AlphaAvatar/__snapshots__/Avatar.test.tsx.snap +93 -0
  96. package/src/components/AlphaAvatar/assets/default-avatar.svg +11 -0
  97. package/src/components/AlphaAvatar/index.ts +8 -0
  98. package/src/components/AlphaAvatar/useProgressiveImage.test.ts +96 -0
  99. package/src/components/AlphaAvatar/useProgressiveImage.ts +60 -0
  100. package/src/components/AlphaAvatarGroup/AlphaAvatarGroup.stories.tsx +55 -0
  101. package/src/components/AlphaAvatarGroup/AvatarGroup.module.scss +53 -0
  102. package/src/components/AlphaAvatarGroup/AvatarGroup.test.tsx +93 -0
  103. package/src/components/AlphaAvatarGroup/AvatarGroup.tsx +229 -0
  104. package/src/components/AlphaAvatarGroup/AvatarGroup.types.ts +43 -0
  105. package/src/components/AlphaAvatarGroup/__mocks__/avatarList.ts +39 -0
  106. package/src/components/AlphaAvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap +215 -0
  107. package/src/components/AlphaAvatarGroup/index.ts +2 -0
  108. package/src/components/AlphaButton/AlphaButton.stories.tsx +29 -0
  109. package/src/components/AlphaButton/Button.module.scss +267 -0
  110. package/src/components/AlphaButton/Button.tsx +124 -0
  111. package/src/components/AlphaButton/Button.types.ts +73 -0
  112. package/src/components/AlphaButton/index.ts +7 -0
  113. package/src/components/AlphaFloatingButton/AlphaFloatingButton.stories.tsx +29 -0
  114. package/src/components/AlphaFloatingButton/FloatingButton.module.scss +204 -0
  115. package/src/components/AlphaFloatingButton/FloatingButton.tsx +123 -0
  116. package/src/components/AlphaFloatingButton/FloatingButton.types.ts +71 -0
  117. package/src/components/AlphaFloatingButton/index.ts +7 -0
  118. package/src/components/BaseButton/BaseButton.tsx +5 -2
  119. package/src/components/Button/Button.module.scss +4 -0
  120. package/src/components/Button/Button.stories.tsx +1 -1
  121. package/src/components/Button/Button.tsx +0 -3
  122. package/src/components/LegacyStack/LegacyStack.stories.tsx +7 -10
  123. package/src/index.ts +4 -0
@@ -0,0 +1,121 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+ var index = require('../../node_modules/classnames/index.js');
5
+ var type = require('../../utils/type.js');
6
+ var AvatarGroup = require('../AlphaAvatarGroup/AvatarGroup.js');
7
+ var defaultAvatar = require('./assets/default-avatar.svg.js');
8
+ var useProgressiveImage = require('./useProgressiveImage.js');
9
+ var Avatar_module = require('./Avatar.module.scss.js');
10
+ var ThemeProvider = require('../ThemeProvider/ThemeProvider.js');
11
+ var SmoothCornersBox = require('../SmoothCornersBox/SmoothCornersBox.js');
12
+ var Status = require('../Status/Status.js');
13
+
14
+ function getStatusSize(size) {
15
+ switch (size) {
16
+ case '90':
17
+ case '120':
18
+ return 'l';
19
+ default:
20
+ return 'm';
21
+ }
22
+ }
23
+ function getShadow(size) {
24
+ const spreadRadius = (() => {
25
+ switch (size) {
26
+ case '90':
27
+ return 3;
28
+ case '120':
29
+ return 4;
30
+ default:
31
+ return 2;
32
+ }
33
+ })();
34
+ return {
35
+ spreadRadius,
36
+ color: 'bg-white-high'
37
+ };
38
+ }
39
+ function useAvatarRadiusToken() {
40
+ // TODO: Replace this with useAlphaTokens
41
+ return ThemeProvider.useTokens().global.radius['radius-42-p'];
42
+ }
43
+ const AVATAR_WRAPPER_TEST_ID = 'bezier-avatar-wrapper';
44
+ const AVATAR_TEST_ID = 'bezier-avatar';
45
+ const STATUS_WRAPPER_TEST_ID = 'bezier-status-wrapper';
46
+
47
+ /**
48
+ * `Avatar` is a component for representing some profile image.
49
+ * @example
50
+ *
51
+ * ```tsx
52
+ * <Avatar
53
+ * avatarUrl="https://..."
54
+ * name="channel"
55
+ * size="48"
56
+ * showBorder
57
+ * disabled
58
+ * />
59
+ * ```
60
+ */
61
+ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar({
62
+ avatarUrl = '',
63
+ fallbackUrl = defaultAvatar.default,
64
+ size: sizeProps = '24',
65
+ name,
66
+ disabled = false,
67
+ showBorder = false,
68
+ smoothCorners = true,
69
+ status,
70
+ className,
71
+ children,
72
+ ...rest
73
+ }, forwardedRef) {
74
+ const avatarGroupContext = AvatarGroup.useAvatarGroupContext();
75
+ const size = avatarGroupContext?.size ?? sizeProps;
76
+ const loadedAvatarUrl = useProgressiveImage.default(avatarUrl, fallbackUrl);
77
+ const AVATAR_BORDER_RADIUS = useAvatarRadiusToken();
78
+ const StatusComponent = React.useMemo(() => {
79
+ if (type.isEmpty(children) && !status || children && ! /*#__PURE__*/React.isValidElement(children)) {
80
+ return null;
81
+ }
82
+ const Contents = (() => {
83
+ if (children) {
84
+ return children;
85
+ }
86
+ if (status) {
87
+ return /*#__PURE__*/React.createElement(Status.Status, {
88
+ type: status,
89
+ size: getStatusSize(size)
90
+ });
91
+ }
92
+ return null;
93
+ })();
94
+ return Contents && /*#__PURE__*/React.createElement("div", {
95
+ className: Avatar_module.default.StatusWrapper,
96
+ "data-testid": STATUS_WRAPPER_TEST_ID
97
+ }, Contents);
98
+ }, [status, size, children]);
99
+ return /*#__PURE__*/React.createElement("div", Object.assign({
100
+ className: index.default(Avatar_module.default.Avatar, Avatar_module.default[`size-${size}`], disabled && Avatar_module.default.disabled, className),
101
+ "data-disabled": disabled,
102
+ "data-testid": AVATAR_WRAPPER_TEST_ID
103
+ }, rest), /*#__PURE__*/React.createElement(SmoothCornersBox.SmoothCornersBox, {
104
+ ref: forwardedRef,
105
+ "aria-label": name,
106
+ className: index.default(Avatar_module.default.AvatarImage, Number(size) >= 72 && Avatar_module.default['big-size'], showBorder && Avatar_module.default.bordered),
107
+ disabled: !smoothCorners,
108
+ borderRadius: AVATAR_BORDER_RADIUS,
109
+ shadow: showBorder ? getShadow(size) : undefined,
110
+ backgroundColor: "bg-white-normal",
111
+ backgroundImage: loadedAvatarUrl,
112
+ "data-testid": AVATAR_TEST_ID
113
+ }, StatusComponent));
114
+ });
115
+
116
+ exports.AVATAR_TEST_ID = AVATAR_TEST_ID;
117
+ exports.AVATAR_WRAPPER_TEST_ID = AVATAR_WRAPPER_TEST_ID;
118
+ exports.Avatar = Avatar;
119
+ exports.STATUS_WRAPPER_TEST_ID = STATUS_WRAPPER_TEST_ID;
120
+ exports.useAvatarRadiusToken = useAvatarRadiusToken;
121
+ //# sourceMappingURL=Avatar.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Avatar.js","sources":["../../../../src/components/AlphaAvatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react'\n\nimport classNames from 'classnames'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport { useAvatarGroupContext } from '~/src/components/AlphaAvatarGroup/AvatarGroup'\nimport {\n SmoothCornersBox,\n type SmoothCornersBoxProps,\n} from '~/src/components/SmoothCornersBox'\nimport { Status, type StatusSize } from '~/src/components/Status'\nimport { useTokens } from '~/src/components/ThemeProvider'\n\nimport type { AvatarProps, AvatarSize } from './Avatar.types'\nimport defaultAvatarUrl from './assets/default-avatar.svg'\nimport useProgressiveImage from './useProgressiveImage'\n\nimport styles from './Avatar.module.scss'\n\nfunction getStatusSize(size: AvatarSize): StatusSize {\n switch (size) {\n case '90':\n case '120':\n return 'l'\n default:\n return 'm'\n }\n}\n\nfunction getShadow(size: AvatarSize): SmoothCornersBoxProps['shadow'] {\n const spreadRadius = (() => {\n switch (size) {\n case '90':\n return 3\n case '120':\n return 4\n default:\n return 2\n }\n })()\n\n return {\n spreadRadius,\n color: 'bg-white-high',\n }\n}\n\nexport function useAvatarRadiusToken() {\n // TODO: Replace this with useAlphaTokens\n return useTokens().global.radius['radius-42-p']\n}\n\nexport const AVATAR_WRAPPER_TEST_ID = 'bezier-avatar-wrapper'\nexport const AVATAR_TEST_ID = 'bezier-avatar'\nexport const STATUS_WRAPPER_TEST_ID = 'bezier-status-wrapper'\n\n/**\n * `Avatar` is a component for representing some profile image.\n * @example\n *\n * ```tsx\n * <Avatar\n * avatarUrl=\"https://...\"\n * name=\"channel\"\n * size=\"48\"\n * showBorder\n * disabled\n * />\n * ```\n */\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n {\n avatarUrl = '',\n fallbackUrl = defaultAvatarUrl,\n size: sizeProps = '24',\n name,\n disabled = false,\n showBorder = false,\n smoothCorners = true,\n status,\n className,\n children,\n ...rest\n },\n forwardedRef\n) {\n const avatarGroupContext = useAvatarGroupContext()\n const size = avatarGroupContext?.size ?? sizeProps\n const loadedAvatarUrl = useProgressiveImage(avatarUrl, fallbackUrl)\n const AVATAR_BORDER_RADIUS = useAvatarRadiusToken()\n\n const StatusComponent = useMemo(() => {\n if (\n (isEmpty(children) && !status) ||\n (children && !React.isValidElement(children))\n ) {\n return null\n }\n\n const Contents = (() => {\n if (children) {\n return children\n }\n if (status) {\n return (\n <Status\n type={status}\n size={getStatusSize(size)}\n />\n )\n }\n return null\n })()\n\n return (\n Contents && (\n <div\n className={styles.StatusWrapper}\n data-testid={STATUS_WRAPPER_TEST_ID}\n >\n {Contents}\n </div>\n )\n )\n }, [status, size, children])\n\n return (\n <div\n className={classNames(\n styles.Avatar,\n styles[`size-${size}`],\n disabled && styles.disabled,\n className\n )}\n data-disabled={disabled}\n data-testid={AVATAR_WRAPPER_TEST_ID}\n {...rest}\n >\n <SmoothCornersBox\n ref={forwardedRef}\n aria-label={name}\n className={classNames(\n styles.AvatarImage,\n Number(size) >= 72 && styles['big-size'],\n showBorder && styles.bordered\n )}\n disabled={!smoothCorners}\n borderRadius={AVATAR_BORDER_RADIUS}\n shadow={showBorder ? getShadow(size) : undefined}\n backgroundColor=\"bg-white-normal\"\n backgroundImage={loadedAvatarUrl}\n data-testid={AVATAR_TEST_ID}\n >\n {StatusComponent}\n </SmoothCornersBox>\n </div>\n )\n})\n"],"names":["getStatusSize","size","getShadow","spreadRadius","color","useAvatarRadiusToken","useTokens","global","radius","AVATAR_WRAPPER_TEST_ID","AVATAR_TEST_ID","STATUS_WRAPPER_TEST_ID","Avatar","forwardRef","avatarUrl","fallbackUrl","defaultAvatarUrl","sizeProps","name","disabled","showBorder","smoothCorners","status","className","children","rest","forwardedRef","avatarGroupContext","useAvatarGroupContext","loadedAvatarUrl","useProgressiveImage","AVATAR_BORDER_RADIUS","StatusComponent","useMemo","isEmpty","React","isValidElement","Contents","createElement","Status","type","styles","StatusWrapper","Object","assign","classNames","SmoothCornersBox","ref","AvatarImage","Number","bordered","borderRadius","shadow","undefined","backgroundColor","backgroundImage"],"mappings":"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"}
@@ -0,0 +1,8 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var styles = {"Avatar":"b-fDR-U","disabled":"b-SnNT0","size-16":"b-v3W6R","size-20":"b-gC4cV","size-24":"b-lgU-A","size-30":"b-O61k6","size-36":"b-3M3QV","size-42":"b-cA6AB","size-48":"b-NETn8","size-72":"b-4bOSq","size-90":"b-dNqNN","size-120":"b-wyYTI","AvatarImage":"b-K69h3","big-size":"b-s7757","bordered":"b-Qctjl","StatusWrapper":"b-ZSr4L"};
6
+
7
+ exports.default = styles;
8
+ //# sourceMappingURL=Avatar.module.scss.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Avatar.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
@@ -0,0 +1,8 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var defaultAvatarUrl = "data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url%28%23clip0%29%22%3E%3Crect%20width%3D%2260%22%20height%3D%2260%22%20fill%3D%22%23cfccfb%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M41%2023C41%2029.0744%2036.0744%2034%2030%2034C23.9256%2034%2019%2029.0744%2019%2023C19%2016.9256%2023.9256%2012%2030%2012C36.0744%2012%2041%2016.9256%2041%2023ZM30%2037C16.1929%2037%205%2048.1929%205%2062V90H55V62C55%2048.1929%2043.8071%2037%2030%2037Z%22%20fill%3D%22white%22%20fill-opacity%3D%220.4%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0%22%3E%3Crect%20width%3D%2260%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E";
6
+
7
+ exports.default = defaultAvatarUrl;
8
+ //# sourceMappingURL=default-avatar.svg.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"default-avatar.svg.js","sources":["../../../../../src/components/AlphaAvatar/assets/default-avatar.svg"],"sourcesContent":["export default \"data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url%28%23clip0%29%22%3E%3Crect%20width%3D%2260%22%20height%3D%2260%22%20fill%3D%22%23cfccfb%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M41%2023C41%2029.0744%2036.0744%2034%2030%2034C23.9256%2034%2019%2029.0744%2019%2023C19%2016.9256%2023.9256%2012%2030%2012C36.0744%2012%2041%2016.9256%2041%2023ZM30%2037C16.1929%2037%205%2048.1929%205%2062V90H55V62C55%2048.1929%2043.8071%2037%2030%2037Z%22%20fill%3D%22white%22%20fill-opacity%3D%220.4%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0%22%3E%3Crect%20width%3D%2260%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E\""],"names":[],"mappings":";;;;AAAA,uBAAe;;;;"}
@@ -0,0 +1,48 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var React = require('react');
6
+
7
+ const imageCache = new Map();
8
+ function getCachedImage(src) {
9
+ const cachedImage = imageCache.get(src);
10
+ if (!cachedImage) {
11
+ return null;
12
+ }
13
+ return cachedImage;
14
+ }
15
+ function useProgressiveImage(src, defaultSrc) {
16
+ const [source, setSource] = React.useState(() => getCachedImage(src));
17
+ React.useEffect(function updateSource() {
18
+ if (source?.src === src) {
19
+ return undefined;
20
+ }
21
+ const cachedImage = getCachedImage(src);
22
+ if (cachedImage?.isLoaded) {
23
+ setSource(cachedImage);
24
+ return undefined;
25
+ }
26
+ const image = new Image();
27
+ image.src = src;
28
+ image.onload = loadImage(true);
29
+ image.onerror = loadImage(false);
30
+ function loadImage(isLoaded) {
31
+ return () => {
32
+ const loadedImage = {
33
+ src,
34
+ isLoaded
35
+ };
36
+ setSource(loadedImage);
37
+ imageCache.set(src, loadedImage);
38
+ };
39
+ }
40
+ }, [src, source]);
41
+ if (!source || !source.isLoaded) {
42
+ return defaultSrc;
43
+ }
44
+ return source.src;
45
+ }
46
+
47
+ exports.default = useProgressiveImage;
48
+ //# sourceMappingURL=useProgressiveImage.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useProgressiveImage.js","sources":["../../../../src/components/AlphaAvatar/useProgressiveImage.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\n\ninterface CachedImage {\n src: string\n isLoaded: boolean\n}\n\nconst imageCache = new Map<string, CachedImage>()\n\nfunction getCachedImage(src: string) {\n const cachedImage = imageCache.get(src)\n if (!cachedImage) {\n return null\n }\n return cachedImage\n}\n\nexport default function useProgressiveImage(src: string, defaultSrc: string) {\n const [source, setSource] = useState<CachedImage | null>(() =>\n getCachedImage(src)\n )\n\n useEffect(\n function updateSource() {\n if (source?.src === src) {\n return undefined\n }\n\n const cachedImage = getCachedImage(src)\n\n if (cachedImage?.isLoaded) {\n setSource(cachedImage)\n return undefined\n }\n\n const image = new Image()\n image.src = src\n image.onload = loadImage(true)\n image.onerror = loadImage(false)\n\n function loadImage(isLoaded: boolean) {\n return () => {\n const loadedImage = {\n src,\n isLoaded,\n }\n setSource(loadedImage)\n imageCache.set(src, loadedImage)\n }\n }\n },\n [src, source]\n )\n\n if (!source || !source.isLoaded) {\n return defaultSrc\n }\n\n return source.src\n}\n"],"names":["imageCache","Map","getCachedImage","src","cachedImage","get","useProgressiveImage","defaultSrc","source","setSource","useState","useEffect","updateSource","undefined","isLoaded","image","Image","onload","loadImage","onerror","loadedImage","set"],"mappings":";;;;;;AAOA,MAAMA,UAAU,GAAG,IAAIC,GAAG,EAAuB,CAAA;AAEjD,SAASC,cAAcA,CAACC,GAAW,EAAE;AACnC,EAAA,MAAMC,WAAW,GAAGJ,UAAU,CAACK,GAAG,CAACF,GAAG,CAAC,CAAA;EACvC,IAAI,CAACC,WAAW,EAAE;AAChB,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;AACA,EAAA,OAAOA,WAAW,CAAA;AACpB,CAAA;AAEe,SAASE,mBAAmBA,CAACH,GAAW,EAAEI,UAAkB,EAAE;AAC3E,EAAA,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGC,cAAQ,CAAqB,MACvDR,cAAc,CAACC,GAAG,CACpB,CAAC,CAAA;AAEDQ,EAAAA,eAAS,CACP,SAASC,YAAYA,GAAG;AACtB,IAAA,IAAIJ,MAAM,EAAEL,GAAG,KAAKA,GAAG,EAAE;AACvB,MAAA,OAAOU,SAAS,CAAA;AAClB,KAAA;AAEA,IAAA,MAAMT,WAAW,GAAGF,cAAc,CAACC,GAAG,CAAC,CAAA;IAEvC,IAAIC,WAAW,EAAEU,QAAQ,EAAE;MACzBL,SAAS,CAACL,WAAW,CAAC,CAAA;AACtB,MAAA,OAAOS,SAAS,CAAA;AAClB,KAAA;AAEA,IAAA,MAAME,KAAK,GAAG,IAAIC,KAAK,EAAE,CAAA;IACzBD,KAAK,CAACZ,GAAG,GAAGA,GAAG,CAAA;AACfY,IAAAA,KAAK,CAACE,MAAM,GAAGC,SAAS,CAAC,IAAI,CAAC,CAAA;AAC9BH,IAAAA,KAAK,CAACI,OAAO,GAAGD,SAAS,CAAC,KAAK,CAAC,CAAA;IAEhC,SAASA,SAASA,CAACJ,QAAiB,EAAE;AACpC,MAAA,OAAO,MAAM;AACX,QAAA,MAAMM,WAAW,GAAG;UAClBjB,GAAG;AACHW,UAAAA,QAAAA;SACD,CAAA;QACDL,SAAS,CAACW,WAAW,CAAC,CAAA;AACtBpB,QAAAA,UAAU,CAACqB,GAAG,CAAClB,GAAG,EAAEiB,WAAW,CAAC,CAAA;OACjC,CAAA;AACH,KAAA;AACF,GAAC,EACD,CAACjB,GAAG,EAAEK,MAAM,CACd,CAAC,CAAA;AAED,EAAA,IAAI,CAACA,MAAM,IAAI,CAACA,MAAM,CAACM,QAAQ,EAAE;AAC/B,IAAA,OAAOP,UAAU,CAAA;AACnB,GAAA;EAEA,OAAOC,MAAM,CAACL,GAAG,CAAA;AACnB;;;;"}
@@ -0,0 +1,153 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+ var bezierIcons = require('@channel.io/bezier-icons');
5
+ var index = require('../../node_modules/classnames/index.js');
6
+ var array = require('../../utils/array.js');
7
+ var react = require('../../utils/react.js');
8
+ var style = require('../../utils/style.js');
9
+ var AvatarGroup_module = require('./AvatarGroup.module.scss.js');
10
+ var Avatar = require('../AlphaAvatar/Avatar.js');
11
+ var SmoothCornersBox = require('../SmoothCornersBox/SmoothCornersBox.js');
12
+ var Icon = require('../Icon/Icon.js');
13
+ var Text = require('../Text/Text.js');
14
+
15
+ const [AvatarGroupContextProvider, useAvatarGroupContext] = react.createContext(undefined);
16
+ const MAX_AVATAR_LIST_COUNT = 99;
17
+ const AVATAR_GROUP_DEFAULT_SPACING = 4;
18
+ const AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID = 'bezier-avatar-group-ellipsis-icon';
19
+ function getRestAvatarListCountText(count, max) {
20
+ const restCount = count - max;
21
+ return `+${restCount > MAX_AVATAR_LIST_COUNT ? MAX_AVATAR_LIST_COUNT : restCount}`;
22
+ }
23
+
24
+ // TODO: Not specified
25
+ function getProperIconSize(size) {
26
+ return {
27
+ 16: 'xxs',
28
+ 20: 'xxs',
29
+ 24: 'xs',
30
+ 30: 's',
31
+ 36: 'm',
32
+ 42: 'm',
33
+ 48: 'l',
34
+ 72: 'l',
35
+ 90: 'l',
36
+ 120: 'l'
37
+ }[size];
38
+ }
39
+
40
+ // TODO: Not specified
41
+ function getProperTypoSize(size) {
42
+ return {
43
+ 16: '12',
44
+ 20: '12',
45
+ 24: '13',
46
+ 30: '15',
47
+ 36: '16',
48
+ 42: '18',
49
+ 48: '24',
50
+ 72: '24',
51
+ 90: '24',
52
+ 120: '24'
53
+ }[size];
54
+ }
55
+
56
+ /**
57
+ * `AvatarGroup` is a component for grouping `Avatar` components
58
+ * @example
59
+ *
60
+ * ```tsx
61
+ * <AvatarGroup
62
+ * max={2}
63
+ * size="24"
64
+ * spacing={4}
65
+ * ellipsisType="icon"
66
+ * >
67
+ * <Avatar />
68
+ * <Avatar />
69
+ * <Avatar />
70
+ * </AvatarGroup>
71
+ * ```
72
+ */
73
+ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup({
74
+ max = 5,
75
+ size = '24',
76
+ spacing = AVATAR_GROUP_DEFAULT_SPACING,
77
+ ellipsisType = 'icon',
78
+ style: style$1,
79
+ className,
80
+ children,
81
+ ...rest
82
+ }, forwardedRef) {
83
+ const AVATAR_BORDER_RADIUS = Avatar.useAvatarRadiusToken();
84
+ const avatarListCount = React.Children.count(children);
85
+ const renderAvatarElement = React.useCallback(avatar => {
86
+ const key = avatar.key ?? `${avatar.props.name}-${avatar.props.avatarUrl}`;
87
+ const shouldShowBorder = max > 1 && avatarListCount > 1 && spacing < 0;
88
+ const showBorder = avatar.props.showBorder || shouldShowBorder;
89
+ return /*#__PURE__*/React.cloneElement(avatar, {
90
+ key,
91
+ showBorder
92
+ });
93
+ }, [avatarListCount, max, spacing]);
94
+ const AvatarListComponent = React.useMemo(() => {
95
+ return React.Children.toArray(children).slice(0, max).map((avatar, index$1, arr) => {
96
+ if (! /*#__PURE__*/React.isValidElement(avatar)) {
97
+ return null;
98
+ }
99
+ const AvatarElement = renderAvatarElement(avatar);
100
+ if (!array.isLastIndex(arr, index$1) || avatarListCount <= max) {
101
+ return AvatarElement;
102
+ }
103
+ if (ellipsisType === 'icon') {
104
+ return /*#__PURE__*/React.createElement("div", {
105
+ key: "ellipsis",
106
+ className: AvatarGroup_module.default.AvatarEllipsisIconWrapper,
107
+ "data-testid": AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID
108
+ }, /*#__PURE__*/React.createElement(SmoothCornersBox.SmoothCornersBox, {
109
+ borderRadius: AVATAR_BORDER_RADIUS,
110
+ backgroundColor: "bgtxt-absolute-black-lightest",
111
+ className: AvatarGroup_module.default.AvatarEllipsisIcon
112
+ }, /*#__PURE__*/React.createElement(Icon.Icon, {
113
+ source: bezierIcons.MoreIcon,
114
+ size: getProperIconSize(size),
115
+ color: "bgtxt-absolute-white-dark"
116
+ })), AvatarElement);
117
+ }
118
+ if (ellipsisType === 'count') {
119
+ return /*#__PURE__*/React.createElement(React.Fragment, {
120
+ key: "ellipsis"
121
+ }, AvatarElement, /*#__PURE__*/React.createElement("div", {
122
+ style: {
123
+ '--b-avatar-group-ellipsis-ml': style.px(Math.max(spacing, AVATAR_GROUP_DEFAULT_SPACING))
124
+ },
125
+ className: index.default(AvatarGroup_module.default.AvatarEllipsisCountWrapper)
126
+ }, /*#__PURE__*/React.createElement(Text.Text, {
127
+ typo: getProperTypoSize(size),
128
+ color: "txt-black-dark",
129
+ className: AvatarGroup_module.default.AvatarEllipsisCount
130
+ }, getRestAvatarListCountText(avatarListCount, max))));
131
+ }
132
+ return null;
133
+ });
134
+ }, [avatarListCount, max, children, renderAvatarElement, ellipsisType, AVATAR_BORDER_RADIUS, size, spacing]);
135
+ return /*#__PURE__*/React.createElement(AvatarGroupContextProvider, {
136
+ value: React.useMemo(() => ({
137
+ size
138
+ }), [size])
139
+ }, /*#__PURE__*/React.createElement("div", Object.assign({
140
+ role: "group",
141
+ ref: forwardedRef,
142
+ className: index.default(AvatarGroup_module.default.AvatarGroup, AvatarGroup_module.default[`size-${size}`], className),
143
+ style: {
144
+ '--b-avatar-group-spacing': style.px(spacing),
145
+ ...style$1
146
+ }
147
+ }, rest), AvatarListComponent));
148
+ });
149
+
150
+ exports.AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID = AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID;
151
+ exports.AvatarGroup = AvatarGroup;
152
+ exports.useAvatarGroupContext = useAvatarGroupContext;
153
+ //# sourceMappingURL=AvatarGroup.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AvatarGroup.js","sources":["../../../../src/components/AlphaAvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react'\n\nimport { MoreIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { isLastIndex } from '~/src/utils/array'\nimport { createContext } from '~/src/utils/react'\nimport { px } from '~/src/utils/style'\n\nimport {\n type AlphaAvatarProps,\n type AlphaAvatarSize,\n useAlphaAvatarRadiusToken,\n} from '~/src/components/AlphaAvatar'\nimport { Icon } from '~/src/components/Icon'\nimport { SmoothCornersBox } from '~/src/components/SmoothCornersBox'\nimport { Text } from '~/src/components/Text'\n\nimport {\n type AvatarGroupContextValue,\n type AvatarGroupProps,\n} from './AvatarGroup.types'\n\nimport styles from './AvatarGroup.module.scss'\n\nconst [AvatarGroupContextProvider, useAvatarGroupContext] = createContext<\n AvatarGroupContextValue | undefined\n>(undefined)\n\nexport { useAvatarGroupContext }\n\nconst MAX_AVATAR_LIST_COUNT = 99\nconst AVATAR_GROUP_DEFAULT_SPACING = 4\nexport const AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID =\n 'bezier-avatar-group-ellipsis-icon'\n\nfunction getRestAvatarListCountText(count: number, max: number) {\n const restCount = count - max\n return `+${restCount > MAX_AVATAR_LIST_COUNT ? MAX_AVATAR_LIST_COUNT : restCount}`\n}\n\n// TODO: Not specified\nfunction getProperIconSize(size: AlphaAvatarSize) {\n return (\n {\n 16: 'xxs',\n 20: 'xxs',\n 24: 'xs',\n 30: 's',\n 36: 'm',\n 42: 'm',\n 48: 'l',\n 72: 'l',\n 90: 'l',\n 120: 'l',\n } as const\n )[size]\n}\n\n// TODO: Not specified\nfunction getProperTypoSize(size: AlphaAvatarSize) {\n return (\n {\n 16: '12',\n 20: '12',\n 24: '13',\n 30: '15',\n 36: '16',\n 42: '18',\n 48: '24',\n 72: '24',\n 90: '24',\n 120: '24',\n } as const\n )[size]\n}\n\n/**\n * `AvatarGroup` is a component for grouping `Avatar` components\n * @example\n *\n * ```tsx\n * <AvatarGroup\n * max={2}\n * size=\"24\"\n * spacing={4}\n * ellipsisType=\"icon\"\n * >\n * <Avatar />\n * <Avatar />\n * <Avatar />\n * </AvatarGroup>\n * ```\n */\nexport const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(\n function AvatarGroup(\n {\n max = 5,\n size = '24',\n spacing = AVATAR_GROUP_DEFAULT_SPACING,\n ellipsisType = 'icon',\n style,\n className,\n children,\n ...rest\n },\n forwardedRef\n ) {\n const AVATAR_BORDER_RADIUS = useAlphaAvatarRadiusToken()\n const avatarListCount = React.Children.count(children)\n\n const renderAvatarElement = useCallback(\n (avatar: React.ReactElement<AlphaAvatarProps>) => {\n const key =\n avatar.key ?? `${avatar.props.name}-${avatar.props.avatarUrl}`\n const shouldShowBorder = max > 1 && avatarListCount > 1 && spacing < 0\n const showBorder = avatar.props.showBorder || shouldShowBorder\n return React.cloneElement(avatar, { key, showBorder })\n },\n [avatarListCount, max, spacing]\n )\n\n const AvatarListComponent = useMemo(() => {\n return React.Children.toArray(children)\n .slice(0, max)\n .map((avatar, index, arr) => {\n if (!React.isValidElement<AlphaAvatarProps>(avatar)) {\n return null\n }\n\n const AvatarElement = renderAvatarElement(avatar)\n\n if (!isLastIndex(arr, index) || avatarListCount <= max) {\n return AvatarElement\n }\n\n if (ellipsisType === 'icon') {\n return (\n <div\n key=\"ellipsis\"\n className={styles.AvatarEllipsisIconWrapper}\n data-testid={AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID}\n >\n <SmoothCornersBox\n borderRadius={AVATAR_BORDER_RADIUS}\n backgroundColor=\"bgtxt-absolute-black-lightest\"\n className={styles.AvatarEllipsisIcon}\n >\n <Icon\n source={MoreIcon}\n size={getProperIconSize(size)}\n color=\"bgtxt-absolute-white-dark\"\n />\n </SmoothCornersBox>\n {AvatarElement}\n </div>\n )\n }\n\n if (ellipsisType === 'count') {\n return (\n <React.Fragment key=\"ellipsis\">\n {AvatarElement}\n <div\n style={\n {\n '--b-avatar-group-ellipsis-ml': px(\n Math.max(spacing, AVATAR_GROUP_DEFAULT_SPACING)\n ),\n } as React.CSSProperties\n }\n className={classNames(styles.AvatarEllipsisCountWrapper)}\n >\n <Text\n typo={getProperTypoSize(size)}\n color=\"txt-black-dark\"\n className={styles.AvatarEllipsisCount}\n >\n {getRestAvatarListCountText(avatarListCount, max)}\n </Text>\n </div>\n </React.Fragment>\n )\n }\n\n return null\n })\n }, [\n avatarListCount,\n max,\n children,\n renderAvatarElement,\n ellipsisType,\n AVATAR_BORDER_RADIUS,\n size,\n spacing,\n ])\n\n return (\n <AvatarGroupContextProvider\n value={useMemo(\n () => ({\n size,\n }),\n [size]\n )}\n >\n <div\n role=\"group\"\n ref={forwardedRef}\n className={classNames(\n styles.AvatarGroup,\n styles[`size-${size}`],\n className\n )}\n style={\n {\n '--b-avatar-group-spacing': px(spacing),\n ...style,\n } as React.CSSProperties\n }\n {...rest}\n >\n {AvatarListComponent}\n </div>\n </AvatarGroupContextProvider>\n )\n }\n)\n"],"names":["AvatarGroupContextProvider","useAvatarGroupContext","createContext","undefined","MAX_AVATAR_LIST_COUNT","AVATAR_GROUP_DEFAULT_SPACING","AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID","getRestAvatarListCountText","count","max","restCount","getProperIconSize","size","getProperTypoSize","AvatarGroup","forwardRef","spacing","ellipsisType","style","className","children","rest","forwardedRef","AVATAR_BORDER_RADIUS","useAlphaAvatarRadiusToken","avatarListCount","React","Children","renderAvatarElement","useCallback","avatar","key","props","name","avatarUrl","shouldShowBorder","showBorder","cloneElement","AvatarListComponent","useMemo","toArray","slice","map","index","arr","isValidElement","AvatarElement","isLastIndex","createElement","styles","AvatarEllipsisIconWrapper","SmoothCornersBox","borderRadius","backgroundColor","AvatarEllipsisIcon","Icon","source","MoreIcon","color","Fragment","px","Math","classNames","AvatarEllipsisCountWrapper","Text","typo","AvatarEllipsisCount","value","Object","assign","role","ref"],"mappings":"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"}
@@ -0,0 +1,8 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var styles = {"Avatar":"b-EUIBZ","disabled":"b-r0qvh","size-16":"b-ieYAz","size-20":"b-kYxYF","size-24":"b-89-dE","size-30":"b-3oC7r","size-36":"b-saxkg","size-42":"b-SnpVF","size-48":"b-MdIGf","size-72":"b-lWIXR","size-90":"b-Ny-RI","size-120":"b--IfyP","AvatarImage":"b-OXNdE","big-size":"b-zD-uu","bordered":"b--g-5e","StatusWrapper":"b-TwIX8","AvatarGroup":"b-27zD4","AvatarEllipsisIconWrapper":"b-DAfQV","AvatarEllipsisIcon":"b-3kWFn","AvatarEllipsisCountWrapper":"b-l557G","AvatarEllipsisCount":"b-LTmB2"};
6
+
7
+ exports.default = styles;
8
+ //# sourceMappingURL=AvatarGroup.module.scss.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AvatarGroup.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
@@ -0,0 +1,78 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+ var index = require('../../node_modules/classnames/index.js');
5
+ var Button_module = require('./Button.module.scss.js');
6
+ var Icon = require('../Icon/Icon.js');
7
+ var Text = require('../Text/Text.js');
8
+ var Spinner = require('../Spinner/Spinner.js');
9
+ var BaseButton = require('../BaseButton/BaseButton.js');
10
+
11
+ function getIconSize(size) {
12
+ return {
13
+ xs: 'xxs',
14
+ s: 'xs',
15
+ m: 's',
16
+ l: 's',
17
+ xl: 'm'
18
+ }[size];
19
+ }
20
+ function getSpinnerSize(size) {
21
+ return {
22
+ xs: 'xs',
23
+ s: 'xs',
24
+ m: 's',
25
+ l: 's',
26
+ xl: 's'
27
+ }[size];
28
+ }
29
+ function getTypography(size) {
30
+ return {
31
+ xs: '13',
32
+ s: '13',
33
+ m: '14',
34
+ l: '15',
35
+ xl: '18'
36
+ }[size];
37
+ }
38
+ const Button = /*#__PURE__*/React.forwardRef(function Button({
39
+ as = BaseButton.BaseButton,
40
+ text,
41
+ prefixIcon,
42
+ suffixIcon,
43
+ color = 'blue',
44
+ variant = 'primary',
45
+ size = 'm',
46
+ disabled,
47
+ active,
48
+ className,
49
+ loading,
50
+ ...rest
51
+ }, forwardedRef) {
52
+ const Comp = as;
53
+ return /*#__PURE__*/React.createElement(Comp, Object.assign({
54
+ ref: forwardedRef,
55
+ className: index.default(Button_module.default.Button, Button_module.default[`size-${size}`], Button_module.default[`variant-${variant}`], Button_module.default[`color-${color}`], active && Button_module.default.active, className)
56
+ }, rest), /*#__PURE__*/React.createElement("div", {
57
+ className: index.default(Button_module.default.ButtonContent, loading && Button_module.default.loading)
58
+ }, prefixIcon && /*#__PURE__*/React.createElement(Icon.Icon, {
59
+ size: getIconSize(size),
60
+ source: prefixIcon,
61
+ className: Button_module.default.ButtonIcon
62
+ }), /*#__PURE__*/React.createElement(Text.Text, {
63
+ className: Button_module.default.ButtonText,
64
+ typo: getTypography(size),
65
+ bold: true
66
+ }, text), suffixIcon && /*#__PURE__*/React.createElement(Icon.Icon, {
67
+ size: getIconSize(size),
68
+ source: suffixIcon,
69
+ className: Button_module.default.ButtonIcon
70
+ })), loading && /*#__PURE__*/React.createElement("div", {
71
+ className: Button_module.default.ButtonLoader
72
+ }, /*#__PURE__*/React.createElement(Spinner.Spinner, {
73
+ size: getSpinnerSize(size)
74
+ })));
75
+ });
76
+
77
+ exports.Button = Button;
78
+ //# sourceMappingURL=Button.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.js","sources":["../../../../src/components/AlphaButton/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { type ButtonProps } from '~/src/components/AlphaButton/Button.types'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { type ButtonSize } from '~/src/components/Button'\nimport { Icon } from '~/src/components/Icon'\nimport { Spinner } from '~/src/components/Spinner'\nimport { Text } from '~/src/components/Text'\n\nimport styles from './Button.module.scss'\n\nfunction getIconSize(size: ButtonSize) {\n return (\n {\n xs: 'xxs',\n s: 'xs',\n m: 's',\n l: 's',\n xl: 'm',\n } as const\n )[size]\n}\n\nfunction getSpinnerSize(size: ButtonSize) {\n return (\n {\n xs: 'xs',\n s: 'xs',\n m: 's',\n l: 's',\n xl: 's',\n } as const\n )[size]\n}\n\nfunction getTypography(size: ButtonSize) {\n return (\n {\n xs: '13',\n s: '13',\n m: '14',\n l: '15',\n xl: '18',\n } as const\n )[size]\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(\n {\n as = BaseButton,\n text,\n prefixIcon,\n suffixIcon,\n color = 'blue',\n variant = 'primary',\n size = 'm',\n disabled,\n active,\n className,\n loading,\n ...rest\n },\n forwardedRef\n ) {\n const Comp = as as typeof BaseButton\n\n return (\n <Comp\n ref={forwardedRef}\n className={classNames(\n styles.Button,\n styles[`size-${size}`],\n styles[`variant-${variant}`],\n styles[`color-${color}`],\n active && styles.active,\n className\n )}\n {...rest}\n >\n <div\n className={classNames(\n styles.ButtonContent,\n loading && styles.loading\n )}\n >\n {prefixIcon && (\n <Icon\n size={getIconSize(size)}\n source={prefixIcon}\n className={styles.ButtonIcon}\n />\n )}\n\n {/* TODO: use AlphaText later, add typo */}\n <Text\n className={styles.ButtonText}\n typo={getTypography(size)}\n bold\n >\n {text}\n </Text>\n\n {suffixIcon && (\n <Icon\n size={getIconSize(size)}\n source={suffixIcon}\n className={styles.ButtonIcon}\n />\n )}\n </div>\n\n {/* TODO: use AlphaSpinner */}\n {loading && (\n <div className={styles.ButtonLoader}>\n <Spinner size={getSpinnerSize(size)} />\n </div>\n )}\n </Comp>\n )\n }\n)\n"],"names":["getIconSize","size","xs","s","m","l","xl","getSpinnerSize","getTypography","Button","forwardRef","as","BaseButton","text","prefixIcon","suffixIcon","color","variant","disabled","active","className","loading","rest","forwardedRef","Comp","React","createElement","Object","assign","ref","classNames","styles","ButtonContent","Icon","source","ButtonIcon","Text","ButtonText","typo","bold","ButtonLoader","Spinner"],"mappings":"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"}
@@ -0,0 +1,8 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var styles = {"Button":"b-Bu63w","size-xs":"b-dMl6r","ButtonText":"b-Xr8t8","size-s":"b-FZTyp","ButtonContent":"b-nSti0","size-m":"b-Tenxe","size-l":"b-IJLB6","size-xl":"b-xKsUH","variant-primary":"b-ohV3j","color-blue":"b-EL8PY","color-cobalt":"b--YAo9","color-red":"b-EAdoN","color-orange":"b-k-FfG","color-green":"b-REP7x","color-pink":"b-dkbxj","color-purple":"b-k3Z8M","color-dark-grey":"b-BudYM","color-light-grey":"b-eO-XU","variant-secondary":"b-l8-bH","variant-tertiary":"b-PB-TW","ButtonIcon":"b-HX6lq","color-white":"b-x9nmp","active":"b-Y2foo","ButtonLoader":"b-TRaYF","loading":"b-rUXJx"};
6
+
7
+ exports.default = styles;
8
+ //# sourceMappingURL=Button.module.scss.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
@@ -0,0 +1,77 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+ var index = require('../../node_modules/classnames/index.js');
5
+ var FloatingButton_module = require('./FloatingButton.module.scss.js');
6
+ var Icon = require('../Icon/Icon.js');
7
+ var Text = require('../Text/Text.js');
8
+ var Spinner = require('../Spinner/Spinner.js');
9
+ var BaseButton = require('../BaseButton/BaseButton.js');
10
+
11
+ function getIconSize(size) {
12
+ return {
13
+ xs: 'xxs',
14
+ s: 'xs',
15
+ m: 's',
16
+ l: 's',
17
+ xl: 'm'
18
+ }[size];
19
+ }
20
+ function getSpinnerSize(size) {
21
+ return {
22
+ xs: 'xs',
23
+ s: 'xs',
24
+ m: 's',
25
+ l: 's',
26
+ xl: 's'
27
+ }[size];
28
+ }
29
+ function getTypography(size) {
30
+ return {
31
+ xs: '13',
32
+ s: '13',
33
+ m: '14',
34
+ l: '15',
35
+ xl: '18'
36
+ }[size];
37
+ }
38
+ const FloatingButton = /*#__PURE__*/React.forwardRef(function Button({
39
+ as = BaseButton.BaseButton,
40
+ text,
41
+ prefixIcon,
42
+ suffixIcon,
43
+ color = 'blue',
44
+ variant = 'primary',
45
+ size = 'm',
46
+ active,
47
+ className,
48
+ loading,
49
+ ...rest
50
+ }, forwardedRef) {
51
+ const Comp = as;
52
+ return /*#__PURE__*/React.createElement(Comp, Object.assign({
53
+ ref: forwardedRef,
54
+ className: index.default(FloatingButton_module.default.FloatingButton, FloatingButton_module.default[`size-${size}`], FloatingButton_module.default[`variant-${variant}`], FloatingButton_module.default[`color-${color}`], active && FloatingButton_module.default.active, className)
55
+ }, rest), /*#__PURE__*/React.createElement("div", {
56
+ className: index.default(FloatingButton_module.default.ButtonContent, loading && FloatingButton_module.default.loading)
57
+ }, prefixIcon && /*#__PURE__*/React.createElement(Icon.Icon, {
58
+ size: getIconSize(size),
59
+ source: prefixIcon,
60
+ className: FloatingButton_module.default.ButtonIcon
61
+ }), /*#__PURE__*/React.createElement(Text.Text, {
62
+ className: FloatingButton_module.default.ButtonText,
63
+ typo: getTypography(size),
64
+ bold: true
65
+ }, text), suffixIcon && /*#__PURE__*/React.createElement(Icon.Icon, {
66
+ size: getIconSize(size),
67
+ source: suffixIcon,
68
+ className: FloatingButton_module.default.ButtonIcon
69
+ })), loading && /*#__PURE__*/React.createElement("div", {
70
+ className: FloatingButton_module.default.ButtonLoader
71
+ }, /*#__PURE__*/React.createElement(Spinner.Spinner, {
72
+ size: getSpinnerSize(size)
73
+ })));
74
+ });
75
+
76
+ exports.FloatingButton = FloatingButton;
77
+ //# sourceMappingURL=FloatingButton.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FloatingButton.js","sources":["../../../../src/components/AlphaFloatingButton/FloatingButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport {\n type FloatingButtonProps,\n type FloatingButtonSize,\n} from '~/src/components/AlphaFloatingButton/FloatingButton.types'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon } from '~/src/components/Icon'\nimport { Spinner } from '~/src/components/Spinner'\nimport { Text } from '~/src/components/Text'\n\nimport styles from './FloatingButton.module.scss'\n\nfunction getIconSize(size: FloatingButtonSize) {\n return (\n {\n xs: 'xxs',\n s: 'xs',\n m: 's',\n l: 's',\n xl: 'm',\n } as const\n )[size]\n}\n\nfunction getSpinnerSize(size: FloatingButtonSize) {\n return (\n {\n xs: 'xs',\n s: 'xs',\n m: 's',\n l: 's',\n xl: 's',\n } as const\n )[size]\n}\n\nfunction getTypography(size: FloatingButtonSize) {\n return (\n {\n xs: '13',\n s: '13',\n m: '14',\n l: '15',\n xl: '18',\n } as const\n )[size]\n}\n\nexport const FloatingButton = forwardRef<\n HTMLButtonElement,\n FloatingButtonProps\n>(function Button(\n {\n as = BaseButton,\n text,\n prefixIcon,\n suffixIcon,\n color = 'blue',\n variant = 'primary',\n size = 'm',\n active,\n className,\n loading,\n ...rest\n },\n forwardedRef\n) {\n const Comp = as as typeof BaseButton\n\n return (\n <Comp\n ref={forwardedRef}\n className={classNames(\n styles.FloatingButton,\n styles[`size-${size}`],\n styles[`variant-${variant}`],\n styles[`color-${color}`],\n active && styles.active,\n className\n )}\n {...rest}\n >\n <div\n className={classNames(styles.ButtonContent, loading && styles.loading)}\n >\n {prefixIcon && (\n <Icon\n size={getIconSize(size)}\n source={prefixIcon}\n className={styles.ButtonIcon}\n />\n )}\n\n {/* TODO: use AlphaText later, add typo */}\n <Text\n className={styles.ButtonText}\n typo={getTypography(size)}\n bold\n >\n {text}\n </Text>\n\n {suffixIcon && (\n <Icon\n size={getIconSize(size)}\n source={suffixIcon}\n className={styles.ButtonIcon}\n />\n )}\n </div>\n\n {/* TODO: use AlphaSpinner */}\n {loading && (\n <div className={styles.ButtonLoader}>\n <Spinner size={getSpinnerSize(size)} />\n </div>\n )}\n </Comp>\n )\n})\n"],"names":["getIconSize","size","xs","s","m","l","xl","getSpinnerSize","getTypography","FloatingButton","forwardRef","Button","as","BaseButton","text","prefixIcon","suffixIcon","color","variant","active","className","loading","rest","forwardedRef","Comp","React","createElement","Object","assign","ref","classNames","styles","ButtonContent","Icon","source","ButtonIcon","Text","ButtonText","typo","bold","ButtonLoader","Spinner"],"mappings":"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"}
@@ -0,0 +1,8 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var styles = {"FloatingButton":"b-bYve2","size-xs":"b-QsWAB","ButtonText":"b-alAiF","size-s":"b-XpD2O","ButtonContent":"b-RUr-1","size-m":"b-o-cLI","size-l":"b-Hk5nU","size-xl":"b-k3y4r","variant-primary":"b-QmpYs","color-blue":"b-Us2nD","color-cobalt":"b-HbgqQ","color-red":"b-KNnPg","color-orange":"b-BuR0o","color-green":"b-e5qII","color-pink":"b-R5OJT","color-purple":"b-Qst2f","color-dark-grey":"b-s325E","color-light-grey":"b-88I-7","variant-secondary":"b-yEZ4V","ButtonIcon":"b--zoBE","active":"b-tMcpZ","ButtonLoader":"b-cOdoe","loading":"b-sFtLb"};
6
+
7
+ exports.default = styles;
8
+ //# sourceMappingURL=FloatingButton.module.scss.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FloatingButton.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}