reka-ui 2.7.0 → 2.8.2

package/src/Rating/RatingRoot.vue

@@ -0,0 +1,113 @@
+<script lang="ts">
+import type { RadioGroupRootProps } from '@/RadioGroup'
+import { reactiveOmit, useVModel } from '@vueuse/core'
+import { RadioGroupRoot } from '@/RadioGroup'
+import { createContext, useForwardExpose } from '@/shared'
+
+export interface RatingRootContext {
+  modelValue: Ref<number>
+  items: ComputedRef<number[]>
+  hoveredRating: Ref<number>
+  disabled: Ref<boolean>
+  step: Ref<number>
+  changeModelValue: (rating: number) => void
+  changeHoveredRating: (rating: number) => void
+}
+
+export interface RatingRootProps extends Omit<RadioGroupRootProps, 'modelValue' | 'defaultValue'> {
+  /**
+   * The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs
+   */
+  defaultValue?: number
+  /** The controlled value of the tab to activate. Can be bind as `v-model`. */
+  modelValue?: number
+  length?: number
+  clearable?: boolean
+  hoverable?: boolean
+  step?: 1 | 0.5 | 0.25 | 0.1
+
+}
+export type RatingRootEmits = {
+  /** Event handler called when the value changes */
+  'update:modelValue': [payload: number]
+}
+
+export const [injectRatingRootContext, provideRatingRootContext]
+  = createContext<RatingRootContext>('RatingRoot')
+</script>
+
+<script setup lang="ts">
+import type { ComputedRef, Ref } from 'vue'
+import { computed, ref, toRefs } from 'vue'
+
+const props = withDefaults(defineProps<RatingRootProps>(), {
+  orientation: 'horizontal',
+  length: 5,
+  step: 1,
+})
+const emits = defineEmits<RatingRootEmits>()
+
+defineSlots<{
+  default?: (props: {
+    modelValue: number | undefined
+    items: number[]
+  }) => any
+}>()
+
+const { length, disabled, clearable, hoverable, step } = toRefs(props)
+
+useForwardExpose()
+
+const modelValue = useVModel<RatingRootProps, 'modelValue', 'update:modelValue'>(props, 'modelValue', emits, {
+  defaultValue: props.defaultValue,
+  passive: (props.modelValue === undefined) as false,
+}) as Ref<number>
+
+const items = computed(() => {
+  return Array.from({ length: length.value }, (_, i) => i + 1)
+})
+
+const hoveredRating = ref<number>(0)
+
+function changeModelValue(rating: number) {
+  if (disabled.value)
+    return
+
+  if (clearable.value && modelValue.value === rating) {
+    hoveredRating.value = 0
+    modelValue.value = 0
+  }
+  else {
+    modelValue.value = rating
+  }
+}
+
+function changeHoveredRating(rating: number) {
+  if (disabled.value || !hoverable.value)
+    return
+
+  hoveredRating.value = rating
+}
+
+provideRatingRootContext({
+  modelValue,
+  items,
+  hoveredRating,
+  disabled,
+  step,
+  changeModelValue,
+  changeHoveredRating,
+})
+</script>
+
+<template>
+  <RadioGroupRoot
+    v-bind="reactiveOmit(props, 'length', 'clearable', 'hoverable', 'step')"
+    :disabled="disabled"
+  >
+    <slot
+      :items="items"
+      :model-value="modelValue"
+    />
+  </RadioGroupRoot>
+</template>

package/src/Rating/index.ts

@@ -0,0 +1,3 @@
+export { default as RatingItem, type RatingItemProps } from './RatingItem.vue'
+export { default as RatingItemIndicator } from './RatingItemIndicator.vue'
+export { default as RatingRoot, type RatingRootProps } from './RatingRoot.vue'

package/src/ScrollArea/ScrollAreaRoot.vue

@@ -35,7 +35,8 @@ export interface ScrollAreaRootProps extends PrimitiveProps {
    * `auto` - means that scrollbars are visible when content is overflowing on the corresponding orientation. <br>
    * `always` - means that scrollbars are always visible regardless of whether the content is overflowing.<br>
    * `scroll` - means that scrollbars are visible when the user is scrolling along its corresponding orientation.<br>
-   * `hover` - when the user is scrolling along its corresponding orientation and when the user is hovering over the scroll area.
+   * `hover` - when the user is scrolling along its corresponding orientation and when the user is hovering over the scroll area.<br>
+   * `glimpse` - a hybrid approach that briefly shows scrollbars when the user enters the scroll area, then hides them until further interaction.
    */
   type?: ScrollType
   /** The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */

package/src/ScrollArea/ScrollAreaScrollbar.vue

@@ -34,6 +34,7 @@ import {
 } from 'vue'
 import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import ScrollAreaScrollbarAuto from './ScrollAreaScrollbarAuto.vue'
+import ScrollAreaScrollbarGlimpse from './ScrollAreaScrollbarGlimpse.vue'
 import ScrollAreaScrollbarHover from './ScrollAreaScrollbarHover.vue'
 import ScrollAreaScrollbarScroll from './ScrollAreaScrollbarScroll.vue'
 import ScrollAreaScrollbarVisible from './ScrollAreaScrollbarVisible.vue'
@@ -94,6 +95,14 @@ provideScrollAreaScrollbarContext({
   >
     <slot />
   </ScrollAreaScrollbarScroll>
+  <ScrollAreaScrollbarGlimpse
+    v-else-if="rootContext.type.value === 'glimpse'"
+    v-bind="$attrs"
+    :ref="forwardRef"
+    :force-mount="forceMount"
+  >
+    <slot />
+  </ScrollAreaScrollbarGlimpse>
   <ScrollAreaScrollbarAuto
     v-else-if="rootContext.type.value === 'auto'"
     v-bind="$attrs"

package/src/ScrollArea/ScrollAreaScrollbarGlimpse.vue

@@ -0,0 +1,145 @@
+<script lang="ts">
+import type { ScrollAreaScrollbarAutoProps } from './ScrollAreaScrollbarAuto.vue'
+
+export interface ScrollAreaScrollbarGlimpseProps extends ScrollAreaScrollbarAutoProps {}
+</script>
+
+<script setup lang="ts">
+import { useDebounceFn } from '@vueuse/core'
+import { computed, onMounted, onUnmounted, watchEffect } from 'vue'
+import { Presence } from '@/Presence'
+import { useForwardExpose } from '@/shared'
+import { useStateMachine } from '../shared/useStateMachine'
+import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
+import { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'
+import ScrollAreaScrollbarAuto from './ScrollAreaScrollbarAuto.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps<ScrollAreaScrollbarGlimpseProps>()
+
+const rootContext = injectScrollAreaRootContext()
+const scrollbarContext = injectScrollAreaScrollbarContext()
+
+const { forwardRef } = useForwardExpose()
+
+const { state, dispatch } = useStateMachine('hidden', {
+  hidden: {
+    POINTER_ENTER: 'glimpse',
+    SCROLL: 'scrolling',
+  },
+  glimpse: {
+    HIDE: 'hidden',
+    POINTER_LEAVE: 'hidden',
+    SCROLL: 'scrolling',
+    POINTER_ENTER: 'glimpse',
+  },
+  scrolling: {
+    SCROLL_END: 'idle',
+    POINTER_ENTER: 'interacting',
+  },
+  interacting: {
+    SCROLL: 'interacting',
+    POINTER_LEAVE: 'idle',
+  },
+  idle: {
+    HIDE: 'hidden',
+    SCROLL: 'scrolling',
+    POINTER_ENTER: 'interacting',
+  },
+})
+
+const visible = computed(() => state.value !== 'hidden')
+
+function handlePointerEnter() {
+  dispatch('POINTER_ENTER')
+}
+
+function handlePointerLeave() {
+  dispatch('POINTER_LEAVE')
+}
+
+const debounceScrollEnd = useDebounceFn(() => dispatch('SCROLL_END'), 100)
+
+watchEffect((onCleanup) => {
+  if (state.value === 'glimpse') {
+    const timeId = window.setTimeout(
+      () => dispatch('HIDE'),
+      rootContext.scrollHideDelay.value,
+    )
+
+    onCleanup(() => {
+      window.clearTimeout(timeId)
+    })
+  }
+})
+
+watchEffect((onCleanup) => {
+  if (state.value === 'idle') {
+    const timeId = window.setTimeout(
+      () => dispatch('HIDE'),
+      rootContext.scrollHideDelay.value,
+    )
+
+    onCleanup(() => {
+      window.clearTimeout(timeId)
+    })
+  }
+})
+
+watchEffect((onCleanup) => {
+  const viewport = rootContext.viewport.value
+  const scrollDirection = scrollbarContext.isHorizontal.value
+    ? 'scrollLeft'
+    : 'scrollTop'
+
+  if (viewport) {
+    let prevScrollPos = viewport[scrollDirection]
+    const handleScroll = () => {
+      const scrollPos = viewport[scrollDirection]
+      const hasScrollInDirectionChanged = prevScrollPos !== scrollPos
+      if (hasScrollInDirectionChanged) {
+        dispatch('SCROLL')
+        debounceScrollEnd()
+      }
+      prevScrollPos = scrollPos
+    }
+    viewport.addEventListener('scroll', handleScroll)
+
+    onCleanup(() => {
+      viewport.removeEventListener('scroll', handleScroll)
+    })
+  }
+})
+
+onMounted(() => {
+  const scrollArea = rootContext.scrollArea.value
+
+  if (scrollArea) {
+    scrollArea.addEventListener('pointerenter', handlePointerEnter)
+    scrollArea.addEventListener('pointerleave', handlePointerLeave)
+  }
+})
+
+onUnmounted(() => {
+  const scrollArea = rootContext.scrollArea.value
+  if (scrollArea) {
+    scrollArea.removeEventListener('pointerenter', handlePointerEnter)
+    scrollArea.removeEventListener('pointerleave', handlePointerLeave)
+  }
+})
+</script>
+
+<template>
+  <Presence :present="forceMount || visible">
+    <ScrollAreaScrollbarAuto
+      v-bind="$attrs"
+      :ref="forwardRef"
+      :data-state="visible ? 'visible' : 'hidden'"
+    >
+      <slot />
+    </ScrollAreaScrollbarAuto>
+  </Presence>
+</template>

package/src/ScrollArea/index.ts

@@ -12,6 +12,10 @@ export {
   default as ScrollAreaScrollbar,
   type ScrollAreaScrollbarProps,
 } from './ScrollAreaScrollbar.vue'
+export {
+  default as ScrollAreaScrollbarGlimpse,
+  type ScrollAreaScrollbarGlimpseProps,
+} from './ScrollAreaScrollbarGlimpse.vue'
 export {
   default as ScrollAreaThumb,
   type ScrollAreaThumbProps,

package/src/ScrollArea/types.ts

@@ -9,4 +9,4 @@ export interface Sizes {
   }
 }
 
-export type ScrollType = 'auto' | 'always' | 'scroll' | 'hover'
+export type ScrollType = 'auto' | 'always' | 'scroll' | 'hover' | 'glimpse'

package/src/Tabs/TabsContent.vue

@@ -15,7 +15,7 @@ export interface TabsContentProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { Presence } from '@/Presence'
 import { Primitive } from '@/Primitive'
 import { injectTabsRootContext } from './TabsRoot.vue'
@@ -33,10 +33,15 @@ const isSelected = computed(() => props.value === rootContext.modelValue.value)
 const isMountAnimationPreventedRef = ref(isSelected.value)
 
 onMounted(() => {
+  rootContext.registerContent(props.value)
   requestAnimationFrame(() => {
     isMountAnimationPreventedRef.value = false
   })
 })
+
+onBeforeUnmount(() => {
+  rootContext.unregisterContent(props.value)
+})
 </script>
 
 <template>

package/src/Tabs/TabsRoot.vue

@@ -14,6 +14,9 @@ export interface TabsRootContext {
   activationMode: 'automatic' | 'manual'
   baseId: string
   tabsList: Ref<HTMLElement | undefined>
+  contentIds: Ref<Set<StringOrNumber>>
+  registerContent: (value: StringOrNumber) => void
+  unregisterContent: (value: StringOrNumber) => void
 }
 
 export interface TabsRootProps<T extends StringOrNumber = StringOrNumber> extends PrimitiveProps {
@@ -55,7 +58,7 @@ export const [injectTabsRootContext, provideTabsRootContext]
 </script>
 
 <script setup lang="ts" generic="T extends StringOrNumber = StringOrNumber">
-import { ref, toRefs } from 'vue'
+import { ref, shallowRef, toRefs } from 'vue'
 import { Primitive } from '@/Primitive'
 
 const props = withDefaults(defineProps<TabsRootProps<T>>(), {
@@ -82,6 +85,7 @@ const modelValue = useVModel<TabsRootProps<T>, 'modelValue', 'update:modelValue'
 })
 
 const tabsList = ref<HTMLElement>()
+const contentIds = shallowRef<Set<StringOrNumber>>(new Set())
 
 provideTabsRootContext({
   modelValue,
@@ -94,6 +98,15 @@ provideTabsRootContext({
   activationMode: props.activationMode,
   baseId: useId(undefined, 'reka-tabs'),
   tabsList,
+  contentIds,
+  registerContent: (value: StringOrNumber) => {
+    contentIds.value = new Set([...contentIds.value, value])
+  },
+  unregisterContent: (value: StringOrNumber) => {
+    const newSet = new Set(contentIds.value)
+    newSet.delete(value)
+    contentIds.value = newSet
+  },
 })
 </script>
 

package/src/Tabs/TabsTrigger.vue

@@ -27,7 +27,7 @@ const { forwardRef } = useForwardExpose()
 const rootContext = injectTabsRootContext()
 
 const triggerId = computed(() => makeTriggerId(rootContext.baseId, props.value))
-const contentId = computed(() => makeContentId(rootContext.baseId, props.value))
+const contentId = computed(() => rootContext.contentIds.value.has(props.value) ? makeContentId(rootContext.baseId, props.value) : undefined)
 
 const isSelected = computed(() => props.value === rootContext.modelValue.value)
 </script>

package/src/TimeField/TimeFieldInput.vue

@@ -23,6 +23,7 @@ const lastKeyZero = ref(false)
 const {
   handleSegmentClick,
   handleSegmentKeydown,
+  handleSegmentFocusOut,
   attributes,
 } = useDateField({
   hasLeftFocus,
@@ -30,6 +31,7 @@ const {
   placeholder: rootContext.placeholder,
   hourCycle: rootContext.hourCycle,
   step: rootContext.step,
+  stepSnapping: rootContext.stepSnapping,
   segmentValues: rootContext.segmentValues,
   formatter: rootContext.formatter,
   part: props.part,
@@ -59,7 +61,10 @@ const isInvalid = computed(() => rootContext.isInvalid.value)
     v-on="part !== 'literal' ? {
       mousedown: handleSegmentClick,
       keydown: handleSegmentKeydown,
-      focusout: () => { hasLeftFocus = true },
+      focusout: () => {
+        hasLeftFocus = true
+        handleSegmentFocusOut()
+      },
       focusin: (e: FocusEvent) => {
         rootContext.setFocusedElement(e.target as HTMLElement)
       },

package/src/TimeField/TimeFieldRoot.vue

@@ -32,6 +32,7 @@ type TimeFieldRootContext = {
   formatter: Formatter
   hourCycle: HourCycle
   step: Ref<DateStep>
+  stepSnapping: Ref<boolean>
   segmentValues: Ref<SegmentValueObj>
   segmentContents: Ref<{ part: SegmentPart, value: string }[]>
   elements: Ref<Set<HTMLElement>>
@@ -52,6 +53,8 @@ export interface TimeFieldRootProps extends PrimitiveProps, FormFieldProps {
   hourCycle?: HourCycle
   /** The stepping interval for the time fields. Defaults to `1`. */
   step?: DateStep
+  /** Whether to enforce snapping the value to the nearest step increment after input. Defaults to `false`. */
+  stepSnapping?: boolean
   /** The granularity to use for formatting times. Defaults to minute if a Time is provided, otherwise defaults to minute. The field will render segments for each part of the date up to and including the specified granularity */
   granularity?: 'hour' | 'minute' | 'second'
   /** Whether or not to hide the time zone segment of the field */
@@ -107,6 +110,7 @@ const props = withDefaults(defineProps<TimeFieldRootProps>(), {
   readonly: false,
   placeholder: undefined,
   isDateUnavailable: undefined,
+  stepSnapping: false,
 })
 const emits = defineEmits<TimeFieldRootEmits>()
 defineSlots<{
@@ -120,7 +124,7 @@ defineSlots<{
   }) => any
 }>()
 
-const { disabled, readonly, granularity, defaultValue, minValue, maxValue, dir: propDir, locale: propLocale } = toRefs(props)
+const { disabled, readonly, granularity, defaultValue, minValue, maxValue, stepSnapping, dir: propDir, locale: propLocale } = toRefs(props)
 const locale = useLocale(propLocale)
 const dir = useDirection(propDir)
 
@@ -218,7 +222,25 @@ const allSegmentContent = computed(() => createContent({
   isTimeValue: true,
 }))
 
-const segmentContents = computed(() => allSegmentContent.value.arr)
+const segmentContents = computed(() => {
+  const contents = allSegmentContent.value.arr
+
+  // Convert hour values for 12-hour display
+  if (props.hourCycle === 12) {
+    return contents.map((segment) => {
+      if (segment.part === 'hour' && 'hour' in segmentValues.value) {
+        const hour = segmentValues.value.hour
+        if (hour !== null) {
+          const displayHour = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour
+          return { ...segment, value: displayHour.toString() }
+        }
+      }
+      return segment
+    })
+  }
+
+  return contents
+})
 
 const editableSegmentContents = computed(() => segmentContents.value.filter(({ part }) => part !== 'literal'))
 
@@ -298,6 +320,7 @@ provideTimeFieldRootContext({
   formatter,
   hourCycle: props.hourCycle,
   step,
+  stepSnapping,
   readonly,
   segmentValues,
   isInvalid,

package/src/Tree/TreeRoot.vue

@@ -4,13 +4,13 @@ import { createContext, getActiveElement, useDirection, useSelectionBehavior, us
 import { flatten } from './utils'
 
 export interface TreeRootProps<T = Record<string, any>, U extends Record<string, any> = Record<string, any>, M extends boolean = false> extends PrimitiveProps {
-  /** The controlled value of the tree. Can be binded with with `v-model`. */
+  /** The controlled value of the tree. Can be binded with `v-model`. */
   modelValue?: M extends true ? U[] : U
   /** The value of the tree when initially rendered. Use when you do not need to control the state of the tree */
   defaultValue?: M extends true ? U[] : U
   /** List of items */
   items?: T[]
-  /** The controlled value of the expanded item. Can be binded with with `v-model`. */
+  /** The controlled value of the expanded item. Can be binded with `v-model`. */
   expanded?: string[]
   /** The value of the expanded tree when initially rendered. Use when you do not need to control the state of the expanded tree */
   defaultExpanded?: string[]

package/src/date/calendar.ts

@@ -5,12 +5,14 @@
 import type { DateValue, DayOfWeek } from '@internationalized/date'
 import type { Grid } from './types'
 import type { DateRange } from '@/shared'
-import { CalendarDate, endOfMonth, endOfYear, getDayOfWeek, startOfMonth, startOfYear } from '@internationalized/date'
+import { CalendarDate, endOfMonth, endOfYear, getDayOfWeek, startOfMonth, startOfWeek, startOfYear } from '@internationalized/date'
 import { getDaysInMonth, getLastFirstDayOfWeek, getNextLastDayOfWeek } from './comparators'
 import { chunk } from './utils'
 
 export type WeekDayFormat = 'narrow' | 'short' | 'long'
 
+export type WeekStartsOn = 0 | 1 | 2 | 3 | 4 | 5 | 6
+
 export type CreateSelectProps = {
   /**
    * The date object representing the date (usually the first day of the month/year).
@@ -27,7 +29,7 @@ export type CreateMonthProps = {
   /**
    * The day of the week to start the calendar on (0 for Sunday, 1 for Monday, etc.).
    */
-  weekStartsOn: number
+  weekStartsOn: WeekStartsOn
 
   /**
    * Whether to always render 6 weeks in the calendar, even if the month doesn't
@@ -219,24 +221,46 @@ export function createDateRange({ start, end }: DateRange): DateValue[] {
   return dates
 }
 
+/**
+ * It's better to use `getWeekStart` from `@internationalized/date`,
+ * but sadly it is not yet exported from the package.
+ * And the `Intl.Locale` API is not supported well enough yet.
+ */
+export function getWeekStartsOn(locale: string): WeekStartsOn {
+  // Jan 6, 2025 is a Monday (ISO day = 1)
+  const monday = new CalendarDate(2025, 1, 6)
+  const dayOfWeek = getDayOfWeek(monday, locale)
+  // dayOfWeek tells us Monday's position in the locale's week (0-indexed)
+  // If Monday is position 0 → week starts Monday (1)
+  // If Monday is position 1 → week starts Sunday (0)
+  return (1 - dayOfWeek + 7) % 7 as WeekStartsOn
+}
+
 /**
  * Returns the locale-specific week number
  */
 export function getWeekNumber(date: DateValue, locale: string = 'en-US', firstDayOfWeek?: DayOfWeek): number {
-  const firstDayOfYear = new CalendarDate(date.year, 1, 1)
-
-  const firstDayOfYearWeekday = getDayOfWeek(firstDayOfYear, locale, firstDayOfWeek)
-
-  const firstWeekStart = firstDayOfYear.subtract({ days: firstDayOfYearWeekday })
-
-  // If date is before the first week start It belongs to the last week of the previous year
-  if (date.compare(firstWeekStart) < 0) {
-    const prevYearDate = new CalendarDate(date.year - 1, 12, 31)
-    return getWeekNumber(prevYearDate, locale, firstDayOfWeek)
-  }
-
-  const days = getDaysBetween(firstWeekStart, date)
-
-  // Week number is days divided by 7 plus 1
-  return Math.floor(days.length / 7) + 1
+  const jan1 = new CalendarDate(date.year, 1, 1)
+
+  // Detect ISO locale by comparing JS day of week with locale day of week
+  const usesISOWeek = jan1.toDate('UTC').getUTCDay() !== getDayOfWeek(jan1, locale)
+  const weekStartsOn = firstDayOfWeek ?? (usesISOWeek ? 'mon' : 'sun')
+  const firstWeekContainsDate = usesISOWeek ? 4 : 1
+
+  // Find the "deciding day" - its year determines which year's week numbering to use
+  const dayOfWeek = getDayOfWeek(date, locale, weekStartsOn)
+  const decidingDay = date.add({ days: 7 - firstWeekContainsDate - dayOfWeek })
+  const weekYear = decidingDay.year
+
+  // Calculate week number from week 1 start
+  const week1Ref = new CalendarDate(weekYear, 1, firstWeekContainsDate)
+  const week1Start = startOfWeek(week1Ref, locale, weekStartsOn)
+  const currentWeekStart = startOfWeek(date, locale, weekStartsOn)
+
+  const MS_PER_WEEK = 7 * 24 * 60 * 60 * 1000
+  const daysDiff = Math.round(
+    (currentWeekStart.toDate('UTC').getTime() - week1Start.toDate('UTC').getTime())
+    / MS_PER_WEEK,
+  )
+  return daysDiff + 1
 }

package/src/date/comparators.ts

@@ -143,7 +143,13 @@ export function getLastFirstDayOfWeek<T extends DateValue = DateValue>(
   firstDayOfWeek: number,
   locale: string,
 ): T {
-  const day = getDayOfWeek(date, locale)
+  /**
+   * "firstDayOfWeek" is fixed to 0(Sunday) to avoid confusion regarding locales.
+   * This also aligns with other date libraries, e.g., date-fns.
+   *
+   * #see https://github.com/unovue/reka-ui/issues/2157
+   */
+  const day = getDayOfWeek(date, locale, 'sun')
 
   if (firstDayOfWeek > day)
     return date.subtract({ days: day + 7 - firstDayOfWeek }) as T
@@ -159,7 +165,14 @@ export function getNextLastDayOfWeek<T extends DateValue = DateValue>(
   firstDayOfWeek: number,
   locale: string,
 ): T {
-  const day = getDayOfWeek(date, locale)
+  /**
+   * "firstDayOfWeek" is fixed to 0(Sunday) to avoid confusion regarding locales.
+   * This also aligns with other date libraries, e.g., date-fns.
+   *
+   * #see https://github.com/unovue/reka-ui/issues/2157
+   */
+  const day = getDayOfWeek(date, locale, 'sun')
+
   const lastDayOfWeek = firstDayOfWeek === 0 ? 6 : firstDayOfWeek - 1
 
   if (day === lastDayOfWeek)

package/src/index.ts

@@ -42,6 +42,7 @@ export {
   type DateValue,
   type Formatter,
   type SegmentPart,
+  type TimeValue,
   useBodyScrollLock,
   useDateFormatter,
   useDirection,

package/src/shared/date/parser.ts

@@ -197,6 +197,16 @@ function createContentArr(props: CreateContentArrProps) {
       if (segment.part === 'timeZoneName' && (!isZonedDateTime(props.dateRef) || hideTimeZone))
         return false
 
+      // In some locales (e.g., zh-TW), the time zone is represented with square brackets.
+      // We also filter out these literals that are just brackets.
+      // @see https://github.com/unovue/reka-ui/issues/1670
+      if (
+        (!isZonedDateTime(props.dateRef) || hideTimeZone)
+        && segment.part === 'literal' && ['[', ']'].includes(segment.value.trim())
+      ) {
+        return false
+      }
+
       return true
     })