@channel.io/bezier-react 2.3.2 → 2.4.0
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.map +1 -1
- package/dist/cjs/components/AlphaAvatarGroup/AvatarGroup.js.map +1 -1
- package/dist/cjs/components/AlphaButton/Button.js.map +1 -1
- package/dist/cjs/components/AlphaButton/Button.module.scss.js +1 -1
- package/dist/cjs/components/AlphaDialogPrimitive/DialogPrimitive.js.map +1 -1
- package/dist/cjs/components/AlphaFloatingButton/FloatingButton.js.map +1 -1
- package/dist/cjs/components/AlphaFloatingButton/FloatingButton.module.scss.js +1 -1
- package/dist/cjs/components/AlphaFloatingIconButton/FloatingIconButton.js.map +1 -1
- package/dist/cjs/components/AlphaFloatingIconButton/FloatingIconButton.module.scss.js +1 -1
- package/dist/cjs/components/AlphaIconButton/IconButton.js.map +1 -1
- package/dist/cjs/components/AlphaLoader/Loader.js.map +1 -1
- package/dist/cjs/components/AlphaStatusBadge/StatusBadge.js.map +1 -1
- package/dist/cjs/components/AlphaToggleButton/ToggleButton.js +1 -11
- package/dist/cjs/components/AlphaToggleButton/ToggleButton.js.map +1 -1
- package/dist/cjs/components/AlphaToggleButton/ToggleButton.module.scss.js +1 -1
- package/dist/cjs/components/AlphaToggleButtonGroup/ToggleButtonGroup.js.map +1 -1
- package/dist/cjs/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.js +103 -0
- package/dist/cjs/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.js.map +1 -0
- package/dist/cjs/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss.js +8 -0
- package/dist/cjs/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss.js.map +1 -0
- package/dist/cjs/components/AlphaToggleEmojiButtonGroup/useToggleEmojiButtonSize.js +45 -0
- package/dist/cjs/components/AlphaToggleEmojiButtonGroup/useToggleEmojiButtonSize.js.map +1 -0
- package/dist/cjs/components/AlphaTooltipPrimitive/TooltipPrimitive.js.map +1 -1
- package/dist/cjs/components/AppProvider/AppProvider.js.map +1 -1
- package/dist/cjs/components/AutoFocus/AutoFocus.js.map +1 -1
- package/dist/cjs/components/Avatar/Avatar.js.map +1 -1
- package/dist/cjs/components/AvatarGroup/AvatarGroup.js.map +1 -1
- package/dist/cjs/components/Badge/Badge.js.map +1 -1
- package/dist/cjs/components/Banner/Banner.js.map +1 -1
- package/dist/cjs/components/BaseButton/BaseButton.js.map +1 -1
- package/dist/cjs/components/BaseTagBadge/BaseTagBadge.js.map +1 -1
- package/dist/cjs/components/Box/Box.js.map +1 -1
- package/dist/cjs/components/Button/Button.js.map +1 -1
- package/dist/cjs/components/ButtonGroup/ButtonGroup.js.map +1 -1
- package/dist/cjs/components/Center/Center.js.map +1 -1
- package/dist/cjs/components/CheckableAvatar/CheckableAvatar.js.map +1 -1
- package/dist/cjs/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/cjs/components/ConfirmModal/ConfirmModal.js.map +1 -1
- package/dist/cjs/components/Divider/Divider.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/components/FeatureProvider/FeatureProvider.js.map +1 -1
- package/dist/cjs/components/FormControl/FormControl.js.map +1 -1
- package/dist/cjs/components/FormGroup/FormGroup.js.map +1 -1
- package/dist/cjs/components/FormHelperText/FormHelperText.js.map +1 -1
- package/dist/cjs/components/FormLabel/FormLabel.js.map +1 -1
- package/dist/cjs/components/Help/Help.js.map +1 -1
- package/dist/cjs/components/Icon/Icon.js.map +1 -1
- package/dist/cjs/components/KeyValueItem/KeyValueItem.js.map +1 -1
- package/dist/cjs/components/LegacyIcon/LegacyIcon.js.map +1 -1
- package/dist/cjs/components/LegacyStack/LegacyHStack/LegacyHStack.js.map +1 -1
- package/dist/cjs/components/LegacyStack/LegacySpacer/LegacySpacer.js.map +1 -1
- package/dist/cjs/components/LegacyStack/LegacyStack/LegacyStack.js.map +1 -1
- package/dist/cjs/components/LegacyStack/LegacyStackItem/LegacyStackItem.js.map +1 -1
- package/dist/cjs/components/LegacyStack/LegacyVStack/LegacyVStack.js.map +1 -1
- package/dist/cjs/components/LegacyTooltip/LegacyTooltip.js.map +1 -1
- package/dist/cjs/components/LegacyTooltip/LegacyTooltipContent.js.map +1 -1
- package/dist/cjs/components/ListItem/ListItem.js.map +1 -1
- package/dist/cjs/components/Modal/Modal.js.map +1 -1
- package/dist/cjs/components/NavGroup/NavGroup.js.map +1 -1
- package/dist/cjs/components/NavItem/NavItem.js.map +1 -1
- package/dist/cjs/components/OutlineItem/OutlineItem.js.map +1 -1
- package/dist/cjs/components/Overlay/Overlay.js.map +1 -1
- package/dist/cjs/components/ProgressBar/ProgressBar.js.map +1 -1
- package/dist/cjs/components/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/cjs/components/SectionLabel/SectionLabel.js.map +1 -1
- package/dist/cjs/components/SegmentedControl/SegmentedControl.js.map +1 -1
- package/dist/cjs/components/Select/Select.js.map +1 -1
- package/dist/cjs/components/Slider/Slider.js.map +1 -1
- package/dist/cjs/components/SmoothCornersBox/SmoothCornersBox.js.map +1 -1
- package/dist/cjs/components/Spinner/Spinner.js.map +1 -1
- package/dist/cjs/components/Stack/Stack.js.map +1 -1
- package/dist/cjs/components/Status/Status.js.map +1 -1
- package/dist/cjs/components/Switch/Switch.js.map +1 -1
- package/dist/cjs/components/Tabs/Tabs.js.map +1 -1
- package/dist/cjs/components/Tag/Tag.js.map +1 -1
- package/dist/cjs/components/Text/Text.js.map +1 -1
- package/dist/cjs/components/TextArea/TextArea.js.map +1 -1
- package/dist/cjs/components/TextField/TextField.js.map +1 -1
- package/dist/cjs/components/ThemeProvider/ThemeProvider.js.map +1 -1
- package/dist/cjs/components/Toast/Toast.js.map +1 -1
- package/dist/cjs/components/TokenProvider/TokenProvider.js.map +1 -1
- package/dist/cjs/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/cjs/components/VisuallyHidden/VisuallyHidden.js.map +1 -1
- package/dist/cjs/components/WindowProvider/WindowProvider.js.map +1 -1
- package/dist/cjs/index.js +3 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/styles.css +1 -1
- package/dist/esm/components/AlphaAvatar/Avatar.mjs.map +1 -1
- package/dist/esm/components/AlphaAvatarGroup/AvatarGroup.mjs.map +1 -1
- package/dist/esm/components/AlphaButton/Button.mjs.map +1 -1
- package/dist/esm/components/AlphaButton/Button.module.scss.mjs +1 -1
- package/dist/esm/components/AlphaDialogPrimitive/DialogPrimitive.mjs.map +1 -1
- package/dist/esm/components/AlphaFloatingButton/FloatingButton.mjs.map +1 -1
- package/dist/esm/components/AlphaFloatingButton/FloatingButton.module.scss.mjs +1 -1
- package/dist/esm/components/AlphaFloatingIconButton/FloatingIconButton.mjs.map +1 -1
- package/dist/esm/components/AlphaFloatingIconButton/FloatingIconButton.module.scss.mjs +1 -1
- package/dist/esm/components/AlphaIconButton/IconButton.mjs.map +1 -1
- package/dist/esm/components/AlphaLoader/Loader.mjs.map +1 -1
- package/dist/esm/components/AlphaStatusBadge/StatusBadge.mjs.map +1 -1
- package/dist/esm/components/AlphaToggleButton/ToggleButton.mjs +1 -11
- package/dist/esm/components/AlphaToggleButton/ToggleButton.mjs.map +1 -1
- package/dist/esm/components/AlphaToggleButton/ToggleButton.module.scss.mjs +1 -1
- package/dist/esm/components/AlphaToggleButtonGroup/ToggleButtonGroup.mjs.map +1 -1
- package/dist/esm/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.mjs +100 -0
- package/dist/esm/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.mjs.map +1 -0
- package/dist/esm/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss.mjs +4 -0
- package/dist/esm/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss.mjs.map +1 -0
- package/dist/esm/components/AlphaToggleEmojiButtonGroup/useToggleEmojiButtonSize.mjs +41 -0
- package/dist/esm/components/AlphaToggleEmojiButtonGroup/useToggleEmojiButtonSize.mjs.map +1 -0
- package/dist/esm/components/AlphaTooltipPrimitive/TooltipPrimitive.mjs.map +1 -1
- package/dist/esm/components/AppProvider/AppProvider.mjs.map +1 -1
- package/dist/esm/components/AutoFocus/AutoFocus.mjs.map +1 -1
- package/dist/esm/components/Avatar/Avatar.mjs.map +1 -1
- package/dist/esm/components/AvatarGroup/AvatarGroup.mjs.map +1 -1
- package/dist/esm/components/Badge/Badge.mjs.map +1 -1
- package/dist/esm/components/Banner/Banner.mjs.map +1 -1
- package/dist/esm/components/BaseButton/BaseButton.mjs.map +1 -1
- package/dist/esm/components/BaseTagBadge/BaseTagBadge.mjs.map +1 -1
- package/dist/esm/components/Box/Box.mjs.map +1 -1
- package/dist/esm/components/Button/Button.mjs.map +1 -1
- package/dist/esm/components/ButtonGroup/ButtonGroup.mjs.map +1 -1
- package/dist/esm/components/Center/Center.mjs.map +1 -1
- package/dist/esm/components/CheckableAvatar/CheckableAvatar.mjs.map +1 -1
- package/dist/esm/components/Checkbox/Checkbox.mjs.map +1 -1
- package/dist/esm/components/ConfirmModal/ConfirmModal.mjs.map +1 -1
- package/dist/esm/components/Divider/Divider.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/components/FeatureProvider/FeatureProvider.mjs.map +1 -1
- package/dist/esm/components/FormControl/FormControl.mjs.map +1 -1
- package/dist/esm/components/FormGroup/FormGroup.mjs.map +1 -1
- package/dist/esm/components/FormHelperText/FormHelperText.mjs.map +1 -1
- package/dist/esm/components/FormLabel/FormLabel.mjs.map +1 -1
- package/dist/esm/components/Help/Help.mjs.map +1 -1
- package/dist/esm/components/Icon/Icon.mjs.map +1 -1
- package/dist/esm/components/KeyValueItem/KeyValueItem.mjs.map +1 -1
- package/dist/esm/components/LegacyIcon/LegacyIcon.mjs.map +1 -1
- package/dist/esm/components/LegacyStack/LegacyHStack/LegacyHStack.mjs.map +1 -1
- package/dist/esm/components/LegacyStack/LegacySpacer/LegacySpacer.mjs.map +1 -1
- package/dist/esm/components/LegacyStack/LegacyStack/LegacyStack.mjs.map +1 -1
- package/dist/esm/components/LegacyStack/LegacyStackItem/LegacyStackItem.mjs.map +1 -1
- package/dist/esm/components/LegacyStack/LegacyVStack/LegacyVStack.mjs.map +1 -1
- package/dist/esm/components/LegacyTooltip/LegacyTooltip.mjs.map +1 -1
- package/dist/esm/components/LegacyTooltip/LegacyTooltipContent.mjs.map +1 -1
- package/dist/esm/components/ListItem/ListItem.mjs.map +1 -1
- package/dist/esm/components/Modal/Modal.mjs.map +1 -1
- package/dist/esm/components/NavGroup/NavGroup.mjs.map +1 -1
- package/dist/esm/components/NavItem/NavItem.mjs.map +1 -1
- package/dist/esm/components/OutlineItem/OutlineItem.mjs.map +1 -1
- package/dist/esm/components/Overlay/Overlay.mjs.map +1 -1
- package/dist/esm/components/ProgressBar/ProgressBar.mjs.map +1 -1
- package/dist/esm/components/RadioGroup/RadioGroup.mjs.map +1 -1
- package/dist/esm/components/SectionLabel/SectionLabel.mjs.map +1 -1
- package/dist/esm/components/SegmentedControl/SegmentedControl.mjs.map +1 -1
- package/dist/esm/components/Select/Select.mjs.map +1 -1
- package/dist/esm/components/Slider/Slider.mjs.map +1 -1
- package/dist/esm/components/SmoothCornersBox/SmoothCornersBox.mjs.map +1 -1
- package/dist/esm/components/Spinner/Spinner.mjs.map +1 -1
- package/dist/esm/components/Stack/Stack.mjs.map +1 -1
- package/dist/esm/components/Status/Status.mjs.map +1 -1
- package/dist/esm/components/Switch/Switch.mjs.map +1 -1
- package/dist/esm/components/Tabs/Tabs.mjs.map +1 -1
- package/dist/esm/components/Tag/Tag.mjs.map +1 -1
- package/dist/esm/components/Text/Text.mjs.map +1 -1
- package/dist/esm/components/TextArea/TextArea.mjs.map +1 -1
- package/dist/esm/components/TextField/TextField.mjs.map +1 -1
- package/dist/esm/components/ThemeProvider/ThemeProvider.mjs.map +1 -1
- package/dist/esm/components/Toast/Toast.mjs.map +1 -1
- package/dist/esm/components/TokenProvider/TokenProvider.mjs.map +1 -1
- package/dist/esm/components/Tooltip/Tooltip.mjs.map +1 -1
- package/dist/esm/components/VisuallyHidden/VisuallyHidden.mjs.map +1 -1
- package/dist/esm/components/WindowProvider/WindowProvider.mjs.map +1 -1
- package/dist/esm/index.mjs +1 -0
- package/dist/esm/index.mjs.map +1 -1
- package/dist/esm/styles.css +1 -1
- package/dist/types/components/AlphaAvatar/Avatar.d.ts.map +1 -1
- package/dist/types/components/AlphaAvatarGroup/AvatarGroup.d.ts.map +1 -1
- package/dist/types/components/AlphaButton/Button.d.ts.map +1 -1
- package/dist/types/components/AlphaDialogPrimitive/DialogPrimitive.d.ts.map +1 -1
- package/dist/types/components/AlphaFloatingButton/FloatingButton.d.ts.map +1 -1
- package/dist/types/components/AlphaFloatingIconButton/FloatingIconButton.d.ts.map +1 -1
- package/dist/types/components/AlphaIconButton/IconButton.d.ts.map +1 -1
- package/dist/types/components/AlphaLoader/Loader.d.ts.map +1 -1
- package/dist/types/components/AlphaStatusBadge/StatusBadge.d.ts.map +1 -1
- package/dist/types/components/AlphaToggleButton/ToggleButton.d.ts.map +1 -1
- package/dist/types/components/AlphaToggleButton/ToggleButton.types.d.ts +0 -5
- package/dist/types/components/AlphaToggleButton/ToggleButton.types.d.ts.map +1 -1
- package/dist/types/components/AlphaToggleButtonGroup/ToggleButtonGroup.d.ts.map +1 -1
- package/dist/types/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.d.ts +32 -0
- package/dist/types/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.d.ts.map +1 -0
- package/dist/types/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.d.ts +54 -0
- package/dist/types/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.d.ts.map +1 -0
- package/dist/types/components/AlphaToggleEmojiButtonGroup/index.d.ts +3 -0
- package/dist/types/components/AlphaToggleEmojiButtonGroup/index.d.ts.map +1 -0
- package/dist/types/components/AlphaToggleEmojiButtonGroup/useToggleEmojiButtonSize.d.ts +10 -0
- package/dist/types/components/AlphaToggleEmojiButtonGroup/useToggleEmojiButtonSize.d.ts.map +1 -0
- package/dist/types/components/AlphaTooltipPrimitive/TooltipPrimitive.d.ts.map +1 -1
- package/dist/types/components/AppProvider/AppProvider.d.ts.map +1 -1
- package/dist/types/components/AutoFocus/AutoFocus.d.ts.map +1 -1
- package/dist/types/components/Avatar/Avatar.d.ts.map +1 -1
- package/dist/types/components/AvatarGroup/AvatarGroup.d.ts.map +1 -1
- package/dist/types/components/Badge/Badge.d.ts.map +1 -1
- package/dist/types/components/Banner/Banner.d.ts.map +1 -1
- package/dist/types/components/BaseButton/BaseButton.d.ts.map +1 -1
- package/dist/types/components/BaseTagBadge/BaseTagBadge.d.ts.map +1 -1
- package/dist/types/components/Box/Box.d.ts.map +1 -1
- package/dist/types/components/Button/Button.d.ts.map +1 -1
- package/dist/types/components/ButtonGroup/ButtonGroup.d.ts.map +1 -1
- package/dist/types/components/Center/Center.d.ts.map +1 -1
- package/dist/types/components/CheckableAvatar/CheckableAvatar.d.ts.map +1 -1
- package/dist/types/components/Checkbox/Checkbox.d.ts.map +1 -1
- package/dist/types/components/ConfirmModal/ConfirmModal.d.ts.map +1 -1
- package/dist/types/components/Divider/Divider.d.ts.map +1 -1
- package/dist/types/components/Emoji/Emoji.d.ts.map +1 -1
- package/dist/types/components/FeatureProvider/FeatureProvider.d.ts.map +1 -1
- package/dist/types/components/FormControl/FormControl.d.ts.map +1 -1
- package/dist/types/components/FormGroup/FormGroup.d.ts.map +1 -1
- package/dist/types/components/FormHelperText/FormHelperText.d.ts.map +1 -1
- package/dist/types/components/FormLabel/FormLabel.d.ts.map +1 -1
- package/dist/types/components/Help/Help.d.ts.map +1 -1
- package/dist/types/components/Icon/Icon.d.ts.map +1 -1
- package/dist/types/components/KeyValueItem/KeyValueItem.d.ts.map +1 -1
- package/dist/types/components/LegacyIcon/LegacyIcon.d.ts.map +1 -1
- package/dist/types/components/LegacyStack/LegacyHStack/LegacyHStack.d.ts.map +1 -1
- package/dist/types/components/LegacyStack/LegacySpacer/LegacySpacer.d.ts.map +1 -1
- package/dist/types/components/LegacyStack/LegacyStack/LegacyStack.d.ts.map +1 -1
- package/dist/types/components/LegacyStack/LegacyStackItem/LegacyStackItem.d.ts.map +1 -1
- package/dist/types/components/LegacyStack/LegacyVStack/LegacyVStack.d.ts.map +1 -1
- package/dist/types/components/LegacyTooltip/LegacyTooltip.d.ts.map +1 -1
- package/dist/types/components/LegacyTooltip/LegacyTooltipContent.d.ts.map +1 -1
- package/dist/types/components/ListItem/ListItem.d.ts.map +1 -1
- package/dist/types/components/Modal/Modal.d.ts.map +1 -1
- package/dist/types/components/NavGroup/NavGroup.d.ts.map +1 -1
- package/dist/types/components/NavItem/NavItem.d.ts.map +1 -1
- package/dist/types/components/OutlineItem/OutlineItem.d.ts.map +1 -1
- package/dist/types/components/Overlay/Overlay.d.ts.map +1 -1
- package/dist/types/components/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/types/components/RadioGroup/RadioGroup.d.ts.map +1 -1
- package/dist/types/components/SectionLabel/SectionLabel.d.ts.map +1 -1
- package/dist/types/components/SegmentedControl/SegmentedControl.d.ts.map +1 -1
- package/dist/types/components/Select/Select.d.ts.map +1 -1
- package/dist/types/components/Slider/Slider.d.ts.map +1 -1
- package/dist/types/components/SmoothCornersBox/SmoothCornersBox.d.ts.map +1 -1
- package/dist/types/components/Spinner/Spinner.d.ts.map +1 -1
- package/dist/types/components/Stack/Stack.d.ts.map +1 -1
- package/dist/types/components/Status/Status.d.ts.map +1 -1
- package/dist/types/components/Switch/Switch.d.ts.map +1 -1
- package/dist/types/components/Tabs/Tabs.d.ts.map +1 -1
- package/dist/types/components/Tag/Tag.d.ts.map +1 -1
- package/dist/types/components/Text/Text.d.ts.map +1 -1
- package/dist/types/components/TextArea/TextArea.d.ts.map +1 -1
- package/dist/types/components/TextField/TextField.d.ts.map +1 -1
- package/dist/types/components/ThemeProvider/ThemeProvider.d.ts.map +1 -1
- package/dist/types/components/Toast/Toast.d.ts.map +1 -1
- package/dist/types/components/TokenProvider/TokenProvider.d.ts.map +1 -1
- package/dist/types/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/types/components/VisuallyHidden/VisuallyHidden.d.ts.map +1 -1
- package/dist/types/components/WindowProvider/WindowProvider.d.ts.map +1 -1
- package/dist/types/index.d.ts +1 -0
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/components/AlphaAvatar/Avatar.tsx +2 -0
- package/src/components/AlphaAvatarGroup/AvatarGroup.tsx +2 -0
- package/src/components/AlphaButton/Button.module.scss +42 -55
- package/src/components/AlphaButton/Button.tsx +2 -0
- package/src/components/AlphaDialogPrimitive/DialogPrimitive.tsx +2 -0
- package/src/components/AlphaFloatingButton/FloatingButton.module.scss +57 -77
- package/src/components/AlphaFloatingButton/FloatingButton.tsx +2 -0
- package/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scss +45 -58
- package/src/components/AlphaFloatingIconButton/FloatingIconButton.tsx +2 -0
- package/src/components/AlphaIconButton/IconButton.tsx +2 -0
- package/src/components/AlphaLoader/Loader.tsx +2 -0
- package/src/components/AlphaStatusBadge/StatusBadge.tsx +2 -0
- package/src/components/AlphaToggleButton/AlphaToggleButton.stories.tsx +0 -1
- package/src/components/AlphaToggleButton/ToggleButton.module.scss +0 -24
- package/src/components/AlphaToggleButton/ToggleButton.tsx +3 -24
- package/src/components/AlphaToggleButton/ToggleButton.types.ts +0 -6
- package/src/components/AlphaToggleButtonGroup/ToggleButtonGroup.tsx +2 -0
- package/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx +66 -0
- package/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss +76 -0
- package/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx +141 -0
- package/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts +62 -0
- package/src/components/AlphaToggleEmojiButtonGroup/index.ts +9 -0
- package/src/components/AlphaToggleEmojiButtonGroup/useToggleEmojiButtonSize.ts +62 -0
- package/src/components/AlphaTooltipPrimitive/TooltipPrimitive.tsx +2 -0
- package/src/components/AppProvider/AppProvider.tsx +2 -0
- package/src/components/AutoFocus/AutoFocus.tsx +2 -0
- package/src/components/Avatar/Avatar.tsx +2 -0
- package/src/components/AvatarGroup/AvatarGroup.tsx +2 -0
- package/src/components/Badge/Badge.tsx +2 -0
- package/src/components/Banner/Banner.tsx +2 -0
- package/src/components/BaseButton/BaseButton.tsx +2 -0
- package/src/components/BaseTagBadge/BaseTagBadge.tsx +2 -0
- package/src/components/Box/Box.tsx +2 -0
- package/src/components/Button/Button.tsx +2 -0
- package/src/components/ButtonGroup/ButtonGroup.tsx +2 -0
- package/src/components/Center/Center.tsx +2 -0
- package/src/components/CheckableAvatar/CheckableAvatar.tsx +2 -0
- package/src/components/Checkbox/Checkbox.tsx +2 -0
- package/src/components/ConfirmModal/ConfirmModal.tsx +2 -0
- package/src/components/Divider/Divider.tsx +2 -0
- package/src/components/Emoji/Emoji.tsx +3 -1
- package/src/components/FeatureProvider/FeatureProvider.tsx +2 -0
- package/src/components/FormControl/FormControl.tsx +2 -0
- package/src/components/FormGroup/FormGroup.tsx +2 -0
- package/src/components/FormHelperText/FormHelperText.tsx +2 -0
- package/src/components/FormLabel/FormLabel.tsx +2 -0
- package/src/components/Help/Help.tsx +2 -0
- package/src/components/Icon/Icon.tsx +2 -0
- package/src/components/KeyValueItem/KeyValueItem.tsx +2 -0
- package/src/components/LegacyIcon/LegacyIcon.tsx +2 -0
- package/src/components/LegacyStack/LegacyHStack/LegacyHStack.tsx +2 -0
- package/src/components/LegacyStack/LegacySpacer/LegacySpacer.tsx +2 -0
- package/src/components/LegacyStack/LegacyStack/LegacyStack.tsx +2 -0
- package/src/components/LegacyStack/LegacyStackItem/LegacyStackItem.tsx +2 -0
- package/src/components/LegacyStack/LegacyVStack/LegacyVStack.tsx +2 -0
- package/src/components/LegacyTooltip/LegacyTooltip.tsx +2 -0
- package/src/components/LegacyTooltip/LegacyTooltipContent.tsx +2 -0
- package/src/components/ListItem/ListItem.tsx +2 -0
- package/src/components/Modal/Modal.tsx +2 -0
- package/src/components/NavGroup/NavGroup.tsx +2 -0
- package/src/components/NavItem/NavItem.tsx +2 -0
- package/src/components/OutlineItem/OutlineItem.tsx +2 -0
- package/src/components/Overlay/Overlay.tsx +2 -0
- package/src/components/ProgressBar/ProgressBar.tsx +2 -0
- package/src/components/RadioGroup/RadioGroup.tsx +2 -0
- package/src/components/SectionLabel/SectionLabel.tsx +2 -0
- package/src/components/SegmentedControl/SegmentedControl.tsx +2 -0
- package/src/components/Select/Select.tsx +2 -0
- package/src/components/Slider/Slider.tsx +2 -0
- package/src/components/SmoothCornersBox/SmoothCornersBox.tsx +2 -0
- package/src/components/Spinner/Spinner.tsx +2 -0
- package/src/components/Stack/Stack.tsx +2 -0
- package/src/components/Status/Status.tsx +2 -0
- package/src/components/Switch/Switch.tsx +2 -0
- package/src/components/Tabs/Tabs.tsx +2 -0
- package/src/components/Tag/Tag.tsx +2 -0
- package/src/components/Text/Text.tsx +2 -0
- package/src/components/TextArea/TextArea.tsx +2 -0
- package/src/components/TextField/TextField.tsx +2 -0
- package/src/components/ThemeProvider/ThemeProvider.tsx +2 -0
- package/src/components/Toast/Toast.tsx +2 -0
- package/src/components/TokenProvider/TokenProvider.tsx +2 -0
- package/src/components/Tooltip/Tooltip.tsx +2 -0
- package/src/components/VisuallyHidden/VisuallyHidden.tsx +2 -0
- package/src/components/WindowProvider/WindowProvider.tsx +2 -0
- package/src/index.ts +1 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sources":["../../../../src/components/AlphaAvatar/Avatar.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"Avatar.js","sources":["../../../../src/components/AlphaAvatar/Avatar.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef, useMemo } from 'react'\n\nimport classNames from 'classnames'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport { useAvatarContext } from '~/src/components/AlphaAvatar/AvatarSizeContext'\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 = useAvatarContext()\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$s","avatarGroupContext","useAvatarContext","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 +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 { px } from '~/src/utils/style'\n\nimport {\n type AlphaAvatarProps,\n type AlphaAvatarSize,\n useAlphaAvatarRadiusToken,\n} from '~/src/components/AlphaAvatar'\nimport { AvatarContextProvider } from '~/src/components/AlphaAvatar/AvatarSizeContext'\nimport { Icon } from '~/src/components/Icon'\nimport { SmoothCornersBox } from '~/src/components/SmoothCornersBox'\nimport { Text } from '~/src/components/Text'\n\nimport { type AvatarGroupProps } from './AvatarGroup.types'\n\nimport styles from './AvatarGroup.module.scss'\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 <AvatarContextProvider\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 </AvatarContextProvider>\n )\n }\n)\n"],"names":["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","_avatar$key","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","AvatarContextProvider","value","Object","assign","role","ref"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"AvatarGroup.js","sources":["../../../../src/components/AlphaAvatarGroup/AvatarGroup.tsx"],"sourcesContent":["'use client'\n\nimport 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 { px } from '~/src/utils/style'\n\nimport {\n type AlphaAvatarProps,\n type AlphaAvatarSize,\n useAlphaAvatarRadiusToken,\n} from '~/src/components/AlphaAvatar'\nimport { AvatarContextProvider } from '~/src/components/AlphaAvatar/AvatarSizeContext'\nimport { Icon } from '~/src/components/Icon'\nimport { SmoothCornersBox } from '~/src/components/SmoothCornersBox'\nimport { Text } from '~/src/components/Text'\n\nimport { type AvatarGroupProps } from './AvatarGroup.types'\n\nimport styles from './AvatarGroup.module.scss'\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 <AvatarContextProvider\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 </AvatarContextProvider>\n )\n }\n)\n"],"names":["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","_avatar$key","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","AvatarContextProvider","value","Object","assign","role","ref"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../../src/components/AlphaButton/Button.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../../src/components/AlphaButton/Button.tsx"],"sourcesContent":["'use client'\n\nimport 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 { AlphaLoader } from '~/src/components/AlphaLoader'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon, type IconSize } from '~/src/components/Icon'\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 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 {loading && (\n <div\n className={classNames(\n styles.ButtonLoader,\n // NOTE: Loader size is the same as icon size\n styles[`size-${getIconSize(size)}`]\n )}\n >\n <AlphaLoader\n size=\"s\"\n className={styles.Loader}\n variant={variant === 'primary' ? 'on-overlay' : 'secondary'}\n />\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","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","AlphaLoader","Loader"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var styles = {"Icon":"b--FZGN","size-xxxs":"b-o9swE","size-xxs":"b-xlhxz","size-xs":"b-dMl6r","size-s":"b-FZTyp","size-m":"b-Tenxe","size-l":"b-IJLB6","size-xl":"b-xKsUH","Button":"b-Bu63w","ButtonText":"b-Xr8t8","
|
|
5
|
+
var styles = {"Icon":"b--FZGN","size-xxxs":"b-o9swE","size-xxs":"b-xlhxz","size-xs":"b-dMl6r","size-s":"b-FZTyp","size-m":"b-Tenxe","size-l":"b-IJLB6","size-xl":"b-xKsUH","Button":"b-Bu63w","ButtonText":"b-Xr8t8","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","color-white-absolute":"b-RsMAO","variant-secondary":"b-l8-bH","variant-tertiary":"b-PB-TW","ButtonIcon":"b-HX6lq","active":"b-Y2foo","ButtonLoader":"b-TRaYF","ButtonContent":"b-nSti0","loading":"b-rUXJx","Loader":"b-Y9S8P"};
|
|
6
6
|
|
|
7
7
|
exports.default = styles;
|
|
8
8
|
//# sourceMappingURL=Button.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogPrimitive.js","sources":["../../../../src/components/AlphaDialogPrimitive/DialogPrimitive.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"DialogPrimitive.js","sources":["../../../../src/components/AlphaDialogPrimitive/DialogPrimitive.tsx"],"sourcesContent":["'use client'\n\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n} from '@radix-ui/react-dialog'\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#root}\n */\nexport const DialogPrimitive = Dialog\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#close}\n */\nexport const DialogPrimitiveClose = DialogClose\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#content}\n */\nexport const DialogPrimitiveContent = DialogContent\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#description}\n */\nexport const DialogPrimitiveDescription = DialogDescription\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#overlay}\n */\nexport const DialogPrimitiveOverlay = DialogOverlay\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#portal}\n */\nexport const DialogPrimitivePortal = DialogPortal\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#title}\n */\nexport const DialogPrimitiveTitle = DialogTitle\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#trigger}\n */\nexport const DialogPrimitiveTrigger = DialogTrigger\n"],"names":["DialogPrimitive","Dialog","DialogPrimitiveClose","DialogClose","DialogPrimitiveContent","DialogContent","DialogPrimitiveDescription","DialogDescription","DialogPrimitiveOverlay","DialogOverlay","DialogPrimitivePortal","DialogPortal","DialogPrimitiveTitle","DialogTitle","DialogPrimitiveTrigger","DialogTrigger"],"mappings":";;;;AAaA;AACA;AACA;AACO,MAAMA,eAAe,GAAGC,aAAM;;AAErC;AACA;AACA;AACO,MAAMC,oBAAoB,GAAGC,kBAAW;;AAE/C;AACA;AACA;AACO,MAAMC,sBAAsB,GAAGC,oBAAa;;AAEnD;AACA;AACA;AACO,MAAMC,0BAA0B,GAAGC,wBAAiB;;AAE3D;AACA;AACA;AACO,MAAMC,sBAAsB,GAAGC,oBAAa;;AAEnD;AACA;AACA;AACO,MAAMC,qBAAqB,GAAGC,mBAAY;;AAEjD;AACA;AACA;AACO,MAAMC,oBAAoB,GAAGC,kBAAW;;AAE/C;AACA;AACA;AACO,MAAMC,sBAAsB,GAAGC;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FloatingButton.js","sources":["../../../../src/components/AlphaFloatingButton/FloatingButton.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"FloatingButton.js","sources":["../../../../src/components/AlphaFloatingButton/FloatingButton.tsx"],"sourcesContent":["'use client'\n\nimport 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 { AlphaLoader } from '~/src/components/AlphaLoader'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon, type IconSize } from '~/src/components/Icon'\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 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 {loading && (\n <div\n className={classNames(\n styles.ButtonLoader,\n // NOTE: Loader size is the same as icon size\n styles[`size-${getIconSize(size)}`]\n )}\n >\n <AlphaLoader\n size=\"s\"\n className={styles.Loader}\n variant={variant === 'primary' ? 'on-overlay' : 'secondary'}\n />\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","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","AlphaLoader","Loader"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var styles = {"Icon":"b-N1oNZ","size-xxxs":"b-SmyZ3","size-xxs":"b-f9TeV","size-xs":"b-QsWAB","size-s":"b-XpD2O","size-m":"b-o-cLI","size-l":"b-Hk5nU","size-xl":"b-k3y4r","FloatingButton":"b-bYve2","ButtonText":"b-alAiF","
|
|
5
|
+
var styles = {"Icon":"b-N1oNZ","size-xxxs":"b-SmyZ3","size-xxs":"b-f9TeV","size-xs":"b-QsWAB","size-s":"b-XpD2O","size-m":"b-o-cLI","size-l":"b-Hk5nU","size-xl":"b-k3y4r","FloatingButton":"b-bYve2","ButtonText":"b-alAiF","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","ButtonContent":"b-RUr-1","loading":"b-sFtLb","ButtonLoader":"b-cOdoe","Loader":"b-xybMi"};
|
|
6
6
|
|
|
7
7
|
exports.default = styles;
|
|
8
8
|
//# sourceMappingURL=FloatingButton.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FloatingIconButton.js","sources":["../../../../src/components/AlphaFloatingIconButton/FloatingIconButton.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"FloatingIconButton.js","sources":["../../../../src/components/AlphaFloatingIconButton/FloatingIconButton.tsx"],"sourcesContent":["'use client'\n\nimport 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 { AlphaLoader } from '~/src/components/AlphaLoader'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { type ButtonSize } from '~/src/components/Button'\nimport { Icon } from '~/src/components/Icon'\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\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 {loading && (\n <div\n className={classNames(\n styles.ButtonLoader,\n // NOTE: Loader size is the same as icon size\n styles[`size-${getIconSize(size)}`]\n )}\n >\n <AlphaLoader\n size=\"s\"\n className={styles.Loader}\n variant={variant === 'primary' ? 'on-overlay' : 'secondary'}\n />\n </div>\n )}\n </Comp>\n )\n})\n"],"names":["getIconSize","size","xs","s","m","l","xl","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","AlphaLoader","Loader"],"mappings":";;;;;;;;;;AAeA,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;MAEaM,kBAAkB,gBAAGC,gBAAU,CAG1C,SAASD,kBAAkBA,CAC3B;AACEE,EAAAA,EAAE,GAAGC,qBAAU;AACfC,EAAAA,KAAK,GAAG,MAAM;AACdC,EAAAA,OAAO,GAAG,SAAS;AACnBX,EAAAA,IAAI,GAAG,GAAG;EACVY,MAAM;EACNC,OAAO;EACPC,OAAO;EACPC,SAAS;EACT,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,IAAI,GAAGV,EAAuB,CAAA;EAEpC,oBACEW,KAAA,CAAAC,aAAA,CAACF,IAAI,EAAAG,MAAA,CAAAC,MAAA,CAAA;AACHC,IAAAA,GAAG,EAAEN,YAAa;AAClBF,IAAAA,SAAS,EAAES,aAAU,CACnBC,iCAAM,CAACnB,kBAAkB,EACzBmB,iCAAM,CAAC,QAAQzB,IAAI,CAAA,CAAE,CAAC,EACtByB,iCAAM,CAAC,CAAA,QAAA,EAAWd,OAAO,CAAA,CAAE,CAAC,EAC5Bc,iCAAM,CAAC,SAASf,KAAK,CAAA,CAAE,CAAC,EACxBE,MAAM,IAAIa,iCAAM,CAACb,MAAM,EACvBG,SACF,CAAA;AAAE,GAAA,EACEC,IAAI,CAAA,eAERG,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACEL,SAAS,EAAES,aAAU,CAACC,iCAAM,CAACC,aAAa,EAAEZ,OAAO,IAAIW,iCAAM,CAACX,OAAO,CAAA;GAEpEa,EAAAA,wBAAY,CAACd,OAAO,CAAC,gBACpBM,KAAA,CAAAC,aAAA,CAACQ,SAAI,EAAA;AACH5B,IAAAA,IAAI,EAAED,WAAW,CAACC,IAAI,CAAE;AACxB6B,IAAAA,MAAM,EAAEhB,OAAAA;GACT,CAAC,GAEFA,OAEC,CAAC,EAELC,OAAO,iBACNK,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEL,IAAAA,SAAS,EAAES,aAAU,CACnBC,iCAAM,CAACK,YAAY;AACnB;AACAL,IAAAA,iCAAM,CAAC,CAAQ1B,KAAAA,EAAAA,WAAW,CAACC,IAAI,CAAC,EAAE,CACpC,CAAA;AAAE,GAAA,eAEFmB,KAAA,CAAAC,aAAA,CAACW,aAAW,EAAA;AACV/B,IAAAA,IAAI,EAAC,GAAG;IACRe,SAAS,EAAEU,iCAAM,CAACO,MAAO;AACzBrB,IAAAA,OAAO,EAAEA,OAAO,KAAK,SAAS,GAAG,YAAY,GAAG,WAAA;GACjD,CACE,CAEH,CAAC,CAAA;AAEX,CAAC;;;;"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var styles = {"Icon":"b-76vGa","size-xxxs":"b-m7Pmk","size-xxs":"b-g4122","size-xs":"b-u5Zl3","size-s":"b-3wbJg","size-m":"b-C7fAv","size-l":"b-FwA2i","size-xl":"b-VPiwI","FloatingIconButton":"b-pDR7b","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","
|
|
5
|
+
var styles = {"Icon":"b-76vGa","size-xxxs":"b-m7Pmk","size-xxs":"b-g4122","size-xs":"b-u5Zl3","size-s":"b-3wbJg","size-m":"b-C7fAv","size-l":"b-FwA2i","size-xl":"b-VPiwI","FloatingIconButton":"b-pDR7b","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","ButtonContent":"b-8juuH","loading":"b-w7dD7","ButtonLoader":"b-hkZIN","Loader":"b-t8LIK"};
|
|
6
6
|
|
|
7
7
|
exports.default = styles;
|
|
8
8
|
//# sourceMappingURL=FloatingIconButton.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","sources":["../../../../src/components/AlphaIconButton/IconButton.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"IconButton.js","sources":["../../../../src/components/AlphaIconButton/IconButton.tsx"],"sourcesContent":["'use client'\n\nimport 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 { AlphaLoader } from '~/src/components/AlphaLoader'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { type ButtonSize } from '~/src/components/Button'\nimport { Icon } from '~/src/components/Icon'\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\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 {loading && (\n <div\n className={classNames(\n styles.ButtonLoader,\n // NOTE: Loader size is the same as icon size\n styles[`size-${getIconSize(size)}`]\n )}\n >\n <AlphaLoader\n size=\"s\"\n className={styles.Loader}\n variant={variant === 'primary' ? 'on-overlay' : 'secondary'}\n />\n </div>\n )}\n </Comp>\n )\n }\n)\n"],"names":["getIconSize","size","xs","s","m","l","xl","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","AlphaLoader","Loader"],"mappings":";;;;;;;;;;AAeA,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;MAEaM,UAAU,gBAAGC,gBAAU,CAClC,SAASD,UAAUA,CACjB;AACEE,EAAAA,EAAE,GAAGC,qBAAU;AACfC,EAAAA,KAAK,GAAG,MAAM;AACdC,EAAAA,OAAO,GAAG,SAAS;AACnBX,EAAAA,IAAI,GAAG,GAAG;EACVY,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,KAAA,CAAAC,aAAA,CAACF,IAAI,EAAAG,MAAA,CAAAC,MAAA,CAAA;AACHC,IAAAA,GAAG,EAAEN,YAAa;AAClBF,IAAAA,SAAS,EAAES,aAAU,CACnBC,yBAAM,CAACpB,UAAU,EACjBoB,yBAAM,CAAC,CAAQ1B,KAAAA,EAAAA,IAAI,EAAE,CAAC,EACtB0B,yBAAM,CAAC,CAAA,QAAA,EAAWf,OAAO,CAAE,CAAA,CAAC,EAC5Be,yBAAM,CAAC,CAAShB,MAAAA,EAAAA,KAAK,EAAE,CAAC,EACxBgB,yBAAM,CAAC,CAAA,MAAA,EAASb,KAAK,CAAE,CAAA,CAAC,EACxBD,MAAM,IAAIc,yBAAM,CAACd,MAAM,EACvBI,SACF,CAAA;AAAE,GAAA,EACEC,IAAI,CAAA,eAERG,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACEL,SAAS,EAAES,aAAU,CACnBC,yBAAM,CAACC,aAAa,EACpBZ,OAAO,IAAIW,yBAAM,CAACX,OACpB,CAAA;GAECa,EAAAA,wBAAY,CAACd,OAAO,CAAC,gBACpBM,KAAA,CAAAC,aAAA,CAACQ,SAAI,EAAA;AACH7B,IAAAA,IAAI,EAAED,WAAW,CAACC,IAAI,CAAE;AACxB8B,IAAAA,MAAM,EAAEhB,OAAQ;IAChBE,SAAS,EAAEU,yBAAM,CAACK,UAAAA;GACnB,CAAC,GAEFjB,OAEC,CAAC,EAELC,OAAO,iBACNK,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEL,IAAAA,SAAS,EAAES,aAAU,CACnBC,yBAAM,CAACM,YAAY;AACnB;AACAN,IAAAA,yBAAM,CAAC,CAAQ3B,KAAAA,EAAAA,WAAW,CAACC,IAAI,CAAC,EAAE,CACpC,CAAA;AAAE,GAAA,eAEFoB,KAAA,CAAAC,aAAA,CAACY,aAAW,EAAA;AACVjC,IAAAA,IAAI,EAAC,GAAG;IACRgB,SAAS,EAAEU,yBAAM,CAACQ,MAAO;AACzBvB,IAAAA,OAAO,EAAEA,OAAO,KAAK,SAAS,GAAG,YAAY,GAAG,WAAA;GACjD,CACE,CAEH,CAAC,CAAA;AAEX,CACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Loader.js","sources":["../../../../src/components/AlphaLoader/Loader.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"Loader.js","sources":["../../../../src/components/AlphaLoader/Loader.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { type LoaderProps } from './Loader.types'\n\nimport styles from './Loader.module.scss'\n\nexport const LOADER_TEST_ID = 'bezier-loader'\n\nexport const Loader = forwardRef<HTMLSpanElement, LoaderProps>(function Loader(\n { className, size, variant = 'secondary', ...rest },\n forwardedRef\n) {\n return (\n <span\n className={classNames(\n styles.Loader,\n size && styles[`size-${size}`],\n styles[`variant-${variant}`],\n className\n )}\n ref={forwardedRef}\n data-testid={LOADER_TEST_ID}\n {...rest}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n >\n <circle\n cx=\"8\"\n cy=\"8\"\n r=\"6.5\"\n className={styles.track}\n />\n\n <circle\n cx=\"8\"\n cy=\"8\"\n r=\"6.5\"\n className={styles.indicator}\n />\n </svg>\n </span>\n )\n})\n"],"names":["LOADER_TEST_ID","Loader","forwardRef","className","size","variant","rest","forwardedRef","React","createElement","Object","assign","classNames","styles","ref","xmlns","viewBox","cx","cy","r","track","indicator"],"mappings":";;;;;;AAUO,MAAMA,cAAc,GAAG,gBAAe;MAEhCC,MAAM,gBAAGC,gBAAU,CAA+B,SAASD,MAAMA,CAC5E;EAAEE,SAAS;EAAEC,IAAI;AAAEC,EAAAA,OAAO,GAAG,WAAW;EAAE,GAAGC,IAAAA;AAAK,CAAC,EACnDC,YAAY,EACZ;AACA,EAAA,oBACEC,KAAA,CAAAC,aAAA,CAAAC,MAAAA,EAAAA,MAAA,CAAAC,MAAA,CAAA;IACER,SAAS,EAAES,aAAU,CACnBC,qBAAM,CAACZ,MAAM,EACbG,IAAI,IAAIS,qBAAM,CAAC,CAAA,KAAA,EAAQT,IAAI,CAAE,CAAA,CAAC,EAC9BS,qBAAM,CAAC,CAAA,QAAA,EAAWR,OAAO,CAAE,CAAA,CAAC,EAC5BF,SACF,CAAE;AACFW,IAAAA,GAAG,EAAEP,YAAa;IAClB,aAAaP,EAAAA,cAAAA;AAAe,GAAA,EACxBM,IAAI,CAAA,eAERE,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEM,IAAAA,KAAK,EAAC,4BAA4B;AAClCC,IAAAA,OAAO,EAAC,WAAA;GAERR,eAAAA,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AACEQ,IAAAA,EAAE,EAAC,GAAG;AACNC,IAAAA,EAAE,EAAC,GAAG;AACNC,IAAAA,CAAC,EAAC,KAAK;IACPhB,SAAS,EAAEU,qBAAM,CAACO,KAAAA;AAAM,GACzB,CAAC,eAEFZ,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AACEQ,IAAAA,EAAE,EAAC,GAAG;AACNC,IAAAA,EAAE,EAAC,GAAG;AACNC,IAAAA,CAAC,EAAC,KAAK;IACPhB,SAAS,EAAEU,qBAAM,CAACQ,SAAAA;GACnB,CACE,CACD,CAAC,CAAA;AAEX,CAAC;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusBadge.js","sources":["../../../../src/components/AlphaStatusBadge/StatusBadge.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"StatusBadge.js","sources":["../../../../src/components/AlphaStatusBadge/StatusBadge.tsx"],"sourcesContent":["'use client'\n\nimport React, { type CSSProperties, forwardRef } from 'react'\n\nimport { MoonFilledIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { type SemanticColor } from '~/src/types/tokens'\nimport { cssVar } from '~/src/utils/style'\n\nimport { Icon } from '~/src/components/Icon'\n\nimport { type StatusBadgeProps } from './StatusBadge.types'\n\nimport styles from './StatusBadge.module.scss'\n\n// TODO: Change to use AlphaIcon and alpha color tokens\n\n/**\n * `StatusBadge` is a component to indicate user status.\n * @example\n *\n * ```tsx\n * <StatusBadge\n * size=\"m\"\n * online\n * doNotDisturb\n * />\n * ```\n */\nexport const StatusBadge = forwardRef<HTMLDivElement, StatusBadgeProps>(\n function StatusBadge(\n {\n size = 'm',\n online = false,\n doNotDisturb = false,\n style,\n className,\n ...rest\n },\n forwardedRef\n ) {\n const iconColor: SemanticColor = online\n ? 'bgtxt-green-normal'\n : doNotDisturb\n ? 'bgtxt-yellow-normal'\n : 'bg-black-dark'\n const backgroundColor: SemanticColor = doNotDisturb\n ? 'bg-white-high'\n : iconColor\n\n return (\n <div\n ref={forwardedRef}\n style={\n {\n '--b-status-bg-color': cssVar(backgroundColor),\n ...style,\n } as CSSProperties\n }\n className={classNames(\n styles.StatusBadge,\n styles[`size-${size}`],\n className\n )}\n {...rest}\n >\n {doNotDisturb && (\n <Icon\n source={MoonFilledIcon}\n size={size === 'm' ? 'xxxs' : 'xs'}\n color={iconColor}\n className={styles.Icon}\n />\n )}\n </div>\n )\n }\n)\n"],"names":["StatusBadge","forwardRef","size","online","doNotDisturb","style","className","rest","forwardedRef","iconColor","backgroundColor","React","createElement","Object","assign","ref","cssVar","classNames","styles","Icon","source","MoonFilledIcon","color"],"mappings":";;;;;;;;;AAgBA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaA,WAAW,gBAAGC,gBAAU,CACnC,SAASD,WAAWA,CAClB;AACEE,EAAAA,IAAI,GAAG,GAAG;AACVC,EAAAA,MAAM,GAAG,KAAK;AACdC,EAAAA,YAAY,GAAG,KAAK;SACpBC,OAAK;EACLC,SAAS;EACT,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,SAAwB,GAAGN,MAAM,GACnC,oBAAoB,GACpBC,YAAY,GACV,qBAAqB,GACrB,eAAe,CAAA;AACrB,EAAA,MAAMM,eAA8B,GAAGN,YAAY,GAC/C,eAAe,GACfK,SAAS,CAAA;AAEb,EAAA,oBACEE,KAAA,CAAAC,aAAA,CAAAC,KAAAA,EAAAA,MAAA,CAAAC,MAAA,CAAA;AACEC,IAAAA,GAAG,EAAEP,YAAa;AAClBH,IAAAA,KAAK,EACH;AACE,MAAA,qBAAqB,EAAEW,YAAM,CAACN,eAAe,CAAC;MAC9C,GAAGL,OAAAA;KAEN;AACDC,IAAAA,SAAS,EAAEW,aAAU,CACnBC,0BAAM,CAAClB,WAAW,EAClBkB,0BAAM,CAAC,CAAQhB,KAAAA,EAAAA,IAAI,CAAE,CAAA,CAAC,EACtBI,SACF,CAAA;GACIC,EAAAA,IAAI,GAEPH,YAAY,iBACXO,KAAA,CAAAC,aAAA,CAACO,SAAI,EAAA;AACHC,IAAAA,MAAM,EAAEC,0BAAe;AACvBnB,IAAAA,IAAI,EAAEA,IAAI,KAAK,GAAG,GAAG,MAAM,GAAG,IAAK;AACnCoB,IAAAA,KAAK,EAAEb,SAAU;IACjBH,SAAS,EAAEY,0BAAM,CAACC,IAAAA;AAAK,GACxB,CAEA,CAAC,CAAA;AAEV,CACF;;;;"}
|
|
@@ -7,7 +7,6 @@ var index$1 = require('../../node_modules/classnames/index.js');
|
|
|
7
7
|
var ToggleButtonContext = require('./ToggleButtonContext.js');
|
|
8
8
|
var ToggleButton_module = require('./ToggleButton.module.scss.js');
|
|
9
9
|
var Text = require('../Text/Text.js');
|
|
10
|
-
var Loader = require('../AlphaLoader/Loader.js');
|
|
11
10
|
var BaseButton = require('../BaseButton/BaseButton.js');
|
|
12
11
|
var Icon = require('../Icon/Icon.js');
|
|
13
12
|
|
|
@@ -30,7 +29,6 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton({
|
|
|
30
29
|
shape: shapeProps,
|
|
31
30
|
size = 'm',
|
|
32
31
|
className,
|
|
33
|
-
loading,
|
|
34
32
|
onSelectedChange,
|
|
35
33
|
...rest
|
|
36
34
|
}, forwardedRef) {
|
|
@@ -48,7 +46,7 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton({
|
|
|
48
46
|
ref: forwardedRef,
|
|
49
47
|
className: index$1.default(ToggleButton_module.default.Button, ToggleButton_module.default[`size-${size}`], ToggleButton_module.default[`variant-${variant}`], shape && ToggleButton_module.default[`shape-${shape}`], className)
|
|
50
48
|
}, /*#__PURE__*/React.createElement("div", {
|
|
51
|
-
className: index$1.default(ToggleButton_module.default.ButtonContent
|
|
49
|
+
className: index$1.default(ToggleButton_module.default.ButtonContent)
|
|
52
50
|
}, /*#__PURE__*/React.createElement(SideContent, {
|
|
53
51
|
size: ICON_SIZE,
|
|
54
52
|
content: prefixContent
|
|
@@ -60,14 +58,6 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton({
|
|
|
60
58
|
}, text), /*#__PURE__*/React.createElement(SideContent, {
|
|
61
59
|
size: ICON_SIZE,
|
|
62
60
|
content: suffixContent
|
|
63
|
-
})), loading && /*#__PURE__*/React.createElement("div", {
|
|
64
|
-
className: index$1.default(ToggleButton_module.default.ButtonLoader,
|
|
65
|
-
// NOTE: Loader size is the same as icon size
|
|
66
|
-
ToggleButton_module.default[`size-${ICON_SIZE}`])
|
|
67
|
-
}, /*#__PURE__*/React.createElement(Loader.Loader, {
|
|
68
|
-
size: "s",
|
|
69
|
-
className: ToggleButton_module.default.Loader,
|
|
70
|
-
variant: "secondary"
|
|
71
61
|
}))));
|
|
72
62
|
});
|
|
73
63
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleButton.js","sources":["../../../../src/components/AlphaToggleButton/ToggleButton.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"ToggleButton.js","sources":["../../../../src/components/AlphaToggleButton/ToggleButton.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport * as TogglePrimitive from '@radix-ui/react-toggle'\nimport classNames from 'classnames'\n\nimport { useToggleButtonContext } from '~/src/components/AlphaToggleButton/ToggleButtonContext'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon, type IconSize } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport { type ToggleButtonProps } from './ToggleButton.types'\n\nimport styles from './ToggleButton.module.scss'\n\nfunction SideContent({\n size,\n content,\n}: {\n size: IconSize\n content?: ToggleButtonProps['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\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n function ToggleButton(\n {\n as = BaseButton,\n text,\n prefixContent,\n suffixContent,\n variant = 'primary',\n shape: shapeProps,\n size = 'm',\n className,\n onSelectedChange,\n ...rest\n },\n forwardedRef\n ) {\n const { shape: shapeContext } = useToggleButtonContext()\n const shape = shapeProps ?? shapeContext ?? 'capsule'\n const Comp = as as typeof BaseButton\n const ICON_SIZE = 's'\n\n return (\n <TogglePrimitive.Root\n asChild\n onPressedChange={onSelectedChange}\n {...rest}\n >\n <Comp\n ref={forwardedRef}\n className={classNames(\n styles.Button,\n styles[`size-${size}`],\n styles[`variant-${variant}`],\n shape && styles[`shape-${shape}`],\n className\n )}\n >\n <div className={classNames(styles.ButtonContent)}>\n <SideContent\n size={ICON_SIZE}\n content={prefixContent}\n />\n\n {/* TODO: use AlphaText later, add typo */}\n <Text\n className={styles.ButtonText}\n typo=\"14\"\n data-text={text}\n truncated\n >\n {text}\n </Text>\n\n <SideContent\n size={ICON_SIZE}\n content={suffixContent}\n />\n </div>\n </Comp>\n </TogglePrimitive.Root>\n )\n }\n)\n"],"names":["SideContent","size","content","isBezierIcon","React","createElement","Icon","source","className","styles","ButtonIcon","ToggleButton","forwardRef","as","BaseButton","text","prefixContent","suffixContent","variant","shape","shapeProps","onSelectedChange","rest","forwardedRef","_ref","shapeContext","useToggleButtonContext","Comp","ICON_SIZE","TogglePrimitive","Object","assign","asChild","onPressedChange","ref","classNames","Button","ButtonContent","Text","ButtonText","typo","truncated"],"mappings":";;;;;;;;;;;;AAiBA,SAASA,WAAWA,CAAC;EACnBC,IAAI;AACJC,EAAAA,OAAAA;AAIF,CAAC,EAAE;EACD,OAAOC,wBAAY,CAACD,OAAO,CAAC,gBAC1BE,KAAA,CAAAC,aAAA,CAACC,SAAI,EAAA;AACHC,IAAAA,MAAM,EAAEL,OAAQ;AAChBD,IAAAA,IAAI,EAAEA,IAAK;IACXO,SAAS,EAAEC,2BAAM,CAACC,UAAAA;GACnB,CAAC,GAEFR,OACD,CAAA;AACH,CAAA;MAEaS,YAAY,gBAAGC,gBAAU,CACpC,SAASD,YAAYA,CACnB;AACEE,EAAAA,EAAE,GAAGC,qBAAU;EACfC,IAAI;EACJC,aAAa;EACbC,aAAa;AACbC,EAAAA,OAAO,GAAG,SAAS;AACnBC,EAAAA,KAAK,EAAEC,UAAU;AACjBnB,EAAAA,IAAI,GAAG,GAAG;EACVO,SAAS;EACTa,gBAAgB;EAChB,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;AAAA,EAAA,IAAAC,IAAA,CAAA;EACA,MAAM;AAAEL,IAAAA,KAAK,EAAEM,YAAAA;GAAc,GAAGC,0CAAsB,EAAE,CAAA;AACxD,EAAA,MAAMP,KAAK,GAAAK,CAAAA,IAAA,GAAGJ,UAAU,aAAVA,UAAU,KAAA,KAAA,CAAA,GAAVA,UAAU,GAAIK,YAAY,MAAAD,IAAAA,IAAAA,IAAA,KAAAA,KAAAA,CAAAA,GAAAA,IAAA,GAAI,SAAS,CAAA;EACrD,MAAMG,IAAI,GAAGd,EAAuB,CAAA;EACpC,MAAMe,SAAS,GAAG,GAAG,CAAA;EAErB,oBACExB,KAAA,CAAAC,aAAA,CAACwB,UAAoB,EAAAC,MAAA,CAAAC,MAAA,CAAA;IACnBC,OAAO,EAAA,IAAA;AACPC,IAAAA,eAAe,EAAEZ,gBAAAA;AAAiB,GAAA,EAC9BC,IAAI,CAERlB,eAAAA,KAAA,CAAAC,aAAA,CAACsB,IAAI,EAAA;AACHO,IAAAA,GAAG,EAAEX,YAAa;AAClBf,IAAAA,SAAS,EAAE2B,eAAU,CACnB1B,2BAAM,CAAC2B,MAAM,EACb3B,2BAAM,CAAC,CAAA,KAAA,EAAQR,IAAI,CAAA,CAAE,CAAC,EACtBQ,2BAAM,CAAC,CAAA,QAAA,EAAWS,OAAO,CAAA,CAAE,CAAC,EAC5BC,KAAK,IAAIV,2BAAM,CAAC,CAASU,MAAAA,EAAAA,KAAK,CAAE,CAAA,CAAC,EACjCX,SACF,CAAA;GAEAJ,eAAAA,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKG,IAAAA,SAAS,EAAE2B,eAAU,CAAC1B,2BAAM,CAAC4B,aAAa,CAAA;AAAE,GAAA,eAC/CjC,KAAA,CAAAC,aAAA,CAACL,WAAW,EAAA;AACVC,IAAAA,IAAI,EAAE2B,SAAU;AAChB1B,IAAAA,OAAO,EAAEc,aAAAA;AAAc,GACxB,CAAC,eAGFZ,KAAA,CAAAC,aAAA,CAACiC,SAAI,EAAA;IACH9B,SAAS,EAAEC,2BAAM,CAAC8B,UAAW;AAC7BC,IAAAA,IAAI,EAAC,IAAI;AACT,IAAA,WAAA,EAAWzB,IAAK;IAChB0B,SAAS,EAAA,IAAA;AAAA,GAAA,EAER1B,IACG,CAAC,eAEPX,KAAA,CAAAC,aAAA,CAACL,WAAW,EAAA;AACVC,IAAAA,IAAI,EAAE2B,SAAU;AAChB1B,IAAAA,OAAO,EAAEe,aAAAA;GACV,CACE,CACD,CACc,CAAC,CAAA;AAE3B,CACF;;;;"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var styles = {"
|
|
5
|
+
var styles = {"Button":"b-Uff8c","size-m":"b-uiuB9","ButtonText":"b-XEr1t","variant-primary":"b-0Kyle","variant-secondary":"b-xS5Uj","shape-rectangle":"b-K7FY1","shape-capsule":"b-fR1nh","ButtonIcon":"b-NsnxS","ButtonContent":"b--czc7"};
|
|
6
6
|
|
|
7
7
|
exports.default = styles;
|
|
8
8
|
//# sourceMappingURL=ToggleButton.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleButtonGroup.js","sources":["../../../../src/components/AlphaToggleButtonGroup/ToggleButtonGroup.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"ToggleButtonGroup.js","sources":["../../../../src/components/AlphaToggleButtonGroup/ToggleButtonGroup.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef, useMemo } from 'react'\n\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'\nimport classNames from 'classnames'\n\nimport { type ToggleButtonProps } from '~/src/components/AlphaToggleButton/ToggleButton.types'\nimport { ToggleButtonProvider } from '~/src/components/AlphaToggleButton/ToggleButtonContext'\nimport {\n type ToggleButtonMultipleGroupProps,\n type ToggleButtonSingleGroupProps,\n} from '~/src/components/AlphaToggleButtonGroup/ToggleButtonGroup.types'\n\nimport styles from './ToggleButtonGroup.module.scss'\n\n/**\n * `ToggleButtonGroup` is a group of two-state buttons that can be toggled.\n * Notice that it keeps at least one button selected.\n * @example\n *\n * ```tsx\n * <ToggleButtonGroup\n * shape=\"rectangle\"\n * value=\"two\"\n * >\n * <ToggleButton\n * value=\"one\"\n * text=\"left\"\n * />\n * <ToggleButton\n * value=\"two\"\n * text=\"center\"\n * />\n * <ToggleButton\n * value=\"three\"\n * text=\"right\"\n * />\n * </ToggleButtonGroup>\n * ```\n */\nexport const ToggleButtonGroup = forwardRef<\n HTMLDivElement,\n ToggleButtonMultipleGroupProps | ToggleButtonSingleGroupProps\n>(function ToggleButtonGroup(props, forwardedRef) {\n const { children, shape, className, fullWidth, onValueChange, ...rest } =\n props\n\n const handleValueChange = (value: string | string[]) => {\n if (!props.onValueChange || !value.length) {\n return\n }\n\n if (props.type === 'single' && typeof value === 'string') {\n props.onValueChange(value)\n } else if (props.type === 'multiple' && Array.isArray(value)) {\n props.onValueChange(value)\n }\n }\n\n const ToggleButtons = React.Children.map(children, (toggleButton) => {\n if (!React.isValidElement<ToggleButtonProps>(toggleButton)) {\n return null\n }\n\n return (\n <ToggleGroupPrimitive.Item\n asChild\n value={toggleButton.props.value}\n key={toggleButton.props.value}\n className={styles.item}\n >\n {toggleButton}\n </ToggleGroupPrimitive.Item>\n )\n })\n\n return (\n <ToggleGroupPrimitive.Root\n ref={forwardedRef}\n className={classNames(\n styles.ToggleButtonGroup,\n fullWidth && styles.fullWidth,\n className\n )}\n onValueChange={handleValueChange}\n {...rest}\n >\n <ToggleButtonProvider value={useMemo(() => ({ shape }), [shape])}>\n {ToggleButtons}\n </ToggleButtonProvider>\n </ToggleGroupPrimitive.Root>\n )\n})\n"],"names":["ToggleButtonGroup","forwardRef","props","forwardedRef","children","shape","className","fullWidth","onValueChange","rest","handleValueChange","value","length","type","Array","isArray","ToggleButtons","React","Children","map","toggleButton","isValidElement","createElement","ToggleGroupPrimitive","asChild","key","styles","item","Object","assign","ref","classNames","ToggleButtonProvider","useMemo"],"mappings":";;;;;;;;AAgBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,iBAAiB,gBAAGC,gBAAU,CAGzC,SAASD,iBAAiBA,CAACE,KAAK,EAAEC,YAAY,EAAE;EAChD,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,SAAS;IAAEC,SAAS;IAAEC,aAAa;IAAE,GAAGC,IAAAA;AAAK,GAAC,GACrEP,KAAK,CAAA;EAEP,MAAMQ,iBAAiB,GAAIC,KAAwB,IAAK;IACtD,IAAI,CAACT,KAAK,CAACM,aAAa,IAAI,CAACG,KAAK,CAACC,MAAM,EAAE;AACzC,MAAA,OAAA;AACF,KAAA;IAEA,IAAIV,KAAK,CAACW,IAAI,KAAK,QAAQ,IAAI,OAAOF,KAAK,KAAK,QAAQ,EAAE;AACxDT,MAAAA,KAAK,CAACM,aAAa,CAACG,KAAK,CAAC,CAAA;AAC5B,KAAC,MAAM,IAAIT,KAAK,CAACW,IAAI,KAAK,UAAU,IAAIC,KAAK,CAACC,OAAO,CAACJ,KAAK,CAAC,EAAE;AAC5DT,MAAAA,KAAK,CAACM,aAAa,CAACG,KAAK,CAAC,CAAA;AAC5B,KAAA;GACD,CAAA;EAED,MAAMK,aAAa,GAAGC,KAAK,CAACC,QAAQ,CAACC,GAAG,CAACf,QAAQ,EAAGgB,YAAY,IAAK;AACnE,IAAA,IAAI,eAACH,KAAK,CAACI,cAAc,CAAoBD,YAAY,CAAC,EAAE;AAC1D,MAAA,OAAO,IAAI,CAAA;AACb,KAAA;AAEA,IAAA,oBACEH,KAAA,CAAAK,aAAA,CAACC,UAAyB,EAAA;MACxBC,OAAO,EAAA,IAAA;AACPb,MAAAA,KAAK,EAAES,YAAY,CAAClB,KAAK,CAACS,KAAM;AAChCc,MAAAA,GAAG,EAAEL,YAAY,CAAClB,KAAK,CAACS,KAAM;MAC9BL,SAAS,EAAEoB,gCAAM,CAACC,IAAAA;AAAK,KAAA,EAEtBP,YACwB,CAAC,CAAA;AAEhC,GAAC,CAAC,CAAA;EAEF,oBACEH,KAAA,CAAAK,aAAA,CAACC,UAAyB,EAAAK,MAAA,CAAAC,MAAA,CAAA;AACxBC,IAAAA,GAAG,EAAE3B,YAAa;AAClBG,IAAAA,SAAS,EAAEyB,eAAU,CACnBL,gCAAM,CAAC1B,iBAAiB,EACxBO,SAAS,IAAImB,gCAAM,CAACnB,SAAS,EAC7BD,SACF,CAAE;AACFE,IAAAA,aAAa,EAAEE,iBAAAA;AAAkB,GAAA,EAC7BD,IAAI,CAERQ,eAAAA,KAAA,CAAAK,aAAA,CAACU,wCAAoB,EAAA;IAACrB,KAAK,EAAEsB,aAAO,CAAC,OAAO;AAAE5B,MAAAA,KAAAA;AAAM,KAAC,CAAC,EAAE,CAACA,KAAK,CAAC,CAAA;GAC5DW,EAAAA,aACmB,CACG,CAAC,CAAA;AAEhC,CAAC;;;;"}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var index = require('../../node_modules/@radix-ui/react-toggle-group/dist/index.js');
|
|
5
|
+
var index$1 = require('../../node_modules/classnames/index.js');
|
|
6
|
+
var useMergeRefs = require('../../hooks/useMergeRefs.js');
|
|
7
|
+
var style = require('../../utils/style.js');
|
|
8
|
+
var useToggleEmojiButtonSize = require('./useToggleEmojiButtonSize.js');
|
|
9
|
+
var ToggleEmojiButtonGroup_module = require('./ToggleEmojiButtonGroup.module.scss.js');
|
|
10
|
+
var BaseButton = require('../BaseButton/BaseButton.js');
|
|
11
|
+
var Emoji = require('../Emoji/Emoji.js');
|
|
12
|
+
|
|
13
|
+
const EMOJI_SIZE = 30;
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* Toggle Button that contains `Emoji` component with size fixed to 30.
|
|
17
|
+
* It should be used with `ToggleEmojiButtonGroup` component.
|
|
18
|
+
* @example
|
|
19
|
+
* ```tsx
|
|
20
|
+
* <ToggleEmojiButtonSource
|
|
21
|
+
* content={
|
|
22
|
+
* <Emoji
|
|
23
|
+
* imageUrl="https://cf.exp.channel.io/asset/emoji/images/80/a.png"
|
|
24
|
+
* name="A"
|
|
25
|
+
* />
|
|
26
|
+
* }
|
|
27
|
+
* />
|
|
28
|
+
* ```
|
|
29
|
+
*/
|
|
30
|
+
const ToggleEmojiButtonSource = /*#__PURE__*/React.forwardRef(function ToggleEmojiButtonSource({
|
|
31
|
+
name,
|
|
32
|
+
variant,
|
|
33
|
+
className,
|
|
34
|
+
selected,
|
|
35
|
+
size = 'm',
|
|
36
|
+
value,
|
|
37
|
+
onResize,
|
|
38
|
+
...rest
|
|
39
|
+
}, forwardedRef) {
|
|
40
|
+
return /*#__PURE__*/React.createElement(index.Item, {
|
|
41
|
+
value: value,
|
|
42
|
+
asChild: true
|
|
43
|
+
}, /*#__PURE__*/React.createElement(BaseButton.BaseButton, Object.assign({
|
|
44
|
+
ref: forwardedRef,
|
|
45
|
+
className: index$1.default(ToggleEmojiButtonGroup_module.default.ToggleEmojiButtonSource, ToggleEmojiButtonGroup_module.default[`size-${size}`], ToggleEmojiButtonGroup_module.default[`variant-${variant}`], className)
|
|
46
|
+
}, rest), /*#__PURE__*/React.createElement("div", {
|
|
47
|
+
className: index$1.default(ToggleEmojiButtonGroup_module.default.ButtonContent)
|
|
48
|
+
}, /*#__PURE__*/React.createElement(Emoji.Emoji, {
|
|
49
|
+
name: name,
|
|
50
|
+
size: `${EMOJI_SIZE}`
|
|
51
|
+
}))));
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
/**
|
|
55
|
+
* Component for grouping `ToggleEmojiButtonSource`.
|
|
56
|
+
* @example
|
|
57
|
+
* ```tsx
|
|
58
|
+
* <ToggleEmojiButtonGroup
|
|
59
|
+
* fillDirection="horizontal"
|
|
60
|
+
* >
|
|
61
|
+
* <ToggleEmojiButtonSource content={<Emoji />} />
|
|
62
|
+
* <ToggleEmojiButtonSource content={<Emoji />} />
|
|
63
|
+
* </ToggleEmojiButtonGroup>
|
|
64
|
+
* ```
|
|
65
|
+
*/
|
|
66
|
+
const ToggleEmojiButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleEmojiButtonGroup({
|
|
67
|
+
fillDirection,
|
|
68
|
+
value,
|
|
69
|
+
className,
|
|
70
|
+
defaultValue,
|
|
71
|
+
children,
|
|
72
|
+
style: style$1,
|
|
73
|
+
dir = 'ltr',
|
|
74
|
+
onValueChange,
|
|
75
|
+
...rest
|
|
76
|
+
}, forwardedRef) {
|
|
77
|
+
const [container, setContainer] = React.useState(null);
|
|
78
|
+
const mergedRefs = useMergeRefs.default(setContainer, forwardedRef);
|
|
79
|
+
const shouldResizeButton = fillDirection === 'all';
|
|
80
|
+
const resizedButtonSize = useToggleEmojiButtonSize.useToggleEmojiButtonSize({
|
|
81
|
+
container,
|
|
82
|
+
enabled: shouldResizeButton,
|
|
83
|
+
buttonCount: React.Children.count(children)
|
|
84
|
+
});
|
|
85
|
+
return /*#__PURE__*/React.createElement(index.Root, Object.assign({
|
|
86
|
+
type: "single",
|
|
87
|
+
defaultValue: defaultValue,
|
|
88
|
+
onValueChange: onValueChange,
|
|
89
|
+
value: value,
|
|
90
|
+
ref: mergedRefs,
|
|
91
|
+
style: {
|
|
92
|
+
'--b-toggle-emoji-button-emoji-size': style.cssDimension(EMOJI_SIZE),
|
|
93
|
+
'--b-toggle-emoji-button-size': style.cssDimension(shouldResizeButton ? resizedButtonSize : useToggleEmojiButtonSize.EMOJI_BUTTON_SIZE),
|
|
94
|
+
'--b-toggle-emoji-button-group-gap': style.cssDimension(useToggleEmojiButtonSize.EMOJI_BUTTON_GROUP_GAP),
|
|
95
|
+
...style$1
|
|
96
|
+
},
|
|
97
|
+
className: index$1.default(ToggleEmojiButtonGroup_module.default.ToggleEmojiButtonGroup, fillDirection && ToggleEmojiButtonGroup_module.default[`fillDirection-${fillDirection}`], className)
|
|
98
|
+
}, rest), children);
|
|
99
|
+
});
|
|
100
|
+
|
|
101
|
+
exports.ToggleEmojiButtonGroup = ToggleEmojiButtonGroup;
|
|
102
|
+
exports.ToggleEmojiButtonSource = ToggleEmojiButtonSource;
|
|
103
|
+
//# sourceMappingURL=ToggleEmojiButtonGroup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToggleEmojiButtonGroup.js","sources":["../../../../src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx"],"sourcesContent":["import React, { type CSSProperties, forwardRef, useState } from 'react'\n\nimport * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport classNames from 'classnames'\n\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\nimport { cssDimension } from '~/src/utils/style'\n\nimport {\n EMOJI_BUTTON_GROUP_GAP,\n EMOJI_BUTTON_SIZE,\n useToggleEmojiButtonSize,\n} from '~/src/components/AlphaToggleEmojiButtonGroup/useToggleEmojiButtonSize'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Emoji } from '~/src/components/Emoji'\n\nimport {\n type ToggleEmojiButtonGroupProps,\n type ToggleEmojiButtonSourceProps,\n} from './ToggleEmojiButtonGroup.types'\n\nimport styles from './ToggleEmojiButtonGroup.module.scss'\n\nconst EMOJI_SIZE = 30\n\n/**\n * Toggle Button that contains `Emoji` component with size fixed to 30.\n * It should be used with `ToggleEmojiButtonGroup` component.\n * @example\n * ```tsx\n * <ToggleEmojiButtonSource\n * content={\n * <Emoji\n * imageUrl=\"https://cf.exp.channel.io/asset/emoji/images/80/a.png\"\n * name=\"A\"\n * />\n * }\n * />\n * ```\n */\nexport const ToggleEmojiButtonSource = forwardRef<\n HTMLButtonElement,\n ToggleEmojiButtonSourceProps\n>(function ToggleEmojiButtonSource(\n { name, variant, className, selected, size = 'm', value, onResize, ...rest },\n forwardedRef\n) {\n return (\n <ToggleGroup.Item\n value={value}\n asChild\n >\n <BaseButton\n ref={forwardedRef}\n className={classNames(\n styles.ToggleEmojiButtonSource,\n styles[`size-${size}`],\n styles[`variant-${variant}`],\n className\n )}\n {...rest}\n >\n <div className={classNames(styles.ButtonContent)}>\n <Emoji\n name={name}\n size={`${EMOJI_SIZE}`}\n />\n </div>\n </BaseButton>\n </ToggleGroup.Item>\n )\n})\n\n/**\n * Component for grouping `ToggleEmojiButtonSource`.\n * @example\n * ```tsx\n * <ToggleEmojiButtonGroup\n * fillDirection=\"horizontal\"\n * >\n * <ToggleEmojiButtonSource content={<Emoji />} />\n * <ToggleEmojiButtonSource content={<Emoji />} />\n * </ToggleEmojiButtonGroup>\n * ```\n */\nexport const ToggleEmojiButtonGroup = forwardRef<\n HTMLDivElement,\n ToggleEmojiButtonGroupProps\n>(function ToggleEmojiButtonGroup(\n {\n fillDirection,\n value,\n className,\n defaultValue,\n children,\n style,\n dir = 'ltr',\n onValueChange,\n ...rest\n },\n forwardedRef\n) {\n const [container, setContainer] = useState<null | HTMLDivElement>(null)\n const mergedRefs = useMergeRefs(setContainer, forwardedRef)\n const shouldResizeButton = fillDirection === 'all'\n const resizedButtonSize = useToggleEmojiButtonSize({\n container,\n enabled: shouldResizeButton,\n buttonCount: React.Children.count(children),\n })\n\n return (\n <ToggleGroup.Root\n type=\"single\"\n defaultValue={defaultValue}\n onValueChange={onValueChange}\n value={value}\n ref={mergedRefs}\n style={\n {\n '--b-toggle-emoji-button-emoji-size': cssDimension(EMOJI_SIZE),\n '--b-toggle-emoji-button-size': cssDimension(\n shouldResizeButton ? resizedButtonSize : EMOJI_BUTTON_SIZE\n ),\n '--b-toggle-emoji-button-group-gap': cssDimension(\n EMOJI_BUTTON_GROUP_GAP\n ),\n ...style,\n } as CSSProperties\n }\n className={classNames(\n styles.ToggleEmojiButtonGroup,\n fillDirection && styles[`fillDirection-${fillDirection}`],\n className\n )}\n {...rest}\n >\n {children}\n </ToggleGroup.Root>\n )\n})\n"],"names":["EMOJI_SIZE","ToggleEmojiButtonSource","forwardRef","name","variant","className","selected","size","value","onResize","rest","forwardedRef","React","createElement","ToggleGroup","asChild","BaseButton","Object","assign","ref","classNames","styles","ButtonContent","Emoji","ToggleEmojiButtonGroup","fillDirection","defaultValue","children","style","dir","onValueChange","container","setContainer","useState","mergedRefs","useMergeRefs","shouldResizeButton","resizedButtonSize","useToggleEmojiButtonSize","enabled","buttonCount","Children","count","type","cssDimension","EMOJI_BUTTON_SIZE","EMOJI_BUTTON_GROUP_GAP"],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var styles = {"ToggleEmojiButtonGroup":"b-BvGn3","fillDirection-horizontal":"b-Uc9W-","ToggleEmojiButtonSource":"b-dTDIt","fillDirection-all":"b-ZXpu-","size-m":"b-thGFh","variant-primary":"b-ZZrhz","variant-secondary":"b-j-Def","ButtonContent":"b-5Echs"};
|
|
6
|
+
|
|
7
|
+
exports.default = styles;
|
|
8
|
+
//# sourceMappingURL=ToggleEmojiButtonGroup.module.scss.js.map
|
package/dist/cjs/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToggleEmojiButtonGroup.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|