@byyuurin/ui 0.2.0 → 0.3.0

package/dist/runtime/components/Tabs.vue

@@ -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/Tabs.vue.d.ts

@@ -1,6 +1,6 @@
-import type { ComponentPublicInstance } from 'vue';
 import type { VariantProps } from '@byyuurin/ui-kit';
 import type { TabsRootEmits, TabsRootProps } from 'reka-ui';
+import type { ComponentPublicInstance } from 'vue';
 import theme from '#build/ui/tabs';
 import type { AvatarProps, BadgeProps, ComponentBaseProps, ComponentStyler, ComponentUIProps, IconProps } from '../types';
 import type { DynamicSlots, GetItemKeys, StaticSlot } from '../types/utils';
@@ -77,10 +77,14 @@ export type TabsSlots<T extends TabsItem = TabsItem> = {
     index: number;
     ui: ComponentStyler<typeof theme>;
 }>;
-declare const __VLS_export: <T extends TabsItem>(__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<TabsProps<T> & {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends TabsItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<TabsProps<T> & {
         "onUpdate:modelValue"?: ((payload: string | number) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         triggersRef: import("vue").Ref<ComponentPublicInstance[], ComponentPublicInstance[]>;
     }>) => void;
@@ -90,8 +94,8 @@ declare const __VLS_export: <T extends TabsItem>(__VLS_props: NonNullable<Awaite
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/Textarea.vue

@@ -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/Textarea.vue.d.ts

@@ -3,11 +3,12 @@ import type { PrimitiveProps } from 'reka-ui';
 import theme from '#build/ui/textarea';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { ComponentBaseProps, ComponentStyler, ComponentUIProps } from '../types';
+import type { TextareaHTMLAttributes } from '../types/html';
 import type { ModelModifiers } from '../types/input';
 import type { MaybeNull, StaticSlot } from '../types/utils';
 type TextareaValue = MaybeNull<string | number>;
 type ThemeVariants = VariantProps<typeof theme>;
-export interface TextareaProps<T extends TextareaValue = TextareaValue> extends ComponentBaseProps, UseComponentIconsProps {
+export interface TextareaProps<T extends TextareaValue = TextareaValue> extends ComponentBaseProps, UseComponentIconsProps, /** @vue-ignore */ Omit<TextareaHTMLAttributes, 'name' | 'placeholder' | 'required' | 'autofocus' | 'disabled' | 'rows'> {
     /**
      * The element or component this component should render as.
      * @default "div"
@@ -35,7 +36,7 @@ export interface TextareaProps<T extends TextareaValue = TextareaValue> extends
     autoresizeDelay?: number;
     modelValue?: T;
     defaultValue?: T;
-    modelModifiers?: ModelModifiers;
+    modelModifiers?: ModelModifiers<T>;
     ui?: ComponentUIProps<typeof theme>;
 }
 export interface TextareaEmits<T extends TextareaValue = TextareaValue> {
@@ -54,23 +55,27 @@ export interface TextareaSlots {
         ui: ComponentStyler<typeof theme>;
     }>;
 }
-declare const __VLS_export: <T extends TextareaValue>(__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<TextareaProps<T> & {
-        onChange?: ((event: Event) => any) | undefined;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends TextareaValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<TextareaProps<T> & {
         onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
         "onUpdate:modelValue"?: ((payload: TextareaValue) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         textareaRef: import("vue").ShallowRef<MaybeNull<HTMLTextAreaElement>, MaybeNull<HTMLTextAreaElement>>;
     }>) => void;
     attrs: any;
     slots: TextareaSlots;
-    emit: ((evt: "change", event: Event) => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "update:modelValue", payload: TextareaValue) => void);
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", payload: TextareaValue) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/Timeline.vue

@@ -49,54 +49,54 @@ const ui = computed(() => {
 </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/Timeline.vue.d.ts

@@ -56,10 +56,14 @@ export type TimelineSlots<T extends TimelineItem = TimelineItem> = {
 } & DynamicSlots<T, 'indicator' | 'date' | 'title' | 'description', {
     item: T;
 }, false>;
-declare const __VLS_export: <T extends TimelineItem>(__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<TimelineProps<T> & {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends TimelineItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<TimelineProps<T> & {
         "onUpdate:model-value"?: ((value: string | number) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: TimelineSlots<T>;
@@ -67,8 +71,8 @@ declare const __VLS_export: <T extends TimelineItem>(__VLS_props: NonNullable<Aw
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};