@byyuurin/ui 0.0.7 → 0.0.9

package/dist/runtime/components/Breadcrumb.vue

@@ -0,0 +1,108 @@
+<script lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { breadcrumb } from '../theme'
+import type { ComponentAttrs, LinkProps } from '../types'
+
+type SlotProps<T> = (props: { item: T, index: number, active?: boolean }) => any
+
+type DynamicSlots<T extends { slot?: string }, SlotProps, Slot = T['slot']> =
+  Slot extends string
+    ? Record<Slot | `${Slot}-${'leading' | 'label' | 'trailing'}`, SlotProps>
+    : Record<string, never>
+
+export type BreadcrumbSlots<T extends { slot?: string }> = {
+  'item'?: SlotProps<T>
+  'item-leading'?: SlotProps<T>
+  'item-label'?: SlotProps<T>
+  'item-trailing'?: SlotProps<T>
+  'separator'?: (props?: {}) => any
+} & DynamicSlots<T, SlotProps<T>>
+
+export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
+  label?: string
+  icon?: string
+  slot?: string
+}
+
+export interface BreadcrumbProps<T> extends ComponentAttrs<typeof breadcrumb> {
+  /**
+   * The element or component this component should render as.
+   * @default "nav"
+   */
+  as?: PrimitiveProps['as']
+  items?: T[]
+  /**
+   * The icon to use as a separator.
+   * @default app.icons.chevronRight
+   */
+  separatorIcon?: string
+  /**
+   * The key used to get the label from the item.
+   * @default "label"
+   */
+  labelKey?: string
+}
+</script>
+
+<script setup lang="ts" generic="T extends BreadcrumbItem">
+import { Primitive } from 'reka-ui'
+import { computed } from 'vue'
+import { useLocale } from '../composables/useLocale'
+import { useTheme } from '../composables/useTheme'
+import { get, pickLinkProps } from '../utils'
+import Link from './Link.vue'
+import LinkBase from './LinkBase.vue'
+
+const props = withDefaults(defineProps<BreadcrumbProps<T>>(), {
+  as: 'nav',
+  labelKey: 'label',
+})
+
+const slots = defineSlots<BreadcrumbSlots<T>>()
+
+const { dir } = useLocale()
+const { theme, generateStyle } = useTheme()
+
+const separatorIcon = computed(() => props.separatorIcon || (dir.value === 'rtl' ? theme.value.app.icons.chevronLeft : theme.value.app.icons.chevronRight))
+
+const style = computed(() => generateStyle('breadcrumb', props))
+</script>
+
+<template>
+  <Primitive :as="props.as" aria-label="breadcrumb" :class="style.root({ class: [props.class, props.ui?.root] })">
+    <ol :class="style.list({ class: props.ui?.list })">
+      <template v-for="(item, index) in props.items" :key="index">
+        <li :class="style.item({ class: props.ui?.item })">
+          <Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+            <LinkBase
+              v-bind="slotProps"
+              as="span"
+              :aria-current="active && (index === items!.length - 1) ? 'page' : undefined"
+              :class="style.link({ class: props.ui?.link, active: index === items!.length - 1, disabled: item.disabled, to: !!item.to })"
+            >
+              <slot :name="item.slot || 'item'" :item="item" :index="index">
+                <slot :name="`${item.slot || 'item'}-leading`" :item="item" :active="index === items!.length - 1" :index="index">
+                  <span v-if="item.icon" :class="style.linkLeadingIcon({ class: [item.icon, props.ui?.linkLeadingIcon] })"></span>
+                </slot>
+
+                <span v-if="get(item, props.labelKey) || slots[`${item.slot || 'item'}-label`]" :class="style.linkLabel({ class: props.ui?.linkLabel })">
+                  <slot :name="`${item.slot || 'item'}-label`" :item="item" :active="index === items!.length - 1" :index="index">
+                    {{ get(item, props.labelKey) }}
+                  </slot>
+                </span>
+
+                <slot :name="`${item.slot || 'item'}-trailing`" :item="item" :active="index === items!.length - 1" :index="index"></slot>
+              </slot>
+            </LinkBase>
+          </Link>
+        </li>
+
+        <li v-if="index < items!.length - 1" role="presentation" aria-hidden="true" :class="style.separator({ class: props.ui?.separator })">
+          <slot name="separator">
+            <span :class="style.separatorIcon({ class: [separatorIcon, props.ui?.separatorIcon] })"></span>
+          </slot>
+        </li>
+      </template>
+    </ol>
+  </Primitive>
+</template>

package/dist/runtime/components/Button.vue

@@ -6,14 +6,14 @@ import type { ComponentAttrs } from '../types'
 import type { LinkProps } from './Link.vue'
 
 export interface ButtonSlots {
-  default?: (props?: any) => any
-  prefix?: (props?: any) => any
-  suffix?: (props?: any) => any
+  default?: (props?: {}) => any
+  leading?: (props?: {}) => any
+  trailing?: (props?: {}) => any
 }
 
 type ButtonVariants = VariantProps<typeof button>
 
-export interface ButtonProps extends ComponentAttrs<typeof button>, UseComponentIconsProps, Omit<LinkProps, 'raw' | 'custom'> {
+export interface ButtonProps extends ComponentAttrs<typeof button>, UseComponentIconsProps, Omit<LinkProps, 'raw' | 'custom' | 'underline'> {
   icon?: string
   label?: string
   variant?: ButtonVariants['variant']
@@ -40,22 +40,21 @@ const props = withDefaults(defineProps<ButtonProps>(), {
 const slots = defineSlots<ButtonSlots>()
 
 const { size, orientation } = useButtonGroup(props)
-const { isPrefix, isSuffix, prefixIconName, suffixIconName } = useComponentIcons(
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(
   computed(() => ({ ...props, loading: props.loading })),
 )
 
 const linkProps = useForwardProps(pickLinkProps(props))
 
-const { theme, createStyler } = useTheme()
+const { generateStyle } = useTheme()
 
 const style = computed(() => {
-  const styler = createStyler(theme.value.button)
-  return styler({
+  return generateStyle('button', {
     ...props,
     size: size.value,
     groupOrientation: orientation.value,
-    prefix: isPrefix.value,
-    suffix: isSuffix.value,
+    leading: isLeading.value,
+    trailing: isTrailing.value,
     class: [
       props.class,
       props.active ? props.activeClass : props.inactiveClass,
@@ -73,10 +72,10 @@ const style = computed(() => {
     v-bind="omit(linkProps, ['type', 'disabled', 'activeClass', 'inactiveClass', 'disableClass'])"
     raw
   >
-    <slot name="prefix">
+    <slot name="leading">
       <span
-        v-if="isPrefix && prefixIconName"
-        :class="style.prefixIcon({ class: [prefixIconName, props.ui?.prefixIcon] })"
+        v-if="isLeading && leadingIconName"
+        :class="style.leadingIcon({ class: [leadingIconName, props.ui?.leadingIcon] })"
       ></span>
     </slot>
     <span
@@ -85,10 +84,10 @@ const style = computed(() => {
     >
       <slot>{{ label }}</slot>
     </span>
-    <slot name="suffix">
+    <slot name="trailing">
       <span
-        v-if="isSuffix && suffixIconName"
-        :class="style.suffixIcon({ class: [suffixIconName, props.ui?.suffixIcon] })"
+        v-if="isTrailing && trailingIconName"
+        :class="style.trailingIcon({ class: [trailingIconName, props.ui?.trailingIcon] })"
       ></span>
     </slot>
   </Link>

package/dist/runtime/components/ButtonGroup.vue

@@ -4,22 +4,27 @@ import type { PrimitiveProps } from 'reka-ui'
 import type { buttonGroup } from '../theme'
 import type { ComponentAttrs } from '../types'
 
+export interface ButtonGroupSlots {
+  default?: (props?: {}) => any
+}
+
 type ButtonGroupVariant = VariantProps<typeof buttonGroup>
 
-export interface ButtonGroupProps extends Omit<ComponentAttrs<typeof buttonGroup>, 'ui'>, Pick<PrimitiveProps, 'as'> {
+export interface ButtonGroupProps extends Omit<ComponentAttrs<typeof buttonGroup>, 'ui'> {
+  /**
+   * The element or component this component should render as.
+   * @default "div"
+   */
+  as?: PrimitiveProps['as']
   size?: ButtonGroupVariant['size']
   orientation?: ButtonGroupVariant['orientation']
 }
-
-export interface ButtonGroupSlots {
-  default?: (props?: any) => any
-}
 </script>
 
 <script setup lang="ts">
 import { Primitive } from 'reka-ui'
 import { computed } from 'vue'
-import { provideButtonGroup } from '../composables/useButtonGroup'
+import { provideButtonGroup } from '../app/injections'
 import { useTheme } from '../composables/useTheme'
 
 const props = withDefaults(defineProps<ButtonGroupProps>(), {
@@ -28,16 +33,10 @@ const props = withDefaults(defineProps<ButtonGroupProps>(), {
 
 defineSlots<ButtonGroupSlots>()
 
-provideButtonGroup(computed(() => ({
-  size: props.size,
-  orientation: props.orientation,
-})))
+provideButtonGroup(computed(() => props))
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.buttonGroup)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('buttonGroup', props))
 </script>
 
 <template>

package/dist/runtime/components/Calendar.vue

@@ -0,0 +1,176 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { DateValue } from '@internationalized/date'
+import type { CalendarCellTriggerProps, CalendarRootEmits, CalendarRootProps, DateRange, RangeCalendarRootEmits } from 'reka-ui'
+import type { calendar } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+export interface CalendarEmits<R extends boolean, M extends boolean> extends Omit<CalendarRootEmits & RangeCalendarRootEmits, 'update:modelValue'> {
+  'update:modelValue': [date: CalendarModelValue<R, M>]
+}
+
+export interface CalendarSlots {
+  'heading'?: (props: { value: string }) => any
+  'day'?: (props: Pick<CalendarCellTriggerProps, 'day'>) => any
+  'week-day'?: (props: { day: string }) => any
+}
+
+type CalendarVariants = VariantProps<typeof calendar>
+
+type CalendarModelValue<R extends boolean = false, M extends boolean = false> = R extends true
+  ? DateRange
+  : M extends true ? DateValue[] : DateValue
+
+export interface CalendarProps<R extends boolean, M extends boolean> extends ComponentAttrs<typeof calendar>, Omit<CalendarRootProps, 'modelValue' | 'defaultValue' | 'dir' | 'locale' | 'calendarLabel' | 'multiple'> {
+  /**
+   * The icon to use for the next year control.
+   * @default app.icons.chevronDoubleRight
+   */
+  nextYearIcon?: string
+  /**
+   * The icon to use for the next month control.
+   * @default app.icons.chevronRight
+   */
+  nextMonthIcon?: string
+  /**
+   * The icon to use for the previous year control.
+   * @default app.icons.chevronDoubleLeft
+   */
+  prevYearIcon?: string
+  /**
+   * The icon to use for the previous month control.
+   * @default app.icons.chevronLeft
+   */
+  prevMonthIcon?: string
+  /**
+   * @default "md"
+   */
+  size?: CalendarVariants['size']
+  /** Whether or not a range of dates can be selected */
+  range?: R & boolean
+  /** Whether or not multiple dates can be selected */
+  multiple?: M & boolean
+  /** Show month controls */
+  monthControls?: boolean
+  /** Show year controls */
+  yearControls?: boolean
+  defaultValue?: CalendarModelValue<R, M>
+  modelValue?: CalendarModelValue<R, M>
+}
+</script>
+
+<script setup lang="ts" generic="R extends boolean = false, M extends boolean = false">
+import { reactiveOmit } from '@vueuse/core'
+import { useForwardPropsEmits } from 'reka-ui'
+import { Calendar as BaseCalendar, RangeCalendar } from 'reka-ui/namespaced'
+import { computed } from 'vue'
+import { useLocale } from '../composables/useLocale'
+import { useTheme } from '../composables/useTheme'
+import Button from './Button.vue'
+
+const props = withDefaults(defineProps<CalendarProps<R, M>>(), {
+  fixedWeeks: true,
+  monthControls: true,
+  yearControls: true,
+})
+const emit = defineEmits<CalendarEmits<R, M>>()
+defineSlots<CalendarSlots>()
+
+const rootProps = useForwardPropsEmits(reactiveOmit(props, 'range', 'modelValue', 'defaultValue', 'size', 'monthControls', 'yearControls', 'class', 'ui'), emit)
+
+const { code: locale, dir, t } = useLocale()
+const { theme, generateStyle } = useTheme()
+
+const nextYearIcon = computed(() => props.nextYearIcon || (dir.value === 'rtl' ? theme.value.app.icons.chevronDoubleLeft : theme.value.app.icons.chevronDoubleRight))
+const nextMonthIcon = computed(() => props.nextMonthIcon || (dir.value === 'rtl' ? theme.value.app.icons.chevronLeft : theme.value.app.icons.chevronRight))
+const prevYearIcon = computed(() => props.prevYearIcon || (dir.value === 'rtl' ? theme.value.app.icons.chevronDoubleRight : theme.value.app.icons.chevronDoubleLeft))
+const prevMonthIcon = computed(() => props.prevMonthIcon || (dir.value === 'rtl' ? theme.value.app.icons.chevronRight : theme.value.app.icons.chevronLeft))
+
+function paginateYear(date: DateValue, sign: -1 | 1) {
+  if (sign === -1)
+    return date.subtract({ years: 1 })
+
+  return date.add({ years: 1 })
+}
+
+const Calendar = computed(() => props.range ? RangeCalendar : BaseCalendar)
+
+const style = computed(() => generateStyle('calendar', props))
+</script>
+
+<template>
+  <Calendar.Root
+    v-slot="{ weekDays, grid }"
+    v-bind="rootProps"
+    :model-value="props.modelValue"
+    :default-value="props.defaultValue"
+    :locale="locale"
+    :dir="dir"
+    :class="style.root({ class: [props.class, props.ui?.root] })"
+  >
+    <Calendar.Header :class="style.header({ class: props.ui?.header })">
+      <Calendar.Prev v-if="props.yearControls" :prev-page="date => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
+        <Button :icon="prevYearIcon" :size="props.size" variant="ghost" />
+      </Calendar.Prev>
+      <Calendar.Prev v-if="props.monthControls" :aria-label="t('calendar.prevMonth')" as-child>
+        <Button :icon="prevMonthIcon" :size="props.size" variant="ghost" />
+      </Calendar.Prev>
+
+      <Calendar.Heading v-slot="{ headingValue }" :class="style.heading({ class: props.ui?.heading })">
+        <slot name="heading" :value="headingValue">
+          {{ headingValue }}
+        </slot>
+      </Calendar.Heading>
+      <Calendar.Next v-if="props.monthControls" :aria-label="t('calendar.nextMonth')" as-child>
+        <Button :icon="nextMonthIcon" :size="props.size" variant="ghost" />
+      </Calendar.Next>
+      <Calendar.Next v-if="props.yearControls" :next-page="(date) => paginateYear(date, 1)" :aria-label="t('calendar.nextYear')" as-child>
+        <Button :icon="nextYearIcon" :size="props.size" variant="ghost" />
+      </Calendar.Next>
+    </Calendar.Header>
+    <div :class="style.body({ class: props.ui?.body })">
+      <Calendar.Grid
+        v-for="month in grid"
+        :key="month.value.toString()"
+        :class="style.grid({ class: props.ui?.grid })"
+      >
+        <Calendar.GridHead>
+          <Calendar.GridRow :class="style.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })">
+            <Calendar.HeadCell v-for="day in weekDays" :key="day" :class="style.headCell({ class: props.ui?.headCell })">
+              <slot name="week-day" :day="day">
+                {{ day }}
+              </slot>
+            </Calendar.HeadCell>
+          </Calendar.GridRow>
+        </Calendar.GridHead>
+        <Calendar.GridBody :class="style.gridBody({ class: props.ui?.gridBody })">
+          <Calendar.GridRow
+            v-for="(weekDates, index) in month.rows"
+            :key="`weekDates-${index}`"
+            :class="style.gridRow({ class: props.ui?.gridRow })"
+          >
+            <Calendar.Cell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+              :class="style.cell({ class: props.ui?.cell })"
+            >
+              <Calendar.CellTrigger
+                v-slot="{ disabled, unavailable }"
+                :day="weekDate"
+                :month="month.value"
+                as-child
+              >
+                <div :class="style.cellTrigger({ class: props.ui?.cellTrigger, disabled: disabled || unavailable })">
+                  <slot name="day" :day="weekDate">
+                    {{ weekDate.day }}
+                  </slot>
+                </div>
+              </Calendar.CellTrigger>
+            </Calendar.Cell>
+          </Calendar.GridRow>
+        </Calendar.GridBody>
+      </Calendar.Grid>
+    </div>
+  </Calendar.Root>
+</template>

package/dist/runtime/components/Card.vue

@@ -8,13 +8,18 @@ export interface CardSlots {
   default?: (props?: {}) => any
   content?: (props?: {}) => any
   header?: (props?: {}) => any
-  title?: (props?: any) => any
-  description?: (props?: any) => any
+  title?: (props?: {}) => any
+  description?: (props?: {}) => any
   footer?: (props?: {}) => any
 }
 
 type CardVariants = VariantProps<typeof card>
+
 export interface CardProps extends ComponentAttrs<typeof card> {
+  /**
+   * The element or component this component should render as.
+   * @default "div"
+   */
   as?: PrimitiveProps['as']
   variant?: CardVariants['variant']
   title?: string
@@ -30,11 +35,8 @@ import { useTheme } from '../composables/useTheme'
 const props = withDefaults(defineProps<CardProps>(), {})
 const slots = defineSlots<CardSlots>()
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.card)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('card', props))
 </script>
 
 <template>

package/dist/runtime/components/Carousel.vue

@@ -11,9 +11,18 @@ import type { AcceptableValue, PrimitiveProps } from 'reka-ui'
 import type { carousel } from '../theme'
 import type { ButtonProps, ComponentAttrs } from '../types'
 
+export interface CarouselSlots<T> {
+  default?: (props: { item: T, index: number }) => any
+}
+
 type CarouselVariants = VariantProps<typeof carousel>
 
-export interface CarouselProps<T> extends ComponentAttrs<typeof carousel>, Pick<PrimitiveProps, 'as'>, Omit<EmblaOptionsType, 'axis' | 'container' | 'slides' | 'direction'> {
+export interface CarouselProps<T> extends ComponentAttrs<typeof carousel>, Omit<EmblaOptionsType, 'axis' | 'container' | 'slides' | 'direction'> {
+  /**
+   * The element or component this component should render as.
+   * @default "div"
+   */
+  as?: PrimitiveProps['as']
   /**
    * Configure the prev button when arrows are enabled.
    * @default { size: 'md', variant: 'link' }
@@ -21,7 +30,7 @@ export interface CarouselProps<T> extends ComponentAttrs<typeof carousel>, Pick<
   prev?: ButtonProps
   /**
    * The icon displayed in the prev button.
-   * @default `app.icons.arrowLeft`
+   * @default app.icons.chevronLeft
    */
   prevIcon?: string
   /**
@@ -31,7 +40,7 @@ export interface CarouselProps<T> extends ComponentAttrs<typeof carousel>, Pick<
   next?: ButtonProps
   /**
    * The icon displayed in the next button.
-   * @default `app.icons.arrowRight`
+   * @default app.icons.chevronRight
    */
   nextIcon?: string
   /**
@@ -46,7 +55,6 @@ export interface CarouselProps<T> extends ComponentAttrs<typeof carousel>, Pick<
   dots?: boolean
   orientation?: CarouselVariants['orientation']
   items?: T[]
-  dir?: 'rtl' | 'ltr'
   /**
    * Enable Autoplay plugin
    * @link https://www.embla-carousel.com/plugins/autoplay/
@@ -78,10 +86,6 @@ export interface CarouselProps<T> extends ComponentAttrs<typeof carousel>, Pick<
    */
   wheelGestures?: boolean | WheelGesturesPluginOptions
 }
-
-export interface CarouselSlots<T> {
-  default?: (props: { item: T, index: number }) => any
-}
 </script>
 
 <script setup lang="ts" generic="T extends AcceptableValue">
@@ -89,6 +93,7 @@ import { computedAsync, reactivePick } from '@vueuse/core'
 import useEmblaCarousel from 'embla-carousel-vue'
 import { Primitive, useForwardProps } from 'reka-ui'
 import { computed, onMounted, ref, watch } from 'vue'
+import { useLocale } from '../composables/useLocale'
 import { useTheme } from '../composables/useTheme'
 import Button from './Button.vue'
 
@@ -97,8 +102,6 @@ const props = withDefaults(defineProps<CarouselProps<T>>(), {
   arrows: false,
   dots: false,
 
-  dir: 'ltr',
-
   // Embla Options
   active: true,
   align: 'center',
@@ -129,20 +132,18 @@ defineSlots<CarouselSlots<T>>()
 
 const rootProps = useForwardProps(reactivePick(props, 'active', 'align', 'breakpoints', 'containScroll', 'dragFree', 'dragThreshold', 'duration', 'inViewThreshold', 'loop', 'skipSnaps', 'slidesToScroll', 'startIndex', 'watchDrag', 'watchResize', 'watchSlides', 'watchFocus'))
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.carousel)
-  return styler(props)
-})
+const { t, dir } = useLocale()
+const { theme, generateStyle } = useTheme()
+const style = computed(() => generateStyle('carousel', props))
 
-const prevIcon = computed(() => props.prevIcon || (props.dir === 'rtl' ? theme.value.app.icons.arrowRight : theme.value.app.icons.arrowLeft))
-const nextIcon = computed(() => props.nextIcon || (props.dir === 'rtl' ? theme.value.app.icons.arrowLeft : theme.value.app.icons.arrowRight))
+const prevIcon = computed(() => props.prevIcon || (dir.value === 'rtl' ? theme.value.app.icons.chevronRight : theme.value.app.icons.chevronLeft))
+const nextIcon = computed(() => props.nextIcon || (dir.value === 'rtl' ? theme.value.app.icons.chevronLeft : theme.value.app.icons.chevronRight))
 
 const options = computed<EmblaOptionsType>(() => ({
   ...(props.fade ? { align: 'center', containScroll: false } : {}),
   ...rootProps.value,
   axis: props.orientation === 'horizontal' ? 'x' : 'y',
-  direction: props.dir === 'rtl' ? 'rtl' : 'ltr',
+  direction: dir.value === 'rtl' ? 'rtl' : 'ltr',
 }))
 
 const plugins = computedAsync<EmblaPluginType[]>(async () => {
@@ -254,7 +255,6 @@ defineExpose({
     role="region"
     aria-roledescription="carousel"
     tabindex="0"
-    :dir="props.dir"
     :class="style.root({ class: [props.class, props.ui?.root] })"
     @keydown="onKeyDown"
   >
@@ -279,7 +279,7 @@ defineExpose({
           :icon="prevIcon"
           size="md"
           variant="outline"
-          aria-label="prev"
+          :aria-label="t('carousel.prev')"
           v-bind="typeof props.prev === 'object' ? props.prev : undefined"
           :class="style.prev({ class: props.ui?.prev })"
           @click="scrollPrev"
@@ -289,7 +289,7 @@ defineExpose({
           :icon="nextIcon"
           size="md"
           variant="outline"
-          aria-label="next"
+          :aria-label="t('carousel.next')"
           v-bind="typeof props.next === 'object' ? props.next : undefined"
           :class="style.next({ class: props.ui?.next })"
           @click="scrollNext"
@@ -299,7 +299,7 @@ defineExpose({
       <div v-if="props.dots" :class="style.dots({ class: props.ui?.dots })">
         <template v-for="(_, index) in scrollSnaps" :key="index">
           <button
-            :aria-label="`Go to ${index + 1}`"
+            :aria-label="t('carousel.goto', { page: index + 1 })"
             :class="style.dot({ class: props.ui?.dot, active: selectedIndex === index })"
             @click="scrollTo(index)"
           ></button>

package/dist/runtime/components/Checkbox.vue

@@ -4,9 +4,22 @@ import type { CheckboxRootProps, PrimitiveProps } from 'reka-ui'
 import type { checkbox } from '../theme'
 import type { ComponentAttrs } from '../types'
 
+export interface CheckboxEmits {
+  (event: 'change', payload: Event): void
+}
+
+export interface CheckboxSlots {
+  label?: (props: { label?: string }) => any
+  description?: (props: { description?: string }) => any
+}
+
 type CheckboxVariants = VariantProps<typeof checkbox>
 
 export interface CheckboxProps extends ComponentAttrs<typeof checkbox>, Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'> {
+  /**
+   * The element or component this component should render as.
+   * @default "div"
+   */
   as?: PrimitiveProps['as']
   label?: string
   description?: string
@@ -22,15 +35,6 @@ export interface CheckboxProps extends ComponentAttrs<typeof checkbox>, Pick<Che
    */
   indeterminateIcon?: string
 }
-
-export interface CheckboxEmits {
-  (event: 'change', payload: Event): void
-}
-
-export interface CheckboxSlots {
-  label?: (props: { label?: string }) => any
-  description?: (props: { description?: string }) => any
-}
 </script>
 
 <script lang="ts" setup>
@@ -51,11 +55,8 @@ const rootProps = useForwardProps(reactivePick(props, 'required', 'value', 'defa
 
 const id = props.id ?? useId()
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.checkbox)
-  return styler(props)
-})
+const { theme, generateStyle } = useTheme()
+const style = computed(() => generateStyle('checkbox', props))
 
 function onUpdate(value: any) {
   // @ts-expect-error - 'target' does not exist in type 'EventInit'