@channel.io/bezier-react 2.0.4 → 2.0.6
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.
- package/dist/cjs/components/AlphaAvatar/Avatar.js +1 -1
- package/dist/cjs/components/AlphaAvatar/Avatar.js.map +1 -1
- package/dist/cjs/components/AlphaButton/Button.js +18 -10
- package/dist/cjs/components/AlphaButton/Button.js.map +1 -1
- package/dist/cjs/components/AlphaFloatingButton/FloatingButton.js +18 -9
- package/dist/cjs/components/AlphaFloatingButton/FloatingButton.js.map +1 -1
- package/dist/cjs/components/AlphaFloatingIconButton/FloatingIconButton.js +57 -0
- package/dist/cjs/components/AlphaFloatingIconButton/FloatingIconButton.js.map +1 -0
- package/dist/cjs/components/AlphaFloatingIconButton/FloatingIconButton.module.scss.js +8 -0
- package/dist/cjs/components/AlphaFloatingIconButton/FloatingIconButton.module.scss.js.map +1 -0
- package/dist/cjs/components/AlphaIconButton/IconButton.js +59 -0
- package/dist/cjs/components/AlphaIconButton/IconButton.js.map +1 -0
- package/dist/cjs/components/AlphaIconButton/IconButton.module.scss.js +8 -0
- package/dist/cjs/components/AlphaIconButton/IconButton.module.scss.js.map +1 -0
- package/dist/cjs/components/Avatar/Avatar.js +1 -1
- package/dist/cjs/components/Avatar/Avatar.js.map +1 -1
- package/dist/cjs/components/Emoji/Emoji.js +1 -1
- package/dist/cjs/components/Emoji/Emoji.js.map +1 -1
- package/dist/cjs/index.js +4 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/styles.css +1 -1
- package/dist/esm/components/AlphaAvatar/Avatar.mjs +1 -1
- package/dist/esm/components/AlphaAvatar/Avatar.mjs.map +1 -1
- package/dist/esm/components/AlphaButton/Button.mjs +18 -10
- package/dist/esm/components/AlphaButton/Button.mjs.map +1 -1
- package/dist/esm/components/AlphaFloatingButton/FloatingButton.mjs +18 -9
- package/dist/esm/components/AlphaFloatingButton/FloatingButton.mjs.map +1 -1
- package/dist/esm/components/AlphaFloatingIconButton/FloatingIconButton.mjs +55 -0
- package/dist/esm/components/AlphaFloatingIconButton/FloatingIconButton.mjs.map +1 -0
- package/dist/esm/components/AlphaFloatingIconButton/FloatingIconButton.module.scss.mjs +4 -0
- package/dist/esm/components/AlphaFloatingIconButton/FloatingIconButton.module.scss.mjs.map +1 -0
- package/dist/esm/components/AlphaIconButton/IconButton.mjs +57 -0
- package/dist/esm/components/AlphaIconButton/IconButton.mjs.map +1 -0
- package/dist/esm/components/AlphaIconButton/IconButton.module.scss.mjs +4 -0
- package/dist/esm/components/AlphaIconButton/IconButton.module.scss.mjs.map +1 -0
- package/dist/esm/components/Avatar/Avatar.mjs +1 -1
- package/dist/esm/components/Avatar/Avatar.mjs.map +1 -1
- package/dist/esm/components/Emoji/Emoji.mjs +1 -1
- package/dist/esm/components/Emoji/Emoji.mjs.map +1 -1
- package/dist/esm/index.mjs +2 -0
- package/dist/esm/index.mjs.map +1 -1
- package/dist/esm/styles.css +1 -1
- package/dist/types/components/AlphaButton/Button.d.ts.map +1 -1
- package/dist/types/components/AlphaButton/Button.types.d.ts +3 -2
- package/dist/types/components/AlphaButton/Button.types.d.ts.map +1 -1
- package/dist/types/components/AlphaFloatingButton/FloatingButton.d.ts.map +1 -1
- package/dist/types/components/AlphaFloatingButton/FloatingButton.types.d.ts +3 -2
- package/dist/types/components/AlphaFloatingButton/FloatingButton.types.d.ts.map +1 -1
- package/dist/types/components/AlphaFloatingIconButton/FloatingIconButton.d.ts +4 -0
- package/dist/types/components/AlphaFloatingIconButton/FloatingIconButton.d.ts.map +1 -0
- package/dist/types/components/AlphaFloatingIconButton/FloatingIconButton.types.d.ts +37 -0
- package/dist/types/components/AlphaFloatingIconButton/FloatingIconButton.types.d.ts.map +1 -0
- package/dist/types/components/AlphaFloatingIconButton/index.d.ts +3 -0
- package/dist/types/components/AlphaFloatingIconButton/index.d.ts.map +1 -0
- package/dist/types/components/AlphaIconButton/IconButton.d.ts +4 -0
- package/dist/types/components/AlphaIconButton/IconButton.d.ts.map +1 -0
- package/dist/types/components/AlphaIconButton/IconButton.types.d.ts +42 -0
- package/dist/types/components/AlphaIconButton/IconButton.types.d.ts.map +1 -0
- package/dist/types/components/AlphaIconButton/index.d.ts +3 -0
- package/dist/types/components/AlphaIconButton/index.d.ts.map +1 -0
- package/dist/types/index.d.ts +2 -0
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/components/AlphaAvatar/Avatar.tsx +1 -1
- package/src/components/AlphaAvatar/__snapshots__/Avatar.test.tsx.snap +2 -2
- package/src/components/AlphaAvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap +12 -12
- package/src/components/AlphaButton/AlphaButton.stories.tsx +2 -2
- package/src/components/AlphaButton/Button.tsx +34 -20
- package/src/components/AlphaButton/Button.types.ts +4 -2
- package/src/components/AlphaFloatingButton/AlphaFloatingButton.stories.tsx +2 -2
- package/src/components/AlphaFloatingButton/FloatingButton.tsx +30 -17
- package/src/components/AlphaFloatingButton/FloatingButton.types.ts +4 -2
- package/src/components/AlphaFloatingIconButton/AlphaFloatingIconButton.stories.tsx +28 -0
- package/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scss +175 -0
- package/src/components/AlphaFloatingIconButton/FloatingIconButton.tsx +91 -0
- package/src/components/AlphaFloatingIconButton/FloatingIconButton.types.ts +64 -0
- package/src/components/AlphaFloatingIconButton/index.ts +2 -0
- package/src/components/AlphaIconButton/AlphaIconButton.stories.tsx +29 -0
- package/src/components/AlphaIconButton/IconButton.module.scss +250 -0
- package/src/components/AlphaIconButton/IconButton.tsx +96 -0
- package/src/components/AlphaIconButton/IconButton.types.ts +71 -0
- package/src/components/AlphaIconButton/index.ts +2 -0
- package/src/components/Avatar/Avatar.tsx +1 -1
- package/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap +2 -2
- package/src/components/AvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap +12 -12
- package/src/components/Emoji/Emoji.tsx +1 -1
- package/src/components/Emoji/__snapshots__/Emoji.test.tsx.snap +1 -1
- package/src/index.ts +2 -0
|
@@ -100,7 +100,7 @@ const Avatar = /*#__PURE__*/forwardRef(function Avatar({
|
|
|
100
100
|
"data-testid": AVATAR_WRAPPER_TEST_ID
|
|
101
101
|
}, rest), /*#__PURE__*/React__default.createElement(SmoothCornersBox, {
|
|
102
102
|
ref: forwardedRef,
|
|
103
|
-
"aria-
|
|
103
|
+
"aria-description": name,
|
|
104
104
|
className: classNames(styles.AvatarImage, Number(size) >= 72 && styles['big-size'], showBorder && styles.bordered),
|
|
105
105
|
disabled: !smoothCorners,
|
|
106
106
|
borderRadius: AVATAR_BORDER_RADIUS,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.mjs","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-
|
|
1
|
+
{"version":3,"file":"Avatar.mjs","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-description={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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"}
|
|
@@ -1,11 +1,22 @@
|
|
|
1
1
|
import React__default, { forwardRef } from 'react';
|
|
2
|
+
import { isBezierIcon } from '@channel.io/bezier-icons';
|
|
2
3
|
import classNames from '../../node_modules/classnames/index.mjs';
|
|
3
4
|
import styles from './Button.module.scss.mjs';
|
|
4
|
-
import { Icon } from '../Icon/Icon.mjs';
|
|
5
5
|
import { Text } from '../Text/Text.mjs';
|
|
6
6
|
import { Spinner } from '../Spinner/Spinner.mjs';
|
|
7
7
|
import { BaseButton } from '../BaseButton/BaseButton.mjs';
|
|
8
|
+
import { Icon } from '../Icon/Icon.mjs';
|
|
8
9
|
|
|
10
|
+
function SideContent({
|
|
11
|
+
size,
|
|
12
|
+
content
|
|
13
|
+
}) {
|
|
14
|
+
return isBezierIcon(content) ? /*#__PURE__*/React__default.createElement(Icon, {
|
|
15
|
+
source: content,
|
|
16
|
+
size: size,
|
|
17
|
+
className: styles.ButtonIcon
|
|
18
|
+
}) : content;
|
|
19
|
+
}
|
|
9
20
|
function getIconSize(size) {
|
|
10
21
|
return {
|
|
11
22
|
xs: 'xxs',
|
|
@@ -36,12 +47,11 @@ function getTypography(size) {
|
|
|
36
47
|
const Button = /*#__PURE__*/forwardRef(function Button({
|
|
37
48
|
as = BaseButton,
|
|
38
49
|
text,
|
|
39
|
-
|
|
40
|
-
|
|
50
|
+
prefixContent,
|
|
51
|
+
suffixContent,
|
|
41
52
|
color = 'blue',
|
|
42
53
|
variant = 'primary',
|
|
43
54
|
size = 'm',
|
|
44
|
-
disabled,
|
|
45
55
|
active,
|
|
46
56
|
className,
|
|
47
57
|
loading,
|
|
@@ -53,18 +63,16 @@ const Button = /*#__PURE__*/forwardRef(function Button({
|
|
|
53
63
|
className: classNames(styles.Button, styles[`size-${size}`], styles[`variant-${variant}`], styles[`color-${color}`], active && styles.active, className)
|
|
54
64
|
}, rest), /*#__PURE__*/React__default.createElement("div", {
|
|
55
65
|
className: classNames(styles.ButtonContent, loading && styles.loading)
|
|
56
|
-
},
|
|
66
|
+
}, /*#__PURE__*/React__default.createElement(SideContent, {
|
|
57
67
|
size: getIconSize(size),
|
|
58
|
-
|
|
59
|
-
className: styles.ButtonIcon
|
|
68
|
+
content: prefixContent
|
|
60
69
|
}), /*#__PURE__*/React__default.createElement(Text, {
|
|
61
70
|
className: styles.ButtonText,
|
|
62
71
|
typo: getTypography(size),
|
|
63
72
|
bold: true
|
|
64
|
-
}, text),
|
|
73
|
+
}, text), /*#__PURE__*/React__default.createElement(SideContent, {
|
|
65
74
|
size: getIconSize(size),
|
|
66
|
-
|
|
67
|
-
className: styles.ButtonIcon
|
|
75
|
+
content: suffixContent
|
|
68
76
|
})), loading && /*#__PURE__*/React__default.createElement("div", {
|
|
69
77
|
className: styles.ButtonLoader
|
|
70
78
|
}, /*#__PURE__*/React__default.createElement(Spinner, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.mjs","sources":["../../../../src/components/AlphaButton/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport {
|
|
1
|
+
{"version":3,"file":"Button.mjs","sources":["../../../../src/components/AlphaButton/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport {\n type ButtonProps,\n type ButtonSize,\n} from '~/src/components/AlphaButton/Button.types'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon, type IconSize } 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 SideContent({\n size,\n content,\n}: {\n size: IconSize\n content?: ButtonProps['prefixContent']\n}) {\n return isBezierIcon(content) ? (\n <Icon\n source={content}\n size={size}\n className={styles.ButtonIcon}\n />\n ) : (\n content\n )\n}\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 prefixContent,\n suffixContent,\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.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 <SideContent\n size={getIconSize(size)}\n content={prefixContent}\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 <SideContent\n size={getIconSize(size)}\n content={suffixContent}\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":["SideContent","size","content","isBezierIcon","React","createElement","Icon","source","className","styles","ButtonIcon","getIconSize","xs","s","m","l","xl","getSpinnerSize","getTypography","Button","forwardRef","as","BaseButton","text","prefixContent","suffixContent","color","variant","active","loading","rest","forwardedRef","Comp","Object","assign","ref","classNames","ButtonContent","Text","ButtonText","typo","bold","ButtonLoader","Spinner"],"mappings":"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"}
|
|
@@ -1,11 +1,22 @@
|
|
|
1
1
|
import React__default, { forwardRef } from 'react';
|
|
2
|
+
import { isBezierIcon } from '@channel.io/bezier-icons';
|
|
2
3
|
import classNames from '../../node_modules/classnames/index.mjs';
|
|
3
4
|
import styles from './FloatingButton.module.scss.mjs';
|
|
4
|
-
import { Icon } from '../Icon/Icon.mjs';
|
|
5
5
|
import { Text } from '../Text/Text.mjs';
|
|
6
6
|
import { Spinner } from '../Spinner/Spinner.mjs';
|
|
7
7
|
import { BaseButton } from '../BaseButton/BaseButton.mjs';
|
|
8
|
+
import { Icon } from '../Icon/Icon.mjs';
|
|
8
9
|
|
|
10
|
+
function SideContent({
|
|
11
|
+
size,
|
|
12
|
+
content
|
|
13
|
+
}) {
|
|
14
|
+
return isBezierIcon(content) ? /*#__PURE__*/React__default.createElement(Icon, {
|
|
15
|
+
source: content,
|
|
16
|
+
size: size,
|
|
17
|
+
className: styles.ButtonIcon
|
|
18
|
+
}) : content;
|
|
19
|
+
}
|
|
9
20
|
function getIconSize(size) {
|
|
10
21
|
return {
|
|
11
22
|
xs: 'xxs',
|
|
@@ -36,8 +47,8 @@ function getTypography(size) {
|
|
|
36
47
|
const FloatingButton = /*#__PURE__*/forwardRef(function Button({
|
|
37
48
|
as = BaseButton,
|
|
38
49
|
text,
|
|
39
|
-
|
|
40
|
-
|
|
50
|
+
prefixContent,
|
|
51
|
+
suffixContent,
|
|
41
52
|
color = 'blue',
|
|
42
53
|
variant = 'primary',
|
|
43
54
|
size = 'm',
|
|
@@ -52,18 +63,16 @@ const FloatingButton = /*#__PURE__*/forwardRef(function Button({
|
|
|
52
63
|
className: classNames(styles.FloatingButton, styles[`size-${size}`], styles[`variant-${variant}`], styles[`color-${color}`], active && styles.active, className)
|
|
53
64
|
}, rest), /*#__PURE__*/React__default.createElement("div", {
|
|
54
65
|
className: classNames(styles.ButtonContent, loading && styles.loading)
|
|
55
|
-
},
|
|
66
|
+
}, /*#__PURE__*/React__default.createElement(SideContent, {
|
|
56
67
|
size: getIconSize(size),
|
|
57
|
-
|
|
58
|
-
className: styles.ButtonIcon
|
|
68
|
+
content: prefixContent
|
|
59
69
|
}), /*#__PURE__*/React__default.createElement(Text, {
|
|
60
70
|
className: styles.ButtonText,
|
|
61
71
|
typo: getTypography(size),
|
|
62
72
|
bold: true
|
|
63
|
-
}, text),
|
|
73
|
+
}, text), /*#__PURE__*/React__default.createElement(SideContent, {
|
|
64
74
|
size: getIconSize(size),
|
|
65
|
-
|
|
66
|
-
className: styles.ButtonIcon
|
|
75
|
+
content: suffixContent
|
|
67
76
|
})), loading && /*#__PURE__*/React__default.createElement("div", {
|
|
68
77
|
className: styles.ButtonLoader
|
|
69
78
|
}, /*#__PURE__*/React__default.createElement(Spinner, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FloatingButton.mjs","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
|
|
1
|
+
{"version":3,"file":"FloatingButton.mjs","sources":["../../../../src/components/AlphaFloatingButton/FloatingButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\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, type IconSize } 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 SideContent({\n size,\n content,\n}: {\n size: IconSize\n content?: FloatingButtonProps['prefixContent']\n}) {\n return isBezierIcon(content) ? (\n <Icon\n source={content}\n size={size}\n className={styles.ButtonIcon}\n />\n ) : (\n content\n )\n}\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 prefixContent,\n suffixContent,\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 <SideContent\n size={getIconSize(size)}\n content={prefixContent}\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 <SideContent\n size={getIconSize(size)}\n content={suffixContent}\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":["SideContent","size","content","isBezierIcon","React","createElement","Icon","source","className","styles","ButtonIcon","getIconSize","xs","s","m","l","xl","getSpinnerSize","getTypography","FloatingButton","forwardRef","Button","as","BaseButton","text","prefixContent","suffixContent","color","variant","active","loading","rest","forwardedRef","Comp","Object","assign","ref","classNames","ButtonContent","Text","ButtonText","typo","bold","ButtonLoader","Spinner"],"mappings":";;;;;;;;;AAgBA,SAASA,WAAWA,CAAC;EACnBC,IAAI;AACJC,EAAAA,OAAAA;AAIF,CAAC,EAAE;EACD,OAAOC,YAAY,CAACD,OAAO,CAAC,gBAC1BE,cAAA,CAAAC,aAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,MAAM,EAAEL,OAAQ;AAChBD,IAAAA,IAAI,EAAEA,IAAK;IACXO,SAAS,EAAEC,MAAM,CAACC,UAAAA;GACnB,CAAC,GAEFR,OACD,CAAA;AACH,CAAA;AAEA,SAASS,WAAWA,CAACV,IAAwB,EAAE;EAC7C,OACE;AACEW,IAAAA,EAAE,EAAE,KAAK;AACTC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,EAAE,EAAE,GAAA;GACL,CACDf,IAAI,CAAC,CAAA;AACT,CAAA;AAEA,SAASgB,cAAcA,CAAChB,IAAwB,EAAE;EAChD,OACE;AACEW,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,EAAE,EAAE,GAAA;GACL,CACDf,IAAI,CAAC,CAAA;AACT,CAAA;AAEA,SAASiB,aAAaA,CAACjB,IAAwB,EAAE;EAC/C,OACE;AACEW,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,EAAE,EAAE,IAAA;GACL,CACDf,IAAI,CAAC,CAAA;AACT,CAAA;MAEakB,cAAc,gBAAGC,UAAU,CAGtC,SAASC,MAAMA,CACf;AACEC,EAAAA,EAAE,GAAGC,UAAU;EACfC,IAAI;EACJC,aAAa;EACbC,aAAa;AACbC,EAAAA,KAAK,GAAG,MAAM;AACdC,EAAAA,OAAO,GAAG,SAAS;AACnB3B,EAAAA,IAAI,GAAG,GAAG;EACV4B,MAAM;EACNrB,SAAS;EACTsB,OAAO;EACP,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,IAAI,GAAGX,EAAuB,CAAA;EAEpC,oBACElB,cAAA,CAAAC,aAAA,CAAC4B,IAAI,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACHC,IAAAA,GAAG,EAAEJ,YAAa;AAClBxB,IAAAA,SAAS,EAAE6B,UAAU,CACnB5B,MAAM,CAACU,cAAc,EACrBV,MAAM,CAAE,QAAOR,IAAK,CAAA,CAAC,CAAC,EACtBQ,MAAM,CAAE,CAAA,QAAA,EAAUmB,OAAQ,CAAA,CAAC,CAAC,EAC5BnB,MAAM,CAAE,SAAQkB,KAAM,CAAA,CAAC,CAAC,EACxBE,MAAM,IAAIpB,MAAM,CAACoB,MAAM,EACvBrB,SACF,CAAA;AAAE,GAAA,EACEuB,IAAI,CAAA,eAER3B,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACEG,SAAS,EAAE6B,UAAU,CAAC5B,MAAM,CAAC6B,aAAa,EAAER,OAAO,IAAIrB,MAAM,CAACqB,OAAO,CAAA;AAAE,GAAA,eAEvE1B,cAAA,CAAAC,aAAA,CAACL,WAAW,EAAA;AACVC,IAAAA,IAAI,EAAEU,WAAW,CAACV,IAAI,CAAE;AACxBC,IAAAA,OAAO,EAAEuB,aAAAA;AAAc,GACxB,CAAC,eAGFrB,cAAA,CAAAC,aAAA,CAACkC,IAAI,EAAA;IACH/B,SAAS,EAAEC,MAAM,CAAC+B,UAAW;AAC7BC,IAAAA,IAAI,EAAEvB,aAAa,CAACjB,IAAI,CAAE;IAC1ByC,IAAI,EAAA,IAAA;AAAA,GAAA,EAEHlB,IACG,CAAC,eAEPpB,cAAA,CAAAC,aAAA,CAACL,WAAW,EAAA;AACVC,IAAAA,IAAI,EAAEU,WAAW,CAACV,IAAI,CAAE;AACxBC,IAAAA,OAAO,EAAEwB,aAAAA;AAAc,GACxB,CACE,CAAC,EAGLI,OAAO,iBACN1B,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKG,SAAS,EAAEC,MAAM,CAACkC,YAAAA;AAAa,GAAA,eAClCvC,cAAA,CAAAC,aAAA,CAACuC,OAAO,EAAA;IAAC3C,IAAI,EAAEgB,cAAc,CAAChB,IAAI,CAAA;GAAI,CACnC,CAEH,CAAC,CAAA;AAEX,CAAC;;;;"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import React__default, { forwardRef } from 'react';
|
|
2
|
+
import { isBezierIcon } from '@channel.io/bezier-icons';
|
|
3
|
+
import classNames from '../../node_modules/classnames/index.mjs';
|
|
4
|
+
import styles from './FloatingIconButton.module.scss.mjs';
|
|
5
|
+
import { Icon } from '../Icon/Icon.mjs';
|
|
6
|
+
import { Spinner } from '../Spinner/Spinner.mjs';
|
|
7
|
+
import { BaseButton } from '../BaseButton/BaseButton.mjs';
|
|
8
|
+
|
|
9
|
+
function getIconSize(size) {
|
|
10
|
+
return {
|
|
11
|
+
xs: 'xxs',
|
|
12
|
+
s: 'xs',
|
|
13
|
+
m: 's',
|
|
14
|
+
l: 's',
|
|
15
|
+
xl: 'm'
|
|
16
|
+
}[size];
|
|
17
|
+
}
|
|
18
|
+
function getSpinnerSize(size) {
|
|
19
|
+
return {
|
|
20
|
+
xs: 'xs',
|
|
21
|
+
s: 'xs',
|
|
22
|
+
m: 's',
|
|
23
|
+
l: 's',
|
|
24
|
+
xl: 's'
|
|
25
|
+
}[size];
|
|
26
|
+
}
|
|
27
|
+
const FloatingIconButton = /*#__PURE__*/forwardRef(function FloatingIconButton({
|
|
28
|
+
as = BaseButton,
|
|
29
|
+
color = 'blue',
|
|
30
|
+
variant = 'primary',
|
|
31
|
+
size = 'm',
|
|
32
|
+
active,
|
|
33
|
+
content,
|
|
34
|
+
loading,
|
|
35
|
+
className,
|
|
36
|
+
...rest
|
|
37
|
+
}, forwardedRef) {
|
|
38
|
+
const Comp = as;
|
|
39
|
+
return /*#__PURE__*/React__default.createElement(Comp, Object.assign({
|
|
40
|
+
ref: forwardedRef,
|
|
41
|
+
className: classNames(styles.FloatingIconButton, styles[`size-${size}`], styles[`variant-${variant}`], styles[`color-${color}`], active && styles.active, className)
|
|
42
|
+
}, rest), /*#__PURE__*/React__default.createElement("div", {
|
|
43
|
+
className: classNames(styles.ButtonContent, loading && styles.loading)
|
|
44
|
+
}, isBezierIcon(content) ? /*#__PURE__*/React__default.createElement(Icon, {
|
|
45
|
+
size: getIconSize(size),
|
|
46
|
+
source: content
|
|
47
|
+
}) : content), loading && /*#__PURE__*/React__default.createElement("div", {
|
|
48
|
+
className: styles.ButtonLoader
|
|
49
|
+
}, /*#__PURE__*/React__default.createElement(Spinner, {
|
|
50
|
+
size: getSpinnerSize(size)
|
|
51
|
+
})));
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
export { FloatingIconButton };
|
|
55
|
+
//# sourceMappingURL=FloatingIconButton.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FloatingIconButton.mjs","sources":["../../../../src/components/AlphaFloatingIconButton/FloatingIconButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { type AlphaFloatingIconButtonProps } from '~/src/components/AlphaFloatingIconButton'\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'\n\nimport styles from './FloatingIconButton.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\nexport const FloatingIconButton = forwardRef<\n HTMLButtonElement,\n AlphaFloatingIconButtonProps\n>(function FloatingIconButton(\n {\n as = BaseButton,\n color = 'blue',\n variant = 'primary',\n size = 'm',\n active,\n content,\n loading,\n className,\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.FloatingIconButton,\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 {isBezierIcon(content) ? (\n <Icon\n size={getIconSize(size)}\n source={content}\n />\n ) : (\n content\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","FloatingIconButton","forwardRef","as","BaseButton","color","variant","active","content","loading","className","rest","forwardedRef","Comp","React","createElement","Object","assign","ref","classNames","styles","ButtonContent","isBezierIcon","Icon","source","ButtonLoader","Spinner"],"mappings":";;;;;;;;AAaA,SAASA,WAAWA,CAACC,IAAgB,EAAE;EACrC,OACE;AACEC,IAAAA,EAAE,EAAE,KAAK;AACTC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,EAAE,EAAE,GAAA;GACL,CACDL,IAAI,CAAC,CAAA;AACT,CAAA;AAEA,SAASM,cAAcA,CAACN,IAAgB,EAAE;EACxC,OACE;AACEC,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,EAAE,EAAE,GAAA;GACL,CACDL,IAAI,CAAC,CAAA;AACT,CAAA;MAEaO,kBAAkB,gBAAGC,UAAU,CAG1C,SAASD,kBAAkBA,CAC3B;AACEE,EAAAA,EAAE,GAAGC,UAAU;AACfC,EAAAA,KAAK,GAAG,MAAM;AACdC,EAAAA,OAAO,GAAG,SAAS;AACnBZ,EAAAA,IAAI,GAAG,GAAG;EACVa,MAAM;EACNC,OAAO;EACPC,OAAO;EACPC,SAAS;EACT,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,IAAI,GAAGV,EAAuB,CAAA;EAEpC,oBACEW,cAAA,CAAAC,aAAA,CAACF,IAAI,EAAAG,MAAA,CAAAC,MAAA,CAAA;AACHC,IAAAA,GAAG,EAAEN,YAAa;AAClBF,IAAAA,SAAS,EAAES,UAAU,CACnBC,MAAM,CAACnB,kBAAkB,EACzBmB,MAAM,CAAE,QAAO1B,IAAK,CAAA,CAAC,CAAC,EACtB0B,MAAM,CAAE,CAAA,QAAA,EAAUd,OAAQ,CAAA,CAAC,CAAC,EAC5Bc,MAAM,CAAE,SAAQf,KAAM,CAAA,CAAC,CAAC,EACxBE,MAAM,IAAIa,MAAM,CAACb,MAAM,EACvBG,SACF,CAAA;AAAE,GAAA,EACEC,IAAI,CAAA,eAERG,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACEL,SAAS,EAAES,UAAU,CAACC,MAAM,CAACC,aAAa,EAAEZ,OAAO,IAAIW,MAAM,CAACX,OAAO,CAAA;GAEpEa,EAAAA,YAAY,CAACd,OAAO,CAAC,gBACpBM,cAAA,CAAAC,aAAA,CAACQ,IAAI,EAAA;AACH7B,IAAAA,IAAI,EAAED,WAAW,CAACC,IAAI,CAAE;AACxB8B,IAAAA,MAAM,EAAEhB,OAAAA;GACT,CAAC,GAEFA,OAEC,CAAC,EAGLC,OAAO,iBACNK,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKL,SAAS,EAAEU,MAAM,CAACK,YAAAA;AAAa,GAAA,eAClCX,cAAA,CAAAC,aAAA,CAACW,OAAO,EAAA;IAAChC,IAAI,EAAEM,cAAc,CAACN,IAAI,CAAA;GAAI,CACnC,CAEH,CAAC,CAAA;AAEX,CAAC;;;;"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
var styles = {"FloatingIconButton":"b-pDR7b","size-xs":"b-u5Zl3","size-s":"b-3wbJg","size-m":"b-C7fAv","size-l":"b-FwA2i","size-xl":"b-VPiwI","variant-primary":"b-eSXS9","color-blue":"b-6Qpq3","color-cobalt":"b-dIPru","color-red":"b-wZj6M","color-orange":"b-Vb6Hw","color-green":"b-nSxKM","color-pink":"b-4raYA","color-purple":"b-ppJl-","color-dark-grey":"b-3T-00","color-light-grey":"b-lJzxe","variant-secondary":"b-Q-xex","active":"b-9pRbB","ButtonLoader":"b-hkZIN","ButtonContent":"b-8juuH","loading":"b-w7dD7"};
|
|
2
|
+
|
|
3
|
+
export { styles as default };
|
|
4
|
+
//# sourceMappingURL=FloatingIconButton.module.scss.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FloatingIconButton.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import React__default, { forwardRef } from 'react';
|
|
2
|
+
import { isBezierIcon } from '@channel.io/bezier-icons';
|
|
3
|
+
import classNames from '../../node_modules/classnames/index.mjs';
|
|
4
|
+
import styles from './IconButton.module.scss.mjs';
|
|
5
|
+
import { Icon } from '../Icon/Icon.mjs';
|
|
6
|
+
import { Spinner } from '../Spinner/Spinner.mjs';
|
|
7
|
+
import { BaseButton } from '../BaseButton/BaseButton.mjs';
|
|
8
|
+
|
|
9
|
+
function getIconSize(size) {
|
|
10
|
+
return {
|
|
11
|
+
xs: 'xxs',
|
|
12
|
+
s: 'xs',
|
|
13
|
+
m: 's',
|
|
14
|
+
l: 's',
|
|
15
|
+
xl: 'm'
|
|
16
|
+
}[size];
|
|
17
|
+
}
|
|
18
|
+
function getSpinnerSize(size) {
|
|
19
|
+
return {
|
|
20
|
+
xs: 'xs',
|
|
21
|
+
s: 'xs',
|
|
22
|
+
m: 's',
|
|
23
|
+
l: 's',
|
|
24
|
+
xl: 's'
|
|
25
|
+
}[size];
|
|
26
|
+
}
|
|
27
|
+
const IconButton = /*#__PURE__*/forwardRef(function IconButton({
|
|
28
|
+
as = BaseButton,
|
|
29
|
+
color = 'blue',
|
|
30
|
+
variant = 'primary',
|
|
31
|
+
size = 'm',
|
|
32
|
+
active,
|
|
33
|
+
shape = 'rectangle',
|
|
34
|
+
content,
|
|
35
|
+
loading,
|
|
36
|
+
className,
|
|
37
|
+
...rest
|
|
38
|
+
}, forwardedRef) {
|
|
39
|
+
const Comp = as;
|
|
40
|
+
return /*#__PURE__*/React__default.createElement(Comp, Object.assign({
|
|
41
|
+
ref: forwardedRef,
|
|
42
|
+
className: classNames(styles.IconButton, styles[`size-${size}`], styles[`variant-${variant}`], styles[`color-${color}`], styles[`shape-${shape}`], active && styles.active, className)
|
|
43
|
+
}, rest), /*#__PURE__*/React__default.createElement("div", {
|
|
44
|
+
className: classNames(styles.ButtonContent, loading && styles.loading)
|
|
45
|
+
}, isBezierIcon(content) ? /*#__PURE__*/React__default.createElement(Icon, {
|
|
46
|
+
size: getIconSize(size),
|
|
47
|
+
source: content,
|
|
48
|
+
className: styles.ButtonIcon
|
|
49
|
+
}) : content), loading && /*#__PURE__*/React__default.createElement("div", {
|
|
50
|
+
className: styles.ButtonLoader
|
|
51
|
+
}, /*#__PURE__*/React__default.createElement(Spinner, {
|
|
52
|
+
size: getSpinnerSize(size)
|
|
53
|
+
})));
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
export { IconButton };
|
|
57
|
+
//# sourceMappingURL=IconButton.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconButton.mjs","sources":["../../../../src/components/AlphaIconButton/IconButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { type AlphaIconButtonProps } from '~/src/components/AlphaIconButton'\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'\n\nimport styles from './IconButton.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\nexport const IconButton = forwardRef<HTMLButtonElement, AlphaIconButtonProps>(\n function IconButton(\n {\n as = BaseButton,\n color = 'blue',\n variant = 'primary',\n size = 'm',\n active,\n shape = 'rectangle',\n content,\n loading,\n className,\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.IconButton,\n styles[`size-${size}`],\n styles[`variant-${variant}`],\n styles[`color-${color}`],\n styles[`shape-${shape}`],\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 {isBezierIcon(content) ? (\n <Icon\n size={getIconSize(size)}\n source={content}\n className={styles.ButtonIcon}\n />\n ) : (\n content\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","IconButton","forwardRef","as","BaseButton","color","variant","active","shape","content","loading","className","rest","forwardedRef","Comp","React","createElement","Object","assign","ref","classNames","styles","ButtonContent","isBezierIcon","Icon","source","ButtonIcon","ButtonLoader","Spinner"],"mappings":";;;;;;;;AAaA,SAASA,WAAWA,CAACC,IAAgB,EAAE;EACrC,OACE;AACEC,IAAAA,EAAE,EAAE,KAAK;AACTC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,EAAE,EAAE,GAAA;GACL,CACDL,IAAI,CAAC,CAAA;AACT,CAAA;AAEA,SAASM,cAAcA,CAACN,IAAgB,EAAE;EACxC,OACE;AACEC,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,EAAE,EAAE,GAAA;GACL,CACDL,IAAI,CAAC,CAAA;AACT,CAAA;MAEaO,UAAU,gBAAGC,UAAU,CAClC,SAASD,UAAUA,CACjB;AACEE,EAAAA,EAAE,GAAGC,UAAU;AACfC,EAAAA,KAAK,GAAG,MAAM;AACdC,EAAAA,OAAO,GAAG,SAAS;AACnBZ,EAAAA,IAAI,GAAG,GAAG;EACVa,MAAM;AACNC,EAAAA,KAAK,GAAG,WAAW;EACnBC,OAAO;EACPC,OAAO;EACPC,SAAS;EACT,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,IAAI,GAAGX,EAAuB,CAAA;EAEpC,oBACEY,cAAA,CAAAC,aAAA,CAACF,IAAI,EAAAG,MAAA,CAAAC,MAAA,CAAA;AACHC,IAAAA,GAAG,EAAEN,YAAa;AAClBF,IAAAA,SAAS,EAAES,UAAU,CACnBC,MAAM,CAACpB,UAAU,EACjBoB,MAAM,CAAE,CAAO3B,KAAAA,EAAAA,IAAK,EAAC,CAAC,EACtB2B,MAAM,CAAE,CAAA,QAAA,EAAUf,OAAQ,CAAC,CAAA,CAAC,EAC5Be,MAAM,CAAE,CAAQhB,MAAAA,EAAAA,KAAM,EAAC,CAAC,EACxBgB,MAAM,CAAE,CAAA,MAAA,EAAQb,KAAM,CAAC,CAAA,CAAC,EACxBD,MAAM,IAAIc,MAAM,CAACd,MAAM,EACvBI,SACF,CAAA;AAAE,GAAA,EACEC,IAAI,CAAA,eAERG,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACEL,SAAS,EAAES,UAAU,CACnBC,MAAM,CAACC,aAAa,EACpBZ,OAAO,IAAIW,MAAM,CAACX,OACpB,CAAA;GAECa,EAAAA,YAAY,CAACd,OAAO,CAAC,gBACpBM,cAAA,CAAAC,aAAA,CAACQ,IAAI,EAAA;AACH9B,IAAAA,IAAI,EAAED,WAAW,CAACC,IAAI,CAAE;AACxB+B,IAAAA,MAAM,EAAEhB,OAAQ;IAChBE,SAAS,EAAEU,MAAM,CAACK,UAAAA;GACnB,CAAC,GAEFjB,OAEC,CAAC,EAGLC,OAAO,iBACNK,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKL,SAAS,EAAEU,MAAM,CAACM,YAAAA;AAAa,GAAA,eAClCZ,cAAA,CAAAC,aAAA,CAACY,OAAO,EAAA;IAAClC,IAAI,EAAEM,cAAc,CAACN,IAAI,CAAA;GAAI,CACnC,CAEH,CAAC,CAAA;AAEX,CACF;;;;"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
var styles = {"IconButton":"b-xyUBm","size-xs":"b-mWKOx","size-s":"b-8N-9n","size-m":"b-pDYUy","size-l":"b-YJw65","size-xl":"b-tjHwL","variant-primary":"b-Ff2Fz","color-blue":"b-ne4OD","color-cobalt":"b-5zudh","color-red":"b-plyr-","color-orange":"b-h5y75","color-green":"b-Tnm-7","color-pink":"b-uZ0LR","color-purple":"b-5-tPX","color-dark-grey":"b-BN6Xk","color-light-grey":"b-paZDh","variant-secondary":"b-ucRsW","variant-tertiary":"b-WHAB-","ButtonIcon":"b-Ty8vu","color-white":"b--tIjF","shape-rectangle":"b-hyTqW","shape-circle":"b-03MST","active":"b-P0tkF","ButtonLoader":"b-lfx3h","ButtonContent":"b-r9mfO","loading":"b--Ij3P"};
|
|
2
|
+
|
|
3
|
+
export { styles as default };
|
|
4
|
+
//# sourceMappingURL=IconButton.module.scss.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconButton.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -84,7 +84,7 @@ const Avatar = /*#__PURE__*/forwardRef(function Avatar({
|
|
|
84
84
|
"data-testid": AVATAR_WRAPPER_TEST_ID
|
|
85
85
|
}, rest), /*#__PURE__*/React__default.createElement(SmoothCornersBox, {
|
|
86
86
|
ref: forwardedRef,
|
|
87
|
-
"aria-
|
|
87
|
+
"aria-description": name,
|
|
88
88
|
className: classNames(styles.AvatarImage, Number(size) >= 72 && styles['big-size'], showBorder && styles.bordered),
|
|
89
89
|
disabled: !smoothCorners,
|
|
90
90
|
borderRadius: AVATAR_BORDER_RADIUS,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.mjs","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react'\n\nimport classNames from 'classnames'\n\nimport { isEmpty } from '~/src/utils/type'\n\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 } from './Avatar.types'\nimport defaultAvatarUrl from './assets/default-avatar.svg'\nimport useProgressiveImage from './useProgressiveImage'\n\nimport styles from './Avatar.module.scss'\n\nconst shadow: SmoothCornersBoxProps['shadow'] = {\n spreadRadius: 2,\n color: 'bg-white-high',\n}\n\nexport function useAvatarRadiusToken() {\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 = '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 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 statusSize: StatusSize = (() => {\n switch (size) {\n case '90':\n case '120':\n return 'l'\n default:\n return 'm'\n }\n })()\n\n const Contents = (() => {\n if (children) {\n return children\n }\n if (status) {\n return (\n <Status\n type={status}\n size={statusSize}\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-
|
|
1
|
+
{"version":3,"file":"Avatar.mjs","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react'\n\nimport classNames from 'classnames'\n\nimport { isEmpty } from '~/src/utils/type'\n\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 } from './Avatar.types'\nimport defaultAvatarUrl from './assets/default-avatar.svg'\nimport useProgressiveImage from './useProgressiveImage'\n\nimport styles from './Avatar.module.scss'\n\nconst shadow: SmoothCornersBoxProps['shadow'] = {\n spreadRadius: 2,\n color: 'bg-white-high',\n}\n\nexport function useAvatarRadiusToken() {\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 = '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 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 statusSize: StatusSize = (() => {\n switch (size) {\n case '90':\n case '120':\n return 'l'\n default:\n return 'm'\n }\n })()\n\n const Contents = (() => {\n if (children) {\n return children\n }\n if (status) {\n return (\n <Status\n type={status}\n size={statusSize}\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-description={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 ? shadow : 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":["shadow","spreadRadius","color","useAvatarRadiusToken","useTokens","global","radius","AVATAR_WRAPPER_TEST_ID","AVATAR_TEST_ID","STATUS_WRAPPER_TEST_ID","Avatar","forwardRef","avatarUrl","fallbackUrl","defaultAvatarUrl","size","name","disabled","showBorder","smoothCorners","status","className","children","rest","forwardedRef","loadedAvatarUrl","useProgressiveImage","AVATAR_BORDER_RADIUS","StatusComponent","useMemo","isEmpty","React","isValidElement","statusSize","Contents","createElement","Status","type","styles","StatusWrapper","Object","assign","classNames","SmoothCornersBox","ref","AvatarImage","Number","bordered","borderRadius","undefined","backgroundColor","backgroundImage"],"mappings":"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"}
|
|
@@ -27,7 +27,7 @@ const Emoji = /*#__PURE__*/forwardRef(function Emoji({
|
|
|
27
27
|
return /*#__PURE__*/React__default.createElement("div", Object.assign({
|
|
28
28
|
ref: forwardedRef,
|
|
29
29
|
role: "img",
|
|
30
|
-
"aria-
|
|
30
|
+
"aria-description": name,
|
|
31
31
|
style: {
|
|
32
32
|
'--b-emoji-background-image': cssUrl(imageUrl),
|
|
33
33
|
...style
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Emoji.mjs","sources":["../../../../src/components/Emoji/Emoji.tsx"],"sourcesContent":["import React, { type CSSProperties, forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { cssUrl } from '~/src/utils/style'\n\nimport { type EmojiProps } from './Emoji.types'\n\nimport styles from './Emoji.module.scss'\n\nexport const EMOJI_TEST_ID = 'bezier-emoji'\n\n/**\n * `Emoji` is a component for representing emoji with variant size.\n * @example\n * ```tsx\n * <Emoji\n * name=\"A\"\n * imageUrl=\"https://cf.exp.channel.io/asset/emoji/images/80/a.png\"\n * size=\"20\"\n * />\n * ```\n */\nexport const Emoji = forwardRef<HTMLDivElement, EmojiProps>(function Emoji(\n { style, imageUrl, className, name, size = '24', ...rest },\n forwardedRef\n) {\n return (\n <div\n ref={forwardedRef}\n role=\"img\"\n aria-
|
|
1
|
+
{"version":3,"file":"Emoji.mjs","sources":["../../../../src/components/Emoji/Emoji.tsx"],"sourcesContent":["import React, { type CSSProperties, forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { cssUrl } from '~/src/utils/style'\n\nimport { type EmojiProps } from './Emoji.types'\n\nimport styles from './Emoji.module.scss'\n\nexport const EMOJI_TEST_ID = 'bezier-emoji'\n\n/**\n * `Emoji` is a component for representing emoji with variant size.\n * @example\n * ```tsx\n * <Emoji\n * name=\"A\"\n * imageUrl=\"https://cf.exp.channel.io/asset/emoji/images/80/a.png\"\n * size=\"20\"\n * />\n * ```\n */\nexport const Emoji = forwardRef<HTMLDivElement, EmojiProps>(function Emoji(\n { style, imageUrl, className, name, size = '24', ...rest },\n forwardedRef\n) {\n return (\n <div\n ref={forwardedRef}\n role=\"img\"\n aria-description={name}\n style={\n {\n '--b-emoji-background-image': cssUrl(imageUrl),\n ...style,\n } as CSSProperties\n }\n className={classNames(styles.Emoji, styles[`size-${size}`], className)}\n data-testid={EMOJI_TEST_ID}\n {...rest}\n />\n )\n})\n"],"names":["EMOJI_TEST_ID","Emoji","forwardRef","style","imageUrl","className","name","size","rest","forwardedRef","React","createElement","Object","assign","ref","role","cssUrl","classNames","styles"],"mappings":";;;;;AAUO,MAAMA,aAAa,GAAG,eAAc;;AAE3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaC,KAAK,gBAAGC,UAAU,CAA6B,SAASD,KAAKA,CACxE;EAAEE,KAAK;EAAEC,QAAQ;EAAEC,SAAS;EAAEC,IAAI;AAAEC,EAAAA,IAAI,GAAG,IAAI;EAAE,GAAGC,IAAAA;AAAK,CAAC,EAC1DC,YAAY,EACZ;AACA,EAAA,oBACEC,cAAA,CAAAC,aAAA,CAAAC,KAAAA,EAAAA,MAAA,CAAAC,MAAA,CAAA;AACEC,IAAAA,GAAG,EAAEL,YAAa;AAClBM,IAAAA,IAAI,EAAC,KAAK;AACV,IAAA,kBAAA,EAAkBT,IAAK;AACvBH,IAAAA,KAAK,EACH;AACE,MAAA,4BAA4B,EAAEa,MAAM,CAACZ,QAAQ,CAAC;MAC9C,GAAGD,KAAAA;KAEN;AACDE,IAAAA,SAAS,EAAEY,UAAU,CAACC,MAAM,CAACjB,KAAK,EAAEiB,MAAM,CAAE,QAAOX,IAAK,CAAA,CAAC,CAAC,EAAEF,SAAS,CAAE;IACvE,aAAaL,EAAAA,aAAAA;GACTQ,EAAAA,IAAI,CACT,CAAC,CAAA;AAEN,CAAC;;;;"}
|
package/dist/esm/index.mjs
CHANGED
|
@@ -5,6 +5,8 @@ export { AvatarGroup as AlphaAvatarGroup } from './components/AlphaAvatarGroup/A
|
|
|
5
5
|
export { Button as AlphaButton } from './components/AlphaButton/Button.mjs';
|
|
6
6
|
export { DialogPrimitive as AlphaDialogPrimitive, DialogPrimitiveClose as AlphaDialogPrimitiveClose, DialogPrimitiveContent as AlphaDialogPrimitiveContent, DialogPrimitiveDescription as AlphaDialogPrimitiveDescription, DialogPrimitiveOverlay as AlphaDialogPrimitiveOverlay, DialogPrimitivePortal as AlphaDialogPrimitivePortal, DialogPrimitiveTitle as AlphaDialogPrimitiveTitle, DialogPrimitiveTrigger as AlphaDialogPrimitiveTrigger } from './components/AlphaDialogPrimitive/DialogPrimitive.mjs';
|
|
7
7
|
export { FloatingButton as AlphaFloatingButton } from './components/AlphaFloatingButton/FloatingButton.mjs';
|
|
8
|
+
export { FloatingIconButton as AlphaFloatingIconButton } from './components/AlphaFloatingIconButton/FloatingIconButton.mjs';
|
|
9
|
+
export { IconButton as AlphaIconButton } from './components/AlphaIconButton/IconButton.mjs';
|
|
8
10
|
export { TooltipPrimitive as AlphaTooltipPrimitive, TooltipPrimitiveArrow as AlphaTooltipPrimitiveArrow, TooltipPrimitiveContent as AlphaTooltipPrimitiveContent, TooltipPrimitivePortal as AlphaTooltipPrimitivePortal, TooltipPrimitiveProvider as AlphaTooltipPrimitiveProvider, TooltipPrimitiveTrigger as AlphaTooltipPrimitiveTrigger } from './components/AlphaTooltipPrimitive/TooltipPrimitive.mjs';
|
|
9
11
|
export { AppProvider } from './components/AppProvider/AppProvider.mjs';
|
|
10
12
|
export { AutoFocus } from './components/AutoFocus/AutoFocus.mjs';
|
package/dist/esm/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|