pukaad-ui-lib 1.1.0 → 1.2.0

package/dist/runtime/components/ui/dialog/DialogFooter.vue

@@ -6,7 +6,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <div data-slot="dialog-footer" :class="cn('flex', props.class)">
-    <slot />
-  </div>
+  <div data-slot="dialog-footer" :class="cn('flex', props.class)">
+    <slot />
+  </div>
 </template>

package/dist/runtime/components/ui/dialog/DialogHeader.vue

@@ -6,15 +6,15 @@ const props = defineProps({
 </script>
 
 <template>
-  <div
-    data-slot="dialog-header"
+  <div
+    data-slot="dialog-header"
     :class="
   cn(
     'flex flex-col gap-2 text-center sm:text-left font-body-large',
     props.class
   )
-"
-  >
-    <slot />
-  </div>
+"
+  >
+    <slot />
+  </div>
 </template>

package/dist/runtime/components/ui/dialog/DialogOverlay.vue

@@ -12,16 +12,16 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <DialogOverlay
-    data-slot="dialog-overlay"
-    v-bind="delegatedProps"
+  <DialogOverlay
+    data-slot="dialog-overlay"
+    v-bind="delegatedProps"
     :class="
   cn(
     ' data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
     props.class
   )
-"
-  >
-    <slot />
-  </DialogOverlay>
+"
+  >
+    <slot />
+  </DialogOverlay>
 </template>

package/dist/runtime/components/ui/dialog/DialogScrollContent.vue

@@ -21,18 +21,18 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DialogPortal>
-    <DialogOverlay
-      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-    >
-      <DialogContent
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    >
+      <DialogContent
         :class="
   cn(
     'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
     props.class
   )
-"
-        v-bind="forwarded"
+"
+        v-bind="forwarded"
         @pointer-down-outside="
   (event) => {
     const originalEvent = event.detail.originalEvent;
@@ -41,17 +41,17 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       event.preventDefault();
     }
   }
-"
-      >
-        <slot />
-
-        <DialogClose
-          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
-        >
-          <Icon name="lucide:x" />
-          <span class="sr-only">Close</span>
-        </DialogClose>
-      </DialogContent>
-    </DialogOverlay>
-  </DialogPortal>
+"
+      >
+        <slot />
+
+        <DialogClose
+          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        >
+          <Icon name="lucide:x" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
 </template>

package/dist/runtime/components/ui/dialog/DialogTitle.vue

@@ -12,11 +12,11 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <DialogTitle
-    data-slot="dialog-title"
-    v-bind="forwardedProps"
-    :class="cn('text-lg leading-none font-title-large-prominent', props.class)"
-  >
-    <slot />
-  </DialogTitle>
+  <DialogTitle
+    data-slot="dialog-title"
+    v-bind="forwardedProps"
+    :class="cn('text-lg leading-none font-title-large-prominent', props.class)"
+  >
+    <slot />
+  </DialogTitle>
 </template>

package/dist/runtime/components/ui/dialog/DialogTrigger.vue

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

package/dist/runtime/components/ui/dropdown-menu/DropdownMenu.vue

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

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -20,19 +20,19 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DropdownMenuCheckboxItem
-    data-slot="dropdown-menu-checkbox-item"
-    v-bind="forwarded"
+  <DropdownMenuCheckboxItem
+    data-slot="dropdown-menu-checkbox-item"
+    v-bind="forwarded"
     :class="cn(
   'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
   props.class
-)"
-  >
-    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-      <DropdownMenuItemIndicator>
-        <CheckIcon class="size-4" />
-      </DropdownMenuItemIndicator>
-    </span>
-    <slot />
-  </DropdownMenuCheckboxItem>
+)"
+  >
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <CheckIcon class="size-4" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
 </template>

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -36,13 +36,13 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DropdownMenuPortal>
-    <DropdownMenuContent
-      data-slot="dropdown-menu-content"
-      v-bind="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 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', props.class)"
-    >
-      <slot />
-    </DropdownMenuContent>
-  </DropdownMenuPortal>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      data-slot="dropdown-menu-content"
+      v-bind="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 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', props.class)"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
 </template>

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuGroup.vue

@@ -7,10 +7,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <DropdownMenuGroup
-    data-slot="dropdown-menu-group"
-    v-bind="props"
-  >
-    <slot />
-  </DropdownMenuGroup>
+  <DropdownMenuGroup
+    data-slot="dropdown-menu-group"
+    v-bind="props"
+  >
+    <slot />
+  </DropdownMenuGroup>
 </template>

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -16,13 +16,13 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <DropdownMenuItem
-    data-slot="dropdown-menu-item"
-    :data-inset="inset ? '' : void 0"
-    :data-variant="variant"
-    v-bind="forwardedProps"
-    :class="cn('focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
-  >
-    <slot />
-  </DropdownMenuItem>
+  <DropdownMenuItem
+    data-slot="dropdown-menu-item"
+    :data-inset="inset ? '' : void 0"
+    :data-variant="variant"
+    v-bind="forwardedProps"
+    :class="cn('focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
+  >
+    <slot />
+  </DropdownMenuItem>
 </template>

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuLabel.vue

@@ -13,12 +13,12 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <DropdownMenuLabel
-    data-slot="dropdown-menu-label"
-    :data-inset="inset ? '' : void 0"
-    v-bind="forwardedProps"
-    :class="cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
-  >
-    <slot />
-  </DropdownMenuLabel>
+  <DropdownMenuLabel
+    data-slot="dropdown-menu-label"
+    :data-inset="inset ? '' : void 0"
+    v-bind="forwardedProps"
+    :class="cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
+  >
+    <slot />
+  </DropdownMenuLabel>
 </template>

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue

@@ -13,10 +13,10 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <DropdownMenuRadioGroup
-    data-slot="dropdown-menu-radio-group"
-    v-bind="forwarded"
-  >
-    <slot />
-  </DropdownMenuRadioGroup>
+  <DropdownMenuRadioGroup
+    data-slot="dropdown-menu-radio-group"
+    v-bind="forwarded"
+  >
+    <slot />
+  </DropdownMenuRadioGroup>
 </template>

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -20,25 +20,25 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DropdownMenuRadioItem
-    data-slot="dropdown-menu-radio-item"
-    v-bind="forwarded"
+  <DropdownMenuRadioItem
+    data-slot="dropdown-menu-radio-item"
+    v-bind="forwarded"
     :class="
   cn(
     'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
     props.class
   )
-"
-  >
-    <span
-      class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"
-    >
-      <DropdownMenuItemIndicator>
-        <slot name="indicator-icon">
-          <!-- <DotFilledIcon class="size-2 fill-current" /> -->
-        </slot>
-      </DropdownMenuItemIndicator>
-    </span>
-    <slot />
-  </DropdownMenuRadioItem>
+"
+  >
+    <span
+      class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"
+    >
+      <DropdownMenuItemIndicator>
+        <slot name="indicator-icon">
+          <!-- <DotFilledIcon class="size-2 fill-current" /> -->
+        </slot>
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuRadioItem>
 </template>

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuSeparator.vue

@@ -13,9 +13,9 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <DropdownMenuSeparator
-    data-slot="dropdown-menu-separator"
-    v-bind="delegatedProps"
-    :class="cn('bg-border -mx-1 my-1 h-px', props.class)"
-  />
+  <DropdownMenuSeparator
+    data-slot="dropdown-menu-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border -mx-1 my-1 h-px', props.class)"
+  />
 </template>

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuShortcut.vue

@@ -6,10 +6,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <span
-    data-slot="dropdown-menu-shortcut"
-    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
-  >
-    <slot />
-  </span>
+  <span
+    data-slot="dropdown-menu-shortcut"
+    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
+  >
+    <slot />
+  </span>
 </template>

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuSub.vue

@@ -12,7 +12,7 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <DropdownMenuSub data-slot="dropdown-menu-sub" v-bind="forwarded">
-    <slot />
-  </DropdownMenuSub>
+  <DropdownMenuSub data-slot="dropdown-menu-sub" v-bind="forwarded">
+    <slot />
+  </DropdownMenuSub>
 </template>

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuSubContent.vue

@@ -33,11 +33,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DropdownMenuSubContent
-    data-slot="dropdown-menu-sub-content"
-    v-bind="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 min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg', props.class)"
-  >
-    <slot />
-  </DropdownMenuSubContent>
+  <DropdownMenuSubContent
+    data-slot="dropdown-menu-sub-content"
+    v-bind="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 min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg', props.class)"
+  >
+    <slot />
+  </DropdownMenuSubContent>
 </template>

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -18,15 +18,15 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <DropdownMenuSubTrigger
-    data-slot="dropdown-menu-sub-trigger"
-    v-bind="forwardedProps"
+  <DropdownMenuSubTrigger
+    data-slot="dropdown-menu-sub-trigger"
+    v-bind="forwardedProps"
     :class="cn(
   'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
   props.class
-)"
-  >
-    <slot />
-   
-  </DropdownMenuSubTrigger>
+)"
+  >
+    <slot />
+   
+  </DropdownMenuSubTrigger>
 </template>

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuTrigger.vue

@@ -9,10 +9,10 @@ const forwardedProps = useForwardProps(props);
 </script>
 
 <template>
-  <DropdownMenuTrigger
-    data-slot="dropdown-menu-trigger"
-    v-bind="forwardedProps"
-  >
-    <slot />
-  </DropdownMenuTrigger>
+  <DropdownMenuTrigger
+    data-slot="dropdown-menu-trigger"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </DropdownMenuTrigger>
 </template>

package/dist/runtime/components/ui/form/FormControl.vue

@@ -5,14 +5,14 @@ const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
 </script>
 
 <template>
-  <Slot
-    :id="formItemId"
-    data-slot="form-control"
+  <Slot
+    :id="formItemId"
+    data-slot="form-control"
     :aria-describedby="
   !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`
-"
-    :aria-invalid="!!error"
-  >
-    <slot />
-  </Slot>
+"
+    :aria-invalid="!!error"
+  >
+    <slot />
+  </Slot>
 </template>

package/dist/runtime/components/ui/form/FormDescription.vue

@@ -8,11 +8,11 @@ const { formDescriptionId } = useFormField();
 </script>
 
 <template>
-  <p
-    :id="formDescriptionId"
-    data-slot="form-description"
-    :class="cn('text-muted-foreground font-body-small', props.class)"
-  >
-    <slot />
-  </p>
+  <p
+    :id="formDescriptionId"
+    data-slot="form-description"
+    :class="cn('text-muted-foreground font-body-small', props.class)"
+  >
+    <slot />
+  </p>
 </template>

package/dist/runtime/components/ui/form/FormItem.vue

@@ -11,7 +11,7 @@ provide(FORM_ITEM_INJECTION_KEY, id);
 </script>
 
 <template>
-  <div data-slot="form-item" :class="cn('grid gap-2', props.class)">
-    <slot />
-  </div>
+  <div data-slot="form-item" :class="cn('grid gap-2', props.class)">
+    <slot />
+  </div>
 </template>

package/dist/runtime/components/ui/form/FormLabel.vue

@@ -12,12 +12,12 @@ const { error, formItemId } = useFormField();
 </script>
 
 <template>
-  <Label
-    data-slot="form-label"
-    :data-error="!!error"
-    :class="cn('font-body-large-prominent text-gray', props.class)"
-    :for="formItemId"
-  >
-    <slot />
-  </Label>
+  <Label
+    data-slot="form-label"
+    :data-error="!!error"
+    :class="cn('font-body-large-prominent text-gray', props.class)"
+    :for="formItemId"
+  >
+    <slot />
+  </Label>
 </template>

package/dist/runtime/components/ui/form/FormMessage.vue

@@ -10,11 +10,11 @@ const { name, formMessageId } = useFormField();
 </script>
 
 <template>
-  <ErrorMessage
-    :id="formMessageId"
-    data-slot="form-message"
-    as="p"
-    :name="toValue(name)"
-    :class="cn('font-body-small text-destructive', props.class)"
-  />
+  <ErrorMessage
+    :id="formMessageId"
+    data-slot="form-message"
+    as="p"
+    :name="toValue(name)"
+    :class="cn('font-body-small text-destructive', props.class)"
+  />
 </template>

package/dist/runtime/components/ui/input/Input.vue

@@ -14,9 +14,9 @@ const modelValue = useVModel(props, "modelValue", emits, {
 </script>
 
 <template>
-  <input
-    v-model="modelValue"
-    data-slot="input"
+  <input
+    v-model="modelValue"
+    data-slot="input"
     :class="
   cn(
     'font-body-large',
@@ -25,6 +25,6 @@ const modelValue = useVModel(props, "modelValue", emits, {
     'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
     props.class
   )
-"
-  />
+"
+  />
 </template>

package/dist/runtime/components/ui/input-group/InputGroup.vue

@@ -6,9 +6,9 @@ const props = defineProps({
 </script>
 
 <template>
-  <div
-    data-slot="input-group"
-    role="group"
+  <div
+    data-slot="input-group"
+    role="group"
     :class="
   cn(
     'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md  border-[1px] transition-[color,box-shadow] outline-none',
@@ -24,8 +24,8 @@ const props = defineProps({
     'has-[[data-slot][aria-invalid=true]]:ring-destructive has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]:focus-within]:ring-[0px]',
     props.class
   )
-"
-  >
-    <slot />
-  </div>
+"
+  >
+    <slot />
+  </div>
 </template>

package/dist/runtime/components/ui/input-group/InputGroupAddon.vue

@@ -18,13 +18,13 @@ function handleInputGroupAddonClick(e) {
 </script>
 
 <template>
-  <div
-    role="group"
-    data-slot="input-group-addon"
-    :data-align="props.align"
-    :class="cn(inputGroupAddonVariants({ align: props.align }), props.class)"
-    @click="handleInputGroupAddonClick"
-  >
-    <slot />
-  </div>
+  <div
+    role="group"
+    data-slot="input-group-addon"
+    :data-align="props.align"
+    :class="cn(inputGroupAddonVariants({ align: props.align }), props.class)"
+    @click="handleInputGroupAddonClick"
+  >
+    <slot />
+  </div>
 </template>

package/dist/runtime/components/ui/input-group/InputGroupButton.vue

@@ -10,11 +10,11 @@ const props = defineProps({
 </script>
 
 <template>
-  <Button
-    :data-size="props.size"
-    :variant="props.variant"
-    :class="cn(inputGroupButtonVariants({ size: props.size }), props.class)"
-  >
-    <slot />
-  </Button>
+  <Button
+    :data-size="props.size"
+    :variant="props.variant"
+    :class="cn(inputGroupButtonVariants({ size: props.size }), props.class)"
+  >
+    <slot />
+  </Button>
 </template>