@youcan/celeste 0.11.0 → 0.13.0

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-item.vue

@@ -30,12 +30,14 @@ function onKeydown(e: KeyboardEvent) {
 <style scoped>
 .celeste-segmented-control-item {
   display: flex;
+  position: relative;
+  z-index: 1;
   align-items: center;
   gap: var(--spacing-6);
   justify-content: center;
   width: 100%;
   padding: var(--spacing-4);
-  transition: all var(--animation-fast) ease-out;
+  transition: color var(--animation-normal) ease-out;
   border: none;
   border-radius: var(--radius-6);
   background-color: transparent;
@@ -44,8 +46,6 @@ function onKeydown(e: KeyboardEvent) {
   cursor: pointer;
 
   &[data-state='on'] {
-    background-color: var(--color-bg-white-0);
-    box-shadow: var(--shadow-toggle-switch);
     color: var(--color-text-strong-950);
     pointer-events: none;
   }

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

@@ -2,30 +2,50 @@
 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'] }>();
 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
-    :class="clsx('celeste-segmented-control', props.class)"
-    v-bind="forwarded"
-    type="single"
-  >
-    <slot />
-  </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>
 .celeste-segmented-control {
   display: flex;
+  position: relative;
   gap: var(--spacing-4);
+  isolation: isolate;
   align-items: center;
   width: 100%;
   padding: var(--spacing-4);
@@ -36,4 +56,24 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     flex-direction: column;
   }
 }
+
+.celeste-segmented-control-indicator {
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  transition-property: transform, width, height;
+  transition-duration: var(--animation-normal);
+  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
+  border-radius: var(--radius-6);
+  background-color: var(--color-bg-white-0);
+  box-shadow: var(--shadow-toggle-switch);
+  pointer-events: none;
+}
+
+@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/switch/switch.vue

@@ -25,39 +25,39 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 .celeste-switch {
   --width: 26px;
   --height: 16px;
+  --thumb-size: 12px;
+  --thumb-inset: 1px;
+  --travel: calc(var(--width) - var(--thumb-size) - var(--thumb-inset) * 2 - 2px);
   --bg-color: var(--color-bg-soft-200);
-  --animation-function: cubic-bezier(0.18, 0.89, 0.43, 1.19);
 
   position: relative;
+  box-sizing: border-box;
   width: var(--width);
   height: var(--height);
-  transition: background var(--animation-fast) ease-out;
+  transition: background-color var(--animation-fast) ease-out;
   border: 1px solid transparent;
   border-radius: var(--radius-full);
   background-color: var(--bg-color);
   cursor: pointer;
 
   .celeste-switch-thumb {
-    --thumb-size: 12px;
     --thumb-hole: 4px;
+    --direction: 1;
 
     position: absolute;
     box-sizing: border-box;
     width: var(--thumb-size);
     height: var(--thumb-size);
-    transform: translateY(-50%);
-    transition-property: inset-inline-start, width, height;
-    transition-duration: var(--animation-fast);
-    transition-timing-function: var(--animation-function), ease-out, ease-out;
+    transform: translateY(-50%) scale(var(--thumb-scale, 1));
+    transition: transform var(--animation-fast) ease-out;
     border-radius: var(--radius-full);
     background-color: var(--color-static-white);
     box-shadow: var(--shadow-toggle-switch);
     inset-block-start: 50%;
-    inset-inline-start: 1px;
-    will-change: transform;
+    inset-inline-start: var(--thumb-inset);
 
     &[data-state='checked'] {
-      inset-inline-start: calc(100% - var(--thumb-size) - 1px);
+      transform: translateY(-50%) translateX(calc(var(--travel) * var(--direction))) scale(var(--thumb-scale, 1));
     }
 
     &::before {
@@ -66,11 +66,15 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       width: var(--thumb-hole);
       height: var(--thumb-hole);
       margin: auto;
-      transition: background var(--animation-fast) ease-out;
+      transition: background-color var(--animation-fast) ease-out;
       border-radius: var(--radius-full);
       background-color: var(--bg-color);
       inset: var(--spacing-0);
     }
+
+    :dir(rtl) & {
+      --direction: -1;
+    }
   }
 
   &[aria-checked='true'] {
@@ -79,25 +83,22 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
   &:disabled {
     --bg-color: var(--color-bg-white-0);
+    --thumb-inset: var(--spacing-2);
+    --travel: calc(var(--width) - var(--thumb-size) - var(--thumb-inset) - 2px);
 
     border-color: var(--color-stroke-soft-200);
     background-color: var(--bg-color);
     pointer-events: none;
 
     .celeste-switch-thumb {
-      inset-inline-start: var(--spacing-2);
       border-color: var(--color-bg-soft-200);
       background-color: var(--color-bg-soft-200);
       box-shadow: none;
-
-      &[data-state='checked'] {
-        inset-inline-start: calc(100% - var(--thumb-size));
-      }
     }
   }
 
-  &:active:not(:disabled) .celeste-switch-thumb {
-    --thumb-size: 10px;
+  &:active:not(:disabled) {
+    --thumb-scale: 0.833;
   }
 
   &:hover:not(:active, :disabled) {

package/src/components/tab-menu/stories/tab-menu.stories.ts

@@ -237,3 +237,42 @@ export const IconsOnly: Story = {
     `,
   }),
 };
+
+export const FilledAndScrollable: Story = {
+  args: {
+    orientation: 'horizontal',
+    defaultValue: 'orders',
+  },
+  render: args => ({
+    components: { TabMenu, TabMenuList, TabMenuItem, TabMenuContent, HintText },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 32px; width: 480px; margin: 0 auto;">
+        <TabMenu v-bind="args">
+          <TabMenuList fill align="center">
+            <TabMenuItem value="orders">Orders</TabMenuItem>
+            <TabMenuItem value="products">Products</TabMenuItem>
+            <TabMenuItem value="customers">Customers</TabMenuItem>
+          </TabMenuList>
+          <TabMenuContent value="orders"><div style="padding: 16px;"><HintText text="fill + align center" /></div></TabMenuContent>
+          <TabMenuContent value="products"><div style="padding: 16px;"><HintText text="fill + align center" /></div></TabMenuContent>
+          <TabMenuContent value="customers"><div style="padding: 16px;"><HintText text="fill + align center" /></div></TabMenuContent>
+        </TabMenu>
+
+        <TabMenu v-bind="args">
+          <TabMenuList scrollable :bordered="false">
+            <TabMenuItem value="orders">Orders</TabMenuItem>
+            <TabMenuItem value="products">Products</TabMenuItem>
+            <TabMenuItem value="customers">Customers</TabMenuItem>
+            <TabMenuItem value="discounts">Discounts</TabMenuItem>
+            <TabMenuItem value="analytics">Analytics</TabMenuItem>
+            <TabMenuItem value="marketing">Marketing</TabMenuItem>
+          </TabMenuList>
+          <TabMenuContent value="orders"><div style="padding: 16px;"><HintText text="scrollable, no border" /></div></TabMenuContent>
+        </TabMenu>
+      </div>
+    `,
+  }),
+};

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

@@ -23,7 +23,9 @@ const forwardedProps = useForwardProps(delegatedProps);
     <span v-if="$slots.default" class="celeste-tab-menu-item-label">
       <slot />
     </span>
-    <slot name="postfix" />
+    <span v-if="$slots.postfix" class="celeste-tab-menu-item-postfix">
+      <slot name="postfix" />
+    </span>
   </TabsTrigger>
 </template>
 
@@ -36,17 +38,20 @@ const forwardedProps = useForwardProps(delegatedProps);
   justify-content: flex-start;
   width: 100%;
   padding: var(--spacing-8);
-  transition: all var(--animation-fast) var(--animation-function);
+  transition:
+    background-color var(--animation-fast) var(--animation-function),
+    color var(--animation-fast) var(--animation-function);
   border: none;
   border-radius: var(--radius-8);
   color: var(--color-text-sub-600);
-  font-size: var(--font-size-10);
+  font: var(--label-sm);
   cursor: pointer;
   gap: var(--spacing-6);
 
   &:deep(i) {
     width: 20px;
     height: 20px;
+    transition: color var(--animation-fast) var(--animation-function);
   }
 
   &:focus {
@@ -54,33 +59,32 @@ const forwardedProps = useForwardProps(delegatedProps);
   }
 
   &[data-orientation='horizontal'] {
-    position: relative;
     width: fit-content;
     padding-block: var(--spacing-14);
     padding-inline: var(--spacing-0);
-
-    &::after {
-      content: '';
-      display: block;
-      position: absolute;
-      inset-inline: 0;
-      inset-block-end: 0;
-      width: 100%;
-      height: 2px;
-      transition: all var(--animation-fast) var(--animation-function);
-      background-color: transparent;
-    }
-  }
-
-  &[data-orientation='vertical'][data-state='active'] {
-    background-color: var(--color-bg-weak-50);
+    background-color: var(--color-bg-white-0);
   }
 
-  &[data-orientation='horizontal'][data-state='active'] {
+  &[data-orientation='vertical'] {
     background-color: var(--color-bg-white-0);
 
-    &::after {
-      background-color: var(--color-primary-base);
+    &:hover,
+    &[data-state='active'] {
+      background-color: var(--color-bg-weak-50);
+    }
+
+    .celeste-tab-menu-item-postfix {
+      display: inline-flex;
+      transform: scale(0.75);
+      transition:
+        transform var(--animation-fast) var(--animation-function),
+        opacity var(--animation-fast) var(--animation-function);
+      opacity: 0;
+    }
+
+    &[data-state='active'] .celeste-tab-menu-item-postfix {
+      transform: scale(1);
+      opacity: 1;
     }
   }
 
@@ -94,14 +98,9 @@ const forwardedProps = useForwardProps(delegatedProps);
     }
   }
 
-  &[data-state='inactive'] {
-    background-color: var(--color-bg-white-0);
-  }
-
   .celeste-tab-menu-item-label {
     flex: 1;
     overflow: hidden;
-    font-size: var(--font-size-2);
     text-align: start;
     text-overflow: ellipsis;
     white-space: nowrap;