ui-ingredients 0.0.26 → 0.0.28

package/README.md

@@ -1,80 +1,80 @@
-# UI Ingredients
-
-Headless component library for [Svelte](https://svelte.dev/) powered by [zag](https://zagjs.com/)
-
-## Installation
-
-```bash
-npm install ui-ingredients
-```
-
-## Usage
-
-```svelte
-<script>
-  import {Clipboard} from 'ui-ingredients';
-
-  let {data} = $props();
-</script>
-
-<Clipboard.Root value={data.token}>
-  <Clipboard.Label>Token</Clipboard.Label>
-  <Clipboard.Control>
-    <Clipboard.Input />
-    <Clipboard.Trigger>
-      <Clipboard.Indicator copied>
-        <CheckIcon />
-      </Clipboard.Indicator>
-      <Clipboard.Indicator>
-        <CopyIcon />
-      </Clipboard.Indicator>
-    </Clipboard.Trigger>
-  </Clipboard.Control>
-</Clipboard.Root>
-```
-
-## Components
-
-- 🟢 Accordion
-- 🟢 Avatar
-- 🟢 Carousel
-- 🟢 Checkbox
-- 🟢 Clipboard
-- 🟢 Collapsible
-- 🟡 ColorPicker
-- 🟢 Combobox
-- 🟢 DatePicker
-- 🟢 Dialog
-- 🟢 Editable
-- 🟢 FileUpload
-- ⚪ FloatingPanel
-- 🟢 HoverCard
-- 🟢 Menu
-- 🟢 NumberInput
-- 🟢 Pagination
-- 🟢 PinInput
-- 🟢 Popover
-- 🟢 Portal
-- 🟡 Presence
-- 🟢 Progress
-- 🟢 QRCode
-- 🟢 RadioGroup
-- 🟢 RatingGroup
-- 🟢 Select
-- 🟢 SegmentGroup
-- 🟢 SignaturePad
-- 🟢 Slider
-- 🟢 Splitter
-- 🟢 Steps
-- 🟢 Switch
-- 🟢 Tabs
-- 🟢 TagsInput
-- 🟢 TimePicker
-- 🟢 Timer
-- 🟢 Toast
-- 🟢 ToggleGroup
-- 🟢 Tooltip
-- ⚪ Tour
-- 🟢 TreeView
-
-View components demo [here](https://ui-ingredients.vercel.app/)
+# UI Ingredients
+
+Headless component library for [Svelte](https://svelte.dev/) powered by [zag](https://zagjs.com/)
+
+## Installation
+
+```bash
+npm install ui-ingredients
+```
+
+## Usage
+
+```svelte
+<script>
+  import {Clipboard} from 'ui-ingredients';
+
+  let {data} = $props();
+</script>
+
+<Clipboard.Root value={data.token}>
+  <Clipboard.Label>Token</Clipboard.Label>
+  <Clipboard.Control>
+    <Clipboard.Input />
+    <Clipboard.Trigger>
+      <Clipboard.Indicator copied>
+        <CheckIcon />
+      </Clipboard.Indicator>
+      <Clipboard.Indicator>
+        <CopyIcon />
+      </Clipboard.Indicator>
+    </Clipboard.Trigger>
+  </Clipboard.Control>
+</Clipboard.Root>
+```
+
+## Components
+
+- 🟢 Accordion
+- 🟢 Avatar
+- 🟢 Carousel
+- 🟢 Checkbox
+- 🟢 Clipboard
+- 🟢 Collapsible
+- ⚪ ColorPicker
+- 🟢 Combobox
+- 🟢 DatePicker
+- 🟢 Dialog
+- 🟢 Editable
+- 🟢 FileUpload
+- ⚪ FloatingPanel
+- 🟢 HoverCard
+- 🟢 Menu
+- 🟢 NumberInput
+- 🟢 Pagination
+- 🟢 PinInput
+- 🟢 Popover
+- 🟢 Portal
+- ⚪ Presence
+- 🟢 Progress
+- 🟢 QRCode
+- 🟢 RadioGroup
+- 🟢 RatingGroup
+- 🟢 Select
+- 🟢 SegmentGroup
+- 🟢 SignaturePad
+- 🟢 Slider
+- 🟢 Splitter
+- 🟢 Steps
+- 🟢 Switch
+- 🟢 Tabs
+- 🟢 TagsInput
+- 🟢 TimePicker
+- 🟢 Timer
+- 🟢 Toast
+- 🟢 ToggleGroup
+- 🟢 Tooltip
+- ⚪ Tour
+- 🟢 TreeView
+
+View components demo [here](https://ui-ingredients.vercel.app/)

package/dist/accordion/item-content.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface AccordionItemContentProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/accordion/item-indicator.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface AccordionIndicatorProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface AccordionIndicatorProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
   }
 </script>
 
@@ -22,7 +21,7 @@
 {#if asChild}
   {@render asChild(attrs)}
 {:else}
-  <div {...attrs}>
+  <span {...attrs}>
     {@render children?.()}
-  </div>
+  </span>
 {/if}

package/dist/accordion/item-trigger.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface AccordionItemTriggerProps extends HtmlProps<'button'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>
 

package/dist/accordion/item.svelte

@@ -1,11 +1,11 @@
 <script lang="ts" module>
-  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/accordion';
   import type {Snippet} from 'svelte';
 
   export interface AccordionItemProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, ItemProps> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
     children?: Snippet<[state: ItemState]>;
   }
 </script>

package/dist/accordion/root.svelte

@@ -1,13 +1,11 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateAccordionProps, CreateAccordionReturn} from './create-accordion.svelte.js';
 
   export interface AccordionProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateAccordionProps> {
-    asChild?: Snippet<
-      [attrs: Omit<HtmlProps<'div'>, 'children'>, accordion: CreateAccordionReturn]
-    >;
+    asChild?: AsChild<GenericHtmlProps, CreateAccordionReturn>;
     children?: Snippet<[accordion: CreateAccordionReturn]>;
   }
 </script>

package/dist/avatar/fallback.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface AvatarFallbackProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface AvatarFallbackProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
   }
 </script>
 
@@ -21,7 +20,7 @@
 {#if asChild}
   {@render asChild(attrs)}
 {:else}
-  <div {...attrs}>
+  <span {...attrs}>
     {@render children?.()}
-  </div>
+  </span>
 {/if}

package/dist/avatar/image.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface AvatarImageProps extends HtmlProps<'img'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'img'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'img'>>;
   }
 </script>
 

package/dist/avatar/root.svelte

@@ -1,11 +1,11 @@
 <script lang="ts" module>
-  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import {type CreateAvatarProps, type CreateAvatarReturn} from './create-avatar.svelte.js';
 
   export interface AvatarProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateAvatarProps> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, avatar: CreateAvatarReturn]>;
+    asChild?: AsChild<GenericHtmlProps, CreateAvatarReturn>;
     children?: Snippet<[avatar: CreateAvatarReturn]>;
   }
 </script>

package/dist/carousel/indicator-group.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface CarouselIndicatorGroupProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/carousel/indicator.svelte

@@ -1,10 +1,9 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {IndicatorProps} from '@zag-js/carousel';
-  import type {Snippet} from 'svelte';
 
   export interface CarouselIndicatorProps extends Assign<HtmlProps<'button'>, IndicatorProps> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>
 

package/dist/carousel/item-group.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface CarouselItemGroupProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/carousel/item.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" module>
-  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/carousel';
   import type {Snippet} from 'svelte';
 
   export interface CarouselItemProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, ItemProps> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, state: ItemState]>;
+    asChild?: AsChild<GenericHtmlProps, ItemState>;
     children?: Snippet<[state: ItemState]>;
   }
 </script>

package/dist/carousel/next-trigger.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface CarouselNextTriggerProps extends HtmlProps<'button'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>
 

package/dist/carousel/prev-trigger.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface CarouselPrevTriggerProps extends HtmlProps<'button'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>
 

package/dist/carousel/root.svelte

@@ -1,11 +1,11 @@
 <script lang="ts" module>
-  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateCarouselProps, CreateCarouselReturn} from './create-carousel.svelte.js';
 
   export interface CarouselProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateCarouselProps> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, carousel: CreateCarouselReturn]>;
+    asChild?: AsChild<GenericHtmlProps, CreateCarouselReturn>;
     children?: Snippet<[carousel: CreateCarouselReturn]>;
   }
 </script>

package/dist/carousel/viewport.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface CarouselViewportProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/checkbox/control.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface CheckboxControlProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/checkbox/indicator.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface CheckboxIndicatorProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/checkbox/label.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
-  export interface CheckboxLabelProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  export interface CheckboxLabelProps extends HtmlProps<'span'> {
+    asChild?: AsChild;
   }
 </script>
 
@@ -21,7 +20,7 @@
 {#if asChild}
   {@render asChild(attrs)}
 {:else}
-  <div {...attrs}>
+  <span {...attrs}>
     {@render children?.()}
-  </div>
+  </span>
 {/if}

package/dist/checkbox/root.svelte

@@ -1,13 +1,11 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateCheckboxProps, CreateCheckboxReturn} from './create-checkbox.svelte.js';
 
   export interface CheckboxProps
     extends Assign<Omit<HtmlProps<'label'>, 'children'>, CreateCheckboxProps> {
-    asChild?: Snippet<
-      [attrs: Omit<HtmlProps<'label'>, 'children'>, checkbox: CreateCheckboxReturn]
-    >;
+    asChild?: AsChild<HtmlProps<'label'>, CreateCheckboxReturn>;
     children?: Snippet<[checkbox: CreateCheckboxReturn]>;
   }
 </script>

package/dist/clipboard/control.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface ClipboardControlProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/clipboard/indicator.svelte

@@ -1,11 +1,10 @@
 <script lang="ts" module>
-  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, HtmlProps} from '../types.js';
   import type {IndicatorProps} from '@zag-js/clipboard';
-  import type {Snippet} from 'svelte';
 
   export interface ClipboardIndicatorProps
-    extends Assign<HtmlProps<'div'>, Partial<IndicatorProps>> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    extends Assign<HtmlProps<'span'>, Partial<IndicatorProps>> {
+    asChild?: AsChild;
   }
 </script>
 
@@ -23,7 +22,7 @@
 {#if asChild}
   {@render asChild(attrs)}
 {:else}
-  <div {...attrs}>
+  <span {...attrs}>
     {@render children?.()}
-  </div>
+  </span>
 {/if}

package/dist/clipboard/input.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface ClipboardInputProps extends HtmlProps<'input'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'input'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'input'>>;
   }
 </script>
 

package/dist/clipboard/label.svelte

@@ -1,10 +1,8 @@
 <script lang="ts" module>
-  import type {Snippet} from 'svelte';
-
-  import type {HtmlProps} from '../types.js';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface ClipboardLabelProps extends HtmlProps<'label'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'label'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'label'>>;
   }
 </script>
 

package/dist/clipboard/root.svelte

@@ -1,13 +1,11 @@
 <script lang="ts" module>
-  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateClipboardProps, CreateClipboardReturn} from './create-clipboard.svelte.js';
 
   export interface ClipboardProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateClipboardProps> {
-    asChild?: Snippet<
-      [attrs: Omit<GenericHtmlProps, 'children'>, clipboard: CreateClipboardReturn]
-    >;
+    asChild?: AsChild<GenericHtmlProps, CreateClipboardReturn>;
     children?: Snippet<[clipboard: CreateClipboardReturn]>;
   }
 </script>

package/dist/clipboard/trigger.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface ClipboardTriggerProps extends HtmlProps<'button'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>
 

package/dist/collapsible/content.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface CollapsibleContentProps extends HtmlProps<'div'> {
-    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+    asChild?: AsChild;
   }
 </script>
 

package/dist/collapsible/create-collapsible.svelte.js

@@ -10,7 +10,7 @@ export function createCollapsible(props) {
         ...props,
         id: props.id ?? createUniqueId(),
         dir: locale?.dir,
-        open: props.defaultOpen,
+        open: props.defaultOpen ?? props.open,
         getRootNode: environment?.getRootNode,
         'open.controlled': props.open != null,
     }));

package/dist/collapsible/root.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {
     CreateCollapsibleProps,
@@ -8,9 +8,7 @@
 
   export interface CollapsibleProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateCollapsibleProps> {
-    asChild?: Snippet<
-      [attrs: Omit<GenericHtmlProps, 'children'>, collapsible: CreateCollapsibleReturn]
-    >;
+    asChild?: AsChild<GenericHtmlProps, CreateCollapsibleReturn>;
     children?: Snippet<[collapsible: CreateCollapsibleReturn]>;
   }
 </script>

package/dist/collapsible/trigger.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface CollapsibleTriggerProps extends HtmlProps<'button'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>
 

package/dist/color-picker/create-color-picker.svelte.js

@@ -10,7 +10,7 @@ export function createColorPicker(props) {
         ...props,
         id: props.id ?? createUniqueId(),
         dir: locale?.dir,
-        open: props.defaultOpen,
+        open: props.defaultOpen ?? props.open,
         value: props.value ? colorPicker.parse(props.value) : undefined,
         getRootNode: environment?.getRootNode,
         'open.controlled': props.open != null,

package/dist/combobox/clear-trigger.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
+  import type {AsChild, HtmlProps} from '../types.js';
 
   export interface ComboboxClearTriggerProps extends HtmlProps<'button'> {
-    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+    asChild?: AsChild<HtmlProps<'button'>>;
   }
 </script>