feat(ui): add DataTag

packages/ui-components/Common/CircularIcon/index.module.css

@@ -0,0 +1,52 @@
+@reference "../../styles/index.css";
+
+.icon {
+  @apply flex
+    items-center
+    justify-center
+    rounded-full
+    font-semibold
+    text-white;
+
+  &.lg {
+    @apply size-12
+      text-2xl;
+  }
+
+  &.md {
+    @apply size-10
+      text-xl;
+  }
+
+  &.sm {
+    @apply size-8;
+  }
+
+  &.event {
+    @apply bg-purple-600;
+  }
+
+  &.method {
+    @apply bg-info-600;
+  }
+
+  &.property {
+    @apply bg-green-600;
+  }
+
+  &.class {
+    @apply bg-warning-600;
+  }
+
+  &.module {
+    @apply bg-red-600;
+  }
+
+  &.classMethod {
+    @apply bg-blue-600;
+  }
+
+  &.ctor {
+    @apply bg-pink-600;
+  }
+}

packages/ui-components/Common/CircularIcon/index.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import CircularIcon, { type CircularIconProps } from '#ui/Common/CircularIcon';
+
+type Story = StoryObj<typeof CircularIcon>;
+type Meta = MetaObj<typeof CircularIcon>;
+
+export const Icons: Story = {
+  render: () => (
+    <div className="grid grid-cols-3 gap-6 p-6">
+      {['event', 'method', 'property', 'class', 'module', 'classMethod', 'ctor']
+        .map(kind =>
+          ['sm', 'md', 'lg'].map(size => (
+            <div key={`${kind}-${size}`} className="flex justify-center">
+              <CircularIcon
+                kind={kind as CircularIconProps['kind']}
+                size={size as CircularIconProps['size']}
+              />
+            </div>
+          ))
+        )
+        .flat()}
+    </div>
+  ),
+};
+
+export default { component: CircularIcon } as Meta;

packages/ui-components/Common/CircularIcon/index.tsx

@@ -0,0 +1,33 @@
+import classNames from 'classnames';
+
+import styles from './index.module.css';
+
+export type CircularIconProps = {
+  kind:
+    | 'event'
+    | 'method'
+    | 'property'
+    | 'class'
+    | 'module'
+    | 'classMethod'
+    | 'ctor';
+  size?: 'lg' | 'md' | 'sm';
+};
+
+const symbolMap = {
+  event: 'E',
+  method: 'M',
+  property: 'P',
+  class: 'C',
+  module: 'M',
+  classMethod: 'S',
+  ctor: 'C',
+} as const;
+
+export default function CircularIcon({ kind, size = 'md' }: CircularIconProps) {
+  return (
+    <div className={classNames(styles.icon, styles[size], styles[kind])}>
+      <span>{symbolMap[kind]}</span>
+    </div>
+  );
+}