feat(ui): add badge component

.changeset/unlucky-zoos-allow.md

@@ -0,0 +1,5 @@
+---
+'@codeimage/ui': minor
+---
+
+feat(ui): add Badge component

apps/codeimage/src/components/UserBadge/UserBadge.css.ts

@@ -2,13 +2,6 @@ import {themeVars} from '@codeimage/ui';
 import {style} from '@vanilla-extract/css';
 
 export const badge = style({
-  width: '36px',
-  height: '36px',
-  fontSize: '15px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: themeVars.borderRadius.lg,
-  backgroundColor: themeVars.backgroundColor.indigo['500'],
+  backgroundColor: themeVars.backgroundColor.green['600'],
   color: themeVars.backgroundColor.white,
 });

apps/codeimage/src/components/UserBadge/UserBadge.tsx

@@ -1,7 +1,7 @@
 import {getAuthState} from '@codeimage/store/auth/auth';
-import {Button} from '@codeimage/ui';
+import {Badge, Button} from '@codeimage/ui';
 import {Show} from 'solid-js';
-import * as styles from './UserBadge.css';
+import {badge} from './UserBadge.css';
 
 export function UserBadge() {
   const {loggedIn, signInWithGithub, user} = getAuthState();
@@ -28,7 +28,9 @@ export function UserBadge() {
       }
       when={loggedIn()}
     >
-      <div class={styles.badge}>{initials()}</div>
+      <Badge theme={badge} size={'md'}>
+        {initials()}
+      </Badge>
     </Show>
   );
 }

packages/ui/src/lib/primitives/Badge/Badge.css.ts

@@ -0,0 +1,49 @@
+import {recipe, RecipeVariants} from '@vanilla-extract/recipes';
+import {themeVars} from '../../theme';
+import * as textStyles from '../Text/Text.css';
+import {fontSize} from '../Text/Text.css';
+
+export const badge = recipe({
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: themeVars.borderRadius.lg,
+  },
+  variants: {
+    variant: {
+      rounded: {
+        borderRadius: '50%',
+      },
+      square: {
+        borderRadius: themeVars.borderRadius.lg,
+      },
+    },
+    size: {
+      md: [
+        textStyles.fontSize.base,
+        {
+          width: '36px',
+          height: '36px',
+          fontSize: fontSize.base,
+        },
+      ],
+      sm: [
+        textStyles.fontSize.sm,
+        {
+          width: '28px',
+          height: '28px',
+        },
+      ],
+      xs: [
+        textStyles.fontSize.xs,
+        {
+          width: '24px',
+          height: '24px',
+        },
+      ],
+    },
+  },
+});
+
+export type BadgeVariants = RecipeVariants<typeof badge>;

packages/ui/src/lib/primitives/Badge/Badge.tsx

@@ -0,0 +1,22 @@
+import clsx from 'clsx';
+import {ParentProps} from 'solid-js';
+import {styled} from '../../utils';
+import * as styles from './Badge.css';
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type BadgeProps = styles.BadgeVariants & {
+  theme: string;
+};
+
+export function Badge(props: ParentProps<BadgeProps>) {
+  const classes = () =>
+    clsx(
+      styles.badge({
+        size: props.size,
+        variant: props.variant,
+      }),
+      props.theme,
+    );
+
+  return <styled.div class={classes()}>{props.children}</styled.div>;
+}

packages/ui/src/lib/primitives/Badge/index.ts

@@ -0,0 +1 @@
+export * from './Badge';

packages/ui/src/lib/primitives/index.ts

@@ -71,3 +71,5 @@ export {Popover} from './Popover';
 export {MenuButton, MenuItem, MenuPopup, DropdownMenuV2} from './Menu';
 
 export {RadioField, RadioGroupField} from './Radio';
+
+export {Badge, type BadgeProps} from './Badge';