design system token v0.1

stories/Feedback/Spinner.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Spinner } from '@/components/ui/spinner'
+
+const meta = {
+  title: 'Feedback/Spinner',
+  component: Spinner,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+} satisfies Meta<typeof Spinner>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Small: Story = {
+  args: {
+    className: 'size-3 animate-spin',
+  },
+}
+
+export const Large: Story = {
+  args: {
+    className: 'size-8 animate-spin',
+  },
+}
+
+export const ExtraLarge: Story = {
+  args: {
+    className: 'size-12 animate-spin',
+  },
+}
+
+export const WithText: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Spinner />
+      <span className="text-sm text-muted-foreground">Loading...</span>
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Spinner className="size-3 animate-spin" />
+      <Spinner />
+      <Spinner className="size-6 animate-spin" />
+      <Spinner className="size-8 animate-spin" />
+      <Spinner className="size-12 animate-spin" />
+    </div>
+  ),
+}