@ark-ui/svelte 5.15.0 → 5.16.0

package/dist/components/focus-trap/focus-trap.svelte

@@ -4,11 +4,10 @@
   import { type FocusTrapOptions, trapFocus } from '@zag-js/focus-trap'
   import { Ark } from '../factory/index.js'
 
-  export interface TrapOptions
-    extends Pick<
-      FocusTrapOptions,
-      'onActivate' | 'onDeactivate' | 'initialFocus' | 'fallbackFocus' | 'returnFocusOnDeactivate' | 'setReturnFocus'
-    > {
+  export interface TrapOptions extends Pick<
+    FocusTrapOptions,
+    'onActivate' | 'onDeactivate' | 'initialFocus' | 'fallbackFocus' | 'returnFocusOnDeactivate' | 'setReturnFocus'
+  > {
     /**
      * Whether the focus trap is disabled.
      */

package/dist/components/image-cropper/image-cropper-root-provider.svelte

@@ -1,16 +1,12 @@
 <script module lang="ts">
-  import type { Snippet } from 'svelte'
-  import type { PolymorphicProps, RefAttribute } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { UseImageCropperReturn } from './use-image-cropper.svelte'
 
-  interface RootProviderProps {
+  export interface ImageCropperRootProviderBaseProps extends PolymorphicProps<'div'>, RefAttribute {
     value: UseImageCropperReturn
   }
-
-  export interface ImageCropperRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RefAttribute {}
-  export interface ImageCropperRootProviderProps extends ImageCropperRootProviderBaseProps {
-    children?: Snippet
-  }
+  export interface ImageCropperRootProviderProps
+    extends Assign<HTMLProps<'div'>, ImageCropperRootProviderBaseProps> {}
 </script>
 
 <script lang="ts">

package/dist/components/image-cropper/image-cropper-root-provider.svelte.d.ts

@@ -1,13 +1,9 @@
-import type { Snippet } from 'svelte';
-import type { PolymorphicProps, RefAttribute } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { UseImageCropperReturn } from './use-image-cropper.svelte';
-interface RootProviderProps {
+export interface ImageCropperRootProviderBaseProps extends PolymorphicProps<'div'>, RefAttribute {
     value: UseImageCropperReturn;
 }
-export interface ImageCropperRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RefAttribute {
-}
-export interface ImageCropperRootProviderProps extends ImageCropperRootProviderBaseProps {
-    children?: Snippet;
+export interface ImageCropperRootProviderProps extends Assign<HTMLProps<'div'>, ImageCropperRootProviderBaseProps> {
 }
 declare const ImageCropperRootProvider: import("svelte").Component<ImageCropperRootProviderProps, {}, "ref">;
 type ImageCropperRootProvider = ReturnType<typeof ImageCropperRootProvider>;

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

@@ -1,12 +1,23 @@
 <script lang="ts">
   import type { JsonNode } from '@zag-js/json-tree-utils'
   import { TreeViewRootProvider, type TreeViewRootProviderProps } from '../tree-view'
+  import { JsonTreeViewPropsProvider } from './json-tree-view-props-context'
+  import type { UseJsonTreeViewReturn } from './use-json-tree-view.svelte'
 
   export interface JsonTreeViewRootProviderProps extends TreeViewRootProviderProps<JsonNode> {}
 
-  const props: JsonTreeViewRootProviderProps = $props()
+  const { value, ...props }: JsonTreeViewRootProviderProps = $props()
+
+  const jsonTreeView = value as unknown as UseJsonTreeViewReturn
+
+  const treeView = $derived(() => {
+    const { options: _, ...rest } = jsonTreeView()
+    return rest
+  })
+
+  JsonTreeViewPropsProvider(() => jsonTreeView().options)
 </script>
 
-<TreeViewRootProvider data-scope="json-tree-view" {...props}>
+<TreeViewRootProvider data-scope="json-tree-view" value={treeView} {...props}>
   {@render props.children?.()}
 </TreeViewRootProvider>

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

@@ -17,8 +17,7 @@
   }
 
   export interface JsonTreeViewRootProps
-    extends Omit<TreeViewRootProps<JsonNode>, 'collection'>,
-      JsonTreeViewRootBaseProps {}
+    extends Omit<TreeViewRootProps<JsonNode>, 'collection'>, JsonTreeViewRootBaseProps {}
 
   const { data, defaultExpandedDepth, ...props }: JsonTreeViewRootProps = $props()
 

package/dist/components/json-tree-view/use-json-tree-view.svelte.d.ts

@@ -1,10 +1,16 @@
+import type { Accessor } from '../../types';
 import { type JsonNode } from '@zag-js/json-tree-utils';
+import type { PropTypes } from '@zag-js/svelte';
+import type * as treeView from '@zag-js/tree-view';
 import type { MaybeFunction } from '@zag-js/utils';
-import { type UseTreeViewProps, type UseTreeViewReturn } from '../tree-view';
-export interface UseJsonTreeViewProps extends Omit<UseTreeViewProps<JsonNode>, 'collection'> {
+import { type UseTreeViewProps } from '../tree-view';
+import type { JsonTreeViewOptions } from './json-tree-view-props-context';
+export interface UseJsonTreeViewProps extends Omit<UseTreeViewProps<JsonNode>, 'collection'>, JsonTreeViewOptions {
     data: unknown;
     defaultExpandedDepth?: number;
 }
-export interface UseJsonTreeViewReturn extends UseTreeViewReturn<JsonNode> {
+export interface UseJsonTreeViewReturn extends Accessor<treeView.Api<PropTypes, JsonNode> & {
+    options: JsonTreeViewOptions;
+}> {
 }
 export declare const useJsonTreeView: (props: MaybeFunction<UseJsonTreeViewProps>) => UseJsonTreeViewReturn;

package/dist/components/json-tree-view/use-json-tree-view.svelte.js

@@ -1,11 +1,20 @@
 import { runIfFn } from '../../utils/run-if-fn';
 import { getRootNode, nodeToString, nodeToValue } from '@zag-js/json-tree-utils';
 import { untrack } from 'svelte';
+import { createSplitProps } from '../../utils/create-split-props';
 import { createTreeCollection, useTreeView } from '../tree-view';
 import { getBranchValues } from './get-branch-value';
+const splitJsonTreeViewProps = createSplitProps();
 export const useJsonTreeView = (props) => {
+    const [jsonTreeProps, localProps] = splitJsonTreeViewProps(runIfFn(props), [
+        'maxPreviewItems',
+        'collapseStringsAfterLength',
+        'quotesOnKeys',
+        'groupArraysAfterLength',
+        'showNonenumerable',
+    ]);
     const machineProps = $derived.by(() => {
-        const { data, defaultExpandedDepth, ...restProps } = runIfFn(props);
+        const { data, defaultExpandedDepth, ...restProps } = localProps;
         const collection = createTreeCollection({
             nodeToValue,
             nodeToString,
@@ -19,5 +28,7 @@ export const useJsonTreeView = (props) => {
             typeahead: false,
         };
     });
-    return useTreeView(() => machineProps);
+    const treeView = useTreeView(() => machineProps);
+    const api = $derived({ ...treeView(), options: jsonTreeProps });
+    return () => api;
 };

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

@@ -6,10 +6,11 @@
   }
 
   export interface ListboxRootProviderBaseProps<T extends CollectionItem>
-    extends PolymorphicProps<'div'>,
-      RootProviderProps<T> {}
-  export interface ListboxRootProviderProps<T extends CollectionItem>
-    extends Assign<HTMLProps<'div'>, ListboxRootProviderBaseProps<T>> {}
+    extends PolymorphicProps<'div'>, 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>,

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

@@ -6,8 +6,10 @@
   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 interface ListboxRootProps<T extends CollectionItem> extends Assign<
+    HTMLProps<'div'>,
+    ListboxRootBaseProps<T>
+  > {}
 
   export type ListboxRootComponentProps<T extends CollectionItem = CollectionItem, P = {}> = Assign<
     ListboxRootProps<T>,

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

@@ -3,9 +3,7 @@
   import type { UseMarqueeProps } from './use-marquee.svelte'
 
   export interface MarqueeRootBaseProps
-    extends Optional<UseMarqueeProps, 'id'>,
-      PolymorphicProps<'div'>,
-      RefAttribute {}
+    extends Optional<UseMarqueeProps, 'id'>, PolymorphicProps<'div'>, RefAttribute {}
   export interface MarqueeRootProps extends Assign<HTMLProps<'div'>, MarqueeRootBaseProps> {}
 </script>
 

package/dist/components/menu/menu-radio-item-group.svelte

@@ -5,9 +5,7 @@
   type OptionalUseMenuItemGroupContext = Optional<ReturnType<UseMenuItemGroupContext>, 'id'>
 
   export interface MenuRadioItemGroupBaseProps
-    extends OptionalUseMenuItemGroupContext,
-      PolymorphicProps<'div'>,
-      RefAttribute {}
+    extends OptionalUseMenuItemGroupContext, PolymorphicProps<'div'>, RefAttribute {}
   export interface MenuRadioItemGroupProps extends Assign<HTMLProps<'div'>, MenuRadioItemGroupBaseProps> {}
 </script>
 

package/dist/components/navigation-menu/navigation-menu-content.svelte

@@ -3,9 +3,7 @@
   import type { ContentProps } from '@zag-js/navigation-menu'
 
   export interface NavigationMenuContentBaseProps
-    extends Partial<ContentProps>,
-      PolymorphicProps<'div'>,
-      RefAttribute {}
+    extends Partial<ContentProps>, PolymorphicProps<'div'>, RefAttribute {}
   export interface NavigationMenuContentProps extends Assign<HTMLProps<'div'>, NavigationMenuContentBaseProps> {}
 </script>
 

package/dist/components/navigation-menu/navigation-menu-item-indicator.svelte

@@ -2,7 +2,10 @@
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
   export interface NavigationMenuItemIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
-  export interface NavigationMenuItemIndicatorProps extends Assign<HTMLProps<'div'>, NavigationMenuItemIndicatorBaseProps> {}
+  export interface NavigationMenuItemIndicatorProps extends Assign<
+    HTMLProps<'div'>,
+    NavigationMenuItemIndicatorBaseProps
+  > {}
 </script>
 
 <script lang="ts">
@@ -19,4 +22,4 @@
   const mergedProps = $derived(mergeProps(navigationMenu().getItemIndicatorProps(itemProps()), props))
 </script>
 
-<Ark as="div" bind:ref {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/navigation-menu/navigation-menu-root-provider.svelte

@@ -8,13 +8,12 @@
   }
 
   export interface NavigationMenuRootProviderBaseProps
-    extends RootProviderProps,
-      PolymorphicProps<'nav'>,
-      UsePresenceProps,
-      RefAttribute {}
+    extends RootProviderProps, PolymorphicProps<'nav'>, UsePresenceProps, RefAttribute {}
 
-  export interface NavigationMenuRootProviderProps
-    extends Assign<HTMLProps<'nav'>, NavigationMenuRootProviderBaseProps> {}
+  export interface NavigationMenuRootProviderProps extends Assign<
+    HTMLProps<'nav'>,
+    NavigationMenuRootProviderBaseProps
+  > {}
 </script>
 
 <script lang="ts">

package/dist/components/navigation-menu/navigation-menu-root.svelte

@@ -4,10 +4,7 @@
   import type { UseNavigationMenuProps } from './use-navigation-menu.svelte'
 
   export interface NavigationMenuRootBaseProps
-    extends UseNavigationMenuProps,
-      UsePresenceProps,
-      PolymorphicProps<'nav'>,
-      RefAttribute {}
+    extends UseNavigationMenuProps, UsePresenceProps, PolymorphicProps<'nav'>, RefAttribute {}
   export interface NavigationMenuRootProps extends Assign<HTMLProps<'nav'>, NavigationMenuRootBaseProps> {}
 </script>
 

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

@@ -3,9 +3,7 @@
   import type { ItemProps } from '@zag-js/navigation-menu'
 
   export interface NavigationMenuTriggerBaseProps
-    extends Omit<ItemProps, 'value'>,
-      PolymorphicProps<'button'>,
-      RefAttribute {}
+    extends Omit<ItemProps, 'value'>, PolymorphicProps<'button'>, RefAttribute {}
   export interface NavigationMenuTriggerProps extends Assign<HTMLProps<'button'>, NavigationMenuTriggerBaseProps> {}
 </script>
 

package/dist/components/navigation-menu/navigation-menu-viewport-positioner.svelte

@@ -3,27 +3,34 @@
   import type { ViewportProps } from '@zag-js/navigation-menu'
 
   export interface NavigationMenuViewportPositionerBaseProps
-    extends ViewportProps,
-      PolymorphicProps<'div'>,
-      RefAttribute {}
-  export interface NavigationMenuViewportPositionerProps
-    extends Assign<HTMLProps<'div'>, NavigationMenuViewportPositionerBaseProps> {}
+    extends ViewportProps, PolymorphicProps<'div'>, RefAttribute {}
+  export interface NavigationMenuViewportPositionerProps extends Assign<
+    HTMLProps<'div'>,
+    NavigationMenuViewportPositionerBaseProps
+  > {}
 </script>
 
 <script lang="ts">
   import { mergeProps } from '@zag-js/svelte'
   import { Ark } from '../factory'
   import { useNavigationMenuContext } from './use-navigation-menu-context'
+  import { setNavigationMenuViewportPropsContext } from './use-navigation-menu-viewport-props-context'
   import { createSplitProps } from '../../utils/create-split-props'
 
-  let { ref = $bindable(null), ...props }: NavigationMenuViewportPositionerProps = $props()
+  import type { Snippet } from 'svelte'
+
+  let { ref = $bindable(null), children, ...props }: NavigationMenuViewportPositionerProps & { children?: Snippet } = $props()
   const splitViewportProps = createSplitProps<ViewportProps>()
-  const [viewportPositionerProps, localProps] = $derived(splitViewportProps(props, ['align']))
+  const [viewportProps, localProps] = $derived(splitViewportProps(props, ['align']))
+
+  setNavigationMenuViewportPropsContext(() => viewportProps)
 
   const navigationMenu = useNavigationMenuContext()
   const mergedProps = $derived(
-    mergeProps(navigationMenu().getViewportPositionerProps(viewportPositionerProps), localProps),
+    mergeProps(navigationMenu().getViewportPositionerProps(viewportProps), localProps),
   )
 </script>
 
-<Ark as="div" bind:ref {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps}>
+  {@render children?.()}
+</Ark>

package/dist/components/navigation-menu/navigation-menu-viewport-positioner.svelte.d.ts

@@ -4,6 +4,10 @@ export interface NavigationMenuViewportPositionerBaseProps extends ViewportProps
 }
 export interface NavigationMenuViewportPositionerProps extends Assign<HTMLProps<'div'>, NavigationMenuViewportPositionerBaseProps> {
 }
-declare const NavigationMenuViewportPositioner: import("svelte").Component<NavigationMenuViewportPositionerProps, {}, "ref">;
+import type { Snippet } from 'svelte';
+type $$ComponentProps = NavigationMenuViewportPositionerProps & {
+    children?: Snippet;
+};
+declare const NavigationMenuViewportPositioner: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type NavigationMenuViewportPositioner = ReturnType<typeof NavigationMenuViewportPositioner>;
 export default NavigationMenuViewportPositioner;

package/dist/components/navigation-menu/navigation-menu-viewport.svelte

@@ -1,8 +1,7 @@
 <script module lang="ts">
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
-  import type { ViewportProps } from '@zag-js/navigation-menu'
 
-  export interface NavigationMenuViewportBaseProps extends ViewportProps, PolymorphicProps<'div'>, RefAttribute {}
+  export interface NavigationMenuViewportBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface NavigationMenuViewportProps extends Assign<HTMLProps<'div'>, NavigationMenuViewportBaseProps> {}
 </script>
 
@@ -11,19 +10,18 @@
   import { Ark } from '../factory'
   import { usePresence } from '../presence'
   import { useNavigationMenuContext } from './use-navigation-menu-context'
+  import { getNavigationMenuViewportPropsContext } from './use-navigation-menu-viewport-props-context'
   import { useRenderStrategyPropsContext } from '../../utils/render-strategy'
-  import { createSplitProps } from '../../utils/create-split-props'
 
   let { ref = $bindable(null), ...props }: NavigationMenuViewportProps = $props()
 
-  const splitViewportProps = createSplitProps<ViewportProps>()
-  const [viewportProps, localProps] = $derived(splitViewportProps(props, ['align']))
+  const viewportPropsContext = getNavigationMenuViewportPropsContext()
 
   const navigationMenu = useNavigationMenuContext()
   const renderStrategyProps = useRenderStrategyPropsContext()
   const presence = usePresence(() => ({ ...renderStrategyProps, present: navigationMenu().open }))
   const mergedProps = $derived(
-    mergeProps(navigationMenu().getViewportProps(viewportProps), presence().getPresenceProps(), localProps),
+    mergeProps(navigationMenu().getViewportProps(viewportPropsContext?.()), presence().getPresenceProps(), props),
   )
 
   function setNode(node: Element | null) {

package/dist/components/navigation-menu/navigation-menu-viewport.svelte.d.ts

@@ -1,6 +1,5 @@
 import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
-import type { ViewportProps } from '@zag-js/navigation-menu';
-export interface NavigationMenuViewportBaseProps extends ViewportProps, PolymorphicProps<'div'>, RefAttribute {
+export interface NavigationMenuViewportBaseProps extends PolymorphicProps<'div'>, RefAttribute {
 }
 export interface NavigationMenuViewportProps extends Assign<HTMLProps<'div'>, NavigationMenuViewportBaseProps> {
 }

package/dist/components/navigation-menu/use-navigation-menu-viewport-props-context.d.ts

@@ -0,0 +1,3 @@
+import type { ViewportProps } from '@zag-js/navigation-menu';
+import type { Accessor } from '../../types';
+export declare const setNavigationMenuViewportPropsContext: (opts: Accessor<ViewportProps>) => void, getNavigationMenuViewportPropsContext: (fallback?: Accessor<ViewportProps> | undefined) => Accessor<ViewportProps>;

package/dist/components/navigation-menu/use-navigation-menu-viewport-props-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../../utils/create-context';
+export const [setNavigationMenuViewportPropsContext, getNavigationMenuViewportPropsContext] = createContext({
+    name: 'NavigationMenuViewportPropsContext',
+    strict: false,
+});

package/dist/components/number-input/number-input-decrement-trigger.svelte

@@ -2,8 +2,10 @@
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
   export interface NumberInputDecrementTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
-  export interface NumberInputDecrementTriggerProps
-    extends Assign<HTMLProps<'button'>, NumberInputDecrementTriggerBaseProps> {}
+  export interface NumberInputDecrementTriggerProps extends Assign<
+    HTMLProps<'button'>,
+    NumberInputDecrementTriggerBaseProps
+  > {}
 </script>
 
 <script lang="ts">

package/dist/components/number-input/number-input-increment-trigger.svelte

@@ -2,8 +2,10 @@
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
   export interface NumberInputIncrementTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
-  export interface NumberInputIncrementTriggerProps
-    extends Assign<HTMLProps<'button'>, NumberInputIncrementTriggerBaseProps> {}
+  export interface NumberInputIncrementTriggerProps extends Assign<
+    HTMLProps<'button'>,
+    NumberInputIncrementTriggerBaseProps
+  > {}
 </script>
 
 <script lang="ts">

package/dist/components/pagination/pagination-first-trigger.svelte

@@ -15,4 +15,4 @@
   const mergedProps = $derived(mergeProps(pagination().getFirstTriggerProps(), props))
 </script>
 
-<Ark as="button" bind:ref {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

package/dist/components/pagination/pagination-last-trigger.svelte

@@ -15,4 +15,4 @@
   const mergedProps = $derived(mergeProps(pagination().getLastTriggerProps(), props))
 </script>
 
-<Ark as="button" bind:ref {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

package/dist/components/password-input/password-input-root-provider.svelte

@@ -1,6 +1,6 @@
 <script module lang="ts">
   import type { Snippet } from 'svelte'
-  import type { RefAttribute } from '../../types'
+  import type { Assign, HTMLProps, RefAttribute } from '../../types'
   import type { UsePasswordInputReturn } from './use-password-input.svelte'
 
   interface RootProviderProps {
@@ -8,7 +8,7 @@
   }
 
   export interface PasswordInputRootProviderBaseProps extends RootProviderProps, RefAttribute {}
-  export interface PasswordInputRootProviderProps extends PasswordInputRootProviderBaseProps {
+  export interface PasswordInputRootProviderProps extends Assign<HTMLProps<'div'>, PasswordInputRootProviderBaseProps> {
     children?: Snippet
   }
 </script>

package/dist/components/password-input/password-input-root-provider.svelte.d.ts

@@ -1,12 +1,12 @@
 import type { Snippet } from 'svelte';
-import type { RefAttribute } from '../../types';
+import type { Assign, HTMLProps, RefAttribute } from '../../types';
 import type { UsePasswordInputReturn } from './use-password-input.svelte';
 interface RootProviderProps {
     value: UsePasswordInputReturn;
 }
 export interface PasswordInputRootProviderBaseProps extends RootProviderProps, RefAttribute {
 }
-export interface PasswordInputRootProviderProps extends PasswordInputRootProviderBaseProps {
+export interface PasswordInputRootProviderProps extends Assign<HTMLProps<'div'>, PasswordInputRootProviderBaseProps> {
     children?: Snippet;
 }
 declare const PasswordInputRootProvider: import("svelte").Component<PasswordInputRootProviderProps, {}, "ref">;

package/dist/components/password-input/password-input-visibility-trigger.svelte

@@ -2,8 +2,10 @@
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
   export interface PasswordInputVisibilityTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
-  export interface PasswordInputVisibilityTriggerProps
-    extends Assign<HTMLProps<'button'>, PasswordInputVisibilityTriggerBaseProps> {}
+  export interface PasswordInputVisibilityTriggerProps extends Assign<
+    HTMLProps<'button'>,
+    PasswordInputVisibilityTriggerBaseProps
+  > {}
 </script>
 
 <script lang="ts">

package/dist/components/pin-input/pin-input-root-provider.svelte

@@ -1,13 +1,14 @@
 <script module lang="ts">
   import type { Snippet } from 'svelte'
-  import type { PolymorphicProps, RefAttribute } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { UsePinInputReturn } from './use-pin-input.svelte'
 
   interface RootProviderProps {
     value: UsePinInputReturn
   }
 
-  export interface PinInputRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RefAttribute {}
+  export interface PinInputRootProviderBaseProps
+    extends Assign<HTMLProps<'div'>, RootProviderProps>, PolymorphicProps<'div'>, RefAttribute {}
   export interface PinInputRootProviderProps extends PinInputRootProviderBaseProps {
     children?: Snippet
   }

package/dist/components/pin-input/pin-input-root-provider.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { Snippet } from 'svelte';
-import type { PolymorphicProps, RefAttribute } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { UsePinInputReturn } from './use-pin-input.svelte';
 interface RootProviderProps {
     value: UsePinInputReturn;
 }
-export interface PinInputRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RefAttribute {
+export interface PinInputRootProviderBaseProps extends Assign<HTMLProps<'div'>, RootProviderProps>, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface PinInputRootProviderProps extends PinInputRootProviderBaseProps {
     children?: Snippet;

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

@@ -3,9 +3,7 @@
   import type { UseProgressProps } from './use-progress.svelte'
 
   export interface ProgressRootBaseProps
-    extends Optional<UseProgressProps, 'id'>,
-      PolymorphicProps<'div'>,
-      RefAttribute {}
+    extends Optional<UseProgressProps, 'id'>, PolymorphicProps<'div'>, RefAttribute {}
   export interface ProgressRootProps extends Assign<HTMLProps<'div'>, ProgressRootBaseProps> {}
 </script>
 

package/dist/components/qr-code/qr-code-download-trigger.svelte

@@ -3,9 +3,7 @@
   import type { DownloadTriggerProps } from '@zag-js/qr-code'
 
   export interface QrCodeDownloadTriggerBaseProps
-    extends DownloadTriggerProps,
-      PolymorphicProps<'button'>,
-      RefAttribute {}
+    extends DownloadTriggerProps, PolymorphicProps<'button'>, RefAttribute {}
 
   export interface QrCodeDownloadTriggerProps extends HTMLProps<'button'>, QrCodeDownloadTriggerBaseProps {}
 </script>

package/dist/components/radio-group/radio-group-item-hidden-input.svelte

@@ -2,8 +2,10 @@
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
   export interface RadioGroupItemHiddenInputBaseProps extends PolymorphicProps<'input'>, RefAttribute {}
-  export interface RadioGroupItemHiddenInputProps
-    extends Assign<HTMLProps<'input'>, RadioGroupItemHiddenInputBaseProps> {}
+  export interface RadioGroupItemHiddenInputProps extends Assign<
+    HTMLProps<'input'>,
+    RadioGroupItemHiddenInputBaseProps
+  > {}
 </script>
 
 <script lang="ts">

package/dist/components/segment-group/segment-group-item-hidden-input.svelte

@@ -2,8 +2,10 @@
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
   export interface SegmentGroupItemHiddenInputBaseProps extends PolymorphicProps<'input'>, RefAttribute {}
-  export interface SegmentGroupItemHiddenInputProps
-    extends Assign<HTMLProps<'input'>, SegmentGroupItemHiddenInputBaseProps> {}
+  export interface SegmentGroupItemHiddenInputProps extends Assign<
+    HTMLProps<'input'>,
+    SegmentGroupItemHiddenInputBaseProps
+  > {}
 </script>
 
 <script lang="ts">

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

@@ -3,13 +3,14 @@
   import type { CollectionItem } from '../collection'
 
   export interface SelectItemBaseProps<T extends CollectionItem = CollectionItem>
-    extends PolymorphicProps<'div'>,
-      RefAttribute {
+    extends PolymorphicProps<'div'>, RefAttribute {
     item: T
     disabled?: boolean
   }
-  export interface SelectItemProps<T extends CollectionItem = CollectionItem>
-    extends Assign<HTMLProps<'div'>, SelectItemBaseProps<T>> {}
+  export interface SelectItemProps<T extends CollectionItem = CollectionItem> extends Assign<
+    HTMLProps<'div'>,
+    SelectItemBaseProps<T>
+  > {}
 </script>
 
 <script lang="ts" generics="T extends CollectionItem = CollectionItem">

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

@@ -4,14 +4,14 @@
   import type { UseSelectReturn } from './use-select.svelte'
 
   export interface SelectRootProviderBaseProps<T extends CollectionItem = CollectionItem>
-    extends PolymorphicProps<'div'>,
-      UsePresenceProps,
-      RefAttribute {
+    extends PolymorphicProps<'div'>, UsePresenceProps, RefAttribute {
     value: UseSelectReturn<T>
   }
 
-  export interface SelectRootProviderProps<T extends CollectionItem = CollectionItem>
-    extends Assign<HTMLProps<'div'>, SelectRootProviderBaseProps<T>> {}
+  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>,

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

@@ -5,13 +5,12 @@
   import type { UseSelectProps } from './use-select.svelte'
 
   export interface SelectRootBaseProps<T extends CollectionItem = CollectionItem>
-    extends UseSelectProps<T>,
-      UsePresenceProps,
-      PolymorphicProps<'div'>,
-      RefAttribute {}
+    extends UseSelectProps<T>, UsePresenceProps, PolymorphicProps<'div'>, RefAttribute {}
 
-  export interface SelectRootProps<T extends CollectionItem = CollectionItem>
-    extends Assign<HTMLProps<'div'>, SelectRootBaseProps<T>> {}
+  export interface SelectRootProps<T extends CollectionItem = CollectionItem> extends Assign<
+    HTMLProps<'div'>,
+    SelectRootBaseProps<T>
+  > {}
 
   export type SelectRootComponentProps<T extends CollectionItem = CollectionItem, P = {}> = Assign<
     SelectRootProps<T>,