@shohojdhara/atomix 0.4.0 → 0.4.2

package/src/components/Callout/Callout.stories.tsx

@@ -1,1124 +1,279 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Button } from '../Button/Button';
 import { Callout } from './Callout';
-import { THEME_COLORS } from '../../lib/constants/components';
+import { Icon } from '../Icon/Icon';
 
 const meta = {
   title: 'Components/Callout',
   component: Callout,
   parameters: {
-    layout: 'padded',
+    layout: 'centered',
     docs: {
       description: {
-        component:
-          'Callout components are used to display important messages, notifications, or alerts to users. They can be used to provide feedback, warnings, errors, or general information. Callouts support multiple variants, can include icons, and can be dismissible.',
+        component: `
+# Callout
+
+## Overview
+
+The Callout component is used to display important messages, alerts, or notifications to the user. It can be used for success, warning, error, or informational messages.
+
+## Features
+
+- Multiple variants (primary, secondary, success, error, warning, info, light, dark)
+- Compact mode
+- Toast mode
+- Glass morphism support
+- Custom icons
+- Action buttons
+- Compound Component Pattern (new)
+
+## Usage
+
+### Basic Usage
+
+\`\`\`tsx
+<Callout title="Callout Title">
+  This is the content of the callout.
+</Callout>
+\`\`\`
+
+### Compound Component Usage
+
+\`\`\`tsx
+<Callout>
+  <Callout.Content>
+    <Callout.Icon>
+      <Icon name="Info" />
+    </Callout.Icon>
+    <Callout.Message>
+      <Callout.Title>Custom Layout</Callout.Title>
+      <Callout.Text>
+        This callout uses the compound component pattern for full control over layout.
+      </Callout.Text>
+    </Callout.Message>
+  </Callout.Content>
+  <Callout.Actions>
+    <button>Action</button>
+  </Callout.Actions>
+</Callout>
+\`\`\`
+
+## Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| variant | 'primary' \| 'secondary' \| 'success' \| 'error' \| 'warning' \| 'info' \| 'light' \| 'dark' | 'primary' | The visual style of the callout |
+| title | ReactNode | - | The title of the callout |
+| children | ReactNode | - | The content of the callout |
+| icon | ReactNode | - | Custom icon to display |
+| onClose | () => void | - | Callback function when the close button is clicked |
+| actions | ReactNode | - | Action buttons to display |
+| compact | boolean | false | Whether to use compact styling |
+| isToast | boolean | false | Whether to style as a toast notification |
+| glass | boolean \| object | false | Whether to apply glass morphism effect |
+| className | string | - | Additional CSS class names |
+| style | CSSProperties | - | Inline styles |
+`,
       },
     },
   },
   tags: ['autodocs'],
   argTypes: {
     variant: {
-      control: 'select',
-      options: THEME_COLORS,
-      description: 'The color variant of the callout',
+      control: { type: 'select' },
+      options: [
+        'primary',
+        'secondary',
+        'success',
+        'error',
+        'warning',
+        'info',
+        'light',
+        'dark',
+      ],
+      description: 'The visual style of the callout',
       table: {
         defaultValue: { summary: 'primary' },
-        type: { summary: 'string' },
       },
     },
     title: {
       control: 'text',
       description: 'The title of the callout',
-      table: {
-        type: { summary: 'ReactNode' },
-      },
     },
     children: {
       control: 'text',
       description: 'The content of the callout',
-      table: {
-        type: { summary: 'ReactNode' },
-      },
-    },
-    icon: {
-      control: 'boolean',
-      description: 'Optional icon to display in the callout',
-      table: {
-        type: { summary: 'ReactNode' },
-      },
     },
     compact: {
       control: 'boolean',
-      description: 'Display the callout in compact mode',
+      description: 'Whether to use compact styling',
       table: {
-        defaultValue: { summary: false },
-        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
       },
     },
     isToast: {
       control: 'boolean',
-      description: 'Display the callout as a toast notification',
+      description: 'Whether to style as a toast notification',
       table: {
-        defaultValue: { summary: false },
-        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
       },
     },
     glass: {
       control: 'boolean',
-      description: 'Enable glass morphism effect',
-      table: {
-        defaultValue: { summary: false },
-        type: { summary: 'AtomixGlassProps | boolean' },
-      },
-    },
-    actions: {
-      control: false,
-      description: 'Optional action buttons to display in the callout',
-      table: {
-        type: { summary: 'ReactNode' },
-      },
-    },
-    className: {
-      control: 'text',
-      description: 'Additional CSS class names',
+      description: 'Whether to apply glass morphism effect',
       table: {
-        type: { summary: 'string' },
-      },
-    },
-    onClose: {
-      action: 'closed',
-      description: 'Callback when callout is dismissed',
-      table: {
-        type: { summary: '() => void' },
+        defaultValue: { summary: 'false' },
       },
     },
+    onClose: { action: 'closed' },
   },
 } satisfies Meta<typeof Callout>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// Icon components for different callout types
-const InfoIcon = () => (
-  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-const SuccessIcon = () => (
-  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-const WarningIcon = () => (
-  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M12 9V13M12 17H12.01M3.98069 8.00001C3.32275 9.15122 3 10.5502 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C10.5502 3 9.15122 3.32275 8.00001 3.98069"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-const ErrorIcon = () => (
-  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M12 9V13M12 17H12.01M11.2926 3.05737C11.5093 3.01652 11.7321 3 11.9565 3C16.3908 3 20 6.60914 20 11.0435C20 11.2679 19.9835 11.4907 19.9426 11.7074C19.4862 15.0952 16.5609 17.7241 13 17.9711C12.6712 17.9903 12.3375 18 12 18C7.58172 18 4 14.4183 4 10C4 6.43913 6.62884 3.51375 10.0166 3.05736C10.2333 3.01652 10.4561 3 10.6805 3C10.9049 3 11.1277 3.01652 11.3444 3.05736L11.2926 3.05737Z"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-// Basic variants
-export const Default: Story = {
+export const Primary: Story = {
   args: {
-    title: 'Information',
-    children: 'This is a default callout with some information.',
+    title: 'Primary Callout',
+    children: 'This is a primary callout message.',
     variant: 'primary',
-    icon: <InfoIcon />,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'The default callout with a title, content, and an icon.',
-      },
-    },
   },
 };
 
 export const Success: Story = {
   args: {
-    title: 'Success',
-    children: 'Your changes have been saved successfully.',
+    title: 'Success Message',
+    children: 'Operation completed successfully.',
     variant: 'success',
-    icon: <SuccessIcon />,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Use success callouts to confirm that an action was completed successfully.',
-      },
-    },
+    icon: <Icon name="CheckCircle" size="md" />,
   },
 };
 
 export const Warning: Story = {
   args: {
     title: 'Warning',
-    children: 'Please review your information before proceeding.',
+    children: 'Please be careful with this action.',
     variant: 'warning',
-    icon: <WarningIcon />,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Warning callouts alert users to potential issues or important information they should be aware of.',
-      },
-    },
+    icon: <Icon name="Warning" size="md" />,
   },
 };
 
 export const Error: Story = {
   args: {
-    title: 'Error',
-    children: 'There was a problem processing your request.',
+    title: 'Error Occurred',
+    children: 'An error occurred while processing your request.',
     variant: 'error',
-    icon: <ErrorIcon />,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Error callouts indicate that something went wrong and requires attention.',
-      },
-    },
+    icon: <Icon name="WarningCircle" size="md" />,
   },
 };
 
-// Layout variants
-export const WithActions: Story = {
+export const Info: Story = {
   args: {
-    title: 'Update Available',
-    children: 'A new version is available. Would you like to update now?',
+    title: 'Information',
+    children: 'Here is some useful information.',
     variant: 'info',
-    icon: <InfoIcon />,
-    actions: (
-      <>
-        <Button label="Update Now" variant="primary" size="sm" />
-        <Button label="Later" variant="outline-primary" size="sm" />
-      </>
-    ),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Callouts can include action buttons to allow users to respond directly to the message.',
-      },
-    },
+    icon: <Icon name="Info" size="md" />,
   },
 };
 
-export const Dismissible: Story = {
+export const WithActions: Story = {
   args: {
-    title: 'Notification',
-    children: 'This is a dismissible callout that can be closed.',
+    title: 'Callout with Actions',
+    children: 'This callout includes action buttons.',
     variant: 'primary',
-    icon: <InfoIcon />,
-    onClose: () => console.log('Callout closed'),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Dismissible callouts include a close button that allows users to remove the callout from view.',
-      },
-    },
+    actions: (
+      <>
+        <button className="c-btn c-btn--sm c-btn--outline-light u-mr-2">Cancel</button>
+        <button className="c-btn c-btn--sm c-btn--light">Confirm</button>
+      </>
+    ),
   },
 };
 
 export const Compact: Story = {
   args: {
-    title: 'Quick notification',
-    variant: 'info',
-    icon: <InfoIcon />,
+    title: 'Compact Callout',
+    children: 'This is a compact callout.',
     compact: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Compact callouts are more space-efficient and display the title and icon in a single line.',
-      },
-    },
-  },
-};
-
-export const Toast: Story = {
-  args: {
-    title: 'Toast Notification',
-    children: 'This callout is styled as a toast notification.',
-    variant: 'success',
-    icon: <SuccessIcon />,
-    isToast: true,
-    onClose: () => console.log('Toast closed'),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Toast notifications are temporary messages that appear and disappear automatically.',
-      },
-    },
-  },
-};
-
-// Theme variants
-export const Dark: Story = {
-  args: {
-    title: 'Dark Mode',
-    children: 'This is a dark variant of the callout component.',
-    variant: 'dark',
-    icon: <InfoIcon />,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Dark callouts are useful for dark-themed interfaces or for creating visual contrast.',
-      },
-    },
-  },
-};
-
-export const Light: Story = {
-  args: {
-    title: 'Light Mode',
-    children: 'This is a light variant of the callout component.',
-    variant: 'light',
-    icon: <InfoIcon />,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Light callouts are useful for light-themed interfaces or for creating visual contrast.',
-      },
-    },
+    variant: 'info',
   },
 };
 
-// All Variants
-export const AllVariants: Story = {
-  render: () => {
-    const variants = [
-      'primary',
-      'secondary',
-      'success',
-      'info',
-      'warning',
-      'error',
-      'light',
-      'dark',
-    ];
-
-    const getIcon = (variant: string) => {
-      switch (variant) {
-        case 'success':
-          return <SuccessIcon />;
-        case 'warning':
-          return <WarningIcon />;
-        case 'error':
-          return <ErrorIcon />;
-        default:
-          return <InfoIcon />;
-      }
-    };
+export const Dismissible: Story = {
+  render: args => {
+    const [visible, setVisible] = useState(true);
+
+    if (!visible) {
+      return (
+        <button className="c-btn c-btn--primary" onClick={() => setVisible(true)}>
+          Show Callout
+        </button>
+      );
+    }
 
     return (
-      <div className="u-flex u-flex-col u-gap-4">
-        {variants.map(variant => (
-          <Callout
-            key={variant}
-            title={`${variant.charAt(0).toUpperCase() + variant.slice(1)} Variant`}
-            variant={variant as any}
-            icon={getIcon(variant)}
-          >
-            This is an example of the {variant} callout variant.
-          </Callout>
-        ))}
-      </div>
+      <Callout
+        {...args}
+        onClose={() => setVisible(false)}
+      />
     );
   },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Overview of all available callout color variants.',
-      },
-    },
-  },
-};
-
-// Glass morphism variants
-export const Glass: Story = {
-  args: {
-    title: 'Glass Morphism',
-    children: 'This callout uses glass morphism effect for a modern, translucent appearance.',
-    variant: 'primary',
-    icon: <InfoIcon />,
-    glass: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Glass morphism callouts provide a modern, translucent appearance with backdrop blur effects.',
-      },
-    },
-  },
-  decorators: [
-    Story => (
-      <div
-        className="u-bg-cover u-bg-center u-p-16"
-        style={{
-          backgroundImage:
-            'url("https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80")',
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export const GlassSuccess: Story = {
   args: {
-    title: 'Success with Glass Effect',
-    children: 'Your changes have been saved successfully with a beautiful glass effect.',
+    title: 'Dismissible Callout',
+    children: 'Click the X icon to dismiss this callout.',
     variant: 'success',
-    icon: <SuccessIcon />,
-    glass: true,
   },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Success callouts with glass morphism effect for enhanced visual appeal.',
-      },
-    },
-  },
-  decorators: [
-    Story => (
-      <div
-        className="u-bg-cover u-bg-center u-p-16"
-        style={{
-          backgroundImage:
-            'url("https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2071&q=80")',
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
 };
 
-export const GlassWarning: Story = {
+export const CompoundUsage: Story = {
+  render: args => (
+    <Callout {...args}>
+      <Callout.Content>
+        <Callout.Icon>
+          <Icon name="Star" size="md" />
+        </Callout.Icon>
+        <Callout.Message>
+          <Callout.Title>Custom Layout</Callout.Title>
+          <Callout.Text>
+            This callout uses the compound component pattern (Callout.Content, Callout.Icon, Callout.Message, etc.) for full control.
+          </Callout.Text>
+        </Callout.Message>
+      </Callout.Content>
+      <Callout.Actions>
+        <button className="c-btn c-btn--sm c-btn--outline-primary">Custom Action</button>
+      </Callout.Actions>
+      <Callout.CloseButton onClick={() => alert('Closed!')} />
+    </Callout>
+  ),
   args: {
-    title: 'Warning Glass',
-    children: 'Please review your information before proceeding. Glass effect adds elegance.',
-    variant: 'warning',
-    icon: <WarningIcon />,
-    glass: true,
+    variant: 'secondary',
   },
   parameters: {
     docs: {
       description: {
-        story:
-          'Warning callouts with glass effect maintain urgency while adding visual sophistication.',
+        story: 'Demonstrates the Compound Component usage pattern.',
       },
     },
   },
-  decorators: [
-    Story => (
-      <div
-        className="u-bg-cover u-bg-center u-p-16"
-        style={{
-          backgroundImage:
-            'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80',
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
 };
 
-export const GlassError: Story = {
+export const GlassEffect: Story = {
   args: {
-    title: 'Error with Glass',
-    children: 'There was a problem processing your request. Glass effect softens the appearance.',
-    variant: 'error',
-    icon: <ErrorIcon />,
+    title: 'Glass Callout',
+    children: 'This callout has a glass morphism effect.',
     glass: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Error callouts with glass morphism provide a softer, more approachable error presentation.',
-      },
-    },
-  },
-  decorators: [
-    Story => (
-      <div
-        className="u-bg-cover u-bg-center u-p-16"
-        style={{
-          backgroundImage:
-            'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80',
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export const GlassDark: Story = {
-  args: {
-    title: 'Dark Glass Mode',
-    children: 'This dark variant with glass effect creates stunning visual depth.',
-    variant: 'dark',
-    icon: <InfoIcon />,
-    glass: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Dark callouts with glass effect create dramatic visual depth and contrast.',
-      },
-    },
-  },
-  decorators: [
-    Story => (
-      <div
-        className="u-bg-cover u-bg-center u-p-16"
-        style={{
-          backgroundImage:
-            'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80',
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export const GlassWithActions: Story = {
-  args: {
-    title: 'Glass Update Available',
-    children: 'A new version is available. The glass effect enhances the modern feel.',
-    variant: 'info',
-    icon: <InfoIcon />,
-    glass: true,
-    actions: (
-      <>
-        <Button label="Update Now" variant="primary" size="sm" />
-        <Button label="Later" variant="outline-primary" size="sm" />
-      </>
-    ),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Glass callouts with action buttons maintain full functionality while adding visual appeal.',
-      },
-    },
-  },
-  decorators: [
-    Story => (
-      <div
-        className="u-bg-cover u-bg-center u-p-16"
-        style={{
-          backgroundImage:
-            'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80',
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export const GlassDismissible: Story = {
-  args: {
-    title: 'Glass Notification',
-    children:
-      'This dismissible glass callout can be closed while maintaining its elegant appearance.',
     variant: 'primary',
-    icon: <InfoIcon />,
-    glass: true,
-    onClose: () => console.log('Glass callout closed'),
   },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Dismissible glass callouts combine functionality with modern glass morphism aesthetics.',
-      },
-    },
-  },
-  decorators: [
-    Story => (
-      <div
-        className="u-bg-cover u-bg-center u-p-16"
-        style={{
-          backgroundImage:
-            'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80',
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export const GlassToast: Story = {
-  args: {
-    title: 'Glass Toast Notification',
-    children:
-      'This glass toast notification combines the elegance of glass morphism with toast functionality.',
-    variant: 'success',
-    icon: <SuccessIcon />,
-    isToast: true,
-    glass: true,
-    onClose: () => console.log('Glass toast closed'),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Glass toast notifications provide an elegant, floating appearance with enhanced visual depth.',
-      },
-    },
-  },
-  decorators: [
-    Story => (
-      <div
-        className="u-bg-cover u-bg-center u-p-16"
-        style={{
-          backgroundImage:
-            'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80',
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export const GlassOneLine: Story = {
-  args: {
-    title: 'Glass one-line notification',
-    variant: 'info',
-    icon: <InfoIcon />,
-    compact: true,
-    glass: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Compact one-line glass callouts maintain elegance in minimal space.',
-      },
-    },
-  },
-  decorators: [
-    Story => (
-      <div
-        className="u-bg-cover u-bg-center u-p-16"
-        style={{
-          backgroundImage:
-            'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80',
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-// Interactive examples
-const ToastDemoTemplate = () => {
-  const [toasts, setToasts] = useState<{ id: string; variant: string }[]>([]);
-
-  const addToast = (variant: string) => {
-    const id = Math.random().toString(36).substring(2, 9);
-    setToasts([...toasts, { id, variant }]);
-
-    // Auto-remove after 5 seconds
-    setTimeout(() => {
-      setToasts(current => current.filter(toast => toast.id !== id));
-    }, 5000);
-  };
-
-  const removeToast = (id: string) => {
-    setToasts(current => current.filter(toast => toast.id !== id));
-  };
-
-  const getIcon = (variant: string) => {
-    switch (variant) {
-      case 'success':
-        return <SuccessIcon />;
-      case 'warning':
-        return <WarningIcon />;
-      case 'error':
-        return <ErrorIcon />;
-      default:
-        return <InfoIcon />;
-    }
-  };
-
-  const getTitle = (variant: string) => {
-    switch (variant) {
-      case 'success':
-        return 'Success';
-      case 'warning':
-        return 'Warning';
-      case 'error':
-        return 'Error';
-      default:
-        return 'Information';
-    }
-  };
-
-  const getMessage = (variant: string) => {
-    switch (variant) {
-      case 'success':
-        return 'Operation completed successfully!';
-      case 'warning':
-        return 'Please review before continuing.';
-      case 'error':
-        return 'An error occurred. Please try again.';
-      default:
-        return 'This is an informational message.';
-    }
-  };
-
-  return (
-    <div className="u-relative u-min-h-90vh u-p-8 u-bg-gradient-to-br u-from-red-500/[0.15] u-via-orange-500/[0.15] u-to-blue-500/[0.15] u-overflow-hidden">
-      {/* Additional background layer for depth */}
-      <div
-        className="u-absolute u-inset-0 u-bg-cover u-bg-center u-opacity-20"
-        style={{
-          backgroundImage:
-            'url("https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80")',
-        }}
-      />
-
-      <div className="u-relative u-z-10 u-flex u-flex-col u-gap-4">
-        <div className="u-flex u-gap-2 u-flex-wrap">
-          <Button
-            label="Add Info Toast"
-            variant="primary"
-            size="sm"
-            onClick={() => addToast('info')}
-          />
-          <Button
-            label="Add Success Toast"
-            variant="success"
-            size="sm"
-            onClick={() => addToast('success')}
-          />
-          <Button
-            label="Add Warning Toast"
-            variant="warning"
-            size="sm"
-            onClick={() => addToast('warning')}
-          />
-          <Button
-            label="Add Error Toast"
-            variant="error"
-            size="sm"
-            onClick={() => addToast('error')}
-          />
-        </div>
-
-        <div className="u-relative u-h-96 u-border-2 u-border-white/[0.2] u-rounded-xl u-p-5 u-overflow-hidden u-bg-gradient-to-tr u-from-red-500/[0.1] u-via-yellow-500/[0.1] u-to-blue-500/[0.1] u-backdrop-blur-sm">
-          <div className="u-absolute u-top-5 u-right-5 u-flex u-flex-col u-gap-3 u-max-w-xs">
-            {toasts.map(toast => (
-              <Callout
-                key={toast.id}
-                title={getTitle(toast.variant)}
-                variant={toast.variant as any}
-                icon={getIcon(toast.variant)}
-                isToast={true}
-                onClose={() => removeToast(toast.id)}
-              >
-                {getMessage(toast.variant)}
-              </Callout>
-            ))}
-          </div>
-          {toasts.length === 0 && (
-            <div className="u-flex u-h-full u-items-center u-justify-center u-text-white u-text-center u-leading-tight u-font-medium">
-              <div>
-                <div className="u-mb-2">
-                  🎨 Click a button above to show toast notifications here 🎨
-                </div>
-                <small className="u-opacity-80">
-                  Beautiful colorful backgrounds enhance the visual experience
-                </small>
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
+  render: args => (
+    <div
+      style={{
+        padding: '2rem',
+        backgroundImage: 'url(https://images.unsplash.com/photo-1557683316-973673baf926?w=800)',
+        backgroundSize: 'cover',
+        borderRadius: '8px',
+      }}
+    >
+      <Callout {...args} />
     </div>
-  );
-};
-
-export const ToastDemo: Story = {
-  render: () => <ToastDemoTemplate />,
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Interactive demo showing how toast notifications can be triggered and displayed in different variants.',
-      },
-    },
-  },
-};
-
-const AutoDismissTemplate = () => {
-  const [visible, setVisible] = useState(true);
-  const [countdown, setCountdown] = useState(5);
-
-  useEffect(() => {
-    if (!visible) return;
-
-    const timer = setInterval(() => {
-      setCountdown(prev => {
-        if (prev <= 1) {
-          clearInterval(timer);
-          setVisible(false);
-          return 0;
-        }
-        return prev - 1;
-      });
-    }, 1000);
-
-    return () => clearInterval(timer);
-  }, [visible]);
-
-  const resetCallout = () => {
-    setVisible(true);
-    setCountdown(5);
-  };
-
-  return (
-    <div className="u-relative u-min-h-90 u-p-16 u-bg-gradient-to-br u-from-red-500/[0.2] u-via-orange-500/[0.2] u-to-blue-500/[0.2]">
-      {/* Additional background layer for depth */}
-      <div
-        className="u-absolute u-inset-0 u-bg-cover u-bg-center u-opacity-30"
-        style={{
-          backgroundImage:
-            'url("https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2071&q=80")',
-        }}
-      />
-
-      <div className="u-relative u-z-10 u-flex u-flex-col u-gap-4">
-        {visible ? (
-          <Callout
-            title={`Auto-dismissing in ${countdown} seconds`}
-            variant="warning"
-            icon={<WarningIcon />}
-            glass
-            onClose={() => setVisible(false)}
-          >
-            This callout will automatically dismiss after the countdown. You can also dismiss it
-            manually. The glass effect looks beautiful against this colorful background!
-          </Callout>
-        ) : (
-          <Button label="Show Auto-dismiss Callout" variant="primary" onClick={resetCallout} />
-        )}
-      </div>
-    </div>
-  );
-};
-
-export const AutoDismiss: Story = {
-  render: () => <AutoDismissTemplate />,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Example of a callout that automatically dismisses after a countdown.',
-      },
-    },
-  },
-};
-
-const CalloutWithCustomContentTemplate = () => (
-  <Callout title="Custom Content Example" variant="primary" icon={<InfoIcon />}>
-    <div className="u-flex u-flex-col u-gap-3">
-      <p>Callouts can contain rich content including:</p>
-      <ul className="u-m-0 u-pl-5">
-        <li>Lists of items</li>
-        <li>Formatted text</li>
-        <li>Custom components</li>
-      </ul>
-      <div className="u-bg-black/[0.05] u-p-2 u-rounded u-text-sm">
-        <code>This is a code example</code>
-      </div>
-    </div>
-  </Callout>
-);
-
-export const CustomContent: Story = {
-  render: () => <CalloutWithCustomContentTemplate />,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Callouts can contain rich, custom content beyond simple text.',
-      },
-    },
-  },
-};
-
-const GlassVariantsTemplate = () => {
-  const variants = ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'light', 'dark'];
-
-  const getIcon = (variant: string) => {
-    switch (variant) {
-      case 'success':
-        return <SuccessIcon />;
-      case 'warning':
-        return <WarningIcon />;
-      case 'error':
-        return <ErrorIcon />;
-      default:
-        return <InfoIcon />;
-    }
-  };
-
-  const backgrounds = [
-    'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80', // Mountain landscape
-    'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2071&q=80', // Forest
-    'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80', // Ocean
-    'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2071&q=80', // Sunset
-    'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80', // City lights
-    'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2071&q=80', // Desert
-    'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80', // Aurora
-    'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2071&q=80', // Space
-  ];
-
-  return (
-    <div className="u-relative u-min-h-screen u-p-16 u-bg-gradient-to-br u-from-red-500/[0.1] u-via-orange-500/[0.1] u-to-blue-500/[0.1]">
-      {/* Multiple background layers for depth */}
-      <div
-        className="u-absolute u-inset-0 u-bg-cover u-bg-center u-opacity-30"
-        style={{
-          backgroundImage:
-            'url("https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80")',
-        }}
-      />
-      <div
-        className="u-absolute u-inset-0 u-bg-cover u-bg-center u-opacity-20"
-        style={{
-          backgroundImage:
-            'url("https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2071&q=80")',
-        }}
-      />
-
-      <div className="u-relative u-z-10 u-flex u-flex-col u-gap-8">
-        {variants.map((variant, index) => (
-          <div
-            key={variant}
-            className="u-bg-cover u-bg-center u-p-8 u-rounded-xl u-relative u-overflow-hidden"
-            style={{ backgroundImage: `url("${backgrounds[index % backgrounds.length]}")` }}
-          >
-            <div className="u-absolute u-inset-0 u-bg-black/[0.1] u-z-n1" />
-            <Callout
-              title={`${variant.charAt(0).toUpperCase() + variant.slice(1)} Glass Variant`}
-              variant={variant as any}
-              icon={getIcon(variant)}
-              glass
-            >
-              This is an example of the {variant} callout variant with glass morphism effect against
-              a beautiful {index % 2 === 0 ? 'mountain' : 'forest'} background.
-            </Callout>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export const AllGlassVariants: Story = {
-  render: () => <GlassVariantsTemplate />,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Overview of all available callout variants with glass morphism effect.',
-      },
-    },
-  },
-};
-
-const GlassToastDemoTemplate = () => {
-  const [toasts, setToasts] = useState<{ id: string; variant: string }[]>([]);
-
-  const addToast = (variant: string) => {
-    const id = Math.random().toString(36).substring(2, 9);
-    setToasts([...toasts, { id, variant }]);
-
-    // Auto-remove after 5 seconds
-    setTimeout(() => {
-      setToasts(current => current.filter(toast => toast.id !== id));
-    }, 5000);
-  };
-
-  const removeToast = (id: string) => {
-    setToasts(current => current.filter(toast => toast.id !== id));
-  };
-
-  const getIcon = (variant: string) => {
-    switch (variant) {
-      case 'success':
-        return <SuccessIcon />;
-      case 'warning':
-        return <WarningIcon />;
-      case 'error':
-        return <ErrorIcon />;
-      default:
-        return <InfoIcon />;
-    }
-  };
-
-  const getTitle = (variant: string) => {
-    switch (variant) {
-      case 'success':
-        return 'Glass Success';
-      case 'warning':
-        return 'Glass Warning';
-      case 'error':
-        return 'Glass Error';
-      default:
-        return 'Glass Info';
-    }
-  };
-
-  const getMessage = (variant: string) => {
-    switch (variant) {
-      case 'success':
-        return 'Glass operation completed successfully!';
-      case 'warning':
-        return 'Glass warning: Please review before continuing.';
-      case 'error':
-        return 'Glass error occurred. Please try again.';
-      default:
-        return 'This is a glass informational message.';
-    }
-  };
-
-  return (
-    <div className="u-relative u-min-h-screen u-p-8 u-bg-gradient-to-br u-from-red-500/[0.2] u-via-orange-500/[0.2] u-to-blue-500/[0.2]">
-      {/* Additional background layers for depth */}
-      <div
-        className="u-absolute u-inset-0 u-bg-cover u-bg-center u-opacity-30"
-        style={{
-          backgroundImage:
-            'url("https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80")',
-        }}
-      />
-
-      <div className="u-relative u-z-10 u-flex u-flex-col u-gap-4">
-        <div className="u-flex u-gap-2 u-flex-wrap">
-          <Button
-            label="Add Glass Info Toast"
-            variant="primary"
-            size="sm"
-            onClick={() => addToast('info')}
-          />
-          <Button
-            label="Add Glass Success Toast"
-            variant="success"
-            size="sm"
-            onClick={() => addToast('success')}
-          />
-          <Button
-            label="Add Glass Warning Toast"
-            variant="warning"
-            size="sm"
-            onClick={() => addToast('warning')}
-          />
-          <Button
-            label="Add Glass Error Toast"
-            variant="error"
-            size="sm"
-            onClick={() => addToast('error')}
-          />
-        </div>
-
-        <div className="u-relative u-h-96 u-border-2 u-border-white/[0.2] u-rounded-xl u-p-5 u-overflow-hidden u-bg-gradient-to-tr u-from-red-500/[0.1] u-via-yellow-500/[0.1] u-to-blue-500/[0.1] u-backdrop-blur-sm">
-          <div className="u-absolute u-top-5 u-right-5 u-flex u-flex-col u-gap-3 u-max-w-xs">
-            {toasts.map(toast => (
-              <Callout
-                key={toast.id}
-                title={getTitle(toast.variant)}
-                variant={toast.variant as any}
-                icon={getIcon(toast.variant)}
-                isToast={true}
-                glass
-                onClose={() => removeToast(toast.id)}
-              >
-                {getMessage(toast.variant)}
-              </Callout>
-            ))}
-          </div>
-          {toasts.length === 0 && (
-            <div className="u-flex u-h-full u-items-center u-justify-center u-text-white u-text-center u-leading-tight u-font-medium">
-              <div>
-                <div className="u-mb-2">
-                  ✨ Click a button above to show glass toast notifications here ✨
-                </div>
-                <small className="u-opacity-80">
-                  Beautiful colorful backgrounds help visualize the glass morphism effect
-                </small>
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export const GlassToastDemo: Story = {
-  render: () => <GlassToastDemoTemplate />,
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Interactive demo showing glass toast notifications with enhanced visual appeal against a gradient background.',
-      },
-    },
-  },
+  ),
 };