feat(components): adding on progress badge components

packages/badges/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@bootwind/button",
+  "version": "0.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.14"
+  }
+}

packages/badges/src/index.tsx

@@ -0,0 +1,66 @@
+import React, { ReactNode } from 'react';
+
+export interface BadgeProps {
+  variant: 'primary' | 'neutral' | 'warning' | 'success' | 'error';
+  size?: 'small' | 'large';
+  withIcon?: ReactNode;
+  withDot?: boolean;
+}
+
+const DotSvg = () => (
+  <svg
+    className="-ml-0.5 mr-1.5 h-2 w-2 text-indigo-400"
+    fill="currentColor"
+    viewBox="0 0 8 8"
+  >
+    <circle cx={4} cy={4} r={3} />
+  </svg>
+);
+
+const Badge: React.FC<BadgeProps> = ({
+  variant,
+  size = 'small',
+  withIcon = null,
+  withDot = false,
+}) => {
+  const baseClasses = `inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium`;
+
+  const sizeClasses = size === 'large' ? 'text-sm' : '';
+
+  const badgeContent = (
+    <>
+      {withDot && (
+        <span className="mr-1.5">
+          <DotSvg />
+        </span>
+      )}
+      {withIcon && <span className="mr-0.5">{withIcon}</span>}
+      Badge
+    </>
+  );
+
+  const getVariantClasses = () => {
+    switch (variant) {
+      case 'primary':
+        return 'bg-blue-500 text-white';
+      case 'neutral':
+        return `bg-gray-300 text-gray-800`;
+      case 'warning':
+        return 'bg-yellow-500 text-white';
+      case 'success':
+        return 'bg-green-500 text-white';
+      case 'error':
+        return 'bg-red-500 text-white';
+      default:
+        return `bg-gray-300 text-gray-800`;
+    }
+  };
+
+  return (
+    <span className={`${baseClasses} ${sizeClasses} ${getVariantClasses()}`}>
+      {badgeContent}
+    </span>
+  );
+};
+
+export default Badge;

packages/badges/stories/Badges.stories.tsx

@@ -0,0 +1,71 @@
+// Badge.stories.tsx
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import Badge, { BadgeProps } from '../src/index';
+
+export default {
+  title: 'Components/Badge',
+  component: Badge,
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+        options: ['primary', 'neutral', 'warning', 'success', 'error'],
+      },
+    },
+    size: {
+      control: {
+        type: 'select',
+        options: ['small', 'large'],
+      },
+    },
+  },
+} as Meta;
+
+const Template: Story<BadgeProps> = args => <Badge {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  variant: 'primary',
+};
+
+export const Neutral = Template.bind({});
+Neutral.args = {
+  variant: 'neutral',
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  variant: 'warning',
+  withDot: true,
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  variant: 'success',
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  variant: 'error',
+  withIcon: <span>🚨</span>,
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  variant: 'primary',
+  size: 'large',
+};
+
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+  variant: 'primary',
+  withIcon: <span>🌟</span>,
+};
+
+export const WithDotAndIcon = Template.bind({});
+WithDotAndIcon.args = {
+  variant: 'warning',
+  withDot: true,
+  withIcon: <span>🔔</span>,
+};

packages/badges/tsconfig.json

@@ -0,0 +1,4 @@
+{
+    "extends": ["../../tsconfig.json"],
+    "include": ["src"]
+}