@ark-ui/svelte 5.14.1 → 5.16.0

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/radio-group/radio-group-root.svelte

@@ -28,10 +28,12 @@
       'form',
       'id',
       'ids',
+      'invalid',
       'name',
       'onValueChange',
       'orientation',
       'readOnly',
+      'required',
       'value',
     ]),
   )

package/dist/components/radio-group/use-radio-group.svelte.js

@@ -2,13 +2,21 @@ import * as radio from '@zag-js/radio-group';
 import { normalizeProps, useMachine } from '@zag-js/svelte';
 import { runIfFn } from '@zag-js/utils';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
+import { useFieldsetContext } from '../fieldset';
 export const useRadioGroup = (props) => {
     const env = useEnvironmentContext();
     const locale = useLocaleContext();
+    const fieldset = useFieldsetContext();
     const resolvedProps = $derived.by(() => {
         const localProps = runIfFn(props);
+        const fieldsetContext = fieldset?.();
         return {
+            ids: {
+                label: fieldsetContext?.ids?.legend,
+            },
             dir: locale().dir,
+            disabled: fieldsetContext?.disabled,
+            invalid: fieldsetContext?.invalid,
             getRootNode: env().getRootNode,
             ...localProps,
         };

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/segment-group/split-segment-group-props.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { UseSegmentGroupProps } from './use-segment-group.svelte';
-export declare const splitSegmentGroupProps: <T extends UseSegmentGroupProps>(props: T) => [UseSegmentGroupProps, Omit<T, "form" | "name" | "defaultValue" | "value" | "ids" | "disabled" | "id" | "onValueChange" | "orientation" | "readOnly">];
+export declare const splitSegmentGroupProps: <T extends UseSegmentGroupProps>(props: T) => [UseSegmentGroupProps, Omit<T, "form" | "name" | "defaultValue" | "value" | "ids" | "disabled" | "id" | "onValueChange" | "orientation" | "readOnly" | "invalid" | "required">];

package/dist/components/segment-group/split-segment-group-props.svelte.js

@@ -6,9 +6,11 @@ export const splitSegmentGroupProps = (props) => splitFn(props, [
     'form',
     'id',
     'ids',
+    'invalid',
     'name',
     'onValueChange',
     'orientation',
     'readOnly',
+    'required',
     'value',
 ]);

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>,

package/dist/components/signature-pad/signature-pad-clear-trigger.svelte

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

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

@@ -38,6 +38,7 @@
       'onFocusChange',
       'getAriaValueText',
       'thumbAlignment',
+      'thumbCollisionBehavior',
       'thumbSize',
       'aria-labelledby',
       'aria-label',

package/dist/components/splitter/splitter-resize-trigger-indicator.svelte

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

package/dist/components/splitter/splitter-resize-trigger.svelte

@@ -3,9 +3,7 @@
   import type { ResizeTriggerProps } from '@zag-js/splitter'
 
   export interface SplitterResizeTriggerBaseProps
-    extends ResizeTriggerProps,
-      PolymorphicProps<'button'>,
-      RefAttribute {}
+    extends ResizeTriggerProps, PolymorphicProps<'button'>, RefAttribute {}
   export interface SplitterResizeTriggerProps extends Assign<HTMLProps<'button'>, SplitterResizeTriggerBaseProps> {}
 </script>
 

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

@@ -18,13 +18,16 @@
 
   const [useStepsProps, localProps] = $derived(
     createSplitProps<UseStepsProps>()(props, [
+      'count',
       'defaultStep',
       'id',
       'ids',
-      'count',
+      'isStepSkippable',
+      'isStepValid',
       'linear',
       'onStepChange',
       'onStepComplete',
+      'onStepInvalid',
       'orientation',
       'step',
     ]),

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

@@ -7,10 +7,7 @@
   }
 
   export interface TabsRootProviderBaseProps
-    extends RootProviderProps,
-      PolymorphicProps<'div'>,
-      RenderStrategyProps,
-      RefAttribute {}
+    extends RootProviderProps, PolymorphicProps<'div'>, RenderStrategyProps, RefAttribute {}
   export interface TabsRootProviderProps extends Assign<HTMLProps<'div'>, TabsRootProviderBaseProps> {}
 </script>
 

package/dist/components/tags-input/tags-input-item-delete-trigger.svelte

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

package/dist/components/tags-input/tags-input-root.svelte

@@ -46,6 +46,7 @@
       'onPointerDownOutside',
       'onValueChange',
       'onValueInvalid',
+      'placeholder',
       'readOnly',
       'required',
       'translations',

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

@@ -3,7 +3,7 @@
   import type { UsePresenceProps } from '../presence'
   import type { UseTooltipProps } from './use-tooltip.svelte'
 
-  export interface TooltipRootBaseProps extends UseTooltipProps, UsePresenceProps {}
+  export interface TooltipRootBaseProps extends Optional<UseTooltipProps, 'id'>, UsePresenceProps {}
   export interface TooltipRootProps extends TooltipRootBaseProps {
     children?: Snippet
   }
@@ -14,6 +14,7 @@
   import { splitPresenceProps } from '../presence/split-presence-props.svelte'
   import { TooltipProvider } from './use-tooltip-context'
   import { useTooltip } from './use-tooltip.svelte'
+  import type { Optional } from '../../types'
 
   let { open = $bindable(), ...props }: TooltipRootProps = $props()
   const providedId = $props.id()

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

@@ -1,11 +1,12 @@
 import type { Snippet } from 'svelte';
 import type { UsePresenceProps } from '../presence';
 import type { UseTooltipProps } from './use-tooltip.svelte';
-export interface TooltipRootBaseProps extends UseTooltipProps, UsePresenceProps {
+export interface TooltipRootBaseProps extends Optional<UseTooltipProps, 'id'>, UsePresenceProps {
 }
 export interface TooltipRootProps extends TooltipRootBaseProps {
     children?: Snippet;
 }
+import type { Optional } from '../../types';
 declare const TooltipRoot: import("svelte").Component<TooltipRootProps, {}, "open">;
 type TooltipRoot = ReturnType<typeof TooltipRoot>;
 export default TooltipRoot;

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

@@ -1,4 +1,6 @@
-export type { FocusOutsideEvent as TourFocusOutsideEvent, InteractOutsideEvent as TourInteractOutsideEvent, PointerDownOutsideEvent as TourPointerDownOutsideEvent, StepDetails as TourStepDetails, } from '@zag-js/tour';
+export { waitForElement, waitForElementValue, waitForPromise, type WaitOptions } from '@zag-js/tour';
+export { waitForEvent, type WaitForEventOptions } from './wait-for-event';
+export type { FocusOutsideEvent as TourFocusOutsideEvent, InteractOutsideEvent as TourInteractOutsideEvent, PointerDownOutsideEvent as TourPointerDownOutsideEvent, StepDetails as TourStepDetails, StepEffectArgs as TourStepEffectArgs, } from '@zag-js/tour';
 export { default as TourActionTrigger, type TourActionTriggerBaseProps, type TourActionTriggerProps, } from './tour-action-trigger.svelte';
 export { default as TourActions, type TourActionsProps } from './tour-actions.svelte';
 export { default as TourArrowTip, type TourArrowTipBaseProps, type TourArrowTipProps } from './tour-arrow-tip.svelte';

package/dist/components/tour/index.js

@@ -1,3 +1,5 @@
+export { waitForElement, waitForElementValue, waitForPromise } from '@zag-js/tour';
+export { waitForEvent } from './wait-for-event';
 export { default as TourActionTrigger, } from './tour-action-trigger.svelte';
 export { default as TourActions } from './tour-actions.svelte';
 export { default as TourArrowTip } from './tour-arrow-tip.svelte';

package/dist/components/tour/tour-action-trigger.svelte

@@ -3,9 +3,7 @@
   import type { StepActionTriggerProps } from '@zag-js/tour'
 
   export interface TourActionTriggerBaseProps
-    extends StepActionTriggerProps,
-      PolymorphicProps<'button'>,
-      RefAttribute {}
+    extends StepActionTriggerProps, PolymorphicProps<'button'>, RefAttribute {}
   export interface TourActionTriggerProps extends HTMLProps<'button'>, TourActionTriggerBaseProps {}
 </script>
 

package/dist/components/tour/wait-for-event.d.ts

@@ -0,0 +1,6 @@
+type WaitForEventReturn<K extends keyof HTMLElementEventMap> = [Promise<HTMLElementEventMap[K]>, VoidFunction];
+export interface WaitForEventOptions<T extends HTMLElement = HTMLElement> extends AddEventListenerOptions {
+    predicate?: (element: T) => boolean;
+}
+export declare function waitForEvent<T extends HTMLElement = HTMLElement, K extends keyof HTMLElementEventMap = keyof HTMLElementEventMap>(target: (() => HTMLElement | null) | undefined, event: K, options?: WaitForEventOptions<T>): WaitForEventReturn<K>;
+export {};

package/dist/components/tour/wait-for-event.js

@@ -0,0 +1,19 @@
+export function waitForEvent(target, event, options) {
+    let cleanup;
+    const { predicate, ...listenerOptions } = options ?? {};
+    const promise = new Promise((resolve) => {
+        const element = target?.();
+        if (!element) {
+            return;
+        }
+        const handler = (e) => {
+            if (!predicate || predicate(element)) {
+                resolve(e);
+                cleanup?.();
+            }
+        };
+        element.addEventListener(event, handler, listenerOptions);
+        cleanup = () => element.removeEventListener(event, handler, listenerOptions);
+    });
+    return [promise, () => cleanup?.()];
+}

package/dist/components/tree-view/tree-view-branch-indent-guide.svelte

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

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

@@ -5,13 +5,13 @@
   import type { UseTreeViewReturn } from './use-tree-view.svelte'
 
   export interface TreeViewRootProviderBaseProps<T extends TreeNode>
-    extends RenderStrategyProps,
-      PolymorphicProps<'div'>,
-      RefAttribute {
+    extends RenderStrategyProps, PolymorphicProps<'div'>, RefAttribute {
     value: UseTreeViewReturn<T>
   }
-  export interface TreeViewRootProviderProps<T extends TreeNode>
-    extends Assign<HTMLProps<'div'>, TreeViewRootProviderBaseProps<T>> {}
+  export interface TreeViewRootProviderProps<T extends TreeNode> extends Assign<
+    HTMLProps<'div'>,
+    TreeViewRootProviderBaseProps<T>
+  > {}
 
   export type TreeViewRootProviderComponent<P = {}> = <T extends TreeNode>(
     props: Assign<TreeViewRootProviderProps<T>, P>,

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

@@ -5,10 +5,7 @@
   import type { UseTreeViewProps } from './use-tree-view.svelte'
 
   export interface TreeViewRootBaseProps<T extends TreeNode>
-    extends UseTreeViewProps<T>,
-      RenderStrategyProps,
-      PolymorphicProps<'div'>,
-      RefAttribute {}
+    extends UseTreeViewProps<T>, RenderStrategyProps, PolymorphicProps<'div'>, RefAttribute {}
 
   export interface TreeViewRootProps<T extends TreeNode> extends Assign<HTMLProps<'div'>, TreeViewRootBaseProps<T>> {}
 

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

@@ -1,3 +1,3 @@
 import type { TreeNode } from '../collection';
 import type { UseTreeViewProps } from './use-tree-view.svelte';
-export declare function splitTreeViewProps<T extends UseTreeViewProps<TreeNode>>(props: T): [UseTreeViewProps<any>, Omit<T, "ids" | "id" | "onFocusChange" | "onCheckedChange" | "collection" | "selectionMode" | "focusedValue" | "defaultFocusedValue" | "expandedValue" | "defaultExpandedValue" | "selectedValue" | "defaultSelectedValue" | "defaultCheckedValue" | "checkedValue" | "onExpandedChange" | "onSelectionChange" | "canRename" | "onRenameStart" | "onBeforeRename" | "onRenameComplete" | "onLoadChildrenComplete" | "onLoadChildrenError" | "expandOnClick" | "typeahead" | "loadChildren">];
+export declare function splitTreeViewProps<T extends UseTreeViewProps<TreeNode>>(props: T): [UseTreeViewProps<any>, Omit<T, "ids" | "id" | "onFocusChange" | "onCheckedChange" | "collection" | "selectionMode" | "scrollToIndexFn" | "focusedValue" | "defaultFocusedValue" | "expandedValue" | "defaultExpandedValue" | "selectedValue" | "defaultSelectedValue" | "defaultCheckedValue" | "checkedValue" | "onExpandedChange" | "onSelectionChange" | "canRename" | "onRenameStart" | "onBeforeRename" | "onRenameComplete" | "onLoadChildrenComplete" | "onLoadChildrenError" | "expandOnClick" | "typeahead" | "loadChildren">];

package/dist/components/tree-view/tree-view-split-props.js

@@ -27,5 +27,6 @@ export function splitTreeViewProps(props) {
         'selectedValue',
         'selectionMode',
         'typeahead',
+        'scrollToIndexFn',
     ]);
 }