@byyuurin/ui 0.0.4 → 0.0.6

package/dist/runtime/components/PinInput.vue

@@ -0,0 +1,85 @@
+<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',
+  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

@@ -70,11 +70,10 @@ 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>>(), {
-  size: 'md',
   valueKey: 'value',
   labelKey: 'label',
   descriptionKey: 'description',

package/dist/runtime/components/ScrollArea.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { ScrollAreaRootProps } from 'reka-ui'
 import type { scrollArea } from '../theme'
-import { transitionProps } from '../theme/scrollArea'
+import { transitionProps } from '../theme/scroll-area'
 import type { ComponentAttrs } from '../types'
 
 export interface ScrollAreaProps extends ComponentAttrs<typeof scrollArea>, Pick<ScrollAreaRootProps, 'type' | 'dir' | 'scrollHideDelay'> {}
@@ -11,7 +11,7 @@ export interface ScrollAreaProps extends ComponentAttrs<typeof scrollArea>, Pick
 import { reactivePick } from '@vueuse/core'
 import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from 'reka-ui'
 import { computed, ref } from 'vue'
-import { useTheme } from '../composables'
+import { useTheme } from '../composables/useTheme'
 
 const props = withDefaults(defineProps<ScrollAreaProps>(), {})
 const rootRef = ref<InstanceType<typeof ScrollAreaRoot>>()

package/dist/runtime/components/Select.vue

@@ -105,12 +105,13 @@ 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 { useButtonGroup } from '../composables/useButtonGroup'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useTheme } from '../composables/useTheme'
 import { compare, get } from '../utils'
 
 const props = withDefaults(defineProps<SelectProps<T, I, V, M>>(), {
   variant: 'outline',
-  size: 'md',
   valueKey: 'value' as never,
   labelKey: 'label' as never,
   portal: true,
@@ -124,6 +125,8 @@ const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffse
 const arrowProps = toRef(() => props.arrow as SelectArrowProps)
 
 const { theme, createStyler } = useTheme()
+
+const { size, orientation } = useButtonGroup(props)
 const { isPrefix, isSuffix, prefixIconName, suffixIconName } = useComponentIcons(toRef(() => defu(props, {
   suffixIcon: theme.value.app.icons.down,
 })))
@@ -135,6 +138,8 @@ const style = computed(() => {
   const styler = createStyler(theme.value.select)
   return styler({
     ...props,
+    size: size.value,
+    groupOrientation: orientation.value,
     prefix: isPrefix.value,
     suffix: isSuffix.value,
   })

package/dist/runtime/components/Slider.vue

@@ -0,0 +1,96 @@
+<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>(), {
+  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

@@ -38,11 +38,9 @@ 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',
-})
+const props = withDefaults(defineProps<SwitchProps>(), {})
 const emit = defineEmits<SwitchEmits>()
 const slots = defineSlots<SwitchSlots>()
 const modelValue = defineModel<boolean>({ default: undefined })

package/dist/runtime/components/Tabs.vue

@@ -52,14 +52,13 @@ 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>>(), {
   defaultValue: '0',
   variant: 'solid',
   orientation: 'horizontal',
-  size: 'md',
   full: true,
   content: true,
   labelKey: 'label',

package/dist/runtime/components/Textarea.vue

@@ -42,14 +42,13 @@ export interface TextareaSlots {
 <script setup lang="ts">
 import { Primitive } from 'reka-ui'
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
-import { useTheme } from '../composables'
+import { useTheme } from '../composables/useTheme'
 
 defineOptions({
   inheritAttrs: false,
 })
 
 const props = withDefaults(defineProps<TextareaProps>(), {
-  size: 'md',
   variant: 'outline',
   rows: 3,
   maxRows: 0,
@@ -165,8 +164,7 @@ onMounted(() => {
       @blur="onBlur"
       @change="onChange"
       @focus="autoResize"
-    >
-    </textarea>
+    ></textarea>
 
     <slot></slot>
   </Primitive>

package/dist/runtime/components/Toast.vue

@@ -1,21 +1,30 @@
 <script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
 import type { PrimitiveProps, ToastRootEmits, ToastRootProps } from 'reka-ui'
 import type { toast } from '../theme'
 import type { ButtonProps, ComponentAttrs } from '../types'
 
+type ToastVariants = VariantProps<typeof toast>
+
 export interface ToastProps extends ComponentAttrs<typeof toast>, Pick<ToastRootProps, 'defaultOpen' | 'open' | 'type' | 'duration'> {
   /** @default "li" */
   as?: PrimitiveProps['as']
   title?: string
   description?: string
   icon?: string
+  orientation?: ToastVariants['orientation']
+  /**
+   * Display a list of actions:
+   * - under the title and description when orientation is `vertical`
+   * - next to the close button when orientation is `horizontal`
+   */
   actions?: ButtonProps[]
   /**
    * Display a close button to dismiss the toast.
    * @default true
    */
   close?: ButtonProps | boolean
-  /** @default `app.icons.close` */
+  /** @default app.icons.close */
   closeIcon?: string
 }
 
@@ -35,10 +44,11 @@ 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>(), {
+  orientation: 'vertical',
   close: true,
 })
 
@@ -50,12 +60,13 @@ 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 multiline = computed(() => !!props.title && !!props.description)
-
 const { theme, createStyler } = useTheme()
 const style = computed(() => {
   const styler = createStyler(theme.value.toast)
-  return styler({ ...props, multiline: multiline.value })
+  return styler({
+    ...props,
+    title: !!(props.title || slots.title),
+  })
 })
 
 defineExpose({
@@ -68,7 +79,7 @@ defineExpose({
     ref="el"
     v-slot="{ remaining, duration }"
     v-bind="rootProps"
-    :class="style.root({ class: [props.class, props.ui?.root], multiline })"
+    :class="style.root({ class: [props.class, props.ui?.root] })"
     :style="{ '--height': height }"
   >
     <slot name="icon">
@@ -87,7 +98,7 @@ defineExpose({
         </slot>
       </ToastDescription>
 
-      <div v-if="multiline && actions?.length" :class="style.actions({ class: props.ui?.actions, multiline: true })">
+      <div v-if="props.orientation === 'vertical' && actions?.length" :class="style.actions({ class: props.ui?.actions })">
         <slot name="actions">
           <ToastAction v-for="(action, index) in props.actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
             <Button size="xs" v-bind="action" />
@@ -96,8 +107,8 @@ defineExpose({
       </div>
     </div>
 
-    <div v-if="(!multiline && actions?.length) || props.close !== null" :class="style.actions({ class: props.ui?.actions, multiline: false })">
-      <template v-if="!multiline">
+    <div v-if="(props.orientation === 'horizontal' && actions?.length) || props.close !== null" :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>
             <Button size="xs" v-bind="action" />
@@ -107,7 +118,7 @@ defineExpose({
 
       <ToastClose as-child>
         <slot name="close" :ui="ui">
-          <UButton
+          <Button
             v-if="props.close"
             :icon="props.closeIcon || theme.app.icons.close"
             size="md"

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'
 
@@ -71,6 +72,7 @@ const style = computed(() => {
   return styler({
     ...props,
     swipeDirection: swipeDirection.value,
+    clickable: false,
   })
 })
 
@@ -113,11 +115,9 @@ function getOffset(index: number) {
         '--translate': expanded ? 'calc(var(--offset) * var(--translate-factor))' : 'calc(var(--before) * var(--gap))',
         '--transform': 'translateY(var(--translate)) scale(var(--scale))',
       }"
-      :class="[style.base(), {
-        'cursor-pointer': !!toast.click,
-      }]"
+      :class="style.base({ clickable: !!(toast.onClick) })"
       @update:open="onUpdateOpen($event, toast.id)"
-      @click="toast.click && toast.click(toast)"
+      @click="toast.onClick && toast.onClick(toast)"
     />
 
     <ToastPortal :disabled="!portal">

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/useButtonGroup.d.ts

@@ -0,0 +1,13 @@
+import type { ComputedRef } from 'vue';
+import type { ButtonGroupProps } from '../components/ButtonGroup.vue';
+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>;
+};
+export {};

package/dist/runtime/composables/useButtonGroup.mjs

@@ -0,0 +1,14 @@
+import { computed } from "vue";
+import { defineInjection } from "./defineInjection.mjs";
+export const {
+  InjectionKey: InjectionKeyButtonGroup,
+  inject: injectButtonGroup,
+  provide: provideButtonGroup
+} = defineInjection("ui.buttonGroup");
+export function useButtonGroup(props = {}) {
+  const buttonGroup = injectButtonGroup();
+  return {
+    size: computed(() => props.size ?? buttonGroup?.value.size),
+    orientation: computed(() => buttonGroup?.value.orientation)
+  };
+}

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

@@ -1,9 +1,9 @@
-import type { UserConfig } from 'unocss';
+import type { UserConfig } from '@unocss/core';
 import type { MaybeRefOrGetter } from 'vue';
 import * as theme from '../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>; };
+    createStyler: <V extends import("@byyuurin/ui-kit/index").CVVariants<S, B>, CV extends import("@byyuurin/ui-kit/index").CVCompoundVariants<V, S, B>, DV extends import("@byyuurin/ui-kit/index").CVDefaultVariants<V, S>, 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, DV, B, S>) => [keyof V] extends string[] ? (props: 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>; };
 };

package/dist/runtime/composables/useTheme.mjs

@@ -1,4 +1,4 @@
-import { transformUnoRules } from "@byyuurin/ui/unocss-preset";
+import { transformUnoRules } from "@byyuurin/ui/unocss";
 import { createSharedComposable } from "@vueuse/core";
 import { computed, toValue } from "vue";
 import * as theme from "../theme/index.mjs";

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

@@ -1,7 +1,7 @@
-import type { ToastProps } from '@byyuurin/ui';
+import type { ToastProps } from '../types';
 export interface Toast extends Omit<ToastProps, 'defaultOpen'> {
     id: string | number;
-    click?: (toast: Toast) => void;
+    onClick?: (toast: Toast) => void;
 }
 export declare const useToast: () => {
     toasts: import("vue").Ref<{
@@ -9,13 +9,13 @@ export declare const useToast: () => {
         [x: number]: any;
         [x: symbol]: ToastProps;
         id: string | number;
-        click?: ((toast: Toast) => void) | undefined;
+        onClick?: ((toast: Toast) => void) | undefined;
     }[], Toast[] | {
         [x: string]: any;
         [x: number]: any;
         [x: symbol]: ToastProps;
         id: string | number;
-        click?: ((toast: Toast) => void) | undefined;
+        onClick?: ((toast: Toast) => void) | undefined;
     }[]>;
     add: (toast: Partial<Toast>) => Toast;
     update: (id: string | number, toast: Partial<Omit<Toast, "id">>) => void;

package/dist/runtime/composables/useToast.mjs

@@ -1,17 +1,30 @@
 import { createSharedComposable } from "@vueuse/core";
-import { ref } from "vue";
+import { nextTick, ref } from "vue";
 export const useToast = createSharedComposable(() => {
   const toasts = ref([]);
+  const running = ref(false);
+  const maxToasts = 5;
+  const queue = [];
+  const generateId = () => `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+  async function processQueue() {
+    if (running.value || queue.length === 0)
+      return;
+    running.value = true;
+    while (queue.length > 0) {
+      const toast = queue.shift();
+      await nextTick();
+      toasts.value = [...toasts.value, toast].slice(-maxToasts);
+    }
+    running.value = false;
+  }
   function add(toast) {
     const body = {
-      id: Date.now().toString(),
+      id: generateId(),
       open: true,
       ...toast
     };
-    const index = toasts.value.findIndex((t) => t.id === body.id);
-    if (index === -1)
-      toasts.value.push(body);
-    toasts.value = toasts.value.slice(-5);
+    queue.push(body);
+    processQueue();
     return body;
   }
   function update(id, toast) {

package/dist/runtime/theme/accordion.d.ts

@@ -35,5 +35,22 @@ declare const _default: {
         trailingIcon: string;
         label: string;
     }, undefined>;
+    defaultVariants: import("@byyuurin/ui-kit/index").CVDefaultVariants<{
+        disabled: {
+            true: {
+                trigger: string;
+            };
+        };
+    }, {
+        root: string;
+        item: string;
+        header: string;
+        trigger: string;
+        content: string[];
+        body: string;
+        icon: string;
+        trailingIcon: string;
+        label: string;
+    }>;
 };
 export default _default;

package/dist/runtime/theme/accordion.mjs

@@ -1,25 +1,28 @@
 import { ct } from "@byyuurin/ui-kit";
-export default ct({
-  slots: {
-    root: "w-full color-ui-cb",
-    item: "border-b last:border-b-0",
-    header: "flex",
-    trigger: "group flex-1 flex items-center gap-2 font-medium text-sm py-4 focus-visible:outline-ui-fill min-w-0",
-    content: [
-      "overflow-hidden focus:outline-none",
-      "data-[state=open]:animate-[accordion-down_200ms_ease-out]",
-      "data-[state=closed]:animate-[accordion-up_200ms_ease-out]"
-    ],
-    body: "text-sm pb-4 color-ui-cb/80",
-    icon: "shrink-0 size-5",
-    trailingIcon: "shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200",
-    label: "text-start break-words"
-  },
-  variants: {
-    disabled: {
-      true: {
-        trigger: "cursor-not-allowed opacity-50"
+export default ct(
+  /* @unocss-include */
+  {
+    slots: {
+      root: "w-full color-ui-cb",
+      item: "border-b last:border-b-0",
+      header: "flex",
+      trigger: "group flex-1 flex items-center gap-2 font-medium text-sm py-4 outline-none focus-visible:outline-ui-cb/80 min-w-0",
+      content: [
+        "overflow-hidden focus:outline-none",
+        "data-[state=open]:animate-[accordion-down_200ms_ease-out]",
+        "data-[state=closed]:animate-[accordion-up_200ms_ease-out]"
+      ],
+      body: "text-sm pb-4 color-ui-cb/80",
+      icon: "shrink-0 size-5",
+      trailingIcon: "shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200",
+      label: "text-start break-words"
+    },
+    variants: {
+      disabled: {
+        true: {
+          trigger: "cursor-not-allowed opacity-50"
+        }
       }
     }
   }
-});
+);