feat: added new IconBadge component

.changeset/real-beds-leave.md

@@ -0,0 +1,7 @@
+---
+'@saas-ui/theme': minor
+'@saas-ui/core': minor
+'@saas-ui/react': minor
+---
+
+Added new IconBadge component

packages/saas-ui-core/src/icon-badge/icon-badge.tsx

@@ -0,0 +1,64 @@
+import {
+  chakra,
+  useStyleConfig,
+  IconProps,
+  ThemingProps,
+  forwardRef,
+} from '@chakra-ui/react'
+import { cx } from '@chakra-ui/utils'
+import { cloneElement, isValidElement } from 'react'
+
+export interface IconBadgeProps
+  extends IconProps,
+    ThemingProps<'SuiIconBadge'> {
+  /**
+   * The icon to be used in the button.
+   * @type React.ReactElement
+   */
+  icon?: React.ReactElement
+  /**
+   * If `true`, the badge will be perfectly round. Else, it'll be slightly round
+   *
+   * @default false
+   */
+  isRound?: boolean
+  /**
+   * A11y: A label that describes the icon
+   */
+  'aria-label'?: string
+}
+
+export const IconBadge = forwardRef<IconBadgeProps, 'div'>((props) => {
+  const { icon, children, isRound, 'aria-label': ariaLabel, ...rest } = props
+  const styles = useStyleConfig('SuiIconBadge', props)
+
+  /**
+   * Passing the icon as prop or children should work
+   */
+  const element = icon || children
+  const _children = isValidElement(element)
+    ? cloneElement(element as any, {
+        'aria-hidden': true,
+        focusable: false,
+      })
+    : null
+
+  const __css = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...styles,
+  }
+
+  return (
+    <chakra.div
+      __css={__css}
+      borderRadius={isRound ? 'full' : undefined}
+      aria-label={ariaLabel}
+      {...rest}
+      className={cx('sui-icon-badge', props.className)}
+    >
+      {_children}
+    </chakra.div>
+  )
+})

packages/saas-ui-core/src/icon-badge/index.ts

@@ -0,0 +1 @@
+export { IconBadge, type IconBadgeProps } from './icon-badge'

packages/saas-ui-core/src/index.ts

@@ -209,3 +209,4 @@ export {
   ViewOffIcon,
 } from './icons'
 export { createIcon } from './icons/create-icon'
+export { type IconBadgeProps, IconBadge } from './icon-badge'

packages/saas-ui-theme/src/base/components/icon-badge.ts

@@ -0,0 +1,45 @@
+import { defineStyleConfig } from '@chakra-ui/styled-system'
+
+export const iconBadgeTheme = defineStyleConfig({
+  baseStyle: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  variants: {
+    outline: ({ colorScheme }) => {
+      return {
+        borderWidth: '1px',
+        borderColor: colorScheme ? `${colorScheme}.500` : 'chakra-border-color',
+        color: colorScheme ? `${colorScheme}.500` : 'currentColor',
+      }
+    },
+    solid: ({ colorScheme = 'gray' }) => {
+      return {
+        bg: `${colorScheme}.500`,
+        color: 'white',
+      }
+    },
+  },
+  sizes: {
+    sm: {
+      borderRadius: 'sm',
+      fontSize: '0.9em',
+      p: 1,
+    },
+    md: {
+      borderRadius: 'md',
+      fontSize: '1em',
+      p: 2,
+    },
+    lg: {
+      borderRadius: 'md',
+      fontSize: '1.3em',
+      p: 3,
+    },
+  },
+  defaultProps: {
+    variant: 'outline',
+    size: 'md',
+  },
+})

packages/saas-ui-theme/src/base/components/index.ts

@@ -17,6 +17,7 @@ import { sidebarTheme } from './sidebar'
 import { selectTheme } from './select'
 import { structuredListTheme } from './structured-list'
 import { timelineTheme } from './timeline'
+import { iconBadgeTheme } from './icon-badge'
 
 export { appShellTheme as SuiAppShell } from './app-shell'
 export { bannerTheme as SuiBanner } from './banner'
@@ -37,6 +38,7 @@ export { selectTheme as SuiSelect } from './select'
 export { sidebarTheme as SuiSidebar } from './sidebar'
 export { structuredListTheme as SuiStructuredList } from './structured-list'
 export { timelineTheme as SuiTimeline } from './timeline'
+export { iconBadgeTheme as SuiIconBadge } from './icon-badge'
 
 export const components = {
   SuiAppShell: appShellTheme,
@@ -58,4 +60,5 @@ export const components = {
   SuiSelect: selectTheme,
   SuiSidebar: sidebarTheme,
   SuiTimeline: timelineTheme,
+  SuiIconBadge: iconBadgeTheme,
 }