@youcan/celeste 0.13.0 → 0.14.0

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

@@ -4,7 +4,6 @@ import type { HTMLAttributes } from 'vue';
 import { DateFormatter, getLocalTimeZone, isEqualDay } from '@internationalized/date';
 import clsx from 'clsx';
 import {
-  ConfigProvider,
   RangeCalendarCell,
   RangeCalendarCellTrigger,
   RangeCalendarGrid,
@@ -38,7 +37,7 @@ const emits = defineEmits<RangeCalendarRootEmits>();
 const delegatedProps = useDelegatedProps(props, ['class', 'markedDates']);
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
-const direction = useDirection();
+const dir = useDirection(() => props.dir);
 
 const monthFormatter = computed(
   () => new DateFormatter(props.locale ?? 'en-US', { month: 'long', year: 'numeric' }),
@@ -58,72 +57,71 @@ function weekdayLabel(day: string): string {
 </script>
 
 <template>
-  <ConfigProvider :dir="props.dir ?? direction">
-    <RangeCalendarRoot
-      v-slot="{ weekDays, grid }"
-      v-bind="forwarded"
-      :class="clsx('celeste-range-calendar', props.class)"
-    >
-      <div class="celeste-range-calendar-months">
-        <div
-          v-for="month in grid"
-          :key="month.value.toString()"
-          class="celeste-range-calendar-month"
-        >
-          <div class="celeste-range-calendar-header">
-            <RangeCalendarPrev as-child>
-              <button type="button" class="celeste-range-calendar-nav">
-                <i class="i-celeste-arrow-left-s-line" />
-              </button>
-            </RangeCalendarPrev>
-            <span class="celeste-range-calendar-heading">{{ formatMonth(month.value) }}</span>
-            <RangeCalendarNext as-child>
-              <button type="button" class="celeste-range-calendar-nav">
-                <i class="i-celeste-arrow-right-s-line" />
-              </button>
-            </RangeCalendarNext>
-          </div>
-
-          <RangeCalendarGrid class="celeste-range-calendar-grid">
-            <RangeCalendarGridHead>
-              <RangeCalendarGridRow class="celeste-range-calendar-week">
-                <RangeCalendarHeadCell
-                  v-for="day in weekDays"
-                  :key="day"
-                  class="celeste-range-calendar-weekday"
-                >
-                  {{ weekdayLabel(day) }}
-                </RangeCalendarHeadCell>
-              </RangeCalendarGridRow>
-            </RangeCalendarGridHead>
-            <RangeCalendarGridBody class="celeste-range-calendar-body">
-              <RangeCalendarGridRow
-                v-for="(weekDates, index) in month.rows"
-                :key="`week-${index}`"
-                class="celeste-range-calendar-week"
+  <RangeCalendarRoot
+    v-slot="{ weekDays, grid }"
+    v-bind="forwarded"
+    :class="clsx('celeste-range-calendar', props.class)"
+    :dir="dir"
+  >
+    <div class="celeste-range-calendar-months">
+      <div
+        v-for="month in grid"
+        :key="month.value.toString()"
+        class="celeste-range-calendar-month"
+      >
+        <div class="celeste-range-calendar-header">
+          <RangeCalendarPrev as-child>
+            <button type="button" class="celeste-range-calendar-nav">
+              <i class="i-celeste-arrow-left-s-line" />
+            </button>
+          </RangeCalendarPrev>
+          <span class="celeste-range-calendar-heading">{{ formatMonth(month.value) }}</span>
+          <RangeCalendarNext as-child>
+            <button type="button" class="celeste-range-calendar-nav">
+              <i class="i-celeste-arrow-right-s-line" />
+            </button>
+          </RangeCalendarNext>
+        </div>
+
+        <RangeCalendarGrid class="celeste-range-calendar-grid">
+          <RangeCalendarGridHead>
+            <RangeCalendarGridRow class="celeste-range-calendar-week">
+              <RangeCalendarHeadCell
+                v-for="day in weekDays"
+                :key="day"
+                class="celeste-range-calendar-weekday"
               >
-                <RangeCalendarCell
-                  v-for="weekDate in weekDates"
-                  :key="weekDate.toString()"
-                  :date="weekDate"
-                  class="celeste-range-calendar-cell"
+                {{ weekdayLabel(day) }}
+              </RangeCalendarHeadCell>
+            </RangeCalendarGridRow>
+          </RangeCalendarGridHead>
+          <RangeCalendarGridBody class="celeste-range-calendar-body">
+            <RangeCalendarGridRow
+              v-for="(weekDates, index) in month.rows"
+              :key="`week-${index}`"
+              class="celeste-range-calendar-week"
+            >
+              <RangeCalendarCell
+                v-for="weekDate in weekDates"
+                :key="weekDate.toString()"
+                :date="weekDate"
+                class="celeste-range-calendar-cell"
+              >
+                <RangeCalendarCellTrigger
+                  :day="weekDate"
+                  :month="month.value"
+                  class="celeste-range-calendar-day"
+                  :data-marked="isMarked(weekDate) ? '' : undefined"
                 >
-                  <RangeCalendarCellTrigger
-                    :day="weekDate"
-                    :month="month.value"
-                    class="celeste-range-calendar-day"
-                    :data-marked="isMarked(weekDate) ? '' : undefined"
-                  >
-                    <span class="celeste-range-calendar-day-number">{{ weekDate.day }}</span>
-                  </RangeCalendarCellTrigger>
-                </RangeCalendarCell>
-              </RangeCalendarGridRow>
-            </RangeCalendarGridBody>
-          </RangeCalendarGrid>
-        </div>
+                  <span class="celeste-range-calendar-day-number">{{ weekDate.day }}</span>
+                </RangeCalendarCellTrigger>
+              </RangeCalendarCell>
+            </RangeCalendarGridRow>
+          </RangeCalendarGridBody>
+        </RangeCalendarGrid>
       </div>
-    </RangeCalendarRoot>
-  </ConfigProvider>
+    </div>
+  </RangeCalendarRoot>
 </template>
 
 <style scoped lang="scss">

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

@@ -2,7 +2,7 @@
 import type { ScrollAreaRootProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { ConfigProvider, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaViewport } from 'reka-ui';
+import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaViewport } from 'reka-ui';
 import { useDelegatedProps, useDirection } from '@/composables';
 import ScrollBar from './scroll-bar.vue';
 
@@ -10,23 +10,22 @@ const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'
 
 const delegatedProps = useDelegatedProps(props, 'class');
 
-const direction = useDirection();
+const dir = useDirection(() => props.dir);
 </script>
 
 <template>
-  <ConfigProvider :dir="props.dir ?? direction">
-    <ScrollAreaRoot
-      v-bind="delegatedProps"
-      :class="clsx('celeste-scroll-area', props.class)"
-    >
-      <ScrollAreaViewport class="celeste-scroll-area-viewport">
-        <slot />
-      </ScrollAreaViewport>
-      <ScrollBar />
-      <ScrollBar orientation="horizontal" />
-      <ScrollAreaCorner />
-    </ScrollAreaRoot>
-  </ConfigProvider>
+  <ScrollAreaRoot
+    v-bind="delegatedProps"
+    :class="clsx('celeste-scroll-area', props.class)"
+    :dir="dir"
+  >
+    <ScrollAreaViewport class="celeste-scroll-area-viewport">
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollBar />
+    <ScrollBar orientation="horizontal" />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
 </template>
 
 <style scoped lang="scss">

package/src/components/segmented-control/segmented-control.vue

@@ -2,7 +2,7 @@
 import type { ToggleGroupRootEmits, ToggleGroupRootProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { ConfigProvider, ToggleGroupRoot as SegmentedControlRoot, useForwardPropsEmits } from 'reka-ui';
+import { ToggleGroupRoot as SegmentedControlRoot, useForwardPropsEmits } from 'reka-ui';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 import { useDirection } from '@/composables/use-direction';
 import { useTabObserver } from '@/composables/use-tab-observer';
@@ -13,31 +13,30 @@ const emits = defineEmits<ToggleGroupRootEmits>();
 const delegatedProps = useDelegatedProps(props, 'class');
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
-const direction = useDirection();
+const dir = useDirection(() => props.dir);
 
 const { listRef, indicator, ready } = useTabObserver('[data-state="on"]');
 </script>
 
 <template>
-  <ConfigProvider :dir="props.dir ?? direction">
-    <SegmentedControlRoot
-      ref="listRef"
-      :class="clsx('celeste-segmented-control', props.class)"
-      v-bind="forwarded"
-      type="single"
-    >
-      <slot />
-      <div
-        :hidden="!ready"
-        class="celeste-segmented-control-indicator"
-        :style="{
-          width: `${indicator.width}px`,
-          height: `${indicator.height}px`,
-          transform: `translate3d(${indicator.left}px, ${indicator.top}px, 0)`,
-        }"
-      />
-    </SegmentedControlRoot>
-  </ConfigProvider>
+  <SegmentedControlRoot
+    ref="listRef"
+    :class="clsx('celeste-segmented-control', props.class)"
+    v-bind="forwarded"
+    type="single"
+    :dir="dir"
+  >
+    <slot />
+    <div
+      :hidden="!ready"
+      class="celeste-segmented-control-indicator"
+      :style="{
+        width: `${indicator.width}px`,
+        height: `${indicator.height}px`,
+        transform: `translate3d(${indicator.left}px, ${indicator.top}px, 0)`,
+      }"
+    />
+  </SegmentedControlRoot>
 </template>
 
 <style scoped>

package/src/components/select/select.vue

@@ -12,16 +12,17 @@ const emits = defineEmits<SelectRootEmits>();
 const delegatedProps = useDelegatedProps(props, 'class');
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
-const direction = useDirection();
+const dir = useDirection(() => props.dir);
 </script>
 
 <template>
-  <ConfigProvider :dir="props.dir ?? direction">
-    <SelectRoot
-      v-bind="forwarded"
-      :class="clsx('celeste-select', props.class)"
-    >
+  <SelectRoot
+    v-bind="forwarded"
+    :class="clsx('celeste-select', props.class)"
+    :dir="dir"
+  >
+    <ConfigProvider :dir="dir">
       <slot />
-    </SelectRoot>
-  </ConfigProvider>
+    </ConfigProvider>
+  </SelectRoot>
 </template>

package/src/components/slider/slider.vue

@@ -2,7 +2,7 @@
 import type { SliderRootEmits, SliderRootProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { ConfigProvider, SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui';
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 import { useDirection } from '@/composables/use-direction';
 
@@ -12,26 +12,25 @@ const emits = defineEmits<SliderRootEmits>();
 const delegatedProps = useDelegatedProps(props, 'class');
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
-const direction = useDirection();
+const dir = useDirection(() => props.dir);
 </script>
 
 <template>
-  <ConfigProvider :dir="props.dir ?? direction">
-    <SliderRoot
-      v-bind="forwarded"
-      :class="clsx('celeste-slider', props.class)"
-    >
-      <SliderTrack class="celeste-slider-track">
-        <SliderRange class="celeste-slider-range" />
-      </SliderTrack>
+  <SliderRoot
+    v-bind="forwarded"
+    :class="clsx('celeste-slider', props.class)"
+    :dir="dir"
+  >
+    <SliderTrack class="celeste-slider-track">
+      <SliderRange class="celeste-slider-range" />
+    </SliderTrack>
 
-      <SliderThumb
-        v-for="(_, key) in modelValue"
-        :key="key"
-        class="celeste-slider-thumb"
-      />
-    </SliderRoot>
-  </ConfigProvider>
+    <SliderThumb
+      v-for="(_, key) in modelValue"
+      :key="key"
+      class="celeste-slider-thumb"
+    />
+  </SliderRoot>
 </template>
 
 <style lang="scss">

package/src/components/tab-menu/tab-menu.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { TabsRootEmits, TabsRootProps } from 'reka-ui';
-import { ConfigProvider, TabsRoot, useForwardPropsEmits } from 'reka-ui';
+import { TabsRoot, useForwardPropsEmits } from 'reka-ui';
 import { useDirection } from '@/composables/use-direction';
 
 const props = defineProps<TabsRootProps>();
@@ -8,18 +8,17 @@ const emits = defineEmits<TabsRootEmits>();
 
 const forwarded = useForwardPropsEmits(props, emits);
 
-const direction = useDirection();
+const dir = useDirection(() => props.dir);
 </script>
 
 <template>
-  <ConfigProvider :dir="props.dir ?? direction">
-    <TabsRoot
-      v-bind="forwarded"
-      class="celeste-tab-menu-root"
-    >
-      <slot />
-    </TabsRoot>
-  </ConfigProvider>
+  <TabsRoot
+    v-bind="forwarded"
+    class="celeste-tab-menu-root"
+    :dir="dir"
+  >
+    <slot />
+  </TabsRoot>
 </template>
 
 <style scoped>

package/src/composables/use-direction.ts

@@ -1,6 +1,6 @@
 import type { Direction } from 'reka-ui';
-import type { Ref } from 'vue';
-import { getCurrentInstance, onMounted, ref, watch } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+import { computed, getCurrentInstance, onMounted, ref, toValue, watch } from 'vue';
 
 const revision = ref(0);
 
@@ -18,9 +18,9 @@ function documentDirection(): Direction {
   return typeof document !== 'undefined' && document.documentElement.dir === 'rtl' ? 'rtl' : 'ltr';
 }
 
-export function useDirection(): Ref<Direction> {
+export function useDirection(override?: MaybeRefOrGetter<Direction | undefined>): ComputedRef<Direction> {
   const instance = getCurrentInstance();
-  const direction = ref<Direction>(documentDirection());
+  const resolved = ref<Direction>(documentDirection());
 
   observeDocument();
 
@@ -28,7 +28,7 @@ export function useDirection(): Ref<Direction> {
     const node = instance?.vnode.el as Node | null | undefined;
     const element = node instanceof HTMLElement ? node : node?.parentElement;
 
-    direction.value = element
+    resolved.value = element
       ? getComputedStyle(element).direction === 'rtl' ? 'rtl' : 'ltr'
       : documentDirection();
   }
@@ -36,5 +36,5 @@ export function useDirection(): Ref<Direction> {
   onMounted(read);
   watch(revision, read);
 
-  return direction;
+  return computed(() => toValue(override) ?? resolved.value);
 }