@youcan/celeste 0.13.0 → 0.14.0

package/src/components/calendar/calendar.vue

@@ -15,7 +15,6 @@ import {
   CalendarNext,
   CalendarPrev,
   CalendarRoot,
-  ConfigProvider,
   useForwardPropsEmits,
 } from 'reka-ui';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
@@ -37,7 +36,7 @@ const emits = defineEmits<CalendarRootEmits>();
 const delegatedProps = useDelegatedProps(props, ['class', 'markedDates']);
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
-const direction = useDirection();
+const dir = useDirection(() => props.dir);
 
 function isMarked(date: DateValue): boolean {
   return props.markedDates?.some(marked => isEqualDay(marked, date)) ?? false;
@@ -49,70 +48,69 @@ function weekdayLabel(day: string): string {
 </script>
 
 <template>
-  <ConfigProvider :dir="props.dir ?? direction">
-    <CalendarRoot
-      v-slot="{ weekDays, grid }"
-      v-bind="forwarded"
-      :class="clsx('celeste-calendar', props.class)"
-    >
-      <div class="celeste-calendar-header">
-        <CalendarPrev as-child>
-          <button type="button" class="celeste-calendar-nav">
-            <i class="i-celeste-arrow-left-s-line" />
-          </button>
-        </CalendarPrev>
-        <CalendarHeading class="celeste-calendar-heading" />
-        <CalendarNext as-child>
-          <button type="button" class="celeste-calendar-nav">
-            <i class="i-celeste-arrow-right-s-line" />
-          </button>
-        </CalendarNext>
-      </div>
-
-      <div class="celeste-calendar-months">
-        <CalendarGrid
-          v-for="month in grid"
-          :key="month.value.toString()"
-          class="celeste-calendar-grid"
-        >
-          <CalendarGridHead>
-            <CalendarGridRow class="celeste-calendar-week">
-              <CalendarHeadCell
-                v-for="day in weekDays"
-                :key="day"
-                class="celeste-calendar-weekday"
-              >
-                {{ weekdayLabel(day) }}
-              </CalendarHeadCell>
-            </CalendarGridRow>
-          </CalendarGridHead>
-          <CalendarGridBody class="celeste-calendar-body">
-            <CalendarGridRow
-              v-for="(weekDates, index) in month.rows"
-              :key="`week-${index}`"
-              class="celeste-calendar-week"
+  <CalendarRoot
+    v-slot="{ weekDays, grid }"
+    v-bind="forwarded"
+    :class="clsx('celeste-calendar', props.class)"
+    :dir="dir"
+  >
+    <div class="celeste-calendar-header">
+      <CalendarPrev as-child>
+        <button type="button" class="celeste-calendar-nav">
+          <i class="i-celeste-arrow-left-s-line" />
+        </button>
+      </CalendarPrev>
+      <CalendarHeading class="celeste-calendar-heading" />
+      <CalendarNext as-child>
+        <button type="button" class="celeste-calendar-nav">
+          <i class="i-celeste-arrow-right-s-line" />
+        </button>
+      </CalendarNext>
+    </div>
+
+    <div class="celeste-calendar-months">
+      <CalendarGrid
+        v-for="month in grid"
+        :key="month.value.toString()"
+        class="celeste-calendar-grid"
+      >
+        <CalendarGridHead>
+          <CalendarGridRow class="celeste-calendar-week">
+            <CalendarHeadCell
+              v-for="day in weekDays"
+              :key="day"
+              class="celeste-calendar-weekday"
+            >
+              {{ weekdayLabel(day) }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody class="celeste-calendar-body">
+          <CalendarGridRow
+            v-for="(weekDates, index) in month.rows"
+            :key="`week-${index}`"
+            class="celeste-calendar-week"
+          >
+            <CalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+              class="celeste-calendar-cell"
             >
-              <CalendarCell
-                v-for="weekDate in weekDates"
-                :key="weekDate.toString()"
-                :date="weekDate"
-                class="celeste-calendar-cell"
+              <CalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+                class="celeste-calendar-day"
+                :data-marked="isMarked(weekDate) ? '' : undefined"
               >
-                <CalendarCellTrigger
-                  :day="weekDate"
-                  :month="month.value"
-                  class="celeste-calendar-day"
-                  :data-marked="isMarked(weekDate) ? '' : undefined"
-                >
-                  <span class="celeste-calendar-day-number">{{ weekDate.day }}</span>
-                </CalendarCellTrigger>
-              </CalendarCell>
-            </CalendarGridRow>
-          </CalendarGridBody>
-        </CalendarGrid>
-      </div>
-    </CalendarRoot>
-  </ConfigProvider>
+                <span class="celeste-calendar-day-number">{{ weekDate.day }}</span>
+              </CalendarCellTrigger>
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </div>
+  </CalendarRoot>
 </template>
 
 <style scoped lang="scss">

package/src/components/combobox/combobox-root.vue

@@ -8,15 +8,19 @@ const emits = defineEmits<ComboboxRootEmits>();
 
 const forwarded = useForwardPropsEmits(props, emits);
 
-const direction = useDirection();
+const dir = useDirection(() => props.dir);
 </script>
 
 <template>
-  <ConfigProvider :dir="props.dir ?? direction">
-    <ComboboxRoot class="celeste-combobox-root" v-bind="forwarded">
+  <ComboboxRoot
+    class="celeste-combobox-root"
+    v-bind="forwarded"
+    :dir="dir"
+  >
+    <ConfigProvider :dir="dir">
       <slot />
-    </ComboboxRoot>
-  </ConfigProvider>
+    </ConfigProvider>
+  </ComboboxRoot>
 </template>
 
 <style lang="scss" scoped>

package/src/components/command/command-root.vue

@@ -20,19 +20,20 @@ const delegatedProps = computed(() => {
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
-const direction = useDirection();
+const dir = useDirection(() => props.dir);
 </script>
 
 <template>
-  <ConfigProvider :dir="props.dir ?? direction">
-    <ComboboxRoot
-      v-bind="forwarded"
-      class="celeste-command-root"
-      :class="props.class"
-    >
+  <ComboboxRoot
+    v-bind="forwarded"
+    class="celeste-command-root"
+    :class="props.class"
+    :dir="dir"
+  >
+    <ConfigProvider :dir="dir">
       <slot />
-    </ComboboxRoot>
-  </ConfigProvider>
+    </ConfigProvider>
+  </ComboboxRoot>
 </template>
 
 <style>

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

@@ -3,7 +3,7 @@ import type { PinInputRootEmits, PinInputRootProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import clsx from 'clsx';
-import { ConfigProvider, PinInputRoot, useForwardPropsEmits } from 'reka-ui';
+import { PinInputRoot, useForwardPropsEmits } from 'reka-ui';
 import { useDirection } from '@/composables/use-direction';
 
 export type PinInputType = 'text' | 'number';
@@ -21,19 +21,18 @@ const delegatedProps = reactiveOmit(props, 'class', 'hasError');
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
-const direction = useDirection();
+const dir = useDirection(() => props.dir);
 </script>
 
 <template>
-  <ConfigProvider :dir="props.dir ?? direction">
-    <PinInputRoot
-      v-bind="forwarded"
-      :class="clsx('celeste-digit-input', props.class)"
-      :data-error="hasError"
-    >
-      <slot />
-    </PinInputRoot>
-  </ConfigProvider>
+  <PinInputRoot
+    v-bind="forwarded"
+    :class="clsx('celeste-digit-input', props.class)"
+    :data-error="hasError"
+    :dir="dir"
+  >
+    <slot />
+  </PinInputRoot>
 </template>
 
 <style scoped lang="scss">

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

@@ -12,18 +12,19 @@ const emits = defineEmits<DropdownMenuRootEmits>();
 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">
-    <DropdownMenuRoot
-      v-bind="forwarded"
-      :class="clsx('celeste-dropdown-menu', props.class)"
-    >
+  <DropdownMenuRoot
+    v-bind="forwarded"
+    :class="clsx('celeste-dropdown-menu', props.class)"
+    :dir="dir"
+  >
+    <ConfigProvider :dir="dir">
       <slot />
-    </DropdownMenuRoot>
-  </ConfigProvider>
+    </ConfigProvider>
+  </DropdownMenuRoot>
 </template>
 
 <style lang="scss" scoped>

package/src/components/index.ts

@@ -15,6 +15,7 @@ export * from './dropdown-menu';
 export * from './file-upload';
 export * from './hint-text';
 export * from './label';
+export * from './mochi';
 export * from './modal';
 export * from './pagination';
 export * from './popover';

package/src/components/mochi/index.ts

@@ -0,0 +1,2 @@
+export * from './mochi.vue';
+export { default as Mochi } from './mochi.vue';