ui-ingredients 0.0.20 → 0.0.22

package/dist/tags-input/index.js

@@ -1,2 +1 @@
-export { anatomy as tagsInputAnatomy } from '@zag-js/tags-input';
 export * as TagsInput from './tags-input.js';

package/dist/tags-input/input.svelte

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

package/dist/tags-input/item-delete-trigger.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: TagsInputItemDeleteTriggerProps = $props();
 
-  let context = tagsInputContext.get();
-
+  let tagsInput = tagsInputContext.get();
   let itemProps = tagsInputItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemDeleteTriggerProps(itemProps)));
+  let attrs = $derived(mergeProps(props, tagsInput.getItemDeleteTriggerProps(itemProps)));
 </script>
 
 <button type="button" {...attrs}>

package/dist/tags-input/item-input.svelte

@@ -10,11 +10,10 @@
 
   let {...props}: TagsInputItemInputProps = $props();
 
-  let context = tagsInputContext.get();
-
+  let tagsInput = tagsInputContext.get();
   let itemProps = tagsInputItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemInputProps(itemProps)));
+  let attrs = $derived(mergeProps(props, tagsInput.getItemInputProps(itemProps)));
 </script>
 
 <input {...attrs} />

package/dist/tags-input/item-preview.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: TagsInputItemPreviewProps = $props();
 
-  let context = tagsInputContext.get();
-
+  let tagsInput = tagsInputContext.get();
   let itemProps = tagsInputItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemPreviewProps(itemProps)));
+  let attrs = $derived(mergeProps(props, tagsInput.getItemPreviewProps(itemProps)));
 </script>
 
 <div {...attrs}>

package/dist/tags-input/item-text.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: TagsInputItemTextProps = $props();
 
-  let context = tagsInputContext.get();
-
+  let tagsInput = tagsInputContext.get();
   let itemProps = tagsInputItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemTextProps(itemProps)));
+  let attrs = $derived(mergeProps(props, tagsInput.getItemTextProps(itemProps)));
 </script>
 
 <span {...attrs}>

package/dist/tags-input/item.svelte

@@ -22,16 +22,15 @@
     ...props
   }: TagsInputItemProps = $props();
 
-  let context = tagsInputContext.get();
-
+  let tagsInput = tagsInputContext.get();
   let itemProps = $derived({
     index,
     value,
     disabled,
   });
 
-  let state = $derived(context.getItemState(itemProps));
-  let attrs = $derived(mergeProps(props, context.getItemProps(itemProps)));
+  let state = $derived(tagsInput.getItemState(itemProps));
+  let attrs = $derived(mergeProps(props, tagsInput.getItemProps(itemProps)));
 
   tagsInputItemPropsContext.set(() => itemProps);
 </script>

package/dist/tags-input/label.svelte

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

package/dist/tags-input/root.svelte

@@ -5,7 +5,7 @@
 
   export interface TagsInputProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateTagsInputProps> {
-    children?: Snippet<[api: CreateTagsInputReturn]>;
+    children?: Snippet<[tagsInput: CreateTagsInputReturn]>;
   }
 </script>
 
@@ -46,7 +46,7 @@
     ...props
   }: TagsInputProps = $props();
 
-  let context = createTagsInputt({
+  let tagsInput = createTagsInputt({
     id,
     ids,
     max,
@@ -76,11 +76,11 @@
     onPointerDownOutside,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, tagsInput.getRootProps()));
 
-  tagsInputContext.set(context);
+  tagsInputContext.set(tagsInput);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(tagsInput)}
 </div>

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

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

package/dist/tags-input/tags-input.js

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

package/dist/timer/action-trigger.svelte

@@ -12,9 +12,9 @@
 
   let {action, children, ...props}: TimerActionTriggerProps = $props();
 
-  let context = timerContext.get();
+  let timer = timerContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getActionTriggerProps({action})));
+  let attrs = $derived(mergeProps(props, timer.getActionTriggerProps({action})));
 </script>
 
 <button type="button" {...attrs}>

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

@@ -3,11 +3,11 @@ import { createUniqueId } from '../utils.svelte.js';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as timer from '@zag-js/timer';
 export function createTimer(props) {
-    const environmentContext = getEnvironmentContext();
+    const environment = getEnvironmentContext();
     const [state, send] = useMachine(timer.machine({
         ...props,
         id: props.id ?? createUniqueId(),
-        getRootNode: environmentContext?.getRootNode,
+        getRootNode: environment?.getRootNode,
     }));
     const api = $derived(reflect(() => timer.connect(state, send, normalizeProps)));
     return api;

package/dist/timer/item-label.svelte

@@ -10,11 +10,10 @@
 
   let {children, ...props}: TimerItemLabelProps = $props();
 
-  let context = timerContext.get();
-
+  let timer = timerContext.get();
   let itemProps = timerItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemLabelProps(itemProps)));
+  let attrs = $derived(mergeProps(props, timer.getItemLabelProps(itemProps)));
 </script>
 
 <span {...attrs}>

package/dist/timer/item-value.svelte

@@ -10,17 +10,16 @@
 
   let {children, ...props}: TimerItemValueProps = $props();
 
-  let context = timerContext.get();
-
+  let timer = timerContext.get();
   let itemProps = timerItemPropsContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getItemValueProps(itemProps)));
+  let attrs = $derived(mergeProps(props, timer.getItemValueProps(itemProps)));
 </script>
 
 <span {...attrs}>
   {#if children}
     {@render children?.()}
   {:else}
-    {context.formattedTime[itemProps.type]}
+    {timer.formattedTime[itemProps.type]}
   {/if}
 </span>

package/dist/timer/item.svelte

@@ -11,13 +11,12 @@
 
   let {type, children, ...props}: TimerItemProps = $props();
 
-  let context = timerContext.get();
-
+  let timer = timerContext.get();
   let itemProps = $derived({
     type,
   });
 
-  let attrs = $derived(mergeProps(props, context.getItemProps(itemProps)));
+  let attrs = $derived(mergeProps(props, timer.getItemProps(itemProps)));
 
   timerItemPropsContext.set(() => itemProps);
 </script>

package/dist/timer/root.svelte

@@ -4,7 +4,7 @@
   import type {CreateTimerProps, CreateTimerReturn} from './create-timer.svelte.js';
 
   export interface TimerProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateTimerProps> {
-    children?: Snippet<[api: CreateTimerReturn]>;
+    children?: Snippet<[timer: CreateTimerReturn]>;
   }
 </script>
 
@@ -26,7 +26,7 @@
     ...props
   }: TimerProps = $props();
 
-  let context = createTimer({
+  let timer = createTimer({
     id,
     startMs,
     targetMs,
@@ -37,11 +37,11 @@
     onComplete,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, timer.getRootProps()));
 
-  timerContext.set(context);
+  timerContext.set(timer);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(timer)}
 </div>

package/dist/timer/separator.svelte

@@ -10,9 +10,9 @@
 
   let {children, ...props}: TimerSeparatorProps = $props();
 
-  let context = timerContext.get();
+  let timer = timerContext.get();
 
-  let attrs = $derived(mergeProps(props, context.getSeparatorProps()));
+  let attrs = $derived(mergeProps(props, timer.getSeparatorProps()));
 </script>
 
 <span {...attrs}>

package/dist/timer/timer.d.ts

@@ -1,3 +1,4 @@
+export { parse } from '@zag-js/timer';
 export { default as ActionTrigger } from './action-trigger.svelte';
 export { default as ItemLabel } from './item-label.svelte';
 export { default as ItemValue } from './item-value.svelte';

package/dist/timer/timer.js

@@ -1,3 +1,4 @@
+export { parse } from '@zag-js/timer';
 export { default as ActionTrigger } from './action-trigger.svelte';
 export { default as ItemLabel } from './item-label.svelte';
 export { default as ItemValue } from './item-value.svelte';

package/dist/toast/create-toaster.svelte.js

@@ -4,13 +4,13 @@ import { createUniqueId } from '../utils.svelte.js';
 import { normalizeProps, reflect } from '@zag-js/svelte';
 import * as toast from '@zag-js/toast';
 export function createToaster(props) {
-    const localContext = getLocaleContext();
-    const environmentContext = getEnvironmentContext();
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
     const machine = $derived(toast.group.machine({
         ...props,
         id: props?.id ?? createUniqueId(),
-        dir: localContext?.dir,
-        getRootNode: environmentContext?.getRootNode,
+        dir: locale?.dir,
+        getRootNode: environment?.getRootNode,
     }));
     const api = $derived(reflect(() => ({
         machine,

package/dist/toast/index.d.ts

@@ -1,9 +1,8 @@
-export { anatomy as toastAnatomy } from '@zag-js/toast';
-export { type ToastActionTriggerProps } from './action-trigger.svelte';
-export { type ToastCloseTriggerProps } from './close-trigger.svelte';
-export { createToaster, type CreateToasterProps, type CreateToasterReturn, } from './create-toaster.svelte.js';
-export { type ToastDescriptionProps } from './description.svelte';
-export { type ToastProps } from './root.svelte';
-export { type ToastTitleProps } from './title.svelte';
 export * as Toast from './toast.js';
+export type { ToastActionTriggerProps } from './action-trigger.svelte';
+export type { ToastCloseTriggerProps } from './close-trigger.svelte';
+export type { ToastDescriptionProps } from './description.svelte';
+export type { ToastProps } from './root.svelte';
+export type { ToastTitleProps } from './title.svelte';
+export { createToaster, type CreateToasterProps, type CreateToasterReturn, } from './create-toaster.svelte.js';
 export { default as Toaster, type ToasterProps } from './toaster.svelte';

package/dist/toast/index.js

@@ -1,9 +1,3 @@
-export { anatomy as toastAnatomy } from '@zag-js/toast';
-export {} from './action-trigger.svelte';
-export {} from './close-trigger.svelte';
-export { createToaster, } from './create-toaster.svelte.js';
-export {} from './description.svelte';
-export {} from './root.svelte';
-export {} from './title.svelte';
 export * as Toast from './toast.js';
+export { createToaster, } from './create-toaster.svelte.js';
 export { default as Toaster } from './toaster.svelte';

package/dist/toast/toast.d.ts

@@ -1,5 +1,6 @@
-export { default as ActionTrigger, type ToastActionTriggerProps } from './action-trigger.svelte';
-export { default as CloseTrigger, type ToastCloseTriggerProps } from './close-trigger.svelte';
-export { default as Description, type ToastDescriptionProps } from './description.svelte';
-export { default as Root, type ToastProps } from './root.svelte';
-export { default as Title, type ToastTitleProps } from './title.svelte';
+export { anatomy } from '@zag-js/toast';
+export { default as ActionTrigger } from './action-trigger.svelte';
+export { default as CloseTrigger } from './close-trigger.svelte';
+export { default as Description } from './description.svelte';
+export { default as Root } from './root.svelte';
+export { default as Title } from './title.svelte';

package/dist/toast/toast.js

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/toast';
 export { default as ActionTrigger } from './action-trigger.svelte';
 export { default as CloseTrigger } from './close-trigger.svelte';
 export { default as Description } from './description.svelte';

package/dist/toggle-group/create-toggle-group.svelte.js

@@ -4,13 +4,13 @@ import { createUniqueId } from '../utils.svelte.js';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as toggleGroup from '@zag-js/toggle-group';
 export function createToggleGroup(props) {
-    const localeContext = getLocaleContext();
-    const environmentContext = getEnvironmentContext();
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
     const [state, send] = useMachine(toggleGroup.machine({
         ...props,
         id: props.id ?? createUniqueId(),
-        dir: localeContext?.dir,
-        getRootNode: environmentContext?.getRootNode,
+        dir: locale?.dir,
+        getRootNode: environment?.getRootNode,
     }));
     const api = $derived(reflect(() => toggleGroup.connect(state, send, normalizeProps)));
     return api;

package/dist/toggle-group/index.d.ts

@@ -1,4 +1,3 @@
-export { anatomy as toggleGroupAnatomy } from '@zag-js/toggle-group';
+export * as ToggleGroup from './toggle-group.js';
 export type { ToggleGroupItemProps } from './item.svelte';
 export type { ToggleGroupProps } from './root.svelte';
-export * as ToggleGroup from './toggle-group.js';

package/dist/toggle-group/index.js

@@ -1,2 +1 @@
-export { anatomy as toggleGroupAnatomy } from '@zag-js/toggle-group';
 export * as ToggleGroup from './toggle-group.js';

package/dist/toggle-group/item.svelte

@@ -15,15 +15,14 @@
 
   let {value, disabled, children, ...props}: ToggleGroupItemProps = $props();
 
-  let context = toggleGroupContext.get();
-
+  let toggleGroup = toggleGroupContext.get();
   let itemProps = $derived({
     value,
     disabled,
   });
 
-  let state = $derived(context.getItemState(itemProps));
-  let attrs = $derived(mergeProps(props, context.getItemProps(itemProps)));
+  let state = $derived(toggleGroup.getItemState(itemProps));
+  let attrs = $derived(mergeProps(props, toggleGroup.getItemProps(itemProps)));
 </script>
 
 <button type="button" {...attrs}>

package/dist/toggle-group/root.svelte

@@ -31,7 +31,7 @@
     ...props
   }: ToggleGroupProps = $props();
 
-  let context = createToggleGroup({
+  let toggleGroup = createToggleGroup({
     id,
     ids,
     value: $state.snapshot(value),
@@ -43,11 +43,11 @@
     onValueChange,
   });
 
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, toggleGroup.getRootProps()));
 
-  toggleGroupContext.set(context);
+  toggleGroupContext.set(toggleGroup);
 </script>
 
 <div {...attrs}>
-  {@render children?.(context)}
+  {@render children?.(toggleGroup)}
 </div>

package/dist/toggle-group/toggle-group.d.ts

@@ -1,2 +1,3 @@
+export { anatomy } from '@zag-js/toggle-group';
 export { default as Item } from './item.svelte';
 export { default as Root } from './root.svelte';

package/dist/toggle-group/toggle-group.js

@@ -1,2 +1,3 @@
+export { anatomy } from '@zag-js/toggle-group';
 export { default as Item } from './item.svelte';
 export { default as Root } from './root.svelte';

package/dist/tooltip/arrow-tip.svelte

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

package/dist/tooltip/arrow.svelte

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

package/dist/tooltip/content.svelte

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

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

@@ -4,14 +4,14 @@ import { createUniqueId } from '../utils.svelte.js';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as tooltip from '@zag-js/tooltip';
 export function createTooltip(props) {
-    const localeContext = getLocaleContext();
-    const environmentContext = getEnvironmentContext();
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
     const [state, send] = useMachine(tooltip.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(() => tooltip.connect(state, send, normalizeProps)));

package/dist/tooltip/index.d.ts

@@ -1,8 +1,7 @@
-export { anatomy as tooltipAnatomy } from '@zag-js/tooltip';
+export * as Tooltip from './tooltip.js';
 export type { TooltipArrowTipProps } from './arrow-tip.svelte';
 export type { TooltipArrowProps } from './arrow.svelte';
 export type { TooltipContentProps } from './content.svelte';
 export type { TooltipPositionerProps } from './positioner.svelte';
 export type { TooltipProps } from './root.svelte';
-export * as Tooltip from './tooltip.js';
 export type { TooltipTriggerProps } from './trigger.svelte';

package/dist/tooltip/index.js

@@ -1,2 +1 @@
-export { anatomy as tooltipAnatomy } from '@zag-js/tooltip';
 export * as Tooltip from './tooltip.js';

package/dist/tooltip/positioner.svelte

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

package/dist/tooltip/root.svelte

@@ -3,7 +3,7 @@
   import type {CreateTooltipProps, CreateTooltipReturn} from './create-tooltip.svelte.js';
 
   export interface TooltipProps extends CreateTooltipProps {
-    children?: Snippet<[api: CreateTooltipReturn]>;
+    children?: Snippet<[tooltip: CreateTooltipReturn]>;
   }
 </script>
 
@@ -13,9 +13,9 @@
 
   let {children, ...props}: TooltipProps = $props();
 
-  let context = createTooltip(props);
+  let tooltip = createTooltip(props);
 
-  tooltipContext.set(context);
+  tooltipContext.set(tooltip);
 </script>
 
-{@render children?.(context)}
+{@render children?.(tooltip)}

package/dist/tooltip/tooltip.d.ts

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/tooltip';
 export { default as ArrowTip } from './arrow-tip.svelte';
 export { default as Arrow } from './arrow.svelte';
 export { default as Content } from './content.svelte';

package/dist/tooltip/tooltip.js

@@ -1,3 +1,4 @@
+export { anatomy } from '@zag-js/tooltip';
 export { default as ArrowTip } from './arrow-tip.svelte';
 export { default as Arrow } from './arrow.svelte';
 export { default as Content } from './content.svelte';

package/dist/tooltip/trigger.svelte

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-ingredients",
   "type": "module",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -87,6 +87,7 @@
   "dependencies": {
     "@internationalized/date": "3.5.5",
     "@zag-js/accordion": "0.65.1",
+    "@zag-js/anatomy": "0.65.1",
     "@zag-js/avatar": "0.65.1",
     "@zag-js/carousel": "0.65.1",
     "@zag-js/checkbox": "0.65.1",
@@ -99,6 +100,7 @@
     "@zag-js/dom-query": "0.65.1",
     "@zag-js/editable": "0.65.1",
     "@zag-js/file-upload": "0.65.1",
+    "@zag-js/floating-panel": "0.65.1",
     "@zag-js/hover-card": "0.65.1",
     "@zag-js/i18n-utils": "0.65.1",
     "@zag-js/menu": "0.65.1",
@@ -120,10 +122,12 @@
     "@zag-js/switch": "0.65.1",
     "@zag-js/tabs": "0.65.1",
     "@zag-js/tags-input": "0.65.1",
+    "@zag-js/time-picker": "0.65.1",
     "@zag-js/timer": "0.65.1",
     "@zag-js/toast": "0.65.1",
     "@zag-js/toggle-group": "0.65.1",
     "@zag-js/tooltip": "0.65.1",
+    "@zag-js/tour": "0.65.1",
     "@zag-js/tree-view": "0.65.1",
     "uid": "2.0.2"
   },