Add CircleStat

public/mockServiceWorker.js

@@ -278,4 +278,4 @@ async function respondWithMock(response) {
   });
 
   return mockedResponse;
-}
+}

src/primitives/Indicators/CircleStat/CircleStat.mdx

@@ -0,0 +1,23 @@
+import { Meta, Title, Primary, Stories, Controls, Story } from "@storybook/blocks";
+import * as CircleStatStories from "./CircleStat.stories";
+import { CircleStat } from "./CircleStat";
+
+# CircleStat
+
+<Meta of={CircleStatStories} />
+
+The `CircleStat` component displays a circular statistic that visually represents a value as a percentage. It supports customizable sizes, colors, the option to show or hide the percentage symbol, and allows for custom color thresholds based on the value.
+
+## Example
+
+### Default CircleStat
+
+<Story of={CircleStatStories.Default} />
+
+## Controls
+
+<Controls />
+
+## Other Variations
+
+<Stories />

src/primitives/Indicators/CircleStat/CircleStat.stories.tsx

@@ -0,0 +1,104 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { CircleStat } from "./CircleStat";
+
+const meta: Meta<typeof CircleStat> = {
+  title: "Primitives/CircleStat",
+  component: CircleStat,
+  args: {
+    value: 50,
+  },
+  argTypes: {
+    size: {
+      control: {
+        type: "select",
+        options: ["small", "medium", "large"]
+      },
+      table: {
+        type: {
+          summary: "string",
+        },
+      }
+    },
+    value: {
+      control: "number",
+      table: {
+        type: {
+          summary: "number | string",
+        },
+      },
+    },
+    showPercentageSymbol: {
+      control: "boolean",
+    },
+    colors: {
+      control: "object",
+    },
+    className: {
+      control: "text",
+    },
+  },
+} satisfies Meta<typeof CircleStat>;
+
+export default meta;
+
+type Story = StoryObj<typeof CircleStat>;
+
+export const Default: Story = {};
+
+export const LowPercentage: Story = {
+  args: {
+    value: 23,
+  },
+};
+
+export const MidPercentage: Story = {
+  args: {
+    value: 54,
+  },
+};
+
+export const HighPercentage: Story = {
+  args: {
+    value: 60,
+  },
+};
+
+export const CustomColor: Story = {
+  render: () => {
+    const stats = [
+      { value: 23 },
+      { value: 54 },
+      { value: 85 },
+    ];
+
+    return (
+      <div className="flex space-x-4">
+        {stats.map((stat) => (
+          <CircleStat
+            key={stat.value}
+            value={stat.value}
+            className="text-white"
+            colors={{
+              low: '#666666',
+              mid: '#444444',
+              high: '#000000',
+            }}
+          />
+        ))}
+      </div>
+    );
+  },
+};
+
+export const WithCustomClassName: Story = {
+  args: {
+    className: "border-4 border-blue-500",
+  },
+};
+
+export const WithoutPercentageSymbol: Story = {
+  args: {
+    value: 42,
+    showPercentageSymbol: false,
+  },
+};

src/primitives/Indicators/CircleStat/CircleStat.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+
+
+
+import { tv } from "tailwind-variants";
+
+interface CircleStatProps {
+  value: number | string;
+  size?: "small" | "medium" | "large";
+  showPercentageSymbol?: boolean;
+  thresholds?: { low: number; mid: number };
+  colors?: { low: string; mid: string; high: string };
+  className?: string;
+}
+
+const circleStat = tv({
+  base: "flex items-center justify-center rounded-full text-center font-sans font-normal",
+  variants: {
+    size: {
+      small: "size-8 text-xs",
+      medium: "size-12 text-base",
+      large: "size-16 text-lg",
+    },
+    color: {
+      low: "bg-orange-300",
+      mid: "bg-yellow-300",
+      high: "bg-green-300",
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+    color: "low",
+  },
+});
+
+export const CircleStat: React.FC<CircleStatProps> = ({
+  value,
+  size = "medium",
+  showPercentageSymbol = true,
+  thresholds = { low: 30, mid: 60 },
+  colors,
+  className,
+}) => {
+  const getColorVariant = () => {
+    const _value = typeof value === "string" ? parseFloat(value) : value;
+    if (isNaN(_value) || _value <= thresholds.low) return "low";
+    else if (_value < thresholds.mid) return "mid";
+    else return "high";
+  };
+
+  const colorVariant = getColorVariant();
+  const colorStyle = colors ? { backgroundColor: colors[colorVariant] } : {};
+
+  return (
+    <div className={circleStat({ size, color: colorVariant, class: className })} style={colorStyle}>
+      {`${value}${showPercentageSymbol ? "%" : ""}`}
+    </div>
+  );
+};

src/primitives/Indicators/index.ts

@@ -0,0 +1 @@
+export * from "./CircleStat/CircleStat";

src/tokens/colors.ts

@@ -11,8 +11,13 @@ export const colors: Colors = {
   black: "#000000",
   orange: {
     "200": "#F68561",
+    "300": "#ff9776",
   },
   green: {
+    "300": "#c4f092",
     "600": "#558A17",
   },
+  yellow: {
+    "300": "#ffea7d",
+  },
 };

tailwind.config.ts

@@ -11,6 +11,7 @@ export default withTV({
     extend: {
       fontFamily: {
         mono: ["DM Mono", "monospace"],
+        sans: ["DM Sans", "sans-serif"],
       },
       borderRadius: {
         lg: "var(--radius)",