@byyuurin/ui 0.0.10 → 0.0.11

package/dist/runtime/components/ScrollArea.vue

@@ -1,36 +1,32 @@
-<script lang="ts">
-import type { ScrollAreaRootProps } from 'reka-ui'
-import type { scrollArea } from '../theme'
-import { transitionProps } from '../theme/scroll-area'
-import type { ComponentAttrs } from '../types'
-
-export interface ScrollAreaProps extends ComponentAttrs<typeof scrollArea>, Pick<ScrollAreaRootProps, 'type' | 'dir' | 'scrollHideDelay'> {}
+<script>
+import { transitionProps } from "../theme/scroll-area";
 </script>
 
-<script setup lang="ts">
-import { reactivePick } from '@vueuse/core'
-import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from 'reka-ui'
-import { computed, ref } from 'vue'
-import { useTheme } from '../composables/useTheme'
-
-const props = withDefaults(defineProps<ScrollAreaProps>(), {})
-const rootRef = ref<InstanceType<typeof ScrollAreaRoot>>()
-const rootProps = reactivePick(props, 'type', 'dir', 'scrollHideDelay')
-
-const { generateStyle } = useTheme()
-const style = computed(() => generateStyle('scrollArea', props))
-
+<script setup>
+import { reactivePick } from "@vueuse/core";
+import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "reka-ui";
+import { computed, ref } from "vue";
+import { useTheme } from "../composables/useTheme";
+const props = defineProps({
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  type: { type: String, required: false },
+  dir: { type: String, required: false },
+  scrollHideDelay: { type: Number, required: false }
+});
+const rootRef = ref();
+const rootProps = reactivePick(props, "type", "dir", "scrollHideDelay");
+const { generateStyle } = useTheme();
+const style = computed(() => generateStyle("scrollArea", props));
 defineExpose({
   scrollTop,
-  scrollTopLeft,
-})
-
+  scrollTopLeft
+});
 function scrollTop() {
-  rootRef.value?.scrollTop()
+  rootRef.value?.scrollTop();
 }
-
 function scrollTopLeft() {
-  rootRef.value?.scrollTopLeft()
+  rootRef.value?.scrollTopLeft();
 }
 </script>
 
@@ -39,29 +35,33 @@ function scrollTopLeft() {
     ref="rootRef"
     v-bind="rootProps"
     :class="style.root({ class: [props.class, props.ui?.root] })"
+    data-part="root"
   >
-    <ScrollAreaViewport :class="style.viewport({ class: props.ui?.viewport })">
+    <ScrollAreaViewport :class="style.viewport({ class: props.ui?.viewport })" data-part="viewport">
       <slot></slot>
     </ScrollAreaViewport>
 
     <TransitionGroup v-bind="transitionProps">
       <ScrollAreaScrollbar
         key="scrollbar-horizontal"
-        :class="style.scrollbar({ class: props.ui?.scrollbar })"
         orientation="horizontal"
+        :class="style.scrollbar({ class: props.ui?.scrollbar })"
+        data-part="scrollbar"
       >
-        <ScrollAreaThumb :class="style.thumb({ class: props.ui?.thumb })" />
+        <ScrollAreaThumb :class="style.thumb({ class: props.ui?.thumb })" data-part="thumb" />
       </ScrollAreaScrollbar>
       <ScrollAreaScrollbar
         key="scrollbar-vertical"
-        :class="style.scrollbar({ class: props.ui?.scrollbar })"
         orientation="vertical"
+        :class="style.scrollbar({ class: props.ui?.scrollbar })"
+        data-part="scrollbar"
       >
-        <ScrollAreaThumb :class="style.thumb({ class: props.ui?.thumb })" />
+        <ScrollAreaThumb :class="style.thumb({ class: props.ui?.thumb })" data-part="thumb" />
       </ScrollAreaScrollbar>
       <ScrollAreaCorner
         key="corner"
         :class="style.corner({ class: props.ui?.corner })"
+        data-part="corner"
       />
     </TransitionGroup>
   </ScrollAreaRoot>

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

@@ -0,0 +1,17 @@
+import type { ScrollAreaRootProps } from 'reka-ui';
+import type { scrollArea } from '../theme/index.js';
+import type { ComponentAttrs } from '../types/index.js';
+export interface ScrollAreaProps extends ComponentAttrs<typeof scrollArea>, Pick<ScrollAreaRootProps, 'type' | 'dir' | 'scrollHideDelay'> {
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ScrollAreaProps, {
+    scrollTop: () => void;
+    scrollTopLeft: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScrollAreaProps> & 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/Select.vue

@@ -1,191 +1,100 @@
-<script lang="ts">
-import type { VariantProps } from '@byyuurin/ui-kit'
-import type { SelectArrowProps, SelectContentEmits, SelectContentProps, SelectRootEmits, SelectRootProps } from 'reka-ui'
-import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import type { select } from '../theme'
-import type { AcceptableValue, ArrayOrNested, ComponentAttrs, EmitsToProps, GetItemKeys, GetItemValue, GetModelValue, GetModelValueEmits, MaybeArray, NestedItem } from '../types'
+<script>
 
-interface SelectItemBase {
-  label?: string
-  icon?: string
-  /**
-   * The option type.
-   * @default "option"
-   */
-  type?: 'label' | 'separator' | 'option'
-  value?: AcceptableValue
-  disabled?: boolean
-  [key: string]: any
-}
-
-export type SelectItem = SelectItemBase | AcceptableValue | boolean
-
-export type SelectEmits<T extends ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> | undefined, M extends boolean> = Omit<SelectRootEmits, 'update:modelValue'> & {
-  change: [payload: Event]
-  blur: [payload: FocusEvent]
-  focus: [payload: FocusEvent]
-} & GetModelValueEmits<T, VK, M>
-
-type SlotProps<T extends SelectItem> = (props: { item: T, index: number }) => any
-
-export interface SelectSlots<
-  T extends ArrayOrNested<SelectItem> = ArrayOrNested<SelectItem>,
-  VK extends GetItemKeys<T> | undefined = undefined,
-  M extends boolean = false,
-  I extends NestedItem<T> = NestedItem<T>,
-> {
-  'leading'?: (props: { modelValue?: GetModelValue<T, VK, M>, open: boolean, ui: ComponentAttrs<typeof select>['ui'] }) => any
-  'default'?: (props: { modelValue?: GetModelValue<T, VK, M>, open: boolean }) => any
-  'trailing'?: (props: { modelValue?: GetModelValue<T, VK, M>, open: boolean, ui: ComponentAttrs<typeof select>['ui'] }) => any
-  'item'?: SlotProps<I>
-  'item-leading'?: SlotProps<I>
-  'item-label'?: SlotProps<I>
-  'item-trailing'?: SlotProps<I>
-}
-
-type SelectVariants = VariantProps<typeof select>
-
-export interface SelectProps<
-  T extends ArrayOrNested<SelectItem> = ArrayOrNested<SelectItem>,
-  VK extends GetItemKeys<T> = 'value',
-  M extends boolean = false,
-> extends ComponentAttrs<typeof select>, UseComponentIconsProps, Omit<SelectRootProps<T>, 'dir' | 'multiple' | 'modelValue' | 'defaultValue' | 'by'> {
-  id?: string
-  /** The placeholder text when the select is empty. */
-  placeholder?: string
-  variant?: SelectVariants['variant']
-  size?: SelectVariants['size']
-  /**
-   * The icon displayed to open the menu.
-   * @default app.icons.chevronDown
-   */
-  trailingIcon?: string
-  /**
-   * The icon displayed when an item is selected.
-   * @default app.icons.check
-   */
-  selectedIcon?: string
-  /**
-   * The content of the menu.
-   * @default { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }
-   */
-  content?: Omit<SelectContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<SelectContentEmits>>
-  /**
-   * Display an arrow alongside the menu.
-   * @default false
-   */
-  arrow?: boolean | Omit<SelectArrowProps, 'as' | 'asChild'>
-  /**
-   * Render the menu in a portal.
-   * @default true
-   */
-  portal?: boolean
-  /**
-   * When `options` is an array of objects, select the field to use as the value.
-   * @default "value"
-   */
-  valueKey?: VK
-  /**
-   * When `options` is an array of objects, select the field to use as the label.
-   * @default "label"
-   */
-  labelKey?: VK
-  options?: T
-  /** The value of the Select when initially rendered. Use when you do not need to control the state of the Select. */
-  defaultValue?: GetModelValue<T, VK, M>
-  /** The controlled value of the Select. Can be bind as `v-model`. */
-  modelValue?: GetModelValue<T, VK, M>
-  /** Whether multiple options can be selected or not. */
-  multiple?: M & boolean
-  /** Highlight the ring color like a focus state. */
-  highlight?: boolean
-  underline?: boolean
-}
 </script>
 
-<script lang="ts" setup generic="T extends ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> = 'value', M extends boolean = false">
-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 { useButtonGroup } from '../composables/useButtonGroup'
-import { useComponentIcons } from '../composables/useComponentIcons'
-import { useFormItem } from '../composables/useFormItem'
-import { useTheme } from '../composables/useTheme'
-import { compare, get, isArrayOfArray } from '../utils'
-
+<script setup>
+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 { useButtonGroup } from "../composables/useButtonGroup";
+import { useComponentIcons } from "../composables/useComponentIcons";
+import { useFormItem } from "../composables/useFormItem";
+import { useTheme } from "../composables/useTheme";
+import { compare, get, isArrayOfArray } from "../utils";
 defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(defineProps<SelectProps<T, VK, M>>(), {
-  valueKey: 'value' as never,
-  labelKey: 'label' as never,
-  portal: true,
-})
-
-const emit = defineEmits<SelectEmits<T, VK, M>>()
-const slots = defineSlots<SelectSlots<T, VK, M>>()
-
-const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'disabled', 'autocomplete', 'required', 'multiple'), emit)
-const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }) as SelectContentProps)
-const arrowProps = toRef(() => props.arrow as SelectArrowProps)
-
-const { id, name, size: formItemSize, highlight, disabled, ariaAttrs, emitFormChange, emitFormInput, emitFormBlur, emitFormFocus } = useFormItem<SelectProps<T, VK, M>>(props)
-const { size: buttonGroupSize, orientation } = useButtonGroup(props)
-
-const { theme, generateStyle } = useTheme()
+  inheritAttrs: false
+});
+const props = defineProps({
+  id: { type: String, required: false },
+  placeholder: { type: String, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  trailingIcon: { type: String, required: false },
+  selectedIcon: { type: String, required: false },
+  content: { type: Object, required: false },
+  arrow: { type: [Boolean, Object], required: false },
+  portal: { type: Boolean, required: false, default: true },
+  valueKey: { type: null, required: false, default: "value" },
+  labelKey: { type: null, required: false, default: "label" },
+  options: { type: null, required: false },
+  defaultValue: { type: null, required: false },
+  modelValue: { type: null, required: false },
+  multiple: { type: Boolean, required: false },
+  highlight: { type: Boolean, required: false },
+  underline: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  icon: { type: String, required: false },
+  leading: { type: Boolean, required: false },
+  leadingIcon: { type: String, required: false },
+  trailing: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: String, required: false },
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  autocomplete: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:open", "change", "blur", "focus", "update:modelValue"]);
+const slots = defineSlots();
+const rootProps = useForwardPropsEmits(reactivePick(props, "open", "defaultOpen", "disabled", "autocomplete", "required", "multiple"), emit);
+const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8, position: "popper" }));
+const arrowProps = toRef(() => props.arrow);
+const { id, name, size: formItemSize, highlight, disabled, ariaAttrs, emitFormChange, emitFormInput, emitFormBlur, emitFormFocus } = useFormItem(props);
+const { size: buttonGroupSize, orientation } = useButtonGroup(props);
+const { theme, generateStyle } = useTheme();
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, {
-  trailingIcon: theme.value.app.icons.chevronDown,
-})))
-
-const style = computed(() => generateStyle('select', {
+  trailingIcon: theme.value.app.icons.chevronDown
+})));
+const style = computed(() => generateStyle("select", {
   ...props,
   groupOrientation: orientation.value,
   size: buttonGroupSize.value || formItemSize.value,
   highlight: highlight.value,
   leading: isLeading.value,
-  trailing: isTrailing.value,
-}))
-
-const groups = computed<SelectItem[][]>(
-  () => props.options?.length
-    ? isArrayOfArray(props.options) ? props.options : [props.options]
-    : [],
-)
-
-const items = computed(() => groups.value.flat() as T[])
-
-function displayValue(value?: MaybeArray<GetItemValue<T, VK>>): string {
+  trailing: isTrailing.value
+}));
+const groups = computed(
+  () => props.options?.length ? isArrayOfArray(props.options) ? props.options : [props.options] : []
+);
+const items = computed(() => groups.value.flat());
+function displayValue(value) {
   if (props.multiple && Array.isArray(value))
-    return value.map((v) => displayValue(v)).filter(Boolean).join(', ')
-
-  const item = items.value.find((item) => compare(typeof item === 'object' ? get(item as Record<string, any>, props.valueKey as string) : item, value))
-  return (item != null) && (typeof item === 'object' ? get(item, props.labelKey as string) : String(item))
+    return value.map((v) => displayValue(v)).filter(Boolean).join(", ");
+  const item = items.value.find((item2) => compare(typeof item2 === "object" ? get(item2, props.valueKey) : item2, value));
+  return item != null && (typeof item === "object" ? get(item, props.labelKey) : String(item));
 }
-
-function isSelectItem(item: SelectItem): item is SelectItemBase {
-  return typeof item === 'object' && item !== null
+function isSelectItem(item) {
+  return typeof item === "object" && item !== null;
 }
-
-function onUpdate(value: any) {
-  // @ts-expect-error - 'target' does not exist in type 'EventInit'
-  const event = new Event('change', { target: { value } })
-  emit('change', event)
-  emitFormChange()
-  emitFormInput()
+function onUpdate(value) {
+  const event = new Event("change", { target: { value } });
+  emit("change", event);
+  emitFormChange();
+  emitFormInput();
 }
-
-function onUpdateOpen(value: boolean) {
+function onUpdateOpen(value) {
   if (value) {
-    const event = new FocusEvent('focus')
-    emit('focus', event)
-    emitFormFocus()
-  }
-  else {
-    const event = new FocusEvent('blur')
-    emit('blur', event)
-    emitFormBlur()
+    const event = new FocusEvent("focus");
+    emit("focus", event);
+    emitFormFocus();
+  } else {
+    const event = new FocusEvent("blur");
+    emit("blur", event);
+    emitFormBlur();
   }
 }
 </script>
@@ -197,68 +106,69 @@ function onUpdateOpen(value: boolean) {
     :name="name"
     :autocomplete="props.autocomplete"
     :disabled="disabled"
-    :default-value="(props.defaultValue as MaybeArray<AcceptableValue>)"
-    :model-value="(props.modelValue as MaybeArray<AcceptableValue>)"
+    :default-value="props.defaultValue"
+    :model-value="props.modelValue"
     @update:model-value="onUpdate"
     @update:open="onUpdateOpen"
   >
-    <SelectTrigger v-bind="{ ...$attrs, ...ariaAttrs, id }" :class="style.base({ class: [props.class, props.ui?.base] })">
-      <span v-if="isLeading || slots.leading" :class="style.leading({ class: props.ui?.leading })">
-        <slot name="leading" :model-value="(innerValue as GetModelValue<T, VK, M>)" :open="open" :ui="props.ui">
-          <span v-if="isLeading && leadingIconName" :class="style.leadingIcon({ class: [leadingIconName, props.ui?.leadingIcon] })"></span>
+    <SelectTrigger v-bind="{ ...$attrs, ...ariaAttrs, id }" :class="style.base({ class: [props.class, props.ui?.base] })" data-part="base">
+      <span v-if="isLeading || slots.leading" :class="style.leading({ class: props.ui?.leading })" data-part="leading">
+        <slot name="leading" :model-value="innerValue" :open="open" :ui="props.ui">
+          <span v-if="isLeading && leadingIconName" :class="style.leadingIcon({ class: [leadingIconName, props.ui?.leadingIcon] })" data-part="leading-icon"></span>
         </slot>
       </span>
 
-      <slot :model-value="(innerValue as GetModelValue<T, VK, M>)" :open="open">
-        <template v-for="displayedModelValue in [displayValue((innerValue as GetModelValue<T, VK, M>))]" :key="displayedModelValue">
-          <span v-if="displayedModelValue" :class="style.value({ class: props.ui?.value })">
+      <slot :model-value="innerValue" :open="open">
+        <template v-for="displayedModelValue in [displayValue(innerValue)]" :key="displayedModelValue">
+          <span v-if="displayedModelValue" :class="style.value({ class: props.ui?.value })" data-part="value">
             {{ displayedModelValue }}
           </span>
-          <span v-else :class="style.placeholder({ class: props.ui?.placeholder })">
+          <span v-else :class="style.placeholder({ class: props.ui?.placeholder })" data-part="placeholder">
             {{ placeholder }}&nbsp;
           </span>
         </template>
       </slot>
 
-      <span v-if="isTrailing || !!slots.trailing" :class="style.trailing({ class: props.ui?.trailing })">
-        <slot name="trailing" :model-value="(innerValue as GetModelValue<T, VK, M>)" :open="open" :ui="props.ui">
-          <span v-if="trailingIconName" :class="style.trailingIcon({ class: [trailingIconName, props.ui?.trailingIcon] })"></span>
+      <span v-if="isTrailing || !!slots.trailing" :class="style.trailing({ class: props.ui?.trailing })" data-part="trailing">
+        <slot name="trailing" :model-value="innerValue" :open="open" :ui="props.ui">
+          <span v-if="trailingIconName" :class="style.trailingIcon({ class: [trailingIconName, props.ui?.trailingIcon] })" data-part="trailing-icon"></span>
         </slot>
       </span>
     </SelectTrigger>
 
     <SelectPortal :disabled="!props.portal">
-      <SelectContent v-bind="contentProps" :class="style.content({ class: props.ui?.content })">
-        <SelectViewport :class="style.viewport({ class: props.ui?.viewport })">
-          <SelectGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="style.group({ class: props.ui?.group })">
+      <SelectContent v-bind="contentProps" :class="style.content({ class: props.ui?.content })" data-part="content">
+        <SelectViewport :class="style.viewport({ class: props.ui?.viewport })" data-part="viewport">
+          <SelectGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="style.group({ class: props.ui?.group })" data-part="group">
             <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-              <SelectLabel v-if="isSelectItem(item) && item.type === 'label'" :class="style.label({ class: props.ui?.label })">
-                {{ get(item, props.labelKey as string) }}
+              <SelectLabel v-if="isSelectItem(item) && item.type === 'label'" :class="style.label({ class: props.ui?.label })" data-part="label">
+                {{ get(item, props.labelKey) }}
               </SelectLabel>
-              <SelectSeparator v-else-if="isSelectItem(item) && item.type === 'separator'" :class="style.separator({ class: props.ui?.separator })" />
+              <SelectSeparator v-else-if="isSelectItem(item) && item.type === 'separator'" :class="style.separator({ class: props.ui?.separator })" data-part="separator" />
 
               <SelectItem
                 v-else
-                :class="style.item({ class: props.ui?.item })"
+                :value="isSelectItem(item) ? get(item, props.valueKey) : item"
                 :disabled="isSelectItem(item) && item.disabled"
-                :value="isSelectItem(item) ? get(item, props.valueKey as string) : item"
+                :class="style.item({ class: props.ui?.item })"
+                data-part="item"
               >
-                <slot name="item" :item="(item as NestedItem<T>)" :index="index">
-                  <slot name="item-leading" :item="(item as NestedItem<T>)" :index="index">
-                    <span v-if="isSelectItem(item) && item.icon" :class="style.itemLeadingIcon({ class: [item.icon, props.ui?.itemLeadingIcon] })"></span>
+                <slot name="item" :item="item" :index="index">
+                  <slot name="item-leading" :item="item" :index="index">
+                    <span v-if="isSelectItem(item) && item.icon" :class="style.itemLeadingIcon({ class: [item.icon, props.ui?.itemLeadingIcon] })" data-part="item-leading-icon"></span>
                   </slot>
 
-                  <SelectItemText :class="style.itemLabel({ class: props.ui?.itemLabel })">
-                    <slot name="item-label" :item="(item as NestedItem<T>)" :index="index">
-                      {{ isSelectItem(item) ? get(item, props.labelKey as string) : item }}
+                  <SelectItemText :class="style.itemLabel({ class: props.ui?.itemLabel })" data-part="item-label">
+                    <slot name="item-label" :item="item" :index="index">
+                      {{ isSelectItem(item) ? get(item, props.labelKey) : item }}
                     </slot>
                   </SelectItemText>
 
-                  <span :class="style.itemTrailing({ class: props.ui?.itemTrailing })">
-                    <slot name="item-trailing" :item="(item as NestedItem<T>)" :index="index"></slot>
+                  <span :class="style.itemTrailing({ class: props.ui?.itemTrailing })" data-part="item-trailing">
+                    <slot name="item-trailing" :item="item" :index="index"></slot>
 
                     <SelectItemIndicator as-child>
-                      <span :class="style.itemTrailingIcon({ class: [props.selectedIcon || theme.app.icons.check, props.ui?.itemTrailingIcon] })"></span>
+                      <span :class="style.itemTrailingIcon({ class: [props.selectedIcon || theme.app.icons.check, props.ui?.itemTrailingIcon] })" data-part="item-trailing-icon"></span>
                     </SelectItemIndicator>
                   </span>
                 </slot>
@@ -267,7 +177,7 @@ function onUpdateOpen(value: boolean) {
           </SelectGroup>
         </SelectViewport>
 
-        <SelectArrow v-if="!!props.arrow" v-bind="arrowProps" :class="style.arrow({ class: props.ui?.arrow })" />
+        <SelectArrow v-if="!!props.arrow" v-bind="arrowProps" :class="style.arrow({ class: props.ui?.arrow })" data-part="arrow" />
       </SelectContent>
     </SelectPortal>
   </SelectRoot>

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

@@ -0,0 +1,119 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { SelectArrowProps, SelectContentEmits, SelectContentProps, SelectRootEmits, SelectRootProps } from 'reka-ui';
+import type { UseComponentIconsProps } from '../composables/useComponentIcons.js';
+import type { select } from '../theme/index.js';
+import type { AcceptableValue, ArrayOrNested, ComponentAttrs, EmitsToProps, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem } from '../types/index.js';
+interface SelectItemBase {
+    label?: string;
+    icon?: string;
+    /**
+     * The option type.
+     * @default "option"
+     */
+    type?: 'label' | 'separator' | 'option';
+    value?: AcceptableValue;
+    disabled?: boolean;
+    [key: string]: any;
+}
+export type SelectItem = SelectItemBase | string | number | boolean;
+export type SelectEmits<T extends ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> | undefined, M extends boolean> = Omit<SelectRootEmits, 'update:modelValue'> & {
+    change: [payload: Event];
+    blur: [payload: FocusEvent];
+    focus: [payload: FocusEvent];
+} & GetModelValueEmits<T, VK, M>;
+type SlotProps<T extends SelectItem> = (props: {
+    item: T;
+    index: number;
+}) => any;
+export interface SelectSlots<T extends ArrayOrNested<SelectItem> = ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false, I extends NestedItem<T> = NestedItem<T>> {
+    'leading'?: (props: {
+        modelValue?: GetModelValue<T, VK, M>;
+        open: boolean;
+        ui: ComponentAttrs<typeof select>['ui'];
+    }) => any;
+    'default'?: (props: {
+        modelValue?: GetModelValue<T, VK, M>;
+        open: boolean;
+    }) => any;
+    'trailing'?: (props: {
+        modelValue?: GetModelValue<T, VK, M>;
+        open: boolean;
+        ui: ComponentAttrs<typeof select>['ui'];
+    }) => any;
+    'item'?: SlotProps<I>;
+    'item-leading'?: SlotProps<I>;
+    'item-label'?: SlotProps<I>;
+    'item-trailing'?: SlotProps<I>;
+}
+type SelectVariants = VariantProps<typeof select>;
+export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> = 'value', M extends boolean = false> extends ComponentAttrs<typeof select>, UseComponentIconsProps, Omit<SelectRootProps<T>, 'dir' | 'multiple' | 'modelValue' | 'defaultValue' | 'by'> {
+    id?: string;
+    /** The placeholder text when the select is empty. */
+    placeholder?: string;
+    variant?: SelectVariants['variant'];
+    size?: SelectVariants['size'];
+    /**
+     * The icon displayed to open the menu.
+     * @default app.icons.chevronDown
+     */
+    trailingIcon?: string;
+    /**
+     * The icon displayed when an item is selected.
+     * @default app.icons.check
+     */
+    selectedIcon?: string;
+    /**
+     * The content of the menu.
+     * @default { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }
+     */
+    content?: Omit<SelectContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<SelectContentEmits>>;
+    /**
+     * Display an arrow alongside the menu.
+     * @default false
+     */
+    arrow?: boolean | Omit<SelectArrowProps, 'as' | 'asChild'>;
+    /**
+     * Render the menu in a portal.
+     * @default true
+     */
+    portal?: boolean;
+    /**
+     * When `options` is an array of objects, select the field to use as the value.
+     * @default "value"
+     */
+    valueKey?: VK;
+    /**
+     * When `options` is an array of objects, select the field to use as the label.
+     * @default "label"
+     */
+    labelKey?: VK;
+    options?: T;
+    /** The value of the Select when initially rendered. Use when you do not need to control the state of the Select. */
+    defaultValue?: GetModelValue<T, VK, M> | null;
+    /** The controlled value of the Select. Can be bind as `v-model`. */
+    modelValue?: GetModelValue<T, VK, M> | null;
+    /** Whether multiple options can be selected or not. */
+    multiple?: M & boolean;
+    /** Highlight the ring color like a focus state. */
+    highlight?: boolean;
+    underline?: boolean;
+}
+declare const _default: <T extends ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> = "value", M extends boolean = false>(__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 onBlur?: ((payload: FocusEvent) => any) | undefined;
+        readonly onChange?: ((payload: Event) => any) | undefined;
+        readonly onFocus?: ((payload: FocusEvent) => any) | undefined;
+        readonly "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((payload: GetModelValue<T, VK, M>) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onUpdate:open" | "onUpdate:modelValue"> & SelectProps<T, VK, M> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: SelectSlots<T, VK, M, NestedItem<T>>;
+    emit: ((evt: "blur", payload: FocusEvent) => void) & ((evt: "change", payload: Event) => void) & ((evt: "focus", payload: FocusEvent) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", payload: GetModelValue<T, VK, M>) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};