pukaad-ui-lib 1.282.0 → 1.282.2

package/dist/runtime/components/ui/native-select/NativeSelect.vue

@@ -17,28 +17,28 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <div
-    class="group/native-select relative w-fit has-[select:disabled]:opacity-50"
-    data-slot="native-select-wrapper"
-  >
-    <select
-      v-bind="{ ...$attrs, ...delegatedProps }"
-      v-model="modelValue"
-      data-slot="native-select"
+  <div
+    class="group/native-select relative w-fit has-[select:disabled]:opacity-50"
+    data-slot="native-select-wrapper"
+  >
+    <select
+      v-bind="{ ...$attrs, ...delegatedProps }"
+      v-model="modelValue"
+      data-slot="native-select"
       :class="cn(
   'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
   'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
   'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
   props.class
-)"
-    >
-      <slot />
-    </select>
-    <Icon
-      name="lucide:chevron-down"
-      class="text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none"
-      aria-hidden="true"
-      data-slot="native-select-icon"
-    />
-  </div>
+)"
+    >
+      <slot />
+    </select>
+    <Icon
+      name="lucide:chevron-down"
+      class="text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none"
+      aria-hidden="true"
+      data-slot="native-select-icon"
+    />
+  </div>
 </template>

package/dist/runtime/components/ui/native-select/NativeSelectOptGroup.vue

@@ -6,7 +6,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <optgroup data-slot="native-select-optgroup" :class="cn('bg-popover text-popover-foreground', props.class)">
-    <slot />
-  </optgroup>
+  <optgroup data-slot="native-select-optgroup" :class="cn('bg-popover text-popover-foreground', props.class)">
+    <slot />
+  </optgroup>
 </template>

package/dist/runtime/components/ui/native-select/NativeSelectOption.vue

@@ -6,7 +6,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <option data-slot="native-select-option" :class="cn('bg-popover text-popover-foreground', props.class)">
-    <slot />
-  </option>
+  <option data-slot="native-select-option" :class="cn('bg-popover text-popover-foreground', props.class)">
+    <slot />
+  </option>
 </template>

package/dist/runtime/components/ui/pagination/Pagination.vue

@@ -20,12 +20,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <PaginationRoot
-    v-slot="slotProps"
-    data-slot="pagination"
-    v-bind="forwarded"
-    :class="cn('mx-auto flex w-full justify-center', props.class)"
-  >
-    <slot v-bind="slotProps" />
-  </PaginationRoot>
+  <PaginationRoot
+    v-slot="slotProps"
+    data-slot="pagination"
+    v-bind="forwarded"
+    :class="cn('mx-auto flex w-full justify-center', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </PaginationRoot>
 </template>

package/dist/runtime/components/ui/pagination/PaginationContent.vue

@@ -11,12 +11,12 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <PaginationList
-    v-slot="slotProps"
-    data-slot="pagination-content"
-    v-bind="delegatedProps"
-    :class="cn('flex flex-row items-center gap-1', props.class)"
-  >
-    <slot v-bind="slotProps" />
-  </PaginationList>
+  <PaginationList
+    v-slot="slotProps"
+    data-slot="pagination-content"
+    v-bind="delegatedProps"
+    :class="cn('flex flex-row items-center gap-1', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </PaginationList>
 </template>

package/dist/runtime/components/ui/pagination/PaginationEllipsis.vue

@@ -11,14 +11,14 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <PaginationEllipsis
-    data-slot="pagination-ellipsis"
-    v-bind="delegatedProps"
-    :class="cn('flex size-9 items-center justify-center', props.class)"
-  >
-    <slot>
-      <Icon name="lucide:ellipsis" />
-      <span class="sr-only">More pages</span>
-    </slot>
-  </PaginationEllipsis>
+  <PaginationEllipsis
+    data-slot="pagination-ellipsis"
+    v-bind="delegatedProps"
+    :class="cn('flex size-9 items-center justify-center', props.class)"
+  >
+    <slot>
+      <Icon name="lucide:ellipsis" />
+      <span class="sr-only">More pages</span>
+    </slot>
+  </PaginationEllipsis>
 </template>

package/dist/runtime/components/ui/pagination/PaginationFirst.vue

@@ -14,20 +14,20 @@ const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <PaginationFirst
-    data-slot="pagination-first"
+  <PaginationFirst
+    data-slot="pagination-first"
     :class="
   cn(
     buttonVariants({ variant: 'ghost', size }),
     'gap-1 px-2.5 sm:pr-2.5',
     props.class
   )
-"
-    v-bind="forwarded"
-  >
-    <slot>
-      <Icon name="lucide:chevrons-left" />
-      <!-- <span class="hidden sm:block">First</span> -->
-    </slot>
-  </PaginationFirst>
+"
+    v-bind="forwarded"
+  >
+    <slot>
+      <Icon name="lucide:chevrons-left" />
+      <!-- <span class="hidden sm:block">First</span> -->
+    </slot>
+  </PaginationFirst>
 </template>

package/dist/runtime/components/ui/pagination/PaginationItem.vue

@@ -15,17 +15,17 @@ const delegatedProps = reactiveOmit(props, "class", "size", "isActive");
 </script>
 
 <template>
-  <PaginationListItem
-    data-slot="pagination-item"
-    v-bind="delegatedProps"
+  <PaginationListItem
+    data-slot="pagination-item"
+    v-bind="delegatedProps"
     :class="cn(
   buttonVariants({
     variant: isActive ? 'outline' : 'ghost',
     size
   }),
   props.class
-)"
-  >
-    <slot />
-  </PaginationListItem>
+)"
+  >
+    <slot />
+  </PaginationListItem>
 </template>

package/dist/runtime/components/ui/pagination/PaginationLast.vue

@@ -14,20 +14,20 @@ const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <PaginationLast
-    data-slot="pagination-last"
+  <PaginationLast
+    data-slot="pagination-last"
     :class="
   cn(
     buttonVariants({ variant: 'ghost', size }),
     'gap-1 px-2.5 sm:pr-2.5',
     props.class
   )
-"
-    v-bind="forwarded"
-  >
-    <slot>
-      <!-- <span class="hidden sm:block">Last</span> -->
-      <Icon name="lucide:chevrons-right" />
-    </slot>
-  </PaginationLast>
+"
+    v-bind="forwarded"
+  >
+    <slot>
+      <!-- <span class="hidden sm:block">Last</span> -->
+      <Icon name="lucide:chevrons-right" />
+    </slot>
+  </PaginationLast>
 </template>

package/dist/runtime/components/ui/pagination/PaginationNext.vue

@@ -14,20 +14,20 @@ const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <PaginationNext
-    data-slot="pagination-next"
+  <PaginationNext
+    data-slot="pagination-next"
     :class="
   cn(
     buttonVariants({ variant: 'ghost', size }),
     'gap-1 px-2.5 sm:pr-2.5',
     props.class
   )
-"
-    v-bind="forwarded"
-  >
-    <slot>
-      <span class="hidden sm:block">ถัดไป</span>
-      <Icon name="lucide:chevron-right" />
-    </slot>
-  </PaginationNext>
+"
+    v-bind="forwarded"
+  >
+    <slot>
+      <span class="hidden sm:block">ถัดไป</span>
+      <Icon name="lucide:chevron-right" />
+    </slot>
+  </PaginationNext>
 </template>

package/dist/runtime/components/ui/pagination/PaginationPrevious.vue

@@ -14,20 +14,20 @@ const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <PaginationPrev
-    data-slot="pagination-previous"
+  <PaginationPrev
+    data-slot="pagination-previous"
     :class="
   cn(
     buttonVariants({ variant: 'ghost', size }),
     'gap-1 px-2.5 sm:pr-2.5',
     props.class
   )
-"
-    v-bind="forwarded"
-  >
-    <slot>
-      <Icon name="lucide:chevron-left" />
-      <span class="hidden sm:block">ก่อนหน้า</span>
-    </slot>
-  </PaginationPrev>
+"
+    v-bind="forwarded"
+  >
+    <slot>
+      <Icon name="lucide:chevron-left" />
+      <span class="hidden sm:block">ก่อนหน้า</span>
+    </slot>
+  </PaginationPrev>
 </template>

package/dist/runtime/components/ui/pin-input/PinInput.vue

@@ -24,16 +24,16 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <PinInputRoot
-    data-slot="pin-input"
-    v-bind="forwarded"
+  <PinInputRoot
+    data-slot="pin-input"
+    v-bind="forwarded"
     :class="
   cn(
     'flex items-center gap-2 has-disabled:opacity-50 disabled:cursor-not-allowed',
     props.class
   )
-"
-  >
-    <slot />
-  </PinInputRoot>
+"
+  >
+    <slot />
+  </PinInputRoot>
 </template>

package/dist/runtime/components/ui/pin-input/PinInputGroup.vue

@@ -12,11 +12,11 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <Primitive
-    data-slot="pin-input-group"
-    v-bind="forwardedProps"
-    :class="cn('w-full flex items-center gap-[16px]', props.class)"
-  >
-    <slot />
-  </Primitive>
+  <Primitive
+    data-slot="pin-input-group"
+    v-bind="forwardedProps"
+    :class="cn('w-full flex items-center gap-[16px]', props.class)"
+  >
+    <slot />
+  </Primitive>
 </template>

package/dist/runtime/components/ui/pin-input/PinInputSeparator.vue

@@ -8,7 +8,7 @@ const forwardedProps = useForwardProps(props);
 </script>
 
 <template>
-  <Primitive data-slot="pin-input-separator" v-bind="forwardedProps">
-    <slot> </slot>
-  </Primitive>
+  <Primitive data-slot="pin-input-separator" v-bind="forwardedProps">
+    <slot> </slot>
+  </Primitive>
 </template>

package/dist/runtime/components/ui/pin-input/PinInputSlot.vue

@@ -14,9 +14,9 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <PinInputInput
-    data-slot="pin-input-slot"
-    v-bind="forwardedProps"
+  <PinInputInput
+    data-slot="pin-input-slot"
+    v-bind="forwardedProps"
     :class="
   cn(
     'font-body-medium',
@@ -25,6 +25,6 @@ const forwardedProps = useForwardProps(delegatedProps);
     'outline-none text-center rounded-md focus:z-10  focus:ring-[2px] focus:aria-invalid:ring-[0px] aria-invalid:border-destructive focus:aria-invalid:border-destructive',
     props.class
   )
-"
-  />
+"
+  />
 </template>

package/dist/runtime/components/ui/popover/Popover.vue

@@ -10,11 +10,11 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <PopoverRoot
-    v-slot="slotProps"
-    data-slot="popover"
-    v-bind="forwarded"
-  >
-    <slot v-bind="slotProps" />
-  </PopoverRoot>
+  <PopoverRoot
+    v-slot="slotProps"
+    data-slot="popover"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </PopoverRoot>
 </template>

package/dist/runtime/components/ui/popover/PopoverAnchor.vue

@@ -8,10 +8,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <PopoverAnchor
-    data-slot="popover-anchor"
-    v-bind="props"
-  >
-    <slot />
-  </PopoverAnchor>
+  <PopoverAnchor
+    data-slot="popover-anchor"
+    v-bind="props"
+  >
+    <slot />
+  </PopoverAnchor>
 </template>

package/dist/runtime/components/ui/popover/PopoverContent.d.vue.ts

@@ -8,19 +8,19 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    openAutoFocus: (event: Event) => any;
+    closeAutoFocus: (event: Event) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
     focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
     interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
-    openAutoFocus: (event: Event) => any;
-    closeAutoFocus: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpenAutoFocus?: ((event: Event) => any) | undefined;
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
     onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
-    onOpenAutoFocus?: ((event: Event) => any) | undefined;
-    onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {
     align: "center" | "start" | "end";
     sideOffset: number;

package/dist/runtime/components/ui/popover/PopoverContent.vue

@@ -36,18 +36,18 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <PopoverPortal>
-    <PopoverContent
-      data-slot="popover-content"
-      v-bind="{ ...$attrs, ...forwarded }"
+  <PopoverPortal>
+    <PopoverContent
+      data-slot="popover-content"
+      v-bind="{ ...$attrs, ...forwarded }"
       :class="
   cn(
     'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 rounded-md border shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden w-[var(--reka-popover-trigger-width)]',
     props.class
   )
-"
-    >
-      <slot />
-    </PopoverContent>
-  </PopoverPortal>
+"
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
 </template>

package/dist/runtime/components/ui/popover/PopoverContent.vue.d.ts

@@ -8,19 +8,19 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    openAutoFocus: (event: Event) => any;
+    closeAutoFocus: (event: Event) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
     focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
     interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
-    openAutoFocus: (event: Event) => any;
-    closeAutoFocus: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpenAutoFocus?: ((event: Event) => any) | undefined;
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
     onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
-    onOpenAutoFocus?: ((event: Event) => any) | undefined;
-    onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {
     align: "center" | "start" | "end";
     sideOffset: number;

package/dist/runtime/components/ui/popover/PopoverTrigger.vue

@@ -7,10 +7,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <PopoverTrigger
-    data-slot="popover-trigger"
-    v-bind="props"
-  >
-    <slot />
-  </PopoverTrigger>
+  <PopoverTrigger
+    data-slot="popover-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </PopoverTrigger>
 </template>

package/dist/runtime/components/ui/scroll-area/ScrollArea.vue

@@ -15,18 +15,18 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <ScrollAreaRoot
-    data-slot="scroll-area"
-    v-bind="delegatedProps"
-    :class="cn('relative', props.class)"
-  >
-    <ScrollAreaViewport
-      data-slot="scroll-area-viewport"
-      class="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
-    >
-      <slot />
-    </ScrollAreaViewport>
-    <ScrollBar />
-    <ScrollAreaCorner />
-  </ScrollAreaRoot>
+  <ScrollAreaRoot
+    data-slot="scroll-area"
+    v-bind="delegatedProps"
+    :class="cn('relative', props.class)"
+  >
+    <ScrollAreaViewport
+      data-slot="scroll-area-viewport"
+      class="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+    >
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollBar />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
 </template>

package/dist/runtime/components/ui/scroll-area/ScrollBar.vue

@@ -13,9 +13,9 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <ScrollAreaScrollbar
-    data-slot="scroll-area-scrollbar"
-    v-bind="delegatedProps"
+  <ScrollAreaScrollbar
+    data-slot="scroll-area-scrollbar"
+    v-bind="delegatedProps"
     :class="
   cn(
     'flex touch-none p-px transition-colors select-none',
@@ -23,11 +23,11 @@ const delegatedProps = reactiveOmit(props, "class");
     orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',
     props.class
   )
-"
-  >
-    <ScrollAreaThumb
-      data-slot="scroll-area-thumb"
-      class="bg-border relative flex-1 rounded-full"
-    />
-  </ScrollAreaScrollbar>
+"
+  >
+    <ScrollAreaThumb
+      data-slot="scroll-area-thumb"
+      class="bg-border relative flex-1 rounded-full"
+    />
+  </ScrollAreaScrollbar>
 </template>

package/dist/runtime/components/ui/select/Select.vue

@@ -18,11 +18,11 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <SelectRoot
-    v-slot="slotProps"
-    data-slot="select"
-    v-bind="forwarded"
-  >
-    <slot v-bind="slotProps" />
-  </SelectRoot>
+  <SelectRoot
+    v-slot="slotProps"
+    data-slot="select"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </SelectRoot>
 </template>

package/dist/runtime/components/ui/select/SelectContent.d.vue.ts

@@ -8,13 +8,13 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_25) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    closeAutoFocus: (event: Event) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
-    closeAutoFocus: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
-    onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {
     position: "item-aligned" | "popper";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/ui/select/SelectContent.vue

@@ -44,20 +44,20 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <SelectPortal>
+  <SelectPortal>
     <SelectContent data-slot="select-content" v-bind="{ ...$attrs, ...forwarded }" :class="
   cn(
     'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
     position === 'popper' && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
     props.class
   )
-">
-      <SelectScrollUpButton />
-      <SelectViewport
-        :class="cn('p-1', position === 'popper' && 'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1')">
-        <slot />
-      </SelectViewport>
-      <SelectScrollDownButton />
-    </SelectContent>
-  </SelectPortal>
+">
+      <SelectScrollUpButton />
+      <SelectViewport
+        :class="cn('p-1', position === 'popper' && 'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1')">
+        <slot />
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
 </template>