ui-ingredients 0.0.20 → 0.0.21

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/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/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/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/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.21",
   "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",