ui-ingredients 0.0.16 → 0.0.18

package/dist/pagination/next-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 PaginationNextTriggerProps
-    extends HtmlIngredientProps<'button'> {}
+  export interface PaginationNextTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {usePaginationContext} from './context.svelte.js';
+  import {paginationContext} from './context.svelte.js';
 
   let {children, ...props}: PaginationNextTriggerProps = $props();
 
-  let context = usePaginationContext();
+  let context = paginationContext.get();
 
   let attrs = $derived(mergeProps(props, context.getNextTriggerProps()));
 </script>

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface PaginationNextTriggerProps 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/pagination/prev-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 PaginationPrevTriggerProps
-    extends HtmlIngredientProps<'button'> {}
+  export interface PaginationPrevTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {usePaginationContext} from './context.svelte.js';
+  import {paginationContext} from './context.svelte.js';
 
   let {children, ...props}: PaginationPrevTriggerProps = $props();
 
-  let context = usePaginationContext();
+  let context = paginationContext.get();
 
   let attrs = $derived(mergeProps(props, context.getPrevTriggerProps()));
 </script>

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface PaginationPrevTriggerProps 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/pagination/root.svelte

@@ -1,34 +1,22 @@
-<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 {
-    CreatePaginationContextProps,
-    CreatePaginationContextReturn,
-  } from './context.svelte.js';
+  import type {CreatePaginationProps, CreatePaginationReturn} from './create-pagination.svelte.js';
 
   export interface PaginationProps
-    extends Assign<
-      Omit<HtmlIngredientProps<'div'>, 'children'>,
-      Omit<CreatePaginationContextProps, 'id'>
-    > {
-    children?: Snippet<[context: CreatePaginationContextReturn]>;
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreatePaginationProps> {
+    children?: Snippet<[api: CreatePaginationReturn]>;
   }
 </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 {
-    createPaginationContext,
-    setPaginationContext,
-  } from './context.svelte.js';
+  import {paginationContext} from './context.svelte.js';
+  import {createPagination} from './create-pagination.svelte.js';
 
   let {
     id,
     ids,
-    dir,
     type,
     page,
     pageSize,
@@ -37,18 +25,13 @@
     translations,
     onPageChange,
     onPageSizeChange,
-    getRootNode,
     children,
     ...props
   }: PaginationProps = $props();
 
-  let localeContext = useLocaleContext();
-  let environmentContext = useEnvironmentContext();
-
-  let context = createPaginationContext({
-    id: id ?? createUniqueId(),
+  let context = createPagination({
+    id,
     ids,
-    dir: dir ?? localeContext?.dir,
     type,
     page,
     pageSize,
@@ -57,12 +40,11 @@
     translations,
     onPageChange,
     onPageSizeChange,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
   });
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));
 
-  setPaginationContext(context);
+  paginationContext.set(context);
 </script>
 
 <div {...attrs}>

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

@@ -1,9 +1,3 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
-import type { Snippet } from 'svelte';
-import type { CreatePaginationContextProps, CreatePaginationContextReturn } from './context.svelte.js';
-export interface PaginationProps extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, Omit<CreatePaginationContextProps, 'id'>> {
-    children?: Snippet<[context: CreatePaginationContextReturn]>;
-}
 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/pin-input/clear-trigger.svelte

@@ -1,16 +1,15 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface PinInputClearTriggerProps
-    extends HtmlIngredientProps<'button'> {}
+  export interface PinInputClearTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">
-  import {usePinInputContext} from './context.svelte.js';
+  import {pinInputContext} from './context.svelte.js';
 
   let {children, onclick, ...props}: PinInputClearTriggerProps = $props();
 
-  let context = usePinInputContext();
+  let context = pinInputContext.get();
 </script>
 
 <button

package/dist/pin-input/clear-trigger.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface PinInputClearTriggerProps 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/pin-input/context.svelte.d.ts

@@ -1,8 +1,3 @@
-import * as pinInput from '@zag-js/pin-input';
-export interface CreatePinInputContextProps extends pinInput.Context {
-}
-export interface CreatePinInputContextReturn extends ReturnType<typeof createPinInputContext> {
-}
-export declare function createPinInputContext(props: CreatePinInputContextProps): any;
-export declare function setPinInputContext(value: CreatePinInputContextReturn): void;
-export declare function usePinInputContext(): CreatePinInputContextReturn;
+import { Context } from '../utils.svelte.js';
+import type { CreatePinInputReturn } from './create-pin-input.svelte.js';
+export declare const pinInputContext: Context<CreatePinInputReturn>;

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

@@ -1,14 +1,2 @@
-import * as pinInput from '@zag-js/pin-input';
-import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getContext, setContext } from 'svelte';
-export function createPinInputContext(props) {
-    const [state, send] = useMachine(pinInput.machine(props));
-    const api = $derived(reflect(() => pinInput.connect(state, send, normalizeProps)));
-    return api;
-}
-export function setPinInputContext(value) {
-    setContext('PinInput', value);
-}
-export function usePinInputContext() {
-    return getContext('PinInput');
-}
+import { Context } from '../utils.svelte.js';
+export const pinInputContext = new Context('PinInput');

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

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

package/dist/pin-input/create-pin-input.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 pinInput from '@zag-js/pin-input';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+export function createPinInputContext(props) {
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(pinInput.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
+    }));
+    const api = $derived(reflect(() => pinInput.connect(state, send, normalizeProps)));
+    return api;
+}

package/dist/pin-input/hidden-input.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 PinInputHiddenInputProps
-    extends HtmlIngredientProps<'input'> {}
+  export interface PinInputHiddenInputProps extends HtmlProps<'input'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {usePinInputContext} from './context.svelte.js';
+  import {pinInputContext} from './context.svelte.js';
 
   let {...props}: PinInputHiddenInputProps = $props();
 
-  let context = usePinInputContext();
+  let context = pinInputContext.get();
 
   let attrs = $derived(mergeProps(props, context.getHiddenInputProps()));
 </script>

package/dist/pin-input/hidden-input.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface PinInputHiddenInputProps 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/pin-input/input.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 {InputProps} from '@zag-js/pin-input';
 
-  export interface PinInputInputProps
-    extends Assign<HtmlIngredientProps<'input'>, InputProps> {}
+  export interface PinInputInputProps extends Assign<HtmlProps<'input'>, InputProps> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {usePinInputContext} from './context.svelte.js';
+  import {pinInputContext} from './context.svelte.js';
 
   let {index, ...props}: PinInputInputProps = $props();
 
-  let context = usePinInputContext();
+  let context = pinInputContext.get();
 
   let attrs = $derived(mergeProps(props, context.getInputProps({index})));
 </script>

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

@@ -1,7 +1,3 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
-import type { InputProps } from '@zag-js/pin-input';
-export interface PinInputInputProps extends Assign<HtmlIngredientProps<'input'>, InputProps> {
-}
 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/pin-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 PinInputLabelProps extends HtmlIngredientProps<'label'> {}
+  export interface PinInputLabelProps extends HtmlProps<'label'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {usePinInputContext} from './context.svelte.js';
+  import {pinInputContext} from './context.svelte.js';
 
   let {children, ...props}: PinInputLabelProps = $props();
 
-  let context = usePinInputContext();
+  let context = pinInputContext.get();
 
   let attrs = $derived(mergeProps(props, context.getLabelProps()));
 </script>

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

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface PinInputLabelProps 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/pin-input/root.svelte

@@ -1,31 +1,22 @@
-<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 {
-    CreatePinInputContextProps,
-    CreatePinInputContextReturn,
-  } from './context.svelte.js';
+  import type {CreatePinInputProps, CreatePinInputReturn} from './create-pin-input.svelte.js';
 
   export interface PinInputProps
-    extends Assign<
-      Omit<HtmlIngredientProps<'div'>, 'children'>,
-      Omit<CreatePinInputContextProps, 'id'>
-    > {
-    children?: Snippet<[context: CreatePinInputContextReturn]>;
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreatePinInputProps> {
+    children?: Snippet<[api: CreatePinInputReturn]>;
   }
 </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 {createPinInputContext, setPinInputContext} from './context.svelte.js';
+  import {pinInputContext} from './context.svelte.js';
+  import {createPinInputContext} from './create-pin-input.svelte.js';
 
   let {
     id,
     ids,
-    dir,
     otp,
     form,
     mask,
@@ -45,18 +36,13 @@
     onValueChange,
     onValueInvalid,
     onValueComplete,
-    getRootNode,
     children,
     ...props
   }: PinInputProps = $props();
 
-  let localeContext = useLocaleContext();
-  let environmentContext = useEnvironmentContext();
-
   let context = createPinInputContext({
-    id: id ?? createUniqueId(),
+    id,
     ids,
-    dir: dir ?? localeContext?.dir,
     otp,
     form,
     mask,
@@ -76,12 +62,11 @@
     onValueChange,
     onValueInvalid,
     onValueComplete,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
   });
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));
 
-  setPinInputContext(context);
+  pinInputContext.set(context);
 </script>
 
 <div {...attrs}>

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

@@ -1,9 +1,3 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
-import type { Snippet } from 'svelte';
-import type { CreatePinInputContextProps, CreatePinInputContextReturn } from './context.svelte.js';
-export interface PinInputProps extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, Omit<CreatePinInputContextProps, 'id'>> {
-    children?: Snippet<[context: CreatePinInputContextReturn]>;
-}
 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/popover/arrow-tip.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 PopoverArrowTipProps extends HtmlIngredientProps<'div'> {}
+  export interface PopoverArrowTipProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {usePopoverContext} from './context.svelte.js';
+  import {popoverContext} from './context.svelte.js';
 
   let {children, ...props}: PopoverArrowTipProps = $props();
 
-  let context = usePopoverContext();
+  let context = popoverContext.get();
 
   let attrs = $derived(mergeProps(props, context.getArrowTipProps()));
 </script>

package/dist/popover/arrow-tip.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface PopoverArrowTipProps 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/popover/arrow.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 PopoverArrowProps extends HtmlIngredientProps<'div'> {}
+  export interface PopoverArrowProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {usePopoverContext} from './context.svelte.js';
+  import {popoverContext} from './context.svelte.js';
 
   let {children, ...props}: PopoverArrowProps = $props();
 
-  let context = usePopoverContext();
+  let context = popoverContext.get();
 
   let attrs = $derived(mergeProps(props, context.getArrowProps()));
 </script>

package/dist/popover/arrow.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface PopoverArrowProps 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/popover/close-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 PopoverCloseTriggerProps
-    extends HtmlIngredientProps<'button'> {}
+  export interface PopoverCloseTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {usePopoverContext} from './context.svelte.js';
+  import {popoverContext} from './context.svelte.js';
 
   let {children, ...props}: PopoverCloseTriggerProps = $props();
 
-  let context = usePopoverContext();
+  let context = popoverContext.get();
 
   let attrs = $derived(mergeProps(props, context.getCloseTriggerProps()));
 </script>

package/dist/popover/close-trigger.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface PopoverCloseTriggerProps 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/popover/content.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 PopoverContentProps extends HtmlIngredientProps<'div'> {}
+  export interface PopoverContentProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {usePopoverContext} from './context.svelte.js';
+  import {popoverContext} from './context.svelte.js';
 
   let {children, ...props}: PopoverContentProps = $props();
 
-  let context = usePopoverContext();
+  let context = popoverContext.get();
 
   let attrs = $derived(mergeProps(props, context.getContentProps()));
 </script>

package/dist/popover/content.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface PopoverContentProps 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/popover/context.svelte.d.ts

@@ -1,8 +1,3 @@
-import * as popover from '@zag-js/popover';
-export interface CreatePopoverContextProps extends popover.Context {
-}
-export interface CreatePopoverContextReturn extends ReturnType<typeof createPopoverContext> {
-}
-export declare function createPopoverContext(props: CreatePopoverContextProps): any;
-export declare function setPopoverContext(value: CreatePopoverContextReturn): void;
-export declare function usePopoverContext(): CreatePopoverContextReturn;
+import { Context } from '../utils.svelte.js';
+import type { CreatePopoverReturn } from './create-popover.svelte.js';
+export declare const popoverContext: Context<CreatePopoverReturn>;

package/dist/popover/context.svelte.js

@@ -1,14 +1,2 @@
-import * as popover from '@zag-js/popover';
-import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getContext, setContext } from 'svelte';
-export function createPopoverContext(props) {
-    const [state, send] = useMachine(popover.machine(props));
-    const api = $derived(reflect(() => popover.connect(state, send, normalizeProps)));
-    return api;
-}
-export function setPopoverContext(value) {
-    setContext('Popover', value);
-}
-export function usePopoverContext() {
-    return getContext('Popover');
-}
+import { Context } from '../utils.svelte.js';
+export const popoverContext = new Context('Popover');

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

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

package/dist/popover/create-popover.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 popover from '@zag-js/popover';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+export function createPopover(props) {
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(popover.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
+        'open.controlled': props.open != null,
+    }));
+    const api = $derived(reflect(() => popover.connect(state, send, normalizeProps)));
+    return api;
+}

package/dist/popover/description.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 PopoverDescriptionProps extends HtmlIngredientProps<'div'> {}
+  export interface PopoverDescriptionProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {usePopoverContext} from './context.svelte.js';
+  import {popoverContext} from './context.svelte.js';
 
   let {children, ...props}: PopoverDescriptionProps = $props();
 
-  let context = usePopoverContext();
+  let context = popoverContext.get();
 
   let attrs = $derived(mergeProps(props, context.getDescriptionProps()));
 </script>