ui-ingredients 0.0.16 → 0.0.18

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

@@ -1,21 +1,8 @@
-export default Separator;
-type Separator = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Separator: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -24,3 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
+declare const Separator: $$__sveltets_2_IsomorphicComponent<MenuSeparatorProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Separator = InstanceType<typeof Separator>;
+export default Separator;

package/dist/menu/trigger-item.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface MenuTriggerItemIndicatorProps extends HtmlProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {menuContext} from './context.svelte.js';
+
+  let {children, ...props}: MenuTriggerItemIndicatorProps = $props();
+
+  let context = menuContext.get();
+
+  let attrs = $derived(mergeProps(props, context.getTriggerItemProps(context)));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

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

@@ -1,21 +1,8 @@
-export default TriggerItem;
-type TriggerItem = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const TriggerItem: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -24,3 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
+declare const TriggerItem: $$__sveltets_2_IsomorphicComponent<MenuTriggerItemIndicatorProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type TriggerItem = InstanceType<typeof TriggerItem>;
+export default TriggerItem;

package/dist/menu/trigger.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface MenuTriggerProps extends HtmlProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {menuContext} from './context.svelte.js';
+
+  let {children, ...props}: MenuTriggerProps = $props();
+
+  let context = menuContext.get();
+
+  let attrs = $derived(mergeProps(props, context.getTriggerProps()));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

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

@@ -1,21 +1,8 @@
-export default Trigger;
-type Trigger = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Trigger: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -24,3 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
+declare const Trigger: $$__sveltets_2_IsomorphicComponent<MenuTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Trigger = InstanceType<typeof Trigger>;
+export default Trigger;

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

@@ -1,8 +1,3 @@
-import * as numberInput from '@zag-js/number-input';
-export interface CreateNumberInputContextProps extends numberInput.Context {
-}
-export interface CreateNumberInputContextReturn extends ReturnType<typeof createNumberInputContext> {
-}
-export declare function createNumberInputContext(props: CreateNumberInputContextProps): any;
-export declare function setNumberInputContext(value: CreateNumberInputContextReturn): void;
-export declare function useNumberInputContext(): CreateNumberInputContextReturn;
+import { Context } from '../utils.svelte.js';
+import type { CreateNumberInputReturn } from './create-number-input.svelte.js';
+export declare const numberInputContext: Context<CreateNumberInputReturn>;

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

@@ -1,14 +1,2 @@
-import * as numberInput from '@zag-js/number-input';
-import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getContext, setContext } from 'svelte';
-export function createNumberInputContext(props) {
-    const [state, send] = useMachine(numberInput.machine(props));
-    const api = $derived(reflect(() => numberInput.connect(state, send, normalizeProps)));
-    return api;
-}
-export function setNumberInputContext(value) {
-    setContext('NumberInput', value);
-}
-export function useNumberInputContext() {
-    return getContext('NumberInput');
-}
+import { Context } from '../utils.svelte.js';
+export const numberInputContext = new Context('NumberInput');

package/dist/number-input/control.svelte

@@ -1,17 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface NumberInputControlTriggerProps
-    extends HtmlIngredientProps<'div'> {}
+  export interface NumberInputControlTriggerProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useNumberInputContext} from './context.svelte.js';
+  import {numberInputContext} from './context.svelte.js';
 
   let {children, ...props}: NumberInputControlTriggerProps = $props();
 
-  let context = useNumberInputContext();
+  let context = numberInputContext.get();
 
   let attrs = $derived(mergeProps(props, context.getControlProps()));
 </script>

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface NumberInputControlTriggerProps extends HtmlIngredientProps<'div'> {
-}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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

@@ -0,0 +1,7 @@
+import * as numberInput from '@zag-js/number-input';
+export interface CreateNumberInputProps extends Omit<numberInput.Context, 'id' | 'dir' | 'locale' | 'getRootNode'> {
+    id?: string | null;
+}
+export interface CreateNumberInputReturn extends numberInput.Api {
+}
+export declare function createNumberInput(props: CreateNumberInputProps): CreateNumberInputReturn;

package/dist/number-input/create-number-input.svelte.js

@@ -0,0 +1,18 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
+import * as numberInput from '@zag-js/number-input';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+export function createNumberInput(props) {
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(numberInput.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        locale: localeContext?.locale,
+        getRootNode: environmentContext?.getRootNode,
+    }));
+    const api = $derived(reflect(() => numberInput.connect(state, send, normalizeProps)));
+    return api;
+}

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

@@ -1,17 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface NumberInputDecrementTriggerProps
-    extends HtmlIngredientProps<'button'> {}
+  export interface NumberInputDecrementTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useNumberInputContext} from './context.svelte.js';
+  import {numberInputContext} from './context.svelte.js';
 
   let {children, ...props}: NumberInputDecrementTriggerProps = $props();
 
-  let context = useNumberInputContext();
+  let context = numberInputContext.get();
 
   let attrs = $derived(mergeProps(props, context.getDecrementTriggerProps()));
 </script>

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface NumberInputDecrementTriggerProps extends HtmlIngredientProps<'button'> {
-}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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

@@ -1,17 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface NumberInputIncrementTriggerProps
-    extends HtmlIngredientProps<'button'> {}
+  export interface NumberInputIncrementTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useNumberInputContext} from './context.svelte.js';
+  import {numberInputContext} from './context.svelte.js';
 
   let {children, ...props}: NumberInputIncrementTriggerProps = $props();
 
-  let context = useNumberInputContext();
+  let context = numberInputContext.get();
 
   let attrs = $derived(mergeProps(props, context.getIncrementTriggerProps()));
 </script>

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface NumberInputIncrementTriggerProps extends HtmlIngredientProps<'button'> {
-}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/number-input/input.svelte

@@ -1,16 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface NumberInputInputProps extends HtmlIngredientProps<'input'> {}
+  export interface NumberInputInputProps extends HtmlProps<'input'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useNumberInputContext} from './context.svelte.js';
+  import {numberInputContext} from './context.svelte.js';
 
   let {...props}: NumberInputInputProps = $props();
 
-  let context = useNumberInputContext();
+  let context = numberInputContext.get();
 
   let attrs = $derived(mergeProps(props, context.getInputProps()));
 </script>

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface NumberInputInputProps extends HtmlIngredientProps<'input'> {
-}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/number-input/label.svelte

@@ -1,16 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface NumberInputLabelProps extends HtmlIngredientProps<'label'> {}
+  export interface NumberInputLabelProps extends HtmlProps<'label'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useNumberInputContext} from './context.svelte.js';
+  import {numberInputContext} from './context.svelte.js';
 
   let {children, ...props}: NumberInputLabelProps = $props();
 
-  let context = useNumberInputContext();
+  let context = numberInputContext.get();
 
   let attrs = $derived(mergeProps(props, context.getLabelProps()));
 </script>

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface NumberInputLabelProps extends HtmlIngredientProps<'label'> {
-}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/number-input/root.svelte

@@ -1,41 +1,31 @@
-<script lang="ts" context="module">
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {
-    CreateNumberInputContextProps,
-    CreateNumberInputContextReturn,
-  } from './context.svelte.js';
+    CreateNumberInputProps,
+    CreateNumberInputReturn,
+  } from './create-number-input.svelte.js';
 
   export interface NumberInputProps
-    extends Assign<
-      Omit<HtmlIngredientProps<'div'>, 'children'>,
-      Omit<CreateNumberInputContextProps, 'id'>
-    > {
-    children?: Snippet<[context: CreateNumberInputContextReturn]>;
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateNumberInputProps> {
+    children?: Snippet<[api: CreateNumberInputReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {useEnvironmentContext} from '../environment-provider/index.js';
-  import {useLocaleContext} from '../locale-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
-  import {
-    createNumberInputContext,
-    setNumberInputContext,
-  } from './context.svelte.js';
+  import {numberInputContext} from './context.svelte.js';
+  import {createNumberInput} from './create-number-input.svelte.js';
 
   let {
     id,
     ids,
-    dir,
     max,
     min,
     step,
     name,
     form,
     value,
-    locale,
     pattern,
     invalid,
     disabled,
@@ -52,25 +42,19 @@
     onFocusChange,
     onValueChange,
     onValueInvalid,
-    getRootNode,
     children,
     ...props
   }: NumberInputProps = $props();
 
-  let localeContext = useLocaleContext();
-  let environmentContext = useEnvironmentContext();
-
-  let context = createNumberInputContext({
-    id: id ?? createUniqueId(),
+  let context = createNumberInput({
+    id,
     ids,
-    dir: dir ?? localeContext?.dir,
     max,
     min,
     step,
     name,
     form,
     value: $state.snapshot(value),
-    locale: locale ?? localeContext?.locale,
     pattern,
     invalid,
     disabled,
@@ -87,12 +71,11 @@
     onFocusChange,
     onValueChange,
     onValueInvalid,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
   });
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));
 
-  setNumberInputContext(context);
+  numberInputContext.set(context);
 </script>
 
 <div {...attrs}>

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

@@ -1,9 +1,3 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
-import type { Snippet } from 'svelte';
-import type { CreateNumberInputContextProps, CreateNumberInputContextReturn } from './context.svelte.js';
-export interface NumberInputProps extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, Omit<CreateNumberInputContextProps, 'id'>> {
-    children?: Snippet<[context: CreateNumberInputContextReturn]>;
-}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/number-input/scrubber.svelte

@@ -1,17 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface NumberInputScrubberProps
-    extends HtmlIngredientProps<'div'> {}
+  export interface NumberInputScrubberProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useNumberInputContext} from './context.svelte.js';
+  import {numberInputContext} from './context.svelte.js';
 
   let {children, ...props}: NumberInputScrubberProps = $props();
 
-  let context = useNumberInputContext();
+  let context = numberInputContext.get();
 
   let attrs = $derived(mergeProps(props, context.getScrubberProps()));
 </script>

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface NumberInputScrubberProps extends HtmlIngredientProps<'div'> {
-}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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

@@ -1,8 +1,3 @@
-import * as pagination from '@zag-js/pagination';
-export interface CreatePaginationContextProps extends pagination.Context {
-}
-export interface CreatePaginationContextReturn extends ReturnType<typeof createPaginationContext> {
-}
-export declare function createPaginationContext(props: CreatePaginationContextProps): any;
-export declare function setPaginationContext(value: CreatePaginationContextReturn): void;
-export declare function usePaginationContext(): CreatePaginationContextReturn;
+import { Context } from '../utils.svelte.js';
+import type { CreatePaginationReturn } from './create-pagination.svelte.js';
+export declare const paginationContext: Context<CreatePaginationReturn>;

package/dist/pagination/context.svelte.js

@@ -1,14 +1,2 @@
-import * as pagination from '@zag-js/pagination';
-import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getContext, setContext } from 'svelte';
-export function createPaginationContext(props) {
-    const [state, send] = useMachine(pagination.machine(props));
-    const api = $derived(reflect(() => pagination.connect(state, send, normalizeProps)));
-    return api;
-}
-export function setPaginationContext(value) {
-    setContext('Pagination', value);
-}
-export function usePaginationContext() {
-    return getContext('Pagination');
-}
+import { Context } from '../utils.svelte.js';
+export const paginationContext = new Context('Pagination');

package/dist/pagination/create-pagination.svelte.d.ts

@@ -0,0 +1,7 @@
+import * as pagination from '@zag-js/pagination';
+export interface CreatePaginationProps extends Omit<pagination.Context, 'id' | 'dir' | 'getRootNode'> {
+    id?: string | null;
+}
+export interface CreatePaginationReturn extends pagination.Api {
+}
+export declare function createPagination(props: CreatePaginationProps): CreatePaginationReturn;

package/dist/pagination/create-pagination.svelte.js

@@ -0,0 +1,17 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
+import * as pagination from '@zag-js/pagination';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+export function createPagination(props) {
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(pagination.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
+    }));
+    const api = $derived(reflect(() => pagination.connect(state, send, normalizeProps)));
+    return api;
+}

package/dist/pagination/ellipsis.svelte

@@ -1,18 +1,17 @@
-<script lang="ts" context="module">
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
   import type {EllipsisProps} from '@zag-js/pagination';
 
-  export interface PaginationEllipsisProps
-    extends Assign<HtmlIngredientProps<'span'>, EllipsisProps> {}
+  export interface PaginationEllipsisProps extends Assign<HtmlProps<'span'>, EllipsisProps> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {usePaginationContext} from './context.svelte.js';
+  import {paginationContext} from './context.svelte.js';
 
   let {index, children, ...props}: PaginationEllipsisProps = $props();
 
-  let context = usePaginationContext();
+  let context = paginationContext.get();
 
   let attrs = $derived(mergeProps(props, context.getEllipsisProps({index})));
 </script>

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

@@ -1,7 +1,3 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
-import type { EllipsisProps } from '@zag-js/pagination';
-export interface PaginationEllipsisProps extends Assign<HtmlIngredientProps<'span'>, EllipsisProps> {
-}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/pagination/item.svelte

@@ -1,18 +1,18 @@
-<script lang="ts" context="module">
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
   import type {ItemProps} from '@zag-js/pagination';
 
   export interface PaginationItemProps
-    extends Assign<HtmlIngredientProps<'button'>, Omit<ItemProps, 'type'>> {}
+    extends Assign<HtmlProps<'button'>, Omit<ItemProps, 'type'>> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {usePaginationContext} from './context.svelte.js';
+  import {paginationContext} from './context.svelte.js';
 
   let {value, children, ...props}: PaginationItemProps = $props();
 
-  let context = usePaginationContext();
+  let context = paginationContext.get();
 
   let attrs = $derived(
     mergeProps(

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

@@ -1,7 +1,3 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
-import type { ItemProps } from '@zag-js/pagination';
-export interface PaginationItemProps extends Assign<HtmlIngredientProps<'button'>, Omit<ItemProps, 'type'>> {
-}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;