@byyuurin/ui 0.0.7 → 0.0.8

package/dist/runtime/components/Slider.vue

@@ -4,6 +4,11 @@ import type { SliderRootProps } from 'reka-ui'
 import type { slider } from '../theme'
 import type { ComponentAttrs } from '../types'
 
+export interface SliderEmits {
+  (event: 'update:modelValue', payload: number | number[]): void
+  (event: 'change', payload: Event): void
+}
+
 type SliderVariants = VariantProps<typeof slider>
 
 export interface SliderProps extends ComponentAttrs<typeof slider>, Pick<SliderRootProps, 'as' | 'name' | 'disabled' | 'inverted' | 'min' | 'max' | 'step' | 'minStepsBetweenThumbs'> {
@@ -11,17 +16,12 @@ export interface SliderProps extends ComponentAttrs<typeof slider>, Pick<SliderR
   size?: SliderVariants['size']
   /**
    * The orientation of the slider.
-   * @default 'horizontal'
+   * @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">

package/dist/runtime/components/Switch.vue

@@ -1,13 +1,21 @@
 <script lang="ts">
 import type { VariantProps } from '@byyuurin/ui-kit'
-import type { PrimitiveProps, SwitchRootProps } from 'reka-ui'
+import type { SwitchRootProps } from 'reka-ui'
 import type { switch as _switch } from '../theme'
 import type { ComponentAttrs } from '../types'
 
+export interface SwitchEmits {
+  (event: 'change', payload: Event): void
+}
+
+export interface SwitchSlots {
+  label?: (props: { label?: string }) => any
+  description?: (props: { description?: string }) => any
+}
+
 type SwitchVariants = VariantProps<typeof _switch>
 
-export interface SwitchProps extends ComponentAttrs<typeof _switch>, Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'> {
-  as?: PrimitiveProps['as']
+export interface SwitchProps extends ComponentAttrs<typeof _switch>, Pick<SwitchRootProps, 'as' | 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'> {
   size?: SwitchVariants['size']
   /** When `true`, the loading icon will be displayed. */
   loading?: boolean
@@ -23,15 +31,6 @@ export interface SwitchProps extends ComponentAttrs<typeof _switch>, Pick<Switch
   label?: string
   description?: string
 }
-
-export interface SwitchEmits {
-  (event: 'change', payload: Event): void
-}
-
-export interface SwitchSlots {
-  label?: (props: { label?: string }) => any
-  description?: (props: { description?: string }) => any
-}
 </script>
 
 <script lang="ts" setup>

package/dist/runtime/components/Table.vue

@@ -5,16 +5,8 @@ import type { Ref } from 'vue'
 import type { table } from '../theme'
 import type { ComponentAttrs } from '../types'
 
-export type TableData = RowData
-export type TableColumn<T extends TableData, D = unknown> = ColumnDef<T, D> & { title?: string }
-
-export interface TableOptions<T extends TableData> extends Omit<CoreOptions<T>, 'data' | 'columns' | 'getCoreRowModel' | 'state' | 'onStateChange' | 'renderFallbackValue'> {
-  state?: CoreOptions<T>['state']
-  onStateChange?: CoreOptions<T>['onStateChange']
-  renderFallbackValue?: CoreOptions<T>['renderFallbackValue']
-}
-
 type DynamicHeaderSlots<T, K = keyof T> = Record<string, (props: HeaderContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-header`, (props: HeaderContext<T, unknown>) => any>
+
 type DynamicCellSlots<T, K = keyof T> = Record<string, (props: CellContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-cell`, (props: CellContext<T, unknown>) => any>
 
 export type TableSlots<T> = {
@@ -23,7 +15,21 @@ export type TableSlots<T> = {
   caption: (props?: {}) => any
 } & DynamicHeaderSlots<T> & DynamicCellSlots<T>
 
-export interface TableProps<T extends TableData> extends ComponentAttrs<typeof table>, Pick<PrimitiveProps, 'as'>, TableOptions<T> {
+export type TableData = RowData
+export type TableColumn<T extends TableData, D = unknown> = ColumnDef<T, D> & { title?: string }
+
+export interface TableOptions<T extends TableData> extends Omit<CoreOptions<T>, 'data' | 'columns' | 'getCoreRowModel' | 'state' | 'onStateChange' | 'renderFallbackValue'> {
+  state?: CoreOptions<T>['state']
+  onStateChange?: CoreOptions<T>['onStateChange']
+  renderFallbackValue?: CoreOptions<T>['renderFallbackValue']
+}
+
+export interface TableProps<T extends TableData> extends ComponentAttrs<typeof table>, TableOptions<T> {
+  /**
+   * The element or component this component should render as.
+   * @default "div"
+   */
+  as?: PrimitiveProps['as']
   data?: T[]
   columns?: TableColumn<T>[]
   caption?: string
@@ -101,6 +107,7 @@ import { reactiveOmit } from '@vueuse/core'
 import { Primitive } from 'reka-ui'
 import { upperFirst } from 'scule'
 import { computed } from 'vue'
+import { useLocale } from '../composables/useLocale'
 import { useTheme } from '../composables/useTheme'
 
 const props = defineProps<TableProps<T>>()
@@ -221,6 +228,7 @@ function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
   ref.value = typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue
 }
 
+const { t } = useLocale()
 const { theme, createStyler } = useTheme()
 const style = computed(() => {
   const styler = createStyler(theme.value.table)
@@ -282,7 +290,7 @@ defineExpose({
         <tr v-else :class="style.tr({ class: props.ui?.tr })">
           <td :colspan="columns.length" :class="style.empty({ class: props.ui?.empty })">
             <slot name="empty">
-              Empty
+              {{ t('table.noData') }}
             </slot>
           </td>
         </tr>

package/dist/runtime/components/Tabs.vue

@@ -1,8 +1,19 @@
 <script lang="ts">
 import type { VariantProps } from '@byyuurin/ui-kit'
-import type { PrimitiveProps, TabsRootEmits, TabsRootProps } from 'reka-ui'
+import type { TabsRootEmits, TabsRootProps } from 'reka-ui'
 import type { tabs } from '../theme'
-import type { ComponentAttrs } from '../types'
+import type { ComponentAttrs, DynamicSlots } from '../types'
+
+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>
+  default?: SlotProps<T>
+  trailing?: SlotProps<T>
+  content?: SlotProps<T>
+} & DynamicSlots<T, SlotProps<T>>
 
 export interface TabsItem {
   label?: string
@@ -14,21 +25,14 @@ export interface TabsItem {
   disabled?: boolean
 }
 
-export interface TabsEmits extends TabsRootEmits<string | number> {}
-
-type SlotProps<T> = (props: { item: T, index: number }) => any
-
-export type TabsSlots<T extends { slot?: string }> = {
-  prefix?: SlotProps<T>
-  default?: SlotProps<T>
-  suffix?: SlotProps<T>
-  content?: SlotProps<T>
-} & Record<string, SlotProps<T>>
-
 type TabsVariants = VariantProps<typeof tabs>
 
 export interface TabsProps<T> extends ComponentAttrs<typeof tabs>, Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode' | 'unmountOnHide'> {
-  as?: PrimitiveProps['as']
+  /**
+   * The element or component this component should render as.
+   * @default "div"
+   */
+  as?: TabsRootProps<string | number>['as']
   items?: T[]
   variant?: TabsVariants['variant']
   orientation?: TabsVariants['orientation']
@@ -42,7 +46,7 @@ export interface TabsProps<T> extends ComponentAttrs<typeof tabs>, Pick<TabsRoot
   content?: boolean
   /**
    * The key used to get the label from the item.
-   * @default 'label'
+   * @default "label"
    */
   labelKey?: string
 }
@@ -88,15 +92,15 @@ const style = computed(() => {
         :disabled="item.disabled"
         :class="style.trigger({ class: props.ui?.trigger })"
       >
-        <slot name="prefix" :item="item" :index="index">
-          <span v-if="item.icon" :class="style.prefixIcon({ class: [item.icon, props.ui?.prefixIcon] })"></span>
+        <slot name="leading" :item="item" :index="index">
+          <span v-if="item.icon" :class="style.leadingIcon({ class: [item.icon, props.ui?.leadingIcon] })"></span>
         </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="suffix" :item="item" :index="index"></slot>
+        <slot name="trailing" :item="item" :index="index"></slot>
       </TabsTrigger>
     </TabsList>
 

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">

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,6 +60,7 @@ 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 { t } = useLocale()
 const { theme, createStyler } = useTheme()
 const style = computed(() => {
   const styler = createStyler(theme.value.toast)
@@ -121,9 +122,9 @@ defineExpose({
           <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

@@ -4,6 +4,10 @@ import type { ToastProviderProps } from 'reka-ui'
 import type { toaster } from '../theme'
 import type { ComponentAttrs } from '../types'
 
+export interface ToasterSlots {
+  default?: (props?: {}) => any
+}
+
 type ToasterVariants = VariantProps<typeof toaster>
 
 export interface ToasterProps extends ComponentAttrs<typeof toaster>, Omit<ToastProviderProps, 'swipeDirection'> {
@@ -20,10 +24,6 @@ export interface ToasterProps extends ComponentAttrs<typeof toaster>, Omit<Toast
    */
   portal?: boolean
 }
-
-export interface ToasterSlots {
-  default?: (props?: {}) => any
-}
 </script>
 
 <script setup lang="ts">

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>

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<any>;
+    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/useModal.d.ts

@@ -1,11 +1,6 @@
-import type { Component, ShallowRef } from 'vue';
+import type { Component } from 'vue';
 import type { ComponentProps } from 'vue-component-type-helpers';
 import type { ModalProps } from '../types/index.js';
-export interface ModalState {
-    component: Component | string;
-    props: ModalProps;
-}
-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.js

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

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

@@ -1,8 +1,4 @@
-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>;
 export declare const useTheme: () => {
     theme: import("vue").ComputedRef<typeof theme>;
     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>; };