@meistrari/tela-build 1.0.0

package/components/tela/radio-group/radio-group.mdx

@@ -0,0 +1,78 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as RadioGroupStories from './radio-group.stories';
+
+<Meta of={RadioGroupStories} />
+
+# TelaRadioGroup
+
+Radio group component for selecting one option from mutually exclusive choices.
+
+## Examples
+
+### With Label
+
+<Canvas of={RadioGroupStories.WithLabel} />
+
+### Disabled
+
+<Canvas of={RadioGroupStories.Disabled} />
+
+### Basic Usage
+
+```vue
+<TelaRadioGroup
+  :options="[
+    { label: 'Small', value: 'small' },
+    { label: 'Medium', value: 'medium' },
+    { label: 'Large', value: 'large' }
+  ]"
+  default-value="medium"
+/>
+```
+
+### Horizontal Layout
+
+```vue
+<TelaRadioGroup
+  :options="options"
+  orientation="horizontal"
+  default-value="option1"
+/>
+```
+
+### Manual Construction
+
+```vue
+<TelaRadioGroupRoot default-value="comfortable">
+  <div class="flex items-center">
+    <TelaRadioGroupItem id="default" value="default" />
+    <label for="default" class="text-black-900 text-[14px] pl-2 cursor-pointer">
+      Default
+    </label>
+  </div>
+  <div class="flex items-center">
+    <TelaRadioGroupItem id="comfortable" value="comfortable" />
+    <label for="comfortable" class="text-black-900 text-[14px] pl-2 cursor-pointer">
+      Comfortable
+    </label>
+  </div>
+</TelaRadioGroupRoot>
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type Option = {
+  label: string
+  value: string
+}
+```
+
+## Components
+
+The RadioGroup consists of these components:
+- `TelaRadioGroup` - High-level component with options array
+- `TelaRadioGroupRoot` - Container for radio items (extends reka-ui)
+- `TelaRadioGroupItem` - Individual radio button (extends reka-ui)

package/components/tela/radio-group/radio-group.stories.ts

@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import RadioGroupRoot from './radio-group-root.vue'
+import RadioGroupItem from './radio-group-item.vue'
+import TelaRadioGroup from './radio-group.vue'
+
+const meta: Meta<typeof TelaRadioGroup> = {
+    title: 'Core/RadioGroup',
+    component: TelaRadioGroup,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A radio group component that allows users to select a single option from a set of mutually exclusive choices. Built on reka-ui with support for v-model binding, disabled states, and horizontal/vertical orientations. Also includes a higher-level TelaRadioGroup component that accepts options as props.',
+            },
+        },
+    },
+    argTypes: {
+        options: {
+            description: 'Array of options with label and value',
+            control: { type: 'object' },
+        },
+        defaultValue: {
+            description: 'Default selected value',
+            control: { type: 'text' },
+        },
+        orientation: {
+            description: 'Layout orientation',
+            control: { type: 'select' },
+            options: ['vertical', 'horizontal'],
+            defaultValue: 'vertical',
+        },
+        class: {
+            description: 'Additional CSS classes',
+            control: { type: 'text' },
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    render: () => ({
+        components: { RadioGroupRoot, RadioGroupItem },
+        template: `<RadioGroupRoot>
+            <RadioGroupItem value="r1" />
+        </RadioGroupRoot>`,
+    }),
+}
+
+export const Disabled: Story = {
+    render: () => ({
+        components: { RadioGroupRoot, RadioGroupItem },
+        template: `<div class="flex gap-6px">
+            <RadioGroupRoot default-value="r1">
+                <RadioGroupItem value="r1" disabled />
+            </RadioGroupRoot>
+            <RadioGroupRoot>
+                <RadioGroupItem value="r1" disabled />
+            </RadioGroupRoot>
+        </div>`,
+    }),
+}
+
+export const WithLabel: Story = {
+    render: () => ({
+        components: { RadioGroupRoot, RadioGroupItem },
+        template: `<RadioGroupRoot default-value="comfortable" orientation="horizontal">
+            <div class="flex items-center">
+                <RadioGroupItem id="r1" value="default" />
+                <label for="r1" class="text-gray-900 text-[14px] pl-2 cursor-pointer">Default</label>
+            </div>
+            <div class="flex items-center">
+                <RadioGroupItem id="r2" value="comfortable" />
+                <label for="r2" class="text-gray-900 text-[14px] pl-2 cursor-pointer">Comfortable</label>
+            </div>
+            <div class="flex items-center">
+                <RadioGroupItem id="r3" value="compact" />
+                <label for="r3" class="text-gray-900 text-[14px] pl-2 cursor-pointer">Compact</label>
+            </div>
+        </RadioGroupRoot>`,
+    }),
+}
+
+export const WithProps: StoryObj<Meta<typeof TelaRadioGroup>> = {
+    args: {
+        options: [
+            { label: 'Small', value: 'small' },
+            { label: 'Medium', value: 'medium' },
+            { label: 'Large', value: 'large' },
+        ],
+        defaultValue: 'small',
+        orientation: 'vertical',
+    },
+    render: args => ({
+        components: { TelaRadioGroup },
+        setup() {
+            return { args }
+        },
+        template: `<TelaRadioGroup v-bind="args" />`,
+    }),
+}

package/components/tela/radio-group/radio-group.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+type Option = {
+    label: string
+    value: string
+}
+
+defineProps<{ class?: HTMLAttributes['class'], options: Option[], defaultValue?: string, orientation?: 'vertical' | 'horizontal' }>()
+</script>
+
+<template>
+    <TelaRadioGroupRoot :default-value="defaultValue" :orientation="orientation">
+        <div
+            v-for="option in options"
+            :key="option.value"
+            class="flex items-center"
+        >
+            <TelaRadioGroupItem :id="option.value" :value="option.value" />
+            <label :for="option.value" class="text-gray-900 text-[14px] pl-2 cursor-pointer">{{ option.label }}</label>
+        </div>
+    </TelaRadioGroupRoot>
+</template>

package/components/tela/range-calendar.stories.ts

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import TelaRangeCalendar from './range-calendar.vue'
+
+const meta: Meta<typeof TelaRangeCalendar> = {
+    title: 'Tela/RangeCalendar',
+    component: TelaRangeCalendar,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A range calendar component built with Radix Vue that allows users to select a date range with an intuitive calendar interface. Supports date range selection, navigation between months, and customizable styling. Useful for date pickers, booking systems, and scheduling interfaces.',
+            },
+        },
+    },
+    argTypes: {
+        modelValue: {
+            control: 'object',
+            description: 'The selected date range (v-model). Should be an object with `start` and `end` date properties.',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disable date selection and navigation.',
+        },
+        minDate: {
+            control: 'object',
+            description: 'Minimum selectable date. Dates before this will be disabled.',
+        },
+        maxDate: {
+            control: 'object',
+            description: 'Maximum selectable date. Dates after this will be disabled.',
+        },
+    },
+    render: () => {
+        return {
+            components: { TelaRangeCalendar },
+            template: `
+                <div style="padding: 20px; display: flex; justify-content: center;">
+                    <TelaRangeCalendar />
+                </div>
+            `,
+        }
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof TelaRangeCalendar>
+
+export const Default: Story = {
+    name: 'Default',
+    render: () => ({
+        components: { TelaRangeCalendar },
+        template: `
+            <div style="padding: 20px; display: flex; justify-content: center;">
+                <TelaRangeCalendar />
+            </div>
+        `,
+    }),
+}
+
+export const InContainer: Story = {
+    name: 'In Container',
+    render: () => ({
+        components: { TelaRangeCalendar },
+        template: `
+            <div style="padding: 20px; border: 1px solid #e5e7eb; border-radius: 8px; max-width: 600px; margin: 0 auto;">
+                <h3 style="margin: 0 0 16px 0; font-size: 18px; font-weight: 600;">Select Date Range</h3>
+                <TelaRangeCalendar />
+            </div>
+        `,
+    }),
+}
+
+export const WithBackground: Story = {
+    name: 'With Background',
+    render: () => ({
+        components: { TelaRangeCalendar },
+        template: `
+            <div style="padding: 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 400px; display: flex; justify-content: center; align-items: center;">
+                <TelaRangeCalendar />
+            </div>
+        `,
+    }),
+}
+
+export const Centered: Story = {
+    name: 'Centered Layout',
+    render: () => ({
+        components: { TelaRangeCalendar },
+        template: `
+            <div style="padding: 40px; display: flex; flex-direction: column; align-items: center; gap: 20px;">
+                <h2 style="margin: 0; color: #374151;">Choose Your Dates</h2>
+                <p style="margin: 0; color: #6b7280; text-align: center;">Select a start and end date for your reservation</p>
+                <TelaRangeCalendar />
+            </div>
+        `,
+    }),
+}
+
+export const CompactView: Story = {
+    name: 'Compact View',
+    render: () => ({
+        components: { TelaRangeCalendar },
+        template: `
+            <div style="padding: 10px; max-width: 400px;">
+                <TelaRangeCalendar />
+            </div>
+        `,
+    }),
+}

package/components/tela/range-calendar.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNext, RangeCalendarPrev, RangeCalendarRoot } from 'radix-vue'
+</script>
+
+<template>
+    <RangeCalendarRoot
+        v-slot="{ weekDays, grid }"
+        bg-white
+        rounded-xl
+        p-4
+        shadow-xl
+        fixed-weeks
+    >
+        <RangeCalendarHeader flex="~ items-center justify-between">
+            <RangeCalendarPrev
+                flex="~ items-center justify-center"
+                cursor-pointer
+                text-black
+                rounded-9px
+                bg-transparent
+                w-8 h-8
+                hover:bg-gray-200
+                class="active:scale-98 active:transition-all focus:shadow-[0_0_0_2px] focus:shadow-black"
+            >
+                <Icon
+                    icon="radix-icons:chevron-left"
+                    w-6 h-6
+                />
+            </RangeCalendarPrev>
+            <RangeCalendarHeading body-14-semibold text-black />
+            <RangeCalendarNext
+                flex="~ items-center justify-center"
+                cursor-pointer
+                text-black
+                rounded-9px
+                bg-transparent
+                w-8 h-8
+                hover:bg-gray-200
+                class="active:scale-98 active:transition-all focus:shadow-[0_0_0_2px] focus:shadow-black"
+            >
+                <Icon
+                    icon="radix-icons:chevron-right"
+                    w-6 h-6
+                />
+            </RangeCalendarNext>
+        </RangeCalendarHeader>
+        <div
+            flex="~ col"
+            space-y-4
+            pt-4
+            sm:flex-row
+            sm:space-x-4
+            sm:space-y-0
+        >
+            <RangeCalendarGrid
+                v-for="month in grid"
+                :key="month.value.toString()"
+                w-full
+                border-collapse
+                select-none
+                space-y-1
+            >
+                <RangeCalendarGridHead>
+                    <RangeCalendarGridRow w-full flex="~ justify-between" mb-1>
+                        <RangeCalendarHeadCell
+                            v-for="day in weekDays"
+                            :key="day"
+                            w-8
+                            rounded-md
+                            body-12-semibold
+                            text-black
+                        >
+                            {{ day }}
+                        </RangeCalendarHeadCell>
+                    </RangeCalendarGridRow>
+                </RangeCalendarGridHead>
+                <RangeCalendarGridBody>
+                    <RangeCalendarGridRow
+                        v-for="(weekDates, index) in month.rows"
+                        :key="`weekDate-${index}`"
+                        flex="~ justify-between"
+                        w-full
+                    >
+                        <RangeCalendarCell
+                            v-for="weekDate in weekDates"
+                            :key="weekDate.toString()"
+                            :date="weekDate"
+                        >
+                            <RangeCalendarCellTrigger
+                                :day="weekDate"
+                                :month="month.value"
+                                relative
+                                flex="~ items-center justify-center"
+                                rounded-full
+                                whitespace-nowrap
+                                body-12-semibold
+                                text-black
+                                w-8 h-8
+                                outline-none
+                                class=" hover:bg-white! hover:shadow-[#2563eb] hover:shadow-[0_0_0_2px] data-[outside-view]:text-black/30 data-[selected]:!bg-blue-200 data-[selected]:text-[#1e3a8a]! hover:bg-blue-200 data-[highlighted]:bg-blue-200 data-[highlighted]:text-[#1e3a8a]! data-[unavailable]:pointer-events-none data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:text-[#1e3a8a]! data-[today]:underline data-[today]:underline-offset-4"
+                            />
+                        </RangeCalendarCell>
+                    </RangeCalendarGridRow>
+                </RangeCalendarGridBody>
+            </RangeCalendarGrid>
+        </div>
+    </RangeCalendarRoot>
+</template>

package/components/tela/scroll-area/scroll-area.mdx

@@ -0,0 +1,183 @@
+import { Meta, ArgTypes } from '@storybook/blocks';
+
+<Meta title="Utility/ScrollArea" />
+
+# TelaScrollArea
+
+A scroll area component that provides custom-styled scrollbars. Built on reka-ui for consistent scrollbar appearance across browsers. Useful for creating scrollable containers with better visual consistency than native scrollbars.
+
+## Components
+
+- `TelaScrollArea` - Root scroll container
+- `TelaScrollAreaViewport` - Scrollable viewport
+- `TelaScrollAreaScrollbar` - Custom scrollbar
+- `TelaScrollAreaThumb` - Scrollbar thumb
+
+## Props
+
+```typescript
+type ScrollAreaProps = {
+  type?: 'auto' | 'always' | 'scroll' | 'hover'
+  dir?: 'ltr' | 'rtl'
+  scrollHideDelay?: number
+}
+```
+
+## Examples
+
+### Basic Usage
+
+```vue
+<TelaScrollArea class="h-200px w-350px">
+  <div class="p-4">
+    <p>Long content that needs scrolling...</p>
+    <p>More content...</p>
+    <p>Even more content...</p>
+    <!-- ... many more lines -->
+  </div>
+</TelaScrollArea>
+```
+
+### With Custom Height
+
+```vue
+<TelaScrollArea class="h-96 w-full">
+  <div class="space-y-4">
+    {/* Long list of items */}
+  </div>
+</TelaScrollArea>
+```
+
+### Horizontal Scroll
+
+```vue
+<TelaScrollArea class="w-full">
+  <div class="flex gap-4 p-4" style="width: 2000px">
+    <div v-for="i in 20" :key="i" class="flex-shrink-0 w-200px h-150px bg-gray-200 rounded">
+      Item {{ i }}
+    </div>
+  </div>
+</TelaScrollArea>
+```
+
+### Both Directions
+
+```vue
+<TelaScrollArea class="h-400px w-600px">
+  <div style="width: 1200px">
+    <div v-for="i in 50" :key="i" class="p-4 border-b">
+      Row {{ i }} with very long content that extends beyond the visible area horizontally
+    </div>
+  </div>
+</TelaScrollArea>
+```
+
+### Auto Hide
+
+```vue
+<TelaScrollArea
+  type="hover"
+  :scroll-hide-delay="600"
+  class="h-300px w-400px"
+>
+  <div class="p-4">
+    Scrollbars appear on hover and hide after 600ms
+  </div>
+</TelaScrollArea>
+```
+
+### Always Visible
+
+```vue
+<TelaScrollArea
+  type="always"
+  class="h-300px w-400px"
+>
+  <div class="p-4">
+    Scrollbars always visible
+  </div>
+</TelaScrollArea>
+```
+
+### Chat Messages
+
+```vue
+<TelaScrollArea class="h-500px w-350px">
+  <div class="p-4 space-y-3">
+    <div v-for="message in messages" :key="message.id" class="flex gap-2">
+      <TelaAvatar :src="message.avatar" size="sm" />
+      <div>
+        <div class="font-semibold">{{ message.author }}</div>
+        <div class="text-sm">{{ message.content }}</div>
+      </div>
+    </div>
+  </div>
+</TelaScrollArea>
+```
+
+### Data Table
+
+```vue
+<TelaScrollArea class="h-400px w-full">
+  <table class="w-full">
+    <thead class="sticky top-0 bg-white">
+      <tr>
+        <th>Name</th>
+        <th>Email</th>
+        <th>Role</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="user in users" :key="user.id">
+        <td>{{ user.name }}</td>
+        <td>{{ user.email }}</td>
+        <td>{{ user.role }}</td>
+      </tr>
+    </tbody>
+  </table>
+</TelaScrollArea>
+```
+
+## Scroll Types
+
+- **auto**: Native scrollbar behavior
+- **always**: Scrollbars always visible
+- **scroll**: Scrollbars visible when scrolling
+- **hover**: Scrollbars appear on hover
+
+## Features
+
+- **Custom Styled**: Consistent scrollbar appearance
+- **Cross-browser**: Works the same everywhere
+- **Both Directions**: Horizontal and vertical scrolling
+- **Auto Hide**: Hide scrollbars when not in use
+- **Smooth Scrolling**: Native smooth scroll support
+- **Accessible**: Keyboard navigation support
+- **Touch Friendly**: Works on touch devices
+
+## Use Cases
+
+- **Chat Windows**: Scrollable message lists
+- **Data Tables**: Large datasets
+- **Content Panels**: Long-form content
+- **Image Galleries**: Horizontal scrolling
+- **Sidebars**: Scrollable navigation
+- **Modals**: Scrollable modal content
+
+## Best Practices
+
+1. **Set Explicit Height**: Always set height on container
+2. **Use Auto Type**: Best for most cases
+3. **Consider Content**: Horizontal scroll for wide content
+4. **Sticky Headers**: Use for table headers
+5. **Scroll Padding**: Add padding to scrollable content
+
+## Accessibility
+
+- Built on reka-ui primitives
+- Keyboard navigation (Arrow keys, Page Up/Down)
+- Focus scrolling support
+- Screen reader compatible
+- Respects reduced motion preferences
+- Native scroll behavior maintained
+

package/components/tela/scroll-area/scroll-area.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {
+    ScrollAreaCorner,
+    ScrollAreaRoot,
+
+    ScrollAreaViewport,
+} from 'reka-ui'
+import type { ScrollAreaRootProps } from 'reka-ui'
+import { computed } from 'vue'
+import type { HTMLAttributes } from 'vue'
+import ScrollBar from './scroll-bar.vue'
+
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+
+    return delegated
+})
+</script>
+
+<template>
+    <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
+        <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
+            <slot />
+        </ScrollAreaViewport>
+        <ScrollBar />
+        <ScrollAreaCorner />
+    </ScrollAreaRoot>
+</template>

package/components/tela/scroll-area/scroll-bar.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { ScrollAreaScrollbar, ScrollAreaThumb } from 'reka-ui'
+import type { ScrollAreaScrollbarProps } from 'reka-ui'
+import { computed } from 'vue'
+import type { HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
+    orientation: 'vertical',
+})
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+
+    return delegated
+})
+</script>
+
+<template>
+    <ScrollAreaScrollbar
+        v-bind="delegatedProps"
+        :class="
+            cn('flex touch-none select-none transition-colors',
+               orientation === 'vertical'
+                   && 'h-full w-2 border-l border-l-transparent p-px',
+               orientation === 'horizontal'
+                   && 'h-2.5 flex-col border-t border-t-transparent p-px',
+               props.class)"
+    >
+        <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
+    </ScrollAreaScrollbar>
+</template>