@meistrari/tela-build 1.0.0

package/components/tela/date-range-picker.vue

@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { getLocalTimeZone } from '@internationalized/date'
+import { endOfDay, format, startOfDay } from 'date-fns'
+import {
+    DateRangePickerArrow,
+    DateRangePickerCalendar,
+    DateRangePickerCell,
+    DateRangePickerCellTrigger,
+    DateRangePickerContent,
+    DateRangePickerField,
+    DateRangePickerGrid,
+    DateRangePickerGridBody,
+    DateRangePickerGridHead,
+    DateRangePickerGridRow,
+    DateRangePickerHeadCell,
+    DateRangePickerHeader,
+    DateRangePickerHeading,
+    DateRangePickerNext,
+    DateRangePickerPrev,
+    DateRangePickerRoot,
+    DateRangePickerTrigger,
+
+} from 'radix-vue'
+import type { DateRange } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<{
+    label?: string
+    disableClear?: boolean
+    open?: boolean
+    hasClear?: boolean
+}>()
+
+const emit = defineEmits<{
+    (e: 'update:model-value', value: DateRange): void
+    (e: 'clear'): void
+    (e: 'update:open', value: boolean): void
+}>()
+
+const model = defineModel<DateRange>({ required: true })
+const startDate = computed(() => {
+    if (model.value && model.value.start) {
+        return startOfDay(new Date(model.value.start.toDate(getLocalTimeZone()).toISOString()))
+    }
+    return undefined
+})
+
+const endDate = computed(() => {
+    if (model.value && model.value.end) {
+        return endOfDay(new Date(model.value.end.toDate(getLocalTimeZone()).toISOString()))
+    }
+    return undefined
+})
+
+const defaultLabel = computed(() => {
+    return `${startDate.value ? format(startDate.value, 'dd/MM/yyyy') : '--/--/----'} - ${endDate.value ? format(endDate.value, 'dd/MM/yyyy') : '--/--/----'}`
+})
+</script>
+
+<template>
+    <div class="flex flex-col gap-2">
+        <DateRangePickerRoot
+            id="date-field"
+            :default-value="model"
+            :open="props.open"
+            @update:open="emit('update:open', $event)"
+            @update:model-value="emit('update:model-value', $event)"
+        >
+            <DateRangePickerTrigger>
+                <DateRangePickerField
+                    bg-white
+                    rounded-8px
+                    select-none
+                    border="0.5px solid gray-300"
+                    flex="~ gap-6px"
+                    h-32px
+                    py-7px
+                    px-14px
+                    items-center
+                    text-gray-200
+                    hover:bg-gray-50
+                    class="data-[invalid]:border-red-500"
+                >
+                    <TelaIcon name="i-ph-calendar-blank-bold" size="sm" />
+                    <span
+                        body-12-semibold
+                        text-gray-900
+                        text-nowrap
+                    >
+                        {{ props.label || defaultLabel }}
+                    </span>
+                    <div
+                        v-if="hasClear"
+                        cursor-pointer
+                        hover:bg-gray-200
+                        rounded-full
+                        p-2px
+                        @click="!props.disableClear && emit('clear')"
+                    >
+                        <TelaIcon
+                            :disabled="props.disableClear"
+                            name="i-ph-x"
+                            size="sm"
+                        />
+                    </div>
+                </DateRangePickerField>
+            </DateRangePickerTrigger>
+
+            <DateRangePickerContent
+                :side-offset="4"
+                z-60
+                rounded-xl
+                bg-white
+                shadow-lg
+                class="will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
+            >
+                <DateRangePickerArrow fill-white />
+                <DateRangePickerCalendar
+                    v-slot="{ weekDays, grid }"
+                    class="p-4"
+                >
+                    <DateRangePickerHeader flex="~ items-center justify-between">
+                        <DateRangePickerPrev
+                            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
+                            />
+                        </DateRangePickerPrev>
+
+                        <DateRangePickerHeading body-14-semibold text-black />
+                        <DateRangePickerNext
+                            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
+                            />
+                        </DateRangePickerNext>
+                    </DateRangePickerHeader>
+                    <div
+                        flex="~ col"
+                        space-y-4
+                        pt-4
+                        sm:flex-row
+                        sm:space-x-4
+                        sm:space-y-0
+                    >
+                        <DateRangePickerGrid
+                            v-for="month in grid"
+                            :key="month.value.toString()"
+                            w-full
+                            border-collapse
+                            select-none
+                            space-y-1
+                        >
+                            <DateRangePickerGridHead>
+                                <DateRangePickerGridRow w-full flex="~ justify-between" mb-1>
+                                    <DateRangePickerHeadCell
+                                        v-for="day in weekDays"
+                                        :key="day"
+                                        w-8
+                                        rounded-md
+                                        body-12-semibold
+                                        text-black
+                                    >
+                                        {{ day }}
+                                    </DateRangePickerHeadCell>
+                                </DateRangePickerGridRow>
+                            </DateRangePickerGridHead>
+                            <DateRangePickerGridBody>
+                                <DateRangePickerGridRow
+                                    v-for="(weekDates, index) in month.rows"
+                                    :key="`weekDate-${index}`"
+                                    flex="~"
+                                    w-full
+                                >
+                                    <DateRangePickerCell
+                                        v-for="weekDate in weekDates"
+                                        :key="weekDate.toString()"
+                                        :date="weekDate"
+                                    >
+                                        <DateRangePickerCellTrigger
+                                            :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 data-[today]:text-[#1e3a8a]! data-[today]:underline data-[today]:underline-offset-4"
+                                        />
+                                    </DateRangePickerCell>
+                                </DateRangePickerGridRow>
+                            </DateRangePickerGridBody>
+                        </DateRangePickerGrid>
+                    </div>
+                </DateRangePickerCalendar>
+            </DateRangePickerContent>
+        </DateRangePickerRoot>
+    </div>
+</template>

package/components/tela/dialog/dialog.mdx

@@ -0,0 +1,170 @@
+import { Meta, ArgTypes } from '@storybook/blocks';
+
+<Meta title="Layout/Dialog" />
+
+# TelaDialog
+
+A dialog component for displaying important messages, confirmations, or forms that require user interaction. Built on reka-ui primitives for accessibility.
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type DialogProps = {
+  open?: boolean
+  defaultOpen?: boolean
+}
+```
+
+## Examples
+
+### Basic Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <TelaDialogRoot v-model:open="isOpen">
+    <TelaDialogTrigger as-child>
+      <TelaButton>Open Dialog</TelaButton>
+    </TelaDialogTrigger>
+    
+    <TelaDialogContent>
+      <TelaDialogHeader>
+        <TelaDialogTitle>Dialog Title</TelaDialogTitle>
+        <TelaDialogDescription>
+          Dialog description text goes here
+        </TelaDialogDescription>
+      </TelaDialogHeader>
+      
+      <div class="py-4">
+        <p>Dialog content</p>
+      </div>
+      
+      <TelaDialogFooter>
+        <TelaButton variant="secondary" @click="isOpen = false">
+          Cancel
+        </TelaButton>
+        <TelaButton variant="primary" @click="confirm">
+          Confirm
+        </TelaButton>
+      </TelaDialogFooter>
+    </TelaDialogContent>
+  </TelaDialogRoot>
+</template>
+```
+
+### Confirmation Dialog
+
+```vue
+<TelaDialogRoot v-model:open="isOpen">
+  <TelaDialogTrigger as-child>
+    <TelaButton variant="danger">Delete</TelaButton>
+  </TelaDialogTrigger>
+  
+  <TelaDialogContent>
+    <TelaDialogHeader>
+      <TelaDialogTitle>Are you sure?</TelaDialogTitle>
+      <TelaDialogDescription>
+        This action cannot be undone.
+      </TelaDialogDescription>
+    </TelaDialogHeader>
+    
+    <TelaDialogFooter>
+      <TelaButton variant="secondary" @click="isOpen = false">
+        Cancel
+      </TelaButton>
+      <TelaButton variant="danger" @click="deleteItem">
+        Delete
+      </TelaButton>
+    </TelaDialogFooter>
+  </TelaDialogContent>
+</TelaDialogRoot>
+```
+
+### Form Dialog
+
+```vue
+<TelaDialogRoot v-model:open="isOpen">
+  <TelaDialogTrigger as-child>
+    <TelaButton>Add User</TelaButton>
+  </TelaDialogTrigger>
+  
+  <TelaDialogContent>
+    <TelaDialogHeader>
+      <TelaDialogTitle>Add New User</TelaDialogTitle>
+      <TelaDialogDescription>
+        Enter user information below
+      </TelaDialogDescription>
+    </TelaDialogHeader>
+    
+    <form @submit.prevent="onSubmit">
+      <TelaInput label="Name" v-model="name" />
+      <TelaInput label="Email" v-model="email" type="email" />
+      
+      <TelaDialogFooter>
+        <TelaButton type="button" variant="secondary" @click="isOpen = false">
+          Cancel
+        </TelaButton>
+        <TelaButton type="submit" variant="primary">
+          Add User
+        </TelaButton>
+      </TelaDialogFooter>
+    </form>
+  </TelaDialogContent>
+</TelaDialogRoot>
+```
+
+### With Close Button
+
+```vue
+<TelaDialogContent>
+  <TelaDialogClose class="absolute right-4 top-4">
+    <TelaIcon name="i-ph-x" />
+  </TelaDialogClose>
+  
+  <TelaDialogHeader>
+    <TelaDialogTitle>Dialog with Close</TelaDialogTitle>
+  </TelaDialogHeader>
+  
+  <div>Content...</div>
+</TelaDialogContent>
+```
+
+## Components
+
+The Dialog system consists of these sub-components:
+
+- `TelaDialogRoot` - Root dialog container
+- `TelaDialogTrigger` - Button that opens the dialog
+- `TelaDialogContent` - Main content container
+- `TelaDialogHeader` - Header section
+- `TelaDialogTitle` - Dialog title
+- `TelaDialogDescription` - Dialog description/subtitle
+- `TelaDialogFooter` - Footer for actions
+- `TelaDialogClose` - Close button
+- `TelaDialogOverlay` - Background overlay
+
+## Features
+
+- **Accessible**: Built on reka-ui with proper ARIA attributes
+- **Keyboard Navigation**: Escape to close, Tab to navigate
+- **Focus Management**: Focus trapped within dialog
+- **Overlay**: Click outside to close
+- **Customizable**: Full control over content and styling
+- **Composable**: Mix and match components as needed
+
+## Accessibility
+
+- Built on reka-ui primitives
+- Proper ARIA attributes (role="dialog", aria-labelledby, aria-describedby)
+- Focus trapped within dialog
+- Escape key to close
+- Focus returns to trigger on close
+- Screen reader support
+

package/components/tela/dialog/dialog.vue

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import {
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogOverlay,
+    DialogPortal,
+    DialogRoot,
+    DialogTitle,
+    VisuallyHidden,
+} from 'reka-ui'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<{
+    title?: string
+    modalWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'wide'
+    compact?: boolean
+    hideDividers?: boolean
+    hideHeader?: boolean
+    overlayClass?: string
+    fullscreen?: boolean
+}>(), {
+    modalWidth: 'md',
+})
+const emit = defineEmits<{
+    close: []
+}>()
+
+const open = defineModel<boolean>()
+
+watch(open, (value) => {
+    if (!value) {
+        emit('close')
+    }
+})
+
+const sizeClasses = {
+    xs: 'max-w-300px',
+    sm: 'max-w-400px',
+    md: 'max-w-500px',
+    lg: 'max-w-740px',
+    xl: 'max-w-900px',
+    wide: 'max-w-1200px',
+} as const
+
+const modalMaxWidth = computed(() => {
+    return sizeClasses[props.modalWidth] || sizeClasses.md
+})
+</script>
+
+<template>
+    <DialogRoot v-model:open="open">
+        <DialogPortal>
+            <DialogOverlay :class="`DialogOverlay ${overlayClass ?? ''}`" bg="bg-#020913/24" z-600 overflow-y-auto flex items-center justify-center :p-16px="!fullscreen">
+                <DialogContent
+                    :class="`DialogContent shadow-xl ${modalMaxWidth ?? ''}`"
+                    z-101
+                    rounded-16px
+                    w-full flex="~ col"
+                    min-w-100px
+                    bg-white
+                    v-bind="$attrs"
+                    overflow-y-hidden
+                >
+                    <div
+                        v-if="!hideHeader" w-full flex="~" items-center
+                        justify-between
+                        :b-b="!props.hideDividers && '0.5px gray-200'"
+                        :p="props.compact ? 'y-14px x-24px' : 'y-24px x-32px'"
+                    >
+                        <DialogTitle
+                            v-if="title"
+                            w-full
+                            heading-20-medium
+                            :content="props.compact ? '16px gray-900' : '20px gray-900'"
+                            capitalize
+                        >
+                            <slot name="header">
+                                <div flex="~" items-center justify-between h-32px>
+                                    <slot name="header-leading" />
+                                    <p :class="$slots['header-leading'] && 'absolute left-1/2 -translate-x-1/2'">
+                                        {{ title }}
+                                    </p>
+                                </div>
+                            </slot>
+                        </DialogTitle>
+
+                        <VisuallyHidden v-else>
+                            <DialogTitle />
+                        </VisuallyHidden>
+
+                        <div w-32px />
+                        <VisuallyHidden as-child>
+                            <DialogDescription />
+                        </VisuallyHidden>
+
+                        <div z-1 :right="props.compact ? '12px' : '24px'">
+                            <slot name="actions">
+                                <DialogClose as-child>
+                                    <TelaIconButton
+                                        icon="i-ph-x" size="sm" color="secondary" outline-none
+                                        :class="props.compact ? 'p-12px' : 'p-16px'"
+                                    />
+                                </DialogClose>
+                            </slot>
+                        </div>
+                    </div>
+
+                    <VisuallyHidden v-else>
+                        <DialogTitle />
+                    </VisuallyHidden>
+
+                    <slot name="content">
+                        <div
+                            flex w-full items-center justify-center relative h-full
+                            :class="[
+                                props.compact ? 'pb-24px' : 'px-32px py-24px',
+                            ]"
+                        >
+                            <slot />
+                        </div>
+                    </slot>
+
+                    <div
+                        v-if="$slots.footer" mt-24px :b-t="!props.hideDividers && '0.5px gray-200'"
+                        py-24px flex px-32px
+                    >
+                        <slot name="footer" />
+                    </div>
+                </DialogContent>
+            </DialogOverlay>
+        </DialogPortal>
+    </DialogRoot>
+</template>
+
+<style lang="css" scoped>
+.DialogOverlay {
+  background-color: rgba(2, 9, 19, 0.24);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.DialogContent {
+  width: 100%;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.DialogContent:focus {
+  outline: none;
+}
+
+.DialogDescription {
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+</style>

package/components/tela/disabled-area.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineProps<{
+    disabled?: boolean
+}>()
+</script>
+
+<template>
+    <div
+        :class="[
+            disabled ? '!op-45 !pointer-events-none cursor-not-allowed select-none' : '',
+        ]"
+        transition ease-in-out
+    >
+        <slot />
+    </div>
+</template>