@youcan/celeste 0.12.0 → 0.13.0

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

@@ -2,23 +2,28 @@
 import type { RadioGroupRootEmits, RadioGroupRootProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { RadioGroupRoot, useForwardPropsEmits } from 'reka-ui';
+import { ConfigProvider, RadioGroupRoot, useForwardPropsEmits } from 'reka-ui';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
+import { useDirection } from '@/composables/use-direction';
 
 const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>();
 const emits = defineEmits<RadioGroupRootEmits>();
 
 const delegatedProps = useDelegatedProps(props, 'class');
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const direction = useDirection();
 </script>
 
 <template>
-  <RadioGroupRoot
-    :class="clsx('celeste-radio-wrapper', props.class)"
-    v-bind="forwarded"
-  >
-    <slot />
-  </RadioGroupRoot>
+  <ConfigProvider :dir="props.dir ?? direction">
+    <RadioGroupRoot
+      :class="clsx('celeste-radio-wrapper', props.class)"
+      v-bind="forwarded"
+    >
+      <slot />
+    </RadioGroupRoot>
+  </ConfigProvider>
 </template>
 
 <style lang="scss">

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

@@ -4,6 +4,7 @@ import type { HTMLAttributes } from 'vue';
 import { DateFormatter, getLocalTimeZone, isEqualDay } from '@internationalized/date';
 import clsx from 'clsx';
 import {
+  ConfigProvider,
   RangeCalendarCell,
   RangeCalendarCellTrigger,
   RangeCalendarGrid,
@@ -18,6 +19,7 @@ import {
 } from 'reka-ui';
 import { computed } from 'vue';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
+import { useDirection } from '@/composables/use-direction';
 
 export interface RangeCalendarProps extends RangeCalendarRootProps {
   class?: HTMLAttributes['class'];
@@ -36,6 +38,8 @@ const emits = defineEmits<RangeCalendarRootEmits>();
 const delegatedProps = useDelegatedProps(props, ['class', 'markedDates']);
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
+const direction = useDirection();
+
 const monthFormatter = computed(
   () => new DateFormatter(props.locale ?? 'en-US', { month: 'long', year: 'numeric' }),
 );
@@ -54,70 +58,72 @@ function weekdayLabel(day: string): string {
 </script>
 
 <template>
-  <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"
-            >
-              <RangeCalendarCell
-                v-for="weekDate in weekDates"
-                :key="weekDate.toString()"
-                :date="weekDate"
-                class="celeste-range-calendar-cell"
+  <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"
               >
-                <RangeCalendarCellTrigger
-                  :day="weekDate"
-                  :month="month.value"
-                  class="celeste-range-calendar-day"
-                  :data-marked="isMarked(weekDate) ? '' : undefined"
+                <RangeCalendarCell
+                  v-for="weekDate in weekDates"
+                  :key="weekDate.toString()"
+                  :date="weekDate"
+                  class="celeste-range-calendar-cell"
                 >
-                  <span class="celeste-range-calendar-day-number">{{ weekDate.day }}</span>
-                </RangeCalendarCellTrigger>
-              </RangeCalendarCell>
-            </RangeCalendarGridRow>
-          </RangeCalendarGridBody>
-        </RangeCalendarGrid>
+                  <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>
       </div>
-    </div>
-  </RangeCalendarRoot>
+    </RangeCalendarRoot>
+  </ConfigProvider>
 </template>
 
 <style scoped lang="scss">

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

@@ -2,32 +2,31 @@
 import type { ScrollAreaRootProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import {
-  ScrollAreaCorner,
-  ScrollAreaRoot,
-
-  ScrollAreaViewport,
-} from 'reka-ui';
-import { useDelegatedProps } from '@/composables';
+import { ConfigProvider, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaViewport } from 'reka-ui';
+import { useDelegatedProps, useDirection } from '@/composables';
 import ScrollBar from './scroll-bar.vue';
 
 const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = useDelegatedProps(props, 'class');
+
+const direction = useDirection();
 </script>
 
 <template>
-  <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 :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>
 </template>
 
 <style scoped lang="scss">

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

@@ -2,8 +2,9 @@
 import type { ToggleGroupRootEmits, ToggleGroupRootProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { ToggleGroupRoot as SegmentedControlRoot, useForwardPropsEmits } from 'reka-ui';
+import { ConfigProvider, 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';
 
 const props = defineProps<Omit<ToggleGroupRootProps, 'type'> & { class?: HTMLAttributes['class'] }>();
@@ -12,27 +13,31 @@ const emits = defineEmits<ToggleGroupRootEmits>();
 const delegatedProps = useDelegatedProps(props, 'class');
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
+const direction = useDirection();
+
 const { listRef, indicator, ready } = useTabObserver('[data-state="on"]');
 </script>
 
 <template>
-  <SegmentedControlRoot
-    ref="listRef"
-    :class="clsx('celeste-segmented-control', props.class)"
-    v-bind="forwarded"
-    type="single"
-  >
-    <slot />
-    <div
-      class="celeste-segmented-control-indicator"
-      :data-ready="ready"
-      :style="{
-        width: `${indicator.width}px`,
-        height: `${indicator.height}px`,
-        transform: `translate3d(${indicator.left}px, ${indicator.top}px, 0)`,
-      }"
-    />
-  </SegmentedControlRoot>
+  <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>
 </template>
 
 <style scoped>
@@ -58,17 +63,17 @@ const { listRef, indicator, ready } = useTabObserver('[data-state="on"]');
   top: 0;
   left: 0;
   transition-property: transform, width, height;
-  transition-duration: 0s;
+  transition-duration: var(--animation-normal);
   transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
   border-radius: var(--radius-6);
-  opacity: 0;
   background-color: var(--color-bg-white-0);
   box-shadow: var(--shadow-toggle-switch);
   pointer-events: none;
+}
 
-  &[data-ready='true'] {
-    transition-duration: var(--animation-normal);
-    opacity: 1;
+@media (prefers-reduced-motion: reduce) {
+  .celeste-segmented-control-indicator {
+    transition-duration: 0s;
   }
 }
 </style>

package/src/components/select/select.vue

@@ -2,21 +2,26 @@
 import type { SelectRootEmits, SelectRootProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { SelectRoot, useForwardPropsEmits } from 'reka-ui';
+import { ConfigProvider, SelectRoot, useForwardPropsEmits } from 'reka-ui';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
+import { useDirection } from '@/composables/use-direction';
 
 const props = defineProps<SelectRootProps & { class?: HTMLAttributes['class'] }>();
 const emits = defineEmits<SelectRootEmits>();
 
 const delegatedProps = useDelegatedProps(props, 'class');
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const direction = useDirection();
 </script>
 
 <template>
-  <SelectRoot
-    v-bind="forwarded"
-    :class="clsx('celeste-select', props.class)"
-  >
-    <slot />
-  </SelectRoot>
+  <ConfigProvider :dir="props.dir ?? direction">
+    <SelectRoot
+      v-bind="forwarded"
+      :class="clsx('celeste-select', props.class)"
+    >
+      <slot />
+    </SelectRoot>
+  </ConfigProvider>
 </template>

package/src/components/slider/slider.vue

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

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

@@ -41,8 +41,8 @@ const { listRef, indicator, ready } = useTabObserver('[data-state="active"]');
   >
     <slot />
     <div
+      :hidden="!ready"
       class="celeste-tab-menu-indicator"
-      :data-ready="ready"
       :style="{
         width: `${indicator.width}px`,
         transform: `translate3d(${indicator.left}px, 0, 0)`,
@@ -104,9 +104,8 @@ const { listRef, indicator, ready } = useTabObserver('[data-state="active"]');
   left: 0;
   height: 2px;
   transition-property: transform, width;
-  transition-duration: 0s;
+  transition-duration: var(--animation-normal);
   transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
-  opacity: 0;
   background-color: var(--color-primary-base);
   pointer-events: none;
 
@@ -114,13 +113,14 @@ const { listRef, indicator, ready } = useTabObserver('[data-state="active"]');
     bottom: 0;
   }
 
-  &[data-ready='true'] {
-    transition-duration: var(--animation-normal);
-    opacity: 1;
-  }
-
   .celeste-tab-menu-list[data-orientation='vertical'] > & {
     display: none;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .celeste-tab-menu-indicator {
+    transition-duration: 0s;
+  }
+}
 </style>

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

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

package/src/components/text-input/text-input.vue

@@ -270,41 +270,23 @@ function clearInput() {
 
   :deep(.celeste-text-input-node.celeste-text-input-leading-node),
   :deep(.celeste-text-input-node.celeste-text-input-trailing-node) {
-    height: calc(var(--input-height) - var(--spacing-2)) !important;
-  }
-
-  [dir='ltr'] & {
-    :deep(.celeste-text-input-node.celeste-text-input-leading-node) {
-      border-right: 1px solid var(--color-stroke-soft-200) !important;
-      border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
-    }
-
-    :deep(.celeste-text-input-node.celeste-text-input-trailing-node) {
-      border-left: 1px solid var(--color-stroke-soft-200) !important;
-      border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
-    }
-  }
-
-  [dir='rtl'] & {
-    :deep(.celeste-text-input-node.celeste-text-input-leading-node) {
-      border-left: 1px solid var(--color-stroke-soft-200) !important;
-      border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
-    }
-
-    :deep(.celeste-text-input-node.celeste-text-input-trailing-node) {
-      border-right: 1px solid var(--color-stroke-soft-200) !important;
-      border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
-    }
+    height: calc(var(--input-height) - var(--spacing-2));
   }
 
   :deep(.celeste-text-input-node.celeste-text-input-leading-node) {
-    border-right: 1px solid var(--color-stroke-soft-200) !important;
-    border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
+    border-inline-end: 1px solid var(--color-stroke-soft-200);
+    border-start-start-radius: var(--input-radius);
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    border-end-start-radius: var(--input-radius);
   }
 
   :deep(.celeste-text-input-node.celeste-text-input-trailing-node) {
-    border-left: 1px solid var(--color-stroke-soft-200) !important;
-    border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
+    border-inline-start: 1px solid var(--color-stroke-soft-200);
+    border-start-start-radius: 0;
+    border-start-end-radius: var(--input-radius);
+    border-end-end-radius: var(--input-radius);
+    border-end-start-radius: 0;
   }
 }
 </style>

package/src/composables/index.ts

@@ -1,5 +1,6 @@
 export * from './use-chart-motion';
 export * from './use-delegated-props';
+export * from './use-direction';
 export * from './use-locale';
 export * from './use-sidebar';
 export * from './use-tab-observer';

package/src/composables/use-direction.ts

@@ -0,0 +1,40 @@
+import type { Direction } from 'reka-ui';
+import type { Ref } from 'vue';
+import { getCurrentInstance, onMounted, ref, watch } from 'vue';
+
+const revision = ref(0);
+
+let observer: MutationObserver | undefined;
+
+function observeDocument(): void {
+  if (observer || typeof document === 'undefined')
+    return;
+
+  observer = new MutationObserver(() => revision.value++);
+  observer.observe(document.documentElement, { attributeFilter: ['dir'], subtree: true });
+}
+
+function documentDirection(): Direction {
+  return typeof document !== 'undefined' && document.documentElement.dir === 'rtl' ? 'rtl' : 'ltr';
+}
+
+export function useDirection(): Ref<Direction> {
+  const instance = getCurrentInstance();
+  const direction = ref<Direction>(documentDirection());
+
+  observeDocument();
+
+  function read(): void {
+    const node = instance?.vnode.el as Node | null | undefined;
+    const element = node instanceof HTMLElement ? node : node?.parentElement;
+
+    direction.value = element
+      ? getComputedStyle(element).direction === 'rtl' ? 'rtl' : 'ltr'
+      : documentDirection();
+  }
+
+  onMounted(read);
+  watch(revision, read);
+
+  return direction;
+}

package/src/composables/use-tab-observer.ts

@@ -35,8 +35,7 @@ export function useTabObserver(activeSelector: string): TabObserver {
       height: active.offsetHeight,
     };
 
-    if (!ready.value)
-      requestAnimationFrame(() => requestAnimationFrame(() => ready.value = true));
+    ready.value = true;
   }
 
   useResizeObserver(listRef, update);