@ark-ui/svelte 0.4.0 → 5.0.0-0

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

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

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

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

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

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

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

@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { UseNumberInputReturn } from './use-number-input.svelte'
+
+  export interface NumberInputRootProviderBaseProps extends PolymorphicProps<'div'> {
+    value: UseNumberInputReturn
+  }
+  export interface NumberInputRootProviderProps extends Assign<HTMLProps<'div'>, NumberInputRootProviderBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { NumberInputProvider } from './use-number-input-context'
+
+  let { value, ...props }: NumberInputRootProviderProps = $props()
+
+  const mergedProps = $derived(mergeProps(value().getRootProps(), props))
+
+  NumberInputProvider(value)
+</script>
+
+<Ark as="div" {...mergedProps} />

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

@@ -0,0 +1,10 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { UseNumberInputReturn } from './use-number-input.svelte';
+export interface NumberInputRootProviderBaseProps extends PolymorphicProps<'div'> {
+    value: UseNumberInputReturn;
+}
+export interface NumberInputRootProviderProps extends Assign<HTMLProps<'div'>, NumberInputRootProviderBaseProps> {
+}
+declare const NumberInputRootProvider: import("svelte").Component<NumberInputRootProviderProps, {}, "">;
+type NumberInputRootProvider = ReturnType<typeof NumberInputRootProvider>;
+export default NumberInputRootProvider;

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

@@ -0,0 +1,37 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { UseNumberInputProps } from './use-number-input.svelte'
+
+  export interface NumberInputRootBaseProps extends UseNumberInputProps, PolymorphicProps<'div'> {}
+  export interface NumberInputRootProps extends Assign<HTMLProps<'div'>, NumberInputRootBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { NumberInputProvider } from './use-number-input-context'
+  import { splitNumberInputProps } from './split-number-input-props.svelte'
+  import { useNumberInput } from './use-number-input.svelte'
+
+  let { value = $bindable(), ...props }: NumberInputRootProps = $props()
+  const providedId = $props.id()
+
+  const [useNumberInputProps, localProps] = $derived(splitNumberInputProps(props))
+
+  const resolvedProps = $derived<UseNumberInputProps>({
+    ...useNumberInputProps,
+    id: useNumberInputProps.id ?? providedId,
+    value,
+    onValueChange(details) {
+      useNumberInputProps.onValueChange?.(details)
+      value = details.value
+    },
+  })
+
+  const numberInput = useNumberInput(() => resolvedProps)
+  const mergedProps = $derived(mergeProps(numberInput().getRootProps(), localProps))
+
+  NumberInputProvider(numberInput)
+</script>
+
+<Ark as="div" {...mergedProps} />

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

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { UseNumberInputProps } from './use-number-input.svelte';
+export interface NumberInputRootBaseProps extends UseNumberInputProps, PolymorphicProps<'div'> {
+}
+export interface NumberInputRootProps extends Assign<HTMLProps<'div'>, NumberInputRootBaseProps> {
+}
+declare const NumberInputRoot: import("svelte").Component<NumberInputRootProps, {}, "value">;
+type NumberInputRoot = ReturnType<typeof NumberInputRoot>;
+export default NumberInputRoot;

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

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

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

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

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

@@ -0,0 +1,25 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface NumberInputValueTextBaseProps extends PolymorphicProps<'span'> {}
+  export interface NumberInputValueTextProps extends Assign<HTMLProps<'span'>, NumberInputValueTextBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useNumberInputContext } from './use-number-input-context'
+
+  let { children, ...props }: NumberInputValueTextProps = $props()
+
+  const numberInput = useNumberInputContext()
+  const mergedProps = $derived(mergeProps(numberInput().getValueTextProps(), props))
+</script>
+
+<Ark as="span" {...mergedProps}>
+  {#if children}
+    {@render children()}
+  {:else}
+    {numberInput().value}
+  {/if}
+</Ark>

package/dist/components/number-input/number-input-value-text.svelte.d.ts

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

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

@@ -0,0 +1 @@
+export { anatomy as numberInputAnatomy } from '@zag-js/number-input';

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

@@ -0,0 +1 @@
+export { anatomy as numberInputAnatomy } from '@zag-js/number-input';

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

@@ -0,0 +1,11 @@
+export type { FocusChangeDetails, ValueChangeDetails, ValueInvalidDetails } from '@zag-js/number-input';
+export { default as Context, type NumberInputContextProps as ContextProps } from './number-input-context.svelte';
+export { default as Control, type NumberInputControlBaseProps as ControlBaseProps, type NumberInputControlProps as ControlProps, } from './number-input-control.svelte';
+export { default as DecrementTrigger, type NumberInputDecrementTriggerBaseProps as DecrementTriggerBaseProps, type NumberInputDecrementTriggerProps as DecrementTriggerProps, } from './number-input-decrement-trigger.svelte';
+export { default as IncrementTrigger, type NumberInputIncrementTriggerBaseProps as IncrementTriggerBaseProps, type NumberInputIncrementTriggerProps as IncrementTriggerProps, } from './number-input-increment-trigger.svelte';
+export { default as Input, type NumberInputInputBaseProps as InputBaseProps, type NumberInputInputProps as InputProps, } from './number-input-input.svelte';
+export { default as Label, type NumberInputLabelBaseProps as LabelBaseProps, type NumberInputLabelProps as LabelProps, } from './number-input-label.svelte';
+export { default as Root, type NumberInputRootBaseProps as RootBaseProps, type NumberInputRootProps as RootProps, } from './number-input-root.svelte';
+export { default as RootProvider, type NumberInputRootProviderBaseProps as RootProviderBaseProps, type NumberInputRootProviderProps as RootProviderProps, } from './number-input-root-provider.svelte';
+export { default as Scrubber, type NumberInputScrubberBaseProps as ScrubberBaseProps, type NumberInputScrubberProps as ScrubberProps, } from './number-input-scrubber.svelte';
+export { default as ValueText, type NumberInputValueTextBaseProps as ValueTextBaseProps, type NumberInputValueTextProps as ValueTextProps, } from './number-input-value-text.svelte';

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

@@ -0,0 +1,10 @@
+export { default as Context } from './number-input-context.svelte';
+export { default as Control, } from './number-input-control.svelte';
+export { default as DecrementTrigger, } from './number-input-decrement-trigger.svelte';
+export { default as IncrementTrigger, } from './number-input-increment-trigger.svelte';
+export { default as Input, } from './number-input-input.svelte';
+export { default as Label, } from './number-input-label.svelte';
+export { default as Root, } from './number-input-root.svelte';
+export { default as RootProvider, } from './number-input-root-provider.svelte';
+export { default as Scrubber, } from './number-input-scrubber.svelte';
+export { default as ValueText, } from './number-input-value-text.svelte';

package/dist/components/number-input/split-number-input-props.svelte.d.ts

@@ -0,0 +1,2 @@
+import type { UseNumberInputProps } from './use-number-input.svelte';
+export declare const splitNumberInputProps: <T extends UseNumberInputProps>(props: T) => [UseNumberInputProps, Omit<T, "form" | "pattern" | "name" | "defaultValue" | "value" | "locale" | "ids" | "disabled" | "id" | "step" | "onValueChange" | "onFocusChange" | "translations" | "readOnly" | "invalid" | "required" | "max" | "min" | "allowOverflow" | "allowMouseWheel" | "clampValueOnBlur" | "focusInputOnChange" | "formatOptions" | "inputMode" | "onValueInvalid" | "spinOnPress">];

package/dist/components/number-input/split-number-input-props.svelte.js

@@ -0,0 +1,30 @@
+import { createSplitProps } from '../../utils/create-split-props';
+const splitFn = createSplitProps();
+export const splitNumberInputProps = (props) => splitFn(props, [
+    'allowMouseWheel',
+    'allowOverflow',
+    'clampValueOnBlur',
+    'defaultValue',
+    'disabled',
+    'focusInputOnChange',
+    'form',
+    'formatOptions',
+    'id',
+    'ids',
+    'inputMode',
+    'invalid',
+    'locale',
+    'max',
+    'min',
+    'name',
+    'onFocusChange',
+    'onValueChange',
+    'onValueInvalid',
+    'pattern',
+    'readOnly',
+    'required',
+    'spinOnPress',
+    'step',
+    'translations',
+    'value',
+]);

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

@@ -0,0 +1,4 @@
+import type { UseNumberInputReturn } from './use-number-input.svelte';
+export interface UseNumberInputContext extends UseNumberInputReturn {
+}
+export declare const NumberInputProvider: (opts: UseNumberInputContext) => void, useNumberInputContext: (fallback?: UseNumberInputContext | undefined) => UseNumberInputContext;

package/dist/components/number-input/use-number-input-context.js

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

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

@@ -0,0 +1,9 @@
+import type { Accessor, Optional } from '../../types';
+import * as numberInput from '@zag-js/number-input';
+import { type PropTypes } from '@zag-js/svelte';
+import { type MaybeFunction } from '@zag-js/utils';
+export interface UseNumberInputProps extends Optional<Omit<numberInput.Props, 'dir' | 'getRootNode'>, 'id'> {
+}
+export interface UseNumberInputReturn extends Accessor<numberInput.Api<PropTypes>> {
+}
+export declare const useNumberInput: (props?: MaybeFunction<UseNumberInputProps>) => UseNumberInputReturn;

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

@@ -0,0 +1,31 @@
+import { useEnvironmentContext } from '../../providers/environment';
+import { useLocaleContext } from '../../providers/locale';
+import * as numberInput from '@zag-js/number-input';
+import { normalizeProps, useMachine } from '@zag-js/svelte';
+import { ensureProps, runIfFn } from '@zag-js/utils';
+import { useFieldContext } from '../field';
+export const useNumberInput = (props = {}) => {
+    const env = useEnvironmentContext();
+    const locale = useLocaleContext();
+    const field = useFieldContext();
+    const machineProps = $derived.by(() => {
+        const resolvedProps = runIfFn(props);
+        ensureProps(resolvedProps, ['id']);
+        return {
+            ids: {
+                label: field?.()?.ids.label,
+                input: field?.()?.ids.control,
+            },
+            dir: locale().dir,
+            disabled: field?.()?.disabled,
+            readOnly: field?.()?.readOnly,
+            invalid: field?.()?.invalid,
+            required: field?.()?.required,
+            getRootNode: env().getRootNode,
+            ...resolvedProps,
+        };
+    });
+    const service = useMachine(numberInput.machine, () => machineProps);
+    const api = $derived(numberInput.connect(service, normalizeProps));
+    return () => api;
+};

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

@@ -0,0 +1,12 @@
+export type { ItemLabelDetails as PaginationItemLabelDetails, PageChangeDetails as PaginationPageChangeDetails, PageSizeChangeDetails as PaginationPageSizeChangeDetails, } from '@zag-js/pagination';
+export { default as PaginationContext, type PaginationContextProps } from './pagination-context.svelte';
+export { default as PaginationEllipsis, type PaginationEllipsisBaseProps, type PaginationEllipsisProps, } from './pagination-ellipsis.svelte';
+export { default as PaginationItem, type PaginationItemBaseProps, type PaginationItemProps, } from './pagination-item.svelte';
+export { default as PaginationNextTrigger, type PaginationNextTriggerBaseProps, type PaginationNextTriggerProps, } from './pagination-next-trigger.svelte';
+export { default as PaginationPrevTrigger, type PaginationPrevTriggerBaseProps, type PaginationPrevTriggerProps, } from './pagination-prev-trigger.svelte';
+export { default as PaginationRootProvider, type PaginationRootProviderBaseProps, type PaginationRootProviderProps, } from './pagination-root-provider.svelte';
+export { default as PaginationRoot, type PaginationRootBaseProps, type PaginationRootProps, } from './pagination-root.svelte';
+export { paginationAnatomy } from './pagination.anatomy';
+export { usePagination, type UsePaginationProps, type UsePaginationReturn } from './use-pagination.svelte';
+export { usePaginationContext, type UsePaginationContext } from './use-pagination-context';
+export * as Pagination from './pagination';

package/dist/components/pagination/index.js

@@ -0,0 +1,11 @@
+export { default as PaginationContext } from './pagination-context.svelte';
+export { default as PaginationEllipsis, } from './pagination-ellipsis.svelte';
+export { default as PaginationItem, } from './pagination-item.svelte';
+export { default as PaginationNextTrigger, } from './pagination-next-trigger.svelte';
+export { default as PaginationPrevTrigger, } from './pagination-prev-trigger.svelte';
+export { default as PaginationRootProvider, } from './pagination-root-provider.svelte';
+export { default as PaginationRoot, } from './pagination-root.svelte';
+export { paginationAnatomy } from './pagination.anatomy';
+export { usePagination } from './use-pagination.svelte';
+export { usePaginationContext } from './use-pagination-context';
+export * as Pagination from './pagination';

package/dist/components/pagination/pagination-context.svelte

@@ -0,0 +1,17 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UsePaginationContext } from './use-pagination-context'
+
+  export interface PaginationContextProps {
+    render: Snippet<[UsePaginationContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { usePaginationContext } from './use-pagination-context'
+
+  const { render }: PaginationContextProps = $props()
+  const context = usePaginationContext()
+</script>
+
+{@render render(context)}

package/dist/components/pagination/pagination-context.svelte.d.ts

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

package/dist/components/pagination/pagination-ellipsis.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { EllipsisProps } from '@zag-js/pagination'
+
+  export interface PaginationEllipsisBaseProps extends EllipsisProps, PolymorphicProps<'div'> {}
+  export interface PaginationEllipsisProps extends Assign<HTMLProps<'div'>, PaginationEllipsisBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { usePaginationContext } from './use-pagination-context'
+
+  const props: PaginationEllipsisProps = $props()
+  const pagination = usePaginationContext()
+  const mergedProps = $derived(mergeProps(pagination().getEllipsisProps(props), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/pagination/pagination-ellipsis.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { EllipsisProps } from '@zag-js/pagination';
+export interface PaginationEllipsisBaseProps extends EllipsisProps, PolymorphicProps<'div'> {
+}
+export interface PaginationEllipsisProps extends Assign<HTMLProps<'div'>, PaginationEllipsisBaseProps> {
+}
+declare const PaginationEllipsis: import("svelte").Component<PaginationEllipsisProps, {}, "">;
+type PaginationEllipsis = ReturnType<typeof PaginationEllipsis>;
+export default PaginationEllipsis;

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

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { ItemProps } from '@zag-js/pagination'
+
+  export interface PaginationItemBaseProps extends ItemProps, PolymorphicProps<'button'> {}
+  export interface PaginationItemProps extends Assign<HTMLProps<'button'>, PaginationItemBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { usePaginationContext } from './use-pagination-context'
+
+  const props: PaginationItemProps = $props()
+  const pagination = usePaginationContext()
+  const mergedProps = $derived(mergeProps(pagination().getItemProps(props), props))
+</script>
+
+<Ark as="button" {...mergedProps} />

package/dist/components/pagination/pagination-item.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { ItemProps } from '@zag-js/pagination';
+export interface PaginationItemBaseProps extends ItemProps, PolymorphicProps<'button'> {
+}
+export interface PaginationItemProps extends Assign<HTMLProps<'button'>, PaginationItemBaseProps> {
+}
+declare const PaginationItem: import("svelte").Component<PaginationItemProps, {}, "">;
+type PaginationItem = ReturnType<typeof PaginationItem>;
+export default PaginationItem;

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

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface PaginationNextTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface PaginationNextTriggerProps extends Assign<HTMLProps<'button'>, PaginationNextTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { usePaginationContext } from './use-pagination-context'
+
+  const props: PaginationNextTriggerProps = $props()
+  const pagination = usePaginationContext()
+  const mergedProps = $derived(mergeProps(pagination().getNextTriggerProps(), props))
+</script>
+
+<Ark as="button" {...mergedProps} />

package/dist/components/pagination/pagination-next-trigger.svelte.d.ts

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

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

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface PaginationPrevTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface PaginationPrevTriggerProps extends Assign<HTMLProps<'button'>, PaginationPrevTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { usePaginationContext } from './use-pagination-context'
+
+  const props: PaginationPrevTriggerProps = $props()
+  const pagination = usePaginationContext()
+  const mergedProps = $derived(mergeProps(pagination().getPrevTriggerProps(), props))
+</script>
+
+<Ark as="button" {...mergedProps} />

package/dist/components/pagination/pagination-prev-trigger.svelte.d.ts

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

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

@@ -0,0 +1,27 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Snippet } from 'svelte'
+  import type { UsePaginationReturn } from './use-pagination.svelte'
+
+  export interface RootProviderProps {
+    value: UsePaginationReturn
+    children?: Snippet
+  }
+
+  export interface PaginationRootProviderBaseProps extends PolymorphicProps<'nav'>, RootProviderProps {}
+  export interface PaginationRootProviderProps extends Assign<HTMLProps<'nav'>, PaginationRootProviderBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { PaginationProvider } from './use-pagination-context'
+
+  let { value, ...props }: PaginationRootProviderProps = $props()
+
+  const mergedProps = $derived(mergeProps(value().getRootProps(), props))
+
+  PaginationProvider(value)
+</script>
+
+<Ark as="nav" {...mergedProps} />

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

@@ -0,0 +1,14 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Snippet } from 'svelte';
+import type { UsePaginationReturn } from './use-pagination.svelte';
+export interface RootProviderProps {
+    value: UsePaginationReturn;
+    children?: Snippet;
+}
+export interface PaginationRootProviderBaseProps extends PolymorphicProps<'nav'>, RootProviderProps {
+}
+export interface PaginationRootProviderProps extends Assign<HTMLProps<'nav'>, PaginationRootProviderBaseProps> {
+}
+declare const PaginationRootProvider: import("svelte").Component<PaginationRootProviderProps, {}, "">;
+type PaginationRootProvider = ReturnType<typeof PaginationRootProvider>;
+export default PaginationRootProvider;

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

@@ -0,0 +1,57 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { UsePaginationProps } from './use-pagination.svelte'
+
+  export interface PaginationRootBaseProps extends UsePaginationProps, PolymorphicProps<'nav'> {}
+  export interface PaginationRootProps extends Assign<HTMLProps<'nav'>, PaginationRootBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { PaginationProvider } from './use-pagination-context'
+  import { usePagination } from './use-pagination.svelte'
+
+  let { page = $bindable(), pageSize = $bindable(), ...props }: PaginationRootProps = $props()
+  const providedId = $props.id()
+
+  const [paginationProps, localProps] = $derived(
+    createSplitProps<UsePaginationProps>()(props, [
+      'count',
+      'defaultPage',
+      'defaultPageSize',
+      'id',
+      'ids',
+      'onPageChange',
+      'onPageSizeChange',
+      'page',
+      'pageSize',
+      'siblingCount',
+      'translations',
+      'type',
+    ]),
+  )
+
+  const resolvedProps = $derived<UsePaginationProps>({
+    ...paginationProps,
+    id: paginationProps.id ?? providedId,
+    page,
+    pageSize,
+    onPageChange(details) {
+      paginationProps.onPageChange?.(details)
+      if (page !== undefined) page = details.page
+    },
+    onPageSizeChange(details) {
+      paginationProps.onPageSizeChange?.(details)
+      if (pageSize !== undefined) pageSize = details.pageSize
+    },
+  })
+
+  const pagination = usePagination(() => resolvedProps)
+  const mergedProps = $derived(mergeProps(pagination().getRootProps(), localProps))
+
+  PaginationProvider(pagination)
+</script>
+
+<Ark as="nav" {...mergedProps} />

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

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { UsePaginationProps } from './use-pagination.svelte';
+export interface PaginationRootBaseProps extends UsePaginationProps, PolymorphicProps<'nav'> {
+}
+export interface PaginationRootProps extends Assign<HTMLProps<'nav'>, PaginationRootBaseProps> {
+}
+declare const PaginationRoot: import("svelte").Component<PaginationRootProps, {}, "page" | "pageSize">;
+type PaginationRoot = ReturnType<typeof PaginationRoot>;
+export default PaginationRoot;

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

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

package/dist/components/pagination/pagination.anatomy.js

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

package/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,8 @@
+export type { ItemLabelDetails, PageChangeDetails, PageSizeChangeDetails } from '@zag-js/pagination';
+export { default as Context, type PaginationContextProps as ContextProps } from './pagination-context.svelte';
+export { default as Ellipsis, type PaginationEllipsisBaseProps as EllipsisBaseProps, type PaginationEllipsisProps as EllipsisProps, } from './pagination-ellipsis.svelte';
+export { default as Item, type PaginationItemBaseProps as ItemBaseProps, type PaginationItemProps as ItemProps, } from './pagination-item.svelte';
+export { default as NextTrigger, type PaginationNextTriggerBaseProps as NextTriggerBaseProps, type PaginationNextTriggerProps as NextTriggerProps, } from './pagination-next-trigger.svelte';
+export { default as PrevTrigger, type PaginationPrevTriggerBaseProps as PrevTriggerBaseProps, type PaginationPrevTriggerProps as PrevTriggerProps, } from './pagination-prev-trigger.svelte';
+export { default as Root, type PaginationRootBaseProps as RootBaseProps, type PaginationRootProps as RootProps, } from './pagination-root.svelte';
+export { default as RootProvider, type PaginationRootProviderBaseProps as RootProviderBaseProps, type PaginationRootProviderProps as RootProviderProps, } from './pagination-root-provider.svelte';