@eslamdevui/ui 3.2.0-beta.1

package/dist/runtime/components/Separator.vue

@@ -0,0 +1,53 @@
+<script>
+import theme from "#build/ui/separator";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Separator, useForwardProps } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+import UIcon from "./Icon.vue";
+import UAvatar from "./Avatar.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  label: { type: String, required: false },
+  icon: { type: String, required: false },
+  avatar: { type: Object, required: false },
+  color: { type: null, required: false },
+  size: { type: null, required: false },
+  type: { type: null, required: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  decorative: { type: Boolean, required: false }
+});
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const rootProps = useForwardProps(reactivePick(props, "as", "decorative", "orientation"));
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.separator || {} })({
+  color: props.color,
+  orientation: props.orientation,
+  size: props.size,
+  type: props.type
+}));
+</script>
+
+<template>
+  <Separator v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div :class="ui.border({ class: props.ui?.border })" />
+
+    <template v-if="label || icon || avatar || !!slots.default">
+      <div :class="ui.container({ class: props.ui?.container })">
+        <slot>
+          <span v-if="label" :class="ui.label({ class: props.ui?.label })">{{ label }}</span>
+          <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
+          <UAvatar v-else-if="avatar" :size="props.ui?.avatarSize || ui.avatarSize()" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+        </slot>
+      </div>
+
+      <div :class="ui.border({ class: props.ui?.border })" />
+    </template>
+  </Separator>
+</template>

package/dist/runtime/components/Separator.vue.d.ts

@@ -0,0 +1,54 @@
+import { Separator } from 'reka-ui';
+import type { SeparatorProps as _SeparatorProps } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/separator';
+import type { AvatarProps } from '../types';
+import type { ComponentConfig } from '../types/utils';
+type Separator = ComponentConfig<typeof theme, AppConfig, 'separator'>;
+export interface SeparatorProps extends Pick<_SeparatorProps, 'decorative'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /** Display a label in the middle. */
+    label?: string;
+    /**
+     * Display an icon in the middle.
+     * @IconifyIcon
+     */
+    icon?: string;
+    /** Display an avatar in the middle. */
+    avatar?: AvatarProps;
+    /**
+     * @defaultValue 'neutral'
+     */
+    color?: Separator['variants']['color'];
+    /**
+     * @defaultValue 'xs'
+     */
+    size?: Separator['variants']['size'];
+    /**
+     * @defaultValue 'solid'
+     */
+    type?: Separator['variants']['type'];
+    /**
+     * The orientation of the separator.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: _SeparatorProps['orientation'];
+    class?: any;
+    ui?: Separator['slots'];
+}
+export interface SeparatorSlots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SeparatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SeparatorProps> & Readonly<{}>, {
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SeparatorSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Skeleton.vue

@@ -0,0 +1,29 @@
+<script>
+import theme from "#build/ui/skeleton";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false },
+  class: { type: null, required: false }
+});
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.skeleton || {} }));
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    aria-busy="true"
+    aria-label="loading"
+    aria-live="polite"
+    role="alert"
+    :class="ui({ class: props.class })"
+  >
+    <slot />
+  </Primitive>
+</template>

package/dist/runtime/components/Skeleton.vue.d.ts

@@ -0,0 +1,17 @@
+export interface SkeletonProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SkeletonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SkeletonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Slideover.vue

@@ -0,0 +1,137 @@
+<script>
+import theme from "#build/ui/slideover";
+</script>
+
+<script setup>
+import { computed, toRef } from "vue";
+import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden, useForwardPropsEmits } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
+import { usePortal } from "../composables/usePortal";
+import { tv } from "../utils/tv";
+import UButton from "./Button.vue";
+const props = defineProps({
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  content: { type: Object, required: false },
+  overlay: { type: Boolean, required: false, default: true },
+  transition: { type: Boolean, required: false, default: true },
+  side: { type: null, required: false, default: "right" },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
+  close: { type: [Boolean, Object], required: false, default: true },
+  closeIcon: { type: String, required: false },
+  dismissible: { type: Boolean, required: false, default: true },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  modal: { type: Boolean, required: false, default: true }
+});
+const emits = defineEmits(["after:leave", "after:enter", "close:prevent", "update:open"]);
+const slots = defineSlots();
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const rootProps = useForwardPropsEmits(reactivePick(props, "open", "defaultOpen", "modal"), emits);
+const portalProps = usePortal(toRef(() => props.portal));
+const contentProps = toRef(() => props.content);
+const contentEvents = computed(() => {
+  const defaultEvents = {
+    closeAutoFocus: (e) => e.preventDefault()
+  };
+  if (!props.dismissible) {
+    const events = ["pointerDownOutside", "interactOutside", "escapeKeyDown"];
+    return events.reduce((acc, curr) => {
+      acc[curr] = (e) => {
+        e.preventDefault();
+        emits("close:prevent");
+      };
+      return acc;
+    }, defaultEvents);
+  }
+  return defaultEvents;
+});
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover || {} })({
+  transition: props.transition,
+  side: props.side
+}));
+</script>
+
+<template>
+  <DialogRoot v-slot="{ open, close }" v-bind="rootProps">
+    <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
+      <slot :open="open" />
+    </DialogTrigger>
+
+    <DialogPortal v-bind="portalProps">
+      <DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
+
+      <DialogContent
+        :data-side="side"
+        :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
+        v-bind="contentProps"
+        @after-enter="emits('after:enter')"
+        @after-leave="emits('after:leave')"
+        v-on="contentEvents"
+      >
+        <VisuallyHidden v-if="!!slots.content && (title || !!slots.title || (description || !!slots.description))">
+          <DialogTitle v-if="title || !!slots.title">
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </DialogTitle>
+
+          <DialogDescription v-if="description || !!slots.description">
+            <slot name="description">
+              {{ description }}
+            </slot>
+          </DialogDescription>
+        </VisuallyHidden>
+
+        <slot name="content" :close="close">
+          <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" :class="ui.header({ class: props.ui?.header })">
+            <slot name="header" :close="close">
+              <div :class="ui.wrapper({ class: props.ui?.wrapper })">
+                <DialogTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+                  <slot name="title">
+                    {{ title }}
+                  </slot>
+                </DialogTitle>
+
+                <DialogDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+                  <slot name="description">
+                    {{ description }}
+                  </slot>
+                </DialogDescription>
+              </div>
+
+              <slot name="actions" />
+
+              <DialogClose v-if="props.close || !!slots.close" as-child>
+                <slot name="close" :close="close" :ui="ui">
+                  <UButton
+                    v-if="props.close"
+                    :icon="closeIcon || appConfig.ui.icons.close"
+                    color="neutral"
+                    variant="ghost"
+                    :aria-label="t('slideover.close')"
+                    v-bind="typeof props.close === 'object' ? props.close : {}"
+                    :class="ui.close({ class: props.ui?.close })"
+                  />
+                </slot>
+              </DialogClose>
+            </slot>
+          </div>
+
+          <div :class="ui.body({ class: props.ui?.body })">
+            <slot name="body" :close="close" />
+          </div>
+
+          <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+            <slot name="footer" :close="close" />
+          </div>
+        </slot>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>

package/dist/runtime/components/Slideover.vue.d.ts

@@ -0,0 +1,107 @@
+import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/slideover';
+import type { ButtonProps } from '../types';
+import type { EmitsToProps, ComponentConfig } from '../types/utils';
+type Slideover = ComponentConfig<typeof theme, AppConfig, 'slideover'>;
+export interface SlideoverProps extends DialogRootProps {
+    title?: string;
+    description?: string;
+    /** The content of the slideover. */
+    content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DialogContentEmits>>;
+    /**
+     * Render an overlay behind the slideover.
+     * @defaultValue true
+     */
+    overlay?: boolean;
+    /**
+     * Animate the slideover when opening or closing.
+     * @defaultValue true
+     */
+    transition?: boolean;
+    /**
+     * The side of the slideover.
+     * @defaultValue 'right'
+     */
+    side?: Slideover['variants']['side'];
+    /**
+     * Render the slideover in a portal.
+     * @defaultValue true
+     */
+    portal?: boolean | string | HTMLElement;
+    /**
+     * Display a close button to dismiss the slideover.
+     * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
+     * @defaultValue true
+     */
+    close?: boolean | Partial<ButtonProps>;
+    /**
+     * The icon displayed in the close button.
+     * @defaultValue appConfig.ui.icons.close
+     * @IconifyIcon
+     */
+    closeIcon?: string;
+    /**
+     * When `false`, the slideover will not close when clicking outside or pressing escape.
+     * @defaultValue true
+     */
+    dismissible?: boolean;
+    class?: any;
+    ui?: Slideover['slots'];
+}
+export interface SlideoverEmits extends DialogRootEmits {
+    'after:leave': [];
+    'after:enter': [];
+    'close:prevent': [];
+}
+export interface SlideoverSlots {
+    default(props: {
+        open: boolean;
+    }): any;
+    content(props: {
+        close: () => void;
+    }): any;
+    header(props: {
+        close: () => void;
+    }): any;
+    title(props?: {}): any;
+    description(props?: {}): any;
+    actions(props?: {}): any;
+    close(props: {
+        close: () => void;
+        ui: {
+            [K in keyof Required<Slideover['slots']>]: (props?: Record<string, any>) => string;
+        };
+    }): any;
+    body(props: {
+        close: () => void;
+    }): any;
+    footer(props: {
+        close: () => void;
+    }): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SlideoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    "after:leave": () => any;
+    "after:enter": () => any;
+    "close:prevent": () => any;
+}, string, import("vue").PublicProps, Readonly<SlideoverProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onAfter:leave"?: (() => any) | undefined;
+    "onAfter:enter"?: (() => any) | undefined;
+    "onClose:prevent"?: (() => any) | undefined;
+}>, {
+    close: boolean | Partial<ButtonProps>;
+    modal: boolean;
+    transition: boolean;
+    portal: boolean | string | HTMLElement;
+    overlay: boolean;
+    side: Slideover["variants"]["side"];
+    dismissible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SlideoverSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Slider.vue

@@ -0,0 +1,94 @@
+<script>
+import theme from "#build/ui/slider";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { SliderRoot, SliderRange, SliderTrack, SliderThumb, useForwardPropsEmits } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useFormField } from "../composables/useFormField";
+import { tv } from "../utils/tv";
+import UTooltip from "./Tooltip.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  size: { type: null, required: false },
+  color: { type: null, required: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  tooltip: { type: [Boolean, Object], required: false },
+  defaultValue: { type: [Number, Array], required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  name: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  inverted: { type: Boolean, required: false },
+  min: { type: Number, required: false, default: 0 },
+  max: { type: Number, required: false, default: 100 },
+  step: { type: Number, required: false, default: 1 },
+  minStepsBetweenThumbs: { type: Number, required: false }
+});
+const emits = defineEmits(["update:modelValue", "change"]);
+const modelValue = defineModel({ type: null });
+const appConfig = useAppConfig();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "orientation", "min", "max", "step", "minStepsBetweenThumbs", "inverted"), emits);
+const { id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField(props);
+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 : value[0];
+  }
+});
+const thumbs = computed(() => sliderValue.value?.length ?? 1);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slider || {} })({
+  disabled: disabled.value,
+  size: size.value,
+  color: color.value,
+  orientation: props.orientation
+}));
+function onChange(value) {
+  const event = new Event("change", { target: { value } });
+  emits("change", event);
+  emitFormChange();
+}
+</script>
+
+<template>
+  <SliderRoot
+    v-bind="{ ...rootProps, ...ariaAttrs }"
+    :id="id"
+    v-model="sliderValue"
+    :name="name"
+    :disabled="disabled"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :default-value="defaultSliderValue"
+    @update:model-value="emitFormInput()"
+    @value-commit="onChange"
+  >
+    <SliderTrack :class="ui.track({ class: props.ui?.track })">
+      <SliderRange :class="ui.range({ class: props.ui?.range })" />
+    </SliderTrack>
+
+    <template v-for="thumb in thumbs" :key="thumb">
+      <UTooltip
+        v-if="!!tooltip"
+        :text="thumbs > 1 ? String(sliderValue?.[thumb - 1]) : String(sliderValue)"
+        disable-closing-trigger
+        v-bind="typeof tooltip === 'object' ? tooltip : {}"
+      >
+        <SliderThumb :class="ui.thumb({ class: props.ui?.thumb })" />
+      </UTooltip>
+      <SliderThumb v-else :class="ui.thumb({ class: props.ui?.thumb })" />
+    </template>
+  </SliderRoot>
+</template>

package/dist/runtime/components/Slider.vue.d.ts

@@ -0,0 +1,58 @@
+import type { SliderRootProps } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/slider';
+import type { TooltipProps } from '../types';
+import type { ComponentConfig } from '../types/utils';
+type Slider = ComponentConfig<typeof theme, AppConfig, 'slider'>;
+export interface SliderProps extends Pick<SliderRootProps, 'name' | 'disabled' | 'inverted' | 'min' | 'max' | 'step' | 'minStepsBetweenThumbs'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * @defaultValue 'md'
+     */
+    size?: Slider['variants']['size'];
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: Slider['variants']['color'];
+    /**
+     * The orientation of the slider.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: SliderRootProps['orientation'];
+    /**
+     * Display a tooltip around the slider thumbs with the current value.
+     * `{ disableClosingTrigger: true }`{lang="ts-type"}
+     * @defaultValue false
+     */
+    tooltip?: boolean | TooltipProps;
+    /** The value of the slider when initially rendered. Use when you do not need to control the state of the slider. */
+    defaultValue?: number | number[];
+    class?: any;
+    ui?: Slider['slots'];
+}
+export interface SliderEmits<T extends number | number[] = number | number[]> {
+    (e: 'update:modelValue', payload: T): void;
+    (e: 'change', payload: Event): void;
+}
+declare const _default: <T extends number | number[]>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onChange?: ((payload: Event) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((payload: T) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onChange" | "onUpdate:modelValue"> & (SliderProps & {
+        modelValue?: T;
+    }) & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: SliderEmits<T> & ((evt: "update:modelValue", value: T | undefined) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/Stepper.vue

@@ -0,0 +1,116 @@
+<script>
+import theme from "#build/ui/stepper";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { StepperRoot, StepperItem, StepperTrigger, StepperIndicator, StepperSeparator, StepperTitle, StepperDescription, useForwardProps } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+import UIcon from "./Icon.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  items: { type: Array, required: true },
+  size: { type: null, required: false },
+  color: { type: null, required: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  defaultValue: { type: [String, Number], required: false },
+  disabled: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  linear: { type: Boolean, required: false, default: true }
+});
+const emits = defineEmits(["next", "prev"]);
+const slots = defineSlots();
+const modelValue = defineModel({ type: [String, Number] });
+const appConfig = useAppConfig();
+const rootProps = useForwardProps(reactivePick(props, "as", "orientation", "linear"));
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.stepper || {} })({
+  orientation: props.orientation,
+  size: props.size,
+  color: props.color
+}));
+const currentStepIndex = computed({
+  get() {
+    const value = modelValue.value ?? props.defaultValue;
+    return (typeof value === "string" ? props.items.findIndex((item) => item.value === value) : value) ?? 0;
+  },
+  set(value) {
+    modelValue.value = props.items?.[value]?.value ?? value;
+  }
+});
+const currentStep = computed(() => props.items?.[currentStepIndex.value]);
+const hasNext = computed(() => currentStepIndex.value < props.items?.length - 1);
+const hasPrev = computed(() => currentStepIndex.value > 0);
+defineExpose({
+  next() {
+    if (hasNext.value) {
+      currentStepIndex.value += 1;
+      emits("next", currentStep.value);
+    }
+  },
+  prev() {
+    if (hasPrev.value) {
+      currentStepIndex.value -= 1;
+      emits("prev", currentStep.value);
+    }
+  },
+  hasNext,
+  hasPrev
+});
+</script>
+
+<template>
+  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div :class="ui.header({ class: props.ui?.header })">
+      <StepperItem
+        v-for="(item, count) in items"
+        :key="item.value ?? count"
+        :step="count"
+        :disabled="item.disabled || props.disabled"
+        :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
+      >
+        <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
+          <StepperTrigger :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })">
+            <StepperIndicator :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })">
+              <slot name="indicator" :item="item">
+                <UIcon v-if="item.icon" :name="item.icon" :class="ui.icon({ class: [props.ui?.icon, item.ui?.icon] })" />
+                <template v-else>
+                  {{ count + 1 }}
+                </template>
+              </slot>
+            </StepperIndicator>
+          </StepperTrigger>
+
+          <StepperSeparator
+            v-if="count < items.length - 1"
+            :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })"
+          />
+        </div>
+
+        <div :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
+          <StepperTitle as="div" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })">
+            <slot name="title" :item="item">
+              {{ item.title }}
+            </slot>
+          </StepperTitle>
+          <StepperDescription as="div" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
+            <slot name="description" :item="item">
+              {{ item.description }}
+            </slot>
+          </StepperDescription>
+        </div>
+      </StepperItem>
+    </div>
+
+    <div v-if="currentStep?.content || !!slots.content || currentStep?.slot" :class="ui.content({ class: props.ui?.content })">
+      <slot
+        :name="currentStep?.slot || 'content'"
+        :item="currentStep"
+      >
+        {{ currentStep?.content }}
+      </slot>
+    </div>
+  </StepperRoot>
+</template>