chore: storybook (#15285)

Co-authored-by: David Hill <[email protected]>

1 files changed, 59 insertions, 0 deletions

diff --git a/packages/ui/src/components/progress-circle.stories.tsx b/packages/ui/src/components/progress-circle.stories.tsx
new file mode 100644
index 000000000..5bc23c310
--- /dev/null
+++ b/packages/ui/src/components/progress-circle.stories.tsx
@@ -0,0 +1,59 @@
+// @ts-nocheck
+import * as mod from "./progress-circle"
+import { create } from "../storybook/scaffold"
+
+const docs = `### Overview
+Circular progress indicator for compact loading states.
+
+Pair with labels for clarity in dashboards.
+
+### API
+- Required: \`percentage\` (0-100).
+- Optional: \`size\`, \`strokeWidth\`.
+
+### Variants and states
+- Single visual style; size and stroke width adjust appearance.
+
+### Behavior
+- Percentage is clamped between 0 and 100.
+
+### Accessibility
+- Use alongside text or aria-live messaging for progress context.
+
+### Theming/tokens
+- Uses \`data-component="progress-circle"\` with background/progress slots.
+
+`
+
+const story = create({ title: "UI/ProgressCircle", mod, args: { percentage: 65, size: 48 } })
+
+export default {
+  title: "UI/ProgressCircle",
+  id: "components-progress-circle",
+  component: story.meta.component,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: docs,
+      },
+    },
+  },
+  argTypes: {
+    percentage: {
+      control: { type: "range", min: 0, max: 100, step: 1 },
+    },
+  },
+}
+
+export const Basic = story.Basic
+
+export const States = {
+  render: () => (
+    <div style={{ display: "flex", gap: "16px", "align-items": "center" }}>
+      <mod.ProgressCircle percentage={0} size={32} />
+      <mod.ProgressCircle percentage={50} size={32} />
+      <mod.ProgressCircle percentage={100} size={32} />
+    </div>
+  ),
+}