chore: storybook (#15285)

Co-authored-by: David Hill <iamdavidhill@gmail.com>

packages/ui/src/components/spinner.stories.tsx

@@ -0,0 +1,53 @@
+// @ts-nocheck
+import * as mod from "./spinner"
+import { create } from "../storybook/scaffold"
+
+const docs = `### Overview
+Animated loading indicator for inline or page-level loading states.
+
+Use with \`Button\` or in empty states.
+
+### API
+- Accepts standard SVG props (class, style).
+
+### Variants and states
+- Single default animation style.
+
+### Behavior
+- Animation is CSS-driven via data attributes.
+
+### Accessibility
+- Use alongside text or aria-live regions to convey loading state.
+
+### Theming/tokens
+- Uses \`data-component="spinner"\` for styling hooks.
+
+`
+
+const story = create({ title: "UI/Spinner", mod })
+
+export default {
+  title: "UI/Spinner",
+  id: "components-spinner",
+  component: story.meta.component,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: docs,
+      },
+    },
+  },
+}
+
+export const Basic = story.Basic
+
+export const Sizes = {
+  render: () => (
+    <div style={{ display: "flex", gap: "16px", "align-items": "center" }}>
+      <mod.Spinner style={{ width: "12px", height: "12px" }} />
+      <mod.Spinner style={{ width: "20px", height: "20px" }} />
+      <mod.Spinner style={{ width: "28px", height: "28px" }} />
+    </div>
+  ),
+}