@ark-ui/svelte 0.4.0 → 5.0.0-0

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

@@ -0,0 +1,56 @@
+<script module lang="ts">
+  import { onMount, type Snippet } from 'svelte'
+  import type { UsePresenceProps } from '../presence'
+  import type { UseMenuReturn } from './use-menu.svelte'
+
+  interface RootProviderProps {
+    value: UseMenuReturn
+  }
+
+  export interface MenuRootProviderBaseProps extends RootProviderProps, UsePresenceProps {
+    children?: Snippet
+  }
+  export interface MenuRootProviderProps extends MenuRootProviderBaseProps {}
+</script>
+
+<script lang="ts">
+  import { PresenceProvider, splitPresenceProps, usePresence } from '../presence'
+  import { MenuProvider, useMenuContext } from './use-menu-context'
+  import { MenuMachineProvider, useMenuMachineContext } from './use-menu-machine-context'
+  import { MenuTriggerItemProvider } from './use-menu-trigger-item-context'
+
+  const { value, ...props }: MenuRootProviderProps = $props()
+
+  const parentApi = useMenuContext()
+  const parentMachine = useMenuMachineContext()
+
+  const [presenceProps, restProps] = $derived(splitPresenceProps(props))
+
+  const api = $derived(value().api)
+  const service = $derived(value().service)
+
+  const presence = usePresence(() => ({
+    present: api.open,
+    ...presenceProps,
+  }))
+
+  // Connect parent-child relationship for nested menus
+  onMount(() => {
+    const _parentService = parentMachine?.()
+    const _parentApi = parentApi?.()
+
+    if (!_parentService || !_parentApi) return
+
+    _parentApi.setChild(service)
+    api.setParent(_parentService)
+  })
+
+  const triggerItemContext = $derived(parentApi?.().getTriggerItemProps(api))
+
+  MenuTriggerItemProvider(() => triggerItemContext)
+  MenuMachineProvider(() => service)
+  MenuProvider(() => api)
+  PresenceProvider(presence)
+</script>
+
+{@render restProps.children?.()}

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

@@ -0,0 +1,14 @@
+import { type Snippet } from 'svelte';
+import type { UsePresenceProps } from '../presence';
+import type { UseMenuReturn } from './use-menu.svelte';
+interface RootProviderProps {
+    value: UseMenuReturn;
+}
+export interface MenuRootProviderBaseProps extends RootProviderProps, UsePresenceProps {
+    children?: Snippet;
+}
+export interface MenuRootProviderProps extends MenuRootProviderBaseProps {
+}
+declare const MenuRootProvider: import("svelte").Component<MenuRootProviderProps, {}, "">;
+type MenuRootProvider = ReturnType<typeof MenuRootProvider>;
+export default MenuRootProvider;

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

@@ -0,0 +1,91 @@
+<script module lang="ts">
+  import { onMount, type Snippet } from 'svelte'
+  import type { UsePresenceProps } from '../presence'
+  import type { UseMenuProps } from './use-menu.svelte'
+
+  export interface MenuRootBaseProps extends UseMenuProps, UsePresenceProps {
+    children?: Snippet
+  }
+  export interface MenuRootProps extends MenuRootBaseProps {}
+</script>
+
+<script lang="ts">
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { PresenceProvider, splitPresenceProps, usePresence } from '../presence'
+  import { MenuProvider, useMenuContext } from './use-menu-context'
+  import { MenuMachineProvider, useMenuMachineContext } from './use-menu-machine-context'
+  import { MenuTriggerItemProvider } from './use-menu-trigger-item-context'
+  import { useMenu } from './use-menu.svelte'
+
+  let { open = $bindable<boolean>(), ...props }: MenuRootProps = $props()
+  const providedId = $props.id()
+
+  const [presenceProps, menuProps] = $derived(splitPresenceProps(props))
+  const [useMenuProps, localProps] = $derived(
+    createSplitProps<UseMenuProps>()(menuProps, [
+      'anchorPoint',
+      'aria-label',
+      'closeOnSelect',
+      'composite',
+      'defaultHighlightedValue',
+      'defaultOpen',
+      'highlightedValue',
+      'id',
+      'ids',
+      'loopFocus',
+      'navigate',
+      'onEscapeKeyDown',
+      'onFocusOutside',
+      'onHighlightChange',
+      'onInteractOutside',
+      'onOpenChange',
+      'onPointerDownOutside',
+      'onSelect',
+      'open',
+      'positioning',
+      'typeahead',
+    ]),
+  )
+
+  const parentApi = useMenuContext()
+  const parentMachine = useMenuMachineContext()
+
+  const resolvedProps = $derived<UseMenuProps>({
+    ...useMenuProps,
+    id: useMenuProps.id ?? providedId,
+    open,
+    onOpenChange(details) {
+      useMenuProps.onOpenChange?.(details)
+      if (open !== undefined) open = details.open
+    },
+  })
+
+  const menu = useMenu(() => resolvedProps)
+  const api = $derived(menu().api)
+  const service = $derived(menu().service)
+
+  const presence = usePresence(() => ({
+    present: api.open,
+    ...presenceProps,
+  }))
+
+  // Connect parent-child relationship for nested menus
+  onMount(() => {
+    const _parentService = parentMachine?.()
+    const _parentApi = parentApi?.()
+
+    if (!_parentService || !_parentApi) return
+
+    _parentApi.setChild(service)
+    api.setParent(_parentService)
+  })
+
+  const triggerItemContext = $derived(parentApi?.().getTriggerItemProps(api))
+
+  MenuTriggerItemProvider(() => triggerItemContext)
+  MenuMachineProvider(() => service)
+  MenuProvider(() => api)
+  PresenceProvider(presence)
+</script>
+
+{@render localProps.children?.()}

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

@@ -0,0 +1,11 @@
+import { type Snippet } from 'svelte';
+import type { UsePresenceProps } from '../presence';
+import type { UseMenuProps } from './use-menu.svelte';
+export interface MenuRootBaseProps extends UseMenuProps, UsePresenceProps {
+    children?: Snippet;
+}
+export interface MenuRootProps extends MenuRootBaseProps {
+}
+declare const MenuRoot: import("svelte").Component<MenuRootProps, {}, "open">;
+type MenuRoot = ReturnType<typeof MenuRoot>;
+export default MenuRoot;

package/dist/components/menu/menu-separator.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface MenuSeparatorBaseProps extends PolymorphicProps<'div'> {}
+  export interface MenuSeparatorProps extends Assign<HTMLProps<'div'>, MenuSeparatorBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useMenuContext } from './use-menu-context'
+
+  const props: MenuSeparatorProps = $props()
+
+  const menu = useMenuContext()
+  const mergedProps = $derived(mergeProps(menu().getSeparatorProps(), props))
+</script>
+
+<Ark as="div" data-scope="menu" data-part="separator" {...mergedProps} />

package/dist/components/menu/menu-separator.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface MenuSeparatorBaseProps extends PolymorphicProps<'div'> {
+}
+export interface MenuSeparatorProps extends Assign<HTMLProps<'div'>, MenuSeparatorBaseProps> {
+}
+declare const MenuSeparator: import("svelte").Component<MenuSeparatorProps, {}, "">;
+type MenuSeparator = ReturnType<typeof MenuSeparator>;
+export default MenuSeparator;

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

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface MenuTriggerItemBaseProps extends PolymorphicProps<'div'> {}
+  export interface MenuTriggerItemProps extends Assign<HTMLProps<'div'>, MenuTriggerItemBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useMenuTriggerItemContext } from './use-menu-trigger-item-context'
+
+  const props: MenuTriggerItemProps = $props()
+
+  const getTriggerItemProps = useMenuTriggerItemContext()
+  const mergedProps = $derived(mergeProps(getTriggerItemProps?.() ?? {}, props))
+</script>
+
+<Ark as="div" {...mergedProps} />

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface MenuTriggerItemBaseProps extends PolymorphicProps<'div'> {
+}
+export interface MenuTriggerItemProps extends Assign<HTMLProps<'div'>, MenuTriggerItemBaseProps> {
+}
+declare const MenuTriggerItem: import("svelte").Component<MenuTriggerItemProps, {}, "">;
+type MenuTriggerItem = ReturnType<typeof MenuTriggerItem>;
+export default MenuTriggerItem;

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

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface MenuTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface MenuTriggerProps extends Assign<HTMLProps<'button'>, MenuTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useMenuContext } from './use-menu-context'
+  import { useMenuTriggerItemContext } from './use-menu-trigger-item-context'
+
+  const props: MenuTriggerProps = $props()
+
+  const menu = useMenuContext()
+  const triggerItemProps = useMenuTriggerItemContext()
+
+  const mergedProps = $derived(mergeProps(menu().getTriggerProps(), triggerItemProps?.() || {}, props))
+</script>
+
+<Ark as="button" data-scope="menu" data-part="trigger" {...mergedProps} />

package/dist/components/menu/menu-trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface MenuTriggerBaseProps extends PolymorphicProps<'button'> {
+}
+export interface MenuTriggerProps extends Assign<HTMLProps<'button'>, MenuTriggerBaseProps> {
+}
+declare const MenuTrigger: import("svelte").Component<MenuTriggerProps, {}, "">;
+type MenuTrigger = ReturnType<typeof MenuTrigger>;
+export default MenuTrigger;

package/dist/components/menu/menu.anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as menuAnatomy } from '@zag-js/menu';

package/dist/components/menu/menu.anatomy.js

@@ -0,0 +1 @@
+export { anatomy as menuAnatomy } from '@zag-js/menu';

package/dist/components/menu/menu.d.ts

@@ -0,0 +1,22 @@
+export type { HighlightChangeDetails, OpenChangeDetails, SelectionDetails } from '@zag-js/menu';
+export { default as ArrowTip, type MenuArrowTipBaseProps as ArrowTipBaseProps, type MenuArrowTipProps as ArrowTipProps, } from './menu-arrow-tip.svelte';
+export { default as Arrow, type MenuArrowBaseProps as ArrowBaseProps, type MenuArrowProps as ArrowProps, } from './menu-arrow.svelte';
+export { default as CheckboxItem, type MenuCheckboxItemBaseProps as CheckboxItemBaseProps, type MenuCheckboxItemProps as CheckboxItemProps, } from './menu-checkbox-item.svelte';
+export { default as Content, type MenuContentBaseProps as ContentBaseProps, type MenuContentProps as ContentProps, } from './menu-content.svelte';
+export { default as ContextTrigger, type MenuContextTriggerBaseProps as ContextTriggerBaseProps, type MenuContextTriggerProps as ContextTriggerProps, } from './menu-context-trigger.svelte';
+export { default as Context, type MenuContextProps as ContextProps } from './menu-context.svelte';
+export { default as Indicator, type MenuIndicatorBaseProps as IndicatorBaseProps, type MenuIndicatorProps as IndicatorProps, } from './menu-indicator.svelte';
+export { default as ItemContext, type MenuItemContextProps as ItemContextProps } from './menu-item-context.svelte';
+export { default as ItemGroupLabel, type MenuItemGroupLabelBaseProps as ItemGroupLabelBaseProps, type MenuItemGroupLabelProps as ItemGroupLabelProps, } from './menu-item-group-label.svelte';
+export { default as ItemGroup, type MenuItemGroupBaseProps as ItemGroupBaseProps, type MenuItemGroupProps as ItemGroupProps, } from './menu-item-group.svelte';
+export { default as ItemIndicator, type MenuItemIndicatorBaseProps as ItemIndicatorBaseProps, type MenuItemIndicatorProps as ItemIndicatorProps, } from './menu-item-indicator.svelte';
+export { default as ItemText, type MenuItemTextBaseProps as ItemTextBaseProps, type MenuItemTextProps as ItemTextProps, } from './menu-item-text.svelte';
+export { default as Item, type MenuItemBaseProps as ItemBaseProps, type MenuItemProps as ItemProps, } from './menu-item.svelte';
+export { default as Positioner, type MenuPositionerBaseProps as PositionerBaseProps, type MenuPositionerProps as PositionerProps, } from './menu-positioner.svelte';
+export { default as RadioItemGroup, type MenuRadioItemGroupBaseProps as RadioItemGroupBaseProps, type MenuRadioItemGroupProps as RadioItemGroupProps, } from './menu-radio-item-group.svelte';
+export { default as RadioItem, type MenuRadioItemBaseProps as RadioItemBaseProps, type MenuRadioItemProps as RadioItemProps, } from './menu-radio-item.svelte';
+export { default as RootProvider, type MenuRootProviderBaseProps as RootProviderBaseProps, type MenuRootProviderProps as RootProviderProps, } from './menu-root-provider.svelte';
+export { default as Root, type MenuRootBaseProps as RootBaseProps, type MenuRootProps as RootProps, } from './menu-root.svelte';
+export { default as Separator, type MenuSeparatorBaseProps as SeparatorBaseProps, type MenuSeparatorProps as SeparatorProps, } from './menu-separator.svelte';
+export { default as TriggerItem, type MenuTriggerItemBaseProps as TriggerItemBaseProps, type MenuTriggerItemProps as TriggerItemProps, } from './menu-trigger-item.svelte';
+export { default as Trigger, type MenuTriggerBaseProps as TriggerBaseProps, type MenuTriggerProps as TriggerProps, } from './menu-trigger.svelte';

package/dist/components/menu/menu.js

@@ -0,0 +1,21 @@
+export { default as ArrowTip, } from './menu-arrow-tip.svelte';
+export { default as Arrow, } from './menu-arrow.svelte';
+export { default as CheckboxItem, } from './menu-checkbox-item.svelte';
+export { default as Content, } from './menu-content.svelte';
+export { default as ContextTrigger, } from './menu-context-trigger.svelte';
+export { default as Context } from './menu-context.svelte';
+export { default as Indicator, } from './menu-indicator.svelte';
+export { default as ItemContext } from './menu-item-context.svelte';
+export { default as ItemGroupLabel, } from './menu-item-group-label.svelte';
+export { default as ItemGroup, } from './menu-item-group.svelte';
+export { default as ItemIndicator, } from './menu-item-indicator.svelte';
+export { default as ItemText, } from './menu-item-text.svelte';
+export { default as Item, } from './menu-item.svelte';
+export { default as Positioner, } from './menu-positioner.svelte';
+export { default as RadioItemGroup, } from './menu-radio-item-group.svelte';
+export { default as RadioItem, } from './menu-radio-item.svelte';
+export { default as RootProvider, } from './menu-root-provider.svelte';
+export { default as Root, } from './menu-root.svelte';
+export { default as Separator, } from './menu-separator.svelte';
+export { default as TriggerItem, } from './menu-trigger-item.svelte';
+export { default as Trigger, } from './menu-trigger.svelte';

package/dist/components/menu/use-menu-context.d.ts

@@ -0,0 +1,4 @@
+import type { Accessor } from '../../types';
+import type { UseMenuReturn } from './use-menu.svelte';
+export type UseMenuContext = Accessor<ReturnType<UseMenuReturn>['api']>;
+export declare const MenuProvider: (opts: UseMenuContext) => void, useMenuContext: (fallback?: UseMenuContext | undefined) => UseMenuContext;

package/dist/components/menu/use-menu-context.js

@@ -0,0 +1,7 @@
+import { createContext } from '../../utils/create-context';
+export const [MenuProvider, useMenuContext] = createContext({
+    name: 'MenuContext',
+    hookName: 'useMenuContext',
+    providerName: '<MenuProvider />',
+    strict: false,
+});

package/dist/components/menu/use-menu-item-context.d.ts

@@ -0,0 +1,5 @@
+import type { Accessor, Optional } from '../../types';
+import type { OptionItemState } from '@zag-js/menu';
+export interface UseMenuItemContext extends Accessor<Optional<OptionItemState, 'checked'>> {
+}
+export declare const MenuItemProvider: (opts: UseMenuItemContext) => void, useMenuItemContext: (fallback?: UseMenuItemContext | undefined) => UseMenuItemContext;

package/dist/components/menu/use-menu-item-context.js

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

package/dist/components/menu/use-menu-item-group-context.d.ts

@@ -0,0 +1,11 @@
+import type { Accessor } from '../../types';
+export interface ValueChangeDetails {
+    value: string;
+}
+export interface UseMenuItemGroupContext extends Accessor<{
+    id: string;
+    value?: string;
+    onValueChange?: (e: ValueChangeDetails) => void;
+}> {
+}
+export declare const MenuItemGroupProvider: (opts: UseMenuItemGroupContext) => void, useMenuItemGroupContext: (fallback?: UseMenuItemGroupContext | undefined) => UseMenuItemGroupContext;

package/dist/components/menu/use-menu-item-group-context.js

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

package/dist/components/menu/use-menu-machine-context.d.ts

@@ -0,0 +1,4 @@
+import type { Accessor } from '../../types';
+import type { Service } from '@zag-js/menu';
+export type UseMenuMachineContext = Accessor<Service | undefined>;
+export declare const MenuMachineProvider: (opts: UseMenuMachineContext) => void, useMenuMachineContext: (fallback?: UseMenuMachineContext | undefined) => UseMenuMachineContext;

package/dist/components/menu/use-menu-machine-context.js

@@ -0,0 +1,7 @@
+import { createContext } from '../../utils/create-context';
+export const [MenuMachineProvider, useMenuMachineContext] = createContext({
+    name: 'MenuMachineContext',
+    hookName: 'useMenuMachineContext',
+    providerName: '<MenuMachineProvider />',
+    strict: false,
+});

package/dist/components/menu/use-menu-option-item-props-context.d.ts

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

package/dist/components/menu/use-menu-option-item-props-context.js

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

package/dist/components/menu/use-menu-trigger-item-context.d.ts

@@ -0,0 +1,4 @@
+import type * as menu from '@zag-js/menu';
+import type { PropTypes } from '@zag-js/svelte';
+export type UseMenuTriggerItemContext = () => ReturnType<menu.Api<PropTypes>['getTriggerItemProps']> | undefined;
+export declare const MenuTriggerItemProvider: (opts: UseMenuTriggerItemContext) => void, useMenuTriggerItemContext: (fallback?: UseMenuTriggerItemContext | undefined) => UseMenuTriggerItemContext;

package/dist/components/menu/use-menu-trigger-item-context.js

@@ -0,0 +1,7 @@
+import { createContext } from '../../utils/create-context';
+export const [MenuTriggerItemProvider, useMenuTriggerItemContext] = createContext({
+    name: 'MenuTriggerItemContext',
+    hookName: 'useMenuTriggerItemContext',
+    providerName: '<MenuTriggerItemProvider />',
+    strict: false,
+});

package/dist/components/menu/use-menu.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Accessor, Optional } from '../../types';
+import * as menu from '@zag-js/menu';
+import { type PropTypes } from '@zag-js/svelte';
+import { type MaybeFunction } from '@zag-js/utils';
+export interface UseMenuProps extends Optional<Omit<menu.Props, 'dir' | 'getRootNode'>, 'id'> {
+}
+export interface UseMenuReturn extends Accessor<{
+    api: menu.Api<PropTypes>;
+    service: menu.Service;
+}> {
+}
+export declare const useMenu: (props?: MaybeFunction<UseMenuProps>) => UseMenuReturn;

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

@@ -0,0 +1,20 @@
+import { useEnvironmentContext } from '../../providers/environment';
+import { useLocaleContext } from '../../providers/locale';
+import * as menu from '@zag-js/menu';
+import { normalizeProps, useMachine } from '@zag-js/svelte';
+import { runIfFn } from '@zag-js/utils';
+export const useMenu = (props) => {
+    const env = useEnvironmentContext();
+    const locale = useLocaleContext();
+    const machineProps = $derived.by(() => {
+        const resolvedProps = runIfFn(props);
+        return {
+            dir: locale().dir,
+            getRootNode: env().getRootNode,
+            ...resolvedProps,
+        };
+    });
+    const service = useMachine(menu.machine, () => machineProps);
+    const api = $derived(menu.connect(service, normalizeProps));
+    return () => ({ api, service });
+};

package/dist/components/number-input/index.d.ts

@@ -0,0 +1,17 @@
+export type { FocusChangeDetails as NumberInputFocusChangeDetails, ValueChangeDetails as NumberInputValueChangeDetails, ValueInvalidDetails as NumberInputValueInvalidDetails, } from '@zag-js/number-input';
+export { default as NumberInputContext, type NumberInputContextProps } from './number-input-context.svelte';
+export { default as NumberInputControl, type NumberInputControlBaseProps, type NumberInputControlProps, } from './number-input-control.svelte';
+export { default as NumberInputDecrementTrigger, type NumberInputDecrementTriggerBaseProps, type NumberInputDecrementTriggerProps, } from './number-input-decrement-trigger.svelte';
+export { default as NumberInputIncrementTrigger, type NumberInputIncrementTriggerBaseProps, type NumberInputIncrementTriggerProps, } from './number-input-increment-trigger.svelte';
+export { default as NumberInputInput, type NumberInputInputBaseProps, type NumberInputInputProps, } from './number-input-input.svelte';
+export { default as NumberInputLabel, type NumberInputLabelBaseProps, type NumberInputLabelProps, } from './number-input-label.svelte';
+export { default as NumberInputRoot, type NumberInputRootBaseProps, type NumberInputRootProps, } from './number-input-root.svelte';
+export { default as NumberInputRootProvider, type NumberInputRootProviderBaseProps, type NumberInputRootProviderProps, } from './number-input-root-provider.svelte';
+export { default as NumberInputScrubber, type NumberInputScrubberBaseProps, type NumberInputScrubberProps, } from './number-input-scrubber.svelte';
+export { default as NumberInputValueText, type NumberInputValueTextBaseProps, type NumberInputValueTextProps, } from './number-input-value-text.svelte';
+export { numberInputAnatomy } from './number-input.anatomy';
+export { NumberInputProvider, useNumberInputContext } from './use-number-input-context';
+export type { UseNumberInputContext } from './use-number-input-context';
+export { useNumberInput } from './use-number-input.svelte';
+export type { UseNumberInputProps, UseNumberInputReturn } from './use-number-input.svelte';
+export * as NumberInput from './number-input';

package/dist/components/number-input/index.js

@@ -0,0 +1,14 @@
+export { default as NumberInputContext } from './number-input-context.svelte';
+export { default as NumberInputControl, } from './number-input-control.svelte';
+export { default as NumberInputDecrementTrigger, } from './number-input-decrement-trigger.svelte';
+export { default as NumberInputIncrementTrigger, } from './number-input-increment-trigger.svelte';
+export { default as NumberInputInput, } from './number-input-input.svelte';
+export { default as NumberInputLabel, } from './number-input-label.svelte';
+export { default as NumberInputRoot, } from './number-input-root.svelte';
+export { default as NumberInputRootProvider, } from './number-input-root-provider.svelte';
+export { default as NumberInputScrubber, } from './number-input-scrubber.svelte';
+export { default as NumberInputValueText, } from './number-input-value-text.svelte';
+export { numberInputAnatomy } from './number-input.anatomy';
+export { NumberInputProvider, useNumberInputContext } from './use-number-input-context';
+export { useNumberInput } from './use-number-input.svelte';
+export * as NumberInput from './number-input';

package/dist/components/number-input/number-input-context.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UseNumberInputContext } from './use-number-input-context'
+
+  export interface NumberInputContextProps {
+    render: Snippet<[UseNumberInputContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { useNumberInputContext } from './use-number-input-context'
+
+  const { render }: NumberInputContextProps = $props()
+
+  const context = useNumberInputContext()
+</script>
+
+{@render render(context)}

package/dist/components/number-input/number-input-context.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { UseNumberInputContext } from './use-number-input-context';
+export interface NumberInputContextProps {
+    render: Snippet<[UseNumberInputContext]>;
+}
+declare const NumberInputContext: import("svelte").Component<NumberInputContextProps, {}, "">;
+type NumberInputContext = ReturnType<typeof NumberInputContext>;
+export default NumberInputContext;

package/dist/components/number-input/number-input-control.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface NumberInputControlBaseProps extends PolymorphicProps<'div'> {}
+  export interface NumberInputControlProps extends Assign<HTMLProps<'div'>, NumberInputControlBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useNumberInputContext } from './use-number-input-context'
+
+  const props: NumberInputControlProps = $props()
+
+  const numberInput = useNumberInputContext()
+  const mergedProps = $derived(mergeProps(numberInput().getControlProps(), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/number-input/number-input-control.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface NumberInputControlBaseProps extends PolymorphicProps<'div'> {
+}
+export interface NumberInputControlProps extends Assign<HTMLProps<'div'>, NumberInputControlBaseProps> {
+}
+declare const NumberInputControl: import("svelte").Component<NumberInputControlProps, {}, "">;
+type NumberInputControl = ReturnType<typeof NumberInputControl>;
+export default NumberInputControl;

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

@@ -0,0 +1,20 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface NumberInputDecrementTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface NumberInputDecrementTriggerProps
+    extends Assign<HTMLProps<'button'>, NumberInputDecrementTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useNumberInputContext } from './use-number-input-context'
+
+  const props: NumberInputDecrementTriggerProps = $props()
+
+  const numberInput = useNumberInputContext()
+  const mergedProps = $derived(mergeProps(numberInput().getDecrementTriggerProps(), props))
+</script>
+
+<Ark as="button" {...mergedProps} />

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface NumberInputDecrementTriggerBaseProps extends PolymorphicProps<'button'> {
+}
+export interface NumberInputDecrementTriggerProps extends Assign<HTMLProps<'button'>, NumberInputDecrementTriggerBaseProps> {
+}
+declare const NumberInputDecrementTrigger: import("svelte").Component<NumberInputDecrementTriggerProps, {}, "">;
+type NumberInputDecrementTrigger = ReturnType<typeof NumberInputDecrementTrigger>;
+export default NumberInputDecrementTrigger;

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

@@ -0,0 +1,20 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface NumberInputIncrementTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface NumberInputIncrementTriggerProps
+    extends Assign<HTMLProps<'button'>, NumberInputIncrementTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useNumberInputContext } from './use-number-input-context'
+
+  const props: NumberInputIncrementTriggerProps = $props()
+
+  const numberInput = useNumberInputContext()
+  const mergedProps = $derived(mergeProps(numberInput().getIncrementTriggerProps(), props))
+</script>
+
+<Ark as="button" {...mergedProps} />

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface NumberInputIncrementTriggerBaseProps extends PolymorphicProps<'button'> {
+}
+export interface NumberInputIncrementTriggerProps extends Assign<HTMLProps<'button'>, NumberInputIncrementTriggerBaseProps> {
+}
+declare const NumberInputIncrementTrigger: import("svelte").Component<NumberInputIncrementTriggerProps, {}, "">;
+type NumberInputIncrementTrigger = ReturnType<typeof NumberInputIncrementTrigger>;
+export default NumberInputIncrementTrigger;

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

@@ -0,0 +1,21 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface NumberInputInputBaseProps extends PolymorphicProps<'input'> {}
+  export interface NumberInputInputProps extends Assign<HTMLProps<'input'>, NumberInputInputBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useFieldContext } from '../field'
+  import { useNumberInputContext } from './use-number-input-context'
+
+  const props: NumberInputInputProps = $props()
+
+  const numberInput = useNumberInputContext()
+  const field = useFieldContext()
+  const mergedProps = $derived(mergeProps(numberInput().getInputProps(), props))
+</script>
+
+<Ark as="input" aria-describedby={field?.()?.ariaDescribedby} {...mergedProps} />