feat(libs/docs): add callout stories

apps/docs/tailwind.config.js

@@ -7,6 +7,7 @@ import TailwindAnimate from 'tailwindcss-animate'
 export default {
   content: [
     '../../libs/docs/components/**/*.{ts,tsx}',
+    '../../libs/docs/components/**/*.stories.{ts,tsx}',
     './mdx-components.{ts,tsx}',
     '{src,components,app,content}/**/*!(*.stories|*.spec).{ts,tsx,md,mdx,html}',
     '../../node_modules/fumadocs-ui/dist/**/*.js',

libs/docs/components/ui/callout.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Callout } from 'fumadocs-ui/components/callout'
+
+const meta: Meta<typeof Callout> = {
+  title: '📚 Docs Site/Callout',
+  parameters: {
+    layout: 'centered',
+  },
+  component: Callout,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      options: ['info', 'warn', 'error'],
+      control: { type: 'select' },
+      description: 'The type of callout (info, warn, error)',
+    },
+    title: {
+      control: 'text',
+      description: 'The title of the callout',
+    },
+    children: {
+      control: 'text',
+      description: 'The content inside the callout',
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Callout>
+
+export const Default: Story = {
+  args: {
+    title: 'Callout',
+    type: 'info',
+    children: 'This is a default callout. You can edit this text.',
+  },
+  render: args => (
+    <div>
+      <Callout {...args}>{args.children}</Callout>
+    </div>
+  ),
+}
+
+export const Warn: Story = {
+  args: {
+    title: 'Warn Callout',
+    type: 'warn',
+    children: 'This is a warning callout. Pay attention to this message.',
+  },
+  render: args => (
+    <div>
+      <Callout {...args}>{args.children}</Callout>
+    </div>
+  ),
+}
+
+export const Error: Story = {
+  args: {
+    title: 'Error Callout',
+    type: 'error',
+    children: 'This is an error callout. Action may be required.',
+  },
+  render: args => (
+    <div>
+      <Callout {...args}>{args.children}</Callout>
+    </div>
+  ),
+}

tailwind.config.ts

@@ -3,6 +3,7 @@ import TailwindAnimate from 'tailwindcss-animate'
 export default {
   content: [
     '{libs,apps}/**/*!(*.stories|*.spec).{ts,tsx,html}',
+    './node_modules/fumadocs-ui/dist/**/*.js',
   ],
   theme: {
     extend: {
@@ -78,11 +79,11 @@ export default {
         'orbit': {
           '0%': {
             transform:
-                'rotate(0deg) translateY(calc(var(--radius) * 1px)) rotate(0deg)',
+              'rotate(0deg) translateY(calc(var(--radius) * 1px)) rotate(0deg)',
           },
           '100%': {
             transform:
-                'rotate(360deg) translateY(calc(var(--radius) * 1px)) rotate(-360deg)',
+              'rotate(360deg) translateY(calc(var(--radius) * 1px)) rotate(-360deg)',
           },
         },
       },