@ark-ui/svelte 5.7.0 → 5.9.0

package/dist/components/anatomy.d.ts

@@ -1 +1,46 @@
 export * from '@zag-js/anatomy';
+export { accordionAnatomy } from './accordion/accordion.anatomy';
+export { angleSliderAnatomy } from './angle-slider/angle-slider.anatomy';
+export { avatarAnatomy } from './avatar/avatar.anatomy';
+export { carouselAnatomy } from './carousel/carousel.anatomy';
+export { checkboxAnatomy } from './checkbox/checkbox.anatomy';
+export { clipboardAnatomy } from './clipboard/clipboard.anatomy';
+export { collapsibleAnatomy } from './collapsible/collapsible.anatomy';
+export { colorPickerAnatomy } from './color-picker/color-picker.anatomy';
+export { comboboxAnatomy } from './combobox/combobox.anatomy';
+export { datePickerAnatomy } from './date-picker/date-picker.anatomy';
+export { dialogAnatomy } from './dialog/dialog.anatomy';
+export { editableAnatomy } from './editable/editable.anatomy';
+export { fieldAnatomy } from './field/field.anatomy';
+export { fieldsetAnatomy } from './fieldset/fieldset.anatomy';
+export { fileUploadAnatomy } from './file-upload/file-upload.anatomy';
+export { floatingPanelAnatomy } from './floating-panel/floating-panel.anatomy';
+export { hoverCardAnatomy } from './hover-card/hover-card.anatomy';
+export { listboxAnatomy } from './listbox/listbox.anatomy';
+export { menuAnatomy } from './menu/menu.anatomy';
+export { numberInputAnatomy } from './number-input/number-input.anatomy';
+export { paginationAnatomy } from './pagination/pagination.anatomy';
+export { passwordInputAnatomy } from './password-input/password-input.anatomy';
+export { pinInputAnatomy } from './pin-input/pin-input.anatomy';
+export { popoverAnatomy } from './popover/popover.anatomy';
+export { progressAnatomy } from './progress/progress.anatomy';
+export { qrCodeAnatomy } from './qr-code/qr-code.anatomy';
+export { radioGroupAnatomy } from './radio-group/radio-group.anatomy';
+export { ratingGroupAnatomy } from './rating-group/rating-group.anatomy';
+export { scrollAreaAnatomy } from './scroll-area/scroll-area.anatomy';
+export { segmentGroupAnatomy } from './segment-group/segment-group.anatomy';
+export { selectAnatomy } from './select/select.anatomy';
+export { signaturePadAnatomy } from './signature-pad/signature-pad.anatomy';
+export { sliderAnatomy } from './slider/slider.anatomy';
+export { splitterAnatomy } from './splitter/splitter.anatomy';
+export { stepsAnatomy } from './steps/steps.anatomy';
+export { switchAnatomy } from './switch/switch.anatomy';
+export { tabsAnatomy } from './tabs/tabs.anatomy';
+export { tagsInputAnatomy } from './tags-input/tags-input.anatomy';
+export { timerAnatomy } from './timer/timer.anatomy';
+export { toastAnatomy } from './toast/toast.anatomy';
+export { toggleAnatomy } from './toggle/toggle.anatomy';
+export { toggleGroupAnatomy } from './toggle-group/toggle-group.anatomy';
+export { tooltipAnatomy } from './tooltip/tooltip.anatomy';
+export { tourAnatomy } from './tour/tour.anatomy';
+export { treeViewAnatomy } from './tree-view/tree-view.anatomy';

package/dist/components/anatomy.js

@@ -1 +1,46 @@
 export * from '@zag-js/anatomy';
+export { accordionAnatomy } from './accordion/accordion.anatomy';
+export { angleSliderAnatomy } from './angle-slider/angle-slider.anatomy';
+export { avatarAnatomy } from './avatar/avatar.anatomy';
+export { carouselAnatomy } from './carousel/carousel.anatomy';
+export { checkboxAnatomy } from './checkbox/checkbox.anatomy';
+export { clipboardAnatomy } from './clipboard/clipboard.anatomy';
+export { collapsibleAnatomy } from './collapsible/collapsible.anatomy';
+export { colorPickerAnatomy } from './color-picker/color-picker.anatomy';
+export { comboboxAnatomy } from './combobox/combobox.anatomy';
+export { datePickerAnatomy } from './date-picker/date-picker.anatomy';
+export { dialogAnatomy } from './dialog/dialog.anatomy';
+export { editableAnatomy } from './editable/editable.anatomy';
+export { fieldAnatomy } from './field/field.anatomy';
+export { fieldsetAnatomy } from './fieldset/fieldset.anatomy';
+export { fileUploadAnatomy } from './file-upload/file-upload.anatomy';
+export { floatingPanelAnatomy } from './floating-panel/floating-panel.anatomy';
+export { hoverCardAnatomy } from './hover-card/hover-card.anatomy';
+export { listboxAnatomy } from './listbox/listbox.anatomy';
+export { menuAnatomy } from './menu/menu.anatomy';
+export { numberInputAnatomy } from './number-input/number-input.anatomy';
+export { paginationAnatomy } from './pagination/pagination.anatomy';
+export { passwordInputAnatomy } from './password-input/password-input.anatomy';
+export { pinInputAnatomy } from './pin-input/pin-input.anatomy';
+export { popoverAnatomy } from './popover/popover.anatomy';
+export { progressAnatomy } from './progress/progress.anatomy';
+export { qrCodeAnatomy } from './qr-code/qr-code.anatomy';
+export { radioGroupAnatomy } from './radio-group/radio-group.anatomy';
+export { ratingGroupAnatomy } from './rating-group/rating-group.anatomy';
+export { scrollAreaAnatomy } from './scroll-area/scroll-area.anatomy';
+export { segmentGroupAnatomy } from './segment-group/segment-group.anatomy';
+export { selectAnatomy } from './select/select.anatomy';
+export { signaturePadAnatomy } from './signature-pad/signature-pad.anatomy';
+export { sliderAnatomy } from './slider/slider.anatomy';
+export { splitterAnatomy } from './splitter/splitter.anatomy';
+export { stepsAnatomy } from './steps/steps.anatomy';
+export { switchAnatomy } from './switch/switch.anatomy';
+export { tabsAnatomy } from './tabs/tabs.anatomy';
+export { tagsInputAnatomy } from './tags-input/tags-input.anatomy';
+export { timerAnatomy } from './timer/timer.anatomy';
+export { toastAnatomy } from './toast/toast.anatomy';
+export { toggleAnatomy } from './toggle/toggle.anatomy';
+export { toggleGroupAnatomy } from './toggle-group/toggle-group.anatomy';
+export { tooltipAnatomy } from './tooltip/tooltip.anatomy';
+export { tourAnatomy } from './tour/tour.anatomy';
+export { treeViewAnatomy } from './tree-view/tree-view.anatomy';

package/dist/components/combobox/combobox-root-provider.svelte

@@ -18,6 +18,10 @@
   }
   export interface ComboboxRootProviderProps<T extends CollectionItem>
     extends Assign<HTMLProps<'div'>, ComboboxRootProviderBaseProps<T>> {}
+
+  export type ComboboxRootProviderComponent<P = {}> = <T extends CollectionItem>(
+    props: Assign<ComboboxRootProviderProps<T>, P>,
+  ) => Snippet
 </script>
 
 <script lang="ts" generics="T extends CollectionItem">

package/dist/components/combobox/combobox-root-provider.svelte.d.ts

@@ -11,6 +11,7 @@ export interface ComboboxRootProviderBaseProps<T extends CollectionItem> extends
 }
 export interface ComboboxRootProviderProps<T extends CollectionItem> extends Assign<HTMLProps<'div'>, ComboboxRootProviderBaseProps<T>> {
 }
+export type ComboboxRootProviderComponent<P = {}> = <T extends CollectionItem>(props: Assign<ComboboxRootProviderProps<T>, P>) => Snippet;
 declare function $$render<T extends CollectionItem>(): {
     props: ComboboxRootProviderProps<T>;
     exports: {};

package/dist/components/combobox/combobox-root.svelte

@@ -1,5 +1,6 @@
 <script module lang="ts">
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { Snippet } from 'svelte'
   import type { CollectionItem } from '../collection'
   import type { UsePresenceProps } from '../presence'
   import type { UseComboboxProps } from './use-combobox.svelte'
@@ -12,6 +13,10 @@
 
   export interface ComboboxRootProps<T extends CollectionItem>
     extends Assign<HTMLProps<'div'>, ComboboxRootBaseProps<T>> {}
+
+  export type ComboboxRootComponent<P = {}> = <T extends CollectionItem>(
+    props: Assign<ComboboxRootProps<T>, P>,
+  ) => Snippet
 </script>
 
 <script lang="ts" generics="T extends CollectionItem">
@@ -34,6 +39,7 @@
   const [useComboboxProps, localProps] = $derived(
     createSplitProps<UseComboboxProps<T>>()(comboboxProps, [
       'allowCustomValue',
+      'alwaysSubmitOnEnter',
       'autoFocus',
       'closeOnSelect',
       'collection',

package/dist/components/combobox/combobox-root.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+import type { Snippet } from 'svelte';
 import type { CollectionItem } from '../collection';
 import type { UsePresenceProps } from '../presence';
 import type { UseComboboxProps } from './use-combobox.svelte';
@@ -6,6 +7,7 @@ export interface ComboboxRootBaseProps<T extends CollectionItem> extends UseComb
 }
 export interface ComboboxRootProps<T extends CollectionItem> extends Assign<HTMLProps<'div'>, ComboboxRootBaseProps<T>> {
 }
+export type ComboboxRootComponent<P = {}> = <T extends CollectionItem>(props: Assign<ComboboxRootProps<T>, P>) => Snippet;
 declare function $$render<T extends CollectionItem>(): {
     props: ComboboxRootProps<T>;
     exports: {};

package/dist/components/combobox/combobox.d.ts

@@ -14,6 +14,6 @@ export { default as ItemText, type ComboboxItemTextProps as ItemTextProps, type
 export { default as Label, type ComboboxLabelProps as LabelProps, type ComboboxLabelBaseProps as LabelBaseProps, } from './combobox-label.svelte';
 export { default as List, type ComboboxListProps as ListProps, type ComboboxListBaseProps as ListBaseProps, } from './combobox-list.svelte';
 export { default as Positioner, type ComboboxPositionerProps, type ComboboxPositionerBaseProps, } from './combobox-positioner.svelte';
-export { default as Root, type ComboboxRootBaseProps as RootBaseProps, type ComboboxRootProps as RootProps, } from './combobox-root.svelte';
-export { default as RootProvider, type ComboboxRootProviderBaseProps as RootProviderBaseProps, type ComboboxRootProviderProps as RootProviderProps, } from './combobox-root-provider.svelte';
+export { default as Root, type ComboboxRootBaseProps as RootBaseProps, type ComboboxRootProps as RootProps, type ComboboxRootComponent as RootComponent, } from './combobox-root.svelte';
+export { default as RootProvider, type ComboboxRootProviderBaseProps as RootProviderBaseProps, type ComboboxRootProviderProps as RootProviderProps, type ComboboxRootProviderComponent as RootProviderComponent, } from './combobox-root-provider.svelte';
 export { default as Trigger, type ComboboxTriggerProps as TriggerProps, type ComboboxTriggerBaseProps as TriggerBaseProps, } from './combobox-trigger.svelte';

package/dist/components/combobox/index.d.ts

@@ -15,8 +15,8 @@ export { default as ComboboxItemText, type ComboboxItemTextProps, type ComboboxI
 export { default as ComboboxLabel, type ComboboxLabelProps, type ComboboxLabelBaseProps } from './combobox-label.svelte';
 export { default as ComboboxList, type ComboboxListProps, type ComboboxListBaseProps } from './combobox-list.svelte';
 export { default as ComboboxPositioner, type ComboboxPositionerProps, type ComboboxPositionerBaseProps, } from './combobox-positioner.svelte';
-export { default as ComboboxRoot, type ComboboxRootBaseProps, type ComboboxRootProps } from './combobox-root.svelte';
-export { default as ComboboxRootProvider, type ComboboxRootProviderBaseProps, type ComboboxRootProviderProps, } from './combobox-root-provider.svelte';
+export { default as ComboboxRoot, type ComboboxRootBaseProps, type ComboboxRootProps, type ComboboxRootComponent, } from './combobox-root.svelte';
+export { default as ComboboxRootProvider, type ComboboxRootProviderBaseProps, type ComboboxRootProviderProps, type ComboboxRootProviderComponent, } from './combobox-root-provider.svelte';
 export { default as ComboboxTrigger, type ComboboxTriggerProps, type ComboboxTriggerBaseProps, } from './combobox-trigger.svelte';
 export { comboboxAnatomy } from './combobox.anatomy';
 export { useCombobox, type UseComboboxProps, type UseComboboxReturn } from './use-combobox.svelte';

package/dist/components/combobox/index.js

@@ -14,7 +14,7 @@ export { default as ComboboxItemText, } from './combobox-item-text.svelte';
 export { default as ComboboxLabel } from './combobox-label.svelte';
 export { default as ComboboxList } from './combobox-list.svelte';
 export { default as ComboboxPositioner, } from './combobox-positioner.svelte';
-export { default as ComboboxRoot } from './combobox-root.svelte';
+export { default as ComboboxRoot, } from './combobox-root.svelte';
 export { default as ComboboxRootProvider, } from './combobox-root-provider.svelte';
 export { default as ComboboxTrigger, } from './combobox-trigger.svelte';
 export { comboboxAnatomy } from './combobox.anatomy';

package/dist/components/field/use-field.svelte.js

@@ -67,6 +67,7 @@ export const useField = (inProps = {}) => {
         'data-disabled': dataAttr(disabled),
         'data-invalid': dataAttr(invalid),
         'data-readonly': dataAttr(readOnly),
+        'data-required': dataAttr(required),
         for: controlId,
     });
     const getControlProps = () => ({

package/dist/components/fieldset/fieldset-legend.svelte

@@ -1,8 +1,8 @@
 <script module lang="ts">
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface FieldsetLegendBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
-  export interface FieldsetLegendProps extends Assign<HTMLProps<'div'>, FieldsetLegendBaseProps> {}
+  export interface FieldsetLegendBaseProps extends PolymorphicProps<'legend'>, RefAttribute {}
+  export interface FieldsetLegendProps extends Assign<HTMLProps<'legend'>, FieldsetLegendBaseProps> {}
 </script>
 
 <script lang="ts">
@@ -15,4 +15,4 @@
   const mergedProps = $derived(mergeProps(fieldset?.().getLegendProps(), props))
 </script>
 
-<Ark as="div" bind:ref {...mergedProps} />
+<Ark as="legend" bind:ref {...mergedProps} />

package/dist/components/fieldset/fieldset-legend.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
-export interface FieldsetLegendBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+export interface FieldsetLegendBaseProps extends PolymorphicProps<'legend'>, RefAttribute {
 }
-export interface FieldsetLegendProps extends Assign<HTMLProps<'div'>, FieldsetLegendBaseProps> {
+export interface FieldsetLegendProps extends Assign<HTMLProps<'legend'>, FieldsetLegendBaseProps> {
 }
 declare const FieldsetLegend: import("svelte").Component<FieldsetLegendProps, {}, "ref">;
 type FieldsetLegend = ReturnType<typeof FieldsetLegend>;

package/dist/components/file-upload/file-upload-item-group.svelte

@@ -1,7 +1,8 @@
 <script module lang="ts">
+  import type { ItemGroupProps } from '@zag-js/file-upload'
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface FileUploadItemGroupBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface FileUploadItemGroupBaseProps extends PolymorphicProps<'div'>, RefAttribute, ItemGroupProps {}
   export interface FileUploadItemGroupProps extends Assign<HTMLProps<'div'>, FileUploadItemGroupBaseProps> {}
 </script>
 
@@ -9,10 +10,16 @@
   import { mergeProps } from '@zag-js/svelte'
   import { Ark } from '../factory'
   import { useFileUploadContext } from './use-file-upload-context'
+  import { FileUploadItemGroupPropsProvider } from './use-file-upload-item-group-props-context'
+  import { createSplitProps } from '../../utils/create-split-props'
 
   let { ref = $bindable(null), ...props }: FileUploadItemGroupProps = $props()
   const fileUpload = useFileUploadContext()
-  const mergedProps = $derived(mergeProps(fileUpload().getItemGroupProps(), props))
+
+  const [itemGroupProps, localProps] = $derived(createSplitProps<ItemGroupProps>()(props, ['type']))
+  const mergedProps = $derived(mergeProps(fileUpload().getItemGroupProps(itemGroupProps), localProps))
+
+  FileUploadItemGroupPropsProvider(() => itemGroupProps)
 </script>
 
 <Ark as="div" bind:ref {...mergedProps} />

package/dist/components/file-upload/file-upload-item-group.svelte.d.ts

@@ -1,5 +1,6 @@
+import type { ItemGroupProps } from '@zag-js/file-upload';
 import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
-export interface FileUploadItemGroupBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+export interface FileUploadItemGroupBaseProps extends PolymorphicProps<'div'>, RefAttribute, ItemGroupProps {
 }
 export interface FileUploadItemGroupProps extends Assign<HTMLProps<'div'>, FileUploadItemGroupBaseProps> {
 }

package/dist/components/file-upload/file-upload-item.svelte

@@ -2,7 +2,9 @@
   import type { ItemProps } from '@zag-js/file-upload'
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface FileUploadItemBaseProps extends ItemProps, PolymorphicProps<'li'>, RefAttribute {}
+  type ItemBaseProps = Omit<ItemProps, 'type'>
+
+  export interface FileUploadItemBaseProps extends ItemBaseProps, PolymorphicProps<'li'>, RefAttribute {}
   export interface FileUploadItemProps extends Assign<HTMLProps<'li'>, FileUploadItemBaseProps> {}
 </script>
 
@@ -12,15 +14,19 @@
   import { Ark } from '../factory'
   import { useFileUploadContext } from './use-file-upload-context'
   import { FileUploadItemPropsProvider } from './use-file-upload-item-props-context'
+  import { useFileUploadItemGroupPropsContext } from './use-file-upload-item-group-props-context'
 
   let { ref = $bindable(null), ...props }: FileUploadItemProps = $props()
   const fileUpload = useFileUploadContext()
 
-  const [itemProps, localProps] = $derived(createSplitProps<ItemProps>()(props, ['file']))
+  const [itemProps, localProps] = $derived(createSplitProps<ItemBaseProps>()(props, ['file']))
+
+  const itemGroupProps = useFileUploadItemGroupPropsContext()
+  const itemPropsWithType = $derived({ ...itemProps, type: itemGroupProps().type })
 
-  const mergedProps = $derived(mergeProps(fileUpload().getItemProps(itemProps), localProps))
+  const mergedProps = $derived(mergeProps(fileUpload().getItemProps(itemPropsWithType), localProps))
 
-  FileUploadItemPropsProvider(() => itemProps)
+  FileUploadItemPropsProvider(() => itemPropsWithType)
 </script>
 
 <Ark as="li" bind:ref {...mergedProps} />

package/dist/components/file-upload/file-upload-item.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { ItemProps } from '@zag-js/file-upload';
 import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
-export interface FileUploadItemBaseProps extends ItemProps, PolymorphicProps<'li'>, RefAttribute {
+type ItemBaseProps = Omit<ItemProps, 'type'>;
+export interface FileUploadItemBaseProps extends ItemBaseProps, PolymorphicProps<'li'>, RefAttribute {
 }
 export interface FileUploadItemProps extends Assign<HTMLProps<'li'>, FileUploadItemBaseProps> {
 }

package/dist/components/file-upload/use-file-upload-item-group-props-context.d.ts

@@ -0,0 +1,5 @@
+import type { ItemGroupProps } from '@zag-js/file-upload';
+import type { Accessor } from '../../types';
+export interface UseFileUploadItemGroupPropsContext extends Accessor<ItemGroupProps> {
+}
+export declare const FileUploadItemGroupPropsProvider: (opts: UseFileUploadItemGroupPropsContext) => void, useFileUploadItemGroupPropsContext: (fallback?: UseFileUploadItemGroupPropsContext | undefined) => UseFileUploadItemGroupPropsContext;

package/dist/components/file-upload/use-file-upload-item-group-props-context.js

@@ -0,0 +1,6 @@
+import { createContext } from '../../utils/create-context';
+export const [FileUploadItemGroupPropsProvider, useFileUploadItemGroupPropsContext] = createContext({
+    name: 'FileUploadItemGroupPropsContext',
+    hookName: 'useFileUploadItemGroupPropsContext',
+    providerName: '<FileUploadItemGroupPropsProvider />',
+});

package/dist/components/frame/frame.svelte

@@ -60,12 +60,14 @@
     if (!win || !mountNode) return
 
     const exec = () => {
-      if (!(mountNode && frameRef && frameRef.contentDocument)) return
-
-      const rootEl = frameRef.contentDocument?.documentElement
-      if (!rootEl) return
-      frameRef.style.setProperty('--width', `${mountNode.scrollWidth}px`)
-      frameRef.style.setProperty('--height', `${mountNode.scrollHeight}px`)
+      win.requestAnimationFrame(() => {
+        if (!(mountNode && frameRef && frameRef.contentDocument)) return
+
+        const rootEl = frameRef.contentDocument?.documentElement
+        if (!rootEl) return
+        frameRef.style.setProperty('--width', `${mountNode.scrollWidth}px`)
+        frameRef.style.setProperty('--height', `${mountNode.scrollHeight}px`)
+      })
     }
 
     const resizeObserver = new win.ResizeObserver(exec)

package/dist/components/listbox/index.d.ts

@@ -11,8 +11,8 @@ export { default as ListboxItemGroupLabel, type ListboxItemGroupLabelBaseProps,
 export { default as ListboxItemIndicator, type ListboxItemIndicatorBaseProps, type ListboxItemIndicatorProps, } from './listbox-item-indicator.svelte';
 export { default as ListboxItemText, type ListboxItemTextBaseProps, type ListboxItemTextProps, } from './listbox-item-text.svelte';
 export { default as ListboxLabel, type ListboxLabelBaseProps, type ListboxLabelProps } from './listbox-label.svelte';
-export { default as ListboxRoot, type ListboxRootBaseProps, type ListboxRootProps } from './listbox-root.svelte';
-export { default as ListboxRootProvider, type ListboxRootProviderBaseProps, type ListboxRootProviderProps, } from './listbox-root-provider.svelte';
+export { default as ListboxRoot, type ListboxRootBaseProps, type ListboxRootProps, type ListboxRootComponent, } from './listbox-root.svelte';
+export { default as ListboxRootProvider, type ListboxRootProviderBaseProps, type ListboxRootProviderProps, type ListboxRootProviderComponent, } from './listbox-root-provider.svelte';
 export { default as ListboxValueText, type ListboxValueTextBaseProps, type ListboxValueTextProps, } from './listbox-value-text.svelte';
 export { listboxAnatomy } from './listbox.anatomy.js';
 export { useListbox, type UseListboxProps, type UseListboxReturn } from './use-listbox.svelte.js';

package/dist/components/listbox/index.js

@@ -10,7 +10,7 @@ export { default as ListboxItemGroupLabel, } from './listbox-item-group-label.sv
 export { default as ListboxItemIndicator, } from './listbox-item-indicator.svelte';
 export { default as ListboxItemText, } from './listbox-item-text.svelte';
 export { default as ListboxLabel } from './listbox-label.svelte';
-export { default as ListboxRoot } from './listbox-root.svelte';
+export { default as ListboxRoot, } from './listbox-root.svelte';
 export { default as ListboxRootProvider, } from './listbox-root-provider.svelte';
 export { default as ListboxValueText, } from './listbox-value-text.svelte';
 export { listboxAnatomy } from './listbox.anatomy.js';

package/dist/components/listbox/listbox-root-provider.svelte

@@ -1,4 +1,6 @@
 <script lang="ts" module>
+  import type { Snippet } from 'svelte'
+
   interface RootProviderProps<T extends CollectionItem> {
     value: UseListboxReturn<T>
   }
@@ -8,6 +10,10 @@
       RootProviderProps<T> {}
   export interface ListboxRootProviderProps<T extends CollectionItem>
     extends Assign<HTMLProps<'div'>, ListboxRootProviderBaseProps<T>> {}
+
+  export type ListboxRootProviderComponent<P = {}> = <T extends CollectionItem>(
+    props: Assign<ListboxRootProviderProps<T>, P>,
+  ) => Snippet
 </script>
 
 <script lang="ts" generics="T extends CollectionItem">

package/dist/components/listbox/listbox-root-provider.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 interface RootProviderProps<T extends CollectionItem> {
     value: UseListboxReturn<T>;
 }
@@ -5,6 +6,7 @@ export interface ListboxRootProviderBaseProps<T extends CollectionItem> extends
 }
 export interface ListboxRootProviderProps<T extends CollectionItem> extends Assign<HTMLProps<'div'>, ListboxRootProviderBaseProps<T>> {
 }
+export type ListboxRootProviderComponent<P = {}> = <T extends CollectionItem>(props: Assign<ListboxRootProviderProps<T>, P>) => Snippet;
 import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
 import type { CollectionItem } from '../collection/index.js';
 import type { UseListboxReturn } from './use-listbox.svelte.js';

package/dist/components/listbox/listbox-root.svelte

@@ -1,16 +1,26 @@
-<script lang="ts" generics="T extends CollectionItem">
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+
   import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
-  import { mergeProps } from '@zag-js/svelte'
   import type { CollectionItem } from '../collection/index.js'
-  import { Ark } from '../factory/index.js'
-  import { ListboxProvider } from './use-listbox-context.js'
-  import { type UseListboxProps, useListbox } from './use-listbox.svelte.js'
-  import { createSplitProps } from '../../utils/create-split-props.js'
+  import type { UseListboxProps } from './use-listbox.svelte.js'
 
   export interface ListboxRootBaseProps<T extends CollectionItem> extends UseListboxProps<T>, PolymorphicProps<'div'> {}
   export interface ListboxRootProps<T extends CollectionItem>
     extends Assign<HTMLProps<'div'>, ListboxRootBaseProps<T>> {}
 
+  export type ListboxRootComponent<P = {}> = <T extends CollectionItem>(
+    props: Assign<ListboxRootProps<T>, P>,
+  ) => Snippet
+</script>
+
+<script lang="ts" generics="T extends CollectionItem">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory/index.js'
+  import { ListboxProvider } from './use-listbox-context.js'
+  import { useListbox } from './use-listbox.svelte.js'
+  import { createSplitProps } from '../../utils/create-split-props.js'
+
   let { highlightedValue = $bindable(), value = $bindable(), ...props }: ListboxRootProps<T> = $props()
   const providedId = $props.id()
 

package/dist/components/listbox/listbox-root.svelte.d.ts

@@ -1,10 +1,12 @@
+import type { Snippet } from 'svelte';
 import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
 import type { CollectionItem } from '../collection/index.js';
-import { type UseListboxProps } from './use-listbox.svelte.js';
+import type { UseListboxProps } from './use-listbox.svelte.js';
 export interface ListboxRootBaseProps<T extends CollectionItem> extends UseListboxProps<T>, PolymorphicProps<'div'> {
 }
 export interface ListboxRootProps<T extends CollectionItem> extends Assign<HTMLProps<'div'>, ListboxRootBaseProps<T>> {
 }
+export type ListboxRootComponent<P = {}> = <T extends CollectionItem>(props: Assign<ListboxRootProps<T>, P>) => Snippet;
 declare function $$render<T extends CollectionItem>(): {
     props: ListboxRootProps<T>;
     exports: {};

package/dist/components/listbox/listbox.d.ts

@@ -9,6 +9,6 @@ export { default as ItemGroupLabel, type ListboxItemGroupLabelBaseProps as ItemG
 export { default as ItemIndicator, type ListboxItemIndicatorBaseProps as ItemIndicatorBaseProps, type ListboxItemIndicatorProps as ItemIndicatorProps, } from './listbox-item-indicator.svelte';
 export { default as ItemText, type ListboxItemTextBaseProps as ItemTextBaseProps, type ListboxItemTextProps as ItemTextProps, } from './listbox-item-text.svelte';
 export { default as Label, type ListboxLabelBaseProps as LabelBaseProps, type ListboxLabelProps as LabelProps, } from './listbox-label.svelte';
-export { default as Root, type ListboxRootBaseProps as RootBaseProps, type ListboxRootProps as RootProps, } from './listbox-root.svelte';
-export { default as RootProvider, type ListboxRootProviderBaseProps as RootProviderBaseProps, type ListboxRootProviderProps as RootProviderProps, } from './listbox-root-provider.svelte';
+export { default as Root, type ListboxRootBaseProps as RootBaseProps, type ListboxRootProps as RootProps, type ListboxRootComponent as RootComponent, } from './listbox-root.svelte';
+export { default as RootProvider, type ListboxRootProviderBaseProps as RootProviderBaseProps, type ListboxRootProviderProps as RootProviderProps, type ListboxRootProviderComponent as RootProviderComponent, } from './listbox-root-provider.svelte';
 export { default as ValueText, type ListboxValueTextBaseProps as ValueTextBaseProps, type ListboxValueTextProps as ValueTextProps, } from './listbox-value-text.svelte';

package/dist/components/menu/menu-trigger-item.svelte

@@ -9,11 +9,14 @@
   import { mergeProps } from '@zag-js/svelte'
   import { Ark } from '../factory'
   import { useMenuTriggerItemContext } from './use-menu-trigger-item-context'
+  import { MenuItemPropsProvider } from './use-menu-option-item-props-context'
 
   let { ref = $bindable(null), ...props }: MenuTriggerItemProps = $props()
 
   const getTriggerItemProps = useMenuTriggerItemContext()
   const mergedProps = $derived(mergeProps(getTriggerItemProps?.() ?? {}, props))
+
+  MenuItemPropsProvider(() => ({ value: mergedProps['data-value'] }))
 </script>
 
 <Ark as="div" bind:ref {...mergedProps} />

package/dist/components/select/index.d.ts

@@ -15,8 +15,8 @@ export { default as SelectItemText, type SelectItemTextBaseProps, type SelectIte
 export { default as SelectLabel, type SelectLabelBaseProps, type SelectLabelProps } from './select-label.svelte';
 export { default as SelectList, type SelectListBaseProps, type SelectListProps } from './select-list.svelte';
 export { default as SelectPositioner, type SelectPositionerBaseProps, type SelectPositionerProps, } from './select-positioner.svelte';
-export { default as SelectRoot, type SelectRootBaseProps, type SelectRootProps } from './select-root.svelte';
-export { default as SelectRootProvider, type SelectRootProviderBaseProps, type SelectRootProviderProps, } from './select-root-provider.svelte';
+export { default as SelectRoot, type SelectRootBaseProps, type SelectRootProps, type SelectRootComponent, } from './select-root.svelte';
+export { default as SelectRootProvider, type SelectRootProviderBaseProps, type SelectRootProviderProps, type SelectRootProviderComponent, } from './select-root-provider.svelte';
 export { default as SelectTrigger, type SelectTriggerBaseProps, type SelectTriggerProps } from './select-trigger.svelte';
 export { default as SelectValueText, type SelectValueTextBaseProps, type SelectValueTextProps, } from './select-value-text.svelte';
 export { selectAnatomy } from './select.anatomy';

package/dist/components/select/index.js

@@ -14,7 +14,7 @@ export { default as SelectItemText, } from './select-item-text.svelte';
 export { default as SelectLabel } from './select-label.svelte';
 export { default as SelectList } from './select-list.svelte';
 export { default as SelectPositioner, } from './select-positioner.svelte';
-export { default as SelectRoot } from './select-root.svelte';
+export { default as SelectRoot, } from './select-root.svelte';
 export { default as SelectRootProvider, } from './select-root-provider.svelte';
 export { default as SelectTrigger } from './select-trigger.svelte';
 export { default as SelectValueText, } from './select-value-text.svelte';

package/dist/components/select/select-root-provider.svelte

@@ -12,6 +12,10 @@
 
   export interface SelectRootProviderProps<T extends CollectionItem = CollectionItem>
     extends Assign<HTMLProps<'div'>, SelectRootProviderBaseProps<T>> {}
+
+  export type SelectRootProviderComponent<P = {}> = <T extends CollectionItem>(
+    props: Assign<SelectRootProviderProps<T>, P>,
+  ) => Snippet
 </script>
 
 <script lang="ts" generics="T extends CollectionItem = CollectionItem">
@@ -19,6 +23,7 @@
   import { Ark } from '../factory'
   import { SelectProvider } from './use-select-context'
   import { PresenceProvider, splitPresenceProps, usePresence, type UsePresenceProps } from '../presence'
+  import type { Snippet } from 'svelte'
 
   let { ref = $bindable(null), ...props }: SelectRootProviderProps<T> = $props()
 

package/dist/components/select/select-root-provider.svelte.d.ts

@@ -6,7 +6,9 @@ export interface SelectRootProviderBaseProps<T extends CollectionItem = Collecti
 }
 export interface SelectRootProviderProps<T extends CollectionItem = CollectionItem> extends Assign<HTMLProps<'div'>, SelectRootProviderBaseProps<T>> {
 }
+export type SelectRootProviderComponent<P = {}> = <T extends CollectionItem>(props: Assign<SelectRootProviderProps<T>, P>) => Snippet;
 import { type UsePresenceProps } from '../presence';
+import type { Snippet } from 'svelte';
 declare function $$render<T extends CollectionItem = CollectionItem>(): {
     props: SelectRootProviderProps<T>;
     exports: {};

package/dist/components/select/select-root.svelte

@@ -1,5 +1,6 @@
 <script module lang="ts">
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { Snippet } from 'svelte'
   import type { CollectionItem } from '../collection'
   import type { UseSelectProps } from './use-select.svelte'
 
@@ -11,6 +12,8 @@
 
   export interface SelectRootProps<T extends CollectionItem = CollectionItem>
     extends Assign<HTMLProps<'div'>, SelectRootBaseProps<T>> {}
+
+  export type SelectRootComponent<P = {}> = <T extends CollectionItem>(props: Assign<SelectRootProps<T>, P>) => Snippet
 </script>
 
 <script lang="ts" generics="T extends CollectionItem = CollectionItem">

package/dist/components/select/select-root.svelte.d.ts

@@ -1,10 +1,12 @@
 import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+import type { Snippet } from 'svelte';
 import type { CollectionItem } from '../collection';
 import type { UseSelectProps } from './use-select.svelte';
 export interface SelectRootBaseProps<T extends CollectionItem = CollectionItem> extends UseSelectProps<T>, UsePresenceProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface SelectRootProps<T extends CollectionItem = CollectionItem> extends Assign<HTMLProps<'div'>, SelectRootBaseProps<T>> {
 }
+export type SelectRootComponent<P = {}> = <T extends CollectionItem>(props: Assign<SelectRootProps<T>, P>) => Snippet;
 import { type UsePresenceProps } from '../presence';
 declare function $$render<T extends CollectionItem = CollectionItem>(): {
     props: SelectRootProps<T>;

package/dist/components/select/select.d.ts

@@ -15,7 +15,7 @@ export { default as Item, type SelectItemProps as ItemProps } from './select-ite
 export { default as Label, type SelectLabelProps as LabelProps } from './select-label.svelte';
 export { default as List, type SelectListProps as ListProps } from './select-list.svelte';
 export { default as Positioner, type SelectPositionerProps as PositionerProps } from './select-positioner.svelte';
-export { default as RootProvider, type SelectRootProviderBaseProps as RootProviderBaseProps, type SelectRootProviderProps as RootProviderProps, } from './select-root-provider.svelte';
-export { default as Root, type SelectRootBaseProps as RootBaseProps, type SelectRootProps as RootProps, } from './select-root.svelte';
+export { default as RootProvider, type SelectRootProviderBaseProps as RootProviderBaseProps, type SelectRootProviderProps as RootProviderProps, type SelectRootProviderComponent as RootProviderComponent, } from './select-root-provider.svelte';
+export { default as Root, type SelectRootBaseProps as RootBaseProps, type SelectRootProps as RootProps, type SelectRootComponent as RootComponent, } from './select-root.svelte';
 export { default as Trigger, type SelectTriggerProps as TriggerProps } from './select-trigger.svelte';
 export { default as ValueText, type SelectValueTextProps as ValueTextProps } from './select-value-text.svelte';

package/dist/components/tree-view/index.d.ts

@@ -16,8 +16,8 @@ export { default as TreeViewNodeContext, type TreeViewNodeContextProps } from '.
 export { default as TreeViewNodeCheckbox, type TreeViewNodeCheckboxBaseProps, type TreeViewNodeCheckboxProps, } from './tree-view-node-checkbox.svelte';
 export { default as TreeViewNodeCheckboxIndicator, type TreeViewNodeCheckboxIndicatorBaseProps, type TreeViewNodeCheckboxIndicatorProps, } from './tree-view-node-checkbox-indicator.svelte';
 export { default as TreeViewNodeProvider, type TreeViewNodeProviderBaseProps, type TreeViewNodeProviderProps, } from './tree-view-node-provider.svelte';
-export { default as TreeViewRoot, type TreeViewRootBaseProps, type TreeViewRootProps } from './tree-view-root.svelte';
-export { default as TreeViewRootProvider, type TreeViewRootProviderBaseProps, type TreeViewRootProviderProps, } from './tree-view-root-provider.svelte';
+export { default as TreeViewRoot, type TreeViewRootBaseProps, type TreeViewRootComponent, type TreeViewRootProps, } from './tree-view-root.svelte';
+export { default as TreeViewRootProvider, type TreeViewRootProviderBaseProps, type TreeViewRootProviderComponent, type TreeViewRootProviderProps, } from './tree-view-root-provider.svelte';
 export { default as TreeViewTree, type TreeViewTreeBaseProps, type TreeViewTreeProps } from './tree-view-tree.svelte';
 export { treeViewAnatomy } from './tree-view.anatomy';
 export { useTreeViewContext } from './use-tree-view-context';

package/dist/components/tree-view/index.js

@@ -15,7 +15,7 @@ export { default as TreeViewNodeContext } from './tree-view-node-context.svelte'
 export { default as TreeViewNodeCheckbox, } from './tree-view-node-checkbox.svelte';
 export { default as TreeViewNodeCheckboxIndicator, } from './tree-view-node-checkbox-indicator.svelte';
 export { default as TreeViewNodeProvider, } from './tree-view-node-provider.svelte';
-export { default as TreeViewRoot } from './tree-view-root.svelte';
+export { default as TreeViewRoot, } from './tree-view-root.svelte';
 export { default as TreeViewRootProvider, } from './tree-view-root-provider.svelte';
 export { default as TreeViewTree } from './tree-view-tree.svelte';
 export { treeViewAnatomy } from './tree-view.anatomy';

package/dist/components/tree-view/tree-view-root-provider.svelte

@@ -1,5 +1,6 @@
 <script module lang="ts">
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { Snippet } from 'svelte'
   import type { TreeNode } from '../collection'
   import type { UseTreeViewReturn } from './use-tree-view.svelte'
 
@@ -11,6 +12,10 @@
   }
   export interface TreeViewRootProviderProps<T extends TreeNode>
     extends Assign<HTMLProps<'div'>, TreeViewRootProviderBaseProps<T>> {}
+
+  export type TreeViewRootProviderComponent<P = {}> = <T extends TreeNode>(
+    props: Assign<TreeViewRootProviderProps<T>, P>,
+  ) => Snippet
 </script>
 
 <script lang="ts" generics="T extends TreeNode">

package/dist/components/tree-view/tree-view-root-provider.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+import type { Snippet } from 'svelte';
 import type { TreeNode } from '../collection';
 import type { UseTreeViewReturn } from './use-tree-view.svelte';
 export interface TreeViewRootProviderBaseProps<T extends TreeNode> extends RenderStrategyProps, PolymorphicProps<'div'>, RefAttribute {
@@ -6,6 +7,7 @@ export interface TreeViewRootProviderBaseProps<T extends TreeNode> extends Rende
 }
 export interface TreeViewRootProviderProps<T extends TreeNode> extends Assign<HTMLProps<'div'>, TreeViewRootProviderBaseProps<T>> {
 }
+export type TreeViewRootProviderComponent<P = {}> = <T extends TreeNode>(props: Assign<TreeViewRootProviderProps<T>, P>) => Snippet;
 import { type RenderStrategyProps } from '../../utils/render-strategy';
 declare function $$render<T extends TreeNode>(): {
     props: TreeViewRootProviderProps<T>;

package/dist/components/tree-view/tree-view-root.svelte

@@ -1,5 +1,6 @@
 <script module lang="ts">
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { Snippet } from 'svelte'
   import type { TreeNode } from '../collection'
   import type { UseTreeViewProps } from './use-tree-view.svelte'
 
@@ -10,6 +11,8 @@
       RefAttribute {}
 
   export interface TreeViewRootProps<T extends TreeNode> extends Assign<HTMLProps<'div'>, TreeViewRootBaseProps<T>> {}
+
+  export type TreeViewRootComponent<P = {}> = <T extends TreeNode>(props: Assign<TreeViewRootProps<T>, P>) => Snippet
 </script>
 
 <script lang="ts" generics="T extends TreeNode">

package/dist/components/tree-view/tree-view-root.svelte.d.ts

@@ -1,10 +1,12 @@
 import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+import type { Snippet } from 'svelte';
 import type { TreeNode } from '../collection';
 import type { UseTreeViewProps } from './use-tree-view.svelte';
 export interface TreeViewRootBaseProps<T extends TreeNode> extends UseTreeViewProps<T>, RenderStrategyProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface TreeViewRootProps<T extends TreeNode> extends Assign<HTMLProps<'div'>, TreeViewRootBaseProps<T>> {
 }
+export type TreeViewRootComponent<P = {}> = <T extends TreeNode>(props: Assign<TreeViewRootProps<T>, P>) => Snippet;
 import { type RenderStrategyProps } from '../../utils/render-strategy';
 declare function $$render<T extends TreeNode>(): {
     props: TreeViewRootProps<T>;

package/dist/components/tree-view/tree-view.d.ts

@@ -15,6 +15,6 @@ export { default as NodeCheckbox, type TreeViewNodeCheckboxBaseProps as NodeChec
 export { default as NodeCheckboxIndicator, type TreeViewNodeCheckboxIndicatorBaseProps as NodeCheckboxIndicatorBaseProps, type TreeViewNodeCheckboxIndicatorProps as NodeCheckboxIndicatorProps, } from './tree-view-node-checkbox-indicator.svelte';
 export { default as NodeContext, type TreeViewNodeContextProps as NodeContextProps, } from './tree-view-node-context.svelte';
 export { default as NodeProvider, type TreeViewNodeProviderBaseProps as NodeProviderBaseProps, type TreeViewNodeProviderProps as NodeProviderProps, } from './tree-view-node-provider.svelte';
-export { default as Root, type TreeViewRootBaseProps as RootBaseProps, type TreeViewRootProps as RootProps, } from './tree-view-root.svelte';
-export { default as RootProvider, type TreeViewRootProviderBaseProps as RootProviderBaseProps, type TreeViewRootProviderProps as RootProviderProps, } from './tree-view-root-provider.svelte';
+export { default as Root, type TreeViewRootBaseProps as RootBaseProps, type TreeViewRootComponent as RootComponent, type TreeViewRootProps as RootProps, } from './tree-view-root.svelte';
+export { default as RootProvider, type TreeViewRootProviderBaseProps as RootProviderBaseProps, type TreeViewRootProviderComponent as RootProviderComponent, type TreeViewRootProviderProps as RootProviderProps, } from './tree-view-root-provider.svelte';
 export { default as Tree, type TreeViewTreeBaseProps as TreeBaseProps, type TreeViewTreeProps as TreeProps, } from './tree-view-tree.svelte';

package/dist/lucide-optimize.d.ts

@@ -0,0 +1,34 @@
+/**
+ * SourceMap interface for transformation output
+ */
+interface SourceMap {
+    version: number;
+    sources: string[];
+    names: string[];
+    sourceRoot?: string;
+    sourcesContent?: string[];
+    mappings: string;
+    file: string;
+}
+/**
+ * Plugin interface matching Vite/Rollup plugin structure
+ */
+interface SveltePlugin {
+    name: string;
+    transform: (code: string, id: string) => TransformResult | null | undefined;
+}
+/**
+ * Result of the transform operation
+ */
+interface TransformResult {
+    code: string;
+    map?: SourceMap | null;
+}
+/**
+ * Creates a Vite/Svelte plugin that optimizes lucide-svelte imports by converting
+ * destructured imports to direct imports for better tree-shaking
+ *
+ * @returns A Svelte plugin that transforms lucide-svelte imports
+ */
+export declare function lucideOptimizeImports(): SveltePlugin;
+export {};

package/dist/lucide-optimize.js

@@ -0,0 +1,90 @@
+// Pre-compile regex for better performance
+const LUCIDE_IMPORT_PATTERN = /([ \t]*)import\s+\{\s*([^}]+)\s*\}\s+from\s+['"]lucide-svelte['"]/g;
+/**
+ * Creates a Vite/Svelte plugin that optimizes lucide-svelte imports by converting
+ * destructured imports to direct imports for better tree-shaking
+ *
+ * @returns A Svelte plugin that transforms lucide-svelte imports
+ */
+export function lucideOptimizeImports() {
+    return {
+        name: 'lucide-svelte-optimizer',
+        transform(sourceCode, filePath) {
+            if (!isValidInput(sourceCode, filePath))
+                return null;
+            try {
+                // Quick check if the file contains lucide-svelte imports
+                if (!sourceCode.includes('lucide-svelte'))
+                    return null;
+                const { transformedCode, hasChanges } = transformLucideImports(sourceCode);
+                if (hasChanges) {
+                    return {
+                        code: transformedCode,
+                        map: null, // No source maps in this implementation
+                    };
+                }
+                return null;
+            }
+            catch (error) {
+                handleTransformError(error);
+                return null;
+            }
+        },
+    };
+}
+/**
+ * Validates the input parameters for processing
+ */
+function isValidInput(code, id) {
+    return Boolean(code && id);
+}
+/**
+ * Transforms lucide-svelte imports from destructured to individual imports
+ */
+function transformLucideImports(sourceCode) {
+    let hasChanges = false;
+    const transformedCode = sourceCode.replace(LUCIDE_IMPORT_PATTERN, (match, indentation, importNames) => {
+        if (!importNames.trim())
+            return match;
+        const semicolonAtEnd = match.endsWith(';');
+        const individualImports = convertToIndividualImports(importNames, indentation, semicolonAtEnd);
+        if (individualImports) {
+            hasChanges = true;
+            return individualImports;
+        }
+        return match;
+    });
+    return { transformedCode, hasChanges };
+}
+/**
+ * Converts a comma-separated list of imports to individual import statements
+ */
+function convertToIndividualImports(importNames, indentation, withSemicolon) {
+    return importNames
+        .split(',')
+        .map((name) => name.trim())
+        .filter(Boolean)
+        .map((name) => {
+        const kebabCasePath = convertToKebabCase(name);
+        const semicolon = withSemicolon ? ';' : '';
+        return `${indentation}import ${name} from 'lucide-svelte/icons/${kebabCasePath}'${semicolon}`;
+    })
+        .join('\n');
+}
+/**
+ * Converts a camelCase or PascalCase string to kebab-case
+ */
+function convertToKebabCase(str) {
+    return str
+        .replace(/Icon$/, '') // Remove 'Icon' suffix
+        .replace(/([a-z])([A-Z])/g, '$1-$2') // Add hyphen between lowercase and uppercase letters
+        .replace(/([a-zA-Z])(\d)/g, '$1-$2') // Add hyphen before numbers
+        .toLowerCase();
+}
+/**
+ * Handles and logs transformation errors
+ */
+function handleTransformError(error) {
+    const typedError = error instanceof Error ? error : new Error(String(error));
+    console.error('Error in lucide-svelte-optimizer plugin:', typedError);
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ark-ui/svelte",
   "type": "module",
-  "version": "5.7.0",
+  "version": "5.9.0",
   "description": "A collection of unstyled, accessible UI components for Svelte",
   "keywords": [
     "accordion",
@@ -119,90 +119,92 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@internationalized/date": "3.8.2",
-    "@zag-js/accordion": "1.22.1",
-    "@zag-js/anatomy": "1.22.1",
-    "@zag-js/angle-slider": "1.22.1",
-    "@zag-js/async-list": "1.22.1",
-    "@zag-js/auto-resize": "1.22.1",
-    "@zag-js/avatar": "1.22.1",
-    "@zag-js/carousel": "1.22.1",
-    "@zag-js/checkbox": "1.22.1",
-    "@zag-js/clipboard": "1.22.1",
-    "@zag-js/collapsible": "1.22.1",
-    "@zag-js/collection": "1.22.1",
-    "@zag-js/color-picker": "1.22.1",
-    "@zag-js/color-utils": "1.22.1",
-    "@zag-js/combobox": "1.22.1",
-    "@zag-js/core": "1.22.1",
-    "@zag-js/date-picker": "1.22.1",
-    "@zag-js/date-utils": "1.22.1",
-    "@zag-js/dialog": "1.22.1",
-    "@zag-js/dom-query": "1.22.1",
-    "@zag-js/editable": "1.22.1",
-    "@zag-js/file-upload": "1.22.1",
-    "@zag-js/file-utils": "1.22.1",
-    "@zag-js/floating-panel": "1.22.1",
-    "@zag-js/focus-trap": "1.22.1",
-    "@zag-js/highlight-word": "1.22.1",
-    "@zag-js/hover-card": "1.22.1",
-    "@zag-js/i18n-utils": "1.22.1",
-    "@zag-js/json-tree-utils": "1.22.1",
-    "@zag-js/listbox": "1.22.1",
-    "@zag-js/menu": "1.22.1",
-    "@zag-js/number-input": "1.22.1",
-    "@zag-js/pagination": "1.22.1",
-    "@zag-js/password-input": "1.22.1",
-    "@zag-js/pin-input": "1.22.1",
-    "@zag-js/popover": "1.22.1",
-    "@zag-js/presence": "1.22.1",
-    "@zag-js/progress": "1.22.1",
-    "@zag-js/qr-code": "1.22.1",
-    "@zag-js/radio-group": "1.22.1",
-    "@zag-js/rating-group": "1.22.1",
-    "@zag-js/scroll-area": "1.22.1",
-    "@zag-js/select": "1.22.1",
-    "@zag-js/signature-pad": "1.22.1",
-    "@zag-js/slider": "1.22.1",
-    "@zag-js/splitter": "1.22.1",
-    "@zag-js/steps": "1.22.1",
-    "@zag-js/svelte": "1.22.1",
-    "@zag-js/switch": "1.22.1",
-    "@zag-js/tabs": "1.22.1",
-    "@zag-js/tags-input": "1.22.1",
-    "@zag-js/time-picker": "1.22.1",
-    "@zag-js/timer": "1.22.1",
-    "@zag-js/toast": "1.22.1",
-    "@zag-js/toggle": "1.22.1",
-    "@zag-js/toggle-group": "1.22.1",
-    "@zag-js/tooltip": "1.22.1",
-    "@zag-js/tour": "1.22.1",
-    "@zag-js/tree-view": "1.22.1",
-    "@zag-js/types": "1.22.1",
-    "@zag-js/utils": "1.22.1"
+    "@internationalized/date": "3.9.0",
+    "@zag-js/accordion": "1.24.0",
+    "@zag-js/anatomy": "1.24.0",
+    "@zag-js/angle-slider": "1.24.0",
+    "@zag-js/async-list": "1.24.0",
+    "@zag-js/auto-resize": "1.24.0",
+    "@zag-js/avatar": "1.24.0",
+    "@zag-js/carousel": "1.24.0",
+    "@zag-js/checkbox": "1.24.0",
+    "@zag-js/clipboard": "1.24.0",
+    "@zag-js/collapsible": "1.24.0",
+    "@zag-js/collection": "1.24.0",
+    "@zag-js/color-picker": "1.24.0",
+    "@zag-js/color-utils": "1.24.0",
+    "@zag-js/combobox": "1.24.0",
+    "@zag-js/core": "1.24.0",
+    "@zag-js/date-picker": "1.24.0",
+    "@zag-js/date-utils": "1.24.0",
+    "@zag-js/dialog": "1.24.0",
+    "@zag-js/dom-query": "1.24.0",
+    "@zag-js/editable": "1.24.0",
+    "@zag-js/file-upload": "1.24.0",
+    "@zag-js/file-utils": "1.24.0",
+    "@zag-js/floating-panel": "1.24.0",
+    "@zag-js/focus-trap": "1.24.0",
+    "@zag-js/highlight-word": "1.24.0",
+    "@zag-js/hover-card": "1.24.0",
+    "@zag-js/i18n-utils": "1.24.0",
+    "@zag-js/json-tree-utils": "1.24.0",
+    "@zag-js/listbox": "1.24.0",
+    "@zag-js/menu": "1.24.0",
+    "@zag-js/number-input": "1.24.0",
+    "@zag-js/pagination": "1.24.0",
+    "@zag-js/password-input": "1.24.0",
+    "@zag-js/pin-input": "1.24.0",
+    "@zag-js/popover": "1.24.0",
+    "@zag-js/presence": "1.24.0",
+    "@zag-js/progress": "1.24.0",
+    "@zag-js/qr-code": "1.24.0",
+    "@zag-js/radio-group": "1.24.0",
+    "@zag-js/rating-group": "1.24.0",
+    "@zag-js/scroll-area": "1.24.0",
+    "@zag-js/select": "1.24.0",
+    "@zag-js/signature-pad": "1.24.0",
+    "@zag-js/slider": "1.24.0",
+    "@zag-js/splitter": "1.24.0",
+    "@zag-js/steps": "1.24.0",
+    "@zag-js/svelte": "1.24.0",
+    "@zag-js/switch": "1.24.0",
+    "@zag-js/tabs": "1.24.0",
+    "@zag-js/tags-input": "1.24.0",
+    "@zag-js/timer": "1.24.0",
+    "@zag-js/toast": "1.24.0",
+    "@zag-js/toggle": "1.24.0",
+    "@zag-js/toggle-group": "1.24.0",
+    "@zag-js/tooltip": "1.24.0",
+    "@zag-js/tour": "1.24.0",
+    "@zag-js/tree-view": "1.24.0",
+    "@zag-js/types": "1.24.0",
+    "@zag-js/utils": "1.24.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "9.1.3",
-    "@storybook/sveltekit": "9.1.3",
+    "@storybook/addon-a11y": "9.1.5",
+    "@storybook/sveltekit": "9.1.5",
     "@sveltejs/adapter-auto": "6.1.0",
-    "@sveltejs/kit": "2.36.2",
+    "@sveltejs/kit": "2.39.0",
     "@sveltejs/package": "2.5.0",
-    "@sveltejs/vite-plugin-svelte": "6.1.3",
-    "@tanstack/svelte-form": "1.19.2",
+    "@sveltejs/vite-plugin-svelte": "6.2.0",
+    "@tanstack/svelte-form": "1.19.5",
+    "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.8.0",
     "@testing-library/svelte": "5.2.8",
     "@testing-library/user-event": "14.6.1",
     "@vitest/coverage-v8": "3.2.4",
     "clean-package": "2.2.0",
     "image-conversion": "2.1.1",
-    "lucide-svelte": "0.541.0",
-    "storybook": "9.1.3",
-    "svelte": "5.38.3",
+    "jsdom": "26.1.0",
+    "lucide-svelte": "0.544.0",
+    "storybook": "9.1.5",
+    "svelte": "5.38.10",
     "svelte-check": "4.3.1",
     "tslib": "2.8.1",
     "typescript": "5.9.2",
-    "vite": "7.1.3",
-    "vitest": "3.2.4"
+    "vite": "7.1.5",
+    "vitest": "3.2.4",
+    "vitest-axe": "1.0.0-pre.5"
   },
   "peerDependencies": {
     "svelte": ">=5.20.0"