@umbra.ui/core 0.1.0

package/src/components/models/Sheet/README.md

@@ -0,0 +1,1159 @@
+# Sheet
+
+A flexible and animated sheet component built with Vue 3 Composition API and TypeScript. The Sheet component provides a powerful interface for displaying modal content with smooth slide animations, customizable positioning, and comprehensive backdrop options.
+
+## Installation/Import
+
+```typescript
+import { Sheet } from "@umbra-ui/core";
+import type { SheetProps } from "@umbra-ui/core";
+```
+
+**Dependencies:**
+
+- Vue 3.x
+- gsap (for animations)
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Sheet, Button } from "@umbra-ui/core";
+
+const isSheetOpen = ref(false);
+
+const handleOpen = () => {
+  console.log("Sheet opened");
+};
+
+const handleClose = () => {
+  console.log("Sheet closed");
+};
+
+const handleBackdropClick = () => {
+  console.log("Backdrop clicked");
+};
+</script>
+
+<template>
+  <div>
+    <Button @click="isSheetOpen = true">Open Sheet</Button>
+
+    <Sheet
+      v-model="isSheetOpen"
+      side="bottom"
+      :dismiss-on-backdrop="true"
+      @open="handleOpen"
+      @close="handleClose"
+      @backdrop-click="handleBackdropClick"
+    >
+      <div class="sheet-content">
+        <h2>Sheet Title</h2>
+        <p>This is the sheet content. It can contain any HTML elements.</p>
+        <Button @click="isSheetOpen = false">Close</Button>
+      </div>
+    </Sheet>
+  </div>
+</template>
+
+<style>
+.sheet-content {
+  padding: 2rem;
+  min-height: 200px;
+}
+</style>
+```
+
+## Props
+
+| Prop Name           | Type                                     | Required | Default         | Description                                    |
+| ------------------- | ---------------------------------------- | -------- | --------------- | ---------------------------------------------- |
+| `modelValue`        | `boolean`                                | Yes      | -               | Controls the open/closed state of the sheet    |
+| `side`              | `"top" \| "bottom" \| "left" \| "right"` | No       | `"bottom"`      | The side from which the sheet slides in        |
+| `dismissOnBackdrop` | `boolean`                                | No       | `true`          | Whether clicking the backdrop closes the sheet |
+| `width`             | `string`                                 | No       | `"90vw"`        | Width of the sheet                             |
+| `height`            | `string`                                 | No       | `"50vh"`        | Height of the sheet                            |
+| `maxWidth`          | `string`                                 | No       | `"540px"`       | Maximum width of the sheet                     |
+| `maxHeight`         | `string`                                 | No       | `"fit-content"` | Maximum height of the sheet                    |
+| `animationDuration` | `number`                                 | No       | `0.5`           | Animation duration in seconds                  |
+| `animationType`     | `"slide" \| "ghost"`                     | No       | `"slide"`       | Animation type: slide or ghost                 |
+| `backdropStyle`     | `"blur" \| "dim"`                        | No       | `"blur"`        | Backdrop style: blur or dim                    |
+| `zIndex`            | `number`                                 | No       | `1000`          | Z-index for the sheet                          |
+| `teleportTo`        | `string \| HTMLElement`                  | No       | `"body"`        | Teleport target element                        |
+
+## Events
+
+| Event Name          | Payload Type | Description                                 |
+| ------------------- | ------------ | ------------------------------------------- |
+| `update:modelValue` | `boolean`    | Emitted when the sheet open state changes   |
+| `backdrop-click`    | `void`       | Emitted when the backdrop is clicked        |
+| `open`              | `void`       | Emitted when the sheet opens                |
+| `close`             | `void`       | Emitted when the sheet closes               |
+| `after-enter`       | `void`       | Emitted after the open animation completes  |
+| `after-leave`       | `void`       | Emitted after the close animation completes |
+
+## Slots
+
+| Slot Name | Description                            |
+| --------- | -------------------------------------- |
+| `default` | The content displayed inside the sheet |
+
+## Exposed Methods/Refs
+
+The Sheet component exposes the following methods and properties via template refs:
+
+| Method/Property | Type           | Description                            |
+| --------------- | -------------- | -------------------------------------- |
+| `open`          | `() => void`   | Opens the sheet programmatically       |
+| `close`         | `() => void`   | Closes the sheet programmatically      |
+| `isVisible`     | `Ref<boolean>` | Reactive reference to visibility state |
+| `isAnimating`   | `Ref<boolean>` | Reactive reference to animation state  |
+
+### Example Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Sheet } from "@umbra-ui/core";
+
+const sheetRef = ref<InstanceType<typeof Sheet> | null>(null);
+
+const openSheet = () => {
+  sheetRef.value?.open();
+};
+
+const closeSheet = () => {
+  sheetRef.value?.close();
+};
+</script>
+
+<template>
+  <Sheet ref="sheetRef" :model-value="false">
+    <div class="content">
+      <p>Sheet content</p>
+      <button @click="closeSheet">Close</button>
+    </div>
+  </Sheet>
+</template>
+```
+
+## Animation Types
+
+### Slide Animation
+
+- **Default animation type**
+- Sheet slides in from the specified side
+- Uses smooth easing with GPU acceleration
+- Best for modal dialogs and forms
+
+### Ghost Animation
+
+- Sheet fades in with scale effect
+- More subtle appearance
+- Good for notifications and overlays
+- Uses opacity and scale transforms
+
+## Backdrop Styles
+
+### Blur Backdrop
+
+- **Default backdrop style**
+- Semi-transparent with blur effect
+- Modern, iOS-like appearance
+- Uses `backdrop-filter: blur(10px)`
+
+### Dim Backdrop
+
+- Simple semi-transparent overlay
+- No blur effect
+- More traditional modal appearance
+- Better performance on older devices
+
+## CSS Customization
+
+The Sheet component uses CSS custom properties for theming and customization:
+
+### Light Theme Variables
+
+```css
+/* Sheet colors */
+--sheet-bg: #ffffff;
+--sheet-shadow: rgba(0, 0, 0, 0.1);
+--sheet-inset-shadow: rgba(255, 255, 255, 0.8);
+
+/* Sheet backdrop colors */
+--sheet-backdrop-blur-bg: rgba(0, 0, 0, 0.3);
+--sheet-backdrop-dim-bg: rgba(0, 0, 0, 0.7);
+
+/* Sheet scrollbar colors */
+--sheet-scrollbar-thumb: rgba(0, 0, 0, 0.2);
+--sheet-scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);
+```
+
+### Dark Theme Variables
+
+```css
+/* Sheet colors */
+--sheet-bg: #111111;
+--sheet-shadow: rgba(0, 0, 0, 0.21);
+--sheet-inset-shadow: rgba(255, 255, 255, 0.1);
+
+/* Sheet backdrop colors */
+--sheet-backdrop-blur-bg: rgba(0, 0, 0, 0.3);
+--sheet-backdrop-dim-bg: rgba(0, 0, 0, 0.85);
+
+/* Sheet scrollbar colors */
+--sheet-scrollbar-thumb: rgba(255, 255, 255, 0.2);
+--sheet-scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
+```
+
+## Key Features
+
+### Smart Positioning
+
+- **Four Directions**: Slide in from top, bottom, left, or right
+- **Responsive Sizing**: Configurable width, height, and max dimensions
+- **Viewport Awareness**: Automatically respects viewport boundaries
+- **Safe Area Support**: Handles mobile device safe areas
+
+### Animation System
+
+- **GSAP Animations**: Smooth, performant animations using GSAP
+- **Two Animation Types**: Slide and ghost animations
+- **GPU Acceleration**: Hardware-accelerated transforms
+- **Customizable Duration**: Configurable animation timing
+
+### User Experience
+
+- **Backdrop Interaction**: Click backdrop to dismiss (configurable)
+- **Keyboard Support**: Escape key closes sheet
+- **Body Scroll Lock**: Prevents background scrolling when open
+- **Teleport Support**: Renders outside component tree
+
+### Visual Features
+
+- **Backdrop Styles**: Blur or dim backdrop options
+- **Custom Scrollbars**: Styled scrollbars for better UX
+- **Shadow Effects**: Subtle shadows and inset highlights
+- **Border Radius**: Rounded corners for modern appearance
+
+## Examples
+
+### Basic Sheet
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Sheet, Button } from "@umbra-ui/core";
+
+const isOpen = ref(false);
+
+const handleOpen = () => {
+  console.log("Sheet opened");
+};
+
+const handleClose = () => {
+  console.log("Sheet closed");
+};
+</script>
+
+<template>
+  <div class="basic-sheet">
+    <h3>Basic Sheet</h3>
+
+    <Button @click="isOpen = true">Open Sheet</Button>
+
+    <Sheet
+      v-model="isOpen"
+      side="bottom"
+      :dismiss-on-backdrop="true"
+      @open="handleOpen"
+      @close="handleClose"
+    >
+      <div class="sheet-content">
+        <h2>Sheet Title</h2>
+        <p>This is a basic sheet with default settings.</p>
+        <p>
+          It slides in from the bottom and can be dismissed by clicking the
+          backdrop.
+        </p>
+        <div class="actions">
+          <Button @click="isOpen = false">Close</Button>
+        </div>
+      </div>
+    </Sheet>
+
+    <p class="status">Sheet is {{ isOpen ? "open" : "closed" }}</p>
+  </div>
+</template>
+
+<style module>
+.basic-sheet {
+  padding: 2rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 0.5rem;
+  max-width: 400px;
+}
+
+.sheet-content {
+  padding: 2rem;
+  min-height: 200px;
+}
+
+.sheet-content h2 {
+  margin: 0 0 1rem 0;
+  color: #333;
+}
+
+.sheet-content p {
+  margin: 0 0 1rem 0;
+  color: #666;
+  line-height: 1.5;
+}
+
+.actions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+  margin-top: 1.5rem;
+}
+
+.status {
+  margin-top: 1rem;
+  color: #666;
+  font-size: 0.875rem;
+}
+</style>
+```
+
+### Different Sides
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Sheet, Button } from "@umbra-ui/core";
+
+const sides = ["top", "bottom", "left", "right"];
+const openSheets = ref<Record<string, boolean>>({});
+
+const toggleSheet = (side: string) => {
+  openSheets.value[side] = !openSheets.value[side];
+};
+</script>
+
+<template>
+  <div class="sides-demo">
+    <h3>Sheet Sides</h3>
+    <p>Click the buttons to see different slide directions:</p>
+
+    <div class="sides-grid">
+      <div v-for="side in sides" :key="side" class="side-item">
+        <Button @click="toggleSheet(side)" size="small">
+          {{ side }}
+        </Button>
+
+        <Sheet
+          v-model="openSheets[side]"
+          :side="side"
+          :dismiss-on-backdrop="true"
+        >
+          <div class="side-content">
+            <h4>{{ side }} Sheet</h4>
+            <p>This sheet slides in from the {{ side }}.</p>
+            <Button @click="openSheets[side] = false" size="small">
+              Close
+            </Button>
+          </div>
+        </Sheet>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style module>
+.sides-demo {
+  padding: 2rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 0.5rem;
+  max-width: 600px;
+}
+
+.sides-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.side-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 60px;
+}
+
+.side-content {
+  padding: 1.5rem;
+  min-height: 150px;
+  text-align: center;
+}
+
+.side-content h4 {
+  margin: 0 0 1rem 0;
+  color: #333;
+  text-transform: capitalize;
+}
+
+.side-content p {
+  margin: 0 0 1rem 0;
+  color: #666;
+}
+</style>
+```
+
+### Ghost Animation
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Sheet, Button } from "@umbra-ui/core";
+
+const isGhostOpen = ref(false);
+</script>
+
+<template>
+  <div class="ghost-sheet">
+    <h3>Ghost Animation</h3>
+    <p>This sheet uses the ghost animation type with scale and fade effects:</p>
+
+    <Button @click="isGhostOpen = true">Open Ghost Sheet</Button>
+
+    <Sheet
+      v-model="isGhostOpen"
+      side="bottom"
+      animation-type="ghost"
+      :animation-duration="0.4"
+      :dismiss-on-backdrop="true"
+    >
+      <div class="ghost-content">
+        <h2>Ghost Sheet</h2>
+        <p>This sheet uses the ghost animation type.</p>
+        <p>It fades in with a scale effect instead of sliding.</p>
+        <div class="features">
+          <h4>Features:</h4>
+          <ul>
+            <li>Scale + opacity animation</li>
+            <li>Faster animation duration</li>
+            <li>Subtle appearance</li>
+            <li>Good for notifications</li>
+          </ul>
+        </div>
+        <div class="actions">
+          <Button @click="isGhostOpen = false">Close</Button>
+        </div>
+      </div>
+    </Sheet>
+  </div>
+</template>
+
+<style module>
+.ghost-sheet {
+  padding: 2rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 0.5rem;
+  max-width: 400px;
+}
+
+.ghost-content {
+  padding: 2rem;
+  min-height: 300px;
+}
+
+.ghost-content h2 {
+  margin: 0 0 1rem 0;
+  color: #333;
+}
+
+.ghost-content p {
+  margin: 0 0 1rem 0;
+  color: #666;
+  line-height: 1.5;
+}
+
+.features {
+  margin: 1.5rem 0;
+  padding: 1rem;
+  background-color: #f8f9fa;
+  border-radius: 0.25rem;
+}
+
+.features h4 {
+  margin: 0 0 0.5rem 0;
+  color: #333;
+}
+
+.features ul {
+  margin: 0;
+  padding-left: 1.25rem;
+  color: #666;
+}
+
+.features li {
+  margin-bottom: 0.25rem;
+}
+
+.actions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+  margin-top: 1.5rem;
+}
+</style>
+```
+
+### Form Sheet
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Sheet, Button } from "@umbra-ui/core";
+
+const isFormOpen = ref(false);
+const formData = ref({
+  name: "",
+  email: "",
+  message: "",
+});
+
+const handleSubmit = () => {
+  console.log("Form submitted:", formData.value);
+  isFormOpen.value = false;
+  // Reset form
+  formData.value = { name: "", email: "", message: "" };
+};
+
+const handleCancel = () => {
+  isFormOpen.value = false;
+  // Reset form
+  formData.value = { name: "", email: "", message: "" };
+};
+</script>
+
+<template>
+  <div class="form-sheet">
+    <h3>Form Sheet</h3>
+
+    <Button @click="isFormOpen = true">Contact Us</Button>
+
+    <Sheet
+      v-model="isFormOpen"
+      side="bottom"
+      :dismiss-on-backdrop="false"
+      height="80vh"
+      max-height="600px"
+    >
+      <div class="form-content">
+        <div class="form-header">
+          <h2>Contact Form</h2>
+          <button @click="handleCancel" class="close-btn">×</button>
+        </div>
+
+        <form @submit.prevent="handleSubmit" class="form">
+          <div class="form-group">
+            <label for="name">Name</label>
+            <input
+              id="name"
+              v-model="formData.name"
+              type="text"
+              required
+              placeholder="Your name"
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="email">Email</label>
+            <input
+              id="email"
+              v-model="formData.email"
+              type="email"
+              required
+              placeholder="your@email.com"
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="message">Message</label>
+            <textarea
+              id="message"
+              v-model="formData.message"
+              required
+              placeholder="Your message..."
+              rows="4"
+            ></textarea>
+          </div>
+
+          <div class="form-actions">
+            <Button type="button" @click="handleCancel" variant="secondary">
+              Cancel
+            </Button>
+            <Button type="submit">Send Message</Button>
+          </div>
+        </form>
+      </div>
+    </Sheet>
+  </div>
+</template>
+
+<style module>
+.form-sheet {
+  padding: 2rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 0.5rem;
+  max-width: 400px;
+}
+
+.form-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.form-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem 2rem 1rem;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.form-header h2 {
+  margin: 0;
+  color: #333;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  color: #666;
+  transition: background-color 0.2s;
+}
+
+.close-btn:hover {
+  background-color: #f0f0f0;
+}
+
+.form {
+  flex: 1;
+  padding: 2rem;
+  overflow-y: auto;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: #333;
+}
+
+.form-group input,
+.form-group textarea {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid #ddd;
+  border-radius: 0.25rem;
+  font-size: 1rem;
+  font-family: inherit;
+  box-sizing: border-box;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: #007bff;
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+}
+
+.form-actions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+  margin-top: 2rem;
+  padding-top: 1rem;
+  border-top: 1px solid #e0e0e0;
+}
+</style>
+```
+
+### Custom Styled Sheet
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Sheet, Button } from "@umbra-ui/core";
+
+const isCustomOpen = ref(false);
+</script>
+
+<template>
+  <div class="custom-sheet">
+    <h3>Custom Styled Sheet</h3>
+
+    <Button @click="isCustomOpen = true" class="custom-trigger">
+      Open Custom Sheet
+    </Button>
+
+    <Sheet
+      v-model="isCustomOpen"
+      side="right"
+      :animation-duration="0.6"
+      backdrop-style="dim"
+      width="400px"
+      height="100vh"
+      max-width="400px"
+    >
+      <div class="custom-content">
+        <div class="custom-header">
+          <h2>Custom Sheet</h2>
+          <p>This sheet has custom styling and positioning.</p>
+        </div>
+
+        <div class="custom-body">
+          <div class="feature-list">
+            <div class="feature-item">
+              <div class="feature-icon">🎨</div>
+              <div class="feature-text">
+                <h4>Custom Colors</h4>
+                <p>Gradient backgrounds and custom styling</p>
+              </div>
+            </div>
+
+            <div class="feature-item">
+              <div class="feature-icon">⚡</div>
+              <div class="feature-text">
+                <h4>Right Side</h4>
+                <p>Slides in from the right side</p>
+              </div>
+            </div>
+
+            <div class="feature-item">
+              <div class="feature-icon">🔧</div>
+              <div class="feature-text">
+                <h4>Custom Size</h4>
+                <p>Fixed width and full height</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="custom-footer">
+          <Button @click="isCustomOpen = false" class="custom-close">
+            Close
+          </Button>
+        </div>
+      </div>
+    </Sheet>
+  </div>
+</template>
+
+<style module>
+.custom-sheet {
+  padding: 2rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 0.5rem;
+  max-width: 400px;
+}
+
+.custom-trigger {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.5rem;
+  font-weight: 600;
+  transition: transform 0.2s;
+}
+
+.custom-trigger:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+}
+
+.custom-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  color: white;
+}
+
+.custom-header {
+  padding: 2rem;
+  text-align: center;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+}
+
+.custom-header h2 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.5rem;
+}
+
+.custom-header p {
+  margin: 0;
+  opacity: 0.9;
+}
+
+.custom-body {
+  flex: 1;
+  padding: 2rem;
+  overflow-y: auto;
+}
+
+.feature-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.feature-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 1rem;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 0.5rem;
+  backdrop-filter: blur(5px);
+}
+
+.feature-icon {
+  font-size: 1.5rem;
+  width: 2rem;
+  text-align: center;
+}
+
+.feature-text h4 {
+  margin: 0 0 0.25rem 0;
+  font-size: 1rem;
+}
+
+.feature-text p {
+  margin: 0;
+  font-size: 0.875rem;
+  opacity: 0.8;
+}
+
+.custom-footer {
+  padding: 2rem;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  display: flex;
+  justify-content: center;
+}
+
+.custom-close {
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  padding: 0.75rem 2rem;
+  border-radius: 0.5rem;
+  font-weight: 600;
+  transition: all 0.2s;
+}
+
+.custom-close:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: translateY(-1px);
+}
+
+/* Override sheet CSS variables */
+:global(.custom-sheet) {
+  --sheet-bg: transparent;
+  --sheet-shadow: none;
+  --sheet-inset-shadow: none;
+  --sheet-backdrop-dim-bg: rgba(0, 0, 0, 0.8);
+}
+</style>
+```
+
+### Settings Panel
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Sheet, Button } from "@umbra-ui/core";
+
+const isSettingsOpen = ref(false);
+const settings = ref({
+  notifications: true,
+  darkMode: false,
+  autoSave: true,
+  language: "en",
+});
+
+const handleSave = () => {
+  console.log("Settings saved:", settings.value);
+  isSettingsOpen.value = false;
+};
+</script>
+
+<template>
+  <div class="settings-sheet">
+    <h3>Settings Panel</h3>
+
+    <Button @click="isSettingsOpen = true">Open Settings</Button>
+
+    <Sheet
+      v-model="isSettingsOpen"
+      side="right"
+      width="350px"
+      height="100vh"
+      max-width="350px"
+      :dismiss-on-backdrop="false"
+    >
+      <div class="settings-content">
+        <div class="settings-header">
+          <h2>Settings</h2>
+          <button @click="isSettingsOpen = false" class="close-btn">×</button>
+        </div>
+
+        <div class="settings-body">
+          <div class="setting-group">
+            <h3>Preferences</h3>
+
+            <div class="setting-item">
+              <div class="setting-info">
+                <h4>Notifications</h4>
+                <p>Receive push notifications</p>
+              </div>
+              <label class="toggle">
+                <input v-model="settings.notifications" type="checkbox" />
+                <span class="slider"></span>
+              </label>
+            </div>
+
+            <div class="setting-item">
+              <div class="setting-info">
+                <h4>Dark Mode</h4>
+                <p>Use dark theme</p>
+              </div>
+              <label class="toggle">
+                <input v-model="settings.darkMode" type="checkbox" />
+                <span class="slider"></span>
+              </label>
+            </div>
+
+            <div class="setting-item">
+              <div class="setting-info">
+                <h4>Auto Save</h4>
+                <p>Automatically save changes</p>
+              </div>
+              <label class="toggle">
+                <input v-model="settings.autoSave" type="checkbox" />
+                <span class="slider"></span>
+              </label>
+            </div>
+          </div>
+
+          <div class="setting-group">
+            <h3>Language</h3>
+
+            <div class="setting-item">
+              <div class="setting-info">
+                <h4>Language</h4>
+                <p>Select your preferred language</p>
+              </div>
+              <select v-model="settings.language" class="select">
+                <option value="en">English</option>
+                <option value="es">Spanish</option>
+                <option value="fr">French</option>
+                <option value="de">German</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <div class="settings-footer">
+          <Button @click="isSettingsOpen = false" variant="secondary">
+            Cancel
+          </Button>
+          <Button @click="handleSave">Save Changes</Button>
+        </div>
+      </div>
+    </Sheet>
+  </div>
+</template>
+
+<style module>
+.settings-sheet {
+  padding: 2rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 0.5rem;
+  max-width: 400px;
+}
+
+.settings-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.settings-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem 2rem 1rem;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.settings-header h2 {
+  margin: 0;
+  color: #333;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  color: #666;
+  transition: background-color 0.2s;
+}
+
+.close-btn:hover {
+  background-color: #f0f0f0;
+}
+
+.settings-body {
+  flex: 1;
+  padding: 2rem;
+  overflow-y: auto;
+}
+
+.setting-group {
+  margin-bottom: 2rem;
+}
+
+.setting-group h3 {
+  margin: 0 0 1rem 0;
+  color: #333;
+  font-size: 1.125rem;
+}
+
+.setting-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.setting-info h4 {
+  margin: 0 0 0.25rem 0;
+  color: #333;
+  font-size: 1rem;
+}
+
+.setting-info p {
+  margin: 0;
+  color: #666;
+  font-size: 0.875rem;
+}
+
+.toggle {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 24px;
+}
+
+.toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: 0.2s;
+  border-radius: 24px;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  transition: 0.2s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: #007bff;
+}
+
+input:checked + .slider:before {
+  transform: translateX(26px);
+}
+
+.select {
+  padding: 0.5rem;
+  border: 1px solid #ddd;
+  border-radius: 0.25rem;
+  background-color: white;
+  color: #333;
+}
+
+.settings-footer {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+  padding: 1.5rem 2rem;
+  border-top: 1px solid #e0e0e0;
+}
+</style>
+```
+
+## Technical Notes
+
+- Sheet provides a comprehensive modal system with smooth animations and flexible positioning
+- GSAP animations ensure smooth, performant transitions with hardware acceleration
+- Teleport usage ensures proper z-index layering and positioning outside component tree
+- Body scroll locking prevents background scrolling when sheet is open
+- Safe area support handles mobile device notches and home indicators
+- Custom scrollbar styling provides better visual consistency
+- Backdrop blur effects create modern, iOS-like appearance
+- Keyboard navigation includes Escape key support for accessibility
+- TypeScript interfaces ensure type safety for all props and events
+- CSS custom properties enable easy theming and customization
+- Responsive design adapts to different screen sizes and orientations
+- Animation cleanup prevents memory leaks and ensures smooth performance