@byyuurin/ui 0.0.7 → 0.0.9

package/dist/runtime/components/Textarea.vue

@@ -4,12 +4,22 @@ import type { PrimitiveProps } from 'reka-ui'
 import type { textarea } from '../theme'
 import type { ComponentAttrs } from '../types'
 
+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
+}
+
 type TextareaVariants = VariantProps<typeof textarea>
 
 export interface TextareaProps extends ComponentAttrs<typeof textarea> {
   /**
    * The element or component this component should render as.
-   * @defaultValue 'div'
+   * @default "div"
    */
   as?: PrimitiveProps['as']
   id?: string
@@ -27,16 +37,6 @@ export interface TextareaProps extends ComponentAttrs<typeof textarea> {
   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">
@@ -61,11 +61,8 @@ 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)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('textarea', props))
 
 function autoFocus() {
   if (props.autofocus)

package/dist/runtime/components/Toast.vue

@@ -4,6 +4,16 @@ import type { PrimitiveProps, ToastRootEmits, ToastRootProps } from 'reka-ui'
 import type { toast } from '../theme'
 import type { ButtonProps, ComponentAttrs } from '../types'
 
+export interface ToastEmits extends ToastRootEmits {}
+
+export interface ToastSlots {
+  icon?: (props?: {}) => any
+  title?: (props?: {}) => any
+  description?: (props?: {}) => any
+  actions?: (props?: {}) => any
+  close?: (props: { ui: any }) => any
+}
+
 type ToastVariants = VariantProps<typeof toast>
 
 export interface ToastProps extends ComponentAttrs<typeof toast>, Pick<ToastRootProps, 'defaultOpen' | 'open' | 'type' | 'duration'> {
@@ -27,23 +37,13 @@ export interface ToastProps extends ComponentAttrs<typeof toast>, Pick<ToastRoot
   /** @default app.icons.close */
   closeIcon?: string
 }
-
-export interface ToastEmits extends ToastRootEmits {}
-
-export interface ToastSlots {
-  icon?: (props?: {}) => any
-  title?: (props?: {}) => any
-  description?: (props?: {}) => any
-  actions?: (props?: {}) => any
-  close?: (props: { ui: any }) => any
-
-}
 </script>
 
 <script setup lang="ts">
 import { reactivePick, useElementBounding } from '@vueuse/core'
 import { ToastAction, ToastClose, ToastDescription, ToastRoot, ToastTitle, useForwardPropsEmits } from 'reka-ui'
 import { computed, ref } from 'vue'
+import { useLocale } from '../composables/useLocale'
 import { useTheme } from '../composables/useTheme'
 import Button from './Button.vue'
 
@@ -60,14 +60,12 @@ const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen',
 const el = ref<InstanceType<typeof ToastRoot>>()
 const { height } = useElementBounding(() => el.value?.$el.getBoundingClientRect ? el.value.$el : undefined)
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.toast)
-  return styler({
-    ...props,
-    title: !!(props.title || slots.title),
-  })
-})
+const { t } = useLocale()
+const { theme, generateStyle } = useTheme()
+const style = computed(() => generateStyle('toast', {
+  ...props,
+  title: !!(props.title || slots.title),
+}))
 
 defineExpose({
   height,
@@ -107,7 +105,7 @@ defineExpose({
       </div>
     </div>
 
-    <div v-if="(props.orientation === 'horizontal' && actions?.length) || props.close !== null" :class="style.actions({ class: props.ui?.actions })">
+    <div v-if="(props.orientation === 'horizontal' && actions?.length) || props.close || slots.close" :class="style.actions({ class: props.ui?.actions })">
       <template v-if="props.orientation === 'horizontal'">
         <slot name="actions">
           <ToastAction v-for="(action, index) in props.actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
@@ -116,14 +114,13 @@ defineExpose({
         </slot>
       </template>
 
-      <ToastClose as-child>
+      <ToastClose v-if="props.close || slots.close" as-child>
         <slot name="close" :ui="ui">
           <Button
-            v-if="props.close"
             :icon="props.closeIcon || theme.app.icons.close"
-            size="md"
+            size="sm"
             variant="link"
-            aria-label="close"
+            :aria-label="t('toast.close')"
             v-bind="typeof close === 'object' ? close : undefined"
             :class="style.close({ class: props.ui?.close })"
             @click.stop

package/dist/runtime/components/{Toaster.vue → ToastProvider.vue}

@@ -1,12 +1,21 @@
 <script lang="ts">
 import type { VariantProps } from '@byyuurin/ui-kit'
-import type { ToastProviderProps } from 'reka-ui'
-import type { toaster } from '../theme'
-import type { ComponentAttrs } from '../types'
+import type { ToastProviderProps as RekaToastProviderProps } from 'reka-ui'
+import type { toastProvider } from '../theme'
+import type { ComponentAttrs, ToastProps } from '../types'
 
-type ToasterVariants = VariantProps<typeof toaster>
+export interface ToastState extends Omit<ToastProps, 'defaultOpen'> {
+  id: string | number
+  onClick?: (toast: ToastState) => void
+}
+
+export interface ToasterSlots {
+  default?: (props?: {}) => any
+}
+
+type ToasterVariants = VariantProps<typeof toastProvider>
 
-export interface ToasterProps extends ComponentAttrs<typeof toaster>, Omit<ToastProviderProps, 'swipeDirection'> {
+export interface ToastProviderProps extends ComponentAttrs<typeof toastProvider>, Omit<RekaToastProviderProps, 'swipeDirection'> {
   /** @default "bottom-right" */
   position?: ToasterVariants['position']
   /**
@@ -20,10 +29,6 @@ export interface ToasterProps extends ComponentAttrs<typeof toaster>, Omit<Toast
    */
   portal?: boolean
 }
-
-export interface ToasterSlots {
-  default?: (props?: {}) => any
-}
 </script>
 
 <script setup lang="ts">
@@ -35,7 +40,7 @@ import { useToast } from '../composables/useToast'
 import { omit } from '../utils'
 import Toast from './Toast.vue'
 
-const props = withDefaults(defineProps<ToasterProps>(), {
+const props = withDefaults(defineProps<ToastProviderProps>(), {
   position: 'bottom-right',
   expand: true,
   portal: true,
@@ -61,20 +66,17 @@ const swipeDirection = computed(() => {
       return 'left'
   }
 
-  console.warn(`[Toaster] Unknown position "${props.position}"`)
+  console.warn(`[ToastProvider] Unknown position "${props.position}"`)
 
   return 'right'
 })
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.toaster)
-  return styler({
-    ...props,
-    swipeDirection: swipeDirection.value,
-    clickable: false,
-  })
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('toastProvider', {
+  ...props,
+  swipeDirection: swipeDirection.value,
+  clickable: false,
+}))
 
 function onUpdateOpen(value: boolean, id: string | number) {
   if (value)

package/dist/runtime/components/Tooltip.vue

@@ -3,6 +3,13 @@ import type { TooltipArrowProps, TooltipContentProps, TooltipRootEmits, TooltipR
 import type { tooltip } from '../theme'
 import type { ComponentAttrs } from '../types'
 
+export interface TooltipEmits extends TooltipRootEmits {}
+
+export interface TooltipSlots {
+  default?: (props: { open: boolean }) => any
+  content?: (props: {}) => any
+}
+
 export interface TooltipProps extends ComponentAttrs<typeof tooltip>, TooltipRootProps {
   text?: string
   content?: Omit<TooltipContentProps, 'as' | 'asChild'>
@@ -10,13 +17,6 @@ export interface TooltipProps extends ComponentAttrs<typeof tooltip>, TooltipRoo
   /** @default true */
   portal?: boolean
 }
-
-export interface TooltipEmits extends TooltipRootEmits {}
-
-export interface TooltipSlots {
-  default?: (props: { open: boolean }) => any
-  content?: (props: {}) => any
-}
 </script>
 
 <script lang="ts" setup>
@@ -44,11 +44,8 @@ const contentProps = toRef(() => defu(props.content, contentDefaults) as Tooltip
 
 const arrowProps = toRef(() => props.arrow as TooltipArrowProps)
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.tooltip)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('tooltip', props))
 </script>
 
 <template>

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

@@ -0,0 +1,4 @@
+import type { AvatarProps } from '../types/index.js';
+export declare function useAvatarGroup(props?: AvatarProps): {
+    size: import("vue").ComputedRef<any>;
+};

package/dist/runtime/composables/useAvatarGroup.js

@@ -0,0 +1,8 @@
+import { computed } from "vue";
+import { injectAvatarGroup } from "../app/injections.js";
+export function useAvatarGroup(props = {}) {
+  const avatarGroup = injectAvatarGroup();
+  return {
+    size: computed(() => props.size ?? avatarGroup?.value.size)
+  };
+}

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

@@ -1,13 +1,5 @@
-import type { ComputedRef } from 'vue';
-import type { ButtonGroupProps } from '../components/ButtonGroup.vue.js';
-interface ButtonGroupInjectData {
-    size: ButtonGroupProps['size'];
-    orientation: ButtonGroupProps['orientation'];
-}
-export declare const InjectionKeyButtonGroup: import("vue").InjectionKey<ComputedRef<ButtonGroupInjectData>>, injectButtonGroup: () => ComputedRef<ButtonGroupInjectData> | undefined, provideButtonGroup: (value: ComputedRef<ButtonGroupInjectData>) => void;
-type UseButtonGroupProps = Pick<ButtonGroupProps, 'size'>;
-export declare function useButtonGroup(props?: UseButtonGroupProps): {
-    size: ComputedRef<any>;
-    orientation: ComputedRef<any>;
+import type { ButtonProps } from '../types/index.js';
+export declare function useButtonGroup(props?: Pick<ButtonProps, 'size'>): {
+    size: import("vue").ComputedRef<any>;
+    orientation: import("vue").ComputedRef<any>;
 };
-export {};

package/dist/runtime/composables/useButtonGroup.js

@@ -1,10 +1,5 @@
 import { computed } from "vue";
-import { defineInjection } from "./defineInjection.js";
-export const {
-  InjectionKey: InjectionKeyButtonGroup,
-  inject: injectButtonGroup,
-  provide: provideButtonGroup
-} = defineInjection("ui.buttonGroup");
+import { injectButtonGroup } from "../app/injections.js";
 export function useButtonGroup(props = {}) {
   const buttonGroup = injectButtonGroup();
   return {

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

@@ -1,15 +1,15 @@
 import { type MaybeRefOrGetter } from 'vue';
 export interface UseComponentIconsProps {
-    /** Display an icon based on the `prefix` and `suffix` props. */
+    /** Display an icon based on the `leading` and `trailing` props. */
     icon?: string;
     /** When `true`, the icon will be displayed on the left side. */
-    prefix?: boolean;
+    leading?: boolean;
     /** Display an icon on the left side. */
-    prefixIcon?: string;
+    leadingIcon?: string;
     /** When `true`, the icon will be displayed on the right side. */
-    suffix?: boolean;
+    trailing?: boolean;
     /** Display an icon on the right side. */
-    suffixIcon?: string;
+    trailingIcon?: string;
     /** When `true`, the loading icon will be displayed. */
     loading?: boolean;
     /**
@@ -19,8 +19,8 @@ export interface UseComponentIconsProps {
     loadingIcon?: string;
 }
 export declare function useComponentIcons(componentProps: MaybeRefOrGetter<UseComponentIconsProps>): {
-    isPrefix: import("vue").ComputedRef<boolean>;
-    isSuffix: import("vue").ComputedRef<boolean>;
-    prefixIconName: import("vue").ComputedRef<string | undefined>;
-    suffixIconName: import("vue").ComputedRef<string | undefined>;
+    isLeading: import("vue").ComputedRef<boolean>;
+    isTrailing: import("vue").ComputedRef<boolean>;
+    leadingIconName: import("vue").ComputedRef<string | undefined>;
+    trailingIconName: import("vue").ComputedRef<string | undefined>;
 };

package/dist/runtime/composables/useComponentIcons.js

@@ -3,22 +3,22 @@ import { useTheme } from "./useTheme.js";
 export function useComponentIcons(componentProps) {
   const { theme } = useTheme();
   const props = computed(() => toValue(componentProps));
-  const isPrefix = computed(() => props.value.icon && props.value.prefix || props.value.icon && !props.value.suffix || props.value.loading && !props.value.suffix || !!props.value.prefixIcon);
-  const isSuffix = computed(() => props.value.icon && props.value.suffix || props.value.loading && props.value.suffix || !!props.value.suffixIcon);
-  const prefixIconName = computed(() => {
+  const isLeading = computed(() => props.value.icon && props.value.leading || props.value.icon && !props.value.trailing || props.value.loading && !props.value.trailing || !!props.value.leadingIcon);
+  const isTrailing = computed(() => props.value.icon && props.value.trailing || props.value.loading && props.value.trailing || !!props.value.trailingIcon);
+  const leadingIconName = computed(() => {
     if (props.value.loading)
       return props.value.loadingIcon || theme.value.app.icons.loading;
-    return props.value.prefixIcon || props.value.icon;
+    return props.value.leadingIcon || props.value.icon;
   });
-  const suffixIconName = computed(() => {
-    if (props.value.loading && !isPrefix.value)
+  const trailingIconName = computed(() => {
+    if (props.value.loading && !isLeading.value)
       return props.value.loadingIcon || theme.value.app.icons.loading;
-    return props.value.suffixIcon || props.value.icon;
+    return props.value.trailingIcon || props.value.icon;
   });
   return {
-    isPrefix,
-    isSuffix,
-    prefixIconName,
-    suffixIconName
+    isLeading,
+    isTrailing,
+    leadingIconName,
+    trailingIconName
   };
 }

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

@@ -0,0 +1,35 @@
+interface KbdKeysSpecificMap {
+    meta: string;
+    alt: string;
+    ctrl: string;
+}
+export declare const kbdKeysMap: {
+    meta: string;
+    ctrl: string;
+    alt: string;
+    win: string;
+    command: string;
+    shift: string;
+    option: string;
+    enter: string;
+    delete: string;
+    backspace: string;
+    escape: string;
+    tab: string;
+    capslock: string;
+    arrowup: string;
+    arrowright: string;
+    arrowdown: string;
+    arrowleft: string;
+    pageup: string;
+    pagedown: string;
+    home: string;
+    end: string;
+};
+export type KbdKey = keyof typeof kbdKeysMap;
+export type KbdKeySpecific = keyof KbdKeysSpecificMap;
+export declare const useKbd: () => {
+    macOS: import("vue").ComputedRef<false | "" | RegExpMatchArray | null | undefined>;
+    getKbdKey: (value?: KbdKey | (string & {})) => string | undefined;
+};
+export {};

package/dist/runtime/composables/useKbd.js

@@ -0,0 +1,49 @@
+import { createSharedComposable } from "@vueuse/core";
+import { computed, onMounted, reactive } from "vue";
+export const kbdKeysMap = {
+  meta: "",
+  ctrl: "",
+  alt: "",
+  win: "\u229E",
+  command: "\u2318",
+  shift: "\u21E7",
+  option: "\u2325",
+  enter: "\u21B5",
+  delete: "\u2326",
+  backspace: "\u232B",
+  escape: "\u238B",
+  tab: "\u21E5",
+  capslock: "\u21EA",
+  arrowup: "\u2191",
+  arrowright: "\u2192",
+  arrowdown: "\u2193",
+  arrowleft: "\u2190",
+  pageup: "\u21DE",
+  pagedown: "\u21DF",
+  home: "\u2196",
+  end: "\u2198"
+};
+export const useKbd = createSharedComposable(() => {
+  const macOS = computed(() => import.meta.client && navigator && navigator.userAgent && navigator.userAgent.match(/Macintosh;/));
+  const kbdKeysSpecificMap = reactive({
+    meta: " ",
+    alt: " ",
+    ctrl: " "
+  });
+  onMounted(() => {
+    kbdKeysSpecificMap.meta = macOS.value ? kbdKeysMap.command : kbdKeysMap.win;
+    kbdKeysSpecificMap.alt = macOS.value ? kbdKeysMap.option : "alt";
+    kbdKeysSpecificMap.ctrl = macOS.value ? "\u2303" : "ctrl";
+  });
+  function getKbdKey(value) {
+    if (!value)
+      return;
+    if (["meta", "alt", "ctrl"].includes(value))
+      return kbdKeysSpecificMap[value];
+    return kbdKeysMap[value] || value.toUpperCase();
+  }
+  return {
+    macOS,
+    getKbdKey
+  };
+});

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

@@ -0,0 +1,8 @@
+import type { Translator } from '../utils/translator.js';
+export declare const useLocale: () => {
+    locale: import("vue").ComputedRef<import("../utils").Locale<import("..").Messages>>;
+    lang: import("vue").ComputedRef<string>;
+    code: import("vue").ComputedRef<string>;
+    dir: import("vue").ComputedRef<import("../utils").Direction>;
+    t: Translator<import("..").Messages>;
+};

package/dist/runtime/composables/useLocale.js

@@ -0,0 +1,22 @@
+import { createSharedComposable } from "@vueuse/core";
+import { computed, toValue } from "vue";
+import { injectLocaleContext } from "../app/injections.js";
+import localeDefault from "../locale/en.js";
+import { createTranslator } from "../utils/index.js";
+export const useLocale = createSharedComposable(() => {
+  const _locale = injectLocaleContext();
+  const locale = computed(() => toValue(_locale) ?? localeDefault);
+  const lang = computed(() => locale.value.name);
+  const code = computed(() => locale.value.code);
+  const dir = computed(() => locale.value.dir ?? "ltr");
+  const t = (path, options) => {
+    return createTranslator(toValue(locale))(path, options);
+  };
+  return {
+    locale,
+    lang,
+    code,
+    dir,
+    t
+  };
+});

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

@@ -0,0 +1,29 @@
+import type { Component } from 'vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+export interface OverlayOptions<ComponentProps = Record<string, any>> {
+    defaultOpen?: boolean;
+    props?: ComponentProps;
+    unmountOnHide?: boolean;
+}
+interface _ComponentState<T extends Component> {
+    component?: T;
+    id: string | number;
+    isMounted: boolean;
+    modelValue: boolean;
+    resolve?: (value: unknown) => void;
+}
+export type OverlayComponentState = OverlayOptions<Component> & _ComponentState<Component>;
+export interface OverlayComponentInstance<T> {
+    open: (props?: ComponentProps<T>) => Promise<any>;
+    close: (value?: any) => void;
+    patch: (props: Partial<ComponentProps<T>>) => void;
+}
+export declare const useOverlay: () => {
+    overlays: import("vue").ShallowReactive<OverlayComponentState[]>;
+    open: <T extends Component>(id: OverlayComponentState["id"], props?: ComponentProps<T>) => Promise<any>;
+    close: (id: OverlayComponentState["id"], value?: any) => void;
+    create: <T extends Component>(component: T, options?: OverlayOptions<ComponentProps<T>>) => OverlayComponentInstance<T>;
+    patch: <T extends Component>(id: OverlayComponentState["id"], props: Partial<ComponentProps<T>>) => void;
+    unmount: (id: OverlayComponentState["id"]) => void;
+};
+export {};

package/dist/runtime/composables/useOverlay.js

@@ -0,0 +1,69 @@
+import { createSharedComposable } from "@vueuse/core";
+import { markRaw, reactive, shallowReactive } from "vue";
+export const useOverlay = createSharedComposable(() => {
+  const overlays = shallowReactive([]);
+  const generateId = () => `overlay-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+  function create(component, options = {}) {
+    const { props = {}, defaultOpen = false, unmountOnHide = true } = options;
+    const state = reactive({
+      id: generateId(),
+      modelValue: defaultOpen,
+      component: markRaw(component),
+      isMounted: defaultOpen,
+      unmountOnHide,
+      props
+    });
+    overlays.push(state);
+    return {
+      open: (props2) => open(state.id, props2),
+      close: (value) => close(state.id, value),
+      patch: (props2) => patch(state.id, props2)
+    };
+  }
+  function open(id, props) {
+    const overlay = getOverlay(id);
+    if (props)
+      patch(id, props);
+    overlay.modelValue = true;
+    overlay.isMounted = true;
+    return new Promise((resolve) => {
+      overlay.resolve = resolve;
+    });
+  }
+  function close(id, value) {
+    const overlay = getOverlay(id);
+    overlay.modelValue = false;
+    if (overlay.resolve) {
+      overlay.resolve(value);
+      overlay.resolve = void 0;
+    }
+  }
+  function unmount(id) {
+    const overlay = getOverlay(id);
+    overlay.isMounted = false;
+    if (overlay.unmountOnHide) {
+      const index = overlays.findIndex((item) => item.id === id);
+      overlays.splice(index, 1);
+    }
+  }
+  function patch(id, props) {
+    const overlay = getOverlay(id);
+    Object.entries(props).forEach(([key, value]) => {
+      overlay.props[key] = value;
+    });
+  }
+  function getOverlay(id) {
+    const item = overlays.find((item2) => item2.id === id);
+    if (!item)
+      throw new Error("Overlay not found");
+    return item;
+  }
+  return {
+    overlays,
+    open,
+    close,
+    create,
+    patch,
+    unmount
+  };
+});

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

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

package/dist/runtime/composables/useTheme.js

@@ -1,26 +1,22 @@
 import { transformUnoRules } from "@byyuurin/ui/unocss";
 import { createSharedComposable } from "@vueuse/core";
 import { computed, toValue } from "vue";
-import * as theme from "../theme/index.js";
+import { injectThemeExtension, injectUnoConfig } from "../app/injections.js";
+import * as uiTheme from "../theme/index.js";
 import { extendTheme, prepareStyler } from "../utils/index.js";
-import { defineInjection } from "./defineInjection.js";
-export const {
-  InjectionKey: InjectionKeyThemeExtension,
-  provide: provideThemeExtension,
-  inject: injectThemeExtension
-} = defineInjection("ui.themeExtension", {});
-export const {
-  InjectionKey: InjectionKeyUnoConfig,
-  provide: provideUnoConfig,
-  inject: injectUnoConfig
-} = defineInjection("ui.unoConfig", {});
 export const useTheme = createSharedComposable(() => {
   const themeExtension = injectThemeExtension();
   const unoConfig = injectUnoConfig();
-  const mergeRules = transformUnoRules(unoConfig);
+  const mergeRules = transformUnoRules(toValue(unoConfig));
   const { createStyler } = prepareStyler(mergeRules);
+  const theme = computed(() => extendTheme(toValue(themeExtension), uiTheme));
+  function generateStyle(name, props) {
+    const styler = createStyler(theme.value[name]);
+    return styler(props);
+  }
   return {
-    theme: computed(() => extendTheme(toValue(themeExtension), theme)),
-    createStyler
+    theme,
+    createStyler,
+    generateStyle
   };
 });