tharaday 0.1.1

package/src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Badge } from './Badge.tsx';
+import { Box } from '../Box/Box.tsx';
+
+const meta = {
+  title: 'Components/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    intent: {
+      control: 'select',
+      options: ['neutral', 'success', 'warning', 'danger', 'info'],
+    },
+    variant: {
+      control: 'select',
+      options: ['solid', 'subtle', 'outline'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Solid: Story = {
+  args: {
+    variant: 'solid',
+    children: 'Badge',
+    intent: 'neutral',
+  },
+};
+
+export const Subtle: Story = {
+  args: {
+    variant: 'subtle',
+    children: 'Subtle Badge',
+    intent: 'success',
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    variant: 'outline',
+    children: 'Outline Badge',
+    intent: 'danger',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    intent: 'success',
+    children: 'Success',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    intent: 'warning',
+    children: 'Warning',
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    intent: 'danger',
+    children: 'Danger',
+  },
+};
+
+export const Info: Story = {
+  args: {
+    intent: 'info',
+    children: 'Info',
+  },
+};
+
+export const All: Story = {
+  name: 'Gallery',
+  render: () => (
+    <Box display="flex" flexDirection="column" gap={8}>
+      {(['solid', 'subtle', 'outline'] as const).map((variant) => (
+        <Box key={variant} display="flex" flexDirection="column" gap={4}>
+          <Box as="h3" m={0} style={{ textTransform: 'capitalize' }}>
+            {variant}
+          </Box>
+          <Box display="flex" flexWrap="wrap" gap={4}>
+            {(['neutral', 'success', 'warning', 'danger', 'info'] as const).map((intent) => (
+              <Box key={intent} display="flex" gap={2} alignItems="center">
+                {(['sm', 'md', 'lg'] as const).map((size) => (
+                  <Badge key={size} variant={variant} intent={intent} size={size}>
+                    Badge
+                  </Badge>
+                ))}
+              </Box>
+            ))}
+          </Box>
+        </Box>
+      ))}
+    </Box>
+  ),
+};

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,22 @@
+import clsx from 'clsx';
+
+import styles from './Badge.module.css';
+import type { BadgeProps } from './Badge.types.ts';
+
+export const Badge = ({
+  variant = 'solid',
+  size = 'md',
+  intent = 'neutral',
+  className,
+  children,
+  ...props
+}: BadgeProps) => {
+  return (
+    <span
+      className={clsx(styles.root, styles[variant], styles[size], styles[intent], className)}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+};

package/src/components/Badge/Badge.types.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'react';
+
+export type BadgeVariant = 'solid' | 'subtle' | 'outline';
+export type BadgeSize = 'sm' | 'md' | 'lg';
+export type BadgeIntent = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  intent?: BadgeIntent;
+}