ui-ingredients 0.0.20 → 0.0.22

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

@@ -10,9 +10,9 @@
 
   let {children, ...props}: NumberInputIncrementTriggerProps = $props();
 
-  let context = numberInputContext.get();
+  let numberInput = numberInputContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getIncrementTriggerProps()));
+  let attrs = $derived(mergeProps(props, numberInput.getIncrementTriggerProps()));
 </script>
 
 <button type="button" {...attrs}>

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

@@ -1,9 +1,8 @@
-export { anatomy as numberInputAnatomy } from '@zag-js/number-input';
+export * as NumberInput from './number-input.js';
 export type { NumberInputControlTriggerProps } from './control.svelte';
 export type { NumberInputDecrementTriggerProps } from './decrement-trigger.svelte';
 export type { NumberInputIncrementTriggerProps } from './increment-trigger.svelte';
 export type { NumberInputInputProps } from './input.svelte';
 export type { NumberInputLabelProps } from './label.svelte';
-export * as NumberInput from './number-input.js';
 export type { NumberInputProps } from './root.svelte';
 export type { NumberInputScrubberProps } from './scrubber.svelte';

package/dist/number-input/index.js

@@ -1,2 +1 @@
-export { anatomy as numberInputAnatomy } from '@zag-js/number-input';
 export * as NumberInput from './number-input.js';

package/dist/number-input/input.svelte

@@ -10,9 +10,9 @@
 
   let {...props}: NumberInputInputProps = $props();
 
-  let context = numberInputContext.get();
+  let numberInput = numberInputContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getInputProps()));
+  let attrs = $derived(mergeProps(props, numberInput.getInputProps()));
 </script>
 
 <input {...attrs} />

package/dist/number-input/label.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: NumberInputLabelProps = $props();
 
-  let context = numberInputContext.get();
+  let numberInput = numberInputContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getLabelProps()));
+  let attrs = $derived(mergeProps(props, numberInput.getLabelProps()));
 </script>
 
 <label {...attrs}>

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

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/number-input';
 export { default as Control } from './control.svelte';
 export { default as DecrementTrigger } from './decrement-trigger.svelte';
 export { default as IncrementTrigger } from './increment-trigger.svelte';

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

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/number-input';
 export { default as Control } from './control.svelte';
 export { default as DecrementTrigger } from './decrement-trigger.svelte';
 export { default as IncrementTrigger } from './increment-trigger.svelte';

package/dist/number-input/root.svelte

@@ -8,7 +8,7 @@
 
   export interface NumberInputProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateNumberInputProps> {
-    children?: Snippet<[api: CreateNumberInputReturn]>;
+    children?: Snippet<[numberInput: CreateNumberInputReturn]>;
   }
 </script>
 
@@ -26,6 +26,7 @@
     name,
     form,
     value,
+    locale,
     pattern,
     invalid,
     disabled,
@@ -46,7 +47,7 @@
     ...props
   }: NumberInputProps = $props();
 
-  let context = createNumberInput({
+  let numberInput = createNumberInput({
     id,
     ids,
     max,
@@ -55,6 +56,7 @@
     name,
     form,
     value: $state.snapshot(value),
+    locale,
     pattern,
     invalid,
     disabled,
@@ -73,11 +75,11 @@
     onValueInvalid,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, numberInput.getRootProps()));
 
-  numberInputContext.set(context);
+  numberInputContext.set(numberInput);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(numberInput)}
 </div>

package/dist/number-input/scrubber.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: NumberInputScrubberProps = $props();
 
-  let context = numberInputContext.get();
+  let numberInput = numberInputContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getScrubberProps()));
+  let attrs = $derived(mergeProps(props, numberInput.getScrubberProps()));
 </script>
 
 <div {...attrs}>

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

@@ -4,13 +4,13 @@ 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 locale = getLocaleContext();
+    const environment = getEnvironmentContext();
     const [state, send] = useMachine(pagination.machine({
         ...props,
         id: props.id ?? createUniqueId(),
-        dir: localeContext?.dir,
-        getRootNode: environmentContext?.getRootNode,
+        dir: locale?.dir,
+        getRootNode: environment?.getRootNode,
     }));
     const api = $derived(reflect(() => pagination.connect(state, send, normalizeProps)));
     return api;

package/dist/pagination/ellipsis.svelte

@@ -11,9 +11,9 @@
 
   let {index, children, ...props}: PaginationEllipsisProps = $props();
 
-  let context = paginationContext.get();
+  let pagination = paginationContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getEllipsisProps({index})));
+  let attrs = $derived(mergeProps(props, pagination.getEllipsisProps({index})));
 </script>
 
 <span {...attrs}>

package/dist/pagination/index.d.ts

@@ -1,7 +1,6 @@
-export { anatomy as paginationAnatomy } from '@zag-js/pagination';
+export * as Pagination from './pagination.js';
 export type { PaginationEllipsisProps } from './ellipsis.svelte';
 export type { PaginationItemProps } from './item.svelte';
 export type { PaginationNextTriggerProps } from './next-trigger.svelte';
-export * as Pagination from './pagination.js';
 export type { PaginationPrevTriggerProps } from './prev-trigger.svelte';
 export type { PaginationProps } from './root.svelte';

package/dist/pagination/index.js

@@ -1,2 +1 @@
-export { anatomy as paginationAnatomy } from '@zag-js/pagination';
 export * as Pagination from './pagination.js';

package/dist/pagination/item.svelte

@@ -12,12 +12,12 @@
 
   let {value, children, ...props}: PaginationItemProps = $props();
 
-  let context = paginationContext.get();
+  let pagination = paginationContext.get();
 
   let attrs = $derived(
     mergeProps(
       props,
-      context.getItemProps({
+      pagination.getItemProps({
         type: 'page',
         value,
       }),

package/dist/pagination/next-trigger.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: PaginationNextTriggerProps = $props();
 
-  let context = paginationContext.get();
+  let pagination = paginationContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getNextTriggerProps()));
+  let attrs = $derived(mergeProps(props, pagination.getNextTriggerProps()));
 </script>
 
 <button type="button" {...attrs}>

package/dist/pagination/pagination.d.ts

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/pagination';
 export { default as Ellipsis } from './ellipsis.svelte';
 export { default as Item } from './item.svelte';
 export { default as NextTrigger } from './next-trigger.svelte';

package/dist/pagination/pagination.js

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/pagination';
 export { default as Ellipsis } from './ellipsis.svelte';
 export { default as Item } from './item.svelte';
 export { default as NextTrigger } from './next-trigger.svelte';

package/dist/pagination/prev-trigger.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: PaginationPrevTriggerProps = $props();
 
-  let context = paginationContext.get();
+  let pagination = paginationContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getPrevTriggerProps()));
+  let attrs = $derived(mergeProps(props, pagination.getPrevTriggerProps()));
 </script>
 
 <button type="button" {...attrs}>

package/dist/pagination/root.svelte

@@ -5,7 +5,7 @@
 
   export interface PaginationProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreatePaginationProps> {
-    children?: Snippet<[api: CreatePaginationReturn]>;
+    children?: Snippet<[pagination: CreatePaginationReturn]>;
   }
 </script>
 
@@ -29,7 +29,7 @@
     ...props
   }: PaginationProps = $props();
 
-  let context = createPagination({
+  let pagination = createPagination({
     id,
     ids,
     type,
@@ -42,11 +42,11 @@
     onPageSizeChange,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, pagination.getRootProps()));
 
-  paginationContext.set(context);
+  paginationContext.set(pagination);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(pagination)}
 </div>

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

@@ -9,14 +9,14 @@
 
   let {children, onclick, ...props}: PinInputClearTriggerProps = $props();
 
-  let context = pinInputContext.get();
+  let pinInput = pinInputContext.get();
 </script>
 
 <button
   type="button"
   onclick={(e) => {
     onclick?.(e);
-    context.clearValue();
+    pinInput.clearValue();
   }}
   {...props}
 >

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

@@ -4,13 +4,13 @@ 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 locale = getLocaleContext();
+    const environment = getEnvironmentContext();
     const [state, send] = useMachine(pinInput.machine({
         ...props,
         id: props.id ?? createUniqueId(),
-        dir: localeContext?.dir,
-        getRootNode: environmentContext?.getRootNode,
+        dir: locale?.dir,
+        getRootNode: environment?.getRootNode,
     }));
     const api = $derived(reflect(() => pinInput.connect(state, send, normalizeProps)));
     return api;

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

@@ -10,9 +10,9 @@
 
   let {...props}: PinInputHiddenInputProps = $props();
 
-  let context = pinInputContext.get();
+  let pinInput = pinInputContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getHiddenInputProps()));
+  let attrs = $derived(mergeProps(props, pinInput.getHiddenInputProps()));
 </script>
 
 <input {...attrs} />

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

@@ -1,7 +1,6 @@
-export { anatomy as pinInputAnatomy } from '@zag-js/pin-input';
+export * as PinInput from './pin-input.js';
 export type { PinInputClearTriggerProps } from './clear-trigger.svelte';
 export type { PinInputHiddenInputProps } from './hidden-input.svelte';
 export type { PinInputInputProps } from './input.svelte';
 export type { PinInputLabelProps } from './label.svelte';
-export * as PinInput from './pin-input.js';
 export type { PinInputProps } from './root.svelte';

package/dist/pin-input/index.js

@@ -1,2 +1 @@
-export { anatomy as pinInputAnatomy } from '@zag-js/pin-input';
 export * as PinInput from './pin-input.js';

package/dist/pin-input/input.svelte

@@ -11,9 +11,9 @@
 
   let {index, ...props}: PinInputInputProps = $props();
 
-  let context = pinInputContext.get();
+  let pinInput = pinInputContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getInputProps({index})));
+  let attrs = $derived(mergeProps(props, pinInput.getInputProps({index})));
 </script>
 
 <input {...attrs} />

package/dist/pin-input/label.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: PinInputLabelProps = $props();
 
-  let context = pinInputContext.get();
+  let pinInput = pinInputContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getLabelProps()));
+  let attrs = $derived(mergeProps(props, pinInput.getLabelProps()));
 </script>
 
 <label {...attrs}>

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

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/pin-input';
 export { default as ClearTrigger } from './clear-trigger.svelte';
 export { default as HiddenInput } from './hidden-input.svelte';
 export { default as Input } from './input.svelte';

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

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/pin-input';
 export { default as ClearTrigger } from './clear-trigger.svelte';
 export { default as HiddenInput } from './hidden-input.svelte';
 export { default as Input } from './input.svelte';

package/dist/pin-input/root.svelte

@@ -5,7 +5,7 @@
 
   export interface PinInputProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreatePinInputProps> {
-    children?: Snippet<[api: CreatePinInputReturn]>;
+    children?: Snippet<[pinInput: CreatePinInputReturn]>;
   }
 </script>
 
@@ -40,7 +40,7 @@
     ...props
   }: PinInputProps = $props();
 
-  let context = createPinInputContext({
+  let pinInput = createPinInputContext({
     id,
     ids,
     otp,
@@ -64,11 +64,11 @@
     onValueComplete,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, pinInput.getRootProps()));
 
-  pinInputContext.set(context);
+  pinInputContext.set(pinInput);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(pinInput)}
 </div>

package/dist/popover/arrow-tip.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: PopoverArrowTipProps = $props();
 
-  let context = popoverContext.get();
+  let popover = popoverContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getArrowTipProps()));
+  let attrs = $derived(mergeProps(props, popover.getArrowTipProps()));
 </script>
 
 <div {...attrs}>

package/dist/popover/arrow.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: PopoverArrowProps = $props();
 
-  let context = popoverContext.get();
+  let popover = popoverContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getArrowProps()));
+  let attrs = $derived(mergeProps(props, popover.getArrowProps()));
 </script>
 
 <div {...attrs}>

package/dist/popover/close-trigger.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: PopoverCloseTriggerProps = $props();
 
-  let context = popoverContext.get();
+  let popover = popoverContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getCloseTriggerProps()));
+  let attrs = $derived(mergeProps(props, popover.getCloseTriggerProps()));
 </script>
 
 <button type="button" {...attrs}>

package/dist/popover/content.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: PopoverContentProps = $props();
 
-  let context = popoverContext.get();
+  let popover = popoverContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getContentProps()));
+  let attrs = $derived(mergeProps(props, popover.getContentProps()));
 </script>
 
 <div {...attrs}>

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

@@ -4,14 +4,14 @@ 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 locale = getLocaleContext();
+    const environment = getEnvironmentContext();
     const [state, send] = useMachine(popover.machine({
         ...props,
         id: props.id ?? createUniqueId(),
-        dir: localeContext?.dir,
+        dir: locale?.dir,
         open: props.defaultOpen,
-        getRootNode: environmentContext?.getRootNode,
+        getRootNode: environment?.getRootNode,
         'open.controlled': props.open != null,
     }));
     const api = $derived(reflect(() => popover.connect(state, send, normalizeProps)));

package/dist/popover/description.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: PopoverDescriptionProps = $props();
 
-  let context = popoverContext.get();
+  let popover = popoverContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getDescriptionProps()));
+  let attrs = $derived(mergeProps(props, popover.getDescriptionProps()));
 </script>
 
 <div {...attrs}>

package/dist/popover/index.d.ts

@@ -1,10 +1,9 @@
-export { anatomy as popoverAnatomy } from '@zag-js/popover';
+export * as Popover from './popover.js';
 export type { PopoverArrowTipProps } from './arrow-tip.svelte';
 export type { PopoverArrowProps } from './arrow.svelte';
 export type { PopoverCloseTriggerProps } from './close-trigger.svelte';
 export type { PopoverContentProps } from './content.svelte';
 export type { PopoverDescriptionProps } from './description.svelte';
-export * as Popover from './popover.js';
 export type { PopoverPositionerProps } from './positioner.svelte';
 export type { PopoverProps } from './root.svelte';
 export type { PopoverTitleProps } from './title.svelte';

package/dist/popover/index.js

@@ -1,2 +1 @@
-export { anatomy as popoverAnatomy } from '@zag-js/popover';
 export * as Popover from './popover.js';

package/dist/popover/popover.d.ts

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/popover';
 export { default as ArrowTip } from './arrow-tip.svelte';
 export { default as Arrow } from './arrow.svelte';
 export { default as CloseTrigger } from './close-trigger.svelte';

package/dist/popover/popover.js

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/popover';
 export { default as ArrowTip } from './arrow-tip.svelte';
 export { default as Arrow } from './arrow.svelte';
 export { default as CloseTrigger } from './close-trigger.svelte';

package/dist/popover/positioner.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: PopoverPositionerProps = $props();
 
-  let context = popoverContext.get();
+  let popover = popoverContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getPositionerProps()));
+  let attrs = $derived(mergeProps(props, popover.getPositionerProps()));
 </script>
 
 <div {...attrs}>

package/dist/popover/root.svelte

@@ -3,7 +3,7 @@
   import type {CreatePopoverProps, CreatePopoverReturn} from './create-popover.svelte.js';
 
   export interface PopoverProps extends CreatePopoverProps {
-    children?: Snippet<[api: CreatePopoverReturn]>;
+    children?: Snippet<[popover: CreatePopoverReturn]>;
   }
 </script>
 
@@ -13,9 +13,9 @@
 
   let {children, ...props}: PopoverProps = $props();
 
-  let context = createPopover(props);
+  let popover = createPopover(props);
 
-  popoverContext.set(context);
+  popoverContext.set(popover);
 </script>
 
-{@render children?.(context)}
+{@render children?.(popover)}

package/dist/popover/title.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: PopoverTitleProps = $props();
 
-  let context = popoverContext.get();
+  let popover = popoverContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getTitleProps()));
+  let attrs = $derived(mergeProps(props, popover.getTitleProps()));
 </script>
 
 <div {...attrs}>

package/dist/popover/trigger.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: PopoverTriggerProps = $props();
 
-  let context = popoverContext.get();
+  let popover = popoverContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getTriggerProps()));
+  let attrs = $derived(mergeProps(props, popover.getTriggerProps()));
 </script>
 
 <button type="button" {...attrs}>

package/dist/portal/root.svelte

@@ -14,17 +14,15 @@
 
   let {container, disabled, children}: PortalProps = $props();
 
-  let environmentContext = getEnvironmentContext();
+  let environment = getEnvironmentContext();
 </script>
 
 <div
   use:portal={{
     disabled,
     container,
-    getRootNode: environmentContext?.getRootNode,
+    getRootNode: environment?.getRootNode,
   }}
-  data-scope="portal"
-  data-part="root"
 >
   {@render children?.()}
 </div>

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

@@ -0,0 +1,10 @@
+import * as presence from '@zag-js/presence';
+export interface CreatePresenceProps extends presence.Context {
+}
+export declare function createPresence(props: CreatePresenceProps): {
+    ref: (node: HTMLElement) => void;
+    getRootProps: () => {
+        hidden: boolean;
+        'data-state': string;
+    };
+};

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

@@ -0,0 +1,19 @@
+import * as presence from '@zag-js/presence';
+import { normalizeProps, useMachine } from '@zag-js/svelte';
+export function createPresence(props) {
+    const [state, send] = useMachine(presence.machine(props));
+    const api = $derived(presence.connect(state, send, normalizeProps));
+    function ref(node) {
+        api.setNode(node);
+    }
+    function getRootProps() {
+        return {
+            hidden: !api.present,
+            'data-state': api.present ? 'open' : 'closed',
+        };
+    }
+    return {
+        ref,
+        getRootProps,
+    };
+}