@byyuurin/ui 0.3.0 → 0.4.0

package/dist/runtime/components/Tabs.vue

@@ -7,7 +7,7 @@ import { reactivePick } from "@vueuse/core";
 import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, useForwardPropsEmits } from "reka-ui";
 import { computed, ref } from "vue";
 import { useAppConfig } from "#imports";
-import { get } from "../utils";
+import { get, pick } from "../utils";
 import { cv, merge } from "../utils/style";
 import Avatar from "./Avatar.vue";
 import Badge from "./Badge.vue";
@@ -34,7 +34,7 @@ const rootProps = useForwardPropsEmits(reactivePick(props, "as", "unmountOnHide"
 const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.tabs));
-  return styler(props);
+  return styler(pick(props, ["color", "variant", "size", "orientation"]));
 });
 const triggersRef = ref([]);
 defineExpose({
@@ -43,78 +43,78 @@ defineExpose({
 </script>
 
 <template>
-  <TabsRoot
-    v-bind="rootProps"
-    :model-value="props.modelValue"
-    :default-value="props.defaultValue"
-    :orientation="props.orientation"
-    :activation-mode="props.activationMode"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    data-part="root"
-  >
-    <TabsList :class="ui.list({ class: props.ui?.list })" data-part="list">
-      <TabsIndicator :class="ui.indicator({ class: props.ui?.indicator })" data-part="indicator" />
-
-      <slot name="list-leading">
-      </slot>
-
-      <TabsTrigger
-        v-for="(item, index) of items"
-        :ref="(el) => triggersRef[index] = el"
-        :key="index"
-        :value="item.value ?? String(index)"
-        :disabled="item.disabled"
-        :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })"
-        data-part="trigger"
-      >
-        <slot name="leading" :item="item" :index="index" :ui="ui">
-          <Icon
-            v-if="item.icon"
-            :name="item.icon"
-            :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })"
-            data-part="leadingIcon"
-          />
-          <Avatar
-            v-else-if="item.avatar"
-            :size="item.ui?.leadingAvatarSize || props.ui?.leadingAvatarSize || ui.leadingAvatarSize()"
-            v-bind="item.avatar"
-            :class="ui.leadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.leadingAvatar] })"
-            data-part="leadingAvatar"
-          />
-        </slot>
-
-        <span v-if="get(item, props.labelKey) || !!slots.default" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })" data-part="label">
-          <slot :item="item" :index="index">{{ get(item, props.labelKey) }}</slot>
-        </span>
-
-        <slot name="trailing" :item="item" :index="index" :ui="ui">
-          <Badge
-            v-if="item.badge !== void 0"
-            color="neutral"
-            variant="outline"
-            :size="item.ui?.trailingBadgeSize || props.ui?.trailingBadgeSize || ui.trailingBadgeSize()"
-            v-bind="typeof item.badge === 'string' || typeof item.badge === 'number' ? { label: item.badge } : item.badge"
-            :class="ui.trailingBadge({ class: [props.ui?.trailingBadge, item.ui?.trailingBadge] })"
-            data-part="trailingBadge"
-          />
-        </slot>
-      </TabsTrigger>
-
-      <slot name="list-trailing"></slot>
-    </TabsList>
-
-    <template v-if="props.content">
-      <TabsContent
-        v-for="(item, index) of items"
-        :key="index"
-        :value="item.value ?? String(index)"
-        :class="ui.content({ class: [props.ui?.content, item.ui?.content] })"
-        data-part="content"
-      >
-        <slot :name="item.slot || 'content'" :item="item" :index="index" :ui="ui">
-          {{ item.content }}
-        </slot>
-      </TabsContent>
-    </template>
-  </TabsRoot>
+  <TabsRoot
+    v-bind="rootProps"
+    :model-value="props.modelValue"
+    :default-value="props.defaultValue"
+    :orientation="props.orientation"
+    :activation-mode="props.activationMode"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    data-part="root"
+  >
+    <TabsList :class="ui.list({ class: props.ui?.list })" data-part="list">
+      <TabsIndicator :class="ui.indicator({ class: props.ui?.indicator })" data-part="indicator" />
+
+      <slot name="list-leading">
+      </slot>
+
+      <TabsTrigger
+        v-for="(item, index) of items"
+        :ref="(el) => triggersRef[index] = el"
+        :key="index"
+        :value="item.value ?? String(index)"
+        :disabled="item.disabled"
+        :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })"
+        data-part="trigger"
+      >
+        <slot name="leading" :item="item" :index="index" :ui="ui">
+          <Icon
+            v-if="item.icon"
+            :name="item.icon"
+            :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })"
+            data-part="leadingIcon"
+          />
+          <Avatar
+            v-else-if="item.avatar"
+            :size="item.ui?.leadingAvatarSize || props.ui?.leadingAvatarSize || ui.leadingAvatarSize()"
+            v-bind="item.avatar"
+            :class="ui.leadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.leadingAvatar] })"
+            data-part="leadingAvatar"
+          />
+        </slot>
+
+        <span v-if="get(item, props.labelKey) || !!slots.default" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })" data-part="label">
+          <slot :item="item" :index="index">{{ get(item, props.labelKey) }}</slot>
+        </span>
+
+        <slot name="trailing" :item="item" :index="index" :ui="ui">
+          <Badge
+            v-if="item.badge !== void 0"
+            color="neutral"
+            variant="outline"
+            :size="item.ui?.trailingBadgeSize || props.ui?.trailingBadgeSize || ui.trailingBadgeSize()"
+            v-bind="typeof item.badge === 'string' || typeof item.badge === 'number' ? { label: item.badge } : item.badge"
+            :class="ui.trailingBadge({ class: [props.ui?.trailingBadge, item.ui?.trailingBadge] })"
+            data-part="trailingBadge"
+          />
+        </slot>
+      </TabsTrigger>
+
+      <slot name="list-trailing"></slot>
+    </TabsList>
+
+    <template v-if="props.content">
+      <TabsContent
+        v-for="(item, index) of items"
+        :key="index"
+        :value="item.value ?? String(index)"
+        :class="ui.content({ class: [props.ui?.content, item.ui?.content] })"
+        data-part="content"
+      >
+        <slot :name="item.slot || 'content'" :item="item" :index="index" :ui="ui">
+          {{ item.content }}
+        </slot>
+      </TabsContent>
+    </template>
+  </TabsRoot>
 </template>

package/dist/runtime/components/Textarea.vue

@@ -9,7 +9,7 @@ import { computed, nextTick, onMounted, shallowRef, watch } from "vue";
 import { useAppConfig } from "#imports";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
-import { looseToNumber } from "../utils";
+import { looseToNumber, pick } from "../utils";
 import { cv, merge } from "../utils/style";
 import Avatar from "./Avatar.vue";
 import Icon from "./Icon.vue";
@@ -54,9 +54,9 @@ const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.textarea));
   return styler({
-    ...props,
-    size: size.value,
+    ...pick(props, ["variant", "loading", "autoresize"]),
     color: color.value,
+    size: size.value,
     highlight: highlight.value,
     leading: isLeading.value || !!props.avatar || !!slots.leading,
     trailing: isTrailing.value || !!slots.trailing
@@ -125,51 +125,51 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <span v-if="isLeading || props.avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })" data-part="leading">
-      <slot name="leading" :ui="ui">
-        <Icon
-          v-if="isLeading && leadingIconName"
-          :name="leadingIconName"
-          :class="ui.leadingIcon({ class: props.ui?.leadingIcon })"
-          data-part="leadingIcon"
-        />
-        <Avatar
-          v-else-if="props.avatar"
-          :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()"
-          v-bind="props.avatar"
-          :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })"
-          data-part="leadingAvatar"
-        />
-      </slot>
-    </span>
-
-    <textarea
-      ref="textareaRef"
-      :value="modelValue"
-      :rows="props.rows"
-      :placeholder="props.placeholder"
-      :required="props.required"
-      v-bind="{ id, name, disabled, ...$attrs, ...ariaAttrs }"
-      :class="ui.base({ class: props.ui?.base })"
-      data-part="base"
-      @input="onInput"
-      @blur="onBlur"
-      @change="onChange"
-      @focus="emitFormFocus"
-    ></textarea>
-
-    <slot :ui="ui"></slot>
-
-    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })" data-part="trailing">
-      <slot name="trailing" :ui="ui">
-        <Icon
-          v-if="trailingIconName"
-          :name="trailingIconName"
-          :class="ui.trailingIcon({ class: props.ui?.trailingIcon })"
-          data-part="trailingIcon"
-        />
-      </slot>
-    </span>
-  </Primitive>
+  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <span v-if="isLeading || props.avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })" data-part="leading">
+      <slot name="leading" :ui="ui">
+        <Icon
+          v-if="isLeading && leadingIconName"
+          :name="leadingIconName"
+          :class="ui.leadingIcon({ class: props.ui?.leadingIcon })"
+          data-part="leadingIcon"
+        />
+        <Avatar
+          v-else-if="props.avatar"
+          :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()"
+          v-bind="props.avatar"
+          :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })"
+          data-part="leadingAvatar"
+        />
+      </slot>
+    </span>
+
+    <textarea
+      ref="textareaRef"
+      :value="modelValue"
+      :rows="props.rows"
+      :placeholder="props.placeholder"
+      :required="props.required"
+      v-bind="{ id, name, disabled, ...$attrs, ...ariaAttrs }"
+      :class="ui.base({ class: props.ui?.base })"
+      data-part="base"
+      @input="onInput"
+      @blur="onBlur"
+      @change="onChange"
+      @focus="emitFormFocus"
+    ></textarea>
+
+    <slot :ui="ui"></slot>
+
+    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })" data-part="trailing">
+      <slot name="trailing" :ui="ui">
+        <Icon
+          v-if="trailingIconName"
+          :name="trailingIconName"
+          :class="ui.trailingIcon({ class: props.ui?.trailingIcon })"
+          data-part="trailingIcon"
+        />
+      </slot>
+    </span>
+  </Primitive>
 </template>

package/dist/runtime/components/Timeline.vue

@@ -7,6 +7,7 @@ import { useVModel } from "@vueuse/core";
 import { Primitive, Separator } from "reka-ui";
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 import Avatar from "./Avatar.vue";
 const props = defineProps({
@@ -44,59 +45,59 @@ function getItemState(index) {
 const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.timeline));
-  return styler(props);
+  return styler(pick(props, ["orientation", "size", "color", "reverse"]));
 });
 </script>
 
 <template>
-  <Primitive :as="props.as" :data-orientation="props.orientation" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <div
-      v-for="(item, index) in props.items"
-      :key="item.value ?? index"
-      :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
-      data-part="item"
-      :data-state="getItemState(index)"
-    >
-      <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })" data-part="container">
-        <Avatar
-          :size="props.size"
-          :icon="item.icon"
-          v-bind="typeof item.avatar === 'object' ? item.avatar : {}"
+  <Primitive :as="props.as" :data-orientation="props.orientation" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <div
+      v-for="(item, index) in props.items"
+      :key="item.value ?? index"
+      :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
+      data-part="item"
+      :data-state="getItemState(index)"
+    >
+      <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })" data-part="container">
+        <Avatar
+          :size="props.size"
+          :icon="item.icon"
+          v-bind="typeof item.avatar === 'object' ? item.avatar : {}"
           :ui="{
   icon: ui.indicatorIcon({ class: props.ui?.indicatorIcon }),
   fallback: ui.indicatorFallback({ class: props.ui?.indicatorFallback })
-}"
-          :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })"
-          data-part="indicator"
-        >
-          <slot :name="item.slot ? `${item.slot}-indicator` : 'indicator'" :item="item"></slot>
-        </Avatar>
-
-        <Separator
-          v-if="index < items.length - 1"
-          :orientation="props.orientation"
-          :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })"
-          data-part="separator"
-        />
-      </div>
-
-      <div :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })" data-part="wrapper">
-        <div v-if="item.date" :class="ui.date({ class: [props.ui?.date, item.ui?.date] })" data-part="date">
-          <slot :name="item.slot ? `${item.slot}-date` : 'date'" :item="item">
-            {{ item.date }}
-          </slot>
-        </div>
-        <div v-if="item.title || !!slots.title" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })" data-part="title">
-          <slot :name="item.slot ? `${item.slot}-title` : 'title'" :item="item">
-            {{ item.title }}
-          </slot>
-        </div>
-        <div v-if="item.description || !!slots.description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })" data-part="description">
-          <slot :name="item.slot ? `${item.slot}-description` : 'description'" :item="item">
-            {{ item.description }}
-          </slot>
-        </div>
-      </div>
-    </div>
-  </Primitive>
+}"
+          :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })"
+          data-part="indicator"
+        >
+          <slot :name="item.slot ? `${item.slot}-indicator` : 'indicator'" :item="item"></slot>
+        </Avatar>
+
+        <Separator
+          v-if="index < items.length - 1"
+          :orientation="props.orientation"
+          :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })"
+          data-part="separator"
+        />
+      </div>
+
+      <div :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })" data-part="wrapper">
+        <div v-if="item.date" :class="ui.date({ class: [props.ui?.date, item.ui?.date] })" data-part="date">
+          <slot :name="item.slot ? `${item.slot}-date` : 'date'" :item="item">
+            {{ item.date }}
+          </slot>
+        </div>
+        <div v-if="item.title || !!slots.title" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })" data-part="title">
+          <slot :name="item.slot ? `${item.slot}-title` : 'title'" :item="item">
+            {{ item.title }}
+          </slot>
+        </div>
+        <div v-if="item.description || !!slots.description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })" data-part="description">
+          <slot :name="item.slot ? `${item.slot}-description` : 'description'" :item="item">
+            {{ item.description }}
+          </slot>
+        </div>
+      </div>
+    </div>
+  </Primitive>
 </template>

package/dist/runtime/components/Toast.vue

@@ -8,6 +8,7 @@ import { ToastAction, ToastClose, ToastDescription, ToastRoot, ToastTitle, useFo
 import { computed, nextTick, onMounted, shallowRef } from "vue";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 import Avatar from "./Avatar.vue";
 import Button from "./Button.vue";
@@ -40,7 +41,7 @@ const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.toast));
   return styler({
-    ...props,
+    ...pick(props, ["color", "orientation"]),
     title: !!props.title || !!slots.title
   });
 });
@@ -59,97 +60,97 @@ defineExpose({
 </script>
 
 <template>
-  <ToastRoot
-    ref="el"
-    v-slot="{ remaining, duration, open }"
-    v-bind="rootProps"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    :data-orientation="props.orientation"
-    data-part="root"
-    :style="{ '--height': height }"
-  >
-    <slot name="leading" :ui="ui">
-      <Avatar
-        v-if="props.avatar"
-        :size="props.ui?.avatarSize || ui.avatarSize()"
-        v-bind="props.avatar"
-        :class="ui.avatar({ class: props.ui?.avatar })"
-        data-part="avatar"
-      />
-      <Icon
-        v-else-if="props.icon"
-        :name="props.icon"
-        :class="ui.icon({ class: props.ui?.icon })"
-        data-part="icon"
-      />
-    </slot>
-
-    <div :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
-      <ToastTitle v-if="props.title || !!slots.title" :class="ui.title({ class: props.ui?.title })" data-part="title">
-        <slot name="title">
-          <component :is="props.title()" v-if="typeof props.title === 'function'" />
-          <component :is="props.title" v-else-if="typeof props.title === 'object'" />
-          <template v-else>
-            {{ props.title }}
-          </template>
-        </slot>
-      </ToastTitle>
-      <ToastDescription v-if="props.description || !!slots.description" :class="ui.description({ class: props.ui?.description })" data-part="description">
-        <slot name="description">
-          <component :is="props.description()" v-if="typeof props.description === 'function'" />
-          <component :is="props.description" v-else-if="typeof props.description === 'object'" />
-          <template v-else>
-            {{ props.description }}
-          </template>
-        </slot>
-      </ToastDescription>
-
-      <div v-if="props.orientation === 'vertical' && (props.actions?.length || slots.actions)" :class="ui.actions({ class: props.ui?.actions })" data-part="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" :color="props.color" v-bind="action" />
-          </ToastAction>
-        </slot>
-      </div>
-    </div>
-
-    <div
-      v-if="props.orientation === 'horizontal' && (props.actions?.length || !!slots.actions) || props.close"
-      :class="ui.actions({ class: props.ui?.actions })"
-      data-part="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" :color="props.color" v-bind="action" />
-          </ToastAction>
-        </slot>
-      </template>
-
-      <ToastClose v-if="props.close || !!slots.close" as-child>
-        <slot name="close" :ui="ui">
-          <Button
-            v-if="props.close"
-            :icon="props.closeIcon || appConfig.ui.icons.close"
-            color="neutral"
-            variant="link"
-            :aria-label="t('toast.close')"
-            v-bind="typeof props.close === 'object' ? props.close : {}"
-            :class="ui.close({ class: props.ui?.close })"
-            data-part="close"
-            @click.stop
-          />
-        </slot>
-      </ToastClose>
-    </div>
-
-    <Progress
-      v-if="props.progress && open && remaining >= 0 && duration"
-      :model-value="remaining / duration * 100"
-      :color="props.color"
-      v-bind="typeof props.progress === 'object' ? props.progress : {}"
-      size="sm"
-      :class="ui.progress({ class: props.ui?.progress })"
-    />
-  </ToastRoot>
+  <ToastRoot
+    ref="el"
+    v-slot="{ remaining, duration, open }"
+    v-bind="rootProps"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :data-orientation="props.orientation"
+    data-part="root"
+    :style="{ '--height': height }"
+  >
+    <slot name="leading" :ui="ui">
+      <Avatar
+        v-if="props.avatar"
+        :size="props.ui?.avatarSize || ui.avatarSize()"
+        v-bind="props.avatar"
+        :class="ui.avatar({ class: props.ui?.avatar })"
+        data-part="avatar"
+      />
+      <Icon
+        v-else-if="props.icon"
+        :name="props.icon"
+        :class="ui.icon({ class: props.ui?.icon })"
+        data-part="icon"
+      />
+    </slot>
+
+    <div :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
+      <ToastTitle v-if="props.title || !!slots.title" :class="ui.title({ class: props.ui?.title })" data-part="title">
+        <slot name="title">
+          <component :is="props.title()" v-if="typeof props.title === 'function'" />
+          <component :is="props.title" v-else-if="typeof props.title === 'object'" />
+          <template v-else>
+            {{ props.title }}
+          </template>
+        </slot>
+      </ToastTitle>
+      <ToastDescription v-if="props.description || !!slots.description" :class="ui.description({ class: props.ui?.description })" data-part="description">
+        <slot name="description">
+          <component :is="props.description()" v-if="typeof props.description === 'function'" />
+          <component :is="props.description" v-else-if="typeof props.description === 'object'" />
+          <template v-else>
+            {{ props.description }}
+          </template>
+        </slot>
+      </ToastDescription>
+
+      <div v-if="props.orientation === 'vertical' && (props.actions?.length || slots.actions)" :class="ui.actions({ class: props.ui?.actions })" data-part="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" :color="props.color" v-bind="action" />
+          </ToastAction>
+        </slot>
+      </div>
+    </div>
+
+    <div
+      v-if="props.orientation === 'horizontal' && (props.actions?.length || !!slots.actions) || props.close"
+      :class="ui.actions({ class: props.ui?.actions })"
+      data-part="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" :color="props.color" v-bind="action" />
+          </ToastAction>
+        </slot>
+      </template>
+
+      <ToastClose v-if="props.close || !!slots.close" as-child>
+        <slot name="close" :ui="ui">
+          <Button
+            v-if="props.close"
+            :icon="props.closeIcon || appConfig.ui.icons.close"
+            color="neutral"
+            variant="link"
+            :aria-label="t('toast.close')"
+            v-bind="typeof props.close === 'object' ? props.close : {}"
+            :class="ui.close({ class: props.ui?.close })"
+            data-part="close"
+            @click.stop
+          />
+        </slot>
+      </ToastClose>
+    </div>
+
+    <Progress
+      v-if="props.progress && open && remaining >= 0 && duration"
+      :model-value="remaining / duration * 100"
+      :color="props.color"
+      v-bind="typeof props.progress === 'object' ? props.progress : {}"
+      size="sm"
+      :class="ui.progress({ class: props.ui?.progress })"
+    />
+  </ToastRoot>
 </template>