@byyuurin/ui 0.0.3 → 0.0.5

package/dist/runtime/components/ModalProvider.vue

@@ -6,5 +6,5 @@ const { isOpen } = useModal()
 </script>
 
 <template>
-  <component :is="modalState.component" v-if="modalState?.props.open" v-bind="modalState.props" v-model:open="isOpen" />
+  <component :is="modalState.component" v-if="modalState" v-bind="modalState.props" v-model:open="isOpen" />
 </template>

package/dist/runtime/components/PinInput.vue

@@ -0,0 +1,86 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { PinInputRootProps } from 'reka-ui'
+import type { pinInput } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+type PinInputVariants = VariantProps<typeof pinInput>
+
+export interface PinInputProps extends ComponentAttrs<typeof pinInput>, Pick<PinInputRootProps, 'as' | 'defaultValue' | 'disabled' | 'id' | 'mask' | 'modelValue' | 'name' | 'otp' | 'placeholder' | 'required' | 'type'> {
+  variant?: PinInputVariants['variant']
+  size?: PinInputVariants['size']
+  length?: number | string
+  underline?: boolean
+  highlight?: boolean
+}
+
+export interface PinInputEmits {
+  (event: 'update:modelValue', value: string[]): void
+  (event: 'complete', value: string[]): void
+  (event: 'change', payload: Event): void
+  (event: 'blur', payload: Event): void
+}
+</script>
+
+<script setup lang="ts">
+import { reactivePick } from '@vueuse/core'
+import { PinInputInput, PinInputRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed, ref } from 'vue'
+import { useTheme } from '../composables/useTheme'
+import { looseToNumber } from '../utils'
+
+const props = withDefaults(defineProps<PinInputProps>(), {
+  variant: 'outline',
+  size: 'md',
+  length: 5,
+  type: 'text',
+})
+
+const emit = defineEmits<PinInputEmits>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultValue', 'disabled', 'id', 'mask', 'modelValue', 'name', 'otp', 'placeholder', 'required', 'type'), emit)
+
+const completed = ref(false)
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.pinInput)
+  return styler(props)
+})
+
+function onComplete(value: string[]) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emit('change', event)
+}
+
+function onBlur(event: FocusEvent) {
+  if (!event.relatedTarget || completed.value)
+    emit('blur', event)
+}
+</script>
+
+<template>
+  <PinInputRoot
+    v-bind="rootProps"
+    :id="props.id"
+    :name="props.name"
+    :class="style.root({ class: [props.class, props.ui?.root] })"
+    @complete="onComplete"
+  >
+    <span
+      v-for="(ids, index) in looseToNumber(props.length)"
+      :key="ids"
+      :class="style.container({ class: props.ui?.container })"
+      :aria-disabled="props.disabled ? true : undefined"
+    >
+      <PinInputInput
+        :index="index"
+        :class="style.base({ class: props.ui?.base })"
+        v-bind="$attrs"
+        :disabled="props.disabled"
+        @blur="onBlur"
+      />
+    </span>
+  </PinInputRoot>
+</template>

package/dist/runtime/components/Popover.vue

@@ -35,7 +35,7 @@ import { defu } from 'defu'
 import { useForwardPropsEmits } from 'reka-ui'
 import { HoverCard, Popover } from 'reka-ui/namespaced'
 import { computed, toRef } from 'vue'
-import { useTheme } from '../composables'
+import { useTheme } from '../composables/useTheme'
 
 const props = withDefaults(defineProps<PopoverProps>(), {
   mode: 'click',

package/dist/runtime/components/RadioGroup.vue

@@ -38,10 +38,6 @@ export interface RadioGroupProps<T> extends ComponentAttrs<typeof radioGroup>, P
    * @default 'vertical'
    */
   orientation?: RadioGroupRootProps['orientation']
-  /** @default true */
-  round?: boolean
-  /** @default true */
-  dot?: boolean
 }
 
 export interface RadioGroupEmits {
@@ -74,7 +70,7 @@ type NormalizeItem<T> = { id: string } & (
 import { reactivePick } from '@vueuse/core'
 import { Label, RadioGroupIndicator, RadioGroupItem, RadioGroupRoot, useForwardPropsEmits } from 'reka-ui'
 import { computed, useId } from 'vue'
-import { useTheme } from '../composables'
+import { useTheme } from '../composables/useTheme'
 import { get } from '../utils'
 
 const props = withDefaults(defineProps<RadioGroupProps<T>>(), {
@@ -83,8 +79,6 @@ const props = withDefaults(defineProps<RadioGroupProps<T>>(), {
   labelKey: 'label',
   descriptionKey: 'description',
   orientation: 'vertical',
-  dot: true,
-  round: true,
 })
 
 const emit = defineEmits<RadioGroupEmits>()
@@ -160,7 +154,7 @@ function onUpdate(value: any) {
             :disabled="item.disabled"
             :class="style.base({ class: props.ui?.base })"
           >
-            <RadioGroupIndicator :class="style.indicator({ class: props.ui?.indicator })" />
+            <RadioGroupIndicator :class="style.indicator({ class: props.ui?.indicator })" force-mount />
           </RadioGroupItem>
         </div>
 

package/dist/runtime/components/ScrollArea.vue

@@ -0,0 +1,72 @@
+<script lang="ts">
+import type { ScrollAreaRootProps } from 'reka-ui'
+import type { scrollArea } from '../theme'
+import { transitionProps } from '../theme/scrollArea'
+import type { ComponentAttrs } from '../types'
+
+export interface ScrollAreaProps extends ComponentAttrs<typeof scrollArea>, Pick<ScrollAreaRootProps, 'type' | 'dir' | 'scrollHideDelay'> {}
+</script>
+
+<script setup lang="ts">
+import { reactivePick } from '@vueuse/core'
+import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from 'reka-ui'
+import { computed, ref } from 'vue'
+import { useTheme } from '../composables/useTheme'
+
+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)
+})
+
+defineExpose({
+  scrollTop,
+  scrollTopLeft,
+})
+
+function scrollTop() {
+  rootRef.value?.scrollTop()
+}
+
+function scrollTopLeft() {
+  rootRef.value?.scrollTopLeft()
+}
+</script>
+
+<template>
+  <ScrollAreaRoot
+    ref="rootRef"
+    v-bind="rootProps"
+    :class="style.root({ class: [props.class, props.ui?.root] })"
+  >
+    <ScrollAreaViewport :class="style.viewport({ class: props.ui?.viewport })">
+      <slot></slot>
+    </ScrollAreaViewport>
+
+    <TransitionGroup v-bind="transitionProps">
+      <ScrollAreaScrollbar
+        key="scrollbar-horizontal"
+        :class="style.scrollbar({ class: props.ui?.scrollbar })"
+        orientation="horizontal"
+      >
+        <ScrollAreaThumb :class="style.thumb({ class: props.ui?.thumb })" />
+      </ScrollAreaScrollbar>
+      <ScrollAreaScrollbar
+        key="scrollbar-vertical"
+        :class="style.scrollbar({ class: props.ui?.scrollbar })"
+        orientation="vertical"
+      >
+        <ScrollAreaThumb :class="style.thumb({ class: props.ui?.thumb })" />
+      </ScrollAreaScrollbar>
+      <ScrollAreaCorner
+        key="corner"
+        :class="style.corner({ class: props.ui?.corner })"
+      />
+    </TransitionGroup>
+  </ScrollAreaRoot>
+</template>

package/dist/runtime/components/Select.vue

@@ -105,7 +105,8 @@ import { reactivePick } from '@vueuse/core'
 import { defu } from 'defu'
 import { SelectArrow, SelectContent, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectPortal, SelectRoot, SelectSeparator, SelectTrigger, SelectViewport, useForwardPropsEmits } from 'reka-ui'
 import { computed, toRef } from 'vue'
-import { useComponentIcons, useTheme } from '../composables'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useTheme } from '../composables/useTheme'
 import { compare, get } from '../utils'
 
 const props = withDefaults(defineProps<SelectProps<T, I, V, M>>(), {

package/dist/runtime/components/Slider.vue

@@ -0,0 +1,97 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { SliderRootProps } from 'reka-ui'
+import type { slider } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+type SliderVariants = VariantProps<typeof slider>
+
+export interface SliderProps extends ComponentAttrs<typeof slider>, Pick<SliderRootProps, 'as' | 'name' | 'disabled' | 'inverted' | 'min' | 'max' | 'step' | 'minStepsBetweenThumbs'> {
+  modelValue?: number | number[]
+  size?: SliderVariants['size']
+  /**
+   * The orientation of the slider.
+   * @default 'horizontal'
+   */
+  orientation?: SliderVariants['orientation']
+  /** The value of the slider when initially rendered. Use when you do not need to control the state of the slider. */
+  defaultValue?: number | number[]
+}
+
+export interface SliderEmits {
+  (event: 'update:modelValue', payload: number | number[]): void
+  (event: 'change', payload: Event): void
+}
+</script>
+
+<script setup lang="ts">
+import { reactivePick } from '@vueuse/core'
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+
+const props = withDefaults(defineProps<SliderProps>(), {
+  size: 'md',
+  orientation: 'horizontal',
+  step: 1,
+  max: 100,
+})
+
+const emit = defineEmits<SliderEmits>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'orientation', 'min', 'max', 'step', 'minStepsBetweenThumbs', 'inverted'), emit)
+
+const modelValue = defineModel<number | number[]>()
+
+const defaultSliderValue = computed(() => {
+  if (typeof props.defaultValue === 'number')
+    return [props.defaultValue]
+
+  return props.defaultValue
+})
+
+const sliderValue = computed({
+  get() {
+    if (typeof modelValue.value === 'number')
+      return [modelValue.value]
+
+    return modelValue.value ?? defaultSliderValue.value
+  },
+  set(value) {
+    modelValue.value = value?.length === 1 ? value[0] : value
+  },
+})
+
+const thumbsCount = computed(() => sliderValue.value?.length ?? 1)
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.slider)
+  return styler(props)
+})
+
+function onChange(value: any) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emit('change', event)
+}
+</script>
+
+<template>
+  <SliderRoot
+    v-bind="rootProps"
+    v-model="sliderValue"
+    :name="props.name"
+    :disabled="props.disabled"
+    :class="style.root({ class: [props.class, props.ui?.root] })"
+    :default-value="defaultSliderValue"
+    :data-steps="thumbsCount"
+    @value-commit="onChange"
+  >
+    <SliderTrack :class="style.track({ class: props.ui?.track })">
+      <SliderRange :class="style.range({ class: props.ui?.range })" />
+    </SliderTrack>
+
+    <SliderThumb v-for="count in thumbsCount" :key="count" :class="style.thumb({ class: props.ui?.thumb })" />
+  </SliderRoot>
+</template>

package/dist/runtime/components/Switch.vue

@@ -22,7 +22,6 @@ export interface SwitchProps extends ComponentAttrs<typeof _switch>, Pick<Switch
   uncheckedIcon?: string
   label?: string
   description?: string
-  round?: boolean
 }
 
 export interface SwitchEmits {
@@ -39,7 +38,7 @@ export interface SwitchSlots {
 import { reactivePick } from '@vueuse/core'
 import { Label, Primitive, SwitchRoot, SwitchThumb, useForwardProps } from 'reka-ui'
 import { computed, useId } from 'vue'
-import { useTheme } from '../composables'
+import { useTheme } from '../composables/useTheme'
 
 const props = withDefaults(defineProps<SwitchProps>(), {
   size: 'md',

package/dist/runtime/components/Tabs.vue

@@ -41,9 +41,9 @@ export interface TabsEmits extends TabsRootEmits<string | number> {}
 type SlotProps<T> = (props: { item: T, index: number }) => any
 
 export type TabsSlots<T extends { slot?: string }> = {
-  leading?: SlotProps<T>
+  prefix?: SlotProps<T>
   default?: SlotProps<T>
-  trailing?: SlotProps<T>
+  suffix?: SlotProps<T>
   content?: SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
 </script>
@@ -52,7 +52,7 @@ export type TabsSlots<T extends { slot?: string }> = {
 import { reactivePick } from '@vueuse/core'
 import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, useForwardPropsEmits } from 'reka-ui'
 import { computed } from 'vue'
-import { useTheme } from '../composables'
+import { useTheme } from '../composables/useTheme'
 import { get } from '../utils'
 
 const props = withDefaults(defineProps<TabsProps<T>>(), {
@@ -89,15 +89,15 @@ const style = computed(() => {
         :disabled="item.disabled"
         :class="style.trigger({ class: props.ui?.trigger })"
       >
-        <slot name="leading" :item="item" :index="index">
-          <i v-if="item.icon" :class="style.leadingIcon({ class: [item.icon, props.ui?.leadingIcon] })"></i>
+        <slot name="prefix" :item="item" :index="index">
+          <i v-if="item.icon" :class="style.prefixIcon({ class: [item.icon, props.ui?.prefixIcon] })"></i>
         </slot>
 
         <span v-if="get(item, props.labelKey) || slots.default" :class="style.label({ class: props.ui?.label })">
           <slot :item="item" :index="index">{{ get(item, props.labelKey) }}</slot>
         </span>
 
-        <slot name="trailing" :item="item" :index="index"></slot>
+        <slot name="suffix" :item="item" :index="index"></slot>
       </TabsTrigger>
     </TabsList>
 

package/dist/runtime/components/Textarea.vue

@@ -0,0 +1,172 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { PrimitiveProps } from 'reka-ui'
+import type { textarea } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+type TextareaVariants = VariantProps<typeof textarea>
+
+export interface TextareaProps extends ComponentAttrs<typeof textarea> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: PrimitiveProps['as']
+  id?: string
+  name?: string
+  placeholder?: string
+  size?: TextareaVariants['size']
+  variant?: TextareaVariants['variant']
+  highlight?: boolean
+  underline?: boolean
+  required?: boolean
+  autofocus?: boolean
+  autofocusDelay?: number
+  disabled?: boolean
+  rows?: number
+  maxRows?: number
+  autoResize?: boolean
+}
+
+export interface TextareaEmits {
+  (e: 'update:modelValue', payload: string): void
+  (e: 'blur', event: FocusEvent): void
+  (e: 'change', event: Event): void
+}
+
+export interface TextareaSlots {
+  default?: (props?: {}) => any
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { useTheme } from '../composables/useTheme'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TextareaProps>(), {
+  size: 'md',
+  variant: 'outline',
+  rows: 3,
+  maxRows: 0,
+  autofocusDelay: 0,
+})
+
+const emit = defineEmits<TextareaEmits>()
+defineSlots<TextareaSlots>()
+const [modelValue, modelModifiers] = defineModel<string | number>()
+
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.textarea)
+  return styler(props)
+})
+
+function autoFocus() {
+  if (props.autofocus)
+    textareaRef.value?.focus()
+}
+
+function updateInput(value: string) {
+  if (modelModifiers.trim)
+    value = value.trim()
+
+  modelValue.value = value
+}
+
+function onInput(event: Event) {
+  autoResize()
+
+  if (!modelModifiers.lazy)
+    updateInput((event.target as HTMLInputElement).value)
+}
+
+function onChange(event: Event) {
+  const value = (event.target as HTMLInputElement).value
+
+  if (modelModifiers.lazy)
+    updateInput(value)
+
+  if (modelModifiers.trim)
+    (event.target as HTMLInputElement).value = value.trim()
+
+  emit('change', event)
+}
+
+function onBlur(event: FocusEvent) {
+  emit('blur', event)
+}
+
+function autoResize() {
+  if (!props.autoResize)
+    return
+
+  if (!textareaRef.value)
+    return
+
+  textareaRef.value.rows = props.rows
+
+  const overflow = textareaRef.value.style.overflow
+  textareaRef.value.style.overflow = 'hidden'
+
+  const styles = window.getComputedStyle(textareaRef.value)
+  const paddingTop = Number.parseInt(styles.paddingTop)
+  const paddingBottom = Number.parseInt(styles.paddingBottom)
+  const padding = paddingTop + paddingBottom
+  const lineHeight = Number.parseInt(styles.lineHeight)
+  const { scrollHeight } = textareaRef.value
+  const newRows = Math.ceil((scrollHeight - padding) / lineHeight)
+
+  if (newRows > props.rows)
+    textareaRef.value.rows = props.maxRows ? Math.min(newRows, props.maxRows) : newRows
+
+  textareaRef.value.style.overflow = overflow
+}
+
+watch(modelValue, () => {
+  nextTick(autoResize)
+})
+
+defineExpose({
+  textareaRef,
+})
+
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus()
+  }, props.autofocusDelay)
+})
+</script>
+
+<template>
+  <Primitive
+    :as="props.as"
+    :class="style.root({ class: [props.class, props.ui?.root] })"
+    :aria-disabled="props.disabled ? true : undefined"
+  >
+    <textarea
+      :id="props.id"
+      ref="textareaRef"
+      :value="modelValue"
+      :name="props.name"
+      :rows="props.rows"
+      :placeholder="props.placeholder"
+      :class="style.base({ class: props.ui?.base })"
+      :disabled="props.disabled"
+      :required="props.required"
+      v-bind="$attrs"
+      @input="onInput"
+      @blur="onBlur"
+      @change="onChange"
+      @focus="autoResize"
+    ></textarea>
+
+    <slot></slot>
+  </Primitive>
+</template>

package/dist/runtime/components/Toast.vue

@@ -35,7 +35,7 @@ export interface ToastSlots {
 import { reactivePick, useElementBounding } from '@vueuse/core'
 import { ToastAction, ToastClose, ToastDescription, ToastRoot, ToastTitle, useForwardPropsEmits } from 'reka-ui'
 import { computed, ref } from 'vue'
-import { useTheme } from '../composables'
+import { useTheme } from '../composables/useTheme'
 import Button from './Button.vue'
 
 const props = withDefaults(defineProps<ToastProps>(), {
@@ -121,6 +121,6 @@ defineExpose({
       </ToastClose>
     </div>
 
-    <div v-if="remaining > 0 && duration" :class="style.progress({ class: props.ui?.progress })" :style="{ width: `${remaining / duration * 100}%` }"></div>
+    <div v-if="remaining >= 0 && duration" :class="style.progress({ class: props.ui?.progress })" :style="{ width: `${remaining / duration * 100}%` }"></div>
   </ToastRoot>
 </template>

package/dist/runtime/components/Toaster.vue

@@ -30,7 +30,8 @@ export interface ToasterSlots {
 import { reactivePick } from '@vueuse/core'
 import { ToastPortal, ToastProvider, ToastViewport, useForwardProps } from 'reka-ui'
 import { computed, ref } from 'vue'
-import { useTheme, useToast } from '../composables'
+import { useTheme } from '../composables/useTheme'
+import { useToast } from '../composables/useToast'
 import { omit } from '../utils'
 import Toast from './Toast.vue'
 

package/dist/runtime/components/Tooltip.vue

@@ -24,7 +24,7 @@ import { reactivePick } from '@vueuse/core'
 import { defu } from 'defu'
 import { TooltipArrow, TooltipContent, TooltipPortal, TooltipRoot, TooltipTrigger, useForwardPropsEmits } from 'reka-ui'
 import { computed, toRef } from 'vue'
-import { useTheme } from '../composables'
+import { useTheme } from '../composables/useTheme'
 
 const props = withDefaults(defineProps<TooltipProps>(), {
   portal: true,

package/dist/runtime/composables/defineInjection.d.ts

@@ -0,0 +1,11 @@
+import type { InjectionKey } from 'vue';
+export declare function defineInjection<T>(name: string): {
+    InjectionKey: InjectionKey<T>;
+    provide: (value: T) => void;
+    inject: () => T | undefined;
+};
+export declare function defineInjection<T>(name: string, defaultValue: T): {
+    InjectionKey: InjectionKey<T>;
+    provide: (value: T) => void;
+    inject: () => T;
+};

package/dist/runtime/composables/defineInjection.mjs

@@ -0,0 +1,9 @@
+import { inject, provide } from "vue";
+export function defineInjection(name, defaultValue) {
+  const InjectionKey = Symbol(name);
+  return {
+    InjectionKey,
+    provide: (value) => provide(InjectionKey, value),
+    inject: () => inject(InjectionKey, defaultValue)
+  };
+}

package/dist/runtime/composables/useModal.d.ts

@@ -5,7 +5,7 @@ export interface ModalState {
     component: Component | string;
     props: ModalProps;
 }
-export declare const injectModalState: () => ShallowRef<ModalState> | undefined, provideModalState: (value: ShallowRef<ModalState>) => void;
+export declare const InjectionKeyModalState: import("vue").InjectionKey<ShallowRef<ModalState>>, injectModalState: () => ShallowRef<ModalState> | undefined, provideModalState: (value: ShallowRef<ModalState>) => void;
 export declare const useModal: () => {
     open: <T extends Component>(component: T, props?: ModalProps & ComponentProps<T>) => void;
     close: () => void;

package/dist/runtime/composables/useModal.mjs

@@ -1,10 +1,11 @@
 import { createSharedComposable } from "@vueuse/core";
 import { ref } from "vue";
-import { createInjection } from "../utils/index.mjs";
+import { defineInjection } from "./defineInjection.mjs";
 export const {
+  InjectionKey: InjectionKeyModalState,
   inject: injectModalState,
   provide: provideModalState
-} = createInjection("ui.modal");
+} = defineInjection("ui.modal");
 export const useModal = createSharedComposable(() => {
   const modalState = injectModalState();
   const isOpen = ref(false);

package/dist/runtime/composables/useTheme.d.ts

@@ -1,6 +1,8 @@
+import type { UserConfig } from 'unocss';
 import type { MaybeRefOrGetter } from 'vue';
 import * as theme from '../theme';
-export declare const provideThemeExtension: (value: MaybeRefOrGetter<import("../types").PartialTheme<typeof theme>>) => void, injectThemeExtension: () => MaybeRefOrGetter<import("../types").PartialTheme<typeof theme>>;
+export declare const InjectionKeyThemeExtension: import("vue").InjectionKey<MaybeRefOrGetter<import("../types").PartialTheme<typeof theme>>>, provideThemeExtension: (value: MaybeRefOrGetter<import("../types").PartialTheme<typeof theme>>) => void, injectThemeExtension: () => MaybeRefOrGetter<import("../types").PartialTheme<typeof theme>>;
+export declare const InjectionKeyUnoConfig: import("vue").InjectionKey<UserConfig<object>>, provideUnoConfig: (value: UserConfig<object>) => void, injectUnoConfig: () => UserConfig<object>;
 export declare const useTheme: () => {
     theme: import("vue").ComputedRef<typeof theme>;
     createStyler: <V extends import("@byyuurin/ui-kit/index").CVVariants<S, B>, CV extends import("@byyuurin/ui-kit/index").CVCompoundVariants<V, S, B>, B extends import("@byyuurin/ui-kit/index").ClassValue = undefined, S extends import("@byyuurin/ui-kit/index").CVSlots = undefined>(theme: import("@byyuurin/ui-kit/index").CVMeta<V, CV, never, B, S>) => [keyof V] extends string[] ? (props: Required<import("@byyuurin/ui-kit/index").VariantProps<import("@byyuurin/ui-kit/index").CVReturnType<V, S, B>>> & import("../types").StylerBaseProps) => S extends undefined ? string : { [K in keyof S | (B extends undefined ? never : "base")]: import("@byyuurin/ui-kit/index").CVHandler<V, S, string>; } : (props?: import("../types").StylerBaseProps) => S extends undefined ? string : { [K in keyof S | (B extends undefined ? never : "base")]: import("@byyuurin/ui-kit/index").CVHandler<V, S, string>; };