@meistrari/tela-build 1.0.0

package/components/tela/sheet/sheet.mdx

@@ -0,0 +1,176 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as SheetStories from './sheet.stories.ts';
+
+<Meta of={SheetStories} />
+
+# TelaSheet
+
+A slide-out sheet component that displays content in a side panel. Supports different widths, compact mode, custom overlays, and fullscreen mode. Includes slots for header, content, and footer. Useful for sidebars, settings panels, and detail views.
+
+## Examples
+
+### With Title
+
+<Canvas of={SheetStories.WithTitle} />
+
+### Compact Mode
+
+<Canvas of={SheetStories.CompactMode} />
+
+### Custom Overlay
+
+<Canvas of={SheetStories.CustomOverlay} />
+
+### Fullscreen
+
+<Canvas of={SheetStories.Fullscreen} />
+
+### Basic Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <TelaButton @click="isOpen = true">
+    Open Sheet
+  </TelaButton>
+
+  <TelaSheet v-model="isOpen" title="Sheet Title">
+    <div class="p-4">
+      <p>Sheet content goes here</p>
+    </div>
+  </TelaSheet>
+</template>
+```
+
+### With Title Code
+
+```vue
+<TelaSheet v-model="isOpen" title="Settings">
+  <div class="p-4">
+    <h3>Settings Content</h3>
+  </div>
+</TelaSheet>
+```
+
+### Different Widths
+
+```vue
+<!-- Medium width (default) -->
+<TelaSheet v-model="isOpen" modal-width="md" title="Medium Width">
+  <div class="p-4">Medium sheet</div>
+</TelaSheet>
+
+<!-- Large width -->
+<TelaSheet v-model="isOpen" modal-width="lg" title="Large Width">
+  <div class="p-4">Large sheet</div>
+</TelaSheet>
+```
+
+### Compact Mode Code
+
+```vue
+<TelaSheet v-model="isOpen" compact title="Compact Sheet">
+  <div class="p-4">
+    Compact mode reduces padding and spacing
+  </div>
+</TelaSheet>
+```
+
+### With Footer
+
+```vue
+<TelaSheet v-model="isOpen" title="With Footer">
+  <div class="p-4">
+    <p>Main content</p>
+  </div>
+
+  <template #footer>
+    <div class="flex gap-2">
+      <TelaButton variant="primary" @click="save">Save</TelaButton>
+      <TelaButton variant="secondary" @click="isOpen = false">Cancel</TelaButton>
+    </div>
+  </template>
+</TelaSheet>
+```
+
+### Custom Overlay Code
+
+```vue
+<TelaSheet
+  v-model="isOpen"
+  title="Custom Overlay"
+  overlay-class="bg-blue-500/50"
+>
+  <div class="p-4">Sheet with custom overlay</div>
+</TelaSheet>
+```
+
+```vue
+<TelaSheet v-model="isOpen" fullscreen>
+  <div class="p-4">
+    Fullscreen sheet covering entire viewport
+  </div>
+</TelaSheet>
+```
+
+### Hide Dividers
+
+```vue
+<TelaSheet v-model="isOpen" hide-dividers title="No Dividers">
+  <div class="p-4">
+    Sheet without divider lines
+  </div>
+</TelaSheet>
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type SheetProps = {
+  modelValue: boolean
+  title?: string
+  modalWidth?: 'md' | 'lg'
+  compact?: boolean
+  hideDividers?: boolean
+  overlayClass?: string
+  fullscreen?: boolean
+}
+```
+
+## Slots
+
+- `default` - Main content area of the sheet
+- `header` - Custom header content (replaces title)
+- `footer` - Footer content for actions/buttons
+
+## Events
+
+- `update:modelValue` - Emitted when sheet opens/closes with boolean value
+- `close` - Emitted when sheet is closed
+
+## Features
+
+- **Slide Animation**: Smooth slide-in from the right
+- **Overlay**: Semi-transparent backdrop
+- **Multiple Widths**: Medium and large size options
+- **Compact Mode**: Reduced spacing for dense layouts
+- **Custom Header/Footer**: Slots for custom content
+- **Fullscreen Mode**: Cover entire viewport
+- **Close on Overlay Click**: Click outside to close
+- **Escape Key**: Press Escape to close
+- **Accessible**: Focus trap and keyboard navigation
+
+## Accessibility
+
+- Focus trapped within sheet when open
+- Escape key to close
+- Proper ARIA attributes
+- Focus returns to trigger element on close
+- Overlay backdrop for visual separation

package/components/tela/sheet/sheet.stories.ts

@@ -0,0 +1,201 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Sheet from './sheet.client.vue'
+
+const meta: Meta<typeof Sheet> = {
+    title: 'Core/Sheet',
+    component: Sheet,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A slide-out sheet component that displays content in a side panel. Supports different widths, compact mode, custom overlays, and fullscreen mode. Includes slots for header, content, and footer. Useful for sidebars, settings panels, and detail views.',
+            },
+        },
+    },
+    argTypes: {
+        modelValue: {
+            control: 'boolean',
+            description: 'Controls the open/closed state of the sheet (v-model).',
+        },
+        title: {
+            control: 'text',
+            description: 'Title displayed at the top of the sheet header.',
+        },
+        modalWidth: {
+            control: { type: 'select', options: ['md', 'lg'] },
+            description: 'Width variant of the sheet. "md" for medium width, "lg" for large width.',
+        },
+        compact: {
+            control: 'boolean',
+            description: 'Enable compact mode, reducing padding and spacing within the sheet.',
+        },
+        hideDividers: {
+            control: 'boolean',
+            description: 'Hide divider lines between sections in the sheet content.',
+        },
+        overlayClass: {
+            control: 'text',
+            description: 'Custom CSS classes to apply to the overlay background.',
+        },
+        fullscreen: {
+            control: 'boolean',
+            description: 'Make the sheet fullscreen, covering the entire viewport.',
+        },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: {
+        title: 'Default Sheet',
+        modalWidth: 'md',
+        compact: false,
+        hideDividers: false,
+        overlayClass: '',
+    },
+    render: args => ({
+        components: { Sheet },
+        setup() {
+            const isOpen = ref(false)
+            const handleClose = () => {
+                isOpen.value = false
+            }
+            return { args, isOpen, handleClose }
+        },
+        template: `
+      <div>
+        <button @click="isOpen = true">Open Sheet</button>
+        <Sheet v-model="isOpen" v-bind="args" @close="handleClose">
+          <div class="p-4">
+            <p>This is the default sheet content.</p>
+          </div>
+        </Sheet>
+      </div>
+    `,
+    }),
+}
+
+export const WithTitle: Story = {
+    args: {
+        title: 'Sheet with Title',
+        modalWidth: 'lg',
+        compact: false,
+        hideDividers: false,
+        overlayClass: '',
+    },
+    render: args => ({
+        components: { Sheet },
+        setup() {
+            const isOpen = ref(false)
+            const handleClose = () => {
+                isOpen.value = false
+            }
+            return { args, isOpen, handleClose }
+        },
+        template: `
+      <div>
+        <button @click="isOpen = true">Open Sheet</button>
+        <Sheet v-model="isOpen" v-bind="args" @close="handleClose">
+          <div class="p-4">
+            <p>This sheet has a custom title.</p>
+            <button @click="isOpen = false">Close</button>
+          </div>
+          <template #footer>
+            <button @click="isOpen = false">Footer Close</button>
+          </template>
+        </Sheet>
+      </div>
+    `,
+    }),
+}
+
+export const CompactMode: Story = {
+    args: {
+        title: 'Compact Sheet',
+        modalWidth: 'md',
+        compact: true,
+        hideDividers: false,
+        overlayClass: '',
+    },
+    render: args => ({
+        components: { Sheet },
+        setup() {
+            const isOpen = ref(false)
+            const handleClose = () => {
+                isOpen.value = false
+            }
+            return { args, isOpen, handleClose }
+        },
+        template: `
+      <div>
+        <button @click="isOpen = true">Open Compact Sheet</button>
+        <Sheet v-model="isOpen" v-bind="args" @close="handleClose">
+          <div class="p-4">
+            <p>This is a compact sheet.</p>
+            <button @click="isOpen = false">Close</button>
+          </div>
+          <template #footer>
+            <button @click="isOpen = false">Footer Close</button>
+          </template>
+        </Sheet>
+      </div>
+    `,
+    }),
+}
+
+export const CustomOverlay: Story = {
+    args: {
+        title: 'Sheet with Custom Overlay',
+        modalWidth: 'lg',
+        compact: false,
+        hideDividers: false,
+        overlayClass: 'bg-blue-500/50',
+    },
+    render: args => ({
+        components: { Sheet },
+        setup() {
+            const isOpen = ref(false)
+            const handleClose = () => {
+                isOpen.value = false
+            }
+            return { args, isOpen, handleClose }
+        },
+        template: `
+      <div>
+        <button @click="isOpen = true">Open Custom Overlay Sheet</button>
+        <Sheet v-model="isOpen" v-bind="args" @close="handleClose">
+          <div class="p-4">
+            <p>This sheet has a custom overlay class.</p>
+            <button @click="isOpen = false">Close</button>
+          </div>
+          <template #footer>
+            <button @click="isOpen = false">Footer Close</button>
+          </template>
+        </Sheet>
+      </div>
+    `,
+    }),
+}
+
+export const Fullscreen: Story = {
+    args: {
+        fullscreen: true,
+    },
+    render: args => ({
+        components: { Sheet },
+        setup() {
+            const isOpen = ref(false)
+            return { args, isOpen }
+        },
+        template: `
+      <div>
+        <button @click="isOpen = true">Open Sheet</button>
+        <Sheet v-model="isOpen" v-bind="args">
+          <div class="p-4">This is a fullscreen sheet.</div>
+        </Sheet>
+      </div>
+    `,
+    }),
+}

package/components/tela/sheet/variants.ts

@@ -0,0 +1,22 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export const sheetVariants = cva(
+    'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+    {
+        variants: {
+            side: {
+                top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+                bottom:
+            'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+                left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+                right:
+            'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+            },
+        },
+        defaultVariants: {
+            side: 'right',
+        },
+    },
+)
+
+export type SheetVariants = VariantProps<typeof sheetVariants>

package/components/tela/side-sheet/side-sheet.mdx

@@ -0,0 +1,131 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as SideSheetStories from './side-sheet.stories.ts';
+
+<Meta of={SideSheetStories} />
+
+# TelaSideSheet
+
+A side sheet component that slides in from the side of the viewport. Similar to a drawer or sidebar, it displays content in a panel that overlays the main content. Supports custom titles, overlay styling, and v-model binding for open/close state.
+
+## Examples
+
+### Without Title
+
+<Canvas of={SideSheetStories.WithoutTitle} />
+
+### With Custom Content
+
+<Canvas of={SideSheetStories.WithCustomContent} />
+
+### Custom Overlay
+
+<Canvas of={SideSheetStories.WithCustomOverlay} />
+
+### Basic Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <TelaButton @click="isOpen = true">
+    Open Side Sheet
+  </TelaButton>
+
+  <TelaSideSheet v-model="isOpen" title="Side Sheet">
+    <div class="p-4">
+      <p>Side sheet content goes here</p>
+    </div>
+  </TelaSideSheet>
+</template>
+```
+
+### With Title
+
+```vue
+<TelaSideSheet v-model="isOpen" title="Navigation">
+  <div class="p-4">
+    <nav>
+      <a href="#home">Home</a>
+      <a href="#about">About</a>
+      <a href="#contact">Contact</a>
+    </nav>
+  </div>
+</TelaSideSheet>
+```
+
+### Without Title Code
+
+```vue
+<TelaSideSheet v-model="isOpen">
+  <div class="p-4">
+    <p>Side sheet without title</p>
+  </div>
+</TelaSideSheet>
+```
+
+### With Custom Content Code
+
+```vue
+<TelaSideSheet v-model="isOpen" title="Form">
+  <div class="p-4">
+    <form>
+      <TelaInput label="Name" />
+      <TelaTextarea label="Message" />
+      <TelaButton type="submit">Submit</TelaButton>
+    </form>
+  </div>
+</TelaSideSheet>
+```
+
+```vue
+<TelaSideSheet
+  v-model="isOpen"
+  title="Custom Overlay"
+  overlay-class="bg-gray-900/50"
+>
+  <div class="p-4">
+    Side sheet with custom overlay opacity
+  </div>
+</TelaSideSheet>
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type SideSheetProps = {
+  modelValue: boolean
+  title?: string
+  overlayClass?: string
+}
+```
+
+## Events
+
+- `update:modelValue` - Emitted when side sheet opens/closes with boolean value
+- `close` - Emitted when side sheet is closed
+
+## Features
+
+- **Slide Animation**: Smooth slide-in from the side
+- **Overlay**: Semi-transparent backdrop
+- **Custom Styling**: Control overlay appearance
+- **Close Button**: Built-in close button in header
+- **Click Outside**: Click overlay to close
+- **Escape Key**: Press Escape to close
+- **Accessible**: Focus trap and keyboard navigation
+- **Header**: Optional title with close button
+
+## Accessibility
+
+- Focus trapped within side sheet when open
+- Escape key to close
+- Proper ARIA attributes (role="dialog", aria-modal)
+- Focus returns to trigger element on close
+- Close button with accessible label
+- Overlay backdrop for visual separation

package/components/tela/side-sheet/side-sheet.stories.ts

@@ -0,0 +1,134 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import { fn } from '@storybook/test'
+import SideSheet from './side-sheet.vue'
+
+const meta: Meta<typeof SideSheet> = {
+    title: 'Core/SideSheet',
+    component: SideSheet,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A side sheet component that slides in from the side of the viewport. Similar to a drawer or sidebar, it displays content in a panel that overlays the main content. Supports custom titles, overlay styling, and v-model binding for open/close state.',
+            },
+        },
+    },
+    argTypes: {
+        modelValue: {
+            control: 'boolean',
+            description: 'Controls the open/closed state of the side sheet (v-model).',
+        },
+        title: {
+            control: 'text',
+            description: 'Title displayed at the top of the side sheet header.',
+        },
+        overlayClass: {
+            control: 'text',
+            description: 'Custom CSS classes to apply to the overlay background.',
+        },
+    },
+    args: {
+        'onUpdate:modelValue': fn(),
+        'onClose': fn(),
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: {
+        title: 'Side Sheet Title',
+    },
+    render: args => ({
+        components: { SideSheet },
+        setup() {
+            const isOpen = ref(false)
+            return { args, isOpen }
+        },
+        template: `
+            <div>
+                <SideSheet v-model="isOpen" v-bind="args">
+                    <div class="p-4">
+                        <p>This is the content of the side sheet.</p>
+                        <p class="mt-4">You can put any content here.</p>
+                    </div>
+                </SideSheet>
+                <button @click="isOpen = true">Open Side Sheet</button>
+            </div>
+        `,
+    }),
+}
+
+export const WithoutTitle: Story = {
+    render: args => ({
+        components: { SideSheet },
+        setup() {
+            const isOpen = ref(false)
+            return { args, isOpen }
+        },
+        template: `
+            <div>
+                <SideSheet v-model="isOpen" v-bind="args">
+                    <div class="p-4">
+                        <p>Side sheet without a title.</p>
+                    </div>
+                </SideSheet>
+                <button @click="isOpen = true">Open Side Sheet</button>
+            </div>
+        `,
+    }),
+}
+
+export const WithCustomContent: Story = {
+    args: {
+        title: 'Custom Content',
+    },
+    render: args => ({
+        components: { SideSheet },
+        setup() {
+            const isOpen = ref(false)
+            return { args, isOpen }
+        },
+        template: `
+            <div>
+                <SideSheet v-model="isOpen" v-bind="args">
+                    <div class="p-4">
+                        <div class="flex flex-col gap-4">
+                            <input type="text" placeholder="Enter some text" class="border-1px p-2 rounded" />
+                            <textarea placeholder="Enter a longer text" class="border-1px p-2 rounded" rows="4"></textarea>
+                            <button class="bg-blue-500 text-white p-2 rounded">Submit</button>
+                        </div>
+                    </div>
+                </SideSheet>
+                <button @click="isOpen = true">Open Side Sheet</button>
+            </div>
+        `,
+    }),
+}
+
+export const WithCustomOverlay: Story = {
+    args: {
+        title: 'Custom Overlay',
+        overlayClass: 'bg-gray-900/50',
+    },
+    render: args => ({
+        components: { SideSheet },
+        setup() {
+            const isOpen = ref(false)
+            return { args, isOpen }
+        },
+        template: `
+            <div>
+                <SideSheet v-model="isOpen" v-bind="args">
+                    <div class="p-4">
+                        <p>Side sheet with custom overlay opacity.</p>
+                    </div>
+                </SideSheet>
+                <button @click="isOpen = true">Open Side Sheet</button>
+            </div>
+        `,
+    }),
+}