@meistrari/tela-build 1.60.0 → 1.62.0

package/components/tela/button/button-variants.ts

@@ -0,0 +1,22 @@
+import { cva } from 'class-variance-authority'
+import type { VariantProps } from 'class-variance-authority'
+
+export const buttonVariants = cva('', {
+    variants: {
+        variant: {
+            'primary': 'bg-btn-primary text-inverse hover:bg-btn-primary-hover active:bg-btn-primary-active focus-visible:ring-0.5px focus-visible:ring-cyan-600',
+            'secondary': 'bg-btn-secondary text-contrast border border-[0.5px] [box-shadow:0_1px_6px_0_rgba(103,127,148,0.05)] hover:bg-btn-secondary-hover hover:border-strong active:bg-btn-secondary-active active:border-neutral-400/60 focus-visible:ring-0.5px focus-visible:ring-cyan-600',
+            'ghost': 'bg-btn-ghost text-contrast hover:bg-btn-ghost-hover focus-visible:ring-0.5px focus-visible:ring-cyan-600',
+            'disabled': 'bg-btn-disabled text-tertiary !cursor-not-allowed',
+            'loading': 'bg-btn-loading text-neutral-600',
+            'danger': 'bg-btn-danger text-red-500 hover:bg-btn-danger-hover focus:outline-red-600',
+            'ghost-danger': 'bg-transparent border-[0.5px] border-transparent text-red-600 hover:bg-btn-danger-hover hover:text-red-700 focus:outline-red-600 focus:bg-btn-danger-hover',
+            'dark': 'bg-btn-dark text-white border-[0.5px] border-white/16 hover:bg-btn-dark-hover active:bg-btn-dark-active focus-visible:ring-0.5px focus-visible:ring-cyan-600',
+        },
+    },
+    defaultVariants: {
+        variant: 'primary',
+    },
+})
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>

package/components/tela/button/button.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { NuxtLink } from '#components'
+import { buttonVariants } from './button-variants'
 
 export type ButtonSize = 'sm' | 'md' | 'lg'
-export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'success' | 'danger' | 'ghost-danger' | 'dark'
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'ghost-danger' | 'dark'
 
 export type ButtonProps = {
     size?: ButtonSize
@@ -18,12 +19,15 @@ export type ButtonProps = {
 const props = defineProps<ButtonProps>()
 
 const resolvedSize = computed(() => props.size || 'md')
-const resolvedVariant = computed(() =>
-    (props.disabled && 'disabled')
-    || (props.loading && 'loading')
-    || props.variant
-    || 'primary',
-)
+const resolvedVariant = computed<ButtonVariant | 'disabled' | 'loading'>(() => {
+    if (props.disabled)
+        return 'disabled'
+
+    if (props.loading)
+        return 'loading'
+
+    return props.variant || 'primary'
+})
 
 const slots = useSlots()
 
@@ -41,48 +45,6 @@ const paddingStyle = computed(() => [
     hasTrailingIcon.value ? 'pr-[calc(var(--padding-x)_-_2px)]' : 'pr-[var(--padding-x)]',
 ].join(' '))
 
-const variantStyle = computed(() => (({
-    'primary': fold`
-        bg-btn-primary text-inverse
-        hover:bg-btn-primary-hover
-        active:bg-btn-primary-active
-        focus-visible:ring-0.5px focus-visible:ring-cyan-600
-    `,
-    'secondary': fold`
-        bg-btn-secondary text-contrast border border-[0.5px]
-      [box-shadow:0_1px_6px_0_rgba(103,127,148,0.05)]
-        hover:bg-btn-secondary-hover hover:border-strong
-        active:bg-btn-secondary-active active:border-neutral-400/60
-        focus-visible:ring-0.5px focus-visible:ring-cyan-600
-    `,
-    'ghost': fold`
-        bg-btn-ghost text-contrast
-        hover:bg-btn-ghost-hover
-        focus-visible:ring-0.5px focus-visible:ring-cyan-600
-    `,
-    'disabled': fold`
-        bg-btn-disabled text-tertiary !cursor-not-allowed
-    `,
-    'loading': fold`
-        bg-btn-loading text-neutral-600
-    `,
-    'danger': fold`
-        bg-btn-danger text-red-500
-        hover:bg-btn-danger-hover
-        focus:outline-red-600
-    `,
-    'ghost-danger': fold`
-        bg-transparent border-[0.5px] border-transparent text-red-600
-        hover:bg-red-50 hover:text-red-700
-        focus:outline-red-600
-    `,
-    'dark': fold`
-        bg-btn-dark text-white border-[0.5px] border-white/16
-        hover:bg-btn-dark-hover active:bg-btn-dark-active
-        focus-visible:ring-0.5px focus-visible:ring-cyan-600
-    `,
-}) as Record<ButtonVariant | 'disabled' | 'loading', string>)[resolvedVariant.value] ?? '')
-
 const iconColorStyle = computed(() => (({
     'primary': 'icon-inverse',
     'secondary': 'icon-secondary',
@@ -97,7 +59,7 @@ const iconColorStyle = computed(() => (({
 const resolvedStyle = computed(() => [
     sizeStyle.value,
     paddingStyle.value,
-    variantStyle.value,
+    buttonVariants({ variant: resolvedVariant.value }),
 ].join(' '))
 
 const tag = computed(() => props.to ? NuxtLink : 'button')

package/components/tela/confirm-button/confirm-button.vue

@@ -27,11 +27,9 @@ const emit = defineEmits<{
 const state = ref<ButtonState>('normal')
 const timeoutId = ref<ReturnType<typeof setTimeout>>()
 
-const buttonProps = computed(() => ({
+const buttonProps = computed<TelaButtonProps>(() => ({
     size: props.size,
-    variant: (state.value === 'success' && 'success')
-        || (state.value === 'error' && 'danger')
-        || props.variant,
+    variant: state.value === 'error' ? 'danger' : props.variant,
     icon: props.icon,
     loading: state.value === 'loading',
     leading: props.leading,

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

@@ -25,12 +25,14 @@ import {
 import type { DateRange } from 'radix-vue'
 import { computed } from 'vue'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
     label?: string
     disableClear?: boolean
     open?: boolean
     hasClear?: boolean
-}>()
+}>(), {
+    open: undefined,
+})
 
 const emit = defineEmits<{
     (e: 'update:model-value', value: DateRange): void

package/components/tela/range-calendar/range-calendar-cell-trigger.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import type { RangeCalendarCellTriggerProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { RangeCalendarCellTrigger, useForwardProps } from 'reka-ui'
+
+import { buttonVariants } from '../button/button-variants'
+
+const props = withDefaults(defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>(), {
+    as: 'button',
+})
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <RangeCalendarCellTrigger
+        data-slot="range-calendar-cell-trigger"
+        :class="cn(
+            buttonVariants({ variant: 'ghost' }),
+            'size-[32px] rounded-[8px] p-0 body-14-medium data-[selected]:opacity-100',
+            '[&[data-today]:not([data-selected])]:bg-neutral-900 [&[data-today]:not([data-selected])]:text-white',
+            // Selection Start
+            'data-[selection-start]:bg-neutral-900 data-[selection-start]:text-white [&[data-selection-start]:hover]:bg-neutral-900 data-[selection-start]:hover:text-white data-[selection-start]:focus:bg-neutral-900 data-[selection-start]:focus:text-white',
+            // Selection End
+            'data-[selection-end]:bg-neutral-800 data-[selection-end]:text-white [&[data-selection-end]:hover]:bg-neutral-900 data-[selection-end]:hover:text-white data-[selection-end]:focus:bg-neutral-900 data-[selection-end]:focus:text-white',
+            // Outside months
+            'data-[outside-view]:invisible',
+            // Disabled
+            'data-[disabled]:text-tertiary data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-transparent',
+            // Unavailable
+            'data-[unavailable]:text-subtle data-[unavailable]:line-through data-[unavailable]:hover:bg-transparent',
+            props.class,
+        )"
+        v-bind="forwardedProps"
+    >
+        <slot />
+    </RangeCalendarCellTrigger>
+</template>

package/components/tela/range-calendar/range-calendar-cell.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import type { RangeCalendarCellProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { RangeCalendarCell, useForwardProps } from 'reka-ui'
+
+const props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <RangeCalendarCell
+        data-slot="range-calendar-cell"
+        :class="cn(
+            'relative p-0 text-center body-12-semibold focus-within:relative rounded-[8px] focus-within:z-20',
+            '[&:has([data-selected]):not(:has([data-outside-view]))]:bg-muted',
+            props.class,
+        )"
+        v-bind="forwardedProps"
+    >
+        <slot />
+    </RangeCalendarCell>
+</template>

package/components/tela/range-calendar/range-calendar-grid-body.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { RangeCalendarGridBodyProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { RangeCalendarGridBody } from 'reka-ui'
+
+const props = defineProps<RangeCalendarGridBodyProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+    <RangeCalendarGridBody
+        data-slot="range-calendar-grid-body"
+        :class="cn(props.class)"
+        v-bind="delegatedProps"
+    >
+        <slot />
+    </RangeCalendarGridBody>
+</template>

package/components/tela/range-calendar/range-calendar-grid-head.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { RangeCalendarGridHeadProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { RangeCalendarGridHead } from 'reka-ui'
+
+const props = defineProps<RangeCalendarGridHeadProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+    <RangeCalendarGridHead
+        data-slot="range-calendar-grid-head"
+        :class="cn(props.class)"
+        v-bind="delegatedProps"
+    >
+        <slot />
+    </RangeCalendarGridHead>
+</template>

package/components/tela/range-calendar/range-calendar-grid-row.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { RangeCalendarGridRowProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { RangeCalendarGridRow } from 'reka-ui'
+
+const props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+    <RangeCalendarGridRow
+        data-slot="range-calendar-grid-row"
+        :class="cn('flex gap-[2px] mt-[2px]', props.class)"
+        v-bind="delegatedProps"
+    >
+        <slot />
+    </RangeCalendarGridRow>
+</template>

package/components/tela/range-calendar/range-calendar-grid.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { RangeCalendarGridProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { RangeCalendarGrid, useForwardProps } from 'reka-ui'
+
+const props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <RangeCalendarGrid
+        data-slot="range-calendar-grid"
+        :class="cn('w-full border-collapse select-none', props.class)"
+        v-bind="forwardedProps"
+    >
+        <slot />
+    </RangeCalendarGrid>
+</template>

package/components/tela/range-calendar/range-calendar-head-cell.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { RangeCalendarHeadCellProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { RangeCalendarHeadCell } from 'reka-ui'
+
+const props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+    <RangeCalendarHeadCell
+        data-slot="range-calendar-head-cell"
+        :class="cn('w-[32px] rounded-[6px] body-12-semibold text-tertiary', props.class)"
+        v-bind="delegatedProps"
+    >
+        <slot />
+    </RangeCalendarHeadCell>
+</template>

package/components/tela/range-calendar/range-calendar-header.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { RangeCalendarHeaderProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { RangeCalendarHeader } from 'reka-ui'
+
+const props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+    <RangeCalendarHeader
+        data-slot="range-calendar-header"
+        :class="cn('flex items-center justify-between', props.class)"
+        v-bind="delegatedProps"
+    >
+        <slot />
+    </RangeCalendarHeader>
+</template>

package/components/tela/range-calendar/range-calendar-heading.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { RangeCalendarHeadingProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { RangeCalendarHeading, useForwardProps } from 'reka-ui'
+
+const props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <RangeCalendarHeading
+        data-slot="range-calendar-heading"
+        :class="cn('body-14-semibold text-primary', props.class)"
+        v-bind="forwardedProps"
+    >
+        <slot />
+    </RangeCalendarHeading>
+</template>

package/components/tela/range-calendar/range-calendar-next-button.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import type { RangeCalendarNextProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { RangeCalendarNext, useForwardProps } from 'reka-ui'
+import { buttonVariants } from '../button/button-variants'
+
+const props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <RangeCalendarNext
+        data-slot="range-calendar-next-button"
+        :class="cn(
+            buttonVariants({ variant: 'secondary' }),
+            'flex shrink-0 items-center justify-center cursor-pointer rounded-9px size-[32px] transition-all active:scale-98',
+            'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-transparent',
+            props.class,
+        )"
+        v-bind="forwardedProps"
+    >
+        <slot>
+            <TelaIcon name="i-ph-caret-right" color="icon-secondary" size="18px" />
+        </slot>
+    </RangeCalendarNext>
+</template>

package/components/tela/range-calendar/range-calendar-prev-button.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import type { RangeCalendarPrevProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { RangeCalendarPrev, useForwardProps } from 'reka-ui'
+import { buttonVariants } from '../button/button-variants'
+
+const props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <RangeCalendarPrev
+        data-slot="range-calendar-prev-button"
+        :class="cn(
+            buttonVariants({ variant: 'secondary' }),
+            'flex shrink-0 items-center justify-center cursor-pointer rounded-9px size-[32px] transition-all active:scale-98',
+            'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-transparent',
+            props.class,
+        )"
+        v-bind="forwardedProps"
+    >
+        <slot>
+            <TelaIcon name="i-ph-caret-left" color="icon-secondary" size="18px" />
+        </slot>
+    </RangeCalendarPrev>
+</template>

package/components/tela/range-calendar/range-calendar-time-field.vue

@@ -0,0 +1,224 @@
+<script lang="ts" setup>
+import { Time } from '@internationalized/date'
+import type { HTMLAttributes } from 'vue'
+import { TimeFieldInput, TimeFieldRoot } from 'reka-ui'
+
+const props = defineProps<{
+    startTime?: Time
+    endTime?: Time
+    disabled?: boolean
+    locale?: string
+    class?: HTMLAttributes['class']
+}>()
+
+const emits = defineEmits<{
+    'update:startTime': [value: Time]
+    'update:endTime': [value: Time]
+}>()
+
+function handleUpdate(part: 'startTime' | 'endTime', value?: { hour: number, minute: number }) {
+    if (!value)
+        return
+
+    const time = new Time(value.hour, value.minute)
+
+    if (part === 'startTime')
+        emits('update:startTime', time)
+    else
+        emits('update:endTime', time)
+}
+
+const startFieldRef = ref<InstanceType<typeof TimeFieldRoot>>()
+const endFieldRef = ref<InstanceType<typeof TimeFieldRoot>>()
+
+function editableSegments(field?: HTMLElement) {
+    if (!field)
+        return []
+
+    return Array.from(field.querySelectorAll<HTMLElement>('[data-reka-time-field-segment]:not([data-reka-time-field-segment="literal"])'))
+}
+
+const minutePrev = ref<number | null>(null)
+const minuteLeftFocus = ref(true)
+const minuteLastKeyZero = ref(false)
+
+function focusEndField() {
+    nextTick(() => {
+        editableSegments(endFieldRef.value?.$el).at(0)?.focus()
+    })
+}
+
+function focusStartFieldLastSegment() {
+    nextTick(() => {
+        editableSegments(startFieldRef.value?.$el).at(-1)?.focus()
+    })
+}
+
+function isLastEditableSegment(target: HTMLElement, field: HTMLElement) {
+    const segments = editableSegments(field)
+    return segments.length > 0 && segments[segments.length - 1] === target
+}
+
+function isFirstEditableSegment(target: HTMLElement, field: HTMLElement) {
+    return editableSegments(field)[0] === target
+}
+
+function handleEndKeydown(event: KeyboardEvent) {
+    if (event.key !== 'ArrowLeft')
+        return
+
+    const target = event.target as HTMLElement
+
+    if (isFirstEditableSegment(target, event.currentTarget as HTMLElement))
+        focusStartFieldLastSegment()
+}
+
+function handleStartFocusout(event: FocusEvent) {
+    const target = event.target as HTMLElement
+    if (target.dataset?.rekaTimeFieldSegment === 'minute')
+        minuteLeftFocus.value = true
+}
+
+function handleStartKeydown(event: KeyboardEvent) {
+    const target = event.target as HTMLElement
+    const segment = target.dataset?.rekaTimeFieldSegment
+
+    if (!isLastEditableSegment(target, event.currentTarget as HTMLElement))
+        return
+
+    if (event.key === 'ArrowRight') {
+        focusEndField()
+        return
+    }
+
+    if (segment === 'dayPeriod') {
+        if (['a', 'p'].includes(event.key.toLowerCase()))
+            focusEndField()
+        return
+    }
+
+    if (segment !== 'minute')
+        return
+
+    if (event.key === 'Backspace') {
+        minuteLeftFocus.value = false
+        minutePrev.value = minutePrev.value !== null && minutePrev.value >= 10
+            ? Math.floor(minutePrev.value / 10)
+            : null
+        return
+    }
+
+    if (!/^\d$/.test(event.key))
+        return
+
+    const num = Number(event.key)
+
+    if (minuteLeftFocus.value) {
+        minuteLeftFocus.value = false
+        minutePrev.value = null
+    }
+
+    if (minutePrev.value === null) {
+        if (num === 0) {
+            minuteLastKeyZero.value = true
+            minutePrev.value = 0
+            return
+        }
+
+        const moveToNext = minuteLastKeyZero.value || num > 5
+        minuteLastKeyZero.value = false
+        minutePrev.value = num
+
+        if (moveToNext)
+            focusEndField()
+        return
+    }
+
+    const digits = minutePrev.value.toString().length
+    const total = Number.parseInt(`${minutePrev.value}${num}`)
+
+    if (digits === 2 || total > 59) {
+        minutePrev.value = num
+
+        if (num > 5)
+            focusEndField()
+        return
+    }
+
+    minutePrev.value = total
+    focusEndField()
+}
+</script>
+
+<template>
+    <div
+        data-slot="range-calendar-time-field"
+        :class="cn(
+            'grid grid-cols-[1fr_auto_1fr] h-32px select-none items-center rounded-[8px] border-0.5px border bg px-8px body-14-medium',
+            'focus-within:border-strong focus-within:bg-subtle',
+            props.disabled && 'opacity-50 cursor-not-allowed',
+            props.class,
+        )"
+    >
+        <TimeFieldRoot
+            ref="startFieldRef"
+            v-slot="{ segments }"
+            :model-value="props.startTime"
+            :disabled="props.disabled"
+            :locale="props.locale"
+            granularity="minute"
+            class="flex items-center gap-1px justify-self-start"
+            @update:model-value="handleUpdate('startTime', $event)"
+            @keydown="handleStartKeydown"
+            @focusout="handleStartFocusout"
+        >
+            <template v-for="(segment, index) in segments" :key="`start-${segment.part}-${index}`">
+                <TimeFieldInput
+                    v-if="segment.part === 'literal'"
+                    :part="segment.part"
+                    class="text-tertiary"
+                >
+                    {{ segment.value }}
+                </TimeFieldInput>
+                <TimeFieldInput
+                    v-else
+                    :part="segment.part"
+                    class="rounded-4px px-2px tabular-nums outline-none focus:bg-lowered data-[placeholder]:text-tertiary"
+                >
+                    {{ segment.value }}
+                </TimeFieldInput>
+            </template>
+        </TimeFieldRoot>
+
+        <span class="text-primary pointer-events-none">–</span>
+
+        <TimeFieldRoot
+            ref="endFieldRef"
+            v-slot="{ segments }"
+            :model-value="props.endTime"
+            :disabled="props.disabled"
+            :locale="props.locale"
+            granularity="minute"
+            class="flex items-center gap-1px justify-self-end"
+            @update:model-value="handleUpdate('endTime', $event)"
+            @keydown="handleEndKeydown"
+        >
+            <template v-for="(segment, index) in segments" :key="`end-${segment.part}-${index}`">
+                <TimeFieldInput
+                    v-if="segment.part === 'literal'"
+                    :part="segment.part"
+                    class="text-tertiary"
+                >
+                    {{ segment.value }}
+                </TimeFieldInput>
+                <TimeFieldInput
+                    v-else
+                    :part="segment.part"
+                    class="rounded-4px px-2px tabular-nums outline-none focus:bg-lowered data-[placeholder]:text-tertiary"
+                >
+                    {{ segment.value }}
+                </TimeFieldInput>
+            </template>
+        </TimeFieldRoot>
+    </div>
+</template>

package/components/tela/range-calendar/range-calendar.mdx

@@ -0,0 +1,155 @@
+# TelaRangeCalendar
+
+A two-handle calendar for picking a start and end date, with an optional time row for narrowing the range down to the minute. Built on `reka-ui`'s `RangeCalendarRoot` primitives and `@internationalized/date`, so values are `DateValue` objects — not JavaScript `Date` — and stay calendar- and timezone-correct.
+
+The header is not a static month label: it renders month and year as two `TelaSelectMenu` triggers, so jumping to a distant month takes one click instead of paging. The year list spans the placeholder year ±10.
+
+## Examples
+
+### Basic Usage
+
+`modelValue` is a `DateRange` — `{ start, end }`, both `DateValue`. Clicking once sets `start`, clicking again sets `end`; the days in between render as the highlighted span.
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const range = ref()
+</script>
+
+<template>
+  <TelaRangeCalendar v-model="range" />
+</template>
+```
+
+### Preselected Range
+
+Pass an initial `DateRange` built from `@internationalized/date` helpers. `today(getLocalTimeZone())` returns a `CalendarDate`, and `.add()` returns a new one — these values are immutable.
+
+```vue
+<script setup>
+import { getLocalTimeZone, today } from '@internationalized/date'
+import { ref } from 'vue'
+
+const start = today(getLocalTimeZone())
+const range = ref({ start, end: start.add({ days: 6 }) })
+</script>
+
+<template>
+  <TelaRangeCalendar v-model="range" />
+</template>
+```
+
+### With Time
+
+`with-time` appends a single time-range field below the grid — start and end time in one input, separated by a dash. The times are merged into the emitted range, so `start` and `end` come back as `CalendarDateTime` instead of `CalendarDate`. Editing a time re-emits the range immediately — no need to reselect the days.
+
+Times default to `00:00` and `23:59`, so an untouched selection covers the full span of both days.
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const range = ref()
+</script>
+
+<template>
+  <div class="flex flex-col gap-12px">
+    <TelaRangeCalendar v-model="range" with-time />
+    <pre class="body-12-medium text-secondary">{{ range ?? 'No range selected' }}</pre>
+  </div>
+</template>
+```
+
+### Multiple Months
+
+`number-of-months` renders more than one grid at a time — useful when ranges routinely cross a month boundary and paging back and forth hides one end of the selection. The grids stack vertically.
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const range = ref()
+</script>
+
+<template>
+  <TelaRangeCalendar v-model="range" :number-of-months="2" />
+</template>
+```
+
+### Bounds and Unavailable Dates
+
+`min-value` and `max-value` clamp what can be reached at all; `is-date-unavailable` rejects individual dates inside that window. Unavailable days render struck through in the destructive color, disabled days at reduced opacity.
+
+```vue
+<script setup>
+import { getLocalTimeZone, isWeekend, today } from '@internationalized/date'
+import { ref } from 'vue'
+
+const now = today(getLocalTimeZone())
+const range = ref()
+
+function isDateUnavailable(date) {
+  return isWeekend(date, 'en-US')
+}
+</script>
+
+<template>
+  <TelaRangeCalendar
+    v-model="range"
+    :min-value="now"
+    :max-value="now.add({ months: 2 })"
+    :is-date-unavailable="isDateUnavailable"
+  />
+</template>
+```
+
+### Locale
+
+`locale` drives weekday names, the first day of the week, the month options in the header, and the segment order of the time fields (`HH:mm` vs. `h:mm AM/PM`).
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const range = ref()
+</script>
+
+<template>
+  <TelaRangeCalendar v-model="range" locale="pt-BR" with-time />
+</template>
+```
+
+### Disabled
+
+`disabled` freezes the whole calendar — grid, navigation, and the time fields, which drop to 50% opacity and stop accepting keystrokes.
+
+```vue
+<script setup>
+import { getLocalTimeZone, today } from '@internationalized/date'
+import { ref } from 'vue'
+
+const start = today(getLocalTimeZone())
+const range = ref({ start, end: start.add({ days: 4 }) })
+</script>
+
+<template>
+  <TelaRangeCalendar v-model="range" disabled with-time />
+</template>
+```
+
+## Rules
+
+**`with-time` needs a bound `v-model`.** Time edits are applied to the *current* `modelValue` — with an uncontrolled calendar (`default-value` only) there is nothing to merge into, so changing a time silently does nothing to the value you read back. Bind `v-model` whenever `with-time` is set.
+
+**Values are `DateValue`, not `Date`.** Build them with `@internationalized/date` and convert only at the boundary where you actually need a JS date:
+
+```vue
+const jsDate = range.value.start.toDate(getLocalTimeZone())
+```
+
+**Don't wrap it in another card.** The calendar already ships its own surface — `bg`, a `0.5px` border, and a `12px` radius. Nesting it inside a `TelaCard` or a bordered `div` produces a double frame.
+
+**Anchor it in a popover, don't restyle it into one.** For a compact trigger-plus-calendar control, put `TelaRangeCalendar` inside a `TelaPopover` rather than overriding its padding and border to look like a dropdown.
+
+**Days outside the visible month are hidden, not dimmed.** Leading and trailing cells render as `invisible` placeholders, so the grid keeps its shape but only in-month days are clickable. Don't add your own outside-day styling — it will never be seen.

package/components/tela/range-calendar/range-calendar.vue

@@ -0,0 +1,188 @@
+<script lang="ts" setup>
+import type { DateValue } from '@internationalized/date'
+import type { DateRange, RangeCalendarRootEmits, RangeCalendarRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { getLocalTimeZone, Time, toCalendarDateTime, today } from '@internationalized/date'
+import { reactiveOmit } from '@vueuse/core'
+import { RangeCalendarRoot, useForwardProps } from 'reka-ui'
+
+const props = defineProps<RangeCalendarRootProps & {
+    class?: HTMLAttributes['class']
+    withTime?: boolean
+}>()
+
+const emits = defineEmits<RangeCalendarRootEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class', 'withTime')
+
+const forwarded = useForwardProps(delegatedProps)
+
+const placeholder = shallowRef<DateValue>(
+    props.placeholder
+    ?? props.defaultPlaceholder
+    ?? props.defaultValue?.start
+    ?? props.modelValue?.start
+    ?? today(getLocalTimeZone()),
+)
+
+function setPlaceholder(value: DateValue) {
+    placeholder.value = value
+    emits('update:placeholder', value)
+}
+
+const monthOptions = computed(() =>
+    Array.from({ length: 12 }, (_, index) => ({
+        value: String(index + 1),
+        label: new Intl.DateTimeFormat(props.locale, { month: 'long' }).format(new Date(2000, index, 1)).slice(0, 3),
+    })),
+)
+
+const yearOptions = computed(() =>
+    Array.from({ length: 21 }, (_, index) => {
+        const year = placeholder.value.year - 10 + index
+        return { value: String(year), label: String(year) }
+    }),
+)
+
+const selectedMonth = computed({
+    get: () => String(placeholder.value.month),
+    set: value => setPlaceholder(placeholder.value.set({ month: Number(value) })),
+})
+
+const selectedYear = computed({
+    get: () => String(placeholder.value.year),
+    set: value => setPlaceholder(placeholder.value.set({ year: Number(value) })),
+})
+
+function timeFromDate(date?: DateValue | null) {
+    if (date && 'hour' in date)
+        return new Time(date.hour, date.minute)
+
+    return undefined
+}
+
+const initialRange = props.modelValue ?? props.defaultValue
+
+const startTime = shallowRef(timeFromDate(initialRange?.start) ?? new Time(0, 0))
+const endTime = shallowRef(timeFromDate(initialRange?.end) ?? new Time(23, 59))
+
+watch(() => props.modelValue, (value) => {
+    const start = timeFromDate(value?.start)
+    const end = timeFromDate(value?.end)
+
+    if (start)
+        startTime.value = start
+    if (end)
+        endTime.value = end
+})
+
+function applyTime(date: DateValue, time: Time): DateValue {
+    if ('hour' in date)
+        return date.set({ hour: time.hour, minute: time.minute })
+
+    return toCalendarDateTime(date, time)
+}
+
+function handleModelValueUpdate(value: DateRange) {
+    if (!props.withTime) {
+        emits('update:modelValue', value)
+        return
+    }
+
+    emits('update:modelValue', {
+        start: value.start ? applyTime(value.start, startTime.value) : value.start,
+        end: value.end ? applyTime(value.end, endTime.value) : value.end,
+    })
+}
+
+function setStartTime(time: Time) {
+    startTime.value = time
+
+    if (props.modelValue?.start)
+        emits('update:modelValue', { ...props.modelValue, start: applyTime(props.modelValue.start, time) })
+}
+
+function setEndTime(time: Time) {
+    endTime.value = time
+
+    if (props.modelValue?.end)
+        emits('update:modelValue', { ...props.modelValue, end: applyTime(props.modelValue.end, time) })
+}
+</script>
+
+<template>
+    <RangeCalendarRoot
+        v-slot="{ grid, weekDays }"
+        data-slot="range-calendar"
+        v-bind="forwarded"
+        :placeholder="placeholder"
+        :class="cn('bg p-8px rounded-12px border-0.5px border', props.class)"
+        @update:placeholder="setPlaceholder"
+        @update:model-value="handleModelValueUpdate"
+        @update:start-value="emits('update:startValue', $event)"
+    >
+        <TelaRangeCalendarHeader>
+            <TelaRangeCalendarPrevButton />
+
+            <div flex="~ gap-4px" flex-1 mx-4px>
+                <TelaSelectMenu
+                    v-model="selectedMonth"
+                    :options="monthOptions"
+                    class="min-w-0 flex-1"
+                    trigger-class="w-full"
+                />
+                <TelaSelectMenu
+                    v-model="selectedYear"
+                    :options="yearOptions"
+                    class="min-w-0 flex-[1.1]"
+                    trigger-class="w-full"
+                />
+            </div>
+
+            <TelaRangeCalendarNextButton />
+        </TelaRangeCalendarHeader>
+
+        <div flex="~ col" pt-6px>
+            <TelaRangeCalendarGrid v-for="month in grid" :key="month.value.toString()">
+                <TelaRangeCalendarGridHead>
+                    <TelaRangeCalendarGridRow>
+                        <TelaRangeCalendarHeadCell v-for="day in weekDays" :key="day">
+                            {{ day }}
+                        </TelaRangeCalendarHeadCell>
+                    </TelaRangeCalendarGridRow>
+                </TelaRangeCalendarGridHead>
+                <TelaRangeCalendarGridBody>
+                    <TelaRangeCalendarGridRow
+                        v-for="(weekDates, index) in month.rows"
+                        :key="`weekDate-${index}`"
+                    >
+                        <TelaRangeCalendarCell
+                            v-for="weekDate in weekDates"
+                            :key="weekDate.toString()"
+                            :date="weekDate"
+                        >
+                            <TelaRangeCalendarCellTrigger
+                                :day="weekDate"
+                                :month="month.value"
+                            />
+                        </TelaRangeCalendarCell>
+                    </TelaRangeCalendarGridRow>
+                </TelaRangeCalendarGridBody>
+            </TelaRangeCalendarGrid>
+        </div>
+
+        <template v-if="props.withTime">
+            <div aria-label="Divider" class="w-[calc(100%+16px)]" ml--8px h-0.5px bg-border mt-6px mb-8px />
+
+            <TelaRangeCalendarTimeField
+                :start-time="startTime"
+                :end-time="endTime"
+                :disabled="props.disabled"
+                :locale="props.locale"
+                class="mt-4px"
+                @update:start-time="setStartTime"
+                @update:end-time="setEndTime"
+            />
+        </template>
+    </RangeCalendarRoot>
+</template>

package/components/tela/select-menu/select-menu-trigger.vue

@@ -7,7 +7,7 @@ import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui'
 const props = withDefaults(
     defineProps<SelectTriggerProps & { triggerIconSize?: string, class?: HTMLAttributes['class'] }>(),
     {
-        triggerIconSize: '12px',
+        triggerIconSize: '14px',
     },
 )
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/tela-build",
-  "version": "1.60.0",
+  "version": "1.62.0",
   "type": "module",
   "files": [
     "app.config.ts",
@@ -62,7 +62,7 @@
     "ts-morph": "22.0.0",
     "typescript": "5.8.2",
     "unocss": "66.5.12",
-    "vue": "3.5.13",
+    "vue": "3.5.17",
     "vue-component-meta": "3.0.8",
     "vue-docgen-api": "4.78.0",
     "vue-input-otp": "0.3.2",

package/components/tela/range-calendar.vue

@@ -1,119 +0,0 @@
-<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'
-import type { DateValue } from '@internationalized/date'
-
-defineProps<{
-    maxValue?: DateValue
-    isDateUnavailable?: (date: DateValue) => boolean
-}>()
-</script>
-
-<template>
-    <RangeCalendarRoot
-        v-slot="{ weekDays, grid }"
-        bg-white
-        rounded-xl
-        p-4
-        shadow-xl
-        fixed-weeks
-        :max-value="maxValue"
-        :is-date-unavailable="isDateUnavailable"
-    >
-        <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
-                transition-all
-                class="active:scale-98 focus:shadow-[0_0_0_2px] focus:shadow-black data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-transparent"
-            >
-                <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
-                transition-all
-                class="active:scale-98 focus:shadow-[0_0_0_2px] focus:shadow-black data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-transparent"
-            >
-                <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-gray-400! data-[unavailable]:bg-gray-50! data-[unavailable]:opacity-50 data-[unavailable]:cursor-not-allowed 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]:underline data-[today]:underline-offset-4"
-                            />
-                        </RangeCalendarCell>
-                    </RangeCalendarGridRow>
-                </RangeCalendarGridBody>
-            </RangeCalendarGrid>
-        </div>
-    </RangeCalendarRoot>
-</template>