@byyuurin/ui 0.0.8 → 0.0.9

package/dist/runtime/components/Drawer.vue

@@ -1,23 +1,27 @@
 <script lang="ts">
-import type { DialogContentProps } from 'reka-ui'
-import type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { DialogContentProps, DialogRootEmits, DialogRootProps } from 'reka-ui'
 import type { drawer } from '../theme'
-import type { ComponentAttrs } from '../types'
+import type { ButtonProps, ComponentAttrs } from '../types'
 
-export interface DrawerEmits extends DrawerRootEmits {}
+export interface DrawerEmits extends DialogRootEmits {
+  'after-leave': []
+}
 
 export interface DrawerSlots {
   default?: (props?: {}) => any
-  handle?: (props?: {}) => any
   content?: (props?: {}) => any
   header?: (props?: {}) => any
   title?: (props?: {}) => any
   description?: (props?: {}) => any
+  close?: (props?: {}) => any
   body?: (props?: {}) => any
   footer?: (props?: {}) => any
 }
 
-export interface DrawerProps extends ComponentAttrs<typeof drawer>, Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'defaultOpen' | 'direction' | 'fadeFromIndex' | 'fixed' | 'modal' | 'nested' | 'direction' | 'open' | 'scrollLockTimeout' | 'shouldScaleBackground' | 'snapPoints'> {
+type DrawerVariants = VariantProps<typeof drawer>
+
+export interface DrawerProps extends ComponentAttrs<typeof drawer>, DialogRootProps {
   title?: string
   description?: string
   /** The content of the drawer. */
@@ -27,20 +31,29 @@ export interface DrawerProps extends ComponentAttrs<typeof drawer>, Pick<DrawerR
    * @default true
    */
   overlay?: boolean
+  /** @default true */
+  transition?: boolean
+  /**
+   * The direction of the drawer.
+   * @default "bottom"
+   */
+  direction?: DrawerVariants['direction']
   /**
    * Whether to inset the drawer from the edges.
    */
   inset?: boolean
   /**
-   * Render a handle on the drawer.
+   * Render the drawer in a portal.
    * @default true
    */
-  handle?: boolean
+  portal?: boolean
   /**
-   * Render the drawer in a portal.
+   * Display a close button to dismiss the drawer.
    * @default true
    */
-  portal?: boolean
+  close?: ButtonProps | boolean
+  /** @default app.icons.close */
+  closeIcon?: string
   /**
    * When `false`, the drawer will not close when clicking outside or pressing escape.
    * @default true
@@ -51,71 +64,101 @@ export interface DrawerProps extends ComponentAttrs<typeof drawer>, Pick<DrawerR
 
 <script setup lang="ts">
 import { reactivePick } from '@vueuse/core'
-import { useForwardPropsEmits } from 'reka-ui'
-import { DrawerContent, DrawerDescription, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTitle, DrawerTrigger } from 'vaul-vue'
+import { DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, useForwardPropsEmits, VisuallyHidden } from 'reka-ui'
 import { computed, toRef } from 'vue'
+import { useLocale } from '../composables/useLocale'
 import { useTheme } from '../composables/useTheme'
+import Button from './Button.vue'
 
 const props = withDefaults(defineProps<DrawerProps>(), {
   direction: 'bottom',
+  modal: true,
   portal: true,
   overlay: true,
-  handle: true,
+  transition: true,
+  dismissible: true,
+  close: true,
 })
 const emit = defineEmits<DrawerEmits>()
 const slots = defineSlots<DrawerSlots>()
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'activeSnapPoint', 'closeThreshold', 'defaultOpen', 'dismissible', 'fadeFromIndex', 'fixed', 'modal', 'nested', 'direction', 'open', 'scrollLockTimeout', 'shouldScaleBackground', 'snapPoints'), emit)
-const contentProps = toRef(() => props.content)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emit)
+const contentProps = toRef(() => ({
+  ...props.content,
+  ...(slots.content || slots.header || (!props.description && !slots.description)) ? { 'aria-describedby': undefined } : {},
+}))
+const contentEvents = computed(() => {
+  if (props.dismissible)
+    return {}
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.drawer)
-  return styler(props)
+  return {
+    pointerDownOutside: (e: Event) => e.preventDefault(),
+    interactOutside: (e: Event) => e.preventDefault(),
+    escapeKeyDown: (e: Event) => e.preventDefault(),
+  }
 })
+
+const { t } = useLocale()
+const { theme, generateStyle } = useTheme()
+const style = computed(() => generateStyle('drawer', props))
 </script>
 
 <template>
-  <DrawerRoot v-bind="rootProps">
-    <DrawerTrigger v-if="slots.default" as-child :class="props.class">
-      <slot></slot>
-    </DrawerTrigger>
+  <DialogRoot v-slot="{ open }" v-bind="rootProps">
+    <DialogTrigger v-if="slots.default" as-child :class="props.class">
+      <slot :open="open"></slot>
+    </DialogTrigger>
 
-    <DrawerPortal :disabled="!props.portal">
-      <DrawerOverlay v-if="props.overlay" :class="style.overlay({ class: props.ui?.overlay })" />
+    <DialogPortal :disabled="!props.portal">
+      <DialogOverlay v-if="props.overlay" :class="style.overlay({ class: props.ui?.overlay })" />
 
-      <DrawerContent
+      <DialogContent
         :class="style.content({ class: [!slots.default && props.class, props.ui?.content] })"
+        :data-direction="props.direction"
         v-bind="contentProps"
+        v-on="contentEvents"
+        @after-leave="emit('after-leave')"
       >
-        <slot name="handle">
-          <div v-if="props.handle" :class="style.handle({ class: props.ui?.handle })"></div>
-        </slot>
+        <VisuallyHidden v-if="slots.content || slots.header || (!props.title && !slots.title)">
+          <DialogTitle />
+        </VisuallyHidden>
 
         <slot name="content">
           <div :class="style.container({ class: props.ui?.container })">
             <div
-              v-if="slots.header || props.title || slots.title || props.description || slots.description"
+              v-if="slots.header || props.title || slots.title || props.description || slots.description || props.close || slots.close"
               :class="style.header({ class: props.ui?.header })"
             >
               <slot name="header">
-                <DrawerTitle
+                <DialogTitle
                   v-if="props.title || slots.title"
                   :class="style.title({ class: props.ui?.title })"
                 >
                   <slot name="title">
                     {{ props.title }}
                   </slot>
-                </DrawerTitle>
+                </DialogTitle>
+
+                <DialogClose v-if="props.close || slots.close" as-child>
+                  <slot name="close">
+                    <Button
+                      variant="ghost"
+                      :icon="props.closeIcon || theme.app.icons.close"
+                      v-bind="typeof props.close === 'boolean' ? {} : props.close"
+                      :class="style.close({ class: props.ui?.close })"
+                      :aria-label="t('modal.close')"
+                    />
+                  </slot>
+                </DialogClose>
 
-                <DrawerDescription
+                <DialogDescription
                   v-if="props.description || slots.description"
                   :class="style.description({ class: props.ui?.description })"
                 >
                   <slot name="description">
                     {{ props.description }}
                   </slot>
-                </DrawerDescription>
+                </DialogDescription>
               </slot>
             </div>
 
@@ -128,7 +171,7 @@ const style = computed(() => {
             </div>
           </div>
         </slot>
-      </DrawerContent>
-    </DrawerPortal>
-  </DrawerRoot>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
 </template>

package/dist/runtime/components/Input.vue

@@ -71,19 +71,16 @@ const inputRef = ref<HTMLInputElement | null>(null)
 const { size, orientation } = useButtonGroup(props)
 const { isLeading, leadingIconName, isTrailing, trailingIconName } = useComponentIcons(props)
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.input)
-  return styler({
-    ...props,
-    // @ts-expect-error ignore type
-    type: props.type,
-    size: size.value,
-    groupOrientation: orientation.value,
-    leading: isLeading.value || !!slots.leading,
-    trailing: isTrailing.value || !!slots.trailing,
-  })
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('input', {
+  ...props,
+  // @ts-expect-error ignore type
+  type: props.type,
+  size: size.value,
+  groupOrientation: orientation.value,
+  leading: isLeading.value || !!slots.leading,
+  trailing: isTrailing.value || !!slots.trailing,
+}))
 
 function autoFocus() {
   if (props.autofocus)

package/dist/runtime/components/InputNumber.vue

@@ -83,14 +83,11 @@ const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', '
 const inputRef = ref<InstanceType<typeof NumberFieldInput> | null>(null)
 
 const { t } = useLocale()
-const { theme, createStyler } = useTheme()
+const { theme, generateStyle } = useTheme()
 const incrementIcon = computed(() => props.incrementIcon || (props.orientation === 'horizontal' ? theme.value.app.icons.plus : theme.value.app.icons.chevronUp))
 const decrementIcon = computed(() => props.decrementIcon || (props.orientation === 'horizontal' ? theme.value.app.icons.minus : theme.value.app.icons.chevronDown))
 
-const style = computed(() => {
-  const styler = createStyler(theme.value.inputNumber)
-  return styler(props)
-})
+const style = computed(() => generateStyle('inputNumber', props))
 
 onMounted(() => {
   setTimeout(() => {

package/dist/runtime/components/Kbd.vue

@@ -36,12 +36,8 @@ const props = withDefaults(defineProps<KbdProps>(), {
 defineSlots<KbdSlots>()
 
 const { getKbdKey } = useKbd()
-
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.kbd)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('kbd', props))
 </script>
 
 <template>

package/dist/runtime/components/Link.vue

@@ -163,10 +163,12 @@ function isPartiallyEqual(item1: any, item2: any) {
 }
 
 const isExternalLink = computed(() => {
-  if (!props.to)
+  const to = props.to || props.href
+
+  if (!to)
     return false
 
-  return typeof props.to === 'string' && hasProtocol(props.to, { acceptRelative: true })
+  return typeof to === 'string' && hasProtocol(to, { acceptRelative: true })
 })
 
 function isLinkActive({ route: linkRoute, isActive, isExactActive }: any) {
@@ -301,6 +303,7 @@ function resolveLinkClass({ route, isActive, isExactActive }: any = {}) {
           href: to ? href : undefined,
           navigate,
         }"
+        :is-external="isExternalLink"
         :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
       >
         <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })">
@@ -318,7 +321,7 @@ function resolveLinkClass({ route, isActive, isExactActive }: any = {}) {
           type,
           disabled,
           href: to || href,
-          target: isExternalLink ? '_blank' : target || undefined,
+          target: target || (isExternalLink ? '_blank' : undefined),
           active: false,
         }"
       >
@@ -332,8 +335,8 @@ function resolveLinkClass({ route, isActive, isExactActive }: any = {}) {
         as,
         type,
         disabled,
-        href: ((to || href) as string),
-        target: isExternalLink ? '_blank' : target || undefined,
+        href: ((typeof to === 'string' ? to : href) as string),
+        target: target || (isExternalLink ? '_blank' : undefined),
       }"
       :is-external="isExternalLink"
       :class="resolveLinkClass()"

package/dist/runtime/components/Modal.vue

@@ -4,7 +4,9 @@ import type { DialogContentProps, DialogRootEmits, DialogRootProps } from 'reka-
 import type { modal } from '../theme'
 import type { ButtonProps, ComponentAttrs } from '../types'
 
-export interface ModalEmits extends DialogRootEmits {}
+export interface ModalEmits extends DialogRootEmits {
+  'after-leave': []
+}
 
 export interface ModalSlots {
   default?: (props: { open: boolean }) => any
@@ -35,6 +37,10 @@ export interface ModalProps extends ComponentAttrs<typeof modal>, DialogRootProp
    * @default true
    */
   dismissible?: boolean
+  /**
+   * Display a close button to dismiss the modal.
+   * @default true
+   */
   close?: ButtonProps | boolean
   /** @default app.icons.close */
   closeIcon?: string
@@ -43,7 +49,7 @@ export interface ModalProps extends ComponentAttrs<typeof modal>, DialogRootProp
 
 <script setup lang="ts">
 import { reactivePick } from '@vueuse/core'
-import { DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, useForwardPropsEmits } from 'reka-ui'
+import { DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, useForwardPropsEmits, VisuallyHidden } from 'reka-ui'
 import { computed, toRef } from 'vue'
 import { useLocale } from '../composables/useLocale'
 import { useTheme } from '../composables/useTheme'
@@ -60,7 +66,10 @@ const props = withDefaults(defineProps<ModalProps>(), {
 const emit = defineEmits<ModalEmits>()
 const slots = defineSlots<ModalSlots>()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emit)
-const contentProps = toRef(() => props.content)
+const contentProps = toRef(() => ({
+  ...props.content,
+  ...(slots.content || slots.header || (!props.description && !slots.description)) ? { 'aria-describedby': undefined } : {},
+}))
 const contentEvents = computed(() => {
   if (props.dismissible)
     return {}
@@ -73,11 +82,8 @@ const contentEvents = computed(() => {
 })
 
 const { t } = useLocale()
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.modal)
-  return styler(props)
-})
+const { theme, generateStyle } = useTheme()
+const style = computed(() => generateStyle('modal', props))
 </script>
 
 <template>
@@ -92,7 +98,11 @@ const style = computed(() => {
     <DialogPortal :disabled="!props.portal">
       <DialogOverlay v-if="props.overlay" :class="style.overlay({ class: props.ui?.overlay })" />
 
-      <DialogContent :class="style.content({ class: props.ui?.content })" v-bind="contentProps" v-on="contentEvents">
+      <DialogContent :class="style.content({ class: props.ui?.content })" v-bind="contentProps" v-on="contentEvents" @after-leave="emit('after-leave')">
+        <VisuallyHidden v-if="slots.content || slots.header || (!props.title && !slots.title)">
+          <DialogTitle />
+        </VisuallyHidden>
+
         <slot name="content">
           <div
             v-if="slots.header || props.title || slots.title || props.description || slots.description || props.close || slots.close"
@@ -108,10 +118,9 @@ const style = computed(() => {
                 </slot>
               </DialogTitle>
 
-              <DialogClose as-child>
+              <DialogClose v-if="props.close || slots.close" as-child>
                 <slot name="close">
                   <Button
-                    v-if="props.close"
                     variant="ghost"
                     :icon="props.closeIcon || theme.app.icons.close"
                     v-bind="typeof props.close === 'boolean' ? {} : props.close"

package/dist/runtime/components/OverlayProvider.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { OverlayComponentState } from '../composables/useOverlay'
+import { useOverlay } from '../composables/useOverlay'
+
+const { overlays, unmount, close } = useOverlay()
+const mountedOverlays = computed(() => overlays.filter((overlay) => overlay.isMounted))
+
+function onOverlayUnmount(id: OverlayComponentState['id']) {
+  close(id)
+  unmount(id)
+}
+
+function onClose(id: OverlayComponentState['id'], value: any) {
+  close(id, value)
+}
+</script>
+
+<template>
+  <component
+    :is="overlay.component"
+    v-for="overlay in mountedOverlays"
+    :key="overlay.id"
+    v-bind="overlay.props"
+    v-model:open="overlay.modelValue"
+    @close="onClose(overlay.id, $event)"
+    @after-leave="onOverlayUnmount(overlay.id)"
+  />
+</template>

package/dist/runtime/components/Pagination.vue

@@ -70,6 +70,10 @@ export interface PaginationProps extends ComponentAttrs<typeof pagination>, Pick
    * @default true
    */
   showControls?: boolean
+  /**
+   * A function to render page controls as links.
+   */
+  to?: (page: number) => ButtonProps['to']
 }
 </script>
 
@@ -77,6 +81,7 @@ export interface PaginationProps extends ComponentAttrs<typeof pagination>, Pick
 import { reactivePick } from '@vueuse/core'
 import { PaginationEllipsis, PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationNext, PaginationPrev, PaginationRoot, useForwardPropsEmits } from 'reka-ui'
 import { computed } from 'vue'
+import { useLocale } from '../composables/useLocale'
 import { useTheme } from '../composables/useTheme'
 import Button from './Button.vue'
 
@@ -95,71 +100,73 @@ const slots = defineSlots<PaginationSlots>()
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultPage', 'disabled', 'itemsPerPage', 'page', 'showEdges', 'siblingCount', 'total'), emit)
 
-const { theme, createStyler } = useTheme()
+const { dir } = useLocale()
+const { theme, generateStyle } = useTheme()
+const style = computed(() => generateStyle('pagination', props))
 
-const firstIcon = computed(() => props.firstIcon || theme.value.app.icons.chevronDoubleLeft)
-const prevIcon = computed(() => props.prevIcon || theme.value.app.icons.chevronLeft)
-const nextIcon = computed(() => props.nextIcon || theme.value.app.icons.chevronRight)
-const lastIcon = computed(() => props.lastIcon || theme.value.app.icons.chevronDoubleRight)
+const firstIcon = computed(() => props.firstIcon || (dir.value === 'rtl' ? theme.value.app.icons.chevronDoubleRight : theme.value.app.icons.chevronDoubleLeft))
+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 lastIcon = computed(() => props.lastIcon || (dir.value === 'rtl' ? theme.value.app.icons.chevronDoubleLeft : theme.value.app.icons.chevronDoubleRight))
 const ellipsisIcon = computed(() => props.ellipsisIcon || theme.value.app.icons.ellipsis)
-
-const style = computed(() => {
-  const styler = createStyler(theme.value.pagination)
-  return styler(props)
-})
 </script>
 
 <template>
   <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="style.root({ class: [props.class, props.ui?.root] })">
     <PaginationList v-slot="{ items }" :class="style.list({ class: props.ui?.list })">
-      <PaginationFirst v-if="props.showControls || !!slots.first" as-child>
+      <PaginationFirst v-if="props.showControls || !!slots.first" :class="style.first({ class: props.ui?.first })" as-child>
         <slot name="first">
-          <Button :class="style.item({ class: props.ui?.item })" :variant="props.variant" :size="props.size" :icon="firstIcon" />
+          <Button :variant="props.variant" :size="props.size" :icon="firstIcon" :to="props.to?.(1)" />
         </slot>
       </PaginationFirst>
-      <PaginationPrev v-if="props.showControls || !!slots.prev" as-child>
+      <PaginationPrev v-if="props.showControls || !!slots.prev" :class="style.prev({ class: props.ui?.prev })" as-child>
         <slot name="prev">
-          <Button :class="style.item({ class: props.ui?.item })" :variant="props.variant" :size="props.size" :icon="prevIcon" />
+          <Button :variant="props.variant" :size="props.size" :icon="prevIcon" :to="page > 1 ? props.to?.(page - 1) : undefined" />
         </slot>
       </PaginationPrev>
 
       <template v-for="(item, index) in items">
-        <PaginationListItem v-if="item.type === 'page'" :key="index" as-child :value="item.value">
+        <PaginationListItem v-if="item.type === 'page'" :key="index" :class="style.item({ class: props.ui?.item })" :value="item.value" as-child>
           <slot name="item" v-bind="{ item, index, page, pageCount }">
             <Button
-              :class="style.item({ class: props.ui?.item })"
               :variant="props.page === item.value ? props.activeVariant : props.variant"
               :size="props.size"
               :label="String(item.value)"
-              :ui="{ label: style.label() }"
+              :to="props.to?.(item.value)"
+              :ui="{ label: style.label({ class: props.ui?.label }) }"
             />
           </slot>
         </PaginationListItem>
 
-        <PaginationEllipsis v-else :key="item.type" :index="index" as-child>
+        <PaginationEllipsis
+          v-else
+          :key="item.type"
+          :class="[
+            style.item({ class: props.ui?.item }),
+            style.ellipsis({ class: props.ui?.ellipsis }),
+          ]"
+          :index="index"
+          :disabled="props.disabled"
+          as-child
+        >
           <slot name="ellipsis">
             <Button
               :variant="props.variant"
               :size="props.size"
               :icon="ellipsisIcon"
-              :disabled="props.disabled /* TODO: remove after reka-ui update */"
-              :class="[
-                style.item({ class: props.ui?.item }),
-                style.ellipsis({ class: props.ui?.ellipsis }),
-              ]"
             />
           </slot>
         </PaginationEllipsis>
       </template>
 
-      <PaginationNext v-if="props.showControls || !!slots.next" as-child>
+      <PaginationNext v-if="props.showControls || !!slots.next" :class="style.next({ class: props.ui?.next })" as-child>
         <slot name="next">
-          <Button :class="style.item({ class: props.ui?.item })" :variant="props.variant" :size="props.size" :icon="nextIcon" />
+          <Button :variant="props.variant" :size="props.size" :icon="nextIcon" :to="page < pageCount ? props.to?.(page + 1) : undefined" />
         </slot>
       </PaginationNext>
-      <PaginationLast v-if="props.showControls || !!slots.last" as-child>
+      <PaginationLast v-if="props.showControls || !!slots.last" :class="style.last({ class: props.ui?.last })" as-child>
         <slot name="last">
-          <Button :class="style.item({ class: props.ui?.item })" :variant="props.variant" :size="props.size" :icon="lastIcon" />
+          <Button :variant="props.variant" :size="props.size" :icon="lastIcon" :to="props.to?.(pageCount)" />
         </slot>
       </PaginationLast>
     </PaginationList>

package/dist/runtime/components/PinInput.vue

@@ -41,11 +41,8 @@ const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultValue', 'disa
 
 const completed = ref(false)
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.pinInput)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('pinInput', props))
 
 function onComplete(value: string[]) {
   // @ts-expect-error - 'target' does not exist in type 'EventInit'

package/dist/runtime/components/Popover.vue

@@ -69,11 +69,8 @@ const arrowProps = toRef(() => props.arrow as PopoverArrowProps)
 
 const Component = computed(() => props.mode === 'hover' ? HoverCard : Popover)
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.popover)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('popover', props))
 </script>
 
 <template>

package/dist/runtime/components/Progress.vue

@@ -83,11 +83,8 @@ const percent = computed(() => {
 })
 
 const { dir } = useLocale()
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.progress)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('progress', props))
 
 const indicatorStyle = computed(() => {
   if (percent.value === undefined)

package/dist/runtime/components/RadioGroup.vue

@@ -25,7 +25,7 @@ type NormalizeItem<T> = { id: string } & (
         label: string
         value: any
         description: string
-        disabled: false
+        disabled: boolean
       }
     )
 
@@ -90,11 +90,8 @@ const slots = defineSlots<RadioGroupSlots<T>>()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'loop', 'required'), emit)
 const id = useId()
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.radioGroup)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('radioGroup', props))
 
 function normalizeItem(item: any): NormalizeItem<T> {
   if (['string', 'number', 'boolean'].includes(typeof item)) {
@@ -103,6 +100,7 @@ function normalizeItem(item: any): NormalizeItem<T> {
       value: item,
       label: item,
       description: '',
+      disabled: props.disabled,
     } as any
   }
 
@@ -116,6 +114,7 @@ function normalizeItem(item: any): NormalizeItem<T> {
     label,
     description,
     id: `${id}:${value}`,
+    disabled: props.disabled || item.disabled,
   }
 }
 
@@ -149,7 +148,7 @@ function onUpdate(value: any) {
           {{ props.legend }}
         </slot>
       </legend>
-      <div v-for="item in normalizedItems" :key="item.value" :class="style.item({ class: props.ui?.item })">
+      <div v-for="item in normalizedItems" :key="item.value" :class="style.item({ class: props.ui?.item, disabled: item.disabled })">
         <div :class="style.container({ class: props.ui?.container })">
           <RadioGroupItem
             :id="item.id"

package/dist/runtime/components/ScrollArea.vue

@@ -17,12 +17,8 @@ const props = withDefaults(defineProps<ScrollAreaProps>(), {})
 const rootRef = ref<InstanceType<typeof ScrollAreaRoot>>()
 const rootProps = reactivePick(props, 'type', 'dir', 'scrollHideDelay')
 
-const { theme, createStyler } = useTheme()
-
-const style = computed(() => {
-  const styler = createStyler(theme.value.scrollArea)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('scrollArea', props))
 
 defineExpose({
   scrollTop,