@12-apps/ui 1.0.0

package/src/components/data-display/Sheet/Sheet.stories.tsx

@@ -0,0 +1,883 @@
+import PauseIcon from '@mui/icons-material/Pause';
+import PersonIcon from '@mui/icons-material/Person';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import SettingsIcon from '@mui/icons-material/Settings';
+import SkipNextIcon from '@mui/icons-material/SkipNext';
+import SkipPreviousIcon from '@mui/icons-material/SkipPrevious';
+import VolumeUpIcon from '@mui/icons-material/VolumeUp';
+import {
+  Avatar,
+  Box,
+  Button,
+  Card,
+  CardContent,
+  Chip,
+  Divider,
+  FormControlLabel,
+  Grid,
+  IconButton,
+  List,
+  ListItem,
+  ListItemText,
+  Paper,
+  Slider,
+  Stack,
+  Switch,
+  TextField,
+  Typography,
+} from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React, { useState } from 'react';
+
+import { Sheet } from './Sheet';
+import type { SheetProps } from './Sheet.types';
+
+const meta: Meta<typeof Sheet> = {
+  title: 'DataDisplay/Sheet',
+  component: Sheet,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs', 'component:Sheet'],
+  argTypes: {
+    position: {
+      control: 'select',
+      options: ['top', 'bottom', 'left', 'right'],
+    },
+    variant: {
+      control: 'select',
+      options: ['default', 'glass', 'gradient', 'elevated', 'minimal', 'draggable'],
+    },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl', 'full'],
+    },
+    color: {
+      control: 'select',
+      options: ['primary', 'secondary', 'success', 'error', 'warning', 'info'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Sheet>;
+
+const SheetWrapper: React.FC<SheetProps & { buttonText?: string }> = ({
+  buttonText = 'Open Sheet',
+  ...props
+}) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button variant="contained" onClick={() => setOpen(true)}>
+        {buttonText}
+      </Button>
+      <Sheet {...props} open={open} onOpenChange={setOpen} />
+    </>
+  );
+};
+
+export const Default: Story = {
+  render: (args) => (
+    <SheetWrapper {...args}>
+      <Typography variant="h6" gutterBottom>
+        Default Sheet Content
+      </Typography>
+      <Typography variant="body2" color="text.secondary">
+        This is a basic sheet component that slides in from the bottom.
+      </Typography>
+    </SheetWrapper>
+  ),
+  args: {
+    title: 'Sheet Title',
+    description: 'This is a sheet description',
+    position: 'bottom',
+  },
+};
+
+export const Positions: Story = {
+  render: () => (
+    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+      {(['top', 'bottom', 'left', 'right'] as const).map((position) => (
+        <SheetWrapper
+          key={position}
+          position={position}
+          title={`${position} Sheet`}
+          buttonText={`Open ${position}`}
+        >
+          <Typography>This sheet slides in from the {position}</Typography>
+        </SheetWrapper>
+      ))}
+    </Box>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+      {(['xs', 'sm', 'md', 'lg', 'xl', 'full'] as const).map((size) => (
+        <SheetWrapper
+          key={size}
+          size={size}
+          title={`Size: ${size.toUpperCase()}`}
+          buttonText={`Size ${size}`}
+        >
+          <Typography>This is a {size} sized sheet</Typography>
+        </SheetWrapper>
+      ))}
+    </Box>
+  ),
+};
+
+export const Variants: Story = {
+  render: () => (
+    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+      {(['default', 'glass', 'gradient', 'elevated', 'minimal'] as const).map((variant) => (
+        <SheetWrapper
+          key={variant}
+          variant={variant}
+          title={`${variant} Variant`}
+          buttonText={variant}
+          glow={variant === 'glass'}
+          glass={variant === 'glass'}
+          gradient={variant === 'gradient'}
+        >
+          <Typography>This is a {variant} variant sheet</Typography>
+        </SheetWrapper>
+      ))}
+    </Box>
+  ),
+};
+
+const DraggableBottomSheetComponent = () => {
+  const [open, setOpen] = useState(false);
+  const [currentSnapPoint, setCurrentSnapPoint] = useState(0.5);
+
+  return (
+    <>
+      <Button variant="contained" onClick={() => setOpen(true)}>
+        Open Draggable Bottom Sheet
+      </Button>
+      <Sheet
+        open={open}
+        onOpenChange={setOpen}
+        variant="draggable"
+        position="bottom"
+        title="Draggable Sheet"
+        description={`Current height: ${Math.round(currentSnapPoint * 100)}%`}
+        snapPoints={[0.25, 0.5, 0.75, 1]}
+        defaultSnapPoint={0.5}
+        onSnapPointChange={setCurrentSnapPoint}
+        showHandle
+      >
+        <Stack spacing={2}>
+          <Typography variant="body1">
+            Drag the handle to resize this sheet. It will snap to 25%, 50%, 75%, or 100% height.
+          </Typography>
+          <Paper elevation={2} sx={{ p: 2 }}>
+            <Typography variant="h6" gutterBottom>
+              Features:
+            </Typography>
+            <List dense>
+              <ListItem>• Smooth spring animations</ListItem>
+              <ListItem>• Velocity-based snapping</ListItem>
+              <ListItem>• Boundary resistance</ListItem>
+              <ListItem>• Touch and mouse support</ListItem>
+            </List>
+          </Paper>
+          <Box sx={{ bgcolor: 'grey.100', p: 2, borderRadius: 1 }}>
+            <Typography variant="body2" color="text.secondary">
+              Try dragging quickly to trigger velocity-based snapping!
+            </Typography>
+          </Box>
+        </Stack>
+      </Sheet>
+    </>
+  );
+};
+
+export const DraggableBottomSheet: Story = {
+  render: () => <DraggableBottomSheetComponent />,
+};
+
+const MusicPlayerComponent = () => {
+  const [open, setOpen] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [volume, setVolume] = useState(30);
+  const [progress, setProgress] = useState(45);
+
+  return (
+    <>
+      <Button variant="contained" startIcon={<PlayArrowIcon />} onClick={() => setOpen(true)}>
+        Open Music Player
+      </Button>
+      <Sheet
+        open={open}
+        onOpenChange={setOpen}
+        variant="draggable"
+        position="bottom"
+        snapPoints={[0.15, 0.5, 0.95]}
+        defaultSnapPoint={0.15}
+        showHandle
+        color="secondary"
+        glow
+      >
+        <Box sx={{ p: 2 }}>
+          {/* Mini Player View */}
+          <Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
+            <Avatar sx={{ width: 60, height: 60, mr: 2 }} src="https://via.placeholder.com/60" />
+            <Box sx={{ flex: 1 }}>
+              <Typography variant="subtitle1" fontWeight="bold">
+                Song Title
+              </Typography>
+              <Typography variant="body2" color="text.secondary">
+                Artist Name
+              </Typography>
+            </Box>
+            <IconButton onClick={() => setIsPlaying(!isPlaying)}>
+              {isPlaying ? <PauseIcon /> : <PlayArrowIcon />}
+            </IconButton>
+          </Box>
+
+          {/* Expanded Controls */}
+          <Stack spacing={2}>
+            <Slider
+              value={progress}
+              onChange={(e, v) => setProgress(v as number)}
+              aria-label="Progress"
+            />
+            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+              <Typography variant="caption">1:45</Typography>
+              <Typography variant="caption">3:20</Typography>
+            </Box>
+
+            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 2 }}>
+              <IconButton>
+                <SkipPreviousIcon />
+              </IconButton>
+              <IconButton
+                sx={{
+                  bgcolor: 'primary.main',
+                  color: 'white',
+                  '&:hover': { bgcolor: 'primary.dark' },
+                }}
+                onClick={() => setIsPlaying(!isPlaying)}
+              >
+                {isPlaying ? <PauseIcon /> : <PlayArrowIcon />}
+              </IconButton>
+              <IconButton>
+                <SkipNextIcon />
+              </IconButton>
+            </Box>
+
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+              <VolumeUpIcon />
+              <Slider
+                value={volume}
+                onChange={(e, v) => setVolume(v as number)}
+                aria-label="Volume"
+              />
+            </Box>
+          </Stack>
+        </Box>
+      </Sheet>
+    </>
+  );
+};
+
+export const MusicPlayer: Story = {
+  render: () => <MusicPlayerComponent />,
+};
+
+const CustomSnapPointsComponent = () => {
+  const [open, setOpen] = useState(false);
+  const [snapPoint, setSnapPoint] = useState(0.3);
+
+  return (
+    <>
+      <Button variant="contained" onClick={() => setOpen(true)}>
+        Open Custom Snap Points
+      </Button>
+      <Sheet
+        open={open}
+        onOpenChange={setOpen}
+        variant="draggable"
+        position="bottom"
+        title="Custom Snap Points"
+        snapPoints={[0.1, 0.3, 0.6, 0.9]}
+        defaultSnapPoint={0.3}
+        onSnapPointChange={setSnapPoint}
+        showHandle
+        minSnapPoint={0.1}
+        maxSnapPoint={0.9}
+      >
+        <Stack spacing={2}>
+          <Paper sx={{ p: 2, bgcolor: 'primary.main', color: 'white' }}>
+            <Typography variant="h6">Current: {Math.round(snapPoint * 100)}%</Typography>
+          </Paper>
+          <Typography>This sheet has custom snap points at:</Typography>
+          <Grid container spacing={1}>
+            {[10, 30, 60, 90].map((percent) => (
+              <Grid item xs={3} key={percent}>
+                <Card>
+                  <CardContent>
+                    <Typography align="center" fontWeight="bold">
+                      {percent}%
+                    </Typography>
+                  </CardContent>
+                </Card>
+              </Grid>
+            ))}
+          </Grid>
+          <Typography variant="body2" color="text.secondary">
+            The sheet is constrained between 10% and 90% height.
+          </Typography>
+        </Stack>
+      </Sheet>
+    </>
+  );
+};
+
+export const CustomSnapPoints: Story = {
+  render: () => <CustomSnapPointsComponent />,
+};
+
+const WithResistanceComponent = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button variant="contained" onClick={() => setOpen(true)}>
+        Open Sheet with High Resistance
+      </Button>
+      <Sheet
+        open={open}
+        onOpenChange={setOpen}
+        variant="draggable"
+        position="bottom"
+        title="High Drag Resistance"
+        description="Feel the resistance at boundaries"
+        snapPoints={[0.3, 0.7]}
+        defaultSnapPoint={0.3}
+        dragResistance={0.1}
+        showHandle
+      >
+        <Typography variant="body1" paragraph>
+          This sheet has high drag resistance (0.1) at the boundaries.
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          Try dragging beyond the snap points to feel the rubber-band effect.
+        </Typography>
+      </Sheet>
+    </>
+  );
+};
+
+export const WithResistance: Story = {
+  render: () => <WithResistanceComponent />,
+};
+
+const DraggableWithContentComponent = () => {
+  const [open, setOpen] = useState(false);
+  const items = Array.from({ length: 20 }, (_, i) => ({
+    id: i + 1,
+    title: `Item ${i + 1}`,
+    description: `Description for item ${i + 1}`,
+  }));
+
+  return (
+    <>
+      <Button variant="contained" onClick={() => setOpen(true)}>
+        Open Draggable List
+      </Button>
+      <Sheet
+        open={open}
+        onOpenChange={setOpen}
+        variant="draggable"
+        position="bottom"
+        title="Scrollable Content"
+        description="Drag to resize, scroll to navigate"
+        snapPoints={[0.25, 0.5, 0.75, 1]}
+        defaultSnapPoint={0.5}
+        showHandle
+        footer={
+          <Button variant="contained" fullWidth>
+            Load More Items
+          </Button>
+        }
+      >
+        <List>
+          {items.map((item) => (
+            <ListItem key={item.id} divider>
+              <ListItemText primary={item.title} secondary={item.description} />
+            </ListItem>
+          ))}
+        </List>
+      </Sheet>
+    </>
+  );
+};
+
+export const DraggableWithContent: Story = {
+  render: () => <DraggableWithContentComponent />,
+};
+
+export const WithForm: Story = {
+  render: (args) => (
+    <SheetWrapper
+      {...args}
+      title="User Settings"
+      description="Update your profile information"
+      footer={
+        <Box sx={{ display: 'flex', gap: 2, justifyContent: 'flex-end' }}>
+          <Button variant="outlined">Cancel</Button>
+          <Button variant="contained" color="primary">
+            Save Changes
+          </Button>
+        </Box>
+      }
+    >
+      <Stack spacing={3}>
+        <TextField label="Full Name" fullWidth defaultValue="John Doe" />
+        <TextField label="Email" type="email" fullWidth defaultValue="john.doe@example.com" />
+        <TextField
+          label="Bio"
+          multiline
+          rows={4}
+          fullWidth
+          placeholder="Tell us about yourself..."
+        />
+        <FormControlLabel control={<Switch defaultChecked />} label="Email notifications" />
+        <FormControlLabel control={<Switch />} label="Make profile public" />
+      </Stack>
+    </SheetWrapper>
+  ),
+  args: {
+    position: 'right',
+    size: 'md',
+  },
+};
+
+export const WithList: Story = {
+  render: (args) => {
+    const items = [
+      { id: 1, name: 'John Doe', role: 'Admin', status: 'active' },
+      { id: 2, name: 'Jane Smith', role: 'User', status: 'active' },
+      { id: 3, name: 'Bob Johnson', role: 'Moderator', status: 'inactive' },
+      { id: 4, name: 'Alice Brown', role: 'User', status: 'active' },
+    ];
+
+    return (
+      <SheetWrapper {...args} title="Team Members" description="Manage your team">
+        <List>
+          {items.map((item) => (
+            <ListItem key={item.id}>
+              <Avatar sx={{ mr: 2 }}>
+                <PersonIcon />
+              </Avatar>
+              <ListItemText primary={item.name} secondary={item.role} />
+              <Chip
+                label={item.status}
+                color={item.status === 'active' ? 'success' : 'default'}
+                size="small"
+              />
+            </ListItem>
+          ))}
+        </List>
+      </SheetWrapper>
+    );
+  },
+  args: {
+    position: 'left',
+    size: 'sm',
+  },
+};
+
+export const Glass: Story = {
+  render: (args) => (
+    <SheetWrapper
+      {...args}
+      variant="glass"
+      glass
+      glow
+      title="Glass Effect"
+      description="Beautiful glassmorphism design"
+    >
+      <Box sx={{ p: 2 }}>
+        <Typography variant="h6" gutterBottom>
+          Modern Glass Design
+        </Typography>
+        <Typography variant="body2" color="text.secondary" paragraph>
+          This sheet features a glass morphism effect with backdrop blur and transparency.
+        </Typography>
+        <Button variant="contained" fullWidth>
+          Action Button
+        </Button>
+      </Box>
+    </SheetWrapper>
+  ),
+};
+
+export const Gradient: Story = {
+  render: (args) => (
+    <SheetWrapper {...args} variant="gradient" gradient color="primary" title="Gradient Background">
+      <Typography variant="h6" gutterBottom>
+        Beautiful Gradient
+      </Typography>
+      <Typography variant="body2" color="text.secondary">
+        This sheet has a subtle gradient background effect.
+      </Typography>
+    </SheetWrapper>
+  ),
+};
+
+export const WithEffects: Story = {
+  render: (args) => (
+    <SheetWrapper
+      {...args}
+      variant="glass"
+      glow
+      pulse
+      glass
+      title="Enhanced Effects"
+      description="Multiple visual effects combined"
+    >
+      <Typography>This sheet combines glow and pulse effects with glass morphism.</Typography>
+    </SheetWrapper>
+  ),
+};
+
+export const Swipeable: Story = {
+  render: (args) => (
+    <SheetWrapper
+      {...args}
+      swipeable
+      title="Swipeable Sheet"
+      description="Swipe down to close"
+      buttonText="Open Swipeable"
+    >
+      <Typography variant="body1" paragraph>
+        This sheet can be swiped to close on mobile devices.
+      </Typography>
+      <Typography variant="body2" color="text.secondary">
+        Try swiping down from the handle to dismiss.
+      </Typography>
+    </SheetWrapper>
+  ),
+  args: {
+    position: 'bottom',
+    showHandle: true,
+  },
+};
+
+export const Persistent: Story = {
+  render: (args) => (
+    <SheetWrapper
+      {...args}
+      persistent
+      closeOnOverlayClick={false}
+      closeOnEscape={false}
+      showCloseButton={false}
+      title="Persistent Sheet"
+      description="Cannot be closed by user"
+      footer={
+        <Button variant="contained" color="error" fullWidth>
+          Force Close (Only way to close)
+        </Button>
+      }
+    >
+      <Typography variant="body1" paragraph>
+        This sheet is persistent and cannot be closed by:
+      </Typography>
+      <List>
+        <ListItem>• Clicking the overlay</ListItem>
+        <ListItem>• Pressing Escape key</ListItem>
+        <ListItem>• Close button (hidden)</ListItem>
+      </List>
+    </SheetWrapper>
+  ),
+};
+
+export const Loading: Story = {
+  render: (args) => (
+    <SheetWrapper {...args} loading title="Loading Content" description="Please wait..." />
+  ),
+};
+
+export const NoOverlay: Story = {
+  render: (args) => (
+    <SheetWrapper
+      {...args}
+      showOverlay={false}
+      title="No Overlay"
+      description="Sheet without backdrop overlay"
+    >
+      <Typography>This sheet appears without a backdrop overlay.</Typography>
+    </SheetWrapper>
+  ),
+};
+
+export const CustomHeader: Story = {
+  render: (args) => (
+    <SheetWrapper
+      {...args}
+      header={
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mt: 2 }}>
+          <Avatar>
+            <PersonIcon />
+          </Avatar>
+          <Box>
+            <Typography variant="h6">John Doe</Typography>
+            <Typography variant="caption" color="text.secondary">
+              john.doe@example.com
+            </Typography>
+          </Box>
+        </Box>
+      }
+    >
+      <Typography>Sheet with custom header content</Typography>
+    </SheetWrapper>
+  ),
+};
+
+export const FullHeight: Story = {
+  render: (args) => (
+    <SheetWrapper {...args} fullHeight title="Full Height Sheet" position="right" size="md">
+      <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+        <Typography variant="h6" gutterBottom>
+          Full Height Content
+        </Typography>
+        <Box sx={{ flex: 1, bgcolor: 'grey.100', p: 2, borderRadius: 1 }}>
+          <Typography variant="body2" color="text.secondary">
+            This content area expands to fill the full height
+          </Typography>
+        </Box>
+      </Box>
+    </SheetWrapper>
+  ),
+};
+
+const SettingsComponent = () => {
+  const [open, setOpen] = useState(false);
+  const [notifications, setNotifications] = useState(true);
+  const [darkMode, setDarkMode] = useState(false);
+  const [autoSave, setAutoSave] = useState(true);
+
+  return (
+    <>
+      <Button variant="contained" startIcon={<SettingsIcon />} onClick={() => setOpen(true)}>
+        Open Settings
+      </Button>
+      <Sheet
+        open={open}
+        onOpenChange={setOpen}
+        title="Application Settings"
+        position="right"
+        size="md"
+        variant="elevated"
+        footer={
+          <Box sx={{ display: 'flex', gap: 2 }}>
+            <Button variant="outlined" onClick={() => setOpen(false)} fullWidth>
+              Cancel
+            </Button>
+            <Button variant="contained" color="primary" onClick={() => setOpen(false)} fullWidth>
+              Save
+            </Button>
+          </Box>
+        }
+      >
+        <Stack spacing={3}>
+          <Box>
+            <Typography variant="subtitle2" gutterBottom>
+              Appearance
+            </Typography>
+            <FormControlLabel
+              control={
+                <Switch checked={darkMode} onChange={(e) => setDarkMode(e.target.checked)} />
+              }
+              label="Dark Mode"
+            />
+          </Box>
+
+          <Divider />
+
+          <Box>
+            <Typography variant="subtitle2" gutterBottom>
+              Notifications
+            </Typography>
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={notifications}
+                  onChange={(e) => setNotifications(e.target.checked)}
+                />
+              }
+              label="Enable Notifications"
+            />
+          </Box>
+
+          <Divider />
+
+          <Box>
+            <Typography variant="subtitle2" gutterBottom>
+              Data & Storage
+            </Typography>
+            <FormControlLabel
+              control={
+                <Switch checked={autoSave} onChange={(e) => setAutoSave(e.target.checked)} />
+              }
+              label="Auto-save"
+            />
+          </Box>
+        </Stack>
+      </Sheet>
+    </>
+  );
+};
+
+export const Settings: Story = {
+  render: () => <SettingsComponent />,
+};
+
+// Required story exports for validation
+export const AllVariants: Story = {
+  render: () => (
+    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+      {(['default', 'glass', 'gradient', 'elevated', 'minimal', 'draggable'] as const).map(
+        (variant) => (
+          <SheetWrapper
+            key={variant}
+            variant={variant}
+            title={`${variant} Variant`}
+            buttonText={variant}
+            glow={variant === 'glass'}
+            glass={variant === 'glass'}
+            gradient={variant === 'gradient'}
+          >
+            <Typography>This is a {variant} variant sheet</Typography>
+          </SheetWrapper>
+        ),
+      )}
+    </Box>
+  ),
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+      {(['xs', 'sm', 'md', 'lg', 'xl', 'full'] as const).map((size) => (
+        <SheetWrapper
+          key={size}
+          size={size}
+          title={`Size: ${size.toUpperCase()}`}
+          buttonText={`Size ${size}`}
+        >
+          <Typography>This is a {size} sized sheet</Typography>
+        </SheetWrapper>
+      ))}
+    </Box>
+  ),
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+      <SheetWrapper title="Loading State" buttonText="Loading" loading />
+      <SheetWrapper title="Disabled State" buttonText="Disabled" disabled>
+        <Typography>Disabled content</Typography>
+      </SheetWrapper>
+      <SheetWrapper
+        title="Persistent State"
+        buttonText="Persistent"
+        persistent
+        closeOnOverlayClick={false}
+        closeOnEscape={false}
+      >
+        <Typography>Persistent sheet - cannot be easily closed</Typography>
+      </SheetWrapper>
+      <SheetWrapper title="No Overlay State" buttonText="No Overlay" showOverlay={false}>
+        <Typography>Sheet without backdrop</Typography>
+      </SheetWrapper>
+    </Box>
+  ),
+};
+
+export const InteractiveStates: Story = {
+  render: () => (
+    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+      <SheetWrapper
+        title="Swipeable Sheet"
+        buttonText="Swipeable"
+        swipeable
+        showHandle
+        position="bottom"
+      >
+        <Typography>Swipe down to close (mobile)</Typography>
+      </SheetWrapper>
+      <SheetWrapper
+        variant="draggable"
+        title="Draggable Sheet"
+        buttonText="Draggable"
+        position="bottom"
+        snapPoints={[0.25, 0.5, 0.75]}
+        defaultSnapPoint={0.5}
+        showHandle
+      >
+        <Typography>Drag to resize</Typography>
+      </SheetWrapper>
+      <SheetWrapper title="With Effects" buttonText="Glow & Glass" variant="glass" glow glass pulse>
+        <Typography>Interactive visual effects</Typography>
+      </SheetWrapper>
+    </Box>
+  ),
+};
+
+export const Responsive: Story = {
+  parameters: {
+    viewport: {
+      viewports: {
+        mobile: { name: 'Mobile', styles: { width: '375px', height: '667px' } },
+        tablet: { name: 'Tablet', styles: { width: '768px', height: '1024px' } },
+        desktop: { name: 'Desktop', styles: { width: '1440px', height: '900px' } },
+      },
+    },
+    chromatic: {
+      viewports: [375, 768, 1440],
+    },
+  },
+  render: () => (
+    <Box>
+      <Typography variant="body2" sx={{ mb: 2 }}>
+        This sheet adapts to different screen sizes
+      </Typography>
+      <SheetWrapper
+        title="Responsive Sheet"
+        description="Adapts to viewport size"
+        buttonText="Open Responsive Sheet"
+        position="bottom"
+        size="md"
+      >
+        <Stack spacing={2}>
+          <Typography variant="h6">Responsive Content</Typography>
+          <Typography variant="body2">
+            This sheet adjusts its behavior and appearance based on the viewport size.
+          </Typography>
+          <Box
+            sx={{
+              display: 'grid',
+              gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr', md: '1fr 1fr 1fr' },
+              gap: 2,
+            }}
+          >
+            {[1, 2, 3, 4, 5, 6].map((i) => (
+              <Paper key={i} sx={{ p: 2 }}>
+                <Typography>Item {i}</Typography>
+              </Paper>
+            ))}
+          </Box>
+        </Stack>
+      </SheetWrapper>
+    </Box>
+  ),
+};